remove visualize loader (#46910)

elastic · Nov 12, 2019 · 253a106 · 253a106
1 parent 4feb783
commit 253a106
Show file tree

Hide file tree

Showing 49 changed files with 339 additions and 2,933 deletions.
diff --git a/src/legacy/core_plugins/data/public/shim/legacy_module.ts b/src/legacy/core_plugins/data/public/shim/legacy_module.ts
@@ -24,7 +24,7 @@ import { wrapInI18nContext } from 'ui/i18n';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 import { npStart } from 'ui/new_platform';
-import { FilterBar, ApplyFiltersPopover } from '../filter';
+import { FilterBar } from '../filter';
 import { IndexPatterns } from '../index_patterns/index_patterns';
 
 /** @internal */
@@ -70,54 +70,7 @@ export const initLegacyModule = once((indexPatterns: IndexPatterns): void => {
         ['className', { watchDepth: 'reference' }],
         ['pluginDataStart', { watchDepth: 'reference' }],
       ]);
-    })
-    .directive('applyFiltersPopover', () => {
-      return {
-        restrict: 'E',
-        template: '',
-        compile: (elem: any) => {
-          const child = document.createElement('apply-filters-popover-helper');
-
-          // Copy attributes to the child directive
-          for (const attr of elem[0].attributes) {
-            child.setAttribute(attr.name, attr.value);
-          }
-
-          // Add a key attribute that will force a full rerender every time that
-          // a filter changes.
-          child.setAttribute('key', 'key');
-
-          // Append helper directive
-          elem.append(child);
-
-          const linkFn = ($scope: any, _: any, $attr: any) => {
-            // Watch only for filter changes to update key.
-            $scope.$watch(
-              () => {
-                return $scope.$eval($attr.filters) || [];
-              },
-              (newVal: any) => {
-                $scope.key = Date.now();
-              },
-              true
-            );
-          };
-
-          return linkFn;
-        },
-      };
-    })
-    .directive('applyFiltersPopoverHelper', (reactDirective: any) =>
-      reactDirective(wrapInI18nContext(ApplyFiltersPopover), [
-        ['filters', { watchDepth: 'collection' }],
-        ['onCancel', { watchDepth: 'reference' }],
-        ['onSubmit', { watchDepth: 'reference' }],
-        ['indexPatterns', { watchDepth: 'collection' }],
-
-        // Key is needed to trigger a full rerender of the component
-        'key',
-      ])
-    );
+    });
 
   uiModules.get('kibana/index_patterns').value('indexPatterns', indexPatterns);
 });
diff --git a/src/legacy/core_plugins/expressions/public/np_ready/public/execute.ts b/src/legacy/core_plugins/expressions/public/np_ready/public/execute.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { fromExpression } from '@kbn/interpreter/target/common';
+import { fromExpression, toExpression } from '@kbn/interpreter/target/common';
 import { DataAdapter, RequestAdapter, Adapters } from '../../../../../../plugins/inspector/public';
 import { getInterpreter } from './services';
 import { ExpressionAST, IExpressionLoaderParams, IInterpreterResult } from './types';
@@ -38,17 +38,18 @@ export class ExpressionDataHandler {
   private inspectorAdapters: Adapters;
   private promise: Promise<IInterpreterResult>;
 
+  public isPending: boolean = true;
   constructor(expression: string | ExpressionAST, params: IExpressionLoaderParams) {
     if (typeof expression === 'string') {
       this.expression = expression;
       this.ast = fromExpression(expression) as ExpressionAST;
     } else {
       this.ast = expression;
-      this.expression = '';
+      this.expression = toExpression(this.ast);
     }
 
     this.abortController = new AbortController();
-    this.inspectorAdapters = this.getActiveInspectorAdapters();
+    this.inspectorAdapters = params.inspectorAdapters || this.getActiveInspectorAdapters();
 
     const getInitialContext = () => ({
       type: 'kibana_context',
@@ -58,11 +59,21 @@ export class ExpressionDataHandler {
     const defaultContext = { type: 'null' };
 
     const interpreter = getInterpreter();
-    this.promise = interpreter.interpretAst(this.ast, params.context || defaultContext, {
-      getInitialContext,
-      inspectorAdapters: this.inspectorAdapters,
-      abortSignal: this.abortController.signal,
-    });
+    this.promise = interpreter
+      .interpretAst(this.ast, params.context || defaultContext, {
+        getInitialContext,
+        inspectorAdapters: this.inspectorAdapters,
+        abortSignal: this.abortController.signal,
+      })
+      .then(
+        (v: IInterpreterResult) => {
+          this.isPending = false;
+          return v;
+        },
+        () => {
+          this.isPending = false;
+        }
+      );
   }
 
   cancel = () => {

diff --git a/src/legacy/core_plugins/expressions/public/np_ready/public/loader.test.ts b/src/legacy/core_plugins/expressions/public/np_ready/public/loader.test.ts
@@ -67,7 +67,7 @@ describe('execute helper function', () => {
 });
 
 describe('ExpressionLoader', () => {
-  const expressionString = '';
+  const expressionString = 'demodata';
 
   describe('constructor', () => {
     it('accepts expression string', () => {
@@ -134,6 +134,8 @@ describe('ExpressionLoader', () => {
     (ExpressionDataHandler as jest.Mock).mockImplementationOnce(() => ({
       getData: () => true,
       cancel: cancelMock,
+      isPending: () => true,
+      inspect: () => {},
     }));
 
     const expressionLoader = new ExpressionLoader(element, expressionString, {});
@@ -160,10 +162,15 @@ describe('ExpressionLoader', () => {
     (ExpressionDataHandler as jest.Mock).mockImplementationOnce(() => ({
       getData,
       cancel: cancelMock,
+      isPending: () => true,
+      inspect: () => {},
     }));
+
     (ExpressionDataHandler as jest.Mock).mockImplementationOnce(() => ({
       getData,
       cancel: cancelMock,
+      isPending: () => true,
+      inspect: () => {},
     }));
 
     const expressionLoader = new ExpressionLoader(element, expressionString, {});
@@ -193,6 +200,8 @@ describe('ExpressionLoader', () => {
     (ExpressionDataHandler as jest.Mock).mockImplementationOnce(() => ({
       getData,
       cancel: cancelMock,
+      isPending: () => true,
+      inspect: () => {},
     }));
 
     const expressionLoader = new ExpressionLoader(element, expressionString, {});

diff --git a/src/legacy/core_plugins/expressions/public/np_ready/public/loader.ts b/src/legacy/core_plugins/expressions/public/np_ready/public/loader.ts
@@ -38,11 +38,12 @@ export class ExpressionLoader {
   private loadingSubject: Subject<void>;
   private data: Data;
   private params: IExpressionLoaderParams = {};
+  private ignoreNextResponse = false;
 
   constructor(
     element: HTMLElement,
-    expression: string | ExpressionAST,
-    params: IExpressionLoaderParams
+    expression?: string | ExpressionAST,
+    params?: IExpressionLoaderParams
   ) {
     this.dataSubject = new Subject();
     this.data$ = this.dataSubject.asObservable().pipe(share());
@@ -65,7 +66,9 @@ export class ExpressionLoader {
 
     this.setParams(params);
 
-    this.loadData(expression, this.params);
+    if (expression) {
+      this.loadData(expression, this.params);
+    }
   }
 
   destroy() {
@@ -117,9 +120,10 @@ export class ExpressionLoader {
   update(expression?: string | ExpressionAST, params?: IExpressionLoaderParams): void {
     this.setParams(params);
 
+    this.loadingSubject.next();
     if (expression) {
       this.loadData(expression, this.params);
-    } else {
+    } else if (this.data) {
       this.render(this.data);
     }
   }
@@ -128,18 +132,22 @@ export class ExpressionLoader {
     expression: string | ExpressionAST,
     params: IExpressionLoaderParams
   ): Promise<void> => {
-    this.loadingSubject.next();
-    if (this.dataHandler) {
+    if (this.dataHandler && this.dataHandler.isPending) {
+      this.ignoreNextResponse = true;
       this.dataHandler.cancel();
     }
     this.setParams(params);
     this.dataHandler = new ExpressionDataHandler(expression, params);
+    if (!params.inspectorAdapters) params.inspectorAdapters = this.dataHandler.inspect();
     const data = await this.dataHandler.getData();
+    if (this.ignoreNextResponse) {
+      this.ignoreNextResponse = false;
+      return;
+    }
     this.dataSubject.next(data);
   };
 
   private render(data: Data): void {
-    this.loadingSubject.next();
     this.renderHandler.render(data, this.params.extraHandlers);
   }
 
@@ -148,23 +156,16 @@ export class ExpressionLoader {
       return;
     }
 
-    if (params.searchContext && this.params.searchContext) {
+    if (params.searchContext) {
       this.params.searchContext = _.defaults(
         {},
         params.searchContext,
-        this.params.searchContext
+        this.params.searchContext || {}
       ) as any;
     }
     if (params.extraHandlers && this.params) {
       this.params.extraHandlers = params.extraHandlers;
     }
-
-    if (!Object.keys(this.params).length) {
-      this.params = {
-        ...params,
-        searchContext: { type: 'kibana_context', ...(params.searchContext || {}) },
-      };
-    }
   }
 }
 

diff --git a/src/legacy/core_plugins/interpreter/public/functions/esaggs.ts b/src/legacy/core_plugins/interpreter/public/functions/esaggs.ts
@@ -22,25 +22,46 @@ import { i18n } from '@kbn/i18n';
 import { AggConfigs } from 'ui/agg_types/agg_configs';
 import { createFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import chrome from 'ui/chrome';
-import { TimeRange } from 'src/plugins/data/public';
+
+import { Query, TimeRange, esFilters } from 'src/plugins/data/public';
 import { SearchSource } from '../../../../ui/public/courier/search_source';
-import { FilterBarQueryFilterProvider } from '../../../../ui/public/filter_manager/query_filter';
+// @ts-ignore
+import {
+  FilterBarQueryFilterProvider,
+  QueryFilter,
+} from '../../../../ui/public/filter_manager/query_filter';
+
 import { buildTabularInspectorData } from '../../../../ui/public/inspector/build_tabular_inspector_data';
 import {
   getRequestInspectorStats,
   getResponseInspectorStats,
 } from '../../../../ui/public/courier/utils/courier_inspector_utils';
 import { calculateObjectHash } from '../../../../ui/public/vis/lib/calculate_object_hash';
 import { getTime } from '../../../../ui/public/timefilter';
-import { RequestHandlerParams } from '../../../../ui/public/visualize/loader/embedded_visualize_handler';
-import { KibanaContext, KibanaDatatable } from '../../common';
-import { ExpressionFunction, KibanaDatatableColumn } from '../../types';
-import { start as data } from '../../../data/public/legacy';
+
+export interface RequestHandlerParams {
+  searchSource: SearchSource;
+  aggs: AggConfigs;
+  timeRange?: TimeRange;
+  query?: Query;
+  filters?: esFilters.Filter[];
+  forceFetch: boolean;
+  queryFilter: QueryFilter;
+  uiState?: PersistedState;
+  partialRows?: boolean;
+  inspectorAdapters: Adapters;
+  metricsAtAllLevels?: boolean;
+  visParams?: any;
+  abortSignal?: AbortSignal;
+}
 
 // @ts-ignore
 import { tabifyAggResponse } from '../../../../ui/public/agg_response/tabify/tabify';
-// @ts-ignore
-import { SearchSourceProvider } from '../../../../ui/public/courier/search_source';
+import { KibanaContext, KibanaDatatable } from '../../common';
+import { ExpressionFunction, KibanaDatatableColumn } from '../../types';
+import { start as data } from '../../../data/public/legacy';
+import { PersistedState } from '../../../../ui/public/persisted_state';
+import { Adapters } from '../../../../../plugins/inspector/public';
 
 const name = 'esaggs';
 

diff --git a/...rpreter/public/renderers/visualization.ts → ...preter/public/renderers/visualization.tsx b/...rpreter/public/renderers/visualization.ts → ...preter/public/renderers/visualization.tsx
@@ -18,9 +18,11 @@
  */
 
 import chrome from 'ui/chrome';
-import { visualizationLoader } from 'ui/visualize/loader/visualization_loader';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
 // @ts-ignore
-import { VisProvider } from 'ui/visualize/loader/vis';
+import { VisProvider } from '../../../../ui/public/visualize/loader/vis';
+import { Visualization } from '../../../../ui/public/visualize/components';
 
 export const visualization = () => ({
   name: 'visualization',
@@ -50,17 +52,27 @@ export const visualization = () => ({
         type: visType,
         params: visConfig,
       });
-      handlers.vis.eventsSubject = handlers.eventsSubject;
     }
 
+    handlers.vis.eventsSubject = { next: handlers.event };
+
     const uiState = handlers.uiState || handlers.vis.getUiState();
 
-    handlers.onDestroy(() => visualizationLoader.destroy());
+    handlers.onDestroy(() => {
+      unmountComponentAtNode(domNode);
+    });
 
-    await visualizationLoader
-      .render(domNode, handlers.vis, visData, handlers.vis.params, uiState, params)
-      .then(() => {
-        if (handlers.done) handlers.done();
-      });
+    const listenOnChange = params ? params.listenOnChange : false;
+    render(
+      <Visualization
+        vis={handlers.vis}
+        visData={visData}
+        visParams={handlers.vis.params}
+        uiState={uiState}
+        listenOnChange={listenOnChange}
+        onInit={handlers.done}
+      />,
+      domNode
+    );
   },
 });
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -42,13 +42,6 @@
     index-patterns="indexPatterns"
   ></filter-bar>
 
-  <apply-filters-popover
-    filters="appState.$newFilters"
-    on-cancel="onCancelApplyFilters"
-    on-submit="onApplyFilters"
-    index-patterns="indexPatterns"
-  ></apply-filters-popover>
-
   <div ng-show="getShouldShowEditHelp() || getShouldShowViewHelp()" class="dshStartScreen">
     <div class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--horizontalCenter">
       <icon type="'dashboardApp'" size="'xxl'" color="'subdued'"></icon>