re-usable profile selector to put into dialogs and stuff

hawtio · Jun 28, 2013 · 57216e3 · 57216e3
1 parent 4a0f18a
commit 57216e3
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 2 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html b/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html
@@ -0,0 +1,33 @@
+<div ng-show="profiles.length > 0">
+  <div class="profile-list">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th><input id="selector" type="checkbox" ng-model="selectedAll"></th>
+          <th>
+            <!--
+            <div class="control-group pull-left no-bottom-margin">
+              <label class="control-label no-bottom-margin"><strong>Name</strong></label>
+            </div>
+            -->
+            <div class="control-group pull-right">
+              <div class="controls">
+                <input type="text" class="search-query" ng-model="filterText" placeholder="Filter...">
+              </div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="profile in profiles" ng-show="showProfile(profile)">
+          <td>
+            <input type="checkbox" ng-model="profile.selected">
+          </td>
+          <td>
+            {{profile.id}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/test.html b/hawtio-web/src/main/webapp/app/fabric/html/test.html
@@ -0,0 +1,21 @@
+<div ng-controller="Fabric.TestController">
+
+  <div class="row-fluid">
+    <div class="span3">
+      <div fabric-version-selector='version'></div>
+      <div fabric-profile-selector='selectedProfiles' version-id='versionId'></div>
+    </div>
+    <div class="span3">
+      <p>Selected version: {{version.id}}</p>
+      <p>Selected profiles:
+        <ul>
+          <li ng-repeat="profile in selectedProfiles">{{profile.id}}</li>
+        </ul>
+      </p>
+    </div>
+
+
+  </div>
+
+
+</div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -15,11 +15,16 @@ module Fabric {
             when('/fabric/profile/:versionId/:profileId/editFeatures', {templateUrl: templatePath + 'editFeatures.html'}).
             when('/fabric/profile/:versionId/:profileId/:fname', {templateUrl: templatePath + 'pid.html'}).
             when('/fabric/view', { templateUrl: templatePath + 'fabricView.html', reloadOnSearch: false }).
-            when('/fabric/patching', { templateUrl: templatePath + 'patching.html' });
+            when('/fabric/patching', { templateUrl: templatePath + 'patching.html' }).
+            when('/fabric/test', { templateUrl: templatePath + 'test.html' });
   }).
+
     directive('fabricVersionSelector', function() {
       return new Fabric.VersionSelector();
     }).
+    directive('fabricProfileSelector', function() {
+      return new Fabric.ProfileSelector();
+    }).
 
           run(($location: ng.ILocationService, workspace: Workspace, jolokia, viewRegistry, pageTitle) => {
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/profileSelectorDirective.ts b/hawtio-web/src/main/webapp/app/fabric/js/profileSelectorDirective.ts
@@ -0,0 +1,134 @@
+module Fabric {
+
+  export class ProfileSelector {
+
+    public restrict = 'A';
+    public replace = true;
+    public templateUrl = Fabric.templatePath + "profileSelector.html";
+
+    public scope = {
+      selectedProfiles: '=fabricProfileSelector',
+      versionId: '=',
+      clearOnVersionChange: '@'
+    };
+
+    public controller = ($scope, $element, $attrs, jolokia) => {
+      $scope.profiles = [];
+      $scope.responseJson = '';
+      $scope.filterText = '';
+      $scope.clearOnVersionChange = false
+      $scope.selectedAll = false;
+      $scope.indeterminate = false;
+
+
+      $scope.showProfile = (profile) => {
+        return $scope.filterText.isBlank() || profile.id.has($scope.filterText);
+      }
+
+
+      $scope.render = (response) => {
+        var responseJson = angular.toJson(response.value);
+        if ($scope.responseJson !== responseJson) {
+          $scope.responseJson = responseJson;
+          var selected = $scope.selectedProfiles;
+          $scope.profiles = response.value.sortBy((profile) => { return profile.id; });
+          selected.each((profile) => {
+            var p = $scope.profiles.find((p) => { return p.id === profile.id; });
+            if (profile) {
+              p.selected = profile.selected;
+            }
+          });
+          $scope.$apply();
+        }
+      }
+
+
+      $scope.selected = () => {
+        return $scope.profiles.filter((profile) => { return profile['selected']; });
+      }
+
+      $scope.selectAll = () => {
+        $scope.profiles.each((profile) => { profile.selected = true; });
+      }
+
+      $scope.selectNone = () => {
+        $scope.profiles.each((profile) => { delete profile.selected; });
+      }
+
+
+      $scope.$watch('selectedAll', (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          if ($scope.indeterminate) {
+            $scope.selectNone();
+          } else {
+            if (newValue) {
+              $scope.selectAll();
+            } else {
+              $scope.selectNone();
+            }
+          }
+        }
+      });
+
+      $scope.$watch('profiles', (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          $scope.selectedProfiles = $scope.selected();
+        }
+      }, true);
+
+
+      $scope.init = () => {
+        Core.unregister(jolokia, $scope);
+        if( $scope.versionId !== '' ) {
+          if ($scope.clearOnVersionChange) {
+            $scope.selectNone();
+          }
+          Core.register(jolokia, $scope, {
+            type: 'exec',
+            mbean: managerMBean,
+            operation: 'getProfiles(java.lang.String, java.util.List)',
+            arguments: [$scope.versionId, ['id']]
+          }, onSuccess($scope.render));
+        }
+      }
+
+
+      $scope.$watch('versionId', (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          $scope.init();
+        }
+      });
+
+    };
+
+    public link = ($scope, $element, $attrs) => {
+
+      var selector = $element.find('#selector');
+
+      $scope.$watch('indeterminate', (newValue, oldValue) => {
+         if (newValue !== oldValue) {
+           selector.prop('indeterminate', $scope.indeterminate);
+         }
+      });
+
+      $scope.$watch('selectedProfiles', (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          if ($scope.selectedProfiles.length > 0) {
+            if ($scope.selectedProfiles.length !== $scope.profiles.length) {
+              $scope.indeterminate = true;
+              $scope.selectedAll = false;
+            } else {
+              $scope.indeterminate = false;
+              $scope.selectedAll = true;
+            }
+          } else {
+            $scope.indeterminate = false;
+            $scope.selectedAll = false;
+          }
+        }
+      }, true);
+
+
+    };
+  }
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/test.ts b/hawtio-web/src/main/webapp/app/fabric/js/test.ts
@@ -0,0 +1,34 @@
+module Fabric {
+
+  export function TestController($scope, jolokia) {
+
+    $scope.version = {};
+    $scope.versionId = '';
+
+    $scope.selectedProfiles = [{
+      id: '1-dot-0',
+      selected: true
+    }, {
+      id: 'a-mq',
+      selected: true
+    }];
+
+    $scope.$watch('version', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        if ($scope.version && !Object.equal($scope.version, {})) {
+          $scope.versionId = $scope.version.id;
+        }
+      }
+    });
+
+    $scope.$watch('selectedProfiles', (newValue, oldValue) => {
+
+    });
+
+
+
+
+  }
+
+
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/versionSelectorDirective.ts b/hawtio-web/src/main/webapp/app/fabric/js/versionSelectorDirective.ts
@@ -20,7 +20,7 @@ module Fabric {
 
       $scope.$watch('versions', (newValue, oldValue) => {
         if (newValue !== oldValue) {
-          if (!$scope.selectedVersion) {
+          if (!$scope.selectedVersion || Object.equal($scope.selectedVersion, {})) {
             if ($scope.selectedVersionId === '') {
               $scope.selectedVersion = $scope.versions.find((version) => { return version.defaultVersion; });
             } else {