From 35911267465004cbd33815b20d9bb82b72dcc2cb Mon Sep 17 00:00:00 2001 From: ppisljar Date: Wed, 18 Mar 2020 23:27:38 -0700 Subject: [PATCH] updating based on luke's review --- .../public/visualize/np_ready/legacy_app.js | 131 +++++++----------- .../public/default_editor.tsx | 2 +- .../vis_type_table/public/vis_controller.ts | 1 - .../public/components/vis_editor.js | 5 +- .../public/editor_controller.js | 6 +- .../public/components/visualization_chart.tsx | 10 +- .../public/np_ready/public/expressions/vis.ts | 27 ++-- .../public/np_ready/public/vis.ts | 34 +++-- src/plugins/data/public/public.api.md | 30 ++-- 9 files changed, 113 insertions(+), 133 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/legacy_app.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/legacy_app.js index e090b192ade07..b0b1ae31a02a5 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/legacy_app.js +++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/legacy_app.js @@ -42,6 +42,49 @@ import { } from './breadcrumbs'; import { createSavedSearchesLoader } from '../../../../../../plugins/discover/public'; +const getResolvedResults = deps => { + const { core, data, visualizations } = deps; + + const results = {}; + + return savedVis => { + results.savedVis = savedVis; + return visualizations + .convertToSerializedVis(savedVis) + .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis)) + .then(vis => { + if (vis.type.setup) { + return vis.type.setup(vis).catch(() => vis); + } + return vis; + }) + .then(vis => { + results.vis = vis; + return deps.embeddable.getEmbeddableFactory('visualization').createFromObject(results.vis, { + timeRange: data.query.timefilter.timefilter.getTime(), + filters: data.query.filterManager.getFilters(), + }); + }) + .then(embeddableHandler => { + results.embeddableHandler = embeddableHandler; + if (results.vis.data.savedSearchId) { + return createSavedSearchesLoader({ + savedObjectsClient: core.savedObjects.client, + indexPatterns: data.indexPatterns, + chrome: core.chrome, + overlays: core.overlays, + }).get(results.vis.data.savedSearchId); + } + }) + .then(savedSearch => { + if (savedSearch) { + results.savedSearch = savedSearch; + } + return results; + }); + }; +}; + export function initVisualizeApp(app, deps) { initVisualizeAppDirective(app, deps); @@ -120,47 +163,9 @@ export function initVisualizeApp(app, deps) { ); } - const results = {}; - return ensureDefaultIndexPattern(core, data, history) .then(() => savedVisualizations.get($route.current.params)) - .then(savedObj => { - results.savedVis = savedObj; - return visualizations.convertToSerializedVis(savedObj); - }) - .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis)) - .then(vis => { - if (vis.type.setup) { - return vis.type.setup(vis).catch(() => vis); - } - return vis; - }) - .then(vis => { - results.vis = vis; - return deps.embeddable - .getEmbeddableFactory('visualization') - .createFromObject(results.vis, { - timeRange: data.query.timefilter.timefilter.getTime(), - filters: data.query.filterManager.getFilters(), - }); - }) - .then(embeddableHandler => { - results.embeddableHandler = embeddableHandler; - if (results.vis.data.savedSearchId) { - return createSavedSearchesLoader({ - savedObjectsClient: core.savedObjects.client, - indexPatterns: data.indexPatterns, - chrome: core.chrome, - overlays: core.overlays, - }).get(results.vis.data.savedSearchId); - } - }) - .then(savedSearch => { - if (savedSearch) { - results.savedSearch = savedSearch; - } - return results; - }) + .then(getResolvedResults(deps)) .catch( redirectWhenMissing({ history, @@ -177,57 +182,15 @@ export function initVisualizeApp(app, deps) { k7Breadcrumbs: getEditBreadcrumbs, resolve: { resolved: function($route, history) { - const { - chrome, - core, - data, - savedVisualizations, - visualizations, - toastNotifications, - } = deps; - - const results = {}; + const { chrome, core, data, savedVisualizations, toastNotifications } = deps; return ensureDefaultIndexPattern(core, data, history) .then(() => savedVisualizations.get($route.current.params.id)) .then(savedVis => { chrome.recentlyAccessed.add(savedVis.getFullPath(), savedVis.title, savedVis.id); - results.savedVis = savedVis; - return visualizations.convertToSerializedVis(savedVis); - }) - .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis)) - .then(vis => { - if (vis.type.setup) { - return vis.type.setup(vis).catch(() => vis); - } - return vis; - }) - .then(vis => { - results.vis = vis; - return deps.embeddable - .getEmbeddableFactory('visualization') - .createFromObject(results.vis, { - timeRange: data.query.timefilter.timefilter.getTime(), - filters: data.query.filterManager.getFilters(), - }); - }) - .then(embeddableHandler => { - results.embeddableHandler = embeddableHandler; - if (results.vis.data.savedSearchId) { - return createSavedSearchesLoader({ - savedObjectsClient: core.savedObjects.client, - indexPatterns: data.indexPatterns, - chrome: core.chrome, - overlays: core.overlays, - }).get(results.vis.data.savedSearchId); - } - }) - .then(savedSearch => { - if (savedSearch) { - results.savedSearch = savedSearch; - } - return results; + return savedVis; }) + .then(getResolvedResults(deps)) .catch( redirectWhenMissing({ history, diff --git a/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx b/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx index 81e06bdefc56a..99e8daed26557 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx @@ -54,7 +54,7 @@ function DefaultEditor({ embeddableHandler.render(visRef.current); setTimeout(() => { - eventEmitter.emit('dirtyStateChange', false); + eventEmitter.emit('apply'); }); return () => embeddableHandler.destroy(); diff --git a/src/legacy/core_plugins/vis_type_table/public/vis_controller.ts b/src/legacy/core_plugins/vis_type_table/public/vis_controller.ts index 41f4ea4f4922c..2feaad9f4e6b6 100644 --- a/src/legacy/core_plugins/vis_type_table/public/vis_controller.ts +++ b/src/legacy/core_plugins/vis_type_table/public/vis_controller.ts @@ -19,7 +19,6 @@ import angular, { IModule, auto, IRootScopeService, IScope, ICompileService } from 'angular'; import $ from 'jquery'; -import { isEqual } from 'lodash'; import { VisParams } from '../../visualizations/public'; import { npStart } from './legacy_imports'; diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js index 90ff25090ef81..b4845696fc8c0 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js @@ -78,7 +78,10 @@ export class VisEditor extends Component { updateVisState = debounce(() => { this.props.vis.params = this.state.model; - this.props.reloadVisualization(); + this.props.eventEmitter.emit('updateVis'); + this.props.eventEmitter.emit('dirtyStateChange', { + isDirty: false, + }); }, VIS_STATE_DEBOUNCE_DELAY); isValidKueryQuery = filterQuery => { diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/editor_controller.js b/src/legacy/core_plugins/vis_type_timeseries/public/editor_controller.js index 2c64403466c43..16a6348712065 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/editor_controller.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/editor_controller.js @@ -23,11 +23,11 @@ import { fetchIndexPatternFields } from './lib/fetch_fields'; import { getSavedObjectsClient, getUISettings, getI18n } from './services'; export class EditorController { - constructor(el, vis, embeddableHandler, reloadVisualization) { + constructor(el, vis, eventEmitter, embeddableHandler) { this.el = el; this.embeddableHandler = embeddableHandler; - this.reloadVisualization = reloadVisualization; + this.eventEmitter = eventEmitter; this.state = { fields: [], @@ -77,7 +77,7 @@ export class EditorController { isEditorMode={true} appState={params.appState} embeddableHandler={this.embeddableHandler} - reloadVisualization={this.reloadVisualization} + eventEmitter={this.eventEmitter} /> , this.el diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/components/visualization_chart.tsx b/src/legacy/core_plugins/visualizations/public/np_ready/public/components/visualization_chart.tsx index 8a54e071dc8a1..fcfbc8445952c 100644 --- a/src/legacy/core_plugins/visualizations/public/np_ready/public/components/visualization_chart.tsx +++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/components/visualization_chart.tsx @@ -43,7 +43,6 @@ class VisualizationChart extends React.Component { vis: ExprVis; visParams: any; visData: any; - container: HTMLElement; }>; private renderSubscription: Rx.Subscription; @@ -54,7 +53,7 @@ class VisualizationChart extends React.Component { const render$ = this.renderSubject.asObservable().pipe(share()); const success$ = render$.pipe( - filter(({ vis, visData }) => vis && (!vis.type!.requiresSearch || visData)), + filter(({ vis, visData }) => vis && (!vis.type.requiresSearch || visData)), debounceTime(100), switchMap(async ({ vis, visData, visParams }) => { if (!this.visualization) { @@ -79,10 +78,10 @@ class VisualizationChart extends React.Component { return (

- {this.props.vis.type!.title} visualization, not yet accessible + {this.props.vis.type.title} visualization, not yet accessible

@@ -96,7 +95,7 @@ class VisualizationChart extends React.Component { } const { vis } = this.props; - const Visualization = vis.type!.visualization; + const Visualization = vis.type.visualization; this.visualization = new Visualization(this.chartDiv.current, vis); @@ -139,7 +138,6 @@ class VisualizationChart extends React.Component { vis: this.props.vis, visData: this.props.visData, visParams: this.props.visParams, - container: this.containerDiv.current, }); } } diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/expressions/vis.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/expressions/vis.ts index a3d88502b490a..3b0458a6c8dcc 100644 --- a/src/legacy/core_plugins/visualizations/public/np_ready/public/expressions/vis.ts +++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/expressions/vis.ts @@ -52,7 +52,7 @@ export interface ExprVisAPI { export class ExprVis extends EventEmitter { public title: string = ''; - public type?: VisType; + public type: VisType; public params: VisParams = {}; public sessionState: Record = {}; public API: ExprVisAPI; @@ -62,6 +62,7 @@ export class ExprVis extends EventEmitter { constructor(visState: ExprVisState = { type: 'histogram' }) { super(); + this.type = this.getType(visState.type); this.uiState = new PersistedState(); this.setState(visState); @@ -79,29 +80,33 @@ export class ExprVis extends EventEmitter { }; } - setState(state: ExprVisState) { - this.title = state.title || ''; - const type = state.type || this.type; + private getType(type: string | VisType) { if (_.isString(type)) { - this.type = getTypes().get(type); + return getTypes().get(type); if (!this.type) { throw new Error(`Invalid type "${type}"`); } } else { - this.type = type; + return type; } + } + setState(state: ExprVisState) { + this.title = state.title || ''; + if (state.type) { + this.type = this.getType(state.type); + } this.params = _.defaultsDeep( {}, _.cloneDeep(state.params || {}), - _.cloneDeep(this.type!.visConfig.defaults || {}) + _.cloneDeep(this.type.visConfig.defaults || {}) ); } getState() { return { title: this.title, - type: this.type!.name, + type: this.type.name, params: _.cloneDeep(this.params), }; } @@ -115,10 +120,10 @@ export class ExprVis extends EventEmitter { } isHierarchical() { - if (_.isFunction(this.type!.hierarchicalData)) { - return !!this.type!.hierarchicalData(this); + if (_.isFunction(this.type.hierarchicalData)) { + return !!this.type.hierarchicalData(this); } else { - return !!this.type!.hierarchicalData; + return !!this.type.hierarchicalData; } } diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts index 94084c8408004..c112714954b0c 100644 --- a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts +++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts @@ -84,30 +84,42 @@ export class Vis { public readonly uiState: PersistedState; constructor(visType: string, visState: SerializedVis = {} as any) { - this.type = getTypes().get(visType); - if (!this.type) { - throw new Error(`Invalid type "${visType}"`); - } - + this.type = this.getType(visType); + this.params = this.getParams(visState.params); this.uiState = new PersistedState(visState.uiState); this.id = visState.id; this.setState(visState || {}); } + private getType(visType: string) { + const type = getTypes().get(visType); + if (!type) { + throw new Error(`Invalid type "${visType}"`); + } + return type; + } + + private getParams(params: VisParams) { + return defaults({}, cloneDeep(params || {}), cloneDeep(this.type.visConfig.defaults || {})); + } + setState(state: SerializedVis) { + let typeChanged = false; + if (state.type && this.type.name !== state.type) { + // @ts-ignore + this.type = this.getType(state.type); + typeChanged = true; + } if (state.title !== undefined) { this.title = state.title; } if (state.description !== undefined) { this.description = state.description; } - - this.params = defaults( - {}, - cloneDeep(state.params || {}), - cloneDeep(this.type.visConfig.defaults || {}) - ); + if (state.params || typeChanged) { + this.params = this.getParams(state.params); + } // move to migration script updateVisualizationConfig(state.params, this.params); diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md index b823b237d0e17..e519105ec4815 100644 --- a/src/plugins/data/public/public.api.md +++ b/src/plugins/data/public/public.api.md @@ -1844,21 +1844,21 @@ export type TSearchStrategyProvider = (context: ISearc // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "flattenHitWrapper" needs to be exported by the entry point index.d.ts // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "getRoutes" needs to be exported by the entry point index.d.ts // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "formatHitProvider" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:379:20 - (ae-forgotten-export) The symbol "getRequestInspectorStats" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:379:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:379:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:379:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:384:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:385:1 - (ae-forgotten-export) The symbol "convertDateRangeToString" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:387:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:396:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:397:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:398:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:401:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:402:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:405:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:406:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts -// src/plugins/data/public/index.ts:409:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:380:20 - (ae-forgotten-export) The symbol "getRequestInspectorStats" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:380:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:380:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:380:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:385:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:386:1 - (ae-forgotten-export) The symbol "convertDateRangeToString" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:388:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:397:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:398:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:399:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:402:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:403:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:406:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:407:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts +// src/plugins/data/public/index.ts:410:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts // src/plugins/data/public/query/state_sync/connect_to_query_state.ts:33:33 - (ae-forgotten-export) The symbol "FilterStateStore" needs to be exported by the entry point index.d.ts // src/plugins/data/public/query/state_sync/connect_to_query_state.ts:37:1 - (ae-forgotten-export) The symbol "QueryStateChange" needs to be exported by the entry point index.d.ts // src/plugins/data/public/types.ts:52:5 - (ae-forgotten-export) The symbol "createFiltersFromEvent" needs to be exported by the entry point index.d.ts