From 20c0fbf92d1624d7197b52ec870bd1ef15c424cb Mon Sep 17 00:00:00 2001
From: Utkarsh Deepak <udeepak@ph.iitr.ac.in>
Date: Wed, 1 Nov 2023 18:20:33 +0530
Subject: [PATCH] ValueFormats: Use plural for time units (#77337)

* Dashboard: Use plural values for time units

* Cleaned up code a bit and added support for negative values.

---------

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
---
 .../valueFormats/dateTimeFormatters.test.ts   | 10 ++++++++--
 .../src/valueFormats/valueFormats.test.ts     |  4 +++-
 .../src/valueFormats/valueFormats.ts          | 19 ++++++++++++++++++-
 public/app/core/utils/kbn.test.ts             |  2 +-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts b/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
index d61beabce0d..8537fed6c6b 100644
--- a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
+++ b/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
@@ -350,19 +350,25 @@ describe('to nanoseconds', () => {
   it('should correctly display as minutes', () => {
     const eightMinutes = toNanoSeconds(480000000000);
     expect(eightMinutes.text).toBe('8');
+    expect(eightMinutes.suffix).toBe(' mins');
+  });
+
+  it('should correctly display as minute', () => {
+    const eightMinutes = toNanoSeconds(60000000000);
+    expect(eightMinutes.text).toBe('1');
     expect(eightMinutes.suffix).toBe(' min');
   });
 
   it('should correctly display as hours', () => {
     const nineHours = toNanoSeconds(32400000000000);
     expect(nineHours.text).toBe('9');
-    expect(nineHours.suffix).toBe(' hour');
+    expect(nineHours.suffix).toBe(' hours');
   });
 
   it('should correctly display as days', () => {
     const tenDays = toNanoSeconds(864000000000000);
     expect(tenDays.text).toBe('10');
-    expect(tenDays.suffix).toBe(' day');
+    expect(tenDays.suffix).toBe(' days');
   });
 });
 
diff --git a/packages/grafana-data/src/valueFormats/valueFormats.test.ts b/packages/grafana-data/src/valueFormats/valueFormats.test.ts
index 2b2e8d0ed63..5bac61ae896 100644
--- a/packages/grafana-data/src/valueFormats/valueFormats.test.ts
+++ b/packages/grafana-data/src/valueFormats/valueFormats.test.ts
@@ -25,7 +25,8 @@ describe('valueFormats', () => {
     ${'ms'}               | ${4}         | ${0.0024}                                   | ${'0.0024 ms'}
     ${'ms'}               | ${0}         | ${100}                                      | ${'100 ms'}
     ${'ms'}               | ${2}         | ${1250}                                     | ${'1.25 s'}
-    ${'ms'}               | ${1}         | ${10000086.123}                             | ${'2.8 hour'}
+    ${'ms'}               | ${1}         | ${10000086.123}                             | ${'2.8 hours'}
+    ${'ms'}               | ${1}         | ${-10000086.123}                            | ${'-2.8 hours'}
     ${'ms'}               | ${undefined} | ${1000}                                     | ${'1 s'}
     ${'ms'}               | ${0}         | ${1200}                                     | ${'1 s'}
     ${'short'}            | ${undefined} | ${1000}                                     | ${'1 K'}
@@ -69,6 +70,7 @@ describe('valueFormats', () => {
     ${'dateTimeAsUS'}     | ${0}         | ${dateTime(new Date(2010, 6, 2)).valueOf()} | ${'07/02/2010 12:00:00 am'}
     ${'dateTimeAsSystem'} | ${0}         | ${dateTime(new Date(2010, 6, 2)).valueOf()} | ${'2010-07-02 00:00:00'}
     ${'dtdurationms'}     | ${undefined} | ${100000}                                   | ${'1 minute'}
+    ${'dtdurationms'}     | ${undefined} | ${150000}                                   | ${'2 minutes'}
   `(
     'With format=$format decimals=$decimals and value=$value then result shoudl be = $expected',
     async ({ format, value, decimals, expected }) => {
diff --git a/packages/grafana-data/src/valueFormats/valueFormats.ts b/packages/grafana-data/src/valueFormats/valueFormats.ts
index f8753bad0e2..e4d99adcc91 100644
--- a/packages/grafana-data/src/valueFormats/valueFormats.ts
+++ b/packages/grafana-data/src/valueFormats/valueFormats.ts
@@ -102,10 +102,27 @@ function getDecimalsForValue(value: number): number {
 export function toFixedScaled(value: number, decimals: DecimalCount, ext?: string): FormattedValue {
   return {
     text: toFixed(value, decimals),
-    suffix: ext,
+    suffix: appendPluralIf(ext, Math.abs(value) > 1),
   };
 }
 
+function appendPluralIf(ext: string | undefined, condition: boolean): string | undefined {
+  if (!condition) {
+    return ext;
+  }
+
+  switch (ext) {
+    case ' min':
+    case ' hour':
+    case ' day':
+    case ' week':
+    case ' year':
+      return `${ext}s`;
+    default:
+      return ext;
+  }
+}
+
 export function toFixedUnit(unit: string, asPrefix?: boolean): ValueFormatter {
   return (size: number, decimals?: DecimalCount) => {
     if (size === null) {
diff --git a/public/app/core/utils/kbn.test.ts b/public/app/core/utils/kbn.test.ts
index 6e291f3d1b2..bb0130fe5f9 100644
--- a/public/app/core/utils/kbn.test.ts
+++ b/public/app/core/utils/kbn.test.ts
@@ -27,7 +27,7 @@ const formatTests: ValueFormatTest[] = [
   { id: 'ms', decimals: 4, value: 0.0024, result: '0.0024 ms' },
   { id: 'ms', decimals: 0, value: 100, result: '100 ms' },
   { id: 'ms', decimals: 2, value: 1250, result: '1.25 s' },
-  { id: 'ms', decimals: 1, value: 10000086.123, result: '2.8 hour' },
+  { id: 'ms', decimals: 1, value: 10000086.123, result: '2.8 hours' },
   { id: 'ms', decimals: 0, value: 1200, result: '1 s' },
   { id: 'short', decimals: 0, value: 98765, result: '99 K' },
   { id: 'short', decimals: 0, value: 9876543, result: '10 Mil' },