toaster: customrecipe Add dependency tracking to package selection

Update the states of the packages in the package selection UI to reflect
whether it's likely that 1st level dependencies for the package will be
also added.

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: brian avery <avery.brian@gmail.com>

4 files changed, 80 insertions, 31 deletions

diff --git a/lib/toaster/toastergui/static/js/customrecipe.js b/lib/toaster/toastergui/static/js/customrecipe.js
index 33fcb88e9..a1fe4862e 100644
--- a/lib/toaster/toastergui/static/js/customrecipe.js
+++ b/lib/toaster/toastergui/static/js/customrecipe.js
@@ -15,33 +15,33 @@ function customRecipePageInit(ctx) {
     /* Table is done so now setup the click handler for the package buttons */
     $(".add-rm-package-btn").click(function(e){
       e.preventDefault();
-      var pkgBtnData = $(this).data();
+      var targetPkg = $(this).data();
 
-       checkPackageDeps(pkgBtnData, function(pkgData){
-         if (pkgBtnData.directive === 'add'){
+       checkPackageDeps(targetPkg, function(pkgData){
+         if (targetPkg.directive === 'add'){
            /* If we're adding a package we may need to show the modal to advise
             * on dependencies for this package.
             */
            if (pkgData.unsatisfied_dependencies.length === 0){
-             addRemovePackage(pkgBtnData);
+             addRemovePackage(targetPkg);
            } else {
-             showPackageDepsModal(pkgBtnData, pkgData);
+             showPackageDepsModal(targetPkg, pkgData);
            }
-         } else if (pkgBtnData.directive === 'remove') {
+         } else if (targetPkg.directive === 'remove') {
            if (pkgData.reverse_dependencies.length === 0){
-             addRemovePackage(pkgBtnData);
+             addRemovePackage(targetPkg);
            } else {
-             showPackageReverseDepsModal(pkgBtnData, pkgData);
+             showPackageReverseDepsModal(targetPkg, pkgData);
            }
            }
         });
     });
   });
 
-  function checkPackageDeps(pkgBtnData, doneCb){
+  function checkPackageDeps(targetPkg, doneCb){
     $.ajax({
         type: 'GET',
-        url: pkgBtnData.packageUrl,
+        url: targetPkg.packageUrl,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function(data){
           if (data.error !== 'ok'){
@@ -53,12 +53,12 @@ function customRecipePageInit(ctx) {
     });
   }
 
-  function showPackageDepsModal(pkgBtnData, pkgData){
+  function showPackageDepsModal(targetPkg, pkgData){
     var modal = $("#package-deps-modal");
     var depsList = modal.find("#package-add-dep-list");
     var deps = pkgData.unsatisfied_dependencies;
 
-    modal.find(".package-to-add-name").text(pkgBtnData.name);
+    modal.find(".package-to-add-name").text(targetPkg.name);
 
     depsList.text("");
 
@@ -72,7 +72,9 @@ function customRecipePageInit(ctx) {
     modal.find("#package-deps-total-size").text(
       pkgData.unsatisfied_dependencies_size_formatted);
 
-    addPkgDepsModalBtn.data(pkgBtnData);
+    targetPkg.depsAdded = deps;
+
+    addPkgDepsModalBtn.data(targetPkg);
     modal.modal('show');
   }
 
@@ -82,12 +84,12 @@ function customRecipePageInit(ctx) {
     addRemovePackage($(this).data(), null);
   });
 
-  function showPackageReverseDepsModal(pkgBtnData, pkgData){
+  function showPackageReverseDepsModal(targetPkg, pkgData){
     var modal = $("#package-reverse-deps-modal");
     var depsList = modal.find("#package-reverse-dep-list");
     var deps = pkgData.reverse_dependencies;
 
-    modal.find(".package-to-rm-name").text(pkgBtnData.name);
+    modal.find(".package-to-rm-name").text(targetPkg.name);
 
     depsList.text("");
 
@@ -101,7 +103,7 @@ function customRecipePageInit(ctx) {
     modal.find("#package-reverse-deps-total-size").text(
       pkgData.reverse_dependencies_size_formatted);
 
-    rmdPkgReverseDepsModalBtn.data(pkgBtnData);
+    rmdPkgReverseDepsModalBtn.data(targetPkg);
     modal.modal('show');
   }
 
@@ -112,30 +114,58 @@ function customRecipePageInit(ctx) {
   });
 
 
-  function addRemovePackage(pkgBtnData, tableParams){
+  function addRemovePackage(targetPkg, tableParams){
     var method;
     var msg = "You have ";
 
-    var btnCell = $("#package-btn-cell-"+pkgBtnData.package);
+    var btnCell = $("#package-btn-cell-" + targetPkg.id);
     var inlineNotify = btnCell.children(".inline-notification");
 
-    if (pkgBtnData.directive === 'add') {
+    if (targetPkg.directive === 'add') {
       method = 'PUT';
-      msg += "added 1 package to "+ctx.recipe.name+":";
-      inlineNotify.text("1 package added");
-    } else if (pkgBtnData.directive === 'remove') {
+      /* If the package had dependencies also notify that they were added */
+      if (targetPkg.hasOwnProperty('depsAdded') &&
+        targetPkg.depsAdded.length > 0) {
+
+        msg += "added " + (targetPkg.depsAdded.length + 1);
+        msg += " packages to " + ctx.recipe.name + ": ";
+        msg += "<strong>" + targetPkg.name + "</strong> and its dependencies";
+
+        for (var i in targetPkg.depsAdded){
+          var dep = targetPkg.depsAdded[i];
+
+          msg += " <strong>" + dep.name + "</strong>";
+
+          /* Add any cells currently in view to the list of cells which get
+           * an inline notification inside them and which change add/rm state
+           */
+          var depBtnCell = $("#package-btn-cell-" + dep.pk);
+          btnCell = btnCell.add(depBtnCell);
+
+          inlineNotify = inlineNotify.add(
+            depBtnCell.children(".inline-notification"));
+        }
+
+        inlineNotify.text(
+          (targetPkg.depsAdded.length + 1) + " packages added");
+
+      } else {
+        msg += ' <strong>' + targetPkg.name + '<strong>';
+        inlineNotify.text("1 package added");
+      }
+
+    } else if (targetPkg.directive === 'remove') {
       method = 'DELETE';
       msg += "removed 1 package from "+ctx.recipe.name+":";
+      msg += ' <strong>' + targetPkg.name + '<strong>';
       inlineNotify.text("1 package removed");
     } else {
       throw("Unknown package directive: should be add or remove");
     }
 
-    msg += ' <strong>' + pkgBtnData.name + '<strong>';
-
     $.ajax({
         type: method,
-        url: pkgBtnData.packageUrl,
+        url: targetPkg.packageUrl,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function(data){
           if (data.error !== 'ok'){
@@ -145,15 +175,29 @@ function customRecipePageInit(ctx) {
 
           libtoaster.showChangeNotification(msg);
 
-          /* Also do the in-cell notification */
+          /* do the in-cell/inline notification to swap buttoms from add to
+           * remove
+           */
           btnCell.children("button").fadeOut().promise().done(function(){
             inlineNotify.fadeIn().delay(500).fadeOut(function(){
-              if (pkgBtnData.directive === 'add')
+              if (targetPkg.directive === 'add')
                 btnCell.children("button[data-directive=remove]").fadeIn();
               else
                 btnCell.children("button[data-directive=add]").fadeIn();
             });
           });
+
+          /* Update the total num packages */
+          $.ajax({
+            type: "GET",
+            url: ctx.recipe.xhrPackageListUrl,
+            headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
+            success: function(data){
+              console.log(data);
+              $("#total-num-packages").text(data.total);
+              $("#total-size-packages").text(data.total_size_formatted);
+            }
+          });
         }
     });
   }
diff --git a/lib/toaster/toastergui/templates/customrecipe.html b/lib/toaster/toastergui/templates/customrecipe.html
index 4d88be054..02ca5be1c 100644
--- a/lib/toaster/toastergui/templates/customrecipe.html
+++ b/lib/toaster/toastergui/templates/customrecipe.html
@@ -28,6 +28,7 @@
         name: "{{recipe.name}}",
         includedPackagesCount: {{recipe.includes_set.count}},
         baseRecipeId: {{recipe.base_recipe.pk}},
+        xhrPackageListUrl: "{% url 'xhr_customrecipe_packages' recipe.pk %}",
       }
     };
 
@@ -143,12 +144,12 @@
           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.get_all_packages.count}}</dd>
+        <dd id="total-num-packages">{{recipe.get_all_packages.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>{{approx_pkg_size.size__sum|filtered_filesizeformat}}</dd>
+        <dd id="total-size-packages">{{approx_pkg_size.size__sum|filtered_filesizeformat}}</dd>
         {% if last_build %}
         <dt>Last build</dt>
         <dd>
diff --git a/lib/toaster/toastergui/templates/pkg_add_rm_btn.html b/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
index a3e854670..0aefc5625 100644
--- a/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
+++ b/lib/toaster/toastergui/templates/pkg_add_rm_btn.html
@@ -13,7 +13,7 @@
 
 <div id="package-btn-cell-{{data.pk}}">
   <div style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner inline-notification"></div>
-  <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="
+  <button class="btn btn-block btn-danger add-rm-package-btn" data-directive="remove" data-id="{{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 %}
@@ -21,7 +21,7 @@
     <i class="icon-trash no-tooltip"></i>
     Remove package
   </button>
-  <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="
+  <button class="btn btn-block add-rm-package-btn" data-directive="add" data-id="{{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 %}
diff --git a/lib/toaster/toastergui/urls.py b/lib/toaster/toastergui/urls.py
index 4feeebc14..4aa64887b 100644
--- a/lib/toaster/toastergui/urls.py
+++ b/lib/toaster/toastergui/urls.py
@@ -171,6 +171,10 @@ urlpatterns = patterns('toastergui.views',
         # image customisation functionality
         url(r'^xhr_customrecipe/(?P<recipe_id>\d+)/packages/(?P<package_id>\d+|)$',
             'xhr_customrecipe_packages', name='xhr_customrecipe_packages'),
+
+        url(r'^xhr_customrecipe/(?P<recipe_id>\d+)/packages/$',
+            'xhr_customrecipe_packages', name='xhr_customrecipe_packages'),
+
         url(r'^xhr_customrecipe/(?P<recipe_id>\d+)$', 'xhr_customrecipe_id',
             name='xhr_customrecipe_id'),
         url(r'^xhr_customrecipe/', 'xhr_customrecipe',