Table: Support date unit formats on string values (#26879)

* DisplayProcessor: Support parsing strings as dates and using date units on strings

* Updated test

* Updated test

packages/grafana-data/src/dataframe/processDataFrame.test.ts

@@ -118,6 +118,17 @@ describe('toDataFrame', () => {
     expect(guessFieldTypeFromValue('xxxx')).toBe(FieldType.string);
   });
 
+  it('Guess Column Types from strings', () => {
+    expect(guessFieldTypeFromValue('1')).toBe(FieldType.number);
+    expect(guessFieldTypeFromValue('1.234')).toBe(FieldType.number);
+    expect(guessFieldTypeFromValue('NaN')).toBe(FieldType.number);
+    expect(guessFieldTypeFromValue('3.125e7')).toBe(FieldType.number);
+    expect(guessFieldTypeFromValue('True')).toBe(FieldType.boolean);
+    expect(guessFieldTypeFromValue('FALSE')).toBe(FieldType.boolean);
+    expect(guessFieldTypeFromValue('true')).toBe(FieldType.boolean);
+    expect(guessFieldTypeFromValue('xxxx')).toBe(FieldType.string);
+  });
+
   it('Guess Column Types from series', () => {
     const series = new MutableDataFrame({
       fields: [

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

@@ -292,4 +292,15 @@ describe('Date display options', () => {
     });
     expect(processor(0).text).toEqual('1970');
   });
+
+  it('should handle ISO string dates', () => {
+    const processor = getDisplayProcessor({
+      timeZone: 'utc',
+      field: {
+        type: FieldType.time,
+      },
+    });
+
+    expect(processor('2020-08-01T08:48:43.783337Z').text).toEqual('2020-08-01 08:48:43');
+  });
 });

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

@@ -7,7 +7,7 @@ import { GrafanaTheme } from '../types/theme';
 import { DisplayProcessor, DisplayValue, DecimalCount, DecimalInfo } from '../types/displayValue';
 import { getValueFormat } from '../valueFormats/valueFormats';
 import { getMappedValue } from '../utils/valueMappings';
-import { DEFAULT_DATE_TIME_FORMAT } from '../datetime';
+import { dateTime } from '../datetime';
 import { KeyValue, TimeZone } from '../types';
 import { getScaleCalculator } from './scale';
 
@@ -30,25 +30,27 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
   if (!options || _.isEmpty(options) || !options.field) {
     return toStringProcessor;
   }
+
   const { field } = options;
   const config = field.config ?? {};
+  let unit = config.unit;
+  let hasDateUnit = unit && (timeFormats[unit] || unit.startsWith('time:'));
 
-  if (field.type === FieldType.time) {
-    if (config.unit && timeFormats[config.unit]) {
-      // Currently selected unit is valid for time fields
-    } else if (config.unit && config.unit.startsWith('time:')) {
-      // Also OK
-    } else {
-      config.unit = `time:${DEFAULT_DATE_TIME_FORMAT}`;
-    }
+  if (field.type === FieldType.time && !hasDateUnit) {
+    unit = `dateTimeAsIso`;
+    hasDateUnit = true;
   }
 
-  const formatFunc = getValueFormat(config.unit || 'none');
+  const formatFunc = getValueFormat(unit || 'none');
   const scaleFunc = getScaleCalculator(field as Field, options.theme);
 
   return (value: any) => {
     const { mappings } = config;
 
+    if (hasDateUnit && typeof value === 'string') {
+      value = dateTime(value).valueOf();
+    }
+
     let text = _.toString(value);
     let numeric = toNumber(value);
     let prefix: string | undefined = undefined;

public/app/features/explore/utils/ResultProcessor.test.ts

@@ -280,7 +280,7 @@ describe('ResultProcessor', () => {
               timeField: {
                 name: 'Time',
                 type: 'time',
-                config: { unit: 'time:YYYY-MM-DD HH:mm:ss' },
+                config: {},
                 values: new ArrayVector([0]),
                 index: 0,
                 display: expect.anything(),