[lens] Initial Commit

x-pack/index.js

@@ -38,6 +38,7 @@ import { translations } from './plugins/translations';
 import { upgradeAssistant } from './plugins/upgrade_assistant';
 import { uptime } from './plugins/uptime';
 import { ossTelemetry } from './plugins/oss_telemetry';
+import { visualizationLens } from './plugins/visualization_lens';
 
 module.exports = function (kibana) {
   return [
@@ -75,5 +76,6 @@ module.exports = function (kibana) {
     upgradeAssistant(kibana),
     uptime(kibana),
     ossTelemetry(kibana),
+    visualizationLens(kibana),
   ];
 };

x-pack/plugins/visualization_lens/common/constants.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 const PLUGIN_ID = 'visualization_lens';

x-pack/plugins/visualization_lens/common/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 './constants';

x-pack/plugins/visualization_lens/index.ts

@@ -0,0 +1,73 @@
+/*
+ * 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 * as Joi from 'joi';
+import { Server } from 'hapi';
+import { resolve } from 'path';
+
+import { PLUGIN_ID } from './common';
+
+const NOT_INTERNATIONALIZED_PRODUCT_NAME = 'Lens Visualizations';
+
+export const visualizationLens = (kibana: any) => {
+  return new kibana.Plugin({
+    id: PLUGIN_ID,
+    configPrefix: `xpack.${PLUGIN_ID}`,
+    require: ['kibana', 'elasticsearch', 'xpack_main', 'interpreter'],
+    publicDir: resolve(__dirname, 'public'),
+
+    uiExports: {
+      app: {
+        title: NOT_INTERNATIONALIZED_PRODUCT_NAME,
+        description: 'Explore and visualize data.',
+        main: `plugins/${PLUGIN_ID}/app`,
+        icon: 'plugins/kibana/assets/visualize.svg',
+        euiIconType: 'visualizeApp',
+        order: 8950, // Uptime is 8900
+      },
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+    },
+
+    config: () => {
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+      }).default();
+    },
+
+    init(server: Server) {
+      server.plugins.xpack_main.registerFeature({
+        id: PLUGIN_ID,
+        name: NOT_INTERNATIONALIZED_PRODUCT_NAME,
+        icon: 'visualizeApp',
+        navLinkId: PLUGIN_ID,
+        app: [PLUGIN_ID, 'kibana'],
+        catalogue: [PLUGIN_ID],
+        privileges: {
+          all: {
+            api: [PLUGIN_ID],
+            catalogue: [PLUGIN_ID],
+            savedObject: {
+              all: [],
+              read: [],
+            },
+            ui: ['show'],
+          },
+          read: {
+            api: [PLUGIN_ID],
+            catalogue: [PLUGIN_ID],
+            savedObject: {
+              all: [],
+              read: [],
+            },
+            ui: ['show'],
+          },
+        },
+      });
+    },
+  });
+};
+
+export { editorFrame } from './public';

x-pack/plugins/visualization_lens/package.json

@@ -0,0 +1,11 @@
+{
+  "author": "Elastic",
+  "name": "visualization_lens",
+  "version": "7.0.0",
+  "private": true,
+  "license": "Elastic-License",
+  "devDependencies": {},
+  "dependencies": {
+    "@elastic/charts": "^4.0.0"
+  }
+}

x-pack/plugins/visualization_lens/public/app.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 { I18nProvider } from '@kbn/i18n/react';
+import { IScope } from 'angular';
+import React, { useCallback } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import chrome from 'ui/chrome';
+
+import { PLUGIN_ID } from '../common';
+
+import { editorFrame } from '.';
+
+// Side effect of loading this is to register
+import './indexpattern_datasource';
+
+function Lens() {
+  const renderFrame = useCallback(node => {
+    if (node !== null) {
+      editorFrame.render(node);
+    }
+  }, []);
+
+  return (
+    <I18nProvider>
+      <div>
+        <h1>Lens</h1>
+
+        <div ref={renderFrame} />
+      </div>
+    </I18nProvider>
+  );
+}
+
+// TODO: Convert this to the "new platform" way of doing UI
+function App($scope: IScope, $element: JQLite) {
+  const el = $element[0];
+  $scope.$on('$destroy', () => unmountComponentAtNode(el));
+
+  return render(<Lens />, el);
+}
+
+chrome.setRootController(PLUGIN_ID, App);

x-pack/plugins/visualization_lens/public/editor_frame.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, { useCallback } from 'react';
+import { render } from 'react-dom';
+import { Datasource, Visualization, EditorFrameAPI } from './types';
+
+function EditorFrameComponent(props: {
+  datasources: Array<Datasource<unknown>>;
+  visualizations: Array<Visualization<unknown>>;
+}) {
+  const renderDatasource = (datasource: Datasource<unknown>) => {
+    return useCallback(
+      node => {
+        datasource.renderDataPanel({
+          domElement: node,
+        });
+      },
+      [datasource]
+    );
+  };
+
+  return (
+    <div>
+      <h2>Editor Frame</h2>
+
+      {props.datasources.map((datasource, index) => (
+        <div key={index} ref={renderDatasource(datasource)} />
+      ))}
+    </div>
+  );
+}
+
+class EditorFrame {
+  constructor() {}
+
+  private datasources: Array<Datasource<unknown>> = [];
+  private visualizations: Array<Visualization<unknown>> = [];
+
+  public setup(): EditorFrameAPI {
+    return {
+      render: (domElement: Element) => {
+        render(
+          <EditorFrameComponent
+            datasources={this.datasources}
+            visualizations={this.visualizations}
+          />,
+          domElement
+        );
+      },
+      registerDatasource: (datasource: Datasource<unknown>) => {
+        this.datasources.push(datasource);
+      },
+      registerVisualization: (visualization: Visualization<unknown>) => {
+        this.visualizations.push(visualization);
+      },
+    };
+  }
+
+  public stop() {
+    return {};
+  }
+}
+
+export { EditorFrame };
+
+export const editorFrame = new EditorFrame().setup();

x-pack/plugins/visualization_lens/public/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 './editor_frame';
+export * from './types';

x-pack/plugins/visualization_lens/public/indexpattern_datasource/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+// TODO: Figure out how to separate this out into another plugin
+import { editorFrame } from '../../';
+
+import { indexPatternDatasource } from './indexpattern';
+
+editorFrame.registerDatasource(indexPatternDatasource);
+
+export * from './indexpattern';

x-pack/plugins/visualization_lens/public/indexpattern_datasource/indexpattern.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { render } from 'react-dom';
+import { Datasource, Operation, DataType } from '../';
+
+interface IndexPatternPrivateState {
+  query: object;
+}
+
+class IndexPatternDatasource implements Datasource<IndexPatternPrivateState> {
+  private state: IndexPatternPrivateState;
+
+  constructor(state?: IndexPatternPrivateState) {
+    if (state) {
+      this.state = state;
+    } else {
+      this.state = {
+        query: {},
+      };
+    }
+  }
+
+  toExpression() {
+    return `${JSON.stringify(this.state.query)}`;
+  }
+
+  renderDataPanel({ domElement }: { domElement: Element }) {
+    render(<div>Index Pattern Data Source</div>, domElement);
+  }
+
+  getPublicAPI() {
+    return {
+      getTableSpec: () => [],
+      getOperationForColumnId: () => ({
+        id: '',
+        // User-facing label for the operation
+        label: '',
+        dataType: 'string' as DataType,
+        // A bucketed operation has many values the same
+        isBucketed: false,
+      }),
+
+      // Called by dimension
+      getDimensionPanelComponent: (props: any) => (
+        domElement: Element,
+        operations: Operation[]
+      ) => {},
+
+      removeColumnInTableSpec: (columnId: string) => [],
+      moveColumnTo: (columnId: string, targetIndex: number) => {},
+      duplicateColumn: (columnId: string) => [],
+    };
+  }
+
+  getDatasourceSuggestionsForField() {
+    return [];
+  }
+
+  getDatasourceSuggestionsFromCurrentState() {
+    return [];
+  }
+}
+
+export { IndexPatternDatasource };
+
+export const indexPatternDatasource = new IndexPatternDatasource();