bitbake: toastergui: Add new project page and navigation

This brings in the new project page design and improved navigation. As
this also removes the dependency on Angular it also required that the
entry points to the project page such as machine-change notifications
are also updated.

[YOCTO #7329]

(Bitbake rev: 6489e6eb5c3b0d59063b6d60521fc33fe563e707)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Ed Bartosh <ed.bartosh@linux.intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

5 files changed, 485 insertions, 49 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/base.js b/bitbake/lib/toaster/toastergui/static/js/base.js
index 6fd77ea457..0fb1f8b6bf 100644
--- a/bitbake/lib/toaster/toastergui/static/js/base.js
+++ b/bitbake/lib/toaster/toastergui/static/js/base.js
@@ -6,13 +6,20 @@ function basePageInit(ctx) {
   var newBuildTargetInput;
   var newBuildTargetBuildBtn;
 
+  /* initially the current project is used unless overridden by the new build
+   * button in top right nav
+   */
   var selectedProject = libtoaster.ctx;
+
   var selectedTarget;
 
   var newBuildProjectInput = $("#new-build-button #project-name-input");
   var newBuildProjectSaveBtn = $("#new-build-button #save-project-button");
 
-  $("#config-nav .nav li a").each(function(){
+
+  _checkProjectBuildable();
+
+  $("#project-topbar .nav li a").each(function(){
     if (window.location.pathname === $(this).attr('href'))
       $(this).parent().addClass('active');
     else
@@ -26,7 +33,7 @@ function basePageInit(ctx) {
     });
   }
 
-    /* Hide the button if we're on the project,newproject or importlyaer page
+  /* Hide the button if we're on the project,newproject or importlyaer page
    * or if there are no projects yet defined
    * only show if there isn't already a build-target-input already
    */
@@ -37,8 +44,8 @@ function basePageInit(ctx) {
     newBuildTargetInput = $("#new-build-button .build-target-input");
     newBuildTargetBuildBtn = $("#new-build-button .build-button");
 
-    newBuildButton.show();
     _setupNewBuildButton();
+    newBuildButton.show();
   } else if ($(".build-target-input").length > 0) {
     newBuildTargetInput = $("#project-topbar .build-target-input");
     newBuildTargetBuildBtn = $("#project-topbar .build-button");
@@ -52,9 +59,35 @@ function basePageInit(ctx) {
     $('#project .icon-pencil').hide();
   }
 
+  libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
+        /* successfully selected a target */
+      selectedTarget = item;
+  });
 
-  _checkProjectBuildable();
+  newBuildTargetInput.on('input', function () {
+    if ($(this).val().length === 0) {
+      newBuildTargetBuildBtn.attr("disabled", "disabled");
+    } else {
+      newBuildTargetBuildBtn.removeAttr("disabled");
+    }
+  });
+
+  newBuildTargetBuildBtn.click(function (e) {
+    e.preventDefault();
+
+    if (!newBuildTargetInput.val()) {
+      return;
+    }
 
+    if (!selectedTarget) {
+      selectedTarget = { name: newBuildTargetInput.val() };
+    }
+    /* Fire off the build */
+    libtoaster.startABuild(selectedProject.projectBuildsUrl,
+      selectedProject.projectId, selectedTarget.name, function(){
+      window.location.replace(selectedProject.projectBuildsUrl);
+    }, null);
+  });
 
   function _checkProjectBuildable() {
     if (selectedProject.projectId === undefined) {
@@ -74,21 +107,12 @@ function basePageInit(ctx) {
           /* we can build this project; enable input fields */
           newBuildTargetInput.prop("disabled", false);
           newBuildTargetBuildBtn.prop("disabled", false);
-
-          libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
-            /* successfully selected a target */
-            selectedProject.projectPageUrl = item.projectPageUrl;
-            selectedProject.projectName = item.name;
-            selectedProject.projectId = item.id;
-            selectedProject.projectBuildsUrl = item.projectBuildsUrl;
-          });
-
-        }
+       }
       }, null);
   }
 
+  /* Setup New build button in the top nav bar */
   function _setupNewBuildButton() {
-    /* Setup New build button */
 
     /* If we don't have a current project then present the set project
      * form.
@@ -98,7 +122,6 @@ function basePageInit(ctx) {
       $('#project .icon-pencil').hide();
     }
 
-
     libtoaster.makeTypeahead(newBuildProjectInput, selectedProject.projectsUrl, { format : "json" }, function (item) {
       /* successfully selected a project */
       newBuildProjectSaveBtn.removeAttr("disabled");
@@ -115,40 +138,16 @@ function basePageInit(ctx) {
       newBuildProjectSaveBtn.attr("disabled", "disabled");
     });
 
-    newBuildTargetInput.on('input', function () {
-      if ($(this).val().length === 0) {
-        newBuildTargetBuildBtn.attr("disabled", "disabled");
-      } else {
-        newBuildTargetBuildBtn.removeAttr("disabled");
-      }
-    });
-
-    newBuildTargetBuildBtn.click(function () {
-      if (!newBuildTargetInput.val()) {
-        return;
-      }
-
-      if (!selectedTarget) {
-        selectedTarget = { name: newBuildTargetInput.val() };
-      }
-      /* fire and forget */
-      libtoaster.startABuild(selectedProject.projectBuildsUrl, selectedProject.projectId, selectedTarget.name, null, null);
-      window.location.replace(selectedProject.projectPageUrl);
-    });
 
     newBuildProjectSaveBtn.click(function () {
       selectedProject.projectId = selectedProject.pk;
       /* Update the typeahead project_id paramater */
       _checkProjectBuildable();
 
-      /* we set the effective context of the page to the currently selected project */
-      /* TBD: do we override even if we already have a context project ?? */
-      /* TODO: replace global library context with references to the "selected" project */
-
-      /* we can create a target typeahead only after we have a project selected */
       newBuildTargetInput.prop("disabled", false);
       newBuildTargetBuildBtn.prop("disabled", false);
 
+      /* Update the typeahead to use the new selectedProject */
       libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
         /* successfully selected a target */
         selectedTarget = item;
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index 560e25a01c..03274c00f3 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -16,8 +16,6 @@ function importLayerPageInit (ctx) {
   var currentLayerDepSelection;
   var validLayerName = /^(\w|-)+$/;
 
-  $("#new-project-button").hide();
-
   libtoaster.makeTypeahead(layerDepInput, libtoaster.ctx.projectLayersUrl, { include_added: "true" }, function(item){
     currentLayerDepSelection = item;
 
@@ -154,7 +152,7 @@ function importLayerPageInit (ctx) {
             } else {
               /* Success layer import now go to the project page */
               $.cookie('layer-imported-alert', JSON.stringify(data), { path: '/'});
-              window.location.replace(libtoaster.ctx.projectPageUrl+'#/layerimported');
+              window.location.replace(libtoaster.ctx.projectPageUrl+'?notify=layer-imported');
             }
           },
           error: function (data) {
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index 291ed98c34..be6bbcd20f 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -16,14 +16,15 @@ function layerDetailsPageInit (ctx) {
   });
 
   $(".breadcrumb li:first a").click(function(e){
+    e.preventDefault();
     /* By default this link goes to the project configuration page. However
      * if we have some builds we go there instead of the default href
      */
     libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){
       if (prjInfo.builds && prjInfo.builds.length > 0) {
         window.location.replace(libtoaster.ctx.projectBuildsUrl);
-        e.preventDefault();
-        return;
+      } else {
+        window.location.replace(libtoaster.ctx.projectPageUrl);
       }
     });
   });
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index afd665ca99..079bbcb0b8 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -79,11 +79,12 @@ var libtoaster = (function (){
         data: data,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function (_data) {
+          /* No proper reponse YOCTO #7995
           if (_data.error !== "ok") {
             console.warn(_data.error);
-          } else {
+          } else { */
             if (onsuccess !== undefined) onsuccess(_data);
-          }
+        //  }
         },
         error: function (_data) {
           console.warn("Call failed");
@@ -180,7 +181,15 @@ var libtoaster = (function (){
           if (onFail !== undefined)
             onFail(data);
         } else {
-          onSuccess(data.layerdeps);
+          var deps = {};
+          /* Filter out layer dep ids which are in the
+           * project already.
+           */
+          deps.list = data.layerdeps.list.filter(function(layerObj){
+            return (data.projectlayers.lastIndexOf(layerObj.id) < 0);
+          });
+
+          onSuccess(deps);
         }
       }, function() {
         console.log("E: Failed to make request");
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectpage.js b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
new file mode 100644
index 0000000000..b7cb074f11
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
@@ -0,0 +1,429 @@
+"use strict";
+
+function projectPageInit(ctx) {
+
+  var layerAddInput = $("#layer-add-input");
+  var layersInPrjList = $("#layers-in-project-list");
+  var layerAddBtn = $("#add-layer-btn");
+
+  var machineChangeInput = $("#machine-change-input");
+  var machineChangeBtn = $("#machine-change-btn");
+  var machineForm = $("#select-machine-form");
+  var machineChangeFormToggle = $("#change-machine-toggle");
+  var machineNameTitle = $("#project-machine-name");
+  var machineChangeCancel = $("#cancel-machine-change");
+
+  var freqBuildBtn =  $("#freq-build-btn");
+  var freqBuildList = $("#freq-build-list");
+
+  var releaseChangeFormToggle = $("#release-change-toggle");
+  var releaseTitle = $("#project-release-title");
+  var releaseForm = $("#change-release-form");
+  var releaseModal = $("#change-release-modal");
+  var cancelReleaseChange = $("#cancel-release-change");
+
+  var currentLayerAddSelection;
+  var currentMachineAddSelection = {};
+
+  var urlParams = libtoaster.parseUrlParams();
+
+  libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){
+    updateProjectLayers(prjInfo.layers);
+    updateFreqBuildRecipes(prjInfo.freqtargets);
+    updateProjectRelease(prjInfo.release);
+    updateProjectReleases(prjInfo.releases, prjInfo.release);
+
+    /* If we're receiving a machine set from the url and it's different from
+     * our current machine then activate set machine sequence.
+     */
+    if (urlParams.hasOwnProperty('setMachine') &&
+        urlParams.setMachine !== prjInfo.machine.name){
+        currentMachineAddSelection.name = urlParams.setMachine;
+        machineChangeBtn.click();
+    } else {
+      updateMachineName(prjInfo.machine.name);
+    }
+
+   /* Now we're really ready show the page */
+    $("#project-page").show();
+  });
+
+  (function notificationRequest(){
+
+    if (urlParams.hasOwnProperty('notify')){
+      switch (urlParams.notify){
+        case 'new-project':
+          $("#project-created-notification").show();
+          break;
+        case 'layer-imported':
+          layerImportedNotification();
+          break;
+        default:
+          break;
+      }
+    }
+  })();
+
+  /* Layer imported notification */
+  function layerImportedNotification(){
+    var imported = $.cookie("layer-imported-alert");
+    var message = "Layer imported";
+
+    if (!imported)
+      return;
+    else
+      imported = JSON.parse(imported);
+
+    if (imported.deps_added.length === 0) {
+      message = "You have imported <strong><a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a></strong> and added it to your project.";
+    } else {
+
+      var links = "<a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a>, ";
+
+      imported.deps_added.map (function(item, index){
+        links +='<a href="'+item.layerdetailurl+'">'+item.name+'</a>';
+        /*If we're at the last element we don't want the trailing comma */
+        if (imported.deps_added[index+1] !== undefined)
+          links += ', ';
+      });
+
+      /* Length + 1 here to do deps + the imported layer */
+      message = 'You have imported <strong><a href="'+imported.imported_layer.layerdetailurl+'">'+imported.imported_layer.name+'</a></strong> and added <strong>'+(imported.deps_added.length+1)+'</strong> layers to your project: <strong>'+links+'</strong>';
+    }
+
+    libtoaster.showChangeNotification(message);
+
+    $.removeCookie("layer-imported-alert", { path: "/"});
+  }
+
+  /* Add/Rm layer functionality */
+
+  libtoaster.makeTypeahead(layerAddInput, libtoaster.ctx.projectLayersUrl, { include_added: "false" }, function(item){
+    currentLayerAddSelection = item;
+    layerAddBtn.removeAttr("disabled");
+  });
+
+  layerAddBtn.click(function(e){
+    e.preventDefault();
+    var layerObj = currentLayerAddSelection;
+
+    addRmLayer(layerObj, true);
+    /* Reset the text input */
+    layerAddInput.val("");
+  });
+
+  function addRmLayer(layerObj, add){
+
+    libtoaster.addRmLayer(layerObj, add, function(layerDepsList){
+      if (add){
+        updateProjectLayers([layerObj]);
+        updateProjectLayers(layerDepsList);
+      }
+
+      /* Show the alert message */
+      var message = libtoaster.makeLayerAddRmAlertMsg(layerObj, layerDepsList, add);
+      libtoaster.showChangeNotification(message);
+    });
+  }
+
+  function updateProjectLayers(layers){
+
+    /* No layers to add */
+    if (layers.length === 0){
+      updateLayersCount();
+      return;
+    }
+
+    for (var i in layers){
+      var layerObj = layers[i];
+
+      var projectLayer = $("<li><a></a><span class=\"icon-trash\" data-toggle=\"tooltip\" title=\"Delete\"></span></li>");
+
+      projectLayer.data('layer', layerObj);
+      projectLayer.children("span").tooltip();
+
+      var link = projectLayer.children("a");
+
+      link.attr("href", layerObj.layerdetailurl);
+      link.text(layerObj.name);
+      /* YOCTO #8024
+        link.tooltip({title: layerObj.giturl + " | "+ layerObj.branch.name, placement: "right"});
+        branch name not accessible sometimes it is revision instead
+      */
+
+      var trashItem = projectLayer.children("span");
+      trashItem.click(function (e) {
+        e.preventDefault();
+        var layerObjToRm = $(this).parent().data('layer');
+
+        addRmLayer(layerObjToRm, false);
+
+        $(this).parent().fadeOut(function (){
+          $(this).remove();
+          updateLayersCount();
+        });
+      });
+
+      layersInPrjList.append(projectLayer);
+
+      updateLayersCount();
+    }
+  }
+
+  function updateLayersCount(){
+    var count = $("#layers-in-project-list").children().length;
+
+    if (count === 0)
+      $("#no-layers-in-project").fadeIn();
+    else
+      $("#no-layers-in-project").hide();
+
+    $("#project-layers-count").text(count);
+
+    return count;
+  }
+
+  /* Frequent builds functionality */
+  function updateFreqBuildRecipes(recipes) {
+    var noMostBuilt = $("#no-most-built");
+
+    if (recipes.length === 0){
+      noMostBuilt.show();
+      freqBuildBtn.hide();
+    } else {
+      noMostBuilt.hide();
+      freqBuildBtn.show();
+    }
+
+    for (var i in recipes){
+      var freqTargetCheck = $('<li><label class="checkbox"><input type="checkbox" /><span class="freq-target-name"></span></label></li>');
+      freqTargetCheck.find(".freq-target-name").text(recipes[i]);
+      freqTargetCheck.find("input").val(recipes[i]);
+      freqTargetCheck.click(function(){
+        if (freqBuildList.find(":checked").length > 0)
+          freqBuildBtn.removeAttr("disabled");
+        else
+          freqBuildBtn.attr("disabled", "disabled");
+      });
+
+      freqBuildList.append(freqTargetCheck);
+    }
+  }
+
+  freqBuildBtn.click(function(e){
+    e.preventDefault();
+
+    var toBuild = "";
+    freqBuildList.find(":checked").each(function(){
+      toBuild += $(this).val();
+      toBuild += " ";
+    });
+
+    libtoaster.startABuild(libtoaster.ctx.projectBuildsUrl, libtoaster.ctx.projectId, toBuild, function(){
+      /* Build started */
+      window.location.replace(libtoaster.ctx.projectBuildsUrl);
+    },
+    function(){
+      /* Build start failed */
+      /* [YOCTO #7995] */
+      window.location.replace(libtoaster.ctx.projectBuildsUrl);
+    });
+  });
+
+
+  /* Change machine functionality */
+
+  machineChangeFormToggle.click(function(){
+    machineForm.slideDown();
+    machineNameTitle.hide();
+    $(this).hide();
+  });
+
+  machineChangeCancel.click(function(){
+    machineForm.slideUp(function(){
+      machineNameTitle.show();
+      machineChangeFormToggle.show();
+    });
+  });
+
+  function updateMachineName(machineName){
+    machineChangeInput.val(machineName);
+    machineNameTitle.text(machineName);
+  }
+
+  libtoaster.makeTypeahead(machineChangeInput, libtoaster.ctx.projectMachinesUrl, { }, function(item){
+    currentMachineAddSelection = item;
+    machineChangeBtn.removeAttr("disabled");
+  });
+
+  machineChangeBtn.click(function(e){
+    e.preventDefault();
+    if (currentMachineAddSelection.name === undefined)
+      return;
+
+    libtoaster.editCurrentProject({ machineName : currentMachineAddSelection.name },
+      function(){
+        /* Success machine changed */
+        updateMachineName(currentMachineAddSelection.name);
+        machineChangeCancel.click();
+
+        /* Show the alert message */
+        var message = $('<span class="lead">You have changed the machine to: <strong><span id="notify-machine-name"></span></strong></span>');
+        message.find("#notify-machine-name").text(currentMachineAddSelection.name);
+        libtoaster.showChangeNotification(message);
+    },
+      function(){
+        /* Failed machine changed */
+        console.log("failed to change machine");
+    });
+  });
+
+
+  /* Change release functionality */
+  function updateProjectRelease(release){
+    releaseTitle.text(release.description);
+  }
+
+  function updateProjectReleases(releases, current){
+    for (var i in releases){
+      var releaseOption = $("<option></option>");
+
+      releaseOption.val(releases[i].id);
+      releaseOption.text(releases[i].description);
+      releaseOption.data('release', releases[i]);
+
+      if (releases[i].id == current.id)
+        releaseOption.attr("selected", "selected");
+
+      releaseForm.children("select").append(releaseOption);
+    }
+  }
+
+  releaseChangeFormToggle.click(function(){
+    releaseForm.slideDown();
+    releaseTitle.hide();
+    $(this).hide();
+  });
+
+  cancelReleaseChange.click(function(e){
+    e.preventDefault();
+    releaseForm.slideUp(function(){
+      releaseTitle.show();
+      releaseChangeFormToggle.show();
+    });
+  });
+
+  function changeProjectRelease(release, layersToRm){
+    libtoaster.editCurrentProject({ projectVersion : release.id },
+      function(){
+        /* Success */
+        /* Update layers list with new layers */
+        layersInPrjList.addClass('muted');
+        libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl,
+            function(prjInfo){
+              layersInPrjList.children().remove();
+              updateProjectLayers(prjInfo.layers);
+              layersInPrjList.removeClass('muted');
+              releaseChangedNotification(release, prjInfo.layers, layersToRm);
+        });
+        updateProjectRelease(release);
+        cancelReleaseChange.click();
+    });
+  }
+
+  /* Create a notification to show the changes to the layer configuration
+   * caused by changing a release.
+   */
+
+  function releaseChangedNotification(release, layers, layersToRm){
+
+    var message;
+
+    if (layers.length === 0 && layersToRm.length === 0){
+      message = $('<span><span class="lead">You have changed the project release to: <strong><span id="notify-release-name"></span></strong>.');
+      message.find("#notify-release-name").text(release.description);
+      libtoaster.showChangeNotification(message);
+      return;
+    }
+
+    /* Create the whitespace separated list of layers removed */
+    var layersDelList = "";
+
+    layersToRm.map(function(layer, i){
+      layersDelList += layer.name;
+      if (layersToRm[i+1] !== undefined)
+        layersDelList += ', ';
+    });
+
+    message = $('<span><span class="lead">You have changed the project release to: <strong><span id="notify-release-name"></span></strong>. This has caused the following changes in your project layers:</span><ul id="notify-layers-changed-list"></ul></span>');
+
+    var changedList = message.find("#notify-layers-changed-list");
+
+    message.find("#notify-release-name").text(release.description);
+
+    /* Manually construct the list item for changed layers */
+    var li = '<li><strong>'+layers.length+'</strong> layers changed to the <strong>'+release.name+'</strong> release: ';
+    for (var i in layers){
+      li += '<a href='+layers[i].layerdetailurl+'>'+layers[i].name+'</a>';
+      if (i !== 0)
+        li += ', ';
+    }
+
+    changedList.append($(li));
+
+    /* Layers removed */
+    if (layersToRm && layersToRm.length > 0){
+      if (layersToRm.length == 1)
+        li = '<li><strong>1</strong> layer deleted: '+layersToRm[0].name+'</li>';
+      else
+        li = '<li><strong>'+layersToRm.length+'</strong> layers deleted: '+layersDelList+'</li>';
+
+      changedList.append($(li));
+    }
+
+    libtoaster.showChangeNotification(message);
+  }
+
+  /* Show the modal dialog which gives the option to remove layers which
+   * aren't compatible with the proposed release
+   */
+  function showReleaseLayerChangeModal(release, layers){
+    var layersToRmList = releaseModal.find("#layers-to-remove-list");
+    layersToRmList.text("");
+
+    releaseModal.find(".proposed-release-change-name").text(release.description);
+    releaseModal.data("layers", layers);
+    releaseModal.data("release", release);
+
+    for (var i in layers){
+      layersToRmList.append($("<li></li>").text(layers[i].name));
+    }
+    releaseModal.modal('show');
+  }
+
+  $("#change-release-btn").click(function(e){
+    e.preventDefault();
+
+    var newRelease = releaseForm.find("option:selected").data('release');
+
+    $.getJSON(ctx.typeaheadUrl,
+      { search: newRelease.id, type: "versionlayers" },
+      function(layers) {
+        if (layers.rows.length === 0){
+          /* No layers to change for this release */
+          changeProjectRelease(newRelease, []);
+        } else {
+          showReleaseLayerChangeModal(newRelease, layers.rows);
+        }
+    });
+  });
+
+  /* Release change modal accept */
+  $("#change-release-and-rm-layers").click(function(){
+    var layers = releaseModal.data("layers");
+    var release =  releaseModal.data("release");
+
+    changeProjectRelease(release, layers);
+  });
+
+}