HAWKULAR-28 & 79: Sidebar Enhancements

- Use URL to identify resources; - Hide Sidebar properly when in "Add URL" screen; - Other needed changes to accommodate first;
hawkular · Mar 23, 2015 · 89d367a · 89d367a
1 parent 91787d5
commit 89d367a
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 84 deletions.
diff --git a/dist/hawkular-ui-components-directives.js b/dist/hawkular-ui-components-directives.js
diff --git a/dist/hawkular-ui-components-metrics.js b/dist/hawkular-ui-components-metrics.js
diff --git a/plugins/directives/plugins/topbar/html/topbar.html b/plugins/directives/plugins/topbar/html/topbar.html
@@ -1,24 +1,42 @@
 <ul class="nav navbar-nav navbar-primary navbar-selector navbar-dark row">
+  <li class="context col-sm-3 col-md-2" dropdown>
+    <a href="#" class="additional-info" dropdown-toggle ng-hide="resources.length === 0">
+      {{selectedResource.id}}
+      <span>{{selectedResource.parameters.url}}</span>
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu" role="menu">
+      <li ng-class="{'active': selectedResource.id === resource.id}" ng-repeat="resource in hkResourcesList">
+        <a href="" ng-click="setSelection(resource)">{{resource.parameters.url}} ({{resource.id}})</a>
+      </li>
+      <li class="divider"></li>
+      <li>
+        <a href="/metrics/addUrl">Add Application...</a>
+      </li>
+    </ul>
+  </li>
+  <!--
   <li class="dropdown context col-sm-3 col-md-2">
-    <a href="#" class="dropdown-toggle additional-info" data-toggle="dropdown" ng-hide="resources.length === 0">
-      {{getSelection().resource.id}}
-      <span>{{getSelection().resource.parameters.url}}</span>
+    <a href="#" class="dropdown-toggle additional-info" ng-hide="resources.length === 0">
+      {{selectedResource.id}}
+      <span>{{selectedResource.parameters.url}}</span>
       <b class="caret"></b>
     </a>
     <a href="/metrics/addUrl" class="additional-info" ng-show="resources.length === 0">
       No Resources Available
       <span>Add a Resource</span>
     </a>
     <ul class="dropdown-menu">
-      <li ng-class="{'active': getSelection().resource.id == resource.id}" ng-repeat="resource in resources">
-        <a href="" ng-click="setSelection(resource)">{{resource.id}}</a>
+      <li ng-class="{'active': selectedResource.id === resource.id}" ng-repeat="resource in hkResourcesList">
+        <a href="" ng-click="setSelection(resource)">{{resource.parameters.url}} ({{resource.id}})</a>
       </li>
       <li class="divider"></li>
       <li>
         <a href="/metrics/addUrl">Add Application...</a>
       </li>
     </ul>
   </li>
+  -->
 
   <li class="pull-right date-range dropdown">
     <i class="fa fa-calendar"></i>
@@ -41,4 +59,4 @@
       </div>
     </div>
   </li>
-</ul>
+</ul>
diff --git a/plugins/directives/plugins/topbar/ts/topbarDirective.ts b/plugins/directives/plugins/topbar/ts/topbarDirective.ts
@@ -28,7 +28,7 @@ module Topbar {
   }
 
   export var TopbarController = _module.controller("Topbar.TopbarController",
-    ['$scope', '$rootScope', '$location', 'DataResource', 'DataRange', 'HawkularInventory', ($scope, $rootScope, $location, DataResource, DataRange, HawkularInventory) => {
+    ['$scope', '$rootScope', '$location', '$routeParams', 'DataResource', 'DataRange', 'HawkularInventory', ($scope, $rootScope, $location, $routeParams, DataResource, DataRange, HawkularInventory) => {
 
     $scope.range = 'week';
 
@@ -52,27 +52,23 @@ module Topbar {
     };
 
     $scope.updateResources = function() {
-      DataResource.updateResources().then(function(data) {
-        $scope.resources = data;
-      });
+      DataResource.updateResources();
     };
 
-    $scope.getSelection = function() {
-      return {
-        resource: DataResource.getSelectedResource(),
-        start: DataRange.getStartDate(),
-        end: DataRange.getEndDate()
-      };
-    };
+    $scope.$watch(function() { return $location.path(); }, function(value) {
+      $rootScope.hideSidebar = ($location.path().indexOf('/metrics/addUrl') === 0);
+    });
+
+    $scope.$watch(function() { return $routeParams.resourceId; }, function(value) {
+      $scope.selectedResource = HawkularInventory.Resource.get({tenantId: globalTenantId, resourceId: value});
+    });
 
     $scope.setSelection = function(resourceId) {
-      DataResource.setSelectedResource(resourceId);
+      $location.path($location.path().replace($routeParams.resourceId, resourceId.id));
     };
 
     /// Initialize
     $scope.updateResources();
-    $scope.getSelection();
-    $scope.getDate();
 
   }]);
 }
diff --git a/plugins/directives/plugins/topbar/ts/topbarServices.ts b/plugins/directives/plugins/topbar/ts/topbarServices.ts
@@ -58,35 +58,33 @@ module Topbar {
 
   export class DataResource {
 
-    public static $inject = ['HawkularInventory'];
+    public static $inject = ['$rootScope', 'HawkularInventory', '$timeout'];
 
     globalResourceList: any;
     selectedResource: String;
+    timeout: any;
 
     hkInventory: any;
+    rootScope: any;
 
-    constructor(private HawkularInventory:any) {
+    constructor(private $rootScope: any, private HawkularInventory:any, private $timeout:any) {
       this.hkInventory = HawkularInventory;
+      this.rootScope = $rootScope;
+      this.timeout = $timeout;
       this.updateResources();
     }
 
     public updateResources():any {
-      return this.hkInventory.Resource.query({tenantId: globalTenantId}).$promise.
-        then((resources)=> {
-          this.globalResourceList = resources;
-          if (!this.selectedResource) {
-            this.selectedResource = resources[resources.length - 1];
-          }
-          return resources;
-        });
+      this.rootScope.hkResourcesList = this.hkInventory.Resource.query({tenantId: globalTenantId});
     }
 
     public getSelectedResource():String {
       return this.selectedResource;
     }
 
     public getResources():any {
-      return this.globalResourceList;
+      // return this.globalResourceList;
+      return this.rootScope.hkResourcesList;
     }
 
     public setSelectedResource(resource: String):void {

diff --git a/plugins/metrics/plugins/metrics/ts/addUrlPage.ts b/plugins/metrics/plugins/metrics/ts/addUrlPage.ts
@@ -20,7 +20,7 @@ module HawkularMetrics {
 
   export class AddUrlController {
     /// this is for minification purposes
-    public static $inject = ['$location', '$scope', '$rootScope', '$log', 'HawkularInventory'];
+    public static $inject = ['$location', '$scope', '$rootScope', '$log', 'HawkularInventory', 'DataResource'];
 
     private httpUriPart = 'http://';
 
@@ -29,6 +29,7 @@ module HawkularMetrics {
                 private $rootScope:ng.IRootScopeService,
                 private $log:ng.ILogService,
                 private HawkularInventory:any,
+                private DataResource:any,
                 public resourceUrl:string) {
       $scope.vm = this;
       this.resourceUrl = this.httpUriPart;
@@ -51,6 +52,7 @@ module HawkularMetrics {
       /// Add the Resource
       this.HawkularInventory.Resource.save({tenantId: globalTenantId}, resource).$promise
         .then((newResource) => {
+          this.DataResource.updateResources();
           // we now have a resourceId from this call
           globalMetricId = newResource.id;
           globalResourceUrl = resource.parameters.url;
@@ -73,7 +75,7 @@ module HawkularMetrics {
             resourceId: newResource.id
           }, metrics).$promise.then((newMetrics) => {
               toastr.info('Your data is being collected. Please be patient (should be about another minute).');
-              this.$location.url('/metrics/responseTime');
+              this.$location.url('/metrics/responseTime/' + newResource.id);
             });
 
         });

diff --git a/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts b/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts
@@ -61,6 +61,28 @@ module HawkularMetrics {
     };
   });
 
+  _module.config(["$routeProvider", ($routeProvider) => {
+    $routeProvider.
+        when('/metrics/responseTime', {templateUrl: 'plugins/metrics/html/response-time.html',
+        resolve: {
+          hkResourceList : function($filter, $location, $q, HawkularInventory) {
+            var resPromise = HawkularInventory.Resource.query({tenantId: globalTenantId}).$promise;
+            resPromise.then(function(hkResourceList){
+              $location.path('/metrics/responseTime/' + hkResourceList[0].id);
+            }, function(){
+              $location.url('/error');
+            });
+
+            // Returning a promise which would never be resolved, so that the page would not render.
+            // The page will be redirected before rendering based on the resource list loaded above.
+            return $q.defer().promise;
+          }
+        }}).
+        when('/metrics/responseTime/:resourceId/', {templateUrl: 'plugins/metrics/html/response-time.html'}).
+        when('/metrics/responseTime/:resourceId/:rangeStart', {templateUrl: 'plugins/metrics/html/response-time.html'}).
+        when('/metrics/responseTime/:resourceId/:rangeStart/:rangeEnd', {templateUrl: 'plugins/metrics/html/response-time.html'}).
+        when('/metrics/availability/:resourceId', {templateUrl: 'plugins/metrics/html/response-time.html'});
+  }]);
 
   hawtioPluginLoader.addModule(HawkularMetrics.pluginName);
 }
diff --git a/plugins/metrics/plugins/metrics/ts/metricsResponsePage.ts b/plugins/metrics/plugins/metrics/ts/metricsResponsePage.ts
@@ -49,14 +49,15 @@ module HawkularMetrics {
    */
   export class MetricsViewController {
     /// for minification only
-    public static  $inject = ['$scope', '$rootScope', '$interval', '$log', 'HawkularMetric', 'HawkularInventory'];
+    public static  $inject = ['$scope', '$rootScope', '$interval', '$log', 'HawkularMetric', 'HawkularInventory', '$routeParams'];
 
     constructor(private $scope:any,
                 private $rootScope:ng.IRootScopeService,
                 private $interval:ng.IIntervalService,
                 private $log:ng.ILogService,
                 private HawkularMetric:any,
                 private HawkularInventory:any,
+                private $routeParams:any,
                 public startTimeStamp:Date,
                 public endTimeStamp:Date,
                 public dateRange:string) {
@@ -71,6 +72,7 @@ module HawkularMetrics {
         this.refreshChartDataNow(this.getMetricId());
       });
 
+/*
       $scope.$watch('vm.selectedResource', (resource) => {
         if (resource) {
           /// made a selection from url switcher
@@ -87,7 +89,8 @@ module HawkularMetrics {
         }
 
       });
-      this.onCreate();
+*/
+      this.onCreate($routeParams.resourceId);
     }
 
     private bucketedDataPoints:IChartDataPoint[] = [];
@@ -111,12 +114,17 @@ module HawkularMetrics {
       this._resourceList = newResourceList;
     }
 
-    private onCreate() {
+    private onCreate(curResourceId:string) {
       /// setup autorefresh for every minute
       this.autoRefresh(60);
       this.HawkularInventory.Resource.query({tenantId: globalTenantId}, (aResourceList) => {
         this.resourceList = aResourceList;
         this.selectedResource = _.last(this._resourceList);
+        for (var i = 0; i < this._resourceList.length; i++) {
+          if (aResourceList[i].id === curResourceId) {
+            this.selectedResource = this._resourceList[i];
+          }
+        }
         this.refreshChartDataNow(this.getMetricId());
       });
     }