bitbake: toastergui: changes for the Project page, round 3 of reviews

This patch implements the round 3 of reviews for the Project
page, including fixing the time display, fixing the build list
display, with fade-in and fade-out animations, and various
small layout fixes.

[YOCTO #6587]
[YOCTO #6731]

(Bitbake rev: 09e3ba8f800a03de731b022543cae33a46be17ef)

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

4 files changed, 244 insertions, 68 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index fb20fc9241..da9697c408 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -113,6 +113,9 @@ select { width: auto; }
 .top-air { margin-top: 40px;}
 .progress { margin-bottom: 0px; }
 .lead .badge { font-size: 18px; font-weight: normal; border-radius: 15px; padding: 9px; }
+.lead ol > li, .lead ul > li {
+    line-height: 35px;
+}
 .well > .lead, .alert .lead { margin-bottom: 0px; }
 .well-transparent { background-color: transparent; }
 .no-results { margin: 10px 0; }
@@ -191,3 +194,27 @@ dd > span { line-height: 20px; }
 .new-build form { margin: 5px 0 0; }
 .new-build .input-append { margin-bottom: 0; }
 #build-selected { margin-top: 15px; }
+
+
+.animate-repeat {
+  list-style:none;
+  box-sizing:border-box;
+}
+
+.animate-repeat.ng-move,
+.animate-repeat.ng-enter,
+.animate-repeat.ng-leave {
+  -webkit-transition:all linear 0.5s;
+  transition:all linear 0.5s;
+}
+
+.animate-repeat.ng-leave.ng-leave-active,
+.animate-repeat.ng-move,
+.animate-repeat.ng-enter {
+  opacity:0;
+}
+
+.animate-repeat.ng-leave,
+.animate-repeat.ng-enter.ng-enter-active {
+  opacity:1;
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectapp.js b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
index b347451e88..356b92fc5a 100644
--- a/bitbake/lib/toaster/toastergui/static/js/projectapp.js
+++ b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
@@ -74,17 +74,34 @@ angular_formpost = function($httpProvider) {
  *
  * no return
  */
-function _diffArrays(oldArray, newArray, compareElements, onAdded, onDeleted ) {
-    if (onDeleted !== undefined) {
-        oldArray.filter(function (e) { var found = 0; newArray.map(function (f) { if (compareElements(e, f)) {found = 1};}); return !found;}).map(onDeleted);
+function _diffArrays(existingArray, newArray, compareElements, onAdded, onDeleted ) {
+    var added = [];
+    var removed = [];
+    newArray.forEach( function( newElement, newIndex, _newArray) {
+        var existingIndex = existingArray.findIndex(function ( existingElement, _existingIndex, _existingArray ) {
+                                return compareElements(newElement, existingElement);
+                            });
+        if (existingIndex < 0 && onAdded) { added.push(newElement); }
+    });
+    existingArray.forEach( function( existingElement, existingIndex, _existingArray) {
+        var newIndex = newArray.findIndex(function ( newElement, _newIndex, _newArray ) {
+                                return compareElements(newElement, existingElement);
+                            });
+        if (newIndex < 0 && onDeleted) { removed.push(existingElement); }
+    });
+
+    if (onAdded) {
+        added.map(onAdded);
     }
-    if (onAdded !== undefined) {
-        newArray.filter(function (e) { var found = 0; oldArray.map(function (f) { if (compareElements(e, f)) {found = 1};}); return !found;}).map(onAdded);
+
+    if (onDeleted) {
+        removed.map(onDeleted);
     }
+
 }
 
 
-var projectApp = angular.module('project', ['ui.bootstrap', 'ngCookies'],  angular_formpost);
+var projectApp = angular.module('project', ['ngCookies', 'ngAnimate', 'ui.bootstrap' ],  angular_formpost);
 
 // modify the template tag markers to prevent conflicts with Django
 projectApp.config(function($interpolateProvider) {
@@ -111,7 +128,7 @@ projectApp.filter('timediff', function() {
 
 
 // main controller for the project page
-projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $location, $cookies, $q, $sce) {
+projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $location, $cookies, $q, $sce, $anchorScroll, $animate) {
 
     $scope.getSuggestions = function(type, currentValue) {
         var deffered = $q.defer();
@@ -159,40 +176,65 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
                 deffered.reject(_data.error);
             }
             else {
-                // TODO: update screen data if we have fields here
 
                 if (_data.builds !== undefined) {
-
-                    var oldbuilds = $scope.builds;
-                    $scope.builds = _data.builds;
-
-                    // identify canceled builds here, so we can display them.
-                    _diffArrays(oldbuilds, $scope.builds,
-                        function (e,f) { return e.id == f.id },                         // compare
-                        undefined,                                                      // added
-                        function (e) {                                                  // deleted
-                            if (e.status == "deleted") return;
-                            e.status = "deleted";
-                            for (var i = 0; i < $scope.builds.length; i++)  {
-                                if ($scope.builds[i].status == "queued" && $scope.builds[i].id > e.id)
-                                    continue;
-                                $scope.builds.splice(i, 0, e);
-                                break;
-                            }
-                        });
+                    var toDelete = [];
+                    // step 1 - delete entries not found
+                    $scope.builds.forEach(function (elem) {
+                        if (-1 == _data.builds.findIndex(function (elemX) { return elemX.id == elem.id && elemX.status == elem.status; })) {
+                            toDelete.push(elem);
+                        }
+                    });
+                    toDelete.forEach(function (elem) {
+                        $scope.builds.splice($scope.builds.indexOf(elem),1);
+                    });
+                    // step 2 - merge new entries
+                    _data.builds.forEach(function (elem) {
+                        var found = false;
+                        var i = 0;
+                        for (i = 0 ; i < $scope.builds.length; i ++) {
+                            if ($scope.builds[i].id > elem.id) continue;
+                            if ($scope.builds[i].id == elem.id) { found=true; break;}
+                            if ($scope.builds[i].id < elem.id) break;
+                        }
+                        if (!found) {
+                            $scope.builds.splice(i, 0, elem);
+                        }
+                    });
 
                 }
                 if (_data.layers !== undefined) {
-                    var oldlayers = $scope.layers;
-                    $scope.layers = _data.layers;
 
-                    // show added/deleted layer notifications
                     var addedLayers = [];
                     var deletedLayers = [];
-                    _diffArrays( oldlayers, $scope.layers, function (e, f) { return e.id == f.id },
-                        function (e) { console.log("new layer", e);addedLayers.push(e); },
-                        function (e) { console.log("del layer", e);deletedLayers.push(e); });
 
+                    // step 1 - delete entries not found
+                    $scope.layers.forEach(function (elem) {
+                        if (-1 == _data.layers.findIndex(function (elemX) { return elemX.id == elem.id && elemX.name == elem.name; })) {
+                            deletedLayers.push(elem);
+                        }
+                    });
+                    deletedLayers.forEach(function (elem) {
+                            $scope.layers.splice($scope.layers.indexOf(elem),1);
+                    });
+                    // step 2 - merge new entries
+                    _data.layers.forEach(function (elem) {
+                        var found = false;
+                        var i;
+                        for (i = 0 ; i < $scope.layers.length; i ++) {
+                            if ($scope.layers[i].orderid < elem.orderid) continue;
+                            if ($scope.layers[i].orderid == elem.orderid) {
+                                found = true; break;
+                            }
+                            if ($scope.layers[i].orderid > elem.orderid) break;
+                        }
+                        if (!found) {
+                            $scope.layers.splice(i, 0, elem);
+                            addedLayers.push(elem);
+                        }
+                    });
+
+                    // step 3 - display alerts.
                     if (addedLayers.length > 0) {
                         $scope.displayAlert($scope.zone2alerts, "You have added <b>"+addedLayers.length+"</b> layer" + ((addedLayers.length>1)?"s: ":": ") + addedLayers.map(function (e) { return "<a href=\""+e.layerdetailurl+"\">"+e.name+"</a>" }).join(", "), "alert-info");
                     }
@@ -253,7 +295,7 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
     }
 
     $scope.targetNamedBuild = function(target) {
-        if ($scope.targetName === undefined){
+        if ($scope.targetName === undefined && $scope.targetName1 === undefined){
             alert("No target defined, please type in a target name");
             return;
         }
@@ -263,17 +305,26 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
         $scope._makeXHRCall({
             method: "POST", url: $scope.urls.xhr_build,
             data : {
-                targets: $scope.targetName
+                targets: $scope.safeTargetName,
             }
         }).then(function (data) {
             console.log("received ", data);
             $scope.targetName = undefined;
+            $scope.targetName1 = undefined;
+            $location.hash('buildslist');
+            // call $anchorScroll()
+            $anchorScroll();
         });
     }
 
     $scope.sanitizeTargetName = function() {
-        if (undefined === $scope.targetName) return;
-        $scope.targetName = $scope.targetName.replace(/\[.*\]/, '').trim();
+        $scope.safeTargetName = undefined;
+        if (undefined === $scope.targetName) $scope.safeTargetName = $scope.targetName1;
+        if (undefined === $scope.targetName1) $scope.safeTargetName = $scope.targetName;
+
+        if (undefined === $scope.safeTargetName) return;
+
+        $scope.safeTargetName = $scope.safeTargetName.replace(/\[.*\]/, '').trim();
     }
 
     $scope.buildCancel = function(id) {
@@ -285,6 +336,16 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
         });
     }
 
+    $scope.buildDelete = function(id) {
+        $scope._makeXHRCall({
+            method: "POST", url: $scope.urls.xhr_build,
+            data: {
+                buildDelete: id,
+            }
+        });
+    }
+
+
     $scope.onLayerSelect = function (item, model, label) {
         $scope.layerAddId = item.id;
     }
@@ -413,6 +474,7 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
         console.log("edit with ", elementid);
         var alertText = undefined;
         var alertZone = undefined;
+        var oldLayers = [];
         switch(elementid) {
             case '#select-machine':
                 alertText = "You have changed the machine to: <b>" + $scope.machineName + "</b>";
@@ -428,25 +490,61 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
                 data['projectVersion'] = $scope.projectVersion;
                 alertText = "You have changed the release to: ";
                 alertZone = $scope.zone3alerts;
+                // save old layers
+                oldLayers = $scope.layers.slice(0);
                 break;
             default:
                 throw "FIXME: implement conversion for element " + elementid;
         }
 
-        console.log("calling edit with ", data);
         $scope._makeXHRCall({
             method: "POST", url: $scope.urls.xhr_edit, data: data,
-        }).then( function () {
+        }).then( function (_data) {
             $scope.toggle(elementid);
             if (data['projectVersion'] != undefined) {
-                alertText += "<b>" + $scope.project.release.name + "</b>";
+                alertText += "<strong>" + $scope.project.release.desc + "</strong>. ";
+            }
+            if (elementid == '#change-project-version') {
+                // requirement https://bugzilla.yoctoproject.org/attachment.cgi?id=2229, notification for changed version to include layers
+                $scope.zone2alerts.forEach(function (e) { e.close() });
+                alertText += "This has caused the following changes in your project layers:<ul>"
+
+                if (_data.layers !== undefined) {
+                    // show added/deleted layer notifications; scope.layers is already updated by this point.
+                    var addedLayers = [];
+                    var deletedLayers = [];
+                    _diffArrays( oldLayers, $scope.layers, function (e, f) { return e.id == f.id },
+                        function (e) {addedLayers.push(e); },
+                        function (e) {deletedLayers.push(e); });
+
+                    // some of the deleted layers are actually replaced (changed) layers
+                    var changedLayers = [];
+                    deletedLayers.forEach(function (e) {
+                        if ( -1 < addedLayers.findIndex(function (f) { return f.name == e.name })) {
+                            changedLayers.push(e);
+                        }
+                    });
+
+                    changedLayers.forEach(function (e) {
+                        deletedLayers.splice(deletedLayers.indexOf(e), 1);
+                    });
+
+                    if (addedLayers.length > 0) {
+                        alertText += "<li><strong>"+addedLayers.length+"</strong> layer" + ((addedLayers.length>1)?"s changed: ":" changed: ") + addedLayers.map(function (e) { return "<a href=\""+e.layerdetailurl+"\">"+e.name+"</a>" }).join(", ") + "</li>";
+                    }
+                    if (deletedLayers.length > 0) {
+                        alertText += "<li><strong>"+deletedLayers.length+"</strong> layer" + ((deletedLayers.length>1)?"s deleted: ":"deleted: ") + deletedLayers.map(function (e) { return "<a href=\""+e.layerdetailurl+"\">"+e.name+"</a>" }).join(", ") + "</li>";
+                    }
+
+                }
+                alertText += "</ul>";
             }
             $scope.displayAlert(alertZone, alertText, "alert-info");
         });
     }
 
 
-    $scope.executeCommands = function() {
+    $scope.updateDisplayWithCommands = function() {
         cmd = $location.path();
 
         function _cmdExecuteWithParam(param, f) {
@@ -524,7 +622,7 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
     // init code
     //
     $scope.init = function() {
-        $scope.pollHandle = $interval(function () { $scope._makeXHRCall({method: "GET", url: $scope.urls.xhr_edit, data: undefined});}, 4000, 0);
+        $scope.pollHandle = $interval(function () { $scope._makeXHRCall({method: "GET", url: $scope.urls.xhr_edit, data: undefined});}, 2000, 0);
     }
 
     $scope.init();
@@ -539,6 +637,8 @@ function test_diff_arrays() {
     _diffArrays([1,2,3], [2,3,4], function(e,f) { return e==f; }, function(e) {console.log("added", e)}, function(e) {console.log("deleted", e);})
 }
 
+// test_diff_arrays();
+
 var s = undefined;
 
 function test_set_alert(text) {
diff --git a/bitbake/lib/toaster/toastergui/templates/project.html b/bitbake/lib/toaster/toastergui/templates/project.html
index 6a812834d3..a8f2d6ad4f 100644
--- a/bitbake/lib/toaster/toastergui/templates/project.html
+++ b/bitbake/lib/toaster/toastergui/templates/project.html
@@ -9,6 +9,7 @@ vim: expandtab tabstop=2
 
 {% block projectinfomain %}
 <script src="{% static "js/angular.min.js" %}"></script>
+<script src="{% static "js/angular-animate.min.js" %}"></script>
 <script src="{% static "js/angular-cookies.min.js" %}"></script>
 <script src="{% static "js/ui-bootstrap-tpls-0.11.0.js" %}"></script>
 
@@ -105,19 +106,21 @@ vim: expandtab tabstop=2
     </form>
   </div>
 
+  <a id="buildslist"></a>
   <h2 class="air" ng-if="builds.length">Latest builds</h2>
-
-  <div class="alert" ng-repeat="b in builds" ng-class="{'queued':'alert-info', 'deleted':'alert-info', 'in progress': 'alert-info', 'failed':'alert-error', 'completed':{'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.build[0].status]}[b.status]"  >
+  <div class="animate-repeat alert"  ng-repeat="b in builds track by b.id" ng-class="{'queued':'alert-info', 'deleted':'alert-info', 'in progress': 'alert-info', 'failed':'alert-error', 'completed':{'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.build[0].status]}[b.status]">
     <div class="row-fluid">
         <switch ng-switch="b.status">
+
           <case ng-switch-when="failed">
-            <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+            <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span></div>
             <div class="row-fluid">
               <div class="air well" ng-repeat="e in b.errors">
-                {[e.type]}: <pre>{[e.msg]}</pre>
+                Error type {[e.type]}: <pre>{[e.msg]}</pre>
               </div>
             </div>
           </case>
+
           <case ng-switch-when="queued">
             <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
             <div class="span4 lead" >Build queued
@@ -125,6 +128,7 @@ vim: expandtab tabstop=2
             </div>
             <button class="btn pull-right btn-info" ng-click="buildCancel(b.id)">Cancel</button>
           </case>
+
           <case ng-switch-when="created">
             <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
             <div class="span6" >
@@ -132,35 +136,56 @@ vim: expandtab tabstop=2
             </div>
             <button class="btn pull-right btn-info" ng-click="buildCancel(b.id)">Cancel</button>
           </case>
+
           <case ng-switch-when="deleted">
             <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
             <div class="span6" id="{[b.id]}-deleted" >
               <span class="lead">Build deleted</span>
             </div>
-            <button class="btn pull-right btn-info" ng-click="builds.splice(builds.indexOf(b), 1)">Close</button>
+            <button class="btn pull-right btn-info" ng-click="buildDelete(b.id)">Close</button>
           </case>
+
+
           <case ng-switch-when="in progress">
-            <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
-            <div class="span4" >
-                <div class="progress" style="margin-top:5px;" data-toggle="tooltip" tooltip="{[b.build[0].completeper]}% of tasks complete">
-                    <div style="width: {[b.build[0].completeper]}%;" class="bar"></div>
+            <switch ng-switch="b.build.length">
+              <case ng-switch-when="0">
+                <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+                <div class="span4 lead">
+                  Checking out layers
                 </div>
-            </div>
-            <div class="lead pull-right">ETA: at {[b.build[0].eta|date:"shortDate"]}</div>
+              </case>
+              <case ng-switch-default="">
+                <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+                <div class="span4 offset1" >
+                  <div class="progress" style="margin-top:5px;" data-toggle="tooltip" tooltip="{[b.build[0].completeper]}% of tasks complete">
+                      <div style="width: {[b.build[0].completeper]}%;" class="bar"></div>
+                  </div>
+                </div>
+                <div class="text-right lead">ETA: {[b.build[0].eta|date:"HH:mm:ss"]}</div>
+              </case>
           </case>
+
+
           <case ng-switch-when="completed">
             <div class="lead span3"><a href="{[b.build[0].build_page_url]}"><span ng-repeat="t in b.targets" ng-include src="'target_display'"></span></a></div>
             <div class="span2 lead">
-             {[b.build[0].completed_on|date:'dd/MM/yy HH:mm']}
+              <ngif ng-if="b.build[0].completed_on - todaydate > 0">
+                 {[b.build[0].completed_on|date:'HH:mm']}
+              </ngif>
+              <ngif ng-if="b.build[0].completed_on - todaydate < 0">
+                 {[b.build[0].completed_on|date:'dd/MM/yy HH:mm']}
+              </ngif>
             </div>
             <div class="span2"><span><a href="{[b.build[0].build_page_url]}#errors" class="lead error" ng-if="b.build[0].errors">{[b.build[0].errors]}</a></span></div>
             <div class="span2"><span><a href="{[b.build[0].build_page_url]}#warnings" class="lead warning" ng-if="b.build[0].warnings">{[b.build[0].warnings]}</a></span></div>
-            <div> <span class="lead">Build time: {[b.build[0].build_time|timediff]}</span>
+            <div> <span class="lead">Build time: <a href="{[b.build[0].build_time_page_url]}">{[b.build[0].build_time|timediff]}</a></span>
                 <button class="btn pull-right" ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.build[0].status]"
                     ng-click="targetExistingBuild(b.targets)">Run again</button>
 
             </div>
           </case>
+
+
           <case ng-switch-default="">
           <div>FIXME!</div>
           </case>
@@ -206,7 +231,7 @@ vim: expandtab tabstop=2
       </form>
       <p><a href="{% url 'layers' %}">View all layers</a> | <a href="{% url 'importlayer' %}">Import layer</a></p>
       <ul class="unstyled configuration-list">
-          <li ng-repeat="l in layers">
+          <li ng-repeat="l in layers track by l.id" class="animate-repeat">
             <a href="{[l.layerdetailurl]}" target="_#" class="layer-info" data-toggle="tooltip" tooltip="{[l.branch.layersource]} | {[l.branch.name]}">{[l.name]} </a>
             <i class="icon-trash" ng-click="layerDel(l.id)" tooltip="Delete"></i>
           </li>
@@ -221,8 +246,8 @@ vim: expandtab tabstop=2
         <i class="icon-question-sign get-help heading-help" title="What you build, often a recipe producing a root file system file (an image). Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i>
       </h3>
         <form ng-submit="targetNamedBuild()" class="input-append">
-          <input type="text" class="input-xlarge" placeholder="Type the target(s) you want to build" autocomplete="off" data-minLength="1"  ng-model="targetName" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length">
-          <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName.length">
+          <input type="text" class="input-xlarge" placeholder="Type the target(s) you want to build" autocomplete="off" data-minLength="1"  ng-model="targetName1" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length">
+          <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName1.length">
             Build </button>
           {% csrf_token %}
         </form>
@@ -343,13 +368,16 @@ angular.element(document).ready(function() {
   scope.machine = {{machine|safe}};
   scope.releases = {{releases|safe}};
 
+  var now = (new Date()).getTime();
+  scope.todaydate = now - (now % 86400000);
+
   scope.zone1alerts = [];
   scope.zone2alerts = [];
   scope.zone3alerts = [];
 
   scope.mostBuiltTargets = {};
 
-  scope.executeCommands();
+  scope.updateDisplayWithCommands();
   scope.validateData();
 
   scope.$digest();
diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py
index fb8075067a..3b29dbcfb2 100755
--- a/bitbake/lib/toaster/toastergui/views.py
+++ b/bitbake/lib/toaster/toastergui/views.py
@@ -1943,11 +1943,13 @@ if toastermain.settings.MANAGED:
                             "completed_on" : y.completed_on.strftime('%s')+"000",
                             "build_time" : (y.completed_on - y.started_on).total_seconds(),
                             "build_page_url" : reverse('builddashboard', args=(y.pk,)),
+                            'build_time_page_url': reverse('buildtime', args=(y.pk,)),
                             "errors": y.errors_no,
                             "warnings": y.warnings_no,
                             "completeper": y.completeper(),
-                            "eta": y.eta().ctime()}, Build.objects.filter(buildrequest = x)),
-            }, prj.buildrequest_set.order_by("-pk")[:5])
+                            "eta": y.eta().strftime('%s')+"000"}, Build.objects.filter(buildrequest = x)),
+            }, list(prj.buildrequest_set.filter(Q(state__lt=BuildRequest.REQ_COMPLETED) or Q(state=BuildRequest.REQ_DELETED)).order_by("-pk")) +
+                list(prj.buildrequest_set.filter(state__in=[BuildRequest.REQ_COMPLETED, BuildRequest.REQ_FAILED]).order_by("-pk")[:3]))
 
 
     # Shows the edit project page
@@ -1979,10 +1981,17 @@ if toastermain.settings.MANAGED:
         context = {
             "project" : prj,
             "completedbuilds": Build.objects.filter(project = prj).exclude(outcome = Build.IN_PROGRESS),
-            "prj" : json.dumps({"name": prj.name, "release": { "id": prj.release.pk, "name": prj.release.name}}),
+            "prj" : json.dumps({"name": prj.name, "release": { "id": prj.release.pk, "name": prj.release.name, "desc": prj.release.description}}),
             #"buildrequests" : prj.buildrequest_set.filter(state=BuildRequest.REQ_QUEUED),
             "builds" : json.dumps(_project_recent_build_list(prj)),
-            "layers" :  json.dumps(map(lambda x: {"id": x.layercommit.pk, "name" : x.layercommit.layer.name, "url": x.layercommit.layer.layer_index_url, "layerdetailurl": reverse("layerdetails", args=(x.layercommit.layer.pk,)), "branch" : { "name" : x.layercommit.up_branch.name, "layersource" : x.layercommit.up_branch.layer_source.name}}, prj.projectlayer_set.all())),
+            "layers" :  json.dumps(map(lambda x: {
+                        "id": x.layercommit.pk,
+                        "orderid": x.pk,
+                        "name" : x.layercommit.layer.name,
+                        "url": x.layercommit.layer.layer_index_url,
+                        "layerdetailurl": reverse("layerdetails", args=(x.layercommit.layer.pk,)),
+                        "branch" : { "name" : x.layercommit.up_branch.name, "layersource" : x.layercommit.up_branch.layer_source.name}},
+                    prj.projectlayer_set.all().order_by("id"))),
             "targets" : json.dumps(map(lambda x: {"target" : x.target, "task" : x.task, "pk": x.pk}, prj.projecttarget_set.all())),
             "freqtargets": json.dumps(freqtargets),
             "releases": json.dumps(map(lambda x: {"id": x.pk, "name": x.name}, Release.objects.all())),
@@ -2012,12 +2021,17 @@ if toastermain.settings.MANAGED:
                 for i in request.POST['buildCancel'].strip().split(" "):
                     try:
                         br = BuildRequest.objects.select_for_update().get(project = prj, pk = i, state__lte = BuildRequest.REQ_QUEUED)
-                        print "selected for delete", br.pk
-                        br.delete()
-                        print "selected for delete", br.pk
+                        br.state = BuildRequest.REQ_DELETED
+                        br.save()
                     except BuildRequest.DoesNotExist:
                         pass
 
+            if 'buildDelete' in request.POST:
+                for i in request.POST['buildDelete'].strip().split(" "):
+                    try:
+                        br = BuildRequest.objects.select_for_update().get(project = prj, pk = i, state__lte = BuildRequest.REQ_DELETED).delete()
+                    except BuildRequest.DoesNotExist:
+                        pass
 
             if 'targets' in request.POST:
                 ProjectTarget.objects.filter(project = prj).delete()
@@ -2054,9 +2068,10 @@ if toastermain.settings.MANAGED:
                 prj.name = request.POST['projectName']
                 prj.save();
 
-
             if 'projectVersion' in request.POST:
                 prj.release = Release.objects.get(pk = request.POST['projectVersion'])
+                # we need to change the bitbake version
+                prj.bitbake_version = prj.release.bitbake_version
                 prj.save()
                 # we need to change the layers
                 for i in prj.projectlayer_set.all():
@@ -2067,13 +2082,19 @@ if toastermain.settings.MANAGED:
                     # get rid of the old entry
                     i.delete()
 
+            if 'machineName' in request.POST:
+                machinevar = prj.projectvariable_set.get(name="MACHINE")
+                machinevar.value=request.POST['machineName']
+                machinevar.save()
+
             # return all project settings
             return HttpResponse(json.dumps( {
                 "error": "ok",
-                "layers" :  map(lambda x: {"id": x.layercommit.pk, "name" : x.layercommit.layer.name, "url": x.layercommit.layer.layer_index_url, "layerdetailurl": reverse("layerdetails", args=(x.layercommit.layer.pk,)), "branch" : { "name" : x.layercommit.up_branch.name, "layersource" : x.layercommit.up_branch.layer_source.name}}, prj.projectlayer_set.all()),
+                "layers" :  map(lambda x: {"id": x.layercommit.pk, "orderid" : x.pk, "name" : x.layercommit.layer.name, "url": x.layercommit.layer.layer_index_url, "layerdetailurl": reverse("layerdetails", args=(x.layercommit.layer.pk,)), "branch" : { "name" : x.layercommit.up_branch.name, "layersource" : x.layercommit.up_branch.layer_source.name}}, prj.projectlayer_set.all().order_by("id")),
                 "builds" : _project_recent_build_list(prj),
                 "variables": map(lambda x: (x.name, x.value), prj.projectvariable_set.all()),
-                "prj": {"name": prj.name, "release": { "id": prj.release.pk, "name": prj.release.name}},
+                "machine": {"name": prj.projectvariable_set.get(name="MACHINE").value},
+                "prj": {"name": prj.name, "release": { "id": prj.release.pk, "name": prj.release.name, "desc": prj.release.description}},
                 }), content_type = "application/json")
 
         except Exception as e: