[Lens] Field formatter support

src/legacy/core_plugins/interpreter/public/functions/esaggs.ts

@@ -36,6 +36,7 @@ import chrome from 'ui/chrome';
 const courierRequestHandlerProvider = CourierRequestHandlerProvider;
 const courierRequestHandler = courierRequestHandlerProvider().handler;
 
+import { createFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { ExpressionFunction } from '../../types';
 import { KibanaContext, KibanaDatatable } from '../../common';
 
@@ -47,6 +48,7 @@ interface Arguments {
   index: string | null;
   metricsAtAllLevels: boolean;
   partialRows: boolean;
+  includeFormatHints: boolean;
   aggConfigs: string;
 }
 
@@ -77,6 +79,11 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
       default: false,
       help: '',
     },
+    includeFormatHints: {
+      types: ['boolean'],
+      default: false,
+      help: '',
+    },
     aggConfigs: {
       types: ['string'],
       default: '""',
@@ -99,7 +106,7 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
     searchSource.setField('index', indexPattern);
     searchSource.setField('size', 0);
 
-    const response: Pick<KibanaDatatable, 'columns' | 'rows'> = await courierRequestHandler({
+    const response = await courierRequestHandler({
       searchSource,
       aggs,
       timeRange: get(context, 'timeRange', null),
@@ -115,10 +122,16 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
     return {
       type: 'kibana_datatable',
       rows: response.rows,
-      columns: response.columns.map(column => ({
-        id: column.id,
-        name: column.name,
-      })),
+      columns: response.columns.map((column: any) => {
+        const cleanedColumn: KibanaDatatable['columns'][0] = {
+          id: column.id,
+          name: column.name,
+        };
+        if (args.includeFormatHints) {
+          cleanedColumn.formatHint = createFormat(column.aggConfig);
+        }
+        return cleanedColumn;
+      }),
     };
   },
 });

src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts

@@ -23,11 +23,8 @@ import { setBounds } from 'ui/agg_types/buckets/date_histogram';
 import { SearchSource } from 'ui/courier';
 import { AggConfig, Vis, VisParams, VisState } from 'ui/vis';
 import moment from 'moment';
-
-interface SchemaFormat {
-  id: string;
-  params?: any;
-}
+import { SerializedFieldFormat } from 'src/plugins/data/common';
+import { createFormat } from './utilities';
 
 interface SchemaConfigParams {
   precision?: number;
@@ -36,7 +33,7 @@ interface SchemaConfigParams {
 
 export interface SchemaConfig {
   accessor: number;
-  format: SchemaFormat | {};
+  format: SerializedFieldFormat | {};
   params: SchemaConfigParams;
   aggType: string;
 }
@@ -78,37 +75,6 @@ const vislibCharts: string[] = [
 ];
 
 export const getSchemas = (vis: Vis, timeRange?: any): Schemas => {
-  const createFormat = (agg: AggConfig): SchemaFormat => {
-    const format: SchemaFormat = agg.params.field ? agg.params.field.format.toJSON() : {};
-    const formats: any = {
-      date_range: () => ({ id: 'string' }),
-      percentile_ranks: () => ({ id: 'percent' }),
-      count: () => ({ id: 'number' }),
-      cardinality: () => ({ id: 'number' }),
-      date_histogram: () => ({
-        id: 'date',
-        params: {
-          pattern: agg.buckets.getScaledDateFormat(),
-        },
-      }),
-      terms: () => ({
-        id: 'terms',
-        params: {
-          id: format.id,
-          otherBucketLabel: agg.params.otherBucketLabel,
-          missingBucketLabel: agg.params.missingBucketLabel,
-          ...format.params,
-        },
-      }),
-      range: () => ({
-        id: 'range',
-        params: { id: format.id, ...format.params },
-      }),
-    };
-
-    return formats[agg.type.name] ? formats[agg.type.name]() : format;
-  };
-
   const createSchemaConfig = (accessor: number, agg: AggConfig): SchemaConfig => {
     if (agg.type.name === 'date_histogram') {
       agg.params.timeRange = timeRange;

src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities.ts

@@ -20,6 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import { identity } from 'lodash';
 import { AggConfig, Vis } from 'ui/vis';
+import { SerializedFieldFormat } from 'src/plugins/data/common';
 // @ts-ignore
 import { FieldFormat } from '../../../../field_formats/field_format';
 // @ts-ignore
@@ -28,12 +29,24 @@ import chrome from '../../../chrome';
 // @ts-ignore
 import { fieldFormats } from '../../../registry/field_formats';
 
+interface TermsFieldFormatParams {
+  otherBucketLabel: string;
+  missingBucketLabel: string;
+  id: string;
+}
+
+function isTermsFieldFormat(
+  serializedFieldFormat: SerializedFieldFormat
+): serializedFieldFormat is SerializedFieldFormat<TermsFieldFormatParams> {
+  return serializedFieldFormat.id === 'terms';
+}
+
 const config = chrome.getUiSettingsClient();
 
 const getConfig = (...args: any[]): any => config.get(...args);
 const getDefaultFieldFormat = () => ({ convert: identity });
 
-const getFieldFormat = (id: string, params: object) => {
+const getFieldFormat = (id: string | undefined, params: object = {}) => {
   const Format = fieldFormats.byId[id];
   if (Format) {
     return new Format(params, getConfig);
@@ -42,7 +55,42 @@ const getFieldFormat = (id: string, params: object) => {
   }
 };
 
-export const getFormat = (mapping: any) => {
+export type FieldFormat = any;
+
+export const createFormat = (agg: AggConfig): SerializedFieldFormat => {
+  const format: SerializedFieldFormat = agg.params.field ? agg.params.field.format.toJSON() : {};
+  const formats: Record<string, () => SerializedFieldFormat> = {
+    date_range: () => ({ id: 'string' }),
+    percentile_ranks: () => ({ id: 'percent' }),
+    count: () => ({ id: 'number' }),
+    cardinality: () => ({ id: 'number' }),
+    date_histogram: () => ({
+      id: 'date',
+      params: {
+        pattern: agg.buckets.getScaledDateFormat(),
+      },
+    }),
+    terms: () => ({
+      id: 'terms',
+      params: {
+        id: format.id,
+        otherBucketLabel: agg.params.otherBucketLabel,
+        missingBucketLabel: agg.params.missingBucketLabel,
+        ...format.params,
+      },
+    }),
+    range: () => ({
+      id: 'range',
+      params: { id: format.id, ...format.params },
+    }),
+  };
+
+  return formats[agg.type.name] ? formats[agg.type.name]() : format;
+};
+
+export type FormatFactory = (mapping?: SerializedFieldFormat) => FieldFormat;
+
+export const getFormat: FormatFactory = (mapping: SerializedFieldFormat = {}): FieldFormat => {
   if (!mapping) {
     return getDefaultFieldFormat();
   }
@@ -59,16 +107,17 @@ export const getFormat = (mapping: any) => {
       });
     });
     return new RangeFormat();
-  } else if (id === 'terms') {
+  } else if (isTermsFieldFormat(mapping) && mapping.params) {
+    const params = mapping.params;
     return {
       getConverterFor: (type: string) => {
-        const format = getFieldFormat(mapping.params.id, mapping.params);
+        const format = getFieldFormat(params.id, mapping.params);
         return (val: string) => {
           if (val === '__other__') {
-            return mapping.params.otherBucketLabel;
+            return params.otherBucketLabel;
           }
           if (val === '__missing__') {
-            return mapping.params.missingBucketLabel;
+            return params.missingBucketLabel;
           }
           const parsedUrl = {
             origin: window.location.origin,
@@ -79,12 +128,12 @@ export const getFormat = (mapping: any) => {
         };
       },
       convert: (val: string, type: string) => {
-        const format = getFieldFormat(mapping.params.id, mapping.params);
+        const format = getFieldFormat(params.id, mapping.params);
         if (val === '__other__') {
-          return mapping.params.otherBucketLabel;
+          return params.otherBucketLabel;
         }
         if (val === '__missing__') {
-          return mapping.params.missingBucketLabel;
+          return params.missingBucketLabel;
         }
         const parsedUrl = {
           origin: window.location.origin,

src/plugins/data/common/expressions/expression_types/kibana_datatable.ts

@@ -21,9 +21,15 @@ import { map } from 'lodash';
 
 const name = 'kibana_datatable';
 
+export interface SerializedFieldFormat<TParams = object> {
+  id?: string;
+  params?: TParams;
+}
+
 interface Column {
   id: string;
   name: string;
+  formatHint?: SerializedFieldFormat;
 }
 
 interface Row {

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/expression.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTable } from '@elastic/eui';
-import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
-import { KibanaDatatable, LensMultiTable } from '../types';
+import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
+import { LensMultiTable } from '../types';
 import { RenderFunction } from '../interpreter_types';
+import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
 
 export interface DatatableColumns {
   columnIds: string[];
@@ -106,7 +107,9 @@ export const datatableColumns: ExpressionFunction<
   },
 };
 
-export const datatableRenderer: RenderFunction<DatatableProps> = {
+export const getDatatableRenderer = (
+  formatFactory: FormatFactory
+): RenderFunction<DatatableProps> => ({
   name: 'lens_datatable_renderer',
   displayName: i18n.translate('xpack.lens.datatable.visualizationName', {
     defaultMessage: 'Datatable',
@@ -115,12 +118,17 @@ export const datatableRenderer: RenderFunction<DatatableProps> = {
   validate: () => {},
   reuseDomNode: true,
   render: async (domNode: Element, config: DatatableProps, _handlers: unknown) => {
-    ReactDOM.render(<DatatableComponent {...config} />, domNode);
+    ReactDOM.render(<DatatableComponent {...config} formatFactory={formatFactory} />, domNode);
   },
-};
+});
 
-function DatatableComponent(props: DatatableProps) {
+function DatatableComponent(props: DatatableProps & { formatFactory: FormatFactory }) {
   const [firstTable] = Object.values(props.data.tables);
+  const formatters: Record<string, ReturnType<FormatFactory>> = {};
+
+  firstTable.columns.forEach(column => {
+    formatters[column.id] = props.formatFactory(column.formatHint);
+  });
 
   return (
     <EuiBasicTable
@@ -133,7 +141,17 @@ function DatatableComponent(props: DatatableProps) {
           };
         })
         .filter(({ field }) => !!field)}
-      items={firstTable ? firstTable.rows : []}
+      items={
+        firstTable
+          ? firstTable.rows.map(row => {
+              const formattedRow: Record<string, unknown> = {};
+              Object.entries(formatters).forEach(([columnId, formatter]) => {
+                formattedRow[columnId] = formatter.convert(row[columnId]);
+              });
+              return formattedRow;
+            })
+          : []
+      }
     />
   );
 }

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/plugin.tsx

@@ -6,26 +6,37 @@
 
 // import { Registry } from '@kbn/interpreter/target/common';
 import { CoreSetup } from 'src/core/public';
+import { getFormat, FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { datatableVisualization } from './visualization';
 
 import {
   renderersRegistry,
   functionsRegistry,
 } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
 import { InterpreterSetup, RenderFunction } from '../interpreter_types';
-import { datatable, datatableColumns, datatableRenderer } from './expression';
+import { datatable, datatableColumns, getDatatableRenderer } from './expression';
 
 export interface DatatableVisualizationPluginSetupPlugins {
   interpreter: InterpreterSetup;
+  // TODO this is a simulated NP plugin.
+  // Once field formatters are actually migrated, the actual shim can be used
+  fieldFormat: {
+    formatFactory: FormatFactory;
+  };
 }
 
 class DatatableVisualizationPlugin {
   constructor() {}
 
-  setup(_core: CoreSetup | null, { interpreter }: DatatableVisualizationPluginSetupPlugins) {
+  setup(
+    _core: CoreSetup | null,
+    { interpreter, fieldFormat }: DatatableVisualizationPluginSetupPlugins
+  ) {
     interpreter.functionsRegistry.register(() => datatableColumns);
     interpreter.functionsRegistry.register(() => datatable);
-    interpreter.renderersRegistry.register(() => datatableRenderer as RenderFunction<unknown>);
+    interpreter.renderersRegistry.register(
+      () => getDatatableRenderer(fieldFormat.formatFactory) as RenderFunction<unknown>
+    );
 
     return datatableVisualization;
   }
@@ -41,5 +52,8 @@ export const datatableVisualizationSetup = () =>
       renderersRegistry,
       functionsRegistry,
     },
+    fieldFormat: {
+      formatFactory: getFormat,
+    },
   });
 export const datatableVisualizationStop = () => plugin.stop();

x-pack/legacy/plugins/lens/public/editor_frame_plugin/merge_tables.ts

@@ -5,8 +5,8 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
-import { LensMultiTable, KibanaDatatable } from '../types';
+import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
+import { LensMultiTable } from '../types';
 
 interface MergeTables {
   layerIds: string[];

x-pack/legacy/plugins/lens/public/indexpattern_plugin/filter_ratio.ts

@@ -5,8 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
-import { KibanaDatatable } from '../types';
+import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
 
 interface FilterRatioKey {
   id: string;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.tsx

@@ -243,6 +243,7 @@ describe('IndexPattern Data Source', () => {
               index=\\"1\\"
               metricsAtAllLevels=false
               partialRows=false
+              includeFormatHints=true
               aggConfigs='[{\\"id\\":\\"col1\\",\\"enabled\\":true,\\"type\\":\\"count\\",\\"schema\\":\\"metric\\",\\"params\\":{}},{\\"id\\":\\"col2\\",\\"enabled\\":true,\\"type\\":\\"date_histogram\\",\\"schema\\":\\"segment\\",\\"params\\":{\\"field\\":\\"timestamp\\",\\"useNormalizedEsInterval\\":true,\\"interval\\":\\"1d\\",\\"drop_partials\\":false,\\"min_doc_count\\":1,\\"extended_bounds\\":{}}}]' | lens_rename_columns idMap='{\\"col-0-col1\\":\\"col1\\",\\"col-1-col2\\":\\"col2\\"}'"
       `);
     });