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

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 },
     ],

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';

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,