Merge pull request #53 from ammendonca/HAWKULAR-NAV

Service for providing selected resource and route params into rootScope + misc fixes
hawkular · Mar 26, 2015 · 5570fb5 · 5570fb5
2 parents c2858ff + 8ca7608
commit 5570fb5
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 229 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/sidebar/html/sidebar.html b/plugins/directives/plugins/sidebar/html/sidebar.html
@@ -1,4 +1,4 @@
-<div class="col-sm-3 col-md-2 sidebar-pf sidebar-pf-left sidebar-pf-dark sidebar-pf-big-icons">
+<div class="col-sm-3 col-md-2 sidebar-pf sidebar-pf-left sidebar-pf-dark sidebar-pf-big-icons sidebar-pf-fixed">
 
   <ul class="nav nav-pills nav-stacked nav-dark nav-big-icons">
     <li ng-class="getClass('/metrics/upDowntime')"><a href="/metrics/upDowntime"><i class="fa fa-arrow-up"></i>Availability</a></li>

diff --git a/plugins/directives/plugins/topbar/html/topbar.html b/plugins/directives/plugins/topbar/html/topbar.html
@@ -1,43 +1,22 @@
 <ul class="nav navbar-nav navbar-primary navbar-selector navbar-dark row">
-  <li class="context col-sm-3 col-md-2" dropdown>
+  <li class="col-sm-3 col-md-2">
+    <a href="/metrics/addUrl">URLs List</a>
+  </li>
+  <li class="context dropdown">
     <a href="#" class="additional-info" dropdown-toggle ng-hide="resources.length === 0">
-      {{selectedResource.id}}
-      <span>{{selectedResource.parameters.url}}</span>
+      {{selectedResource.parameters.url}}
       <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" 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': selectedResource.id === resource.id}" ng-repeat="resource in hkResourcesList">
-        <a href="" ng-click="setSelection(resource)">{{resource.parameters.url}} ({{resource.id}})</a>
+      <li ng-class="{'active': hkParams.resourceId === resource.id}" ng-repeat="resource in hkResources">
+        <a href="" ng-click="setSelection(resource)">{{resource.parameters.url}}</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>
     <div class="input" data-toggle="dropdown">

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', '$routeParams', 'DataResource', 'DataRange', 'HawkularInventory', ($scope, $rootScope, $location, $routeParams, DataResource, DataRange, HawkularInventory) => {
+    ['$scope', '$rootScope', '$location', '$routeParams', 'HawkularNav', 'DataRange', 'HawkularInventory', ($scope, $rootScope, $location, $routeParams, HawkularNav, DataRange, HawkularInventory) => {
 
     $scope.range = 'week';
 
@@ -51,26 +51,13 @@ module Topbar {
       'year': 'Last Year'
     };
 
-    $scope.updateResources = function() {
-      DataResource.updateResources();
-    };
-
     $scope.$watch(function() { return $location.path(); }, function(value) {
       $rootScope.hideSidebar = ($location.path().indexOf('/metrics/addUrl') === 0);
     });
 
-    $scope.$watch(function() { return $routeParams.resourceId; }, function(value) {
-      if (value) {
-        $scope.selectedResource = HawkularInventory.Resource.get({tenantId: globalTenantId, resourceId: value});
-      }
-    });
-
     $scope.setSelection = function(resourceId) {
       $location.path($location.path().replace($routeParams.resourceId, resourceId.id));
     };
 
-    /// Initialize
-    $scope.updateResources();
-
   }]);
 }
diff --git a/plugins/directives/plugins/topbar/ts/topbarServices.ts b/plugins/directives/plugins/topbar/ts/topbarServices.ts
@@ -56,42 +56,36 @@ module Topbar {
 
   _module.service('DataRange', DataRange);
 
-  export class DataResource {
-
-    public static $inject = ['$rootScope', 'HawkularInventory', '$timeout'];
-
-    globalResourceList: any;
-    selectedResource: String;
-    timeout: any;
-
-    hkInventory: any;
-    rootScope: 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 {
-      this.rootScope.hkResourcesList = this.hkInventory.Resource.query({tenantId: globalTenantId});
-    }
-
-    public getSelectedResource():String {
-      return this.selectedResource;
-    }
-
-    public getResources():any {
-      // return this.globalResourceList;
-      return this.rootScope.hkResourcesList;
-    }
-
-    public setSelectedResource(resource: String):void {
-      this.selectedResource = resource;
+  export class HawkularNav {
+
+    public static $inject = ['$rootScope', '$routeParams', 'HawkularInventory'];
+
+    constructor(private $rootScope: any, private $routeParams: any, private HawkularInventory: any) {
+      $rootScope.hkParams = $routeParams || [];
+
+      HawkularInventory.Resource.query({tenantId: globalTenantId}, (resourceList) => {
+        $rootScope.hkResources = resourceList;
+        for (var i = 0; i < resourceList.length; i++) {
+          if(resourceList[i].id === $rootScope.hkParams.resourceId) {
+            $rootScope.selectedResource = resourceList[i];
+          }
+        }
+      });
+
+      $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
+        $rootScope.hkParams = current.params;
+        HawkularInventory.Resource.query({tenantId: globalTenantId}, (resourceList) => {
+          $rootScope.hkResources = resourceList;
+          for (var i = 0; i < resourceList.length; i++) {
+            if(resourceList[i].id === $rootScope.hkParams.resourceId) {
+              $rootScope.selectedResource = resourceList[i];
+            }
+          }
+        });
+      }, this);
     }
   }
 
-  _module.service('DataResource', DataResource);
+  _module.service('HawkularNav', HawkularNav);
 
 }
diff --git a/plugins/metrics/index.html b/plugins/metrics/index.html
@@ -31,12 +31,13 @@
   <ul class="nav navbar-nav" hawtio-sub-tabs></ul>
 </nav>
 
+<hawkular-topbar ng-controller="Topbar.TopbarController" ng-show="!hideSidebar"></hawkular-topbar>
+
 <div id="main" class="container-fluid ng-cloak" ng-controller="HawtioNav.ViewController">
   <div ng-include src="viewPartial"></div>
 </div>
 
 <!-- add any scripts under dist/ here -->
-<script src="dist/hawkular-ui-components-directives.js"></script>
 <script src="dist/hawkular-ui-components-metrics.js"></script>
 <script src="dist/hawkular-ui-components-directives.js"></script>
 <script>

diff --git a/plugins/metrics/plugins/metrics/html/add-url.html b/plugins/metrics/plugins/metrics/html/add-url.html
@@ -1,19 +1,19 @@
 <div ng-controller="HawkularMetrics.AddUrlController as vm">
   <div class="container text-center">
     <h1>Welcome Back {{username}}!</h1>
-    <h2 ng-show="resourcesList.length === 0">Collect metrics from a website that you want to monitor.</h2>
+    <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that you want to monitor.</h2>
 
     <form class="form-horizontal add-url" name="addUrlForm" role="form" novalidate ng-submit="vm.addUrl(vm.resourceUrl)">
       <div class="form-group input">
         <div class="col-lg-5 col-sm-6 align-center">
-          <div class="input-group" ng-class="{'input-group-lg': resourcesList.length === 0}">
+          <div class="input-group" ng-class="{'input-group-lg': vm.resourceList.length === 0}">
             <input type="url" class="form-control" name="resourceUrl" ng-model="vm.resourceUrl"
                    ng-model-options="{ updateOn: 'default blur'}"
                    placeholder="Enter a website URL (e.g., http://mysite.com/home)" required>
             <span class="help-block"
                   ng-show="addUrlForm.resourceUrl.$dirty && addUrlForm.resourceUrl.$invalid">The URL you entered is not valid. Please enter a valid URL.</span>
               <span class="input-group-btn">
-                   <button class="btn btn-primary" ng-class="{'btn-lg': resourcesList.length === 0}" type="submit" ng-disabled="addUrlForm.$invalid || vm.addProgress">
+                   <button class="btn btn-primary" ng-class="{'btn-lg': vm.resourceList.length === 0}" type="submit" ng-disabled="addUrlForm.$invalid || vm.addProgress">
                      <div ng-show="vm.addProgress" class="spinner spinner-sm"></div>
                    Add URL
                    </button>
@@ -27,7 +27,7 @@ <h2 ng-show="resourcesList.length === 0">Collect metrics from a website that you
       </div>
     </form>
 
-    <div class="row urls-list-labels">
+    <div class="row urls-list-labels" ng-show="vm.resourceList.length > 0">
       <div class="col-md-4 text-left">
         <button class="btn btn-link" data-toggle="tooltip" data-placement="top" title="" data-original-title="Sort">
           URL <b class="caret"></b>
@@ -63,8 +63,8 @@ <h2 ng-show="resourcesList.length === 0">Collect metrics from a website that you
               <i class="fa fa-flag"></i>{{alert.dataTimestamp|date:'yyyy-MM-dd HH:mm'}}: <strong>{{alert.condition.type}}: {{alert.value}}</strong>
             </li>
           </ul>
-          <a href="/metrics/alerts/{{res.id}}">View All Alerts ({{res.alerts.length}})</a>
-          <div class="data" ng-show="res.alerts.length === 0"><i class="fa fa-thumbs-o-up"></i>No Alerts</div>
+          <div class="data text-center top-area" ng-show="res.alerts.length === 0"><i class="fa fa-thumbs-o-up"></i>No Alerts</div>
+          <a href="/metrics/alerts/{{res.id}}" class="bottom-area" ng-show="res.alerts.length > 0">View All Alerts ({{res.alerts.length}})</a>
         </div>
         <div class="col-md-4 summary-item">
           <div id="metrics-chart" class="top-area" style="height: 44px; width: 237px;">

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', '$filter', 'HawkularInventory', 'HawkularMetric', 'HawkularAlert', 'DataResource', 'HawkularAlertsManager'];
+    public static $inject = ['$location', '$scope', '$rootScope', '$log', '$filter', 'HawkularInventory', 'HawkularMetric', 'HawkularAlert', 'HawkularAlertsManager'];
 
     private httpUriPart = 'http://';
     public addProgress: boolean = false;
@@ -34,7 +34,6 @@ module HawkularMetrics {
                 private HawkularInventory:any,
                 private HawkularMetric:any,
                 private HawkularAlert:any,
-                private DataResource:any,
                 private HawkularAlertsManager: HawkularMetrics.IHawkularAlertsManager,
                 public resourceUrl:string) {
       $scope.vm = this;
@@ -56,23 +55,21 @@ module HawkularMetrics {
       this.$log.info('Adding new Resource Url to Hawkular-inventory: ' + url);
 
       globalChartTimeRange = new ChartTimeRange(1);
-      var globalMetricId: string;
+      var metricId: string;
 
       /// 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;
+          metricId = newResource.id;
           console.dir(newResource);
-          this.$log.info('New Resource ID: ' + globalMetricId + ' created for url: ' + globalResourceUrl);
+          this.$log.info('New Resource ID: ' + metricId + ' created for url: ' + newResource.parameters.url);
           var metrics = [{
-            name: globalMetricId + '.status.duration',
+            name: metricId + '.status.duration',
             unit: 'MILLI_SECOND',
             description: 'Response Time in ms.'
           }, {
-            name: globalMetricId + '.status.code',
+            name: metricId + '.status.code',
             unit: 'NONE',
             description: 'Status Code'
           }];
@@ -91,16 +88,16 @@ module HawkularMetrics {
           return this.HawkularAlertsManager.addEmailAction('myemail@company.com');
         }).then(()=> {
           // Create threshold trigger for newly created metrics
-          console.log('metric', globalMetricId);
-          return this.HawkularAlertsManager.createTrigger(globalMetricId + '_trigger_thres', true, 'THRESHOLD', 'myemail@company.com');
+          console.log('metric', metricId);
+          return this.HawkularAlertsManager.createTrigger(metricId + '_trigger_thres', true, 'THRESHOLD', 'myemail@company.com');
         }).then((alert)=> {
           console.log('alert', alert);
           // Create availability trigger for newly created metrics
-          return this.HawkularAlertsManager.createTrigger(globalMetricId + '_trigger_avail', false, 'AVAILABILITY', 'myemail@company.com');
+          return this.HawkularAlertsManager.createTrigger(metricId + '_trigger_avail', false, 'AVAILABILITY', 'myemail@company.com');
         }).finally(()=> {
           this.addProgress = false;
           toastr.info('Your data is being collected. Please be patient (should be about another minute).');
-          this.$location.url('/metrics/responseTime/' + globalMetricId);
+          this.$location.url('/metrics/responseTime/' + metricId);
         });
     }
 
@@ -118,15 +115,15 @@ module HawkularMetrics {
             tenantId: globalTenantId, resourceId: res.id, numericId: (res.id + '.status.code'),
             start: moment().subtract(1, 'hour').valueOf(), end: moment().valueOf()}, (resource) => {
             // FIXME: Use availability instead..
-            res['isUp'] = (resource[0].value >= 200 && resource[0].value < 300);
+            res['isUp'] = (resource[0] && resource[0].value >= 200 && resource[0].value < 300);
             var upTime = 0;
             for(var i = 0; i < resource.length; i++) {
               if(resource[i].value >= 200 && resource[i].value < 300) {
                 upTime++;
               }
             }
-            res['availability'] = upTime/resource.length * 100;
-            res['downTime'] = resource.length - upTime;
+            res['availability'] = resource.length > 0 ? upTime/resource.length * 100 : 0;
+            res['downTime'] = resource.length > 0 ? resource.length - upTime : 'every';
           });
           this.HawkularAlert.Alert.query({ query: res.id, start: moment().subtract(1, 'hour').valueOf(),
             end: moment().valueOf()}, (alertsList) => {

diff --git a/plugins/metrics/plugins/metrics/ts/metricsAvailabilityPage.ts b/plugins/metrics/plugins/metrics/ts/metricsAvailabilityPage.ts
@@ -34,6 +34,14 @@ module HawkularMetrics {
       this.startTimeStamp = moment().subtract(1, 'hours').toDate();
       this.endTimeStamp = new Date();
 
+      $scope.$watch('hkParams.resourceId', (resourceId) => {
+        /// made a selection from url switcher
+        if (resourceId) {
+          this.metricId = resourceId;
+          this.refreshAvailChartDataNow(this.getMetricId());
+        }
+      });
+
       $scope.$on('RefreshAvailabilityChart', (event) => {
         this.refreshAvailChartDataNow(this.getMetricId());
       });
@@ -44,7 +52,9 @@ module HawkularMetrics {
     private availabilityDataPoints:any[] = [];
     private chartData:any;
     private autoRefreshPromise:ng.IPromise<number>;
-    selectedResource;
+
+    private metricId;
+    //selectedResource;
 
     availabilityPercent = 0;
     downTimeDuration = 0;
@@ -92,13 +102,14 @@ module HawkularMetrics {
     }
 
     getMetricId():string {
-      return MetricsAvailabilityController.getResourceCodeMetricId();
+      return this.metricId + '.status.code';//MetricsAvailabilityController.getResourceCodeMetricId();
     }
 
+    /*
     private static getResourceCodeMetricId() {
       return globalMetricId + '.status.code';
     }
-
+    */
 
     refreshHistoricalAvailDataForTimestamp(metricId:string, startTime?:number, endTime?:number):void {
       // calling refreshChartData without params use the model values

diff --git a/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts b/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts
@@ -30,10 +30,10 @@ module HawkularMetrics {
   /// @todo: this will go away once we have KeyCloak integration
   export var globalTenantId = "test";
 
-  export var globalMetricId = "";
-  export var globalResourceUrl = "";
+  //export var globalMetricId = "";
+  //export var globalResourceUrl = "";
 
-  export var globalResourceList = [];
+  //export var globalResourceList = [];
 
   export var globalChartTimeRange:ChartTimeRange;