DateFormatting: Use system date by default in display processor (#27699)

packages/grafana-data/src/field/displayProcessor.test.ts

@@ -5,6 +5,7 @@ import { Field, FieldConfig, FieldType, GrafanaTheme, Threshold, ThresholdsMode
 import { getScaleCalculator, sortThresholds } from './scale';
 import { getScaleCalculator, sortThresholds } from './scale';
 import { ArrayVector } from '../vector';
 import { ArrayVector } from '../vector';
 import { validateFieldConfig } from './fieldOverrides';
 import { validateFieldConfig } from './fieldOverrides';
+import { systemDateFormats } from '../datetime';
 
 
 function getDisplayProcessorFromConfig(config: FieldConfig) {
 function getDisplayProcessorFromConfig(config: FieldConfig) {
   return getDisplayProcessor({
   return getDisplayProcessor({
@@ -293,6 +294,23 @@ describe('Date display options', () => {
     expect(processor(0).text).toEqual('1970');
     expect(processor(0).text).toEqual('1970');
   });
   });
 
 
+  it('Should use system date format by default', () => {
+    const currentFormat = systemDateFormats.fullDate;
+    systemDateFormats.fullDate = 'YYYY-MM';
+
+    const processor = getDisplayProcessor({
+      timeZone: 'utc',
+      field: {
+        type: FieldType.time,
+        config: {},
+      },
+    });
+
+    expect(processor(0).text).toEqual('1970-01');
+
+    systemDateFormats.fullDate = currentFormat;
+  });
+
   it('should handle ISO string dates', () => {
   it('should handle ISO string dates', () => {
     const processor = getDisplayProcessor({
     const processor = getDisplayProcessor({
       timeZone: 'utc',
       timeZone: 'utc',

packages/grafana-data/src/field/displayProcessor.ts

@@ -39,7 +39,7 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
   let hasDateUnit = unit && (timeFormats[unit] || unit.startsWith('time:'));
   let hasDateUnit = unit && (timeFormats[unit] || unit.startsWith('time:'));
 
 
   if (field.type === FieldType.time && !hasDateUnit) {
   if (field.type === FieldType.time && !hasDateUnit) {
-    unit = `dateTimeAsIso`;
+    unit = `dateTimeAsSystem`;
     hasDateUnit = true;
     hasDateUnit = true;
   }
   }
 
 

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

@@ -20,6 +20,7 @@ import {
   toNanoSeconds,
   toNanoSeconds,
   toSeconds,
   toSeconds,
   toTimeTicks,
   toTimeTicks,
+  dateTimeSystemFormatter,
 } from './dateTimeFormatters';
 } from './dateTimeFormatters';
 import { toHex, sci, toHex0x, toPercent, toPercentUnit } from './arithmeticFormatters';
 import { toHex, sci, toHex0x, toPercent, toPercentUnit } from './arithmeticFormatters';
 import { binaryPrefix, currency, SIPrefix } from './symbolFormatters';
 import { binaryPrefix, currency, SIPrefix } from './symbolFormatters';
@@ -184,6 +185,7 @@ export const getCategories = (): ValueFormatCategory[] => [
       { name: 'Datetime US', id: 'dateTimeAsUS', fn: dateTimeAsUS },
       { name: 'Datetime US', id: 'dateTimeAsUS', fn: dateTimeAsUS },
       { name: 'Datetime US (No date if today)', id: 'dateTimeAsUSNoDateIfToday', fn: dateTimeAsUSNoDateIfToday },
       { name: 'Datetime US (No date if today)', id: 'dateTimeAsUSNoDateIfToday', fn: dateTimeAsUSNoDateIfToday },
       { name: 'Datetime local', id: 'dateTimeAsLocal', fn: getDateTimeAsLocalFormat() },
       { name: 'Datetime local', id: 'dateTimeAsLocal', fn: getDateTimeAsLocalFormat() },
+      { name: 'Datetime default', id: 'dateTimeAsSystem', fn: dateTimeSystemFormatter },
       { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
       { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
     ],
     ],
   },
   },

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

@@ -3,7 +3,7 @@ import { toDuration as duration, toUtc, dateTime } from '../datetime/moment_wrap
 import { toFixed, toFixedScaled, FormattedValue, ValueFormatter } from './valueFormats';
 import { toFixed, toFixedScaled, FormattedValue, ValueFormatter } from './valueFormats';
 import { DecimalCount } from '../types/displayValue';
 import { DecimalCount } from '../types/displayValue';
 import { TimeZone } from '../types';
 import { TimeZone } from '../types';
-import { dateTimeFormat, dateTimeFormatTimeAgo, localTimeFormat } from '../datetime';
+import { dateTimeFormat, dateTimeFormatTimeAgo, localTimeFormat, systemDateFormats } from '../datetime';
 
 
 interface IntervalsInSeconds {
 interface IntervalsInSeconds {
   [interval: string]: number;
   [interval: string]: number;
@@ -383,6 +383,15 @@ export function getDateTimeAsLocalFormat() {
   );
   );
 }
 }
 
 
+export function dateTimeSystemFormatter(
+  value: number,
+  decimals: DecimalCount,
+  scaledDecimals: DecimalCount,
+  timeZone?: TimeZone
+): FormattedValue {
+  return { text: dateTimeFormat(value, { format: systemDateFormats.fullDate, timeZone }) };
+}
+
 export function dateTimeFromNow(
 export function dateTimeFromNow(
   value: number,
   value: number,
   decimals: DecimalCount,
   decimals: DecimalCount,

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

@@ -66,6 +66,19 @@ const formatTests: ValueFormatTest[] = [
   // Time format
   // Time format
   { id: 'time:YYYY', decimals: 0, value: dateTime(new Date(1999, 6, 2)).valueOf(), result: '1999' },
   { id: 'time:YYYY', decimals: 0, value: dateTime(new Date(1999, 6, 2)).valueOf(), result: '1999' },
   { id: 'time:YYYY.MM', decimals: 0, value: dateTime(new Date(2010, 6, 2)).valueOf(), result: '2010.07' },
   { id: 'time:YYYY.MM', decimals: 0, value: dateTime(new Date(2010, 6, 2)).valueOf(), result: '2010.07' },
+  { id: 'dateTimeAsIso', decimals: 0, value: dateTime(new Date(2010, 6, 2)).valueOf(), result: '2010-07-02 00:00:00' },
+  {
+    id: 'dateTimeAsUS',
+    decimals: 0,
+    value: dateTime(new Date(2010, 6, 2)).valueOf(),
+    result: '07/02/2010 12:00:00 am',
+  },
+  {
+    id: 'dateTimeAsSystem',
+    decimals: 0,
+    value: dateTime(new Date(2010, 6, 2)).valueOf(),
+    result: '2010-07-02 00:00:00',
+  },
 ];
 ];
 
 
 describe('valueFormats', () => {
 describe('valueFormats', () => {