bitbake: toaster: Port layerdetails to ToasterTables

This ports the layerdetails page to using ToasterTables
Also some whitespace and strict clean ups in the existing layerdetails
js and html template.

(Bitbake rev: 8ce35f81631e31539aeb82f8a85abbb3312e5097)

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

3 files changed, 103 insertions, 47 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index 3c4d632563..3746ea26e3 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -1,4 +1,4 @@
-"use strict"
+"use strict";
 
 function layerDetailsPageInit (ctx) {
 
@@ -54,7 +54,7 @@ function layerDetailsPageInit (ctx) {
 
   /* Add dependency layer button click handler */
   layerDepBtn.click(function(){
-    if (currentLayerDepSelection == undefined)
+    if (currentLayerDepSelection === undefined)
       return;
 
     addRemoveDep(currentLayerDepSelection.id, true, function(){
@@ -122,13 +122,6 @@ function layerDetailsPageInit (ctx) {
     });
   });
 
-  $(".build-target-btn").click(function(){
-    /* fire a build */
-    var target = $(this).data('target-name');
-    libtoaster.startABuild(ctx.projectBuildUrl, libtoaster.ctx.projectId, target, null, null);
-    window.location.replace(libtoaster.ctx.projectPageUrl);
-  });
-
   function defaultAddBtnText(){
       var text = " Add the "+ctx.layerVersion.name+" layer to your project";
       addRmLayerBtn.text(text);
@@ -155,9 +148,48 @@ function layerDetailsPageInit (ctx) {
       }
     }
 
-    window.location.hash = "targets";
+    window.location.hash = "recipes";
   }
 
+  $("#recipestable").on('table-done', function(e, total, tableParams){
+    ctx.numTargets = total;
+
+    if (total === 0 && !tableParams.search) {
+      $("#no-recipes-yet").show();
+    } else {
+      $("#no-recipes-yet").hide();
+    }
+
+    $("#targets-tab").removeClass("muted");
+    if (window.location.hash === "#recipes"){
+      /* re run the machinesTabShow to update the text */
+      targetsTabShow();
+    }
+
+    $(".build-target-btn").unbind('click');
+    $(".build-target-btn").click(function(){
+      /* fire a build */
+      var target = $(this).data('target-name');
+      libtoaster.startABuild(ctx.projectBuildUrl, libtoaster.ctx.projectId, target, null, null);
+      window.location.replace(libtoaster.ctx.projectPageUrl);
+    });
+  });
+
+  $("#machinestable").on('table-done', function(e, total, tableParams){
+    ctx.numMachines = total;
+
+    if (total === 0 && !tableParams.search)
+      $("#no-machines-yet").show();
+    else
+      $("#no-machines-yet").hide();
+
+    $("#machines-tab").removeClass("muted");
+    if (window.location.hash === "#machines"){
+      /* re run the machinesTabShow to update the text */
+      machinesTabShow();
+    }
+  });
+
   $("#targets-tab").on('show', targetsTabShow);
 
   function machinesTabShow(){
@@ -187,7 +219,7 @@ function layerDetailsPageInit (ctx) {
   /* Enables the Build target and Select Machine buttons and switches the
    * add/remove button
    */
-  function setLayerInCurrentPrj(added, depsList) {
+  function setLayerInCurrentPrj(added) {
     ctx.layerVersion.inCurrentPrj = added;
 
     if (added){
@@ -224,18 +256,20 @@ function layerDetailsPageInit (ctx) {
     }
   }
 
-  $("#dismiss-alert").click(function(){ $(this).parent().hide() });
+  $("#dismiss-alert").click(function(){
+    $(this).parent().fadeOut();
+  });
 
   /* Add or remove this layer from the project */
   addRmLayerBtn.click(function() {
 
-    var add = ($(this).data('directive') === "add")
+    var add = ($(this).data('directive') === "add");
 
     libtoaster.addRmLayer(ctx.layerVersion, add, function (layersList){
       var alertMsg = $("#alert-msg");
       alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(ctx.layerVersion, layersList, add));
 
-      setLayerInCurrentPrj(add, layersList);
+      setLayerInCurrentPrj(add);
 
       $("#alert-area").show();
     });
@@ -250,9 +284,9 @@ function layerDetailsPageInit (ctx) {
      * from.
      */
     var entryElement = mParent.find("input");
-    if (entryElement.length == 0)
+    if (entryElement.length === 0)
       entryElement = mParent.find("textarea");
-    if (entryElement.length == 0) {
+    if (entryElement.length === 0) {
       console.warn("Could not find element to get data from for this change");
       return;
     }
@@ -293,7 +327,7 @@ function layerDetailsPageInit (ctx) {
 
   /* Disable the change button when we have no data in the input */
   $("dl input, dl textarea").on("input",function() {
-    if ($(this).val().length == 0)
+    if ($(this).val().length === 0)
       $(this).parent().children(".change-btn").attr("disabled", "disabled");
     else
       $(this).parent().children(".change-btn").removeAttr("disabled");
@@ -322,7 +356,7 @@ function layerDetailsPageInit (ctx) {
   });
 
   /* Hide the right column if it contains no information */
-  if ($("dl.item-info").children(':visible').length == 0) {
+  if ($("dl.item-info").children(':visible').length === 0) {
     $("dl.item-info").parent().hide();
   }
 
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index 1ac26d4c7f..99e1f03095 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -216,6 +216,9 @@ var libtoaster = (function (){
       str += "&";
     }
 
+    /* Maintain the current hash */
+    str += window.location.hash;
+
     return str;
   }
 
diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js b/bitbake/lib/toaster/toastergui/static/js/table.js
index 97370fd020..2e35e3871c 100644
--- a/bitbake/lib/toaster/toastergui/static/js/table.js
+++ b/bitbake/lib/toaster/toastergui/static/js/table.js
@@ -64,10 +64,12 @@ function tableInit(ctx){
 
   function updateTable(tableData) {
     var tableBody = table.children("tbody");
-    var paginationBtns = $('#pagination-'+ctx.tableName);
+    var pagination = $('#pagination-'+ctx.tableName);
+    var paginationBtns = pagination.children('ul');
+    var tableContainer = $("#table-container-"+ctx.tableName);
 
+    tableContainer.css("visibility", "hidden");
     /* To avoid page re-layout flicker when paging set fixed height */
-    table.css("visibility", "hidden");
     table.css("padding-bottom", table.height());
 
     /* Reset table components */
@@ -83,19 +85,30 @@ function tableInit(ctx){
     tableTotal = tableData.total;
 
     if (tableData.total === 0){
-      $("#table-container-"+ctx.tableName).hide();
-      $("#new-search-input-"+ctx.tableName).val(tableParams.search);
-      $("#no-results-"+ctx.tableName).show();
+      tableContainer.hide();
+      /* If we were searching show the new search bar and return */
+      if (tableParams.search){
+        $("#new-search-input-"+ctx.tableName).val(tableParams.search);
+        $("#no-results-"+ctx.tableName).show();
+      }
+      table.trigger("table-done", [tableData.total, tableParams]);
+
       return;
+
+    /* We don't want to clutter the place with the table chrome if there
+     * are only a few results */
+    } else if (tableData.total <= 10 &&
+               !tableParams.filter &&
+               !tableParams.search){
+      $("#table-chrome-"+ctx.tableName).hide();
+      pagination.hide();
     } else {
-      $("#table-container-"+ctx.tableName).show();
+      tableContainer.show();
       $("#no-results-"+ctx.tableName).hide();
     }
 
-
     setupTableChrome(tableData);
 
-
     /* Add table data rows */
     for (var i in tableData.rows){
       var row = $("<tr></tr>");
@@ -137,26 +150,31 @@ function tableInit(ctx){
     var end = tableParams.page + 2;
     var numPages = Math.ceil(tableData.total/tableParams.limit);
 
-    if (tableParams.page < 3)
-      end = 5;
+    if (numPages >  1){
+      if (tableParams.page < 3)
+        end = 5;
 
-    for (var page_i=1; page_i <= numPages;  page_i++){
-      if (page_i >= start && page_i <= end){
-        var btn = $('<li><a href="#" class="page">'+page_i+'</a></li>');
+      for (var page_i=1; page_i <= numPages;  page_i++){
+        if (page_i >= start && page_i <= end){
+          var btn = $('<li><a href="#" class="page">'+page_i+'</a></li>');
 
-        if (page_i === tableParams.page){
-          btn.addClass("active");
-        }
+          if (page_i === tableParams.page){
+            btn.addClass("active");
+          }
 
-        /* Add the click handler */
-        btn.click(pageButtonClicked);
-        paginationBtns.append(btn);
+          /* Add the click handler */
+          btn.click(pageButtonClicked);
+          paginationBtns.append(btn);
+        }
       }
     }
-    table.css("padding-bottom", 0);
+
     loadColumnsPreference();
 
-    $("table").css("visibility", "visible");
+    table.css("padding-bottom", 0);
+    tableContainer.css("visibility", "visible");
+
+    table.trigger("table-done", [tableData.total, tableParams]);
   }
 
   function setupTableChrome(tableData){
@@ -374,9 +392,9 @@ function tableInit(ctx){
         data: params,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function (filterData) {
-          var filterActionRadios = $('#filter-actions');
+          var filterActionRadios = $('#filter-actions-'+ctx.tableName);
 
-          $('#filter-modal-title').text(filterData.title);
+          $('#filter-modal-title-'+ctx.tableName).text(filterData.title);
 
           filterActionRadios.text("");
 
@@ -404,7 +422,7 @@ function tableInit(ctx){
             filterActionRadios.append(action);
           }
 
-          $('#filter-modal').modal('show');
+          $('#filter-modal-'+ctx.tableName).modal('show');
         }
     });
   }
@@ -417,17 +435,18 @@ function tableInit(ctx){
     e.stopPropagation();
   });
 
-  $(".pagesize").val(tableParams.limit);
+  $(".pagesize-"+ctx.tableName).val(tableParams.limit);
 
   /* page size selector  */
-  $(".pagesize").change(function(){
+  $(".pagesize-"+ctx.tableName).change(function(e){
     tableParams.limit = Number(this.value);
     if ((tableParams.page * tableParams.limit) > tableTotal)
       tableParams.page = 1;
 
     loadData(tableParams);
     /* sync the other selectors on the page */
-    $(".pagesize").val(this.value);
+    $(".pagesize-"+ctx.tableName).val(this.value);
+    e.preventDefault();
   });
 
   $("#search-submit-"+ctx.tableName).click(function(e){
@@ -463,12 +482,12 @@ function tableInit(ctx){
     e.preventDefault();
   });
 
-  $("#clear-filter-btn").click(function(){
+  $("#clear-filter-btn-"+ctx.tableName).click(function(){
     tableParams.filter = null;
     loadData(tableParams);
   });
 
-  $("#filter-modal-form").submit(function(e){
+  $("#filter-modal-form-"+ctx.tableName).submit(function(e){
     e.preventDefault();
 
     tableParams.filter = $(this).find("input[type='radio']:checked").val();