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>

1 files changed, 141 insertions, 41 deletions

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) {