bitbake: toaster: Continue front end features to custom image recipe page.

Continuation of the work on the custom image recipe page, this brings
in:

- Basic notification of having added/removed a package.
- Connect up Build button
- Download recipe feature
- No packages states
- Project bread crumb
- Display additional recipe metadata
- Update accessors for recipe object inheritance changes

[YOCTO #8082]

(Bitbake rev: a656756a9255ec5882686ce9563d17f2eb3136e3)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: brian avery <avery.brian@gmail.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

3 files changed, 114 insertions, 70 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/customrecipe.js b/bitbake/lib/toaster/toastergui/static/js/customrecipe.js
index 4f6b304dd6..4cd9382b49 100644
--- a/bitbake/lib/toaster/toastergui/static/js/customrecipe.js
+++ b/bitbake/lib/toaster/toastergui/static/js/customrecipe.js
@@ -3,6 +3,7 @@
 function customRecipePageInit(ctx) {
 
   var urlParams = libtoaster.parseUrlParams();
+  var customiseTable = $("#selectpackagestable");
 
   (function notificationRequest(){
     if (urlParams.hasOwnProperty('notify') && urlParams.notify === 'new'){
@@ -10,7 +11,7 @@ function customRecipePageInit(ctx) {
     }
   })();
 
-  $("#recipeselection").on('table-done', function(e, total, tableParams){
+  customiseTable.on('table-done', function(e, total, tableParams){
     /* Table is done so now setup the click handler for the package buttons */
     $(".add-rm-package-btn").click(function(e){
       e.preventDefault();
@@ -21,30 +22,45 @@ function customRecipePageInit(ctx) {
   function addRemovePackage(pkgBtn, tableParams){
     var pkgBtnData = pkgBtn.data();
     var method;
-    var buttonToShow;
+    var msg = "You have ";
 
     if (pkgBtnData.directive == 'add') {
       method = 'PUT';
-      buttonToShow = '#package-rm-btn-' + pkgBtnData.package;
+      msg += "added 1 package to "+ctx.recipe.name+":";
     } else if (pkgBtnData.directive == 'remove') {
       method = 'DELETE';
-      buttonToShow = '#package-add-btn-' + pkgBtnData.package;
+      msg += "removed 1 package from "+ctx.recipe.name+":";
     } else {
       throw("Unknown package directive: should be add or remove");
     }
 
+    msg += ' <strong>' + pkgBtnData.name + '<strong>';
+
     $.ajax({
         type: method,
         url: pkgBtnData.packageUrl,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function(data){
-          /* Invalidate the Add | Rm package table's current cache */
+          if (data.error !== 'ok'){
+            console.warn(data.error);
+            return;
+          }
+          /* Reload and Invalidate the Add | Rm package table's current data */
           tableParams.nocache = true;
-          $.get(ctx.tableApiUrl, tableParams);
-          /* Swap the buttons around */
-          pkgBtn.hide();
-          $(buttonToShow).show();
+          customiseTable.trigger('reload', [tableParams]);
+
+          libtoaster.showChangeNotification(msg);
         }
     });
   }
+
+  /* Trigger a build of your custom image */
+  $(".build-custom-image").click(function(){
+    libtoaster.startABuild(libtoaster.ctx.projectBuildsUrl,
+      libtoaster.ctx.projectId,
+      ctx.recipe.name,
+      function(){
+        window.location.replace(libtoaster.ctx.projectBuildsUrl);
+    });
+  });
 }
diff --git a/bitbake/lib/toaster/toastergui/templates/customrecipe.html b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
index 823bbd8a1e..2f3aee3686 100644
--- a/bitbake/lib/toaster/toastergui/templates/customrecipe.html
+++ b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
@@ -4,13 +4,29 @@
 {% load static %}
 {% block pagecontent %}
 
-{% include "projecttopbar.html" %}
+<div class="section">
+  <ul class="breadcrumb">
+    <li>
+      <a href="{% url 'project' project.id %}">{{project.name}}</a>
+      <span class="divider">&rarr;</span>
+    </li>
+    <li><a href="{% url 'projectcustomimages' project.id %}">Custom images</a>
+      <span class="divider">&rarr;</span>
+    </li>
+    <li class="active">
+      {{recipe.name}} ({{recipe.layer_version.layer.name}})
+    </li>
+  </ul>
+</div>
 
 <script src="{% static 'js/customrecipe.js' %}"></script>
 <script>
   $(document).ready(function (){
     var ctx = {
-      tableApiUrl: "{% url 'recipeselectpackages' project.id recipe.pk %}?format=json"
+      recipe : {
+        id: {{recipe.pk}},
+        name: "{{recipe.name}}",
+      }
     };
 
     try {
@@ -30,7 +46,7 @@
   <div class="page-header air">
     <h1>
       {{recipe.name}}
-      <small>({{recipe.base_recipe.name}})</small>
+      <small>({{recipe.layer_version.layer.name}})</small>
     </h1>
   </div>
 </div>
@@ -38,44 +54,47 @@
 <div class="row-fluid span11">
   <div class="span8">
     <div class="button-place btn-group" style="width: 100%">
-      <a class="btn btn-large span6" href="#" id="build-custom-image" style="width: 50%">
+      <a class="btn btn-large span6 build-custom-image" href="#" style="width: 50%">
         Build {{recipe.name}}
       </a>
-      <button class="btn btn-large span6" data-toggle="modal" data-target="#download-file" id="download" style="width: 50%">
-      Download recipe file
-    </button>
-  </div>
-  <div id="no-package-results" class="air" style="display:none;">
-    <div class="alert">
-      <h3>No packages found</h3>
-      <p>You might consider <a href="all-software-recipes.html">searching the list of recipes</a> instead. If you find a recipe that matches the name of the package you want:</p>
-      <ol>
-        <li>Add the layer providing the recipe to your project</li>
-        <li>Build the recipe</li>
-        <li>Once the build completes, come back to this page and search for the package</li>
-      </ol>
-      <form class="input-append no-results">
-        <input type="text" class="input-xlarge" value="search query">
-          <a href="#" class="add-on btn">
-            <i class="icon-remove"></i>
-          </a>
-          <button class="btn">Search</button>
-          <button class="btn btn-link" id="show-all">Show all packages</button>
-        </form>
-      </div>
+      <a href="{% url 'customrecipedownload' project.id recipe.id %}" class="btn btn-large span6" style="width: 50%">
+        Download recipe file
+      </a>
     </div>
-    <div id="packages-table">
-      {% url 'recipeselectpackages' project.id recipe.id as xhr_table_url %}
-      {% with 'recipeselection' as table_name %}
-      {% with 'Add | Remove packages' as  title %}
-
-      <h2>{{title}} (<span class="table-count-{{table_name}}"></span>) </h2>
-
-      {% include "toastertable.html" %}
-      {% endwith %}
-      {% endwith %}
+    <div id="no-package-results" class="air" style="display:none;">
+      <div class="alert">
+        <h3>No packages found</h3>
+        <p>You might consider <a href="all-software-recipes.html">searching the list of recipes</a> instead. If you find a recipe that matches the name of the package you want:</p>
+        <ol>
+          <li>Add the layer providing the recipe to your project</li>
+          <li>Build the recipe</li>
+          <li>Once the build completes, come back to this page and search for the package</li>
+        </ol>
+        <form class="input-append no-results">
+          <input type="text" class="input-xlarge" value="search query">
+            <a href="#" class="add-on btn">
+              <i class="icon-remove"></i>
+            </a>
+            <button class="btn">Search</button>
+            <button class="btn btn-link" id="show-all">Show all packages</button>
+          </form>
+        </div>
+      </div>
+      <div id="packages-table">
+        {% if recipe.package_set.count == 0 and last_build == None %}
+        <h2> Add | Remove packages </h2>
+        <div class="alert alert-info air">
+          <p class="lead">Toaster has no package information for {{recipe.name}}. To generate package information, build {{recipe.name}}</p>
+          <button class="btn btn-info btn-large build-custom-recipe" style="margin:20px 0 10px 0;">Build {{recipe.name}}</button>
+        </div>
+        {% else %}
+        {# ToasterTable for Adding remove packages #}
+        {% url 'recipeselectpackages' project.id recipe.id as xhr_table_url %}
+        <h2>{{title}} (<span class="table-count-{{table_name}}">0</span>) </h2>
+        {% include "toastertable.html" %}
+        {% endif %}
+      </div>
     </div>
-  </div>
     <div class="span4 well">
       <h2 style="margin-bottom:20px;">About {{recipe.name}}</h2>
 
@@ -84,59 +103,68 @@
           Approx. packages included
           <i class="icon-question-sign get-help" title="" data-original-title="The number of packages included is based on information from previous builds and from parsing layers, so we can never be sure it is 100% accurate"></i>
         </dt>
-        <dd class="no-packages">{{recipe.packages.count}}</dd>
-        <!-- <dt>
+        <dd class="no-packages">{{recipe.package_set.all.count}}</dd>
+        <dt>
           Approx. package size
           <i class="icon-question-sign get-help" title="" data-original-title="Package size is based on information from previous builds, so we can never be sure it is 100% accurate"></i>
         </dt>
-        <dd>244.3 MB</dd>
+        <dd>{{approx_pkg_size.size__sum|filtered_filesizeformat}}</dd>
+        {% if last_build %}
         <dt>Last build</dt>
         <dd>
           <i class="icon-ok-sign success"></i>
-          <a href="build-dashboard.html">11/06/15 15:22</a>
+          <a href="{% url 'projectbuilds' project.id%}">{{last_build.completed_on|date:"d/m/y H:i"}}</a>
         </dd>
+        {% endif %}
+        <dt>Layer</dt>
+        <dd><a href="{% url 'layerdetails' project.id recipe.layer_version.pk %}">{{recipe.layer_version.layer.name}}</a></dd>
+        <dt>Based on</dt>
+        <dd><a href="{% url 'recipedetails' project.id recipe.base_recipe.pk %}">{{recipe.base_recipe.name}}</a></dd>
+        {% if last_build %}
+        <dt>Last build</dt>
+        <dd>
+          <i class="icon-ok-sign success"></i>
+          <a href="{% url 'projectbuilds' project.id%}">{{last_build.completed_on|date:"d/m/y H:i"}}</a>
+        </dd>
+        {% endif %}
         <dt>Recipe file</dt>
         <dd>
-          <code>custom-image-name.bb</code>
-          <a href="#download-file" data-toggle="modal"><i class="icon-download-alt" title="" data-original-title="Download recipe file"></i></a>
-          </dd> -->
+          <code>{{recipe.name}}_{{recipe.version}}.bb</code>
+          <a href="{% url 'customrecipedownload' project.pk recipe.pk %}"><i class="icon-share" title="" data-original-title="View recipe file"></i></a>
+        </dd>
         <dt>Layer</dt>
-        <!-- TODO recipe details page -->
-        <dd><a href="{% url 'layerdetails' project.id recipe.base_recipe.layer_version.pk %}">{{recipe.base_recipe.layer_version.layer.name}}</a></dd>
-        <!--<dt>
+        <dd><a href="{% url 'layerdetails' project.id recipe.layer_version.pk %}">{{recipe.layer_version.layer.name}}</a></dd>
+        <dt>
           Summary
         </dt>
         <dd>
-          <span class="muted">Not set</span>
-          <i class="icon-pencil" data-original-title="" title=""></i>
+          {{recipe.summary}}
         </dd>
         <dt>
           Description
         </dt>
         <dd>
-          <span class="muted">Not set</span>
-          <i class="icon-pencil" data-original-title="" title=""></i>
+          {{recipe.description}}
         </dd>
         <dt>Version</dt>
         <dd>
-          1.0
-          <i class="icon-pencil" data-original-title="" title=""></i>
+          {{recipe.version}}
         </dd>
         <dt>Section</dt>
         <dd>
-          base
-          <i class="icon-pencil" data-original-title="" title=""></i>
-          <i class="icon-trash" data-original-title="" title=""></i>
+          {{recipe.section}}
         </dd>
         <dt>License</dt>
         <dd>
-          MIT
+          {{recipe.license}}
           <i class="icon-question-sign get-help" title="" data-original-title="All custom images have their license set to MIT. This is because the license applies only to the recipe (.bb) file, and not to the image itself. To see which licenses apply to the image you must check the license manifest generated with each build"></i>
-          </dd> -->
+          </dd>
       </dl>
+      <!--
       <i class="icon-trash no-tooltip"></i>
       <a href="#" class="error" id="delete">Delete custom image</a>
+        -->
     </div>
-</div>
+  </div>
 
   {% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html b/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
index b766aeac93..8723d4ed56 100644
--- a/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
+++ b/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
@@ -1,4 +1,4 @@
-<button class="btn btn-block btn-danger add-rm-package-btn" id="package-rm-btn-{{data.pk}}" data-directive="remove" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" style="
+<button class="btn btn-block btn-danger add-rm-package-btn" data-directive="remove" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style="
   {% if data.pk not in extra.current_packages %}
     display:none
   {% endif %}
@@ -6,7 +6,7 @@
   <i class="icon-trash no-tooltip"></i>
   Remove package
 </a>
-<button class="btn btn-block add-rm-package-btn" data-directive="add" id="package-add-btn-{{data.pk}}" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" style="
+<button class="btn btn-block add-rm-package-btn" data-directive="add" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style="
   {% if data.pk in extra.current_packages %}
     display:none
   {% endif %}