Console: Several enhancements and fixes

- Update time/date in datetime picker as time passes; - URL list sort; - URL list values for 24h instead of 1h; - Alerts flag on URL list; - Use availability metrics for URL list; - Fix moment deprecation warnings; - Workaround for tooltips; - Improve alerts text; - Fix availability value, last downtime and downtime duration in availability page; - Removed "last week" from Alerts, as it depends on time picker; - Others...
hawkular · Mar 31, 2015 · 7b3303a · 7b3303a
1 parent 1deb88e
commit 7b3303a
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 60 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
@@ -8,7 +8,7 @@
       <b class="caret"></b>
     </a>
     <ul class="dropdown-menu" role="menu">
-      <li ng-class="{'active': hkParams.resourceId === resource.id}" ng-repeat="resource in hkResources">
+      <li ng-class="{'active': hkParams.resourceId === resource.id}" ng-repeat="resource in hkResources | orderBy:'parameters.url'">
         <a href="" ng-click="setSelection(resource)">{{resource.parameters.url}}</a>
       </li>
       <li class="divider"></li>

diff --git a/plugins/directives/plugins/topbar/ts/topbarDirective.ts b/plugins/directives/plugins/topbar/ts/topbarDirective.ts
@@ -40,13 +40,17 @@ module Topbar {
       };
 
       $scope.getFormattedDate = function() {
-        var diff = $scope.hkEndTimestamp - $scope.hkStartTimestamp;
+        var diff = $scope.hkParams.timeOffset;
 
         // FIXME: Use moment ?
-        $scope.offsetName = $scope.rangeNames[diff] || 'Custom';
+        $scope.offsetName = $scope.rangeNames[$scope.hkParams.timeOffset] || 'Custom';
 
-        var momStart = moment($scope.hkStartTimestamp);
-        var momEnd = moment($scope.hkEndTimestamp);
+        // TODO: Use this for custom
+        // var momStart = moment($scope.hkStartTimestamp);
+        // var momEnd = moment($scope.hkEndTimestamp);
+
+        var momStart = moment().subtract($scope.hkParams.timeOffset, 'milliseconds');
+        var momEnd = moment();
 
         if (diff < 24 * 60 * 60 * 1000) {
           return momStart.format('D MMM YYYY') + ' ' + momStart.format('HH:mm') + ' - ' + (momStart.day() !== momEnd.day() ? momEnd.format('D MMM YYYY ')  : '') + momEnd.format('HH:mm');

diff --git a/plugins/directives/plugins/topbar/ts/topbarServices.ts b/plugins/directives/plugins/topbar/ts/topbarServices.ts
@@ -39,14 +39,14 @@ module Topbar {
 
       $rootScope.hkParams.timeOffset = $routeParams.timeOffset || defaultOffset;
       $rootScope.hkEndTimestamp = $routeParams.endTimestamp || moment().valueOf();
-      $rootScope.hkStartTimestamp =  moment().subtract('milliseconds', $rootScope.hkParams.timeOffset).valueOf();
+      $rootScope.hkStartTimestamp =  moment().subtract($rootScope.hkParams.timeOffset, 'milliseconds').valueOf();
 
       $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
         $rootScope.hkParams = current.params;
 
         $rootScope.hkParams.timeOffset = $routeParams.timeOffset || defaultOffset;
         $rootScope.hkEndTimestamp = $routeParams.endTimestamp || moment().valueOf();
-        $rootScope.hkStartTimestamp =  moment().subtract('milliseconds', $rootScope.hkParams.timeOffset).valueOf();
+        $rootScope.hkStartTimestamp =  moment().subtract($rootScope.hkParams.timeOffset, 'milliseconds').valueOf();
 
         HawkularInventory.Resource.query({tenantId: globalTenantId}, (resourceList) => {
           $rootScope.hkResources = resourceList;

diff --git a/plugins/metrics/plugins/metrics/html/add-url.html b/plugins/metrics/plugins/metrics/html/add-url.html
@@ -28,8 +28,8 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that y
 
     <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>
+        <button class="btn btn-link" tooltip="Sort" tooltip-trigger tooltip-placement="top" ng-click="vm.reverse = !vm.reverse">
+          URL <i class="fa" ng-class="vm.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i>
         </button>
       </div>
       <div class="col-md-4">
@@ -40,27 +40,27 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that y
       </div>
     </div>
 
-    <div class="panel panel-default summary url-info" ng-repeat="res in vm.resourceList">
+    <div class="panel panel-default summary url-info" ng-repeat="res in vm.resourceList | orderBy:'parameters.url':vm.reverse">
       <div class="row row-table">
         <div class="col-md-4 summary-item">
-          <span class="url-link"><a href="/metrics/response-time/{{res.id}}">{{res.parameters.url}}</a></span>
-          <button class="btn btn-link trigger" tooltip="Expand/collapse" ng-click="vm.resourceList.expanded[res.id] = !vm.resourceList.expanded[res.id]"><i class="fa" ng-class="vm.resourceList.expanded[res.id] ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>Last 24 hours</button>
+          <span class="url-link"><a href="/metrics/response-time/{{res.id}}">{{res.parameters.url}}</a><i class="fa fa-flag" tooltip="Some alert happened" tooltip-trigger tooltip-placement="top" ng-show="res.alerts.length > 0"></i></span>
+          <button class="btn btn-link trigger" tooltip="Expand/collapse" tooltip-trigger tooltip-placement="top" ng-click="vm.resourceList.expanded[res.id] = !vm.resourceList.expanded[res.id]"><i class="fa" ng-class="vm.resourceList.expanded[res.id] ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>Last 24 hours</button>
         </div>
         <div class="col-md-4 summary-item">
           <span class="data">{{res.responseTime[0].value}} <span>ms</span></span>
         </div>
         <div class="col-md-4 summary-item">
           <span class="data"><i class="fa " ng-class="res.isUp ? 'fa-arrow-up' : 'fa-arrow-down'"></i>{{res.isUp ? 'Up' : 'Down'}}</span>
-          <span class="time" tooltip="Last update"><i class="fa fa-clock-o"></i>{{res.updateTime| date:"HH:mm" }}</span>
-          <button class="btn btn-link delete" tooltip="Delete" ng-click="vm.deleteResource(res)"><i class="fa fa-trash-o"></i></button>
+          <span class="time" tooltip="Last update" tooltip-trigger tooltip-placement="top"><i class="fa fa-clock-o"></i>{{res.updateTime| date:"HH:mm" }}</span>
+          <button class="btn btn-link delete" tooltip="Delete" tooltip-trigger tooltip-placement="top" ng-click="vm.deleteResource(res)"><i class="fa fa-trash-o"></i></button>
         </div>
       </div>
       <hr ng-show="vm.resourceList.expanded[res.id]" class="panel-expanded">
       <div class="row row-table panel-expanded-content" ng-show="vm.resourceList.expanded[res.id]">
         <div class="col-md-4 summary-item text-left">
           <ul class="list-unstyled alert-status" ng-hide="res.alerts.length === 0">
-            <li ng-repeat="alert in res.alerts.slice().reverse()|limitTo:3">
-              <i class="fa fa-flag"></i>{{alert.dataTimestamp|date:'yyyy-MM-dd HH:mm'}}: <strong>{{alert.condition.type}}: {{alert.value}}</strong>
+            <li ng-repeat="alert in res.alerts.slice().reverse() | limitTo:3">
+              <i class="fa fa-flag"></i>{{alert.dataTimestamp|date:'hh:mm a'}}: <span ng-if="alert.condition.type=='AVAILABILITY'"><strong>server down</strong></span><span ng-if="alert.condition.type=='THRESHOLD'"><strong>high response time</strong> ({{alert.value}}ms)</span>
             </li>
           </ul>
           <span class="no-alerts" ng-show="res.alerts.length === 0">No alerts. The URL is doing great :)</span>
@@ -76,10 +76,10 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that y
           </div>
         </div>
         <div class="col-md-4 summary-item">
-          <span class="time" tooltip="Last update"><i class="fa fa-clock-o"></i>Last 24 hours</span>
+          <span class="time" tooltip="Last update" tooltip-trigger tooltip-placement="top"><i class="fa fa-clock-o"></i>Last 24 hours</span>
           <div class="top-area">
             <span class="data" ng-show="res.availability === 100"><i class="fa fa-arrow-up"></i>Always Up</span>
-            <span class="data" ng-hide="res.availability === 100"><i class="fa fa-arrow-down"></i>Down {{res.downTime}} min</span>
+            <span class="data" ng-hide="res.availability === 100"><i class="fa fa-arrow-down"></i>Down {{res.downTime / 3 | number:0}} min</span>
           </div>
           <div class="bottom-area">
             <span class="data" ng-hide="res.availability === 100">{{res.availability | number:3}} <span>%</span></span>

diff --git a/plugins/metrics/plugins/metrics/html/alerts-view.html b/plugins/metrics/plugins/metrics/html/alerts-view.html
@@ -1,4 +1,4 @@
-<p class="info-top"><strong>{{(mac.alertList | filter:timeFilter).length}} alerts</strong> last week.</p>
+<p class="info-top"><strong>{{(mac.alertList | filter:timeFilter).length}} alerts</strong><!--  last week. --></p>
 
 <div class="alerts-activity">
   <div ng-repeat="alert in mac.alertList | filter:timeFilter | orderBy: '-start'">

diff --git a/plugins/metrics/plugins/metrics/html/availability.html b/plugins/metrics/plugins/metrics/html/availability.html
@@ -5,15 +5,17 @@ <h1>Availability</h1>
   <div class="panel panel-default summary">
     <div class="row">
       <div class="col-md-3 summary-item">
-        <span class="data">{{vm.uptimeRatio * 100}} %</span>
+        <span class="data" ng-show="vm.uptimeRatio < 1">{{vm.uptimeRatio * 100 | number:3}} %</span>
+        <span class="data" ng-show="vm.uptimeRatio === 1">{{vm.uptimeRatio * 100}} %</span>
         <span class="item">Availability</span>
       </div>
       <div class="col-md-3 summary-item">
-        <span class="data">{{vm.downtimeDuration}}</span>
+        <span class="data">{{vm.downtimeDuration / 1000 | number:0}}s</span>
         <span class="item">Total Downtime Duration</span>
       </div>
       <div class="col-md-3 summary-item">
-        <span class="data">{{vm.lastDowntime | date:'mediumDate'}}</span>
+        <span class="data" ng-show="vm.lastDowntime.valueOf() !== 0">{{vm.lastDowntime | date:'mediumDate'}}</span>
+        <span class="data" ng-show="!vm.lastDowntime || vm.lastDowntime.valueOf() === 0">Always Up</span>
         <span class="item">Last Downtime</span>
       </div>
       <div class="col-md-3 summary-item">

diff --git a/plugins/metrics/plugins/metrics/ts/addUrlPage.ts b/plugins/metrics/plugins/metrics/ts/addUrlPage.ts
@@ -139,25 +139,26 @@ module HawkularMetrics {
         angular.forEach(this.resourceList, function(res, idx) {
           this.HawkularMetric.NumericMetricData.queryMetrics({
             tenantId: globalTenantId, resourceId: res.id, numericId: (res.id + '.status.duration'),
-            start: moment().subtract(1, 'hour').valueOf(), end: moment().valueOf()}, (resource) => {
+            start: moment().subtract(24, 'hours').valueOf(), end: moment().valueOf()}, (resource) => {
             // FIXME: Work data so it works for chart ?
             res['responseTime'] = resource;
           });
           this.HawkularMetric.NumericMetricData.queryMetrics({
             tenantId: globalTenantId, resourceId: res.id, numericId: (res.id + '.status.code'),
-            start: moment().subtract(1, 'hour').valueOf(), end: moment().valueOf()}, (resource) => {
+            start: moment().subtract(24, 'hours').valueOf(), end: moment().valueOf()}, (resource) => {
             // FIXME: Use availability instead..
             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'] = 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(),
+          this.HawkularMetric.AvailabilityMetricData.query({
+            tenantId: globalTenantId,
+            availabilityId: res.id,
+            start: moment().subtract(24, 'hours').valueOf(),
+            end: moment().valueOf(),
+            buckets: 1}, (resource) => {
+            res['availability'] = resource[0].uptimeRatio * 100;
+            res['downTime'] = Math.round(resource[0].downtimeDuration / 1000 / 60);
+          });
+          this.HawkularAlert.Alert.query({ query: res.id, start: moment().subtract(24, 'hours').valueOf(),
             end: moment().valueOf()}, (alertsList) => {
             res['alerts'] = [];
             for(var i = 0; i < alertsList.length; i++) {

diff --git a/plugins/metrics/plugins/metrics/ts/metricsAvailabilityPage.ts b/plugins/metrics/plugins/metrics/ts/metricsAvailabilityPage.ts
@@ -128,7 +128,7 @@ module HawkularMetrics {
 
             if (availResponse && !_.last(availResponse).empty) {
 
-              this.uptimeRatio = Math.round(_.last(availResponse).uptimeRatio);
+              this.uptimeRatio = _.last(availResponse).uptimeRatio;
               this.downtimeDuration = Math.round(_.last(availResponse).downtimeDuration);
               this.lastDowntime = new Date(_.last(availResponse).lastDowntime);
               this.downtimeCount = _.last(availResponse).downtimeCount;

diff --git a/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts b/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts
@@ -43,7 +43,7 @@ module HawkularMetrics {
 
     init() {
       this.endTimestamp = moment().valueOf();
-      this.startTimestamp = moment().subtract('hour', this.initialHoursDifference).valueOf();
+      this.startTimestamp = moment().subtract(this.initialHoursDifference, 'hours').valueOf();
     }
 
   }