AMBARI-13766. Inappropriate scaling in query history "filter by duration" (Pallav Kulshreshtha via srimanth)

contrib/views/hive/src/main/resources/ui/hive-web/app/components/number-range-widget.js

@@ -17,6 +17,7 @@
  */
 
 import Ember from 'ember';
+import utils from 'hive/utils/functions';
 
 export default Ember.Component.extend({
   didInsertElement: function () {
@@ -26,6 +27,9 @@ export default Ember.Component.extend({
     if (!numberRange.get('from') && !numberRange.get('to')) {
       numberRange.set('from', numberRange.get('min'));
       numberRange.set('to', numberRange.get('max'));
+      numberRange.set('fromDuration',utils.secondsToHHMMSS(numberRange.get('min')));
+      numberRange.set('toDuration',utils.secondsToHHMMSS(numberRange.get('max')));
+
     }
 
     this.$('.slider').slider({
@@ -38,6 +42,9 @@ export default Ember.Component.extend({
       slide: function (event, ui) {
         numberRange.set('from', ui.values[0]);
         numberRange.set('to', ui.values[1]);
+        numberRange.set('fromDuration', utils.secondsToHHMMSS(ui.values[0]));
+        numberRange.set('toDuration', utils.secondsToHHMMSS(ui.values[1]));
+
       },
 
       change: function () {

contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/number-range-widget.hbs

@@ -18,6 +18,6 @@
 
 <div class="slider"></div>
 <div class="slider-labels">
-  <span class="pull-left">{{numberRange.from}}</span>
-  <span class="pull-right">{{numberRange.to}}{{numberRange.units}}</span>
+  <span class="pull-left">{{numberRange.fromDuration}}</span>
+  <span class="pull-right">{{numberRange.toDuration}}</span>
 </div>

contrib/views/hive/src/main/resources/ui/hive-web/app/utils/functions.js

@@ -78,6 +78,30 @@ export default Ember.Object.create({
       }
     }
     return array;
+  },
+
+  /**
+   * Convert number of seconds into time object HH MM SS
+   *
+   * @param integer secs Number of seconds to convert
+   * @return object
+  */
+  secondsToHHMMSS: function (secs)
+   {
+    var hours = Math.floor(secs / (60 * 60));
+
+    var divisor_for_minutes = secs % (60 * 60);
+    var minutes = Math.floor(divisor_for_minutes / 60);
+
+    var divisor_for_seconds = divisor_for_minutes % 60;
+    var seconds = Math.ceil(divisor_for_seconds);
+
+    var obj = {
+      "h": hours,
+      "m": minutes,
+      "s": seconds
+    };
+    return  ((obj.h > 0) ? obj.h + ' hr ' : '') + ((obj.m > 0) ? obj.m + ' min ' : '') + ((obj.s >= 0) ? obj.m + ' sec ' : '');
   }
 
 });