fix(): improve healthcheck percentage display

Creation of : - a new component to manage healthcheck metric - a new directive to floor the metric value to the nearest integer Code refactoring Fix gravitee-io/issues#2168.
gravitee-io · May 7, 2019 · af4abd9 · af4abd9
1 parent fd29d27
commit af4abd9
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 66 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@ npm-debug.log
 /node/
 /target/
 .DS_Store
+.project
+.settings
diff --git a/src/components/healthcheckmetric/healthcheck-metric.component.ts b/src/components/healthcheckmetric/healthcheck-metric.component.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as _ from 'lodash';
+
+const HealthCheckMetricComponent: ng.IComponentOptions = {
+  template: require('./healthcheck-metric.html'),
+  bindings: {
+    availability: '<',
+    responsetime: '<'
+  }
+};
+
+export default HealthCheckMetricComponent;
diff --git a/src/components/healthcheckmetric/healthcheck-metric.html b/src/components/healthcheckmetric/healthcheck-metric.html
@@ -0,0 +1,26 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div>
+    <progress-bar value="$ctrl.availability | floor  "></progress-bar>
+    <md-tooltip md-direction="top">
+        {{$ctrl.availability | number: 3}}%
+    </md-tooltip>
+</div>
+<span class="label label-primary" style="font-weight: bold;font-size: 10.5px">
+    {{$ctrl.responsetime | number: 0 }}ms
+</span>
diff --git a/src/components/progressbar/progress-bar.html b/src/components/progressbar/progress-bar.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="progress">
-  <div class="progress-bar" ng-class="{'progress-bar-success': $ctrl.value >= 95, 'progress-bar-warning': $ctrl.value < 95 && $ctrl.value >= 80 , 'progress-bar-danger': $ctrl.value < 80 && $ctrl.value >= 30, 'progress-bar-fatal': $ctrl.value < 30 }" role="progressbar" aria-valuenow="{{$ctrl.value | number: 0 }}" aria-valuemin="0" aria-valuemax="100" ng-style="{width: $ctrl.value + '%'}">
-    {{$ctrl.value | number: 0 }}%
+  <div class="progress-bar" ng-class="{'progress-bar-success': $ctrl.value >= 95, 'progress-bar-warning': $ctrl.value < 95 && $ctrl.value >= 80 , 'progress-bar-danger': $ctrl.value < 80 && $ctrl.value >= 30, 'progress-bar-fatal': $ctrl.value < 30 }" role="progressbar" aria-valuenow="{{$ctrl.value}}" aria-valuemin="0" aria-valuemax="100" ng-style="{width: $ctrl.value + '%'}">
+    {{$ctrl.value}}%
   </div>
 </div>
diff --git a/src/management/api/proxy/backend/healthcheck/healthcheck-visualize.html b/src/management/api/proxy/backend/healthcheck/healthcheck-visualize.html
@@ -47,31 +47,18 @@ <h2></h2>
               <gravitee-chart options="healthCheckCtrl.chartData" zoom="true" type="areaspline" height="180"></gravitee-chart>
             </div>
             <div layout="row" layout-padding layout-align="center center">
-              <div layout="column" flex="15">
-                <h5>Last minute</h5>
-                <progress-bar value="healthCheckCtrl.endpoint.availabilities.data.global['1m'] | number: 0"></progress-bar>
-                <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.global['1m'] | number: 0 }} ms</span>
-              </div>
-              <div layout="column" flex="15">
-                <h5>Last hour</h5>
-                <progress-bar value="healthCheckCtrl.endpoint.availabilities.data.global['1h'] | number: 0"></progress-bar>
-                <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.global['1h'] | number: 0 }} ms</span>
-              </div>
-              <div layout="column" flex="15">
-                <h5>Last day</h5>
-                <progress-bar value="healthCheckCtrl.endpoint.availabilities.data.global['1d'] | number: 0"></progress-bar>
-                <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.global['1d'] | number: 0 }} ms</span>
-              </div>
-              <div layout="column" flex="15">
-                <h5>Last week</h5>
-                <progress-bar value="healthCheckCtrl.endpoint.availabilities.data.global['1w'] | number: 0"></progress-bar>
-                <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.global['1w'] | number: 0 }} ms</span>
-              </div>
-              <div layout="column" flex="15">
-                <h5>Last month</h5>
-                <progress-bar value="healthCheckCtrl.endpoint.availabilities.data.global['1M'] | number: 0"></progress-bar>
-                <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.global['1M'] | number: 0 }} ms</span>
+                <div flex="15"><h5>Last minute</h5></div>
+                <div flex="15"><h5>Last hour</h5></div>
+                <div flex="15"><h5>Last day</h5></div>
+                <div flex="15"><h5>Last week</h5></div>
+                <div flex="15"><h5>Last month</h5></div>
               </div>
+            <div layout="row" layout-padding layout-align="center center">
+              <gv-healthcheck-metric availability="healthCheckCtrl.endpoint.availabilities.data.global['1m']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.global['1m']" layout="column" flex="15"></gv-healthcheck-metric>
+              <gv-healthcheck-metric availability="healthCheckCtrl.endpoint.availabilities.data.global['1h']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.global['1h']" layout="column" flex="15"></gv-healthcheck-metric>
+              <gv-healthcheck-metric availability="healthCheckCtrl.endpoint.availabilities.data.global['1d']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.global['1d']" layout="column" flex="15"></gv-healthcheck-metric>
+              <gv-healthcheck-metric availability="healthCheckCtrl.endpoint.availabilities.data.global['1w']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.global['1w']" layout="column" flex="15"></gv-healthcheck-metric>
+              <gv-healthcheck-metric availability="healthCheckCtrl.endpoint.availabilities.data.global['1M']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.global['1M']" layout="column" flex="15"></gv-healthcheck-metric>
             </div>
           </md-card-content>
         </div>
@@ -103,26 +90,11 @@ <h5>Last month</h5>
                   <span style="font-weight: bold">{{endpoint}}</span>
                   <span style="color: rgba(0,0,0,0.54);font-size: 11px;">{{healthCheckCtrl.endpoint.availabilities.data.metadata[endpoint].target}}</span>
                 </div>
-                <div layout="column" flex="15">
-                  <progress-bar value="metrics['1m'] | number: 0"></progress-bar>
-                  <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1m'] | number: 0 }} ms</span>
-                </div>
-                <div layout="column" flex="15">
-                  <progress-bar value="metrics['1h'] | number: 0"></progress-bar>
-                  <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1h'] | number: 0 }} ms</span>
-                </div>
-                <div layout="column" flex="15">
-                  <progress-bar value="metrics['1d'] | number: 0"></progress-bar>
-                  <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1d'] | number: 0 }} ms</span>
-                </div>
-                <div layout="column" flex="15">
-                  <progress-bar value="metrics['1w'] | number: 0"></progress-bar>
-                  <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1w'] | number: 0 }} ms</span>
-                </div>
-                <div layout="column" flex="15">
-                  <progress-bar value="metrics['1M'] | number: 0"></progress-bar>
-                  <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1M'] | number: 0 }} ms</span>
-                </div>
+                <gv-healthcheck-metric availability="metrics['1m']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1m']" layout="column" flex="15"></gv-healthcheck-metric>
+                <gv-healthcheck-metric availability="metrics['1h']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1h']" layout="column" flex="15"></gv-healthcheck-metric>
+                <gv-healthcheck-metric availability="metrics['1d']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1d']" layout="column" flex="15"></gv-healthcheck-metric>
+                <gv-healthcheck-metric availability="metrics['1w']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1w']" layout="column" flex="15"></gv-healthcheck-metric>
+                <gv-healthcheck-metric availability="metrics['1M']" responsetime="healthCheckCtrl.endpoint.responsetimes.data.buckets[endpoint]['1M']" layout="column" flex="15"></gv-healthcheck-metric>
               </div>
             </div>
           </md-card-content>
@@ -156,26 +128,11 @@ <h5>Last month</h5>
                     <span style="color: rgba(0,0,0,0.54);font-size: 11px;">{{healthCheckCtrl.gateway.availabilities.data.metadata[gateway].deleted}}</span>
                     <span style="color: rgba(0,0,0,0.54);font-size: 11px;">{{healthCheckCtrl.gateway.availabilities.data.metadata[gateway].ip}}</span>
                   </div>
-                  <div layout="column" flex="15">
-                    <progress-bar value="metrics['1m'] | number: 0"></progress-bar>
-                    <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1m'] | number: 0 }} ms</span>
-                  </div>
-                  <div layout="column" flex="15">
-                    <progress-bar value="metrics['1h'] | number: 0"></progress-bar>
-                    <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1h'] | number: 0 }} ms</span>
-                  </div>
-                  <div layout="column" flex="15">
-                    <progress-bar value="metrics['1d'] | number: 0"></progress-bar>
-                    <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1d'] | number: 0 }} ms</span>
-                  </div>
-                  <div layout="column" flex="15">
-                    <progress-bar value="metrics['1w'] | number: 0"></progress-bar>
-                    <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1w'] | number: 0 }} ms</span>
-                  </div>
-                  <div layout="column" flex="15">
-                    <progress-bar value="metrics['1M'] | number: 0"></progress-bar>
-                    <span class="label label-primary" style="font-weight: bold;font-size: 10.5px">{{healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1M'] | number: 0 }} ms</span>
-                  </div>
+                  <gv-healthcheck-metric availability="metrics['1m']" responsetime="healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1m']" layout="column" flex="15"></gv-healthcheck-metric>
+                  <gv-healthcheck-metric availability="metrics['1h']" responsetime="healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1h']" layout="column" flex="15"></gv-healthcheck-metric>
+                  <gv-healthcheck-metric availability="metrics['1d']" responsetime="healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1d']" layout="column" flex="15"></gv-healthcheck-metric>
+                  <gv-healthcheck-metric availability="metrics['1w']" responsetime="healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1w']" layout="column" flex="15"></gv-healthcheck-metric>
+                  <gv-healthcheck-metric availability="metrics['1M']" responsetime="healthCheckCtrl.gateway.responsetimes.data.buckets[gateway]['1M']" layout="column" flex="15"></gv-healthcheck-metric>
                 </div>
               </div>
             </div>

diff --git a/src/management/management.module.ts b/src/management/management.module.ts
@@ -346,6 +346,7 @@ import DialogAssertionInformationController from '../management/api/proxy/backen
 import ApiHealthCheckController from '../management/api/proxy/backend/healthcheck/healthcheck.controller';
 import ProgressBarComponent from '../components/progressbar/progress-bar.component';
 import ApiHealthCheckLogController from '../management/api/proxy/backend/healthcheck/healthcheck-log.controller';
+import HealthCheckMetricComponent from '../components/healthcheckmetric/healthcheck-metric.component';
 
 // Ticket
 import TicketService from '../services/ticket.service';
@@ -695,6 +696,7 @@ angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMa
   .controller('ApiHealthCheckConfigureController', ApiHealthCheckConfigureController)
   .controller('ApiHealthCheckLogController', ApiHealthCheckLogController)
   .component('progressBar', ProgressBarComponent)
+  .component('gvHealthcheckMetric', HealthCheckMetricComponent)
 
   // Configuration
   .component('settings', SettingsComponent)
@@ -746,4 +748,9 @@ angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMa
     return function (keys) {
       return keys;
     };
+  })
+  .filter('floor', function() {
+    return function (input) {
+      return Math.floor(input);
+    };
   });