Separate simple container list page

hawtio · Sep 11, 2013 · 647448d · 647448d
1 parent 302e28a
commit 647448d
Show file tree

Hide file tree

Showing 9 changed files with 254 additions and 315 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/containerList.html b/hawtio-web/src/main/webapp/app/fabric/html/containerList.html
@@ -5,11 +5,11 @@
 
       <div class="box-left">
 
-        <i ng-show="!container.selected" class="icon-circle-blank clickable" title="Not Selected" ng-click="container.selected = true"></i>
-        <i ng-show="container.selected" class="icon-circle clickable" title="Selected" ng-click="container.selected = false"></i>
+        <i ng-show="!container.selected && showSelect" class="icon-circle-blank clickable" title="Not Selected" ng-click="container.selected = true"></i>
+        <i ng-show="container.selected && showSelect" class="icon-circle clickable" title="Selected" ng-click="container.selected = false"></i>
 
         <div ng-click="setActiveContainer(container)">
-          {{container.id}} / {{container.versionId}}
+          {{container.versionId}} / {{container.id}}
         </div>
       </div>
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/containers.html b/hawtio-web/src/main/webapp/app/fabric/html/containers.html
@@ -0,0 +1,36 @@
+<div ng-controller="Fabric.ContainersController">
+
+  <div class="row-fluid">
+    <div class="span12 page-padded">
+
+      <div class="section-header">
+
+        <div class="selection-controls">
+          <i class="icon-circle-blank clickable" title="Clear Selection" ng-click="setActiveContainer(null)"></i>
+          <i class="icon-circle clickable" title="Select All" ng-click="selectAllContainers()"></i>
+        </div>
+
+        <div class="section-title">
+          Containers
+        </div>
+
+        <div class="section-controls">
+          <i class="icon-plus clickable" title="Create Container" ng-click="createContainer()"></i>
+          <i class="icon-minus clickable" title="Delete Container" ng-click="deleteSelectedContainers()" ng-show="selectedContainers.length != 0"></i>
+          <i class="icon-play-circle clickable" title="Start Containers" ng-click="startSelectedContainers()" ng-show="anySelectionAlive(false)"></i>
+          <i class="icon-off clickable" title="Stop Containers" ng-click="stopSelectedContainers()" ng-show="anySelectionAlive(true)"></i>
+
+        </div>
+
+        <div class="section-filter">
+          <input type="text" class="search-query" placeholder="Filter..." ng-model="containerIdFilter">
+          <i class="icon-remove clickable" title="Clear Filter" ng-click="containerIdFilter = ''"></i>
+        </div>
+      </div>
+
+      <div fabric-container-list></div>
+    </div>
+  </div>
+
+
+</div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html b/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html
@@ -34,34 +34,7 @@
         <div class="container-section">
 
           <div class="canvas">
-
-            <div ng-repeat="container in containers" ng-show="filterContainer(container)">
-              <div class="box" ng-class="getSelectedClass(container)">
-
-                <div class="box-left">
-
-                  <i ng-show="!container.selected" class="icon-circle-blank clickable" title="Not Selected" ng-click="container.selected = true"></i>
-                  <i ng-show="container.selected" class="icon-circle clickable" title="Selected" ng-click="container.selected = false"></i>
-
-                  <div ng-click="setActiveContainer(container)">
-                    {{container.id}} / {{container.versionId}}
-                  </div>
-                </div>
-
-                <div class="box-right">
-                  <i class="icon-plus clickable" ng-show="container.root && container.alive" title="Create a new child container" ng-click="createChildContainer(container)"></i>
-
-                  <i class="icon-cloud clickable" title="Ensemble member" ng-click="showContainer(container)" ng-show="isEnsembleContainer(container.id)"></i>
-
-                  <i class="clickable" title="{{getStatusTitle(container)}}" ng-class='statusIcon(container)' ng-click="showContainer(container)"></i>
-
-                  <i class="icon-signin clickable" ng-show="container.jolokiaUrl && container.alive" title="Open a new window and connect to this container" ng-click="doConnect(container)"></i>
-
-                  <i class="clickable icon-info-sign" title="Show Details" ng-click="showContainer(container)"></i>
-                </div>
-
-              </div>
-            </div>
+            <div fabric-container-list></div>
           </div>
         </div>
       </div>
@@ -193,7 +166,9 @@
   </div>
 
   <!-- dialogs -->
+  <!--
   <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
+  -->
 
   <div hawtio-confirm-dialog="deleteVersionDialog.show" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteVersion()">
     <div class="dialog-body">

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/layoutFabric.html b/hawtio-web/src/main/webapp/app/fabric/html/layoutFabric.html
@@ -2,8 +2,11 @@
   <li ng-hide="hasFabric" ng-class='{active : isActive("#/fabric/create")}'>
     <a ng-href="#/fabric/create{{hash}}">Create Fabric</a>
   </li>
+  <li ng-show="hasFabric" ng-class='{active : isActive("#/fabric/containers")}'>
+    <a ng-href="#/fabric/containers{{hash}}">Containers</a>
+  </li>
   <li ng-show="hasFabric" ng-class='{active : isActive("#/fabric/view")}'>
-    <a ng-href="#/fabric/view{{hash}}">Overview</a>
+    <a ng-href="#/fabric/view{{hash}}">Migration</a>
   </li>
   <li ng-show="hasFabric" ng-class='{active : isActive("#/fabric/clusters")}' ng-disabled="!Fabric.getZooKeeperFacadeMBean(workspace)">
     <a ng-href="{{clusterLink()}}" title="View the web application, messaging and integration clusters in this fabric">Clusters</a>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts b/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts
@@ -6,9 +6,7 @@ module Fabric {
     public replace = true;
     public templateUrl = Fabric.templatePath + "containerList.html";
 
-    public scope = {
-
-    };
+    public scope = false;
 
     public controller = ($scope, $element, $attrs, jolokia, $location, $templateCache) => {
 
@@ -22,6 +20,7 @@ module Fabric {
       $scope.selectedContainerIds = [];
       $scope.connectToContainerDialog = new Core.Dialog();
       $scope.targetContainer = {};
+      $scope.showSelect = true;
 
 
       $scope.updateContainers = (newContainers) => {
@@ -58,11 +57,52 @@ module Fabric {
           });
 
           $scope.containers = newContainers;
+
+          var activeProfiles = $scope.activeProfiles;
+          $scope.activeProfiles = $scope.currentActiveProfiles();
+          $scope.activeProfiles.each((activeProfile) => {
+
+            var ap = activeProfiles.find((ap) => { return ap.id === activeProfile.id && ap.versionId === activeProfile.versionId });
+            if (ap) {
+              activeProfile['selected'] = ap.selected;
+            } else {
+              activeProfile['selected'] = false;
+            }
+
+          });
+
           Core.$apply($scope);
         }
       };
 
 
+      $scope.currentActiveProfiles = () => {
+        var answer = [];
+
+        $scope.containers.each((container) => {
+          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,
+                versionId: container.versionId,
+                containers: [container.id],
+                selected: false
+              });
+            }
+          });
+        });
+
+        return answer;
+      };
+
+
       $scope.showContainer = (container) => {
         $location.path('/fabric/container/' + container.id);
       };
@@ -139,6 +179,18 @@ module Fabric {
       }
 
 
+      $scope.getSelectedClass = (obj) => {
+        var answer = [];
+        if (obj.selected) {
+          answer.push('selected');
+        }
+        if (angular.isDefined(obj['root']) && obj['root'] === false) {
+          answer.push('child-container');
+        }
+        return answer.join(' ');
+      };
+
+
       $scope.dispatch = (response) => {
         switch (response.request.operation) {
           case($scope.containersOp):
@@ -152,16 +204,113 @@ module Fabric {
         }
       };
 
+      $scope.clearSelection = (group) => {
+        group.each((item) => { item.selected = false; });
+      };
+
+
+      $scope.setActiveProfile = (profile) => {
+        $scope.clearSelection($scope.activeProfiles);
+        if (!profile || profile === null) {
+          return;
+        }
+        profile.selected = true;
+      };
+
+
+      $scope.selectAllContainers = () => {
+        $scope.containers.each((container) => {
+          if ($scope.filterContainer(container)) {
+            container.selected = true;
+          }
+        });
+      };
+
+
+      $scope.setActiveContainer = (container) => {
+        $scope.clearSelection($scope.containers);
+        if (!container || container === null) {
+          return;
+        }
+        container.selected = true;
+      };
+
+
+      $scope.createContainer = () => {
+        var kind = null;
+        // lets see if there is an openshift option
+        var providers = registeredProviders(jolokia);
+        angular.forEach(["openshift", "jclouds"], (value) => {
+          if (!kind && providers[value]) {
+            kind = value;
+          }
+        });
+        if (!kind) {
+          kind = 'ssh';
+        }
+        $location.url('/fabric/containers/createContainer').search('tab', kind);
+      };
+
+
+      $scope.deleteSelectedContainers = () => {
+        $scope.selectedContainers.each((c) => {
+          $scope.deleteContainer(c.id);
+        });
+      };
+
+
+      $scope.startSelectedContainers = () => {
+        $scope.selectedContainers.each((c) => {
+          $scope.startContainer(c.id);
+        });
+      };
+
+
+      $scope.stopSelectedContainers = () => {
+        $scope.selectedContainers.each((c) => {
+          $scope.stopContainer(c.id);
+        });
+      };
+
+
+      $scope.deleteContainer = (name) => {
+        doDeleteContainer($scope, jolokia, name);
+      };
+
+
+      $scope.startContainer = (name) => {
+        doStartContainer($scope, jolokia, name);
+      };
+
+
+      $scope.stopContainer = (name) => {
+        doStopContainer($scope, jolokia, name);
+      };
+
+
+      $scope.anySelectionAlive = (state) => {
+        var selected = $scope.selectedContainers;
+        return selected.length > 0 && selected.any((s) => s.alive === state);
+      };
+
+
+      $scope.everySelectionAlive = (state) => {
+        var selected = $scope.selectedContainers;
+        return selected.length > 0 && selected.every((s) => s.alive === state);
+      };
+
 
       Core.register(jolokia, $scope, [
         {type: 'exec', mbean: Fabric.managerMBean, operation: $scope.containersOp, arguments: [$scope.containerArgs]},
         {type: 'read', mbean: Fabric.clusterManagerMBean, attribute: $scope.ensembleContainerIdListOp}
       ], onSuccess($scope.dispatch));
 
+    };
 
-
-
-
+    public link = ($scope, $element, $attrs) => {
+      if (angular.isDefined($attrs['showSelect'])) {
+        $scope.showSelect = Core.parseBooleanValue($attrs['showSelect']);
+      }
     };
 
   }

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containers.ts b/hawtio-web/src/main/webapp/app/fabric/js/containers.ts
@@ -0,0 +1,34 @@
+module Fabric {
+
+  export function ContainersController($scope) {
+
+    $scope.containerIdFilter = '';
+    $scope.userName = localStorage['fabric.userName'];
+    $scope.password = localStorage['fabric.password'];
+    $scope.saveCredentials = false;
+
+    $scope.getFilteredName = (item) => {
+      return item.versionId + " / " + item.id;
+    }
+
+    $scope.filterContainer = (container) => {
+      if (!$scope.getFilteredName(container).has($scope.containerIdFilter)) {
+        return false;
+      }
+      return true;
+    };
+
+    $scope.$watch('containers', (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        $scope.selectedContainers = $scope.containers.filter((c) => { return c.selected; });
+
+        if ($scope.selectedContainers.length > 0) {
+          $scope.activeContainerId = '';
+        }
+      }
+    }, true);
+
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -11,6 +11,7 @@ module Fabric {
             when('/fabric/containers/createContainer', {templateUrl: templatePath + 'createContainer.html' , reloadOnSearch: false }).
             when('/fabric/map', {templateUrl: templatePath + 'map.html'}).
             when('/fabric/clusters/*page', {templateUrl: templatePath + 'clusters.html'}).
+            when('/fabric/containers', {templateUrl: templatePath + 'containers.html'}).
             when('/fabric/container/:containerId', {templateUrl: templatePath + 'container.html'}).
             when('/fabric/profile/:versionId/:profileId', {templateUrl: templatePath + 'profile.html'}).
             when('/fabric/profile/:versionId/:profileId/editFeatures', {templateUrl: templatePath + 'editFeatures.html'}).
@@ -48,7 +49,7 @@ module Fabric {
               content: "Runtime",
               title: "Manage your containers in this fabric",
               isValid: (workspace) => Fabric.hasFabric(workspace),
-              href: () => "#/fabric/view",
+              href: () => "#/fabric/containers",
               isActive: (workspace: Workspace) => workspace.isLinkActive("fabric")
             });
             workspace.topLevelTabs.push( {