From 9117fab43aeafc608401837c47deabc4711b5f09 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 6 Nov 2019 11:03:43 +0100
Subject: [PATCH] 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 |  2 ++
 packages/grafana-data/src/datetime/index.ts   |  1 +
 .../src/datetime/moment_wrapper.ts            |  9 +++++++++
 .../src/field/displayProcessor.ts             | 19 +++++++++++++++++--
 .../grafana-data/src/field/fieldDisplay.ts    |  1 +
 packages/grafana-data/src/types/dataFrame.ts  |  3 +++
 6 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 packages/grafana-data/src/datetime/formats.ts

diff --git a/packages/grafana-data/src/datetime/formats.ts b/packages/grafana-data/src/datetime/formats.ts
new file mode 100644
index 00000000000..5a5e2b45f76
--- /dev/null
+++ b/packages/grafana-data/src/datetime/formats.ts
@@ -0,0 +1,2 @@
+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';
diff --git a/packages/grafana-data/src/datetime/index.ts b/packages/grafana-data/src/datetime/index.ts
index eb58515b652..51b32326f58 100644
--- a/packages/grafana-data/src/datetime/index.ts
+++ b/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 };
diff --git a/packages/grafana-data/src/datetime/moment_wrapper.ts b/packages/grafana-data/src/datetime/moment_wrapper.ts
index 32e58f80ca5..c2ddeae3da0 100644
--- a/packages/grafana-data/src/datetime/moment_wrapper.ts
+++ b/packages/grafana-data/src/datetime/moment_wrapper.ts
@@ -1,6 +1,7 @@
 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);
+};
diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts
index 4f457d045e9..e27511f2fde 100644
--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/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');
 
diff --git a/packages/grafana-data/src/field/fieldDisplay.ts b/packages/grafana-data/src/field/fieldDisplay.ts
index 94c3788ee11..ef0323af13c 100644
--- a/packages/grafana-data/src/field/fieldDisplay.ts
+++ b/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;
diff --git a/packages/grafana-data/src/types/dataFrame.ts b/packages/grafana-data/src/types/dataFrame.ts
index 03d965160ae..542fff7894e 100644
--- a/packages/grafana-data/src/types/dataFrame.ts
+++ b/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>> {