bitbake: toaster: add build dashboard buttons to edit/create custom images

When a build is viewed in the dashboard, enable users to edit
a custom image which was built during that build, and/or create
a new custom image based on one of the image recipes built during
the build.

Add methods to the Build model to enable querying for the
set of image recipes built during a build.

Add buttons to the dashboard, with the "Edit custom image"
button opening a basic modal for now. The "New custom image"
button opens the existing new custom image modal, but is modified
to show a list of images available as a base for a new custom image.

Add a new function to the new custom image modal's script which
enables multiple potential custom images to be shown as radio
buttons in the dialog (if there is more than 1). Modify existing
code to use this new function.

Add a template filter which allows the queryset of recipes for
a build to be available to client-side scripts, and from there
be used to populate the new custom image modal.

[YOCTO #9123]

(Bitbake rev: 4c49ffd28e41c4597bdac34d5e54c125571a4b95)

Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

bitbake/lib/toaster/toastergui/static/js/layerBtn.js

@@ -76,7 +76,8 @@ function layerBtnsInit() {
     if (imgCustomModal.length == 0)
       throw("Modal new-custom-image not found");
 
-    imgCustomModal.data('recipe', $(this).data('recipe'));
+    var recipe = {id: $(this).data('recipe'), name: null}
+    newCustomImageModalSetRecipes([recipe]);
     imgCustomModal.modal('show');
   });
 }

bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js

@@ -1,33 +1,59 @@
 "use strict";
 
-/* Used for the newcustomimage_modal actions */
+/*
+Used for the newcustomimage_modal actions
+
+The .data('recipe') value on the outer element determines which
+recipe ID is used as the basis for the new custom image recipe created via
+this modal.
+
+Use newCustomImageModalSetRecipes() to set the recipes available as a base
+for the new custom image. This will manage the addition of radio buttons
+to select the base image (or remove the radio buttons, if there is only a
+single base image available).
+*/
 function newCustomImageModalInit(){
 
   var newCustomImgBtn = $("#create-new-custom-image-btn");
   var imgCustomModal = $("#new-custom-image-modal");
   var invalidNameHelp = $("#invalid-name-help");
+  var invalidRecipeHelp = $("#invalid-recipe-help");
   var nameInput = imgCustomModal.find('input');
 
-  var invalidMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
-  var duplicateImageMsg = "An image with this name already exists in this project.";
-  var duplicateRecipeMsg = "A non-image recipe with this name already exists.";
+  var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
+  var duplicateNameMsg = "An image with this name already exists. Image names must be unique.";
+  var invalidBaseRecipeIdMsg = "Please select an image to customise.";
+
+  // capture clicks on radio buttons inside the modal; when one is selected,
+  // set the recipe on the modal
+  imgCustomModal.on("click", "[name='select-image']", function (e) {
+    clearRecipeError();
+
+    var recipeId = $(e.target).attr('data-recipe');
+    imgCustomModal.data('recipe', recipeId);
+  });
 
   newCustomImgBtn.click(function(e){
     e.preventDefault();
 
     var baseRecipeId = imgCustomModal.data('recipe');
 
+    if (!baseRecipeId) {
+      showRecipeError(invalidBaseRecipeIdMsg);
+      return;
+    }
+
     if (nameInput.val().length > 0) {
       libtoaster.createCustomRecipe(nameInput.val(), baseRecipeId,
       function(ret) {
         if (ret.error !== "ok") {
           console.warn(ret.error);
           if (ret.error === "invalid-name") {
-            showError(invalidMsg);
-          } else if (ret.error === "image-already-exists") {
-            showError(duplicateImageMsg);
-          } else if (ret.error === "recipe-already-exists") {
-            showError(duplicateRecipeMsg);
+            showNameError(invalidNameMsg);
+            return;
+          } else if (ret.error === "already-exists") {
+            showNameError(duplicateNameMsg);
+            return;
           }
         } else {
           imgCustomModal.modal('hide');
@@ -37,12 +63,21 @@ function newCustomImageModalInit(){
     }
   });
 
-  function showError(text){
+  function showNameError(text){
     invalidNameHelp.text(text);
     invalidNameHelp.show();
     nameInput.parent().addClass('error');
   }
 
+  function showRecipeError(text){
+    invalidRecipeHelp.text(text);
+    invalidRecipeHelp.show();
+  }
+
+  function clearRecipeError(){
+    invalidRecipeHelp.hide();
+  }
+
   nameInput.on('keyup', function(){
     if (nameInput.val().length === 0){
       newCustomImgBtn.prop("disabled", true);
@@ -50,7 +85,7 @@ function newCustomImageModalInit(){
     }
 
     if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){
-      showError(invalidMsg);
+      showNameError(invalidNameMsg);
       newCustomImgBtn.prop("disabled", true);
       nameInput.parent().addClass('error');
     } else {
@@ -60,3 +95,49 @@ function newCustomImageModalInit(){
     }
   });
 }
+
+// Set the image recipes which can used as the basis for the custom
+// image recipe the user is creating
+//
+// baseRecipes: a list of one or more recipes which can be
+// used as the base for the new custom image recipe in the format:
+// [{'id': <recipe ID>, 'name': <recipe name>'}, ...]
+//
+// if recipes is a single recipe, just show the text box to set the
+// name for the new custom image; if recipes contains multiple recipe objects,
+// show a set of radio buttons so the user can decide which to use as the
+// basis for the new custom image
+function newCustomImageModalSetRecipes(baseRecipes) {
+  var imgCustomModal = $("#new-custom-image-modal");
+  var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]');
+  var imageSelectRadiosContainer = $('#new-custom-image-modal [data-role="image-selector-radios"]');
+
+  if (baseRecipes.length === 1) {
+    // hide the radio button container
+    imageSelector.hide();
+
+    // remove any radio buttons + labels
+    imageSelector.remove('[data-role="image-radio"]');
+
+    // set the single recipe ID on the modal as it's the only one
+    // we can build from
+    imgCustomModal.data('recipe', baseRecipes[0].id);
+  }
+  else {
+    // add radio buttons; note that the handlers for the radio buttons
+    // are set in newCustomImageModalInit via event delegation
+    for (var i = 0; i < baseRecipes.length; i++) {
+      var recipe = baseRecipes[i];
+      imageSelectRadiosContainer.append(
+        '<label class="radio" data-role="image-radio">' +
+        recipe.name +
+        '<input type="radio" class="form-control" name="select-image" ' +
+        'data-recipe="' + recipe.id + '">' +
+        '</label>'
+      );
+    }
+
+    // show the radio button container
+    imageSelector.show();
+  }
+}

bitbake/lib/toaster/toastergui/static/js/recipedetails.js

@@ -9,7 +9,8 @@ function recipeDetailsPageInit(ctx){
     if (imgCustomModal.length === 0)
       throw("Modal new-custom-image not found");
 
-    imgCustomModal.data('recipe', $(this).data('recipe'));
+    var recipe = {id: $(this).data('recipe'), name: null}
+    newCustomImageModalSetRecipes([recipe]);
     imgCustomModal.modal('show');
   });