From 9fafb54983d9dddb061c094abbc2939382dba61f Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 31 Jan 2020 16:03:59 -0500 Subject: [PATCH 1/3] [Maps] replace AppState angular service with NP counter parts --- .../maps/public/angular/map_controller.js | 58 +++++++++++++++---- 1 file changed, 48 insertions(+), 10 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index 5f058e2ba7806..427ca30919846 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -55,6 +55,11 @@ import { getInitialRefreshConfig } from './get_initial_refresh_config'; import { MAP_SAVED_OBJECT_TYPE, MAP_APP_PATH } from '../../common/constants'; import { npStart } from 'ui/new_platform'; import { esFilters } from '../../../../../../src/plugins/data/public'; +import { createHashHistory } from 'history'; +import { createKbnUrlStateStorage } from '../../../../../../src/plugins/kibana_utils/public'; +import { createStateContainer, syncState } from '../../../../../../src/plugins/kibana_utils/public'; + +const MAP_STATE_STORAGE_KEY = '_a'; const savedQueryService = npStart.plugins.data.query.savedQueries; @@ -65,16 +70,45 @@ const app = uiModules.get(MAP_APP_PATH, []); app.controller( 'GisMapController', ($scope, $route, kbnUrl, localStorage, AppState, globalState) => { + const { filterManager } = npStart.plugins.data.query; const savedMap = $route.current.locals.map; $scope.screenTitle = savedMap.title; - let unsubscribe; + let unsubscribeFromReduxStore; let initialLayerListConfig; + + const history = createHashHistory(); + const kbnUrlStateStorage = createKbnUrlStateStorage({ + history, + useHash: chrome.getUiSettingsClient().get('state:storeInSessionStorage'), + }); + const initialState = { + ...kbnUrlStateStorage.get(MAP_STATE_STORAGE_KEY), + }; + const transitions = { + setQuery: state => query => ({ ...state, query }), + setFilters: state => filters => ({ ...state, filters }), + setSavedQueryId: state => savedQueryId => ({ ...state, savedQuery: savedQueryId }), + }; + const stateContainer = createStateContainer(initialState, transitions); + const stateContainerChangeSub = stateContainer.state$.subscribe((newState) => { + console.log(`new: `, newState); + }); + const stateSyncRef = syncState({ + storageKey: MAP_STATE_STORAGE_KEY, + stateContainer: { + ...stateContainer, + }, + stateStorage: kbnUrlStateStorage, + }); + stateSyncRef.start(); + const $state = new AppState(); + const store = createMapStore(); function getAppStateFilters() { - return _.get($state, 'filters', []); + return _.get(stateContainer.get(), 'filters', []); } $scope.$listen(globalState, 'fetch_with_changes', diff => { @@ -101,9 +135,8 @@ app.controller( function syncAppAndGlobalState() { $scope.$evalAsync(() => { // appState - $state.query = $scope.query; - $state.filters = filterManager.getAppFilters(); - $state.save(); + stateContainer.transitions.setQuery($scope.query); + stateContainer.transitions.setFilters(filterManager.getAppFilters()); // globalState globalState.time = $scope.time; @@ -118,7 +151,7 @@ app.controller( $scope.query = getInitialQuery({ mapStateJSON: savedMap.mapStateJSON, - appState: $state, + appState: stateContainer.get(), userQueryLanguage: localStorage.get('kibana.userQueryLanguage'), }); $scope.time = getInitialTimeFilters({ @@ -188,7 +221,7 @@ app.controller( $scope.$watch('savedQuery', newSavedQuery => { if (!newSavedQuery) return; - $state.savedQuery = newSavedQuery.id; + stateContainer.transitions.setSavedQueryId(newSavedQuery.id); updateStateFromSavedQuery(newSavedQuery); }); @@ -301,7 +334,7 @@ app.controller( store.dispatch(setReadOnly(!capabilities.get().maps.save)); handleStoreChanges(store); - unsubscribe = store.subscribe(() => { + unsubscribeFromReduxStore = store.subscribe(() => { handleStoreChanges(store); }); @@ -401,10 +434,15 @@ app.controller( } $scope.$on('$destroy', () => { + stateContainerChangeSub.unsubscribe(); + if (stateSyncRef) { + stateSyncRef.stop(); + } + window.removeEventListener('beforeunload', beforeUnload); - if (unsubscribe) { - unsubscribe(); + if (unsubscribeFromReduxStore) { + unsubscribeFromReduxStore(); } const node = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID); if (node) { From 600dc1bb01ee2461a71f12c9e951aeec9f65179d Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 31 Jan 2020 16:29:22 -0500 Subject: [PATCH 2/3] get prevState in subscriber --- x-pack/legacy/plugins/maps/public/angular/map_controller.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index 427ca30919846..45fa4d78e10fe 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -58,6 +58,7 @@ import { esFilters } from '../../../../../../src/plugins/data/public'; import { createHashHistory } from 'history'; import { createKbnUrlStateStorage } from '../../../../../../src/plugins/kibana_utils/public'; import { createStateContainer, syncState } from '../../../../../../src/plugins/kibana_utils/public'; +import { pairwise } from 'rxjs/operators'; const MAP_STATE_STORAGE_KEY = '_a'; @@ -91,8 +92,9 @@ app.controller( setSavedQueryId: state => savedQueryId => ({ ...state, savedQuery: savedQueryId }), }; const stateContainer = createStateContainer(initialState, transitions); - const stateContainerChangeSub = stateContainer.state$.subscribe((newState) => { - console.log(`new: `, newState); + const stateContainerChangeSub = stateContainer.state$.pipe(pairwise()).subscribe(([prevState, nextState]) => { + console.log(`new: `, nextState); + console.log(`prev: `, prevState); }); const stateSyncRef = syncState({ storageKey: MAP_STATE_STORAGE_KEY, From dc7d8cafd43bd30e607a103791718390af0a99d3 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 3 Feb 2020 10:42:41 -0500 Subject: [PATCH 3/3] replace saved query watch --- .../maps/public/angular/map_controller.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index 45fa4d78e10fe..044354fe133b6 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -92,10 +92,15 @@ app.controller( setSavedQueryId: state => savedQueryId => ({ ...state, savedQuery: savedQueryId }), }; const stateContainer = createStateContainer(initialState, transitions); - const stateContainerChangeSub = stateContainer.state$.pipe(pairwise()).subscribe(([prevState, nextState]) => { + + const onUrlChange = _.debounce(([prevState, nextState]) => { + if (nextState.savedQuery !== prevState.savedQuery) { + onUrlSavedQueryChange(nextState.savedQuery); + } console.log(`new: `, nextState); console.log(`prev: `, prevState); - }); + }, 100); + const stateContainerChangeSub = stateContainer.state$.pipe(pairwise()).subscribe(onUrlChange); const stateSyncRef = syncState({ storageKey: MAP_STATE_STORAGE_KEY, stateContainer: { @@ -227,24 +232,22 @@ app.controller( updateStateFromSavedQuery(newSavedQuery); }); - $scope.$watch( - () => $state.savedQuery, - newSavedQueryId => { - if (!newSavedQueryId) { - $scope.savedQuery = undefined; - return; - } - if ($scope.savedQuery && newSavedQueryId !== $scope.savedQuery.id) { - savedQueryService.getSavedQuery(newSavedQueryId).then(savedQuery => { - $scope.$evalAsync(() => { - $scope.savedQuery = savedQuery; - updateStateFromSavedQuery(savedQuery); - }); + const onUrlSavedQueryChange = newSavedQueryId => { + console.log(`onUrlSavedQueryChange, newSavedQueryId:${newSavedQueryId}`); + if (!newSavedQueryId) { + $scope.savedQuery = undefined; + return; + } else if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) { + savedQueryService.getSavedQuery(newSavedQueryId).then(savedQuery => { + $scope.$evalAsync(() => { + $scope.savedQuery = savedQuery; + updateStateFromSavedQuery(savedQuery); }); - } + }); } - ); + } /* End of Saved Queries */ + async function onQueryChange({ filters, query, time, refresh }) { if (filters) { filterManager.setFilters(filters); // Maps and merges filters