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>

3 files changed, 178 insertions, 80 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
index ff9433eee7..4a8e2a7abd 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
@@ -1,90 +1,149 @@
 {% extends "base.html" %}
 {% load projecttags %}
 {% load project_url_tag %}
+{% load queryset_to_list_filter %}
 {% load humanize %}
 {% block pagecontent %}
+  <!-- breadcrumbs -->
+  <div class="section">
+    <ul class="breadcrumb" id="breadcrumb">
+      <li><a href="{% project_url build.project %}">{{build.project.name}}</a></li>
+      {% if not build.project.is_default %}
+        <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li>
+      {% endif %}
+      <li>
+        {% block parentbreadcrumb %}
+          <a href="{%url 'builddashboard' build.pk%}">
+            {{build.get_sorted_target_list.0.target}} {% if build.target_set.all.count > 1 %}(+{{build.target_set.all.count|add:"-1"}}){% endif %} {{build.machine}} ({{build.completed_on|date:"d/m/y H:i"}})
+          </a>
+        {% endblock %}
+      </li>
+      {% block localbreadcrumb %}{% endblock %}
+    </ul>
+    <script>
+      $( function () {
+        $('#breadcrumb > li').append('<span class="divider">&rarr;</span>');
+        $('#breadcrumb > li:last').addClass("active");
+        $('#breadcrumb > li:last > span').remove();
+      });
+    </script>
+  </div>
+
+  <div class="row-fluid">
+    <!-- begin left sidebar container -->
+    <div id="nav" class="span2">
+      <ul class="nav nav-list well">
+        <li
+          {% if request.resolver_match.url_name == 'builddashboard'  %}
+            class="active"
+          {% endif %} >
+          <a class="nav-parent" href="{% url 'builddashboard' build.pk %}">Build summary</a>
+        </li>
+        {% if build.target_set.all.0.is_image and build.outcome == 0 %}
+          <li class="nav-header">Images</li>
+          {% block nav-target %}
+            {% for t in build.get_sorted_target_list %}
+              <li><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li>
+            {% endfor %}
+          {% endblock %}
+        {% endif %}
+        <li class="nav-header">Build</li>
+        {% block nav-configuration %}
+          <li><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
+        {% endblock %}
+        {% block nav-tasks %}
+          <li><a href="{% url 'tasks' build.pk %}">Tasks</a></li>
+        {% endblock %}
+        {% block nav-recipes %}
+          <li><a href="{% url 'recipes' build.pk %}">Recipes</a></li>
+        {% endblock %}
+        {% block nav-packages %}
+          <li><a href="{% url 'packages' build.pk %}">Packages</a></li>
+        {% endblock %}
+          <li class="nav-header">Performance</li>
+        {% block nav-buildtime %}
+          <li><a href="{% url 'buildtime' build.pk %}">Time</a></li>
+        {% endblock %}
+        {% block nav-cputime %}
+          <li><a href="{% url 'cputime' build.pk %}">CPU usage</a></li>
+        {% endblock %}
+        {% block nav-diskio %}
+          <li><a href="{% url 'diskio' build.pk %}">Disk I/O</a></li>
+        {% endblock %}
 
+        <li class="divider"></li>
 
- <div class="">
-<!-- Breadcrumbs -->
-    <div class="section">
-        <ul class="breadcrumb" id="breadcrumb">
-            <li><a href="{% project_url build.project %}">{{build.project.name}}</a></li>
-            {% if not build.project.is_default %}
-                <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li>
-            {% endif %}
-            <li>
-            {% block parentbreadcrumb %}
-            <a href="{%url 'builddashboard' build.pk%}">
-              {{build.get_sorted_target_list.0.target}} {%if build.target_set.all.count > 1%}(+{{build.target_set.all.count|add:"-1"}}){%endif%} {{build.machine}} ({{build.completed_on|date:"d/m/y H:i"}})
+        <li>
+          <p class="navbar-btn">
+            <a class="btn btn-block" href="{% url 'build_artifact' build.id 'cookerlog' build.id %}">
+              Download build log
             </a>
-            {% endblock %}
-            </li>
-            {% block localbreadcrumb %}{% endblock %}
-        </ul>
-        <script>
-        $( function () {
-            $('#breadcrumb > li').append('<span class="divider">&rarr;</span>');
-            $('#breadcrumb > li:last').addClass("active");
-            $('#breadcrumb > li:last > span').remove();
-        });
-        </script>
-    </div>
+          </p>
+        </li>
 
-    <div class="row-fluid">
+        <li>
+          <!-- edit custom image built during this build -->
+          <p class="navbar-btn" data-role="edit-custom-image-trigger">
+            <button class="btn btn-block">Edit custom image</button>
+          </p>
+          {% include 'editcustomimage_modal.html' %}
+          <script>
+            $(document).ready(function () {
+              var editableCustomImageRecipes = {{ build.get_custom_image_recipes | queryset_to_list:"id,name" | json }};
 
-        <!-- begin left sidebar container -->
-        <div id="nav" class="span2">
-            <ul class="nav nav-list well">
-              <li
-                {% if request.resolver_match.url_name == 'builddashboard'  %}
-                  class="active"
-                {% endif %} >
-                <a class="nav-parent" href="{% url 'builddashboard' build.pk %}">Build summary</a>
-              </li>
-              {% if build.target_set.all.0.is_image and build.outcome == 0 %}
-                <li class="nav-header">Images</li>
-                {% block nav-target %}
-                  {% for t in build.get_sorted_target_list %}
-                    <li><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li>
-                  {% endfor %}
-                {% endblock %}
-              {% endif %}
-              <li class="nav-header">Build</li>
-              {% block nav-configuration %}
-                  <li><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
-              {% endblock %}
-              {% block nav-tasks %}
-                  <li><a href="{% url 'tasks' build.pk %}">Tasks</a></li>
-              {% endblock %}
-              {% block nav-recipes %}
-                  <li><a href="{% url 'recipes' build.pk %}">Recipes</a></li>
-              {% endblock %}
-              {% block nav-packages %}
-                  <li><a href="{% url 'packages' build.pk %}">Packages</a></li>
-              {% endblock %}
-                  <li class="nav-header">Performance</li>
-              {% block nav-buildtime %}
-                  <li><a href="{% url 'buildtime' build.pk %}">Time</a></li>
-              {% endblock %}
-              {% block nav-cputime %}
-                  <li><a href="{% url 'cputime' build.pk %}">CPU time</a></li>
-              {% endblock %}
-              {% block nav-diskio %}
-                  <li><a href="{% url 'diskio' build.pk %}">Disk I/O</a></li>
-              {% endblock %}
-            </ul>
-        </div>
-        <!-- end left sidebar container -->
+              // edit custom image which was built during this build
+              var editCustomImageModal = $('#edit-custom-image-modal');
+              var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]');
 
-        <!-- Begin right container -->
-        {% block buildinfomain %}{% endblock %}
-        <!-- End right container -->
+              editCustomImageTrigger.click(function () {
+                // if there is a single editable custom image, go direct to the edit
+                // page for it; if there are multiple editable custom images, show
+                // dialog to select one of them for editing
 
+                // single editable custom image
 
-    </div>
-  </div>
+                // multiple editable custom images
+                editCustomImageModal.modal('show');
+              });
+            });
+          </script>
+        </li>
 
+        <li>
+          <!-- new custom image from image recipe in this build -->
+          <p class="navbar-btn" data-role="new-custom-image-trigger">
+            <button class="btn btn-block">New custom image</button>
+          </p>
+          {% include 'newcustomimage_modal.html' %}
+          <script>
+            // imageRecipes includes both custom image recipes and built-in
+            // image recipes, any of which can be used as the basis for a
+            // new custom image
+            var imageRecipes = {{ build.get_image_recipes | queryset_to_list:"id,name" | json }};
 
-{% endblock %}
+            $(document).ready(function () {
+              var newCustomImageModal = $('#new-custom-image-modal');
+              var newCustomImageTrigger = $('[data-role="new-custom-image-trigger"]');
 
+              // show create new custom image modal to select an image built
+              // during this build as the basis for the custom recipe
+              newCustomImageTrigger.click(function () {
+                if (!imageRecipes.length) {
+                  return;
+                }
+                newCustomImageModalSetRecipes(imageRecipes);
+                newCustomImageModal.modal('show');
+              });
+            });
+          </script>
+        </li>
+      </ul>
+
+    </div>
+    <!-- end left sidebar container -->
+
+    <!-- begin right container -->
+    {% block buildinfomain %}{% endblock %}
+    <!-- end right container -->
+  </div>
+{% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html
new file mode 100644
index 0000000000..fd998f63eb
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html
@@ -0,0 +1,23 @@
+<!--
+modal dialog shown on the build dashboard, for editing an existing custom image
+-->
+<div class="modal hide fade in" aria-hidden="false" id="edit-custom-image-modal">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3>Select custom image to edit</h3>
+  </div>
+  <div class="modal-body">
+    <div class="row-fluid">
+      <span class="help-block">
+        Explanation of what this modal is for
+      </span>
+    </div>
+    <div class="control-group controls">
+      <input type="text" class="huge" placeholder="input box" required>
+      <span class="help-block error" style="display:none">Error text</span>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary btn-large" disabled>Action</button>
+  </div>
+</div>
diff --git a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
index b1b5148c08..caeb302352 100644
--- a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
+++ b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
@@ -15,18 +15,34 @@
 <div class="modal hide fade in" id="new-custom-image-modal" aria-hidden="false">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-    <h3>Name your custom image</h3>
+    <h3>New custom image</h3>
   </div>
+
   <div class="modal-body">
+    <!--
+    this container is visible if there are multiple image recipes which could
+    be used as a basis for the new custom image; radio buttons are added to it
+    via newCustomImageModalSetRecipes() as required
+    -->
+    <div data-role="image-selector" style="display:none;">
+      <h4>Which image do you want to customise?</h4>
+      <div data-role="image-selector-radios"></div>
+      <span class="help-block error" id="invalid-recipe-help" style="display:none"></span>
+      <div class="air"></div>
+    </div>
+
+    <h4>Name your custom image</h4>
+
     <div class="row-fluid">
       <span class="help-block span8">Image names must be unique. They should not contain spaces or capital letters, and the only allowed special character is dash (-).<p></p>
       </span></div>
     <div class="control-group controls">
       <input type="text" class="huge" placeholder="Type the custom image name" required>
-        <span class="help-block error" id="invalid-name-help" style="display:none"></span>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="" disabled>Create custom image</button>
+      <span class="help-block error" id="invalid-name-help" style="display:none"></span>
     </div>
+  </div>
+
+  <div class="modal-footer">
+    <button id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="" disabled>Create custom image</button>
+  </div>
 </div>