Singlestat: fix format messes up on negative values if select duratio… (#19044)

* Singlestat: fix format messes up on negative values if select duration (hh:mm:ss) unit

* Added test for 0

packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.test.ts

@@ -7,6 +7,7 @@ import {
   toDuration,
   toDurationInMilliseconds,
   toDurationInSeconds,
+  toDurationInHoursMinutesSeconds,
 } from './dateTimeFormatters';
 import { toUtc, dateTime } from '@grafana/data';
 
@@ -161,6 +162,18 @@ describe('duration', () => {
     const str = toDuration(36993906007, 8, Interval.Millisecond);
     expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds');
   });
+  it('1 dthms', () => {
+    const str = toDurationInHoursMinutesSeconds(1);
+    expect(str).toBe('00:00:01');
+  });
+  it('-1 dthms', () => {
+    const str = toDurationInHoursMinutesSeconds(-1);
+    expect(str).toBe('00:00:01 ago');
+  });
+  it('0 dthms', () => {
+    const str = toDurationInHoursMinutesSeconds(0);
+    expect(str).toBe('00:00:00');
+  });
 });
 
 describe('clock', () => {

packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts

@@ -283,7 +283,10 @@ export function toDurationInSeconds(size: number, decimals: DecimalCount) {
   return toDuration(size, decimals, Interval.Second);
 }
 
-export function toDurationInHoursMinutesSeconds(size: number) {
+export function toDurationInHoursMinutesSeconds(size: number): string {
+  if (size < 0) {
+    return toDurationInHoursMinutesSeconds(-size) + ' ago';
+  }
   const strings = [];
   const numHours = Math.floor(size / 3600);
   const numMinutes = Math.floor((size % 3600) / 60);