grafana/data: Make display processor work with time fields (#20174)

* Enable display processor on time fields

* Export default date time formats from grafana/data

* Add data time formatter for timezone

* Move date format from display process options to field config

packages/grafana-data/src/datetime/formats.ts

+export const DEFAULT_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const MS_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';

packages/grafana-data/src/datetime/index.ts

@@ -3,4 +3,5 @@ import * as dateMath from './datemath';
 import * as rangeUtil from './rangeutil';
 export * from './moment_wrapper';
 export * from './timezones';
+export * from './formats';
 export { dateMath, rangeUtil };

packages/grafana-data/src/datetime/moment_wrapper.ts

 import { TimeZone } from '../types/time';
 /* tslint:disable:import-blacklist ban ban-types */
 import moment, { Moment, MomentInput, DurationInputArg1 } from 'moment';
+import { DEFAULT_DATE_TIME_FORMAT } from './formats';
 export interface DateTimeBuiltinFormat {
   __momentBuiltinFormatBrand: any;
 }
@@ -37,6 +38,7 @@ export type DurationUnit =
   | 'quarters'
   | 'Q';
 
+export type DateFormatter = (date: DateTimeInput, format?: string) => string;
 export interface DateTimeLocale {
   firstDayOfWeek: () => number;
 }
@@ -113,3 +115,10 @@ export const dateTimeForTimeZone = (
 
   return dateTime(input, formatInput);
 };
+
+export const getTimeZoneDateFormatter: (timezone?: TimeZone) => DateFormatter = timezone => (date, format) => {
+  date = isDateTime(date) ? date : dateTime(date);
+  format = format || DEFAULT_DATE_TIME_FORMAT;
+
+  return timezone === 'browser' ? dateTime(date).format(format) : toUtc(date).format(format);
+};

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

@@ -5,15 +5,17 @@ import _ from 'lodash';
 import { getColorFromHexRgbOrName } from '../utils/namedColorsPalette';
 
 // Types
-import { FieldConfig } from '../types/dataFrame';
+import { FieldConfig, FieldType } from '../types/dataFrame';
 import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 import { DisplayProcessor, DisplayValue, DecimalCount, DecimalInfo } from '../types/displayValue';
 import { getValueFormat } from '../valueFormats/valueFormats';
 import { getMappedValue } from '../utils/valueMappings';
 import { Threshold } from '../types/threshold';
-// import { GrafanaTheme, GrafanaThemeType, FieldConfig } from '../types/index';
+import { getTimeZoneDateFormatter } from '../datetime/moment_wrapper';
+import { DEFAULT_DATE_TIME_FORMAT } from '../datetime';
 
 interface DisplayProcessorOptions {
+  type?: FieldType;
   config?: FieldConfig;
 
   // Context
@@ -23,6 +25,19 @@ interface DisplayProcessorOptions {
 
 export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayProcessor {
   if (options && !_.isEmpty(options)) {
+    if (options.type && options.type === FieldType.time) {
+      return (value: any) => {
+        let dateFormat = DEFAULT_DATE_TIME_FORMAT;
+        if (options.config && options.config.dateDisplayFormat) {
+          dateFormat = options.config.dateDisplayFormat;
+        }
+        const formatedDate = getTimeZoneDateFormatter(options.isUtc ? 'utc' : 'browser')(value, dateFormat);
+        return {
+          numeric: value,
+          text: formatedDate,
+        };
+      };
+    }
     const field = options.config ? options.config : {};
     const formatFunc = getValueFormat(field.unit || 'none');
 

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

@@ -124,6 +124,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
         const display = getDisplayProcessor({
           config,
           theme: options.theme,
+          type: field.type,
         });
 
         const title = config.title ? config.title : defaultTitle;

packages/grafana-data/src/types/dataFrame.ts

@@ -43,6 +43,9 @@ export interface FieldConfig {
 
   // Alternative to empty string
   noValue?: string;
+
+  // Used for time field formatting
+  dateDisplayFormat?: string;
 }
 
 export interface Field<T = any, V = Vector<T>> {