feat: Display top failed calls as percentage

fix gravitee-io/issues#2498

src/components/widget/widget-data-table.component.ts

@@ -40,9 +40,16 @@ const WidgetDataTableComponent: ng.IComponentOptions = {
         let data = changes.data.currentValue;
         this.paging = 1;
         this.results = _.map(data.values, function (value, key) {
+          let percent;
+          if (_.includes(value, '/')) {
+            let splittedValue = value.split('/');
+            value = splittedValue[0];
+            percent = splittedValue[1];
+          }
           return {
             key: key,
             value: value,
+            percent: percent,
             metadata: (data && data.metadata) ? data.metadata[key] : undefined
           };
         });

src/components/widget/widget-data-table.html

@@ -20,6 +20,7 @@
     <thead md-head>
       <tr md-row style="height: 30px;">
         <th md-column ng-repeat="column in $ctrl.widget.chart.columns" ng-attr-md-numeric="$last">{{column}}</th>
+        <th md-column ng-if="$ctrl.widget.chart.percent" ng-attr-md-numeric>Percent</th>
       </tr>
     </thead>
     <tbody md-body>
@@ -37,9 +38,10 @@
           </span>
         </td>
         <td md-cell>{{result.value | number}}</td>
+        <td md-cell ng-if="$ctrl.widget.chart.percent">{{result.percent | number}}%</td>
       </tr>
       <tr ng-if="$ctrl.results.length === 0">
-        <td md-cell colspan="{{2 + (($ctrl.widget.chart.selectable) ? 1 : 0)}}">No result</td>
+        <td md-cell colspan="{{($ctrl.widget.chart.percent ? 3 : 2) + (($ctrl.widget.chart.selectable) ? ($ctrl.widget.chart.percent ? 2 : 1) : ($ctrl.widget.chart.percent ? 1 : 0))}}">No result</td>
       </tr>
     </tbody>
   </table>

src/components/widget/widget.component.ts

@@ -29,40 +29,38 @@ const WidgetComponent: ng.IComponentOptions = {
       $scope.$broadcast('onWidgetResize');
     });
 
-    let that = this;
-
-    $scope.$on('onTimeframeChange', function (event, timeframe) {
+    $scope.$on('onTimeframeChange', (event, timeframe) => {
       let query;
 
-      if (that.widget.chart.request.query) {
-        query = that.widget.chart.request.query;
+      if (this.widget.chart.request.query) {
+        query = this.widget.chart.request.query;
       }
 
       // Associate the new timeframe to the chart request
-      _.assignIn(that.widget.chart.request, {
+      _.assignIn(this.widget.chart.request, {
         interval: timeframe.interval,
         from: timeframe.from,
         to: timeframe.to,
         query: query,
-        additionalQuery: that.widget.chart.request.additionalQuery
+        additionalQuery: this.widget.chart.request.additionalQuery
       });
 
-      that.reload();
+      this.reload();
     });
 
-    let unregisterFn = $scope.$on('onQueryFilterChange', function (event, query) {
+    let unregisterFn = $scope.$on('onQueryFilterChange', (event, query) => {
       // Associate the new query filter to the chart request
-      that.widget.chart.request.additionalQuery = query.query;
+      this.widget.chart.request.additionalQuery = query.query;
 
       // Reload only if not the same widget which applied the latest filter
-      if (that.widget.$uid !== query.source) {
-        that.reload();
+      if (this.widget.$uid !== query.source) {
+        this.reload();
       }
     });
 
     $scope.$on('$destroy', unregisterFn);
 
-    this.reload = function() {
+    this.reload = () => {
       // Call the analytics service
       this.fetchData = true;
 
@@ -89,8 +87,25 @@ const WidgetComponent: ng.IComponentOptions = {
       chart.service.function
         .apply(chart.service.caller, args)
         .then(response => {
-          this.fetchData = false;
-          this.results = response.data;
+
+          if (this.widget.chart.percent) {
+            delete args[0].query;
+            chart.service.function
+              .apply(chart.service.caller, args)
+              .then(responseTotal => {
+                this.fetchData = false;
+                _.forEach(response.data.values, (value, key) => {
+                  let total = _.find(responseTotal.data.values, (v, k) => {
+                    return k === key;
+                  });
+                  response.data.values[key] = value + '/' + _.ceil((value / total) * 100, 1);
+                });
+                this.results = response.data;
+              });
+          } else {
+            this.fetchData = false;
+            this.results = response.data;
+          }
         });
     };
   }

src/management/application/details/analytics/application-analytics.controller.ts

@@ -112,6 +112,7 @@ class ApplicationAnalyticsController {
         selectable: true,
         columns: ['API', 'Hits'],
         paging: 5,
+        percent: true,
         request: {
           type: 'group_by',
           field: 'api',

src/management/platform/dashboard/dashboard.controller.ts

@@ -94,6 +94,7 @@ class DashboardController {
         link: 'api',
         columns: ['API', 'Hits'],
         paging: 5,
+        percent: true,
         request: {
           type: 'group_by',
           field: 'api',