[lens] Datatable visualization and visualization switcher

x-pack/plugins/lens/public/app_plugin/plugin.tsx

@@ -7,6 +7,10 @@
 import React from 'react';
 import { editorFrameSetup, editorFrameStop } from '../editor_frame_plugin';
 import { indexPatternDatasourceSetup, indexPatternDatasourceStop } from '../indexpattern_plugin';
+import {
+  datatableVisualizationSetup,
+  datatableVisualizationStop,
+} from '../datatable_visualization_plugin';
 import { xyVisualizationSetup, xyVisualizationStop } from '../xy_visualization_plugin';
 import { App } from './app';
 import { EditorFrameInstance } from '../types';
@@ -20,11 +24,13 @@ export class AppPlugin {
     // TODO: These plugins should not be called from the top level, but since this is the
     // entry point to the app we have no choice until the new platform is ready
     const indexPattern = indexPatternDatasourceSetup();
+    const datatableVisualization = datatableVisualizationSetup();
     const xyVisualization = xyVisualizationSetup();
     const editorFrame = editorFrameSetup();
 
     editorFrame.registerDatasource('indexpattern', indexPattern);
     editorFrame.registerVisualization('xy', xyVisualization);
+    editorFrame.registerVisualization('datatable', datatableVisualization);
 
     this.instance = editorFrame.createInstance({});
 
@@ -38,6 +44,7 @@ export class AppPlugin {
 
     // TODO this will be handled by the plugin platform itself
     indexPatternDatasourceStop();
+    datatableVisualizationStop();
     xyVisualizationStop();
     editorFrameStop();
   }

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

@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+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 } from '../types';
+import { RenderFunction } from '../interpreter_types';
+
+export interface DatatableColumns {
+  columnIds: string[];
+  labels: string[];
+}
+
+interface Args {
+  columns: DatatableColumns;
+}
+
+export interface DatatableProps {
+  data: KibanaDatatable;
+  args: Args;
+}
+
+export interface DatatableRender {
+  type: 'render';
+  as: 'lens_datatable_renderer';
+  value: DatatableProps;
+}
+
+export const datatable: ExpressionFunction<
+  'lens_datatable',
+  KibanaDatatable,
+  Args,
+  DatatableRender
+> = ({
+  name: 'lens_datatable',
+  type: 'render',
+  help: i18n.translate('xpack.lens.datatable.expressionHelpLabel', {
+    defaultMessage: 'Datatable renderer',
+  }),
+  args: {
+    title: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.datatable.titleLabel', {
+        defaultMessage: 'Title',
+      }),
+    },
+    columns: {
+      types: ['lens_datatable_columns'],
+      help: '',
+    },
+  },
+  context: {
+    types: ['kibana_datatable'],
+  },
+  fn(data: KibanaDatatable, args: Args) {
+    return {
+      type: 'render',
+      as: 'lens_datatable_renderer',
+      value: {
+        data,
+        args,
+      },
+    };
+  },
+  // TODO the typings currently don't support custom type args. As soon as they do, this can be removed
+} as unknown) as ExpressionFunction<'lens_datatable', KibanaDatatable, Args, DatatableRender>;
+
+type DatatableColumnsResult = DatatableColumns & { type: 'lens_datatable_columns' };
+
+export const datatableColumns: ExpressionFunction<
+  'lens_datatable_columns',
+  null,
+  DatatableColumns,
+  DatatableColumnsResult
+> = {
+  name: 'lens_datatable_columns',
+  aliases: [],
+  type: 'lens_datatable_columns',
+  help: '',
+  context: {
+    types: ['null'],
+  },
+  args: {
+    columnIds: {
+      types: ['string'],
+      multi: true,
+      help: '',
+    },
+    labels: {
+      types: ['string'],
+      multi: true,
+      help: '',
+    },
+  },
+  fn: function fn(_context: unknown, args: DatatableColumns) {
+    return {
+      type: 'lens_datatable_columns',
+      ...args,
+    };
+  },
+};
+
+export interface DatatableProps {
+  data: KibanaDatatable;
+  args: Args;
+}
+
+export const datatableRenderer: RenderFunction<DatatableProps> = {
+  name: 'lens_datatable_renderer',
+  displayName: i18n.translate('xpack.lens.datatable.visualizationName', {
+    defaultMessage: 'Datatable',
+  }),
+  help: '',
+  validate: () => {},
+  reuseDomNode: true,
+  render: async (domNode: Element, config: DatatableProps, _handlers: unknown) => {
+    ReactDOM.render(<DatatableComponent {...config} />, domNode);
+  },
+};
+
+function DatatableComponent(props: DatatableProps) {
+  return (
+    <EuiBasicTable
+      columns={props.args.columns.columnIds
+        .map((id, index) => {
+          return {
+            field: props.args.columns.columnIds[index],
+            name: props.args.columns.labels[index],
+          };
+        })
+        .filter(({ field }) => !!field)}
+      items={props.data.rows}
+    />
+  );
+}

x-pack/plugins/lens/public/datatable_visualization_plugin/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './plugin';

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// import { Registry } from '@kbn/interpreter/target/common';
+import { CoreSetup } from 'src/core/public';
+import { datatableVisualization } from './visualization';
+
+import {
+  renderersRegistry,
+  functionsRegistry,
+  // @ts-ignore untyped dependency
+} from '../../../../../src/legacy/core_plugins/interpreter/public/registries';
+import { InterpreterSetup, RenderFunction } from '../interpreter_types';
+import { datatable, datatableColumns, datatableRenderer } from './expression';
+
+export interface DatatableVisualizationPluginSetupPlugins {
+  interpreter: InterpreterSetup;
+}
+
+class DatatableVisualizationPlugin {
+  constructor() {}
+
+  setup(_core: CoreSetup | null, { interpreter }: DatatableVisualizationPluginSetupPlugins) {
+    interpreter.functionsRegistry.register(() => datatableColumns);
+    interpreter.functionsRegistry.register(() => datatable);
+    interpreter.renderersRegistry.register(() => datatableRenderer as RenderFunction<unknown>);
+
+    return datatableVisualization;
+  }
+
+  stop() {}
+}
+
+const plugin = new DatatableVisualizationPlugin();
+
+export const datatableVisualizationSetup = () =>
+  plugin.setup(null, {
+    interpreter: {
+      renderersRegistry,
+      functionsRegistry,
+    },
+  });
+export const datatableVisualizationStop = () => plugin.stop();