HAWKULAR-303: Fix Last downtime in URL list and other enhancements

Enhancements: - Fix Last Update position and text in URL list; - Show information boxes when no app servers are configured; - Add "Fetching state" to app servers when no state has been retrieved yet; - Get availability for URL list from Availability endpoint instead of through status code; - Reduce amount of requested data for showing current response time (1h instead of 24h); - Use distinct=true param for App Server list availability;
hawkular · Jun 2, 2015 · 377c635 · 377c635
1 parent 96e6dc1
commit 377c635
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 52 deletions.
diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/add-url.html b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/add-url.html
@@ -33,9 +33,8 @@ <h2 ng-show="vm.resourceList.length > 0" class="text-center hk-fade-in">Current
         URL (A-Z) <i class="fa" ng-class="vm.reverse ? 'fa-angle-up' : 'fa-angle-down'"></i>
       </button>
     </div>
-    <div class="col-sm-6 text-right">
-      Last update
-      <span class="hk-update pull-right" data-toggle="tooltip" data-placement="top" title="Last update"><i class="fa fa-clock-o"></i>{{vm.lastUpdateTimestamp| date:"HH:mm" }}</span>
+    <div class="col-sm-6">
+      <span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.lastUpdateTimestamp | date:'mediumTime'}}</span>
     </div>
   </div>
 

diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-server-list.html b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-server-list.html
@@ -2,6 +2,48 @@
 
   <h1 class="text-center">{{userDetails.firstName}}'s application servers</h1>
 
+  <h3 class="pull-left">Current Status</h3>
+  <span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.lastUpdateTimestamp | date:'mediumTime'}}</span>
+
+  <div class="panel panel-default hk-summary">
+    <div class="row">
+      <div class="col-sm-2 hk-summary-item">
+        <span class="hk-data">0 <i class="fa fa-flag" ng-show="alertsNumTBD > 0"></i></span>
+        <span class="hk-item">Alerts</span>
+      </div>
+      <div class="col-sm-2 hk-summary-item">
+        <span class="hk-data">{{vm.resourceList.length}}</span>
+        <span class="hk-item">Servers</span>
+      </div>
+      <div class="col-sm-2 hk-summary-item">
+        <a href="#">
+          <span class="hk-data">{{(vm.resourceList|filter:{state: 'up'}:true).length}} <i class="fa fa-arrow-up"></i></span>
+          <span class="hk-item">Up</span>
+        </a>
+      </div>
+      <div class="col-sm-2 hk-summary-item">
+        <a href="#">
+          <span class="hk-data">{{(vm.resourceList|filter:{state: 'down'}:true).length + (vm.resourceList|filter:{state: 'unknown'}:true).length}} <i class="fa fa-arrow-down"></i></span>
+          <span class="hk-item">Down / Unknown</span>
+        </a>
+      </div>
+      <div class="col-sm-2 hk-summary-item">
+        <a href="#">
+          <span class="hk-data">{{(vm.resourceList|filter:{state: 'starting'}:true).length}} <i class="fa fa-spinner"></i></span>
+          <span class="hk-item">Starting</span>
+        </a>
+      </div>
+      <div class="col-sm-2 hk-summary-item">
+        <a href="#">
+          <span class="hk-data">{{(vm.resourceList|filter:{state: 'restart required'}:true).length}} <i class="fa fa-repeat"></i></span>
+          <span class="hk-item">Restart Required</span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <h3>Application Servers ({{vm.resourceList.length}})</h3>
+
   <div class="blank-slate-pf" ng-show="vm.resourceList.$resolved && vm.resourceList.length === 0">
     <div class="blank-slate-pf-icon">
       <i class="fa fa-server"></i>
@@ -10,47 +52,6 @@ <h1>No application servers set up.</h1>
   </div>
 
   <div ng-show="vm.resourceList.length > 0">
-    <h3 class="pull-left">Current Status</h3>
-    <span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.lastUpdateTimestamp | date:'mediumTime'}}</span>
-
-    <div class="panel panel-default hk-summary">
-      <div class="row">
-        <div class="col-sm-2 hk-summary-item">
-          <span class="hk-data">0 <i class="fa fa-flag" ng-show="alertsNumTBD > 0"></i></span>
-          <span class="hk-item">Alerts</span>
-        </div>
-        <div class="col-sm-2 hk-summary-item">
-          <span class="hk-data">{{vm.resourceList.length}}</span>
-          <span class="hk-item">Servers</span>
-        </div>
-        <div class="col-sm-2 hk-summary-item">
-          <a href="#">
-            <span class="hk-data">{{(vm.resourceList|filter:{state: 'up'}:true).length}} <i class="fa fa-arrow-up"></i></span>
-            <span class="hk-item">Up</span>
-          </a>
-        </div>
-        <div class="col-sm-2 hk-summary-item">
-          <a href="#">
-            <span class="hk-data">{{(vm.resourceList|filter:{state: 'down'}:true).length + (vm.resourceList|filter:{state: 'unknown'}:true).length}} <i class="fa fa-arrow-down"></i></span>
-            <span class="hk-item">Down / Unknown</span>
-          </a>
-        </div>
-        <div class="col-sm-2 hk-summary-item">
-          <a href="#">
-            <span class="hk-data">{{(vm.resourceList|filter:{state: 'starting'}:true).length}} <i class="fa fa-spinner"></i></span>
-            <span class="hk-item">Starting</span>
-          </a>
-        </div>
-        <div class="col-sm-2 hk-summary-item">
-          <a href="#">
-            <span class="hk-data">{{(vm.resourceList|filter:{state: 'restart required'}:true).length}} <i class="fa fa-repeat"></i></span>
-            <span class="hk-item">Restart Required</span>
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <h3>Application Servers ({{vm.resourceList.length}})</h3>
     <div class="dataTables_header"><div id="DataTables_Table_0_filter" class="dataTables_filter"><label><input type="search" ng-model="vm.search" aria-controls="DataTables_Table_0"></label></div>
 
     <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing <b>1</b> to <b>{{(vm.resourceList | filter:vm.search).length}}</b> of <b>{{vm.resourceList.length}}</b> Items</div></div>
@@ -72,6 +73,7 @@ <h3>Application Servers ({{vm.resourceList.length}})</h3>
             <i class="fa fa-arrow-down" ng-show="res.state === 'down' || res.state === 'unknown'"></i>
             <i class="fa fa-spinner fa-spin" ng-show="res.state === 'starting'"></i>
             <i class="fa fa-repeat" ng-show="res.state === 'restart required'"></i>
+            <p ng-hide="res.state"><span class="spinner spinner-sm spinner-inline"></span> <span class="fetching">Fetching state...</span></p>
             {{res.state | firstUpper}}
           </td>
           <!--<td><a href="/hawkular-ui/app/app-details/{{res.id | urlEncode}}">{{res.id | limitTo14 : res.id.length-4 : 1}}</a> <a href="/hawkular-ui/app/app-details/{{res.id | urlEncode}}" class="pull-right"><span class="label label-danger label-alert" tooltip-trigger tooltip-placement="top" tooltip="Server alerts" ng-show="res.alerts.length > 0">{{res.alerts.length}}</span></a></td>-->

diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/ts/addUrlPage.ts b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/ts/addUrlPage.ts
@@ -189,20 +189,19 @@ module HawkularMetrics {
         angular.forEach(aResourceList, function(res, idx) {
           promises.push(this.HawkularMetric.NumericMetricData.queryMetrics({
             tenantId: tenantId, resourceId: res.id, numericId: (res.id + '.status.duration'),
-            start: moment().subtract(24, 'hours').valueOf(), end: moment().valueOf()}, (resource) => {
+            start: moment().subtract(1, 'hours').valueOf(), end: moment().valueOf()}, (resource) => {
             // FIXME: Work data so it works for chart ?
             res['responseTime'] = resource;
           }).$promise);
-          promises.push(this.HawkularMetric.NumericMetricData.queryMetrics({
-            tenantId: tenantId, resourceId: res.id, numericId: (res.id + '.status.code'),
-            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);
+          promises.push(this.HawkularMetric.AvailabilityMetricData.query({
+            tenantId: tenantId, availabilityId: res.id, distinct: true,
+            start: 1, end: moment().valueOf()}, (resource) => {
+            res['isUp'] = (resource[0] && resource[0].value === 'up');
           }).$promise);
           promises.push(this.HawkularMetric.AvailabilityMetricData.query({
             tenantId: tenantId,
             availabilityId: res.id,
-            start: moment().subtract(24, 'hours').valueOf(),
+            start: 1,
             end: moment().valueOf(),
             buckets: 1}, (resource) => {
             res['availability'] = resource[0].uptimeRatio * 100;

diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/ts/metricsAppServerList.ts b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/ts/metricsAppServerList.ts
@@ -86,7 +86,8 @@ module HawkularMetrics {
         angular.forEach(aResourceList, function(res, idx) {
           promises.push(this.HawkularMetric.AvailabilityMetricData.query({
             tenantId: tenantId,
-            availabilityId: 'AI~R~' + res.id + '~AT~App Server'}, (resource) => {
+            availabilityId: 'AI~R~' + res.id + '~AT~App Server',
+            distinct: true}, (resource) => {
               var latestData = resource[resource.length-1];
               if (latestData) {
                 res['state'] = latestData['value'];