First cut for #576

hawtio · Sep 23, 2013 · 7698702 · 7698702
1 parent b362ca5
commit 7698702
Show file tree

Hide file tree

Showing 10 changed files with 267 additions and 5 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/activeProfileList.html b/hawtio-web/src/main/webapp/app/fabric/html/activeProfileList.html
@@ -0,0 +1,76 @@
+<div>
+  <div class="active-profile-titles section-header">
+    <div class="active-profile-name">Name</div>
+    <div class="active-profile-filter">
+      <div class="section-filter">
+        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
+        <i class="icon-remove clickable" title="Clear Filter" ng-click="containerIdFilter = ''"></i>
+      </div>
+    </div>
+
+    <div class="active-profile-count">Count</div>
+    <div class="active-profile-actions">Actions</div>
+  </div>
+  <div class="active-profile-list" ng-repeat="profile in activeProfiles" ng-show="profileMatchesFilter(profile)">
+    <div class="expandable" ng-class="isOpen(profile)">
+      <div class="active-profile-row">
+        <div class="title active-profile-expander">
+          <i class="expandable-indicator"></i>
+        </div>
+        <div class="title active-profile-name">
+          {{profile.versionId}} / {{profile.id}}
+        </div>
+        <div class="active-profile-count">
+          {{profile.count}}
+        </div>
+
+        <div class="active-profile-actions">
+          <i class="icon-minus clickable" title="Scale Down (not implemented yet)"></i>
+          <i class="icon-plus clickable" title="Scale Up (not implemented yet)"></i>
+          <i class="icon-info-sign clickable" title="Profile Details" ng-click="showProfile(profile)"></i>
+        </div>
+
+      </div>
+      <div class="expandable-body">
+        <ul>
+          <li class="no-list" ng-repeat="container in containersForProfile(profile.id)" ng-show="containerMatchesFilter(container)">
+
+            <div class="box" ng-class="getSelectedClass(container)">
+
+              <div class="box-left">
+
+                <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="Status of the container" ng-click="container.selected = false"></i>
+
+                <i class="clickable" title="{{getStatusTitle(container)}}" ng-class='statusIcon(container)' ng-click="container.selected = !container.selected"></i>
+
+                <div ng-click="container.selected = !container.selected">
+                  <a ng-click="showContainer(container)">{{container.id}}</a> / {{container.versionId}}
+                </div>
+
+                <i class="icon-cloud clickable" title="Ensemble member" ng-click="showContainer(container)" ng-show="isEnsembleContainer(container.id)"></i>
+              </div>
+
+              <div class="box-middle">
+                <ul class="inline">
+                  <li ng-repeat="service in container.services" ng-switch="service.type">
+                    <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
+                    <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
+                  </li>
+                </ul>
+              </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-signin clickable" ng-show="container.jolokiaUrl && container.alive" title="Open a new window and connect to this container" ng-click="doConnect(container)"></i>
+              </div>
+
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/activeProfiles.html b/hawtio-web/src/main/webapp/app/fabric/html/activeProfiles.html
@@ -0,0 +1,10 @@
+<div class="controller-section" ng-controller="Fabric.ActiveProfileController">
+  <div class="row-fluid">
+    <div class="span12 active-profile-main">
+      <div class="dashboard-link-row" ng-hide="inDashboard">
+        <a class="dashboard-link" ng-hide="inDashboard" ng-href="{{addToDashboardLink()}}" title="Add this view to a dashboard"><i class="icon-share" title="Add to dashboard"></i></a>
+      </div>
+      <div fabric-active-profile-list></div>
+    </div>
+  </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
@@ -1,7 +1,7 @@
 <div ng-controller="Fabric.ContainersController">
 
   <div class="row-fluid">
-    <div class="span12 page-padded">
+    <div class="span12 page-padded container-list-main">
 
       <div class="section-header">
 

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,6 +2,9 @@
   <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/activeProfiles")}'>
+    <a ng-href="#/fabric/activeProfiles{{hash}}">Active Profiles</a>
+  </li>
   <li ng-show="hasFabric" ng-class='{active : isActive("#/fabric/view")}'>
     <a ng-href="#/fabric/view{{hash}}">Migration</a>
   </li>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/activeProfiles.ts b/hawtio-web/src/main/webapp/app/fabric/js/activeProfiles.ts
@@ -0,0 +1,22 @@
+module Fabric {
+
+  export function ActiveProfileController($scope, jolokia) {
+
+    $scope.addToDashboardLink = () => {
+      var href = "#/fabric/activeProfiles"
+      var title = "Active Profiles"
+      var size = angular.toJson({
+        size_y: 1,
+        size_x: 5
+      });
+
+      return "#/dashboard/add?tab=dashboard" +
+          "&href=" + encodeURIComponent(href) +
+          "&size=" + encodeURIComponent(size) +
+          "&title=" + encodeURIComponent(title);
+    }
+
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts b/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts
@@ -8,7 +8,7 @@ module Fabric {
 
     public scope = false;
 
-    public controller = ($scope, $element, $attrs, jolokia, $location, $templateCache) => {
+    public controller($scope, $element, $attrs, jolokia, $location, workspace) {
 
       $scope.containerArgs = ["id", "alive", "parentId", "profileIds", "versionId", "provisionResult", "jolokiaUrl", "root", 'jmxDomains'];
       $scope.containersOp = 'containers(java.util.List)';
@@ -285,7 +285,7 @@ module Fabric {
         {type: 'read', mbean: Fabric.clusterManagerMBean, attribute: $scope.ensembleContainerIdListOp}
       ], onSuccess($scope.dispatch));
 
-    };
+    }
 
     public link = ($scope, $element, $attrs) => {
       if (angular.isDefined($attrs['showSelect'])) {
@@ -296,6 +296,49 @@ module Fabric {
   }
 
 
+  export class ActiveProfileList extends Fabric.ContainerList {
+
+    public templateUrl = Fabric.templatePath + "activeProfileList.html";
+
+    public controller($scope, $element, $attrs, jolokia, $location, workspace) {
+
+      super.controller($scope, $element, $attrs, jolokia, $location, workspace);
+
+      $scope.searchFilter = '';
+
+      $scope.isOpen = (profile) => {
+        if ($scope.searchFilter !== '') {
+          return "opened";
+        }
+        return "closed";
+      };
+
+      $scope.containersForProfile = (id) => {
+        return $scope.containers.filter((container) => {
+          return container.profileIds.some(id);
+        });
+      };
+
+      $scope.showProfile = (profile) => {
+        if (angular.isDefined(profile.versionId)) {
+          Fabric.gotoProfile(workspace, jolokia, localStorage, $location, profile.versionId, profile);
+        } else {
+          Fabric.gotoProfile(workspace, jolokia, localStorage, $location, $scope.activeVersionId, profile);
+        }
+      };
+
+      $scope.profileMatchesFilter = (profile) => {
+        return profile.id.has($scope.searchFilter) || !profile.containers.filter((id) => { return id.has($scope.searchFilter); }).isEmpty();
+      }
 
+      $scope.containerMatchesFilter = (container) => {
+        return container.id.has($scope.searchFilter) || !container.profileIds.filter((id) => {return id.has($scope.searchFilter);}).isEmpty();
+      }
+
+    }
+
+
+
+  }
 
 }
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containers.ts b/hawtio-web/src/main/webapp/app/fabric/js/containers.ts
@@ -13,8 +13,13 @@ module Fabric {
 
     $scope.addToDashboardLink = () => {
       var href = "#/fabric/containers";
+      var title = "Containers";
+      var size = angular.toJson({size_y:1, size_x: 4});
 
-      return "#/dashboard/add?tab=dashboard&href=" + encodeURIComponent(href) + "&size=" + encodeURIComponent(angular.toJson({size_y:1, size_x: 4}));
+      return "#/dashboard/add?tab=dashboard" +
+          "&href=" + encodeURIComponent(href) +
+          "&size=" + encodeURIComponent(size) +
+          "&title=" + encodeURIComponent(title);
     };
 
     $scope.filterContainer = (container) => {

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -13,6 +13,7 @@ module Fabric {
             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/activeProfiles', {templateUrl: templatePath + 'activeProfiles.html'}).
             when('/fabric/profile/:versionId/:profileId', {templateUrl: templatePath + 'profile.html'}).
             when('/wiki/profile/:versionId/:profileId/editFeatures', {templateUrl: templatePath + 'editFeatures.html'}).
             when('/fabric/profile/:versionId/:profileId/:fname', {templateUrl: templatePath + 'pid.html'}).
@@ -31,7 +32,10 @@ module Fabric {
       return new Fabric.ContainerList();
     }).
     directive('fabricProfileDetails', () => {
-        return new Fabric.ProfileDetails();
+      return new Fabric.ProfileDetails();
+    }).
+    directive('fabricActiveProfileList', () => {
+      return new Fabric.ActiveProfileList();
     }).
 
           run(($location: ng.ILocationService, workspace: Workspace, jolokia, viewRegistry, pageTitle:Core.PageTitle, helpRegistry, layoutFull) => {

diff --git a/hawtio-web/src/main/webapp/app/ui/js/expandableDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/expandableDirective.ts
@@ -24,11 +24,13 @@ module UI {
           expandable.find('.expandable-body').slideUp(400, function() {
             expandable.toggleClass('opened');
             expandable.toggleClass('closed');
+            Core.$apply(scope);
           });
         } else {
           expandable.find('.expandable-body').slideDown(400, function() {
             expandable.toggleClass('opened');
             expandable.toggleClass('closed');
+            Core.$apply(scope);
           });
         }
         return false;

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1797,3 +1797,100 @@ dd.file-list {
 .profile-list ul li .expandable .expandable-body {
   margin-left: 16px;
 }
+
+.active-profile-titles {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 40px;
+}
+
+.active-profile-list .expandable {
+  padding: 0;
+}
+
+.active-profile-titles.section-header {
+  padding: 0;
+}
+
+.active-profile-titles div:not(.active-profile-filter) {
+  display: inline-block;
+  font-weight: bold;
+  top: 10px;
+}
+
+.active-profile-row {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  line-height: 22px;
+  height: 22px;
+}
+
+.active-profile-row div {
+  display: inline-block;
+}
+
+.active-profile-list .expandable .expandable-body {
+  width: 100%;
+}
+
+.active-profile-list .expandable .expandable-body ul li .box {
+  background: inherit;
+}
+
+.active-profile-expander {
+  position: absolute;
+  left: 0;
+}
+
+.active-profile-actions {
+  position: absolute;
+  right: 10px;
+}
+
+.active-profile-count {
+  position: absolute;
+  right: 250px;
+}
+
+.active-profile-name {
+  position: absolute;
+  left: 15px;
+}
+
+.active-profile-filter {
+  position: absolute;
+  left: 80px;
+  top: -10px;
+}
+
+.active-profile-main {
+  min-width: 754px;
+}
+
+.dashboard-link-row {
+  width: 100%;
+  position: relative;
+}
+
+a.dashboard-link {
+  line-height: 15px;
+  font-color: black;
+  font-weight: normal;
+}
+
+a.dashboard-link:hover {
+  text-decoration: none;
+}
+
+.dashboard-link {
+  position: absolute;
+  top: 14px;
+  right: 80px;
+  z-index: 500;
+}
+
+.container-list-main {
+  min-width: 592px;
+}