diff --git a/test/functional/services/dashboard/add_panel.js b/test/functional/services/dashboard/add_panel.js index 7f3cbf564ce94e..8202c54caa92c3 100644 --- a/test/functional/services/dashboard/add_panel.js +++ b/test/functional/services/dashboard/add_panel.js @@ -148,15 +148,7 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) { } async addSavedSearch(searchName) { - log.debug(`addSavedSearch(${searchName})`); - - await this.ensureAddPanelIsShowing(); - await this.toggleFilter('search'); - await this.filterEmbeddableNames(searchName); - - await testSubjects.click(`savedObjectTitle${searchName.split(' ').join('-')}`); - await testSubjects.exists('addObjectToDashboardSuccess'); - await this.closeAddPanel(); + return this.addEmbeddable(searchName, 'search'); } async addSavedSearches(searches) { @@ -176,14 +168,18 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) { } async addVisualization(vizName) { - log.debug(`DashboardAddPanel.addVisualization(${vizName})`); + return this.addEmbeddable(vizName, 'visualization'); + } + + async addEmbeddable(embeddableName, embeddableType) { + log.debug(`DashboardAddPanel.addEmbeddable, name: ${embeddableName}, type: ${embeddableType}`); await this.ensureAddPanelIsShowing(); - await this.toggleFilter('visualization'); - await this.filterEmbeddableNames(`"${vizName.replace('-', ' ')}"`); - await testSubjects.click(`savedObjectTitle${vizName.split(' ').join('-')}`); + await this.toggleFilter(embeddableType); + await this.filterEmbeddableNames(`"${embeddableName.replace('-', ' ')}"`); + await testSubjects.click(`savedObjectTitle${embeddableName.split(' ').join('-')}`); await testSubjects.exists('addObjectToDashboardSuccess'); await this.closeAddPanel(); - return vizName; + return embeddableName; } async filterEmbeddableNames(name) { diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.js b/x-pack/plugins/maps/public/embeddable/map_embeddable.js index c26f7dda5a648f..e3d9c52ab47408 100644 --- a/x-pack/plugins/maps/public/embeddable/map_embeddable.js +++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.js @@ -24,12 +24,21 @@ import { } from '../actions/store_actions'; import { setReadOnly } from '../store/ui'; import { getInspectorAdapters } from '../store/non_serializable_instances'; +import { getMapCenter, getMapZoom } from '../selectors/map_selectors'; export class MapEmbeddable extends Embeddable { - constructor({ savedMap, editUrl, indexPatterns = [] }) { + constructor({ + onEmbeddableStateChanged, + embeddableConfig, + savedMap, + editUrl, + indexPatterns = [] + }) { super({ title: savedMap.title, editUrl, indexPatterns }); + this._onEmbeddableStateChanged = onEmbeddableStateChanged; + this._embeddableConfig = _.cloneDeep(embeddableConfig); this._savedMap = savedMap; this._store = createMapStore(); } @@ -73,8 +82,14 @@ export class MapEmbeddable extends Embeddable { */ render(domNode, containerState) { this._store.dispatch(setReadOnly(true)); - // todo get center and zoom from embeddable UI state - if (this._savedMap.mapStateJSON) { + + if (this._embeddableConfig.mapCenter) { + this._store.dispatch(setGotoWithCenter({ + lat: this._embeddableConfig.mapCenter.lat, + lon: this._embeddableConfig.mapCenter.lon, + zoom: this._embeddableConfig.mapCenter.zoom, + })); + } else if (this._savedMap.mapStateJSON) { const mapState = JSON.parse(this._savedMap.mapStateJSON); this._store.dispatch(setGotoWithCenter({ lat: mapState.center.lat, @@ -95,9 +110,16 @@ export class MapEmbeddable extends Embeddable { , domNode ); + + this._unsubscribeFromStore = this._store.subscribe(() => { + this._handleStoreChanges(); + }); } destroy() { + if (this._unsubscribeFromStore) { + this._unsubscribeFromStore(); + } this._savedMap.destroy(); if (this._domNode) { unmountComponentAtNode(this._domNode); @@ -111,4 +133,23 @@ export class MapEmbeddable extends Embeddable { filters: this._prevFilters }); } + + _handleStoreChanges() { + const center = getMapCenter(this._store.getState()); + const zoom = getMapZoom(this._store.getState()); + + if (!this._embeddableConfig.mapCenter + || this._embeddableConfig.mapCenter.lat !== center.lat + || this._embeddableConfig.mapCenter.lon !== center.lon + || this._embeddableConfig.mapCenter.zoom !== zoom) { + this._embeddableConfig.mapCenter = { + lat: center.lat, + lon: center.lon, + zoom: zoom, + }; + this._onEmbeddableStateChanged({ + customization: this._embeddableConfig + }); + } + } } diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js index c0abf160389e06..8ab8efde42d97b 100644 --- a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js +++ b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js @@ -48,6 +48,7 @@ export class MapEmbeddableFactory extends EmbeddableFactory { return new MapEmbeddable({ onEmbeddableStateChanged, + embeddableConfig: panelMetadata.embeddableConfig, savedMap, editUrl: chrome.addBasePath(createMapPath(panelMetadata.id)), indexPatterns, diff --git a/x-pack/test/functional/apps/maps/embeddable/embeddable_state.js b/x-pack/test/functional/apps/maps/embeddable/embeddable_state.js new file mode 100644 index 00000000000000..960d875c6b7b21 --- /dev/null +++ b/x-pack/test/functional/apps/maps/embeddable/embeddable_state.js @@ -0,0 +1,38 @@ +/* + * 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 expect from '@kbn/expect'; + +export default function ({ getPageObjects, getService }) { + const PageObjects = getPageObjects(['common', 'dashboard', 'maps']); + const kibanaServer = getService('kibanaServer'); + const dashboardAddPanel = getService('dashboardAddPanel'); + const DASHBOARD_NAME = 'verify_map_embeddable_state'; + + describe('embeddable state', () => { + + before(async () => { + await kibanaServer.uiSettings.replace({ + 'defaultIndex': 'c698b940-e149-11e8-a35a-370a8516603a' + }); + await PageObjects.common.navigateToApp('dashboard'); + await PageObjects.dashboard.clickNewDashboard(); + await dashboardAddPanel.addEmbeddable('document example', 'map'); + + await PageObjects.maps.setView(0.0, 0.0, 10); + await PageObjects.dashboard.saveDashboard(DASHBOARD_NAME); + await PageObjects.dashboard.loadSavedDashboard(DASHBOARD_NAME); + }); + + it('should render map with center and zoom from embeddable state', async () => { + const { lat, lon, zoom } = await PageObjects.maps.getView(); + expect(Math.round(lat)).to.equal(0); + expect(Math.round(lon)).to.equal(0); + expect(Math.round(zoom)).to.equal(10); + }); + + }); +} diff --git a/x-pack/test/functional/apps/maps/index.js b/x-pack/test/functional/apps/maps/index.js index e236ed23045f97..49b8611eff8696 100644 --- a/x-pack/test/functional/apps/maps/index.js +++ b/x-pack/test/functional/apps/maps/index.js @@ -10,8 +10,6 @@ export default function ({ loadTestFile, getService }) { const browser = getService('browser'); describe('maps app', function () { - this.tags('ciGroup3'); - before(async () => { await esArchiver.loadIfNeeded('logstash_functional'); await esArchiver.load('maps/data'); @@ -29,12 +27,21 @@ export default function ({ loadTestFile, getService }) { await esArchiver.unload('maps/kibana'); }); - loadTestFile(require.resolve('./sample_data')); - loadTestFile(require.resolve('./es_search_source')); - loadTestFile(require.resolve('./es_geo_grid_source')); - loadTestFile(require.resolve('./joins')); - loadTestFile(require.resolve('./add_layer_panel')); - loadTestFile(require.resolve('./layer_errors')); - loadTestFile(require.resolve('./embeddable/dashboard')); + describe('', function () { + this.tags('ciGroup7'); + loadTestFile(require.resolve('./saved_object_management')); + loadTestFile(require.resolve('./sample_data')); + }); + + describe('', function () { + this.tags('ciGroup3'); + loadTestFile(require.resolve('./es_search_source')); + loadTestFile(require.resolve('./es_geo_grid_source')); + loadTestFile(require.resolve('./joins')); + loadTestFile(require.resolve('./add_layer_panel')); + loadTestFile(require.resolve('./layer_errors')); + loadTestFile(require.resolve('./embeddable/dashboard')); + loadTestFile(require.resolve('./embeddable/embeddable_state')); + }); }); }