More work on the fabric view page

hawtio · May 22, 2013 · dc0267f · dc0267f
1 parent 07fb5b7
commit dc0267f
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 36 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html b/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html
@@ -1,27 +1,35 @@
 <div ng-controller="Fabric.FabricViewController">
   <div class="row-fluid">
 
-    <div class="span2">
+    <div class="span1">
       <ul>
         <li>
           <a href="" ng-click="setActiveVersionId('')">Show All</a>
         </li>
         <li ng-repeat="version in versions">
           <div class="version#{{version.id}}" data-drag="true" jqyoui-draggable="{animate:true, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid'}">
-            <a href="" ng-click="setActiveVersionId(version.id)">{{version.id}} {{containersForVersion(version.id)}}</a>
+
+            <a href="" ng-click="setActiveVersionId(version.id)">
+              {{version.id}} {{containersForVersion(version.id)}}
+            </a>
+
           </div>
         </li>
       </ul>
     </div>
 
-    <div class="span2" ng-show="profiles.length > 0">
+    <div class="span3" ng-show="profiles.length > 0">
       <ul>
         <li>
           <a href="" ng-click="setActiveProfileId('')">Show All</a>
         </li>
         <li ng-repeat="profile in profiles">
           <div class="profile#{{profile}}" data-drag="true" jqyoui-draggable="{animate:true, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid'}">
-            <a href="" ng-click="setActiveProfileId(profile)">{{profile}} {{containersForProfile(profile)}}</a>
+
+            <a href="" ng-click="setActiveProfileId(profile)">
+              {{profile}} {{containersForProfile(profile)}}
+            </a>
+
           </div>
         </li>
       </ul>
@@ -31,11 +39,17 @@
     <div class="span2">
       <ul>
         <li>
-          <a href="" ng-click="setActiveContainerId('')">Show All</a>
+          <a href="" ng-click="setActiveContainer(null)">Show All</a>
         </li>
-        <li ng-repeat="container in containers">
+        <li ng-repeat="container in containers" ng-show="filterContainer(container)">
           <div class="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}" ng-model="dropContainer">
-            <a href="" ng-click="setActiveContainerId(container.id)">{{container.id}}</a>
+
+            <input type="checkbox" ng-model="container.selected">
+
+            <a href="" ng-click="setActiveContainer(container)">
+              {{container.id}}
+            </a>
+
           </div>
         </li>
       </ul>
@@ -45,10 +59,18 @@
     <div class="span2">
       <ul>
         <li>
-          <a href="" ng-click="setActiveProfileId('')">Show All</a>
+          <a href="" ng-click="setActiveProfile(null)">Show All</a>
         </li>
-        <li ng-repeat="profile in activeProfiles">
-          <a href="" ng-click="setActiveProfileId(profile.id)">{{profile.id}} ({{profile.count}})</a>
+        <li ng-repeat="profile in activeProfiles" ng-show="filterActiveProfile(profile)">
+
+          <a href="" ng-click="removeActiveProfiles(profile)" ng-show="(activeContainerId && activeContainerId != '') || selectedContainers.length > 0">
+            <i class="icon-remove"></i>
+          </a>
+
+          <a href="" ng-click="setActiveProfile(profile)">
+            {{profile.versionId}} / {{profile.id}} ({{profile.count}})
+          </a>
+
         </li>
       </ul>
     </div>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts
@@ -1,32 +1,45 @@
 module Fabric {
 
-  export function FabricViewController($scope, jolokia) {
+  export function FabricViewController($scope, $location, jolokia) {
 
     $scope.containerArgs = ["id", "alive", "profileIds", "versionId", "provisionResult", "jolokiaUrl"];
     $scope.versionsOp = 'versions()';
     $scope.containersOp = 'containers(java.util.List)';
 
-    $scope.activeVersionId = '';
-    $scope.activeProfileId = '';
+    $scope.activeVersionId = $location.search()['cv'];
+    $scope.activeProfileId = $location.search()['cp'];
+    $scope.activeContainerId = $location.search()['ac'];
+    $scope.activeContainerVersion = $location.search()['acv'];
+
+
     $scope.versions = [];
     $scope.containers = [];
-
+    $scope.selectedContainers = [];
     $scope.profiles = [];
     $scope.activeProfiles = [];
 
 
-    $scope.$watch('activeVersionId', () => {
-      $scope.profiles = $scope.currentVersionProfiles($scope.activeVersionId);
+    $scope.$watch('activeVersionId', (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        $scope.profiles = $scope.currentVersionProfiles($scope.activeVersionId);
+        if ($scope.activeVersionId === '') {
+          $scope.activeProfileId = '';
+        }
+      }
     });
 
+    $scope.$watch('containers', (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        $scope.selectedContainers = $scope.containers.filter((c) => { return c.selected; });
+      }      
+    }, true);
+
+
     $scope.handleDrop = (event, element) => {
 
       var sourceElement = $(event.srcElement);
       var targetElement = $(event.target);
 
-      console.log("Source: ", sourceElement);
-      console.log("target: ", targetElement);
-
       var temp = targetElement.attr('class').split('#');
 
       var targetType = temp[0];
@@ -39,27 +52,136 @@ module Fabric {
 
       switch(targetType) {
         case 'container':
+          $scope.alterContainer(targetName, sourceType, sourceName);
+          break;
+      }
 
-            switch(sourceType) {
-              case 'profile':
-                  addProfilesToContainer(jolokia, targetName, [sourceName], () => {
-                    notification('success', "Added " + sourceName + " to " + targetName);
-                  }, (response) => {
-                    notification('error', "Failed to add " + sourceName + " to " + targetName + " due to " + response.error);
-                  });
-                break;
-              case 'version':
-                  migrateContainers(jolokia, sourceName, [targetName], () => {
-                    notification('success', "Moved " + targetName + " to version " + sourceName);
-                  }, (response) => {
-                    notification('error', "Failed to move " + targetName + " to version " + sourceName + " due to " + response.error);
-                  });
-                break;
+    };
+
+
+    $scope.alterContainer = (targetName, sourceType, sourceName) => {
+      switch(sourceType) {
+        case 'profile':
+            if ($scope.selectedContainers.length > 0) {
+              $scope.selectedContainers.each((c) => {
+                $scope.addProfile(c.id, sourceName);
+              });
+            } else {
+              $scope.addProfile(targetName, sourceName);
             }
 
           break;
+        case 'version':
+            if ($scope.selectedContainers.length > 0) {
+              $scope.selectedContainers.each((c) => {
+                $scope.migrateVersion(c.id, sourceName);
+              });
+            } else {
+              $scope.migrateVersion(targetName, sourceName);
+            }
+
+          break;
+      }
+    };
+
+
+    $scope.migrateVersion = (targetName, sourceName) => {
+      notification('info', "Moving " + targetName + " to " + sourceName);
+
+      migrateContainers(jolokia, sourceName, [targetName], () => {
+        notification('success', "Moved " + targetName + " to version " + sourceName);
+      }, (response) => {
+        notification('error', "Failed to move " + targetName + " to version " + sourceName + " due to " + response.error);
+      });
+    }
+
+
+    $scope.addProfile = (targetName, sourceName) => {
+      notification('info', "Adding " + sourceName + " to " + targetName);
+
+      addProfilesToContainer(jolokia, targetName, [sourceName], () => {
+        notification('success', "Added " + sourceName + " to " + targetName);
+      }, (response) => {
+        notification('error', "Failed to add " + sourceName + " to " + targetName + " due to " + response.error);
+      });
+    };
+
+
+    $scope.removeActiveProfiles = (profile) => {
+      if ($scope.selectedContainers.length > 0) {
+        $scope.selectedContainers.each((container) => {
+          if (container.profileIds.some(profile.id) && container.versionId === profile.versionId) {
+            $scope.removeProfile(container.id, profile.id);
+          }
+        });
+      } else {
+        $scope.removeProfile($scope.activeContainerId, profile.id);
+      }
+    };
+
+
+    $scope.removeProfile = (containerId, profileId) => {
+      notification('info', "Removing " + profileId + " from " + containerId);
+
+      removeProfilesFromContainer(jolokia, containerId, [profileId], () => {
+        notification('success', "Removed " + profileId + " from " + containerId);
+      }, (response) => {
+        notification('error', "Failed to remove " + profileId + " from " + containerId + " due to " + response.error);
+      });
+    }
+
+
+    $scope.filterContainer = (container) => {
+      if ($scope.activeVersionId && 
+          $scope.activeVersionId !== '' && 
+          container.versionId !== $scope.activeVersionId) {
+        return false;
       }
 
+      if ($scope.activeProfileId && 
+          $scope.activeProfileId !== '') {
+
+        if (container.profileIds.count((profile) => {
+              return profile === $scope.activeProfileId;
+            }) === 0) {
+
+          return false;
+
+        }
+      }
+      return true;
+    };
+
+
+    $scope.filterActiveProfile = (profile) => {
+      if ($scope.activeVersionId && 
+          $scope.activeVersionId !== '' && 
+          profile.versionId !== $scope.activeVersionId ) {
+        return false;
+      }
+
+      if ($scope.selectedContainers.length > 0) {
+        if ($scope.selectedContainers.none((c) => {
+          return c.versionId === profile.versionId &&
+            c.profileIds.some(profile.id);
+        })) {
+          return false;
+        }
+      }
+
+      if ($scope.activeContainerId && 
+          $scope.activeContainerId !== '') {
+
+        if ($scope.activeContainerVersion && 
+            $scope.activeContainerVersion !== '' && 
+            $scope.activeContainerVersion !== profile.versionId) {
+          return false;
+        }
+        if (!profile.containers.some($scope.activeContainerId)) {
+          return false;
+        }
+      }
+      return true;
     };
 
 
@@ -82,13 +204,16 @@ module Fabric {
         container.profileIds.each((profile) => {
 
           var activeProfile = answer.find((o) => { return o.versionId === container.versionId && o.id === profile });
+
           if (activeProfile) {
             activeProfile.count++;
+            activeProfile.containers = activeProfile.containers.include(container.id).unique();
           } else {
             answer.push({
               id: profile,
               count: 1,
-              version: container.versionId
+              versionId: container.versionId,
+              containers: [container.id]
             });
           }
         });
@@ -107,7 +232,7 @@ module Fabric {
 
 
     $scope.containersForProfile = (id) => {
-      var profile = $scope.currentActiveProfiles().find((profile) => { return profile.id === id });
+      var profile = $scope.currentActiveProfiles().find((profile) => { return profile.versionId === $scope.activeVersionId && profile.id === id });
       if (profile) {
         return "(" + profile.count + ")";
       } else {
@@ -123,6 +248,29 @@ module Fabric {
 
     $scope.setActiveVersionId = (id) => {
       $scope.activeVersionId = id;
+      $scope.activeProfileId = '';
+    };
+
+
+    $scope.setActiveProfile = (profile) => {
+      if (!profile || profile === null) {
+        $scope.activeProfileId = '';
+        $scope.activeVersionId = '';
+        return;
+      }
+      $scope.activeProfileId = profile.id;
+      $scope.activeVersionId = profile.versionId;
+    };
+
+
+    $scope.setActiveContainer = (container) => {
+      if (!container || container === null) {
+        $scope.activeContainerId = '';
+        $scope.activeContainerVersion = '';
+        return;
+      }
+      $scope.activeContainerId = container.id;
+      $scope.activeContainerVersion = container.versionId;
     };
 
 
@@ -140,9 +288,22 @@ module Fabric {
 
 
     $scope.updateContainers = (newContainers) => {
+
       var response = angular.toJson(newContainers);
+
       if ($scope.containersResponse !== response) {
         $scope.containersResponse = response;
+
+        newContainers.each((container) => {
+          var c = $scope.containers.find((c) => { return c.id === container.id; });
+          if (c) {
+            container['selected'] = c.selected;
+          } else {
+            container['selected'] = false;
+          }
+        });
+
+
         $scope.containers = newContainers;
         $scope.activeProfiles = $scope.currentActiveProfiles();
         Core.$apply($scope);

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts b/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts
@@ -36,6 +36,10 @@ module Fabric {
     doAction('addProfilesToContainer(java.lang.String, java.util.List)', jolokia, [container, profiles], success, error);
   }
 
+  export function removeProfilesFromContainer(jolokia, container, profiles, success, error) {
+    doAction('removeProfilesFromContainer(java.lang.String, java.util.List)', jolokia, [container, profiles], success, error);
+  }
+
   export function applyProfiles(jolokia, version, profiles, containers, success, error) {
     doAction('applyProfilesToContainers(java.lang.String, java.util.List, java.util.List)', jolokia, [version, profiles, containers], success, error);
   }