[Lens] Embeddable (#41361)

elastic · Jul 25, 2019 · 0143fcd · 0143fcd
1 parent 7db032c
commit 0143fcd
Show file tree

Hide file tree

Showing 26 changed files with 841 additions and 142 deletions.
diff --git a/src/legacy/core_plugins/data/public/expressions/expression_renderer.tsx b/src/legacy/core_plugins/data/public/expressions/expression_renderer.tsx
@@ -58,7 +58,7 @@ export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
         }
       });
     }
-  }, [expression, mountpoint.current]);
+  }, [expression, mountpoint.current, options.context, options.getInitialContext]);
 
   return (
     <div

diff --git a/x-pack/legacy/plugins/lens/common/constants.ts b/x-pack/legacy/plugins/lens/common/constants.ts
@@ -5,3 +5,9 @@
  */
 
 export const PLUGIN_ID = 'lens';
+
+export const BASE_URL = 'app/lens';
+
+export function getEditPath(id: string) {
+  return `/${BASE_URL}#/edit/${encodeURIComponent(id)}`;
+}
diff --git a/x-pack/legacy/plugins/lens/index.ts b/x-pack/legacy/plugins/lens/index.ts
@@ -9,7 +9,7 @@ import { Server } from 'hapi';
 import { resolve } from 'path';
 import { LegacyPluginInitializer } from 'src/legacy/types';
 import mappings from './mappings.json';
-import { PLUGIN_ID } from './common';
+import { PLUGIN_ID, getEditPath } from './common';
 
 const NOT_INTERNATIONALIZED_PRODUCT_NAME = 'Lens Visualizations';
 
@@ -26,6 +26,7 @@ export const lens: LegacyPluginInitializer = kibana => {
         description: 'Explore and visualize data.',
         main: `plugins/${PLUGIN_ID}/index`,
       },
+      embeddableFactories: ['plugins/lens/register_embeddable'],
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
       mappings,
       visTypes: ['plugins/lens/register_vis_type_alias'],
@@ -35,7 +36,7 @@ export const lens: LegacyPluginInitializer = kibana => {
           isImportableAndExportable: true,
           getTitle: (obj: { attributes: { title: string } }) => obj.attributes.title,
           getInAppUrl: (obj: { id: string }) => ({
-            path: `/app/lens#/edit/${encodeURIComponent(obj.id)}`,
+            path: getEditPath(obj.id),
             uiCapabilitiesPath: 'lens.show',
           }),
         },
@@ -63,7 +64,7 @@ export const lens: LegacyPluginInitializer = kibana => {
               all: [],
               read: [],
             },
-            ui: ['show'],
+            ui: ['save', 'show'],
           },
           read: {
             api: [PLUGIN_ID],

diff --git a/x-pack/legacy/plugins/lens/mappings.json b/x-pack/legacy/plugins/lens/mappings.json
@@ -12,6 +12,9 @@
       },
       "state": {
         "type": "text"
+      },
+      "expression": {
+        "type": "text"
       }
     }
   }

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx
@@ -130,12 +130,16 @@ describe('editor_frame', () => {
               activeDatasourceId: 'testDatasource',
               visualizationType: 'testVis',
               title: '',
+              expression: '',
               state: {
                 datasourceStates: {
                   testDatasource: datasource1State,
                   testDatasource2: datasource2State,
                 },
                 visualization: {},
+                datasourceMetaData: {
+                  filterableIndexPatterns: [],
+                },
               },
             }}
           />
@@ -341,38 +345,52 @@ describe('editor_frame', () => {
       instance.update();
 
       expect(instance.find(expressionRendererMock).prop('expression')).toMatchInlineSnapshot(`
-                Object {
-                  "chain": Array [
-                    Object {
-                      "arguments": Object {
-                        "layerIds": Array [
-                          "first",
-                        ],
-                        "tables": Array [
-                          Object {
-                            "chain": Array [
-                              Object {
-                                "arguments": Object {},
-                                "function": "datasource",
-                                "type": "function",
-                              },
-                            ],
-                            "type": "expression",
-                          },
-                        ],
+        Object {
+          "chain": Array [
+            Object {
+              "arguments": Object {},
+              "function": "kibana",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {
+                "filters": Array [],
+                "query": Array [],
+                "timeRange": Array [],
+              },
+              "function": "kibana_context",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {
+                "layerIds": Array [
+                  "first",
+                ],
+                "tables": Array [
+                  Object {
+                    "chain": Array [
+                      Object {
+                        "arguments": Object {},
+                        "function": "datasource",
+                        "type": "function",
                       },
-                      "function": "lens_merge_tables",
-                      "type": "function",
-                    },
-                    Object {
-                      "arguments": Object {},
-                      "function": "vis",
-                      "type": "function",
-                    },
-                  ],
-                  "type": "expression",
-                }
-            `);
+                    ],
+                    "type": "expression",
+                  },
+                ],
+              },
+              "function": "lens_merge_tables",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {},
+              "function": "vis",
+              "type": "function",
+            },
+          ],
+          "type": "expression",
+        }
+      `);
     });
 
     it('should render individual expression for each given layer', async () => {
@@ -398,12 +416,16 @@ describe('editor_frame', () => {
             activeDatasourceId: 'testDatasource',
             visualizationType: 'testVis',
             title: '',
+            expression: '',
             state: {
               datasourceStates: {
                 testDatasource: {},
                 testDatasource2: {},
               },
               visualization: {},
+              datasourceMetaData: {
+                filterableIndexPatterns: [],
+              },
             },
           }}
         />
@@ -416,6 +438,20 @@ describe('editor_frame', () => {
       expect(instance.find(expressionRendererMock).prop('expression')).toMatchInlineSnapshot(`
         Object {
           "chain": Array [
+            Object {
+              "arguments": Object {},
+              "function": "kibana",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {
+                "filters": Array [],
+                "query": Array [],
+                "timeRange": Array [],
+              },
+              "function": "kibana_context",
+              "type": "function",
+            },
             Object {
               "arguments": Object {
                 "layerIds": Array [
@@ -608,12 +644,16 @@ describe('editor_frame', () => {
             activeDatasourceId: 'testDatasource',
             visualizationType: 'testVis',
             title: '',
+            expression: '',
             state: {
               datasourceStates: {
                 testDatasource: {},
                 testDatasource2: {},
               },
               visualization: {},
+              datasourceMetaData: {
+                filterableIndexPatterns: [],
+              },
             },
           }}
         />
@@ -656,12 +696,16 @@ describe('editor_frame', () => {
             activeDatasourceId: 'testDatasource',
             visualizationType: 'testVis',
             title: '',
+            expression: '',
             state: {
               datasourceStates: {
                 testDatasource: datasource1State,
                 testDatasource2: datasource2State,
               },
               visualization: {},
+              datasourceMetaData: {
+                filterableIndexPatterns: [],
+              },
             },
           }}
         />

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
@@ -162,7 +162,7 @@ export function EditorFrame(props: EditorFrameProps) {
         <nav>
           <EuiLink
             onClick={() => {
-              if (activeDatasource && visualization) {
+              if (state.activeDatasourceId && activeDatasource && visualization) {
                 save({
                   activeDatasources: Object.keys(state.datasourceStates).reduce(
                     (datasourceMap, datasourceId) => ({
@@ -176,6 +176,8 @@ export function EditorFrame(props: EditorFrameProps) {
                   state,
                   redirectTo: props.redirectTo,
                   store: props.store,
+                  activeDatasourceId: state.activeDatasourceId,
+                  framePublicAPI,
                 }).catch(onError);
               }
             }}

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts
@@ -4,6 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { TimeRange } from 'ui/timefilter/time_history';
+import { Query } from 'src/legacy/core_plugins/data/public';
+import { Filter } from '@kbn/es-query';
 import { Ast, fromExpression, ExpressionFunctionAST } from '@kbn/interpreter/common';
 import { Visualization, Datasource, FramePublicAPI } from '../../types';
 
@@ -59,6 +62,39 @@ export function prependDatasourceExpression(
   };
 }
 
+export function prependKibanaContext(
+  expression: Ast | string | null,
+  {
+    timeRange,
+    query,
+    filters,
+  }: {
+    timeRange?: TimeRange;
+    query?: Query;
+    filters?: Filter[];
+  }
+): Ast | null {
+  if (!expression) return null;
+  const parsedExpression = typeof expression === 'string' ? fromExpression(expression) : expression;
+
+  return {
+    type: 'expression',
+    chain: [
+      { type: 'function', function: 'kibana', arguments: {} },
+      {
+        type: 'function',
+        function: 'kibana_context',
+        arguments: {
+          timeRange: timeRange ? [JSON.stringify(timeRange)] : [],
+          query: query ? [JSON.stringify(query)] : [],
+          filters: filters ? [JSON.stringify(filters)] : [],
+        },
+      },
+      ...parsedExpression.chain,
+    ],
+  };
+}
+
 export function buildExpression({
   visualization,
   visualizationState,
@@ -83,5 +119,8 @@ export function buildExpression({
   }
   const visualizationExpression = visualization.toExpression(visualizationState, framePublicAPI);
 
-  return prependDatasourceExpression(visualizationExpression, datasourceMap, datasourceStates);
+  return prependKibanaContext(
+    prependDatasourceExpression(visualizationExpression, datasourceMap, datasourceStates),
+    {}
+  );
 }
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts
@@ -6,18 +6,20 @@
 
 import { save, Props } from './save';
 import { Action } from './state_management';
-import { createMockDatasource } from '../mocks';
+import { createMockDatasource, createMockVisualization } from '../mocks';
 
 describe('save editor frame state', () => {
+  const mockVisualization = createMockVisualization();
+  mockVisualization.getPersistableState.mockImplementation(x => x);
+  const mockDatasource = createMockDatasource();
+  mockDatasource.getPersistableState.mockImplementation(x => x);
   const saveArgs: Props = {
     dispatch: jest.fn(),
     redirectTo: jest.fn(),
     activeDatasources: {
-      indexpattern: {
-        getPersistableState: x => x,
-      },
+      indexpattern: mockDatasource,
     },
-    visualization: { getPersistableState: x => x },
+    visualization: mockVisualization,
     state: {
       title: 'aaa',
       datasourceStates: {
@@ -30,6 +32,14 @@ describe('save editor frame state', () => {
       saving: false,
       visualization: { activeId: '2', state: {} },
     },
+    activeDatasourceId: 'indexpattern',
+    framePublicAPI: {
+      addNewLayer: jest.fn(),
+      removeLayer: jest.fn(),
+      datasourceLayers: {
+        first: mockDatasource.publicAPIMock,
+      },
+    },
     store: {
       async save() {
         return { id: 'foo' };
@@ -92,6 +102,10 @@ describe('save editor frame state', () => {
       stuff: `${state}_datasource_persisted`,
     }));
 
+    const visualization = createMockVisualization();
+    visualization.getPersistableState.mockImplementation(state => ({
+      things: `${state}_vis_persisted`,
+    }));
     await save({
       ...saveArgs,
       activeDatasources: {
@@ -110,20 +124,17 @@ describe('save editor frame state', () => {
         saving: false,
         visualization: { activeId: '3', state: '4' },
       },
-
-      visualization: {
-        getPersistableState(state) {
-          return {
-            things: `${state}_vis_persisted`,
-          };
-        },
-      },
+      visualization,
     });
 
     expect(store.save).toHaveBeenCalledWith({
       activeDatasourceId: 'indexpattern',
       id: undefined,
+      expression: '',
       state: {
+        datasourceMetaData: {
+          filterableIndexPatterns: [],
+        },
         datasourceStates: {
           indexpattern: {
             stuff: '2_datasource_persisted',
-Original file line number
+Diff line change
@@ Expand Up @@
             }
           });
         }
-      }, [expression, mountpoint.current]);
+      }, [expression, mountpoint.current, options.context, options.getInitialContext]);
       return (
         <div
@@ Expand Down @@