From 119569d83c3fb1d1bd162624819b3f9c63a791c4 Mon Sep 17 00:00:00 2001
From: Michael Wood <michael.g.wood@intel.com>
Date: Fri, 29 Jan 2016 14:38:43 +0000
Subject: [PATCH] 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>
---
 .../toastergui/static/js/customrecipe.js      | 98 ++++++++++++++-----
 .../toastergui/templates/customrecipe.html    |  5 +-
 .../toastergui/templates/pkg_add_rm_btn.html  |  4 +-
 lib/toaster/toastergui/urls.py                |  4 +
 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 33fcb88e947..a1fe4862e5c 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 4d88be054dc..02ca5be1ca5 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 a3e8546706f..0aefc562593 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 4feeebc14aa..4aa64887b70 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',
-- 
2.47.3