diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts index ef0cfdf0b4742..f3619fd1bd23e 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.ts +++ b/x-pack/plugins/maps/public/actions/map_actions.ts @@ -14,9 +14,11 @@ import { Filter, Query, TimeRange } from 'src/plugins/data/public'; import { MapStoreState } from '../reducers/store'; import { getDataFilters, + getFilters, getMapSettings, getWaitingForMapReadyLayerListRaw, getQuery, + getTimeFilters, } from '../selectors/map_selectors'; import { CLEAR_GOTO, @@ -217,13 +219,13 @@ export function setQuery({ dispatch({ type: SET_QUERY, - timeFilters, + timeFilters: timeFilters ? timeFilters : getTimeFilters(getState()), query: { - ...query, + ...(query ? query : getQuery(getState())), // ensure query changes to trigger re-fetch when "Refresh" clicked queryLastTriggeredAt: refresh ? generateQueryTimestamp() : prevTriggeredAt, }, - filters, + filters: filters ? filters : getFilters(getState()), }); if (getMapSettings(getState()).autoFitToDataBounds) { diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts index 8fb0ecb50b28b..5b73cd9e77201 100644 --- a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts +++ b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts @@ -48,7 +48,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition { const { addLayerWithoutDataSync, createMapStore, - getIndexPatternService, + getIndexPatternsFromIds, getQueryableUniqueIndexPatternIds, } = await lazyLoadMapModules(); const store = createMapStore(); @@ -66,17 +66,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition { ); } - const promises = queryableIndexPatternIds.map(async (indexPatternId) => { - try { - // @ts-ignore - return await getIndexPatternService().get(indexPatternId); - } catch (error) { - // Unable to load index pattern, better to not throw error so map embeddable can render - // Error will be surfaced by map embeddable since it too will be unable to locate the index pattern - return null; - } - }); - const indexPatterns = await Promise.all(promises); + const indexPatterns = await getIndexPatternsFromIds(queryableIndexPatternIds); return _.compact(indexPatterns) as IIndexPattern[]; } diff --git a/x-pack/plugins/maps/public/index_pattern_util.ts b/x-pack/plugins/maps/public/index_pattern_util.ts index e65e37ef19809..4b4bfb41990b9 100644 --- a/x-pack/plugins/maps/public/index_pattern_util.ts +++ b/x-pack/plugins/maps/public/index_pattern_util.ts @@ -30,11 +30,17 @@ export function getGeoTileAggNotSupportedReason(field: IFieldType): string | nul export async function getIndexPatternsFromIds( indexPatternIds: string[] = [] ): Promise { - const promises: Array> = []; - indexPatternIds.forEach((id) => { - promises.push(getIndexPatternService().get(id)); + const promises: IndexPattern[] = []; + indexPatternIds.forEach(async (indexPatternId) => { + try { + // @ts-ignore + promises.push(getIndexPatternService().get(indexPatternId)); + } catch (error) { + // Unable to load index pattern, better to not throw error so map can render + // Error will be surfaced by layer since it too will be unable to locate the index pattern + return null; + } }); - return await Promise.all(promises); } diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts index 12d6d75ac57ba..b77bf208c5865 100644 --- a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts +++ b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts @@ -8,6 +8,7 @@ import { AnyAction } from 'redux'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { IndexPatternsService } from 'src/plugins/data/public/index_patterns'; import { ReactElement } from 'react'; +import { IndexPattern } from 'src/plugins/data/public'; import { Embeddable, IContainer } from '../../../../../src/plugins/embeddable/public'; import { LayerDescriptor } from '../../common/descriptor_types'; import { MapStore, MapStoreState } from '../reducers/store'; @@ -44,8 +45,9 @@ interface LazyLoadedMapModules { indexPatternId: string, indexPatternTitle: string ) => LayerDescriptor[]; - registerLayerWizard(layerWizard: LayerWizard): void; + registerLayerWizard: (layerWizard: LayerWizard) => void; registerSource(entry: SourceRegistryEntry): void; + getIndexPatternsFromIds: (indexPatternIds: string[]) => Promise; } export async function lazyLoadMapModules(): Promise { @@ -71,6 +73,7 @@ export async function lazyLoadMapModules(): Promise { createSecurityLayerDescriptors, registerLayerWizard, registerSource, + getIndexPatternsFromIds, } = await import('./lazy'); resolve({ @@ -88,6 +91,7 @@ export async function lazyLoadMapModules(): Promise { createSecurityLayerDescriptors, registerLayerWizard, registerSource, + getIndexPatternsFromIds, }); }); return loadModulesPromise; diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts index c839122ab90b1..e55160383a8f3 100644 --- a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts +++ b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts @@ -21,3 +21,4 @@ export * from '../../routing/maps_router'; export * from '../../classes/layers/solution_layers/security'; export { registerLayerWizard } from '../../classes/layers/layer_wizard_registry'; export { registerSource } from '../../classes/sources/source_registry'; +export { getIndexPatternsFromIds } from '../../index_pattern_util'; diff --git a/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js index cf6f51c8aeacf..5d02160fc3eb5 100644 --- a/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js +++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js @@ -3,7 +3,10 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ + import _ from 'lodash'; +import rison from 'rison-node'; +import { i18n } from '@kbn/i18n'; // Import each layer type, even those not used, to init in registry import '../../classes/sources/wms_source'; import '../../classes/sources/ems_file_source'; @@ -16,7 +19,7 @@ import { KibanaTilemapSource } from '../../classes/sources/kibana_tilemap_source import { TileLayer } from '../../classes/layers/tile_layer/tile_layer'; import { EMSTMSSource } from '../../classes/sources/ems_tms_source'; import { VectorTileLayer } from '../../classes/layers/vector_tile_layer/vector_tile_layer'; -import { getIsEmsEnabled } from '../../kibana_services'; +import { getIsEmsEnabled, getToasts } from '../../kibana_services'; import { getKibanaTileMap } from '../../meta'; export function getInitialLayers(layerListJSON, initialLayers = []) { @@ -41,3 +44,33 @@ export function getInitialLayers(layerListJSON, initialLayers = []) { return initialLayers; } + +export function getInitialLayersFromUrlParam() { + const locationSplit = window.location.href.split('?'); + if (locationSplit.length <= 1) { + return []; + } + const mapAppParams = new URLSearchParams(locationSplit[1]); + if (!mapAppParams.has('initialLayers')) { + return []; + } + + try { + let mapInitLayers = mapAppParams.get('initialLayers'); + if (mapInitLayers[mapInitLayers.length - 1] === '#') { + mapInitLayers = mapInitLayers.substr(0, mapInitLayers.length - 1); + } + return rison.decode_array(mapInitLayers); + } catch (e) { + getToasts().addWarning({ + title: i18n.translate('xpack.maps.initialLayers.unableToParseTitle', { + defaultMessage: `Initial layers not added to map`, + }), + text: i18n.translate('xpack.maps.initialLayers.unableToParseMessage', { + defaultMessage: `Unable to parse contents of 'initialLayers' parameter. Error: {errorMsg}`, + values: { errorMsg: e.message }, + }), + }); + return []; + } +} diff --git a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js index 2575bbb9df920..4692bb1db3477 100644 --- a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js +++ b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js @@ -10,20 +10,27 @@ import { enableFullScreen, openMapSettings, removePreviewLayers, - setRefreshConfig, setSelectedLayer, updateFlyout, } from '../../../actions'; import { FLYOUT_STATE } from '../../../reducers/ui'; import { getInspectorAdapters } from '../../../reducers/non_serializable_instances'; import { getFlyoutDisplay } from '../../../selectors/ui_selectors'; -import { hasDirtyState } from '../../../selectors/map_selectors'; +import { + getQuery, + getRefreshConfig, + getTimeFilters, + hasDirtyState, +} from '../../../selectors/map_selectors'; function mapStateToProps(state = {}) { return { isOpenSettingsDisabled: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE, inspectorAdapters: getInspectorAdapters(state), isSaveDisabled: hasDirtyState(state), + query: getQuery(state), + refreshConfig: getRefreshConfig(state), + timeFilters: getTimeFilters(state), }; } @@ -34,7 +41,6 @@ function mapDispatchToProps(dispatch) { dispatch(updateFlyout(FLYOUT_STATE.NONE)); dispatch(removePreviewLayers()); }, - setRefreshStoreConfig: (refreshConfig) => dispatch(setRefreshConfig(refreshConfig)), enableFullScreen: () => dispatch(enableFullScreen()), openMapSettings: () => dispatch(openMapSettings()), }; diff --git a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js index 2340e3716547b..be474b43da81a 100644 --- a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js +++ b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js @@ -29,18 +29,16 @@ export function MapsTopNavMenu({ onQuerySaved, onSavedQueryUpdated, savedQuery, - time, + timeFilters, refreshConfig, - setRefreshConfig, - setRefreshStoreConfig, + onRefreshConfigChange, indexPatterns, - updateFiltersAndDispatch, + onFiltersChange, isSaveDisabled, closeFlyout, enableFullScreen, openMapSettings, inspectorAdapters, - syncAppAndGlobalState, setBreadcrumbs, isOpenSettingsDisabled, }) { @@ -75,31 +73,20 @@ export function MapsTopNavMenu({ }); }; - const onRefreshChange = function ({ isPaused, refreshInterval }) { - const newRefreshConfig = { - isPaused, - interval: isNaN(refreshInterval) ? refreshConfig.interval : refreshInterval, - }; - setRefreshConfig(newRefreshConfig, () => { - setRefreshStoreConfig(newRefreshConfig); - syncAppAndGlobalState(); - }); - }; - return ( { return hasUnsavedChanges(state, savedMap, initialLayerListConfig); }, + query: getQuery(state), + timeFilters: getTimeFilters(state), }; } function mapDispatchToProps(dispatch) { return { - dispatchSetQuery: (refresh, filters, query, time) => { + dispatchSetQuery: ({ refresh, filters, query, timeFilters }) => { dispatch( setQuery({ filters, query, - timeFilters: time, + timeFilters, refresh, }) ); diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js b/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js index b26c44df25104..7578d2fd3d3ea 100644 --- a/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js +++ b/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js @@ -9,15 +9,9 @@ import { i18n } from '@kbn/i18n'; import 'mapbox-gl/dist/mapbox-gl.css'; import _ from 'lodash'; import { DEFAULT_IS_LAYER_TOC_OPEN } from '../../../reducers/ui'; -import { - getIndexPatternService, - getToasts, - getData, - getCoreChrome, -} from '../../../kibana_services'; +import { getData, getCoreChrome } from '../../../kibana_services'; import { copyPersistentState } from '../../../reducers/util'; -import { getInitialLayers } from '../../bootstrap/get_initial_layers'; -import rison from 'rison-node'; +import { getInitialLayers, getInitialLayersFromUrlParam } from '../../bootstrap/get_initial_layers'; import { getInitialTimeFilters } from '../../bootstrap/get_initial_time_filters'; import { getInitialRefreshConfig } from '../../bootstrap/get_initial_refresh_config'; import { getInitialQuery } from '../../bootstrap/get_initial_query'; @@ -25,13 +19,14 @@ import { MapsTopNavMenu } from '../../page_elements/top_nav_menu'; import { getGlobalState, updateGlobalState, - useGlobalStateSyncing, + startGlobalStateSyncing, } from '../../state_syncing/global_sync'; import { AppStateManager } from '../../state_syncing/app_state_manager'; -import { useAppStateSyncing } from '../../state_syncing/app_sync'; +import { startAppStateSyncing } from '../../state_syncing/app_sync'; import { esFilters } from '../../../../../../../src/plugins/data/public'; import { MapContainer } from '../../../connected_components/map_container'; import { goToSpecifiedPath } from '../../maps_router'; +import { getIndexPatternsFromIds } from '../../../index_pattern_util'; const unsavedChangesWarning = i18n.translate('xpack.maps.breadCrumbs.unsavedChangesWarning', { defaultMessage: 'Your map has unsaved changes. Are you sure you want to leave?', @@ -42,12 +37,12 @@ export class MapsAppView extends React.Component { _globalSyncChangeMonitorSubscription = null; _appSyncUnsubscribe = null; _appStateManager = new AppStateManager(); + _prevIndexPatternIds = null; constructor(props) { super(props); this.state = { indexPatterns: [], - prevIndexPatternIds: [], initialized: false, savedQuery: '', initialLayerListConfig: null, @@ -55,21 +50,15 @@ export class MapsAppView extends React.Component { } componentDidMount() { - // Init sync utils - // eslint-disable-next-line react-hooks/rules-of-hooks - this._globalSyncUnsubscribe = useGlobalStateSyncing(); - // eslint-disable-next-line react-hooks/rules-of-hooks - this._appSyncUnsubscribe = useAppStateSyncing(this._appStateManager); + this._isMounted = true; + + this._globalSyncUnsubscribe = startGlobalStateSyncing(); + this._appSyncUnsubscribe = startAppStateSyncing(this._appStateManager); this._globalSyncChangeMonitorSubscription = getData().query.state$.subscribe( this._updateFromGlobalState ); - // Check app state in case of refresh - const initAppState = this._appStateManager.getAppState(); - this._onQueryChange(initAppState); - if (initAppState.savedQuery) { - this._updateStateFromSavedQuery(initAppState.savedQuery); - } + this._updateStateFromSavedQuery(this._appStateManager.getAppState().savedQuery); this._initMap(); @@ -86,11 +75,12 @@ export class MapsAppView extends React.Component { } componentDidUpdate() { - // TODO: Handle null when converting to TS - this._handleStoreChanges(); + this._updateIndexPatterns(); } componentWillUnmount() { + this._isMounted = false; + if (this._globalSyncUnsubscribe) { this._globalSyncUnsubscribe(); } @@ -138,183 +128,96 @@ export class MapsAppView extends React.Component { }; _updateFromGlobalState = ({ changes, state: globalState }) => { - if (!changes || !globalState) { + if (!this.state.initialized || !changes || !globalState) { return; } - const newState = {}; - Object.keys(changes).forEach((key) => { - if (changes[key]) { - newState[key] = globalState[key]; - } - }); - this.setState(newState, () => { - this._appStateManager.setQueryAndFilters({ - filters: getData().query.filterManager.getAppFilters(), - }); - const { time, filters, refreshInterval } = globalState; - this.props.dispatchSetQuery(refreshInterval, filters, this.state.query, time); - }); + this._onQueryChange({ time: globalState.time, refresh: true }); }; - _getInitialLayersFromUrlParam() { - const locationSplit = window.location.href.split('?'); - if (locationSplit.length <= 1) { - return []; - } - const mapAppParams = new URLSearchParams(locationSplit[1]); - if (!mapAppParams.has('initialLayers')) { - return []; - } + async _updateIndexPatterns() { + const { nextIndexPatternIds } = this.props; - try { - let mapInitLayers = mapAppParams.get('initialLayers'); - if (mapInitLayers[mapInitLayers.length - 1] === '#') { - mapInitLayers = mapInitLayers.substr(0, mapInitLayers.length - 1); - } - return rison.decode_array(mapInitLayers); - } catch (e) { - getToasts().addWarning({ - title: i18n.translate('xpack.maps.initialLayers.unableToParseTitle', { - defaultMessage: `Initial layers not added to map`, - }), - text: i18n.translate('xpack.maps.initialLayers.unableToParseMessage', { - defaultMessage: `Unable to parse contents of 'initialLayers' parameter. Error: {errorMsg}`, - values: { errorMsg: e.message }, - }), - }); - return []; + if (_.isEqual(nextIndexPatternIds, this._prevIndexPatternIds)) { + return; } - } - async _updateIndexPatterns(nextIndexPatternIds) { - const indexPatterns = []; - const getIndexPatternPromises = nextIndexPatternIds.map(async (indexPatternId) => { - try { - const indexPattern = await getIndexPatternService().get(indexPatternId); - indexPatterns.push(indexPattern); - } catch (err) { - // unable to fetch index pattern - } - }); + this._prevIndexPatternIds = nextIndexPatternIds; - await Promise.all(getIndexPatternPromises); - this.setState({ - indexPatterns, - }); + const indexPatterns = await getIndexPatternsFromIds(nextIndexPatternIds); + if (this._isMounted) { + this.setState({ indexPatterns }); + } } - _handleStoreChanges = () => { - const { prevIndexPatternIds } = this.state; - const { nextIndexPatternIds } = this.props; + _onQueryChange = ({ filters, query, time, refresh = false }) => { + const { filterManager } = getData().query; - if (nextIndexPatternIds !== prevIndexPatternIds) { - this.setState({ prevIndexPatternIds: nextIndexPatternIds }); - this._updateIndexPatterns(nextIndexPatternIds); + if (filters) { + filterManager.setFilters(filters); } - }; - - _getAppStateFilters = () => { - return this._appStateManager.getFilters() || []; - }; - _syncAppAndGlobalState = () => { - const { query, time, initialized } = this.state; - const { refreshConfig } = this.props; - const { filterManager } = getData().query; + this.props.dispatchSetQuery({ + refresh, + filters: filterManager.getFilters(), + query, + timeFilters: time, + }); - // appState + // sync appState this._appStateManager.setQueryAndFilters({ - query: query, filters: filterManager.getAppFilters(), + query, }); - // globalState - const refreshInterval = { - pause: refreshConfig.isPaused, - value: refreshConfig.interval, - }; - updateGlobalState( - { - time: time, - refreshInterval, - filters: filterManager.getGlobalFilters(), - }, - !initialized - ); - this.setState({ refreshInterval }); + // sync globalState + const updatedGlobalState = { filters: filterManager.getGlobalFilters() }; + if (time) { + updatedGlobalState.time = time; + } + updateGlobalState(updatedGlobalState, !this.state.initialized); }; - _onQueryChange = async ({ filters, query, time, refresh }) => { - const { filterManager } = getData().query; - const { dispatchSetQuery } = this.props; - const newState = {}; - let newFilters; - if (filters) { - filterManager.setFilters(filters); // Maps and merges filters - newFilters = filterManager.getFilters(); + _initMapAndLayerSettings() { + const globalState = getGlobalState(); + const mapStateJSON = this.props.savedMap.mapStateJSON; + + let savedObjectFilters = []; + if (mapStateJSON) { + const mapState = JSON.parse(mapStateJSON); + if (mapState.filters) { + savedObjectFilters = mapState.filters; + } } + const appFilters = this._appStateManager.getFilters() || []; + + const query = getInitialQuery({ + mapStateJSON, + appState: this._appStateManager.getAppState(), + }); if (query) { - newState.query = query; - } - if (time) { - newState.time = time; + getData().query.queryString.setQuery(query); } - this.setState(newState, () => { - this._syncAppAndGlobalState(); - dispatchSetQuery( - refresh, - newFilters || this.props.filters, - query || this.state.query, - time || this.state.time - ); - }); - }; - _initQueryTimeRefresh() { - const { setRefreshConfig, savedMap } = this.props; - const { queryString } = getData().query; - // TODO: Handle null when converting to TS - const globalState = getGlobalState(); - const mapStateJSON = savedMap ? savedMap.mapStateJSON : undefined; - const newState = { - query: getInitialQuery({ - mapStateJSON, - appState: this._appStateManager.getAppState(), - }), + this._onQueryChange({ + filters: [..._.get(globalState, 'filters', []), ...appFilters, ...savedObjectFilters], + query, time: getInitialTimeFilters({ mapStateJSON, globalState, }), - refreshConfig: getInitialRefreshConfig({ + }); + + this._onRefreshConfigChange( + getInitialRefreshConfig({ mapStateJSON, globalState, - }), - }; - - if (newState.query) queryString.setQuery(newState.query); - this.setState({ query: newState.query, time: newState.time }); - updateGlobalState( - { - time: newState.time, - refreshInterval: { - value: newState.refreshConfig.interval, - pause: newState.refreshConfig.isPaused, - }, - }, - !this.state.initialized + }) ); - setRefreshConfig(newState.refreshConfig); - } - - _initMapAndLayerSettings() { - const { savedMap } = this.props; - // Get saved map & layer settings - this._initQueryTimeRefresh(); const layerList = getInitialLayers( - savedMap.layerListJSON, - this._getInitialLayersFromUrlParam() + this.props.savedMap.layerListJSON, + getInitialLayersFromUrlParam() ); this.props.replaceLayerList(layerList); this.setState({ @@ -322,20 +225,31 @@ export class MapsAppView extends React.Component { }); } - _updateFiltersAndDispatch = (filters) => { + _onFiltersChange = (filters) => { this._onQueryChange({ filters, }); }; - _onRefreshChange = ({ isPaused, refreshInterval }) => { - const { refreshConfig } = this.props; - const newRefreshConfig = { + // mapRefreshConfig: MapRefreshConfig + _onRefreshConfigChange(mapRefreshConfig) { + this.props.setRefreshConfig(mapRefreshConfig); + updateGlobalState( + { + refreshInterval: { + pause: mapRefreshConfig.isPaused, + value: mapRefreshConfig.interval, + }, + }, + !this.state.initialized + ); + } + + _onTopNavRefreshConfig = ({ isPaused, refreshInterval }) => { + this._onRefreshConfigChange({ isPaused, - interval: isNaN(refreshInterval) ? refreshConfig.interval : refreshInterval, - }; - this.setState({ refreshConfig: newRefreshConfig }, this._syncAppAndGlobalState); - this.props.setRefreshConfig(newRefreshConfig); + interval: refreshInterval, + }); }; _updateStateFromSavedQuery(savedQuery) { @@ -348,98 +262,55 @@ export class MapsAppView extends React.Component { const globalFilters = filterManager.getGlobalFilters(); const allFilters = [...savedQueryFilters, ...globalFilters]; - if (savedQuery.attributes.timefilter) { - if (savedQuery.attributes.timefilter.refreshInterval) { - this._onRefreshChange({ - isPaused: savedQuery.attributes.timefilter.refreshInterval.pause, - refreshInterval: savedQuery.attributes.timefilter.refreshInterval.value, - }); - } - this._onQueryChange({ - filters: allFilters, - query: savedQuery.attributes.query, - time: savedQuery.attributes.timefilter, - }); - } else { - this._onQueryChange({ - filters: allFilters, - query: savedQuery.attributes.query, + const refreshInterval = _.get(savedQuery, 'attributes.timefilter.refreshInterval'); + if (refreshInterval) { + this._onRefreshConfigChange({ + isPaused: refreshInterval.pause, + interval: refreshInterval.value, }); } + this._onQueryChange({ + filters: allFilters, + query: savedQuery.attributes.query, + time: savedQuery.attributes.timefilter, + }); } - _syncStoreAndGetFilters() { - const { - savedMap, - setGotoWithCenter, - setMapSettings, - setIsLayerTOCOpen, - setOpenTOCDetails, - } = this.props; - let savedObjectFilters = []; - if (savedMap.mapStateJSON) { - const mapState = JSON.parse(savedMap.mapStateJSON); - setGotoWithCenter({ + _initMap() { + this._initMapAndLayerSettings(); + + this.props.clearUi(); + + if (this.props.savedMap.mapStateJSON) { + const mapState = JSON.parse(this.props.savedMap.mapStateJSON); + this.props.setGotoWithCenter({ lat: mapState.center.lat, lon: mapState.center.lon, zoom: mapState.zoom, }); - if (mapState.filters) { - savedObjectFilters = mapState.filters; - } if (mapState.settings) { - setMapSettings(mapState.settings); + this.props.setMapSettings(mapState.settings); } } - if (savedMap.uiStateJSON) { - const uiState = JSON.parse(savedMap.uiStateJSON); - setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN)); - setOpenTOCDetails(_.get(uiState, 'openTOCDetails', [])); + if (this.props.savedMap.uiStateJSON) { + const uiState = JSON.parse(this.props.savedMap.uiStateJSON); + this.props.setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN)); + this.props.setOpenTOCDetails(_.get(uiState, 'openTOCDetails', [])); } - return savedObjectFilters; - } - async _initMap() { - const { clearUi, savedMap } = this.props; - // TODO: Handle null when converting to TS - const globalState = getGlobalState(); - this._initMapAndLayerSettings(); - clearUi(); - - const savedObjectFilters = this._syncStoreAndGetFilters(savedMap); - await this._onQueryChange({ - filters: [ - ..._.get(globalState, 'filters', []), - ...this._getAppStateFilters(), - ...savedObjectFilters, - ], - }); this.setState({ initialized: true }); } _renderTopNav() { - const { query, time, savedQuery, indexPatterns } = this.state; - const { savedMap, refreshConfig, isFullScreen } = this.props; - - return !isFullScreen ? ( + return !this.props.isFullScreen ? ( { - this.setState( - { - refreshConfig: newConfig, - }, - callback - ); - }} - indexPatterns={indexPatterns} - updateFiltersAndDispatch={this._updateFiltersAndDispatch} + onRefreshConfigChange={this._onTopNavRefreshConfig} + indexPatterns={this.state.indexPatterns} + onFiltersChange={this._onFiltersChange} onQuerySaved={(query) => { this.setState({ savedQuery: query }); this._appStateManager.setQueryAndFilters({ savedQuery: query }); @@ -450,7 +321,6 @@ export class MapsAppView extends React.Component { this._appStateManager.setQueryAndFilters({ savedQuery: query }); this._updateStateFromSavedQuery(query); }} - syncAppAndGlobalState={this._syncAppAndGlobalState} setBreadcrumbs={this._setBreadcrumbs} /> ) : null; @@ -469,7 +339,7 @@ export class MapsAppView extends React.Component { newFilters.forEach((filter) => { filter.$state = { store: esFilters.FilterStateStore.APP_STATE }; }); - this._updateFiltersAndDispatch([...filters, ...newFilters]); + this._onFiltersChange([...filters, ...newFilters]); }} /> diff --git a/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js b/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js index 19118c6130805..4cdba13bd85d2 100644 --- a/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js +++ b/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js @@ -14,13 +14,13 @@ export class AppStateManager { _updated$ = new Subject(); setQueryAndFilters({ query, savedQuery, filters }) { - if (this._query !== query) { + if (query && this._query !== query) { this._query = query; } - if (this._savedQuery !== savedQuery) { + if (savedQuery && this._savedQuery !== savedQuery) { this._savedQuery = savedQuery; } - if (this._filters !== filters) { + if (filters && this._filters !== filters) { this._filters = filters; } this._updated$.next(); diff --git a/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js b/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js index 69d6dbbe0c4d3..8dd643607ba9c 100644 --- a/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js +++ b/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js @@ -10,7 +10,7 @@ import { map } from 'rxjs/operators'; import { getData } from '../../kibana_services'; import { kbnUrlStateStorage } from '../maps_router'; -export function useAppStateSyncing(appStateManager) { +export function startAppStateSyncing(appStateManager) { // get appStateContainer // sync app filters with app state container from data.query to state container const { query } = getData(); diff --git a/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts b/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts index b466f254e4d08..4e17241752f53 100644 --- a/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts +++ b/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts @@ -9,7 +9,7 @@ import { getData } from '../../kibana_services'; // @ts-ignore import { kbnUrlStateStorage } from '../maps_router'; -export function useGlobalStateSyncing() { +export function startGlobalStateSyncing() { const { stop } = syncQueryStateWithUrl(getData().query, kbnUrlStateStorage); return stop; }