From eaa94f0cf3d84974292c75d2868827566521d874 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 8 Dec 2017 15:21:50 +0100 Subject: [PATCH] Use visualize loader for dashboards (#15444) * Use visualize loader to in visualize embeddable * Remove old template * Fix broken property name --- .../visualize_embeddable_factory.js | 84 ++++++++++--------- .../visualize_embeddable_factory_provider.js | 4 +- .../embeddable/visualize_template.html | 11 --- 3 files changed, 44 insertions(+), 55 deletions(-) delete mode 100644 src/core_plugins/kibana/public/visualize/embeddable/visualize_template.html diff --git a/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js b/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js index 442515b3af0fc..339b1b980c6ee 100644 --- a/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js +++ b/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js @@ -1,7 +1,5 @@ -import angular from 'angular'; -import 'ui/visualize'; +import { getVisualizeLoader } from 'ui/visualize/loader'; -import visualizationTemplate from './visualize_template.html'; import { UtilsBrushEventProvider as utilsBrushEventProvider } from 'ui/utils/brush_event'; import { FilterBarClickHandlerProvider as filterBarClickHandlerProvider } from 'ui/filter_bar/filter_bar_click_handler'; import { EmbeddableFactory, Embeddable } from 'ui/embeddable'; @@ -10,12 +8,10 @@ import { PersistedState } from 'ui/persisted_state'; import chrome from 'ui/chrome'; export class VisualizeEmbeddableFactory extends EmbeddableFactory { - constructor($compile, $rootScope, visualizeLoader, timefilter, Notifier, Promise, Private, config) { + constructor(savedVisualizations, timefilter, Notifier, Promise, Private, config) { super(); this._config = config; - this.$compile = $compile; - this.visualizeLoader = visualizeLoader; - this.$rootScope = $rootScope; + this.savedVisualizations = savedVisualizations; this.name = 'visualization'; this.Promise = Promise; this.brushEvent = utilsBrushEventProvider(timefilter); @@ -23,14 +19,15 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory { } getEditPath(panelId) { - return this.visualizeLoader.urlFor(panelId); + return this.savedVisualizations.urlFor(panelId); } render(domNode, panel, container) { - const visualizeScope = this.$rootScope.$new(); - visualizeScope.editUrl = this.getEditPath(panel.id); - return this.visualizeLoader.get(panel.id) - .then(savedObject => { + const editUrl = this.getEditPath(panel.id); + + const waitFor = [ getVisualizeLoader(), this.savedVisualizations.get(panel.id) ]; + return this.Promise.all(waitFor) + .then(([loader, savedObject]) => { const isLabsEnabled = this._config.get('visualize:enableLabs'); if (!isLabsEnabled && savedObject.vis.type.stage === 'lab') { @@ -46,52 +43,57 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory { }); } + let panelTitle; if (!container.getHidePanelTitles()) { - visualizeScope.sharedItemTitle = panel.title !== undefined ? panel.title : savedObject.title; + panelTitle = panel.title !== undefined ? panel.title : savedObject.title; } - visualizeScope.savedObj = savedObject; - visualizeScope.panel = panel; const parsedUiState = savedObject.uiStateJSON ? JSON.parse(savedObject.uiStateJSON) : {}; - visualizeScope.uiState = new PersistedState({ + const uiState = new PersistedState({ ...parsedUiState, ...panel.embeddableConfig, }); const uiStateChangeHandler = () => { - visualizeScope.panel = container.updatePanel( - visualizeScope.panel.panelIndex, - { embeddableConfig: visualizeScope.uiState.toJSON() } + panel = container.updatePanel( + panel.panelIndex, + { embeddableConfig: uiState.toJSON() } ); }; - visualizeScope.uiState.on('change', uiStateChangeHandler); - - visualizeScope.savedObj.vis.setUiState(visualizeScope.uiState); - - visualizeScope.savedObj.vis.listeners.click = this.filterBarClickHandler(container.getAppState()); - visualizeScope.savedObj.vis.listeners.brush = this.brushEvent(container.getAppState()); - - // The chrome is permanently hidden in "embed mode" in which case we don't want to show the spy pane, since - // we deem that situation to be more public facing and want to hide more detailed information. - visualizeScope.getShouldShowSpyPane = () => !chrome.getIsChromePermanentlyHidden(); - - container.registerPanelIndexPattern(panel.panelIndex, visualizeScope.savedObj.vis.indexPattern); - - const visualizationInstance = this.$compile(visualizationTemplate)(visualizeScope); - const rootNode = angular.element(domNode); - rootNode.append(visualizationInstance); + uiState.on('change', uiStateChangeHandler); + + savedObject.vis.setUiState(uiState); + + savedObject.vis.listeners.click = this.filterBarClickHandler(container.getAppState()); + savedObject.vis.listeners.brush = this.brushEvent(container.getAppState()); + + container.registerPanelIndexPattern(panel.panelIndex, savedObject.vis.indexPattern); + + const handler = loader.embedVisualizationWithSavedObject(domNode, savedObject, { + uiState: uiState, + // Append visualization to container instead of replacing its content + append: true, + cssClass: `panel-content ${savedObject.vis.type.name}`, + // The chrome is permanently hidden in "embed mode" in which case we don't want to show the spy pane, since + // we deem that situation to be more public facing and want to hide more detailed information. + showSpyPanel: !chrome.getIsChromePermanentlyHidden(), + dataAttrs: { + 'shared-item': '', + title: panelTitle, + description: savedObject.description, + } + }); this.addDestroyEmeddable(panel.panelIndex, () => { - visualizeScope.uiState.off('change', uiStateChangeHandler); - visualizationInstance.remove(); - visualizeScope.savedObj.destroy(); - visualizeScope.$destroy(); + uiState.off('change', uiStateChangeHandler); + handler.getElement().remove(); + savedObject.destroy(); + handler.destroy(); }); return new Embeddable({ title: savedObject.title, - editUrl: visualizeScope.editUrl + editUrl: editUrl }); }); } } - diff --git a/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory_provider.js b/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory_provider.js index d8997c4e27628..e36de4c739528 100644 --- a/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory_provider.js +++ b/src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory_provider.js @@ -3,15 +3,13 @@ import { EmbeddableFactoriesRegistryProvider } from 'ui/embeddable/embeddable_fa export function visualizeEmbeddableFactoryProvider(Private) { const VisualizeEmbeddableFactoryProvider = ( - $compile, - $rootScope, savedVisualizations, timefilter, Notifier, Promise, Private, config) => { - return new VisualizeEmbeddableFactory($compile, $rootScope, savedVisualizations, timefilter, Notifier, Promise, Private, config); + return new VisualizeEmbeddableFactory(savedVisualizations, timefilter, Notifier, Promise, Private, config); }; return Private(VisualizeEmbeddableFactoryProvider); } diff --git a/src/core_plugins/kibana/public/visualize/embeddable/visualize_template.html b/src/core_plugins/kibana/public/visualize/embeddable/visualize_template.html deleted file mode 100644 index c70ee3ba6e012..0000000000000 --- a/src/core_plugins/kibana/public/visualize/embeddable/visualize_template.html +++ /dev/null @@ -1,11 +0,0 @@ - -