Expression datatable formatting hints

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

@@ -19,11 +19,10 @@
 
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
-// @ts-ignore
 import { CourierRequestHandlerProvider } from 'ui/vis/request_handlers/courier';
 // @ts-ignore
 import { AggConfigs } from 'ui/vis/agg_configs.js';
-
+import { createFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import chrome from 'ui/chrome';
 
 // need to get rid of angular from these
@@ -35,7 +34,7 @@ import { IndexPatternsProvider } from '../../../data/public';
 const courierRequestHandlerProvider = CourierRequestHandlerProvider;
 const courierRequestHandler = courierRequestHandlerProvider().handler;
 
-import { ExpressionFunction } from '../../types';
+import { ExpressionFunction, KibanaDatatableColumn } from '../../types';
 import { KibanaContext, KibanaDatatable } from '../../common';
 
 const name = 'esaggs';
@@ -46,6 +45,7 @@ interface Arguments {
   index: string | null;
   metricsAtAllLevels: boolean;
   partialRows: boolean;
+  includeFormatHints: boolean;
   aggConfigs: string;
 }
 
@@ -76,6 +76,11 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
       default: false,
       help: '',
     },
+    includeFormatHints: {
+      types: ['boolean'],
+      default: false,
+      help: '',
+    },
     aggConfigs: {
       types: ['string'],
       default: '""',
@@ -98,26 +103,34 @@ 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),
-      query: get(context, 'query', null),
-      filters: get(context, 'filters', null),
+      timeRange: get(context, 'timeRange', undefined),
+      query: get(context, 'query', undefined),
+      filters: get(context, 'filters', undefined),
       forceFetch: true,
       metricsAtAllLevels: args.metricsAtAllLevels,
       partialRows: args.partialRows,
       inspectorAdapters: handlers.inspectorAdapters,
       queryFilter,
     });
 
-    return {
+    const table: KibanaDatatable = {
       type: 'kibana_datatable',
       rows: response.rows,
-      columns: response.columns.map(column => ({
-        id: column.id,
-        name: column.name,
-      })),
+      columns: response.columns.map(column => {
+        const cleanedColumn: KibanaDatatableColumn = {
+          id: column.id,
+          name: column.name,
+        };
+        if (args.includeFormatHints) {
+          cleanedColumn.formatHint = createFormat(column.aggConfig);
+        }
+        return cleanedColumn;
+      }),
     };
+
+    return table;
   },
 });

src/legacy/ui/public/vis/request_handlers/courier.d.ts

@@ -0,0 +1,38 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { KibanaDatatableRow } from 'src/plugins/data/common';
+import { AggConfig } from '../agg_config';
+import { RequestHandler } from './request_handlers';
+
+interface CourierResponse {
+  rows: KibanaDatatableRow[];
+  columns: Array<{
+    id: string;
+    name: string;
+    aggConfig: AggConfig;
+  }>;
+}
+
+type CourierRequestHandler = RequestHandler<CourierResponse>;
+
+export declare function CourierRequestHandlerProvider(): {
+  name: 'courier';
+  handler: CourierRequestHandler;
+};

src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts

@@ -42,7 +42,7 @@ export interface RequestHandlerParams {
   visParams?: any;
 }
 
-export type RequestHandler = <T>(params: RequestHandlerParams) => T;
+export type RequestHandler<T = unknown> = (params: RequestHandlerParams) => T;
 
 export interface RequestHandlerDescription {
   name: string;

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/expressions/types/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/expressions/types/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 = {}) => {
   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

@@ -18,22 +18,24 @@
  */
 
 import { map } from 'lodash';
+import { SerializedFieldFormat } from '../types/common';
 
 const name = 'kibana_datatable';
 
-interface Column {
+export interface KibanaDatatableColumn {
   id: string;
   name: string;
+  formatHint?: SerializedFieldFormat;
 }
 
-interface Row {
+export interface KibanaDatatableRow {
   [key: string]: unknown;
 }
 
 export interface KibanaDatatable {
   type: typeof name;
-  columns: Column[];
-  rows: Row[];
+  columns: KibanaDatatableColumn[];
+  rows: KibanaDatatableRow[];
 }
 
 export const kibanaDatatable = () => ({

src/plugins/data/common/expressions/types/common.ts

@@ -58,3 +58,13 @@ export type UnmappedTypeStrings = 'date' | 'filter';
  * Utility type: extracts returned type from a Promise.
  */
 export type UnwrapPromise<T> = T extends Promise<infer P> ? P : T;
+
+/**
+ * JSON representation of a field formatter configuration.
+ * Is used to carry information about how to format data in
+ * a data table as part of the column definition.
+ */
+export interface SerializedFieldFormat<TParams = object> {
+  id?: string;
+  params?: TParams;
+}