Improved the duration parsing on frontend.

client/app/scripts/utils/__tests__/string-utils-test.js

@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 
 describe('StringUtils', () => {
   const StringUtils = require('../string-utils');
@@ -29,4 +31,20 @@ describe('StringUtils', () => {
       expect(f('0.24.3.4')).toBe('000.024.003.004');
     });
   });
+
+  describe('humanizedRoundedDownDuration', () => {
+    const f = StringUtils.humanizedRoundedDownDuration;
+
+    it('it should return the humanized duration', () => {
+      expect(f(moment.duration(0))).toBe('now');
+      expect(f(moment.duration(0.9 * 1000))).toBe('now');
+      expect(f(moment.duration(1 * 1000))).toBe('1 second');
+      expect(f(moment.duration(8.62 * 60 * 1000))).toBe('8 minutes');
+      expect(f(moment.duration(14.99 * 60 * 60 * 1000))).toBe('14 hours');
+      expect(f(moment.duration(5.2 * 24 * 60 * 60 * 1000))).toBe('5 days');
+      expect(f(moment.duration(11.8 * 30 * 24 * 60 * 60 * 1000))).toBe('11 months');
+      expect(f(moment.duration(12.8 * 30 * 24 * 60 * 60 * 1000))).toBe('1 year');
+      expect(f(moment.duration(9.4 * 12 * 30 * 24 * 60 * 60 * 1000))).toBe('9 years');
+    });
+  });
 });

client/app/scripts/utils/string-utils.js

@@ -86,6 +86,20 @@ export function ipToPaddedString(value) {
   return value.match(/\d+/g).map(padToThreeDigits).join('.');
 }
 
+// Doing the manual parsing because `duration.humanize()` would sometimes round up the period,
+// while we always want a rounded down value for consistency with other values sent by backend.
+export function humanizedRoundedDownDuration(duration) {
+  let humanizedDuration = 'now';
+  ['second', 'minute', 'hour', 'day', 'month', 'year'].forEach((period) => {
+    const durationAsPeriod = Math.floor(duration.as(period));
+    if (durationAsPeriod > 0) {
+      const pluralEnding = ((durationAsPeriod !== 11 && (durationAsPeriod % 10) === 1) ? '' : 's');
+      humanizedDuration = `${durationAsPeriod} ${period}${pluralEnding}`;
+    }
+  });
+  return humanizedDuration;
+}
+
 // Formats metadata values. Add a key to the `formatters` obj
 // that matches the `dataType` of the field. You must return an Object
 // with the keys `value` and `title` defined.
@@ -100,8 +114,10 @@ export function formatDataType(field, referenceTimestampStr = null) {
         title: timestamp.utc().toISOString()
       };
     },
-    duration(durationString) {
-      const humanizedDuration = moment.duration(Number(durationString), 'seconds').humanize();
+    duration(durationSecondsString) {
+      const duration = moment.duration(Number(durationSecondsString), 'seconds');
+      const humanizedDuration = humanizedRoundedDownDuration(duration);
+
       return {
         value: humanizedDuration,
         title: humanizedDuration,