From 38bd6dd153e58e8fe2eb48b14d4f79b449df1ae9 Mon Sep 17 00:00:00 2001
From: Tushar Tripathi <tushutripathi@gmail.com>
Date: Wed, 4 Nov 2020 14:43:45 +0530
Subject: [PATCH] Dashboard: Add Datetime local (No date if today) option in
 panel axes' units (#28011)

* Add Datetime local (No date if today) option

* Add more tests

* Revert to using function for local dateTime format
This is required as Intl api used to convert date to local format is not present in
node environments
---
 .../src/valueFormats/categories.ts            |  6 ++++
 .../valueFormats/dateTimeFormatters.test.ts   | 32 +++++++++++++++++++
 .../src/valueFormats/dateTimeFormatters.ts    | 18 +++++++++++
 3 files changed, 56 insertions(+)

diff --git a/packages/grafana-data/src/valueFormats/categories.ts b/packages/grafana-data/src/valueFormats/categories.ts
index 645d41db15b..37b5e7484b5 100644
--- a/packages/grafana-data/src/valueFormats/categories.ts
+++ b/packages/grafana-data/src/valueFormats/categories.ts
@@ -5,6 +5,7 @@ import {
   dateTimeAsUS,
   dateTimeAsUSNoDateIfToday,
   getDateTimeAsLocalFormat,
+  getDateTimeAsLocalFormatNoDateIfToday,
   dateTimeFromNow,
   toClockMilliseconds,
   toClockSeconds,
@@ -186,6 +187,11 @@ export const getCategories = (): ValueFormatCategory[] => [
       { name: 'Datetime US', id: 'dateTimeAsUS', fn: dateTimeAsUS },
       { name: 'Datetime US (No date if today)', id: 'dateTimeAsUSNoDateIfToday', fn: dateTimeAsUSNoDateIfToday },
       { name: 'Datetime local', id: 'dateTimeAsLocal', fn: getDateTimeAsLocalFormat() },
+      {
+        name: 'Datetime local (No date if today)',
+        id: 'dateTimeAsLocalNoDateIfToday',
+        fn: getDateTimeAsLocalFormatNoDateIfToday(),
+      },
       { name: 'Datetime default', id: 'dateTimeAsSystem', fn: dateTimeSystemFormatter },
       { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
     ],
diff --git a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts b/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
index ea5aaff036b..c40d7dd3d7b 100644
--- a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
+++ b/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
@@ -3,6 +3,8 @@ import {
   dateTimeAsIsoNoDateIfToday,
   dateTimeAsUS,
   dateTimeAsUSNoDateIfToday,
+  getDateTimeAsLocalFormat,
+  getDateTimeAsLocalFormatNoDateIfToday,
   dateTimeFromNow,
   Interval,
   toClock,
@@ -74,6 +76,36 @@ describe('date time formats', () => {
     expect(actual.text).toBe(expected);
   });
 
+  it('should format as local date', () => {
+    const dateTimeObject = browserTime.toDate();
+    const formattedDateText = getDateTimeAsLocalFormat()(epoch, 0, 0).text;
+    expect(formattedDateText).toContain(dateTimeObject.getFullYear());
+    expect(formattedDateText).toContain(dateTimeObject.getSeconds());
+  });
+
+  it('should format as local date and skip date when today', () => {
+    const now = dateTime();
+    const dateTimeObject = now.toDate();
+    const formattedDateText = getDateTimeAsLocalFormatNoDateIfToday()(now.valueOf(), 0, 0).text;
+    expect(formattedDateText).not.toContain(dateTimeObject.getFullYear());
+    expect(formattedDateText).toContain(dateTimeObject.getSeconds());
+  });
+
+  it('should format as local date (in UTC)', () => {
+    const dateTimeObject = utcTime.toDate();
+    const formattedDateText = getDateTimeAsLocalFormat()(epoch, 0, 0, 'utc').text;
+    expect(formattedDateText).toContain(dateTimeObject.getFullYear());
+    expect(formattedDateText).toContain(dateTimeObject.getSeconds());
+  });
+
+  it('should format as local date (in UTC) and skip date when today', () => {
+    const now = toUtc();
+    const dateTimeObject = now.toDate();
+    const formattedDateText = getDateTimeAsLocalFormatNoDateIfToday()(now.valueOf(), 0, 0, 'utc').text;
+    expect(formattedDateText).not.toContain(dateTimeObject.getFullYear());
+    expect(formattedDateText).toContain(dateTimeObject.getSeconds());
+  });
+
   it('should format as from now with days', () => {
     const daysAgo = dateTime().add(-7, 'd');
     const expected = '7 days ago';
diff --git a/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts b/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts
index 35e1fa9c344..b7b5bbf9bb7 100644
--- a/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts
+++ b/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts
@@ -383,6 +383,24 @@ export function getDateTimeAsLocalFormat() {
   );
 }
 
+export function getDateTimeAsLocalFormatNoDateIfToday() {
+  return toDateTimeValueFormatter(
+    localTimeFormat({
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    }),
+    localTimeFormat({
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
+  );
+}
+
 export function dateTimeSystemFormatter(
   value: number,
   decimals: DecimalCount,