Units: add new unit for duration, it is optimized for displaying days, hours,…

Units: add new unit for duration, it is optimized for displaying days, hours, minutes and seconds. (#24175)

packages/grafana-data/src/valueFormats/categories.ts

@@ -6,6 +6,7 @@ import {
   toClockMilliseconds,
   toClockMilliseconds,
   toClockSeconds,
   toClockSeconds,
   toDays,
   toDays,
+  toDurationInDaysHoursMinutesSeconds,
   toDurationInHoursMinutesSeconds,
   toDurationInHoursMinutesSeconds,
   toDurationInMilliseconds,
   toDurationInMilliseconds,
   toDurationInSeconds,
   toDurationInSeconds,
@@ -320,6 +321,7 @@ export const getCategories = (): ValueFormatCategory[] => [
       { name: 'duration (ms)', id: 'dtdurationms', fn: toDurationInMilliseconds },
       { name: 'duration (ms)', id: 'dtdurationms', fn: toDurationInMilliseconds },
       { name: 'duration (s)', id: 'dtdurations', fn: toDurationInSeconds },
       { name: 'duration (s)', id: 'dtdurations', fn: toDurationInSeconds },
       { name: 'duration (hh:mm:ss)', id: 'dthms', fn: toDurationInHoursMinutesSeconds },
       { name: 'duration (hh:mm:ss)', id: 'dthms', fn: toDurationInHoursMinutesSeconds },
+      { name: 'duration (d hh:mm:ss)', id: 'dtdhms', fn: toDurationInDaysHoursMinutesSeconds },
       { name: 'Timeticks (s/100)', id: 'timeticks', fn: toTimeTicks },
       { name: 'Timeticks (s/100)', id: 'timeticks', fn: toTimeTicks },
       { name: 'clock (ms)', id: 'clockms', fn: toClockMilliseconds },
       { name: 'clock (ms)', id: 'clockms', fn: toClockMilliseconds },
       { name: 'clock (s)', id: 'clocks', fn: toClockSeconds },
       { name: 'clock (s)', id: 'clocks', fn: toClockSeconds },

packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts

@@ -8,6 +8,7 @@ import {
   toDurationInMilliseconds,
   toDurationInMilliseconds,
   toDurationInSeconds,
   toDurationInSeconds,
   toDurationInHoursMinutesSeconds,
   toDurationInHoursMinutesSeconds,
+  toDurationInDaysHoursMinutesSeconds,
 } from './dateTimeFormatters';
 } from './dateTimeFormatters';
 import { formattedValueToString } from './valueFormats';
 import { formattedValueToString } from './valueFormats';
 import { toUtc, dateTime } from '../datetime/moment_wrapper';
 import { toUtc, dateTime } from '../datetime/moment_wrapper';
@@ -179,6 +180,42 @@ describe('duration', () => {
     const str = toDurationInHoursMinutesSeconds(0);
     const str = toDurationInHoursMinutesSeconds(0);
     expect(formattedValueToString(str)).toBe('00:00:00');
     expect(formattedValueToString(str)).toBe('00:00:00');
   });
   });
+  it('1 dtdhms', () => {
+    const str = toDurationInHoursMinutesSeconds(1);
+    expect(formattedValueToString(str)).toBe('00:00:01');
+  });
+  it('-1 dtdhms', () => {
+    const str = toDurationInHoursMinutesSeconds(-1);
+    expect(formattedValueToString(str)).toBe('00:00:01 ago');
+  });
+  it('0 dtdhms', () => {
+    const str = toDurationInHoursMinutesSeconds(0);
+    expect(formattedValueToString(str)).toBe('00:00:00');
+  });
+  it('86399 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(86399);
+    expect(formattedValueToString(str)).toBe('23:59:59');
+  });
+  it('86400 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(86400);
+    expect(formattedValueToString(str)).toBe('1 d 00:00:00');
+  });
+  it('360000 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(360000);
+    expect(formattedValueToString(str)).toBe('4 d 04:00:00');
+  });
+  it('1179811 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(1179811);
+    expect(formattedValueToString(str)).toBe('13 d 15:43:31');
+  });
+  it('-1179811 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(-1179811);
+    expect(formattedValueToString(str)).toBe('13 d 15:43:31 ago');
+  });
+  it('116876364 dtdhms', () => {
+    const str = toDurationInDaysHoursMinutesSeconds(116876364);
+    expect(formattedValueToString(str)).toBe('1352 d 17:39:24');
+  });
 });
 });
 
 
 describe('clock', () => {
 describe('clock', () => {

packages/grafana-data/src/valueFormats/dateTimeFormatters.ts

@@ -313,6 +313,24 @@ export function toDurationInHoursMinutesSeconds(size: number): FormattedValue {
   return { text: strings.join(':') };
   return { text: strings.join(':') };
 }
 }
 
 
+export function toDurationInDaysHoursMinutesSeconds(size: number): FormattedValue {
+  if (size < 0) {
+    const v = toDurationInDaysHoursMinutesSeconds(-size);
+    if (!v.suffix) {
+      v.suffix = '';
+    }
+    v.suffix += ' ago';
+    return v;
+  }
+  let dayString = '';
+  const numDays = Math.floor(size / (24 * 3600));
+  if (numDays > 0) {
+    dayString = numDays + ' d ';
+  }
+  const hmsString = toDurationInHoursMinutesSeconds(size - numDays * 24 * 3600);
+  return { text: dayString + hmsString.text };
+}
+
 export function toTimeTicks(size: number, decimals: DecimalCount, scaledDecimals: DecimalCount): FormattedValue {
 export function toTimeTicks(size: number, decimals: DecimalCount, scaledDecimals: DecimalCount): FormattedValue {
   return toSeconds(size / 100, decimals, scaledDecimals);
   return toSeconds(size / 100, decimals, scaledDecimals);
 }
 }