HAWKULAR-415 : "Humanize" down time duration info

Only show larger unit, tooltip with total time resolution.

console/src/main/scripts/plugins/metrics/html/availability.html

@@ -24,7 +24,17 @@ <h3 class="pull-left">Availability Status</h3>
           <span class="hk-item">Availability</span>
         </div>
         <div class="col-sm-3 hk-summary-item">
-          <span class="hk-data">{{vm.downtimeDuration / 1000 | number:0}} s</span>
+          <!--
+          <span class="hk-data" ng-if="vm.downtimeDuration < 60000">{{ vm.downtimeDuration / 1000 | nduration:'s\' seconds\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 60000 && vm.downtimeDuration < 7200000">{{ vm.downtimeDuration | nduration:'m\' minutes and \'ss\' seconds\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 7200000 && vm.downtimeDuration < 172800000">{{ vm.downtimeDuration | nduration:'h\' hours and \'m\' minutes\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 172800000">{{ vm.downtimeDuration | nduration:'d\' days and \'h\' hours\'' }}</span>
+          -->
+          <span class="hk-data" ng-hide="vm.downtimeDuration">Always Up</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration && vm.downtimeDuration < 60000" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="2500" tooltip="{{ vm.downtimeDuration | duration:'ss\'s\'' }}">{{ vm.downtimeDuration | duration:'s\' seconds\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 60000 && vm.downtimeDuration < 7200000" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="2500" tooltip="{{ vm.downtimeDuration | duration:'mm\'m\'ss\'s\'' }}">{{ vm.downtimeDuration | duration:'m\' minutes\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 7200000 && vm.downtimeDuration < 172800000" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="2500" tooltip="{{ vm.downtimeDuration | duration:'hh\'h\'mm\'m\'ss\'s\'' }}">{{ vm.downtimeDuration | duration:'h\' hours\'' }}</span>
+          <span class="hk-data" ng-if="vm.downtimeDuration >= 172800000" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="2500" tooltip="{{ vm.downtimeDuration | duration:'d\'d \'hh\'h\'mm\'m\'ss\'s\'' }}">{{ vm.downtimeDuration | duration:'d\' days\'' }}</span>
           <span class="hk-item">Total Downtime Duration</span>
         </div>
         <div class="col-sm-3 hk-summary-item">

console/src/main/scripts/plugins/metrics/ts/metricsPlugin.ts

@@ -191,5 +191,146 @@ module HawkularMetrics {
       otherwise({redirectTo: '/hawkular-ui/url/url-list'});
   }]);
 
+  // from https://github.com/erykpiast/angular-duration-format
+  _module.filter('duration', function() {
+
+    var DURATION_FORMATS_SPLIT = /((?:[^ydhms']+)|(?:'(?:[^']|'')*')|(?:y+|d+|h+|m+|s+))(.*)/;
+    var DURATION_FORMATS = {
+      'y': { // years
+        // "longer" years are not supported
+        value: 365 * 24 * 60 * 60 * 1000
+      },
+      'yy': {
+        value: 'y',
+        pad: 2
+      },
+      'd': { // days
+        value: 24 * 60 * 60 * 1000
+      },
+      'dd': {
+        value: 'd',
+        pad: 2
+      },
+      'h': { // hours
+        value: 60 * 60 * 1000
+      },
+      'hh': { // padded hours
+        value: 'h',
+        pad: 2
+      },
+      'm': { // minutes
+        value: 60 * 1000
+      },
+      'mm': { // padded minutes
+        value: 'm',
+        pad: 2
+      },
+      's': { // seconds
+        value: 1000
+      },
+      'ss': { // padded seconds
+        value: 's',
+        pad: 2
+      },
+      'sss': { // milliseconds
+        value: 1
+      },
+      'ssss': { // padded milliseconds
+        value: 'sss',
+        pad: 4
+      }
+    };
+
+
+    function _parseFormat(string) {
+      // @inspiration AngularJS date filter
+      var parts = [];
+      var format = string;
+
+      while(format) {
+        var match = DURATION_FORMATS_SPLIT.exec(format);
+
+        if (match) {
+          parts = parts.concat(match.slice(1));
+
+          format = parts.pop();
+        } else {
+          parts.push(format);
+
+          format = null;
+        }
+      }
+
+      return parts;
+    }
+
+
+    function _formatDuration(timestamp, format) {
+      var text = '';
+      var values = { };
+
+      format.filter(function(format) { // filter only value parts of format
+        return DURATION_FORMATS.hasOwnProperty(format);
+      }).map(function(format) { // get formats with values only
+        var config = DURATION_FORMATS[format];
+        if(config.hasOwnProperty('pad')) {
+          return config.value;
+        } else {
+          return format;
+        }
+      }).filter(function(format, index, arr) { // remove duplicates
+        return (arr.indexOf(format) === index);
+      }).map(function(format) { // get format configurations with values
+        return angular.extend({
+          name: format
+        }, DURATION_FORMATS[format]);
+      }).sort(function(a, b) { // sort formats descending by value
+        return b.value - a.value;
+      }).forEach(function(format) { // create values for format parts
+        var value = values[format.name] = Math.floor(timestamp / format.value);
+
+        timestamp = timestamp - (value * format.value);
+      });
+
+      format.forEach(function(part) {
+        var format = DURATION_FORMATS[part];
+
+        if(format) {
+          var value = values[format.value];
+
+          text += (format.hasOwnProperty('pad') ?
+            _padNumber(value, Math.max(format.pad, value.toString().length)) : values[part]);
+        } else {
+          text += part.replace(/(^'|'$)/g, '').replace(/''/g, '\'');
+        }
+      });
+
+      return text;
+    }
+
+
+    function _padNumber(number, len) {
+      return ((new Array(len + 1)).join('0') + number).slice(-len);
+    }
+
+
+    return function(value, format) {
+      if (typeof value !== 'number') {
+        return value;
+      }
+
+      var timestamp = parseInt(value.valueOf(), 10);
+
+      if(isNaN(timestamp)) {
+        return value;
+      } else {
+        return _formatDuration(
+          timestamp,
+          _parseFormat(format)
+        );
+      }
+    };
+  });
+
   hawtioPluginLoader.addModule(HawkularMetrics.pluginName);
 }