Bit of work on the fabric feature browser

hawtio · Jun 7, 2013 · ffa89d1 · ffa89d1
1 parent d103a68
commit ffa89d1
Show file tree

Hide file tree

Showing 8 changed files with 408 additions and 1 deletion.
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -168,6 +168,10 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
         factory('toastr', ($window) => {
           return $window.toastr;
         }).
+        factory('xml2json', ($window) => {
+          var jquery:any = $;
+          return jquery.xml2json;
+        }).
         factory('workspace',($location:ng.ILocationService, jmxTreeLazyLoadRegistry, $compile:ng.ICompileService, $templateCache:ng.ITemplateCacheService, localStorage:WindowLocalStorage, jolokia, $rootScope) => {
           var answer = new Workspace(jolokia, jmxTreeLazyLoadRegistry, $location, $compile, $templateCache, localStorage, $rootScope);
           answer.loadTree();

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/editFeatures.html b/hawtio-web/src/main/webapp/app/fabric/html/editFeatures.html
@@ -0,0 +1,64 @@
+<div ng-controller="Fabric.FeatureEditController">
+
+<div class="row-fluid">
+  <div class="span12">
+    <h2 style="display: inline;">/ <a ng-href="#/fabric/view?cv={{versionId}}&sp={{profileId}}">{{versionId}}</a> / 
+      <a ng-href="#/fabric/profile/{{versionId}}/{{profileId}}">{{profileId}}</a> / Features</h2>
+  </div>
+</div>
+<div class="row-fluid">
+
+  <div class="span6">
+    <p>Inherited Features</p>
+    <ul>
+      <li ng-repeat="feature in parentFeatures">{{feature.id}}</li>
+    </ul>
+  </div>
+
+  <div class="span6">
+    <p>Features</p>
+    <ul>
+      <li ng-repeat="feature in profileFeatures">{{feature.id}}</li>
+    </ul>
+  </div>
+</div>
+
+<div class="row-fluid">
+  <div class="span12">
+    <select class="span10" ng-model="selectedRepoId" ng-options="repoId for repoId in repoIds"></select>
+    <div class="row-fluid">
+      <div class="span10">
+        <p>
+          <strong>Name: </strong>{{selectedRepoName}}
+        </p>
+
+        <p ng-show="selectedRepoRepos && selectedRepoRepos.length > 0">
+          <h6>Feature Repositories</h6>
+          <ul>
+            <li ng-repeat="repo in selectedRepoRepos">{{repo}}</li>
+          </ul>
+
+        </p>
+
+        <p ng-show="selectedRepoFeatures && selectedRepoFeatures.length > 0">
+          <div class="features-toolbar">
+            <h6 style="display: inline">Features</h6>
+            &nbsp;&nbsp;&nbsp;
+            <input type="text" class="search-query" placeholder="Filter..." ng-model="featureGridOptions.filterOptions.filterText">
+            <i class="icon-remove clickable" title="Clear Filter" ng-click="featureGridOptions.filterOptions.filterText = ''"></i>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a href="" class="btn" ng-click="addSelectedFeatures(false)" ng-disabled="selectedRepoSelectedFeatures.length == 0"><i class="icon-plus"></i> Add</a>
+            <a href="" class="btn" ng-click="addSelectedFeatures(true)" ng-disabled="selectedRepoSelectedFeatures.length == 0"><i class="icon-plus"></i> Add With Version</a>
+          </div>
+
+          <div class="gridStyle" ng-grid="featureGridOptions"></div>
+        </p>
+
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profile.html b/hawtio-web/src/main/webapp/app/fabric/html/profile.html
@@ -19,6 +19,7 @@ <h2 style="display: inline;">/ <a ng-href="#/fabric/view?cv={{versionId}}&sp={{r
         -->
     </div>
     <div class="pull-right">
+      <a class="btn" ng-href="#/fabric/profile/{{versionId}}/{{profileId}}/editFeatures"><i class="icon-edit"></i> Edit Features</a>
       <a class="btn" ng-href="#/fabric/containers/createContainer?versionId={{versionId}}&profileIds={{profileId}}" title="Deploy this profile to a new container"><i class="icon-truck"></i> Create Container</a>
       <a class="btn" href="" title="Create a new profile that is a copy of this one" ng-click="copyProfileDialog = true"><i class="icon-copy"></i> Copy</a>
       <a ng-href="#/wiki/branch/{{versionId}}/view/{{row.id}}" class="btn" ng-show="hasFabricWiki()"

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/editFeatures.ts b/hawtio-web/src/main/webapp/app/fabric/js/editFeatures.ts
@@ -0,0 +1,140 @@
+module Fabric {
+
+  export function FeatureEditController($scope, $routeParams, $location, jolokia, xml2json) {
+
+    $scope.getProfileFeaturesOp = "getProfileFeatures(java.lang.String, java.lang.String)";
+    $scope.versionId = $routeParams.versionId;
+    $scope.profileId = $routeParams.profileId;
+
+    $scope.response = {};
+
+    $scope.features = [];
+    $scope.repositories = [];
+    $scope.repoIds = [];
+    $scope.selectedRepoId = '';
+    $scope.selectedRepo = {};
+
+    $scope.selectedRepoXML = '';
+    $scope.selectedRepoJson = {};
+    $scope.selectedRepoError = '';
+
+    $scope.selectedRepoRepos = [];
+    $scope.selectedRepoFeatures = [];
+
+    $scope.selectedRepoSelectedFeatures = [];
+
+    $scope.featureGridOptions = {
+      data: 'selectedRepoFeatures',
+      selectedItems: $scope.selectedRepoSelectedFeatures,
+      displayFooter: false,
+      showFilter: false,
+      keepLastSelected: true,
+      filterOptions: {
+        filterText: ''
+      },
+      columnDefs: [
+        {
+          field: 'name',
+          displayName: 'Name'
+        },
+        {
+          field: 'version',
+          displayName: 'Version'
+        }
+      ]
+    }
+
+
+    $scope.$watch('features', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        $scope.parentFeatures = $scope.features.filter((f) => { return f.isParentFeature });
+        $scope.profileFeatures = $scope.features.filter((f) => { return !f.isParentFeature });
+      }
+    }, true);
+
+
+    $scope.$watch('selectedRepoXML', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        $scope.selectedRepoJson = xml2json($scope.selectedRepoXML);
+      }
+    });
+
+
+    $scope.$watch('selectedRepoId', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        if ($scope.selectedRepoId !== '') {
+          $scope.selectedRepo = $scope.repositories.find((repo) => { return $scope.selectedRepoId === repo.id; });
+        } else {
+          $scope.selectedRepo = {};
+        }
+      }
+    });
+
+
+    $scope.$watch('selectedRepoJson', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        console.log("selectedRepoJson: ", $scope.selectedRepoJson);
+        $scope.selectedRepoName = $scope.selectedRepoJson.name;
+        $scope.selectedRepoRepos = $scope.selectedRepoJson.repository;
+        $scope.selectedRepoFeatures = $scope.selectedRepoJson.feature;
+      }
+    });
+
+
+    $scope.$watch('selectedRepo', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        if (angular.isDefined($scope.selectedRepo.data)) {
+          $scope.selectedRepoXML = $scope.selectedRepo.data;
+        } else {
+          $scope.selectedRepoXML = '';
+        }
+
+        if (angular.isDefined($scope.selectedRepo.errorMessage)) {
+          $scope.selectedRepoError = $scope.selectedRepo.errorMessage;
+        } else {
+          $scope.selectedRepoError = '';
+        }
+      }
+    }, true);
+
+
+    $scope.$watch('repoIds', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        if ($scope.repoIds.length > 0) {
+          if ($scope.selectedRepoId === '') {
+            $scope.selectedRepoId = $scope.repoIds[0];
+          }
+        } else {
+          $scope.selectedRepoId = '';
+        }
+      }
+    }, true);
+
+
+    $scope.$watch('repositories', (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        $scope.repoIds = $scope.repositories.map((repo) => { return repo.id; });
+      }
+    }, true);
+
+
+    $scope.dispatch = (response) => {
+      if (!Object.equal(response.value, $scope.response)) {
+        $scope.response = response.value;
+        $scope.features = Object.clone($scope.response.featureDefinitions);
+        $scope.repositories = Object.clone($scope.response.repositoryDefinitions);
+        $scope.$apply();
+      }
+    }
+
+
+    Core.register(jolokia, $scope, [{
+      type: 'exec', mbean: managerMBean, operation: $scope.getProfileFeaturesOp,
+        arguments: [$scope.versionId, $scope.profileId]
+      }], onSuccess($scope.dispatch));
+
+
+  }
+
+
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -8,6 +8,7 @@ module Fabric {
             when('/fabric/clusters/*page', {templateUrl: 'app/fabric/html/clusters.html'}).
             when('/fabric/container/:containerId', {templateUrl: 'app/fabric/html/container.html'}).
             when('/fabric/profile/:versionId/:profileId', {templateUrl: 'app/fabric/html/profile.html'}).
+            when('/fabric/profile/:versionId/:profileId/editFeatures', {templateUrl: 'app/fabric/html/editFeatures.html'}).
             when('/fabric/profile/:versionId/:profileId/:fname', {templateUrl: 'app/fabric/html/pid.html'}).
             when('/fabric/view', { templateUrl: 'app/fabric/html/fabricView.html', reloadOnSearch: false });
   }).

diff --git a/hawtio-web/src/main/webapp/css/site-base.less b/hawtio-web/src/main/webapp/css/site-base.less
@@ -1537,4 +1537,10 @@ li.stacktrace {
 
 .section_filter {
   display: inline-block;
-}
+}
+
+.features-toolbar {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -142,6 +142,10 @@
 <script type="text/javascript" src="lib/ColReorder.min.js"></script>
 <script type="text/javascript" src="lib/KeyTable.min.js"></script>
 
+<!-- XML 2 json -->
+<script type="text/javascript" src="lib/jquery.xml2json.js"></script>
+
+<!-- toastr notifications -->
 <script type="text/javascript" src="lib/toastr.min.js"></script>
 
 <!-- graph layout -->