From 6e9b2bb6b767180f83cc2c0c7c82527185c7483a Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 19 Jul 2021 13:12:02 +0300 Subject: [PATCH] [Visualize] Client Side caching (#105589) * [Visualize] Client Side caching Closes: #102622 * apply caching for returning to originatingApp * fix case with 'save as' functiionality Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/visualize_byvalue_editor.tsx | 19 ++++++++++++++++--- .../components/visualize_editor.tsx | 17 ++++++++++++++--- .../components/visualize_top_nav.tsx | 16 ++++++++++++---- .../application/utils/get_top_nav_config.tsx | 9 ++++++--- .../utils/get_visualization_instance.ts | 3 ++- src/plugins/visualize/public/plugin.ts | 1 + 6 files changed, 51 insertions(+), 14 deletions(-) diff --git a/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx b/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx index fa0e0bd5f48f0..c32d15c336cfb 100644 --- a/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx +++ b/src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx @@ -33,14 +33,27 @@ export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => { const [valueInput, setValueInput] = useState(); useEffect(() => { - const { originatingApp: value, embeddableId: embeddableIdValue, valueInput: valueInputValue } = - services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {}; + const { stateTransferService, history, data } = services; + const { + originatingApp: value, + embeddableId: embeddableIdValue, + valueInput: valueInputValue, + searchSessionId, + } = stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {}; + setOriginatingApp(value); setValueInput(valueInputValue); setEmbeddableId(embeddableIdValue); + if (!valueInputValue) { // if there is no value input to load, redirect to the visualize listing page. - services.history.replace(VisualizeConstants.LANDING_PAGE_PATH); + history.replace(VisualizeConstants.LANDING_PAGE_PATH); + } + + if (searchSessionId) { + data.search.session.continue(searchSessionId); + } else { + data.search.session.start(); } }, [services]); diff --git a/src/plugins/visualize/public/application/components/visualize_editor.tsx b/src/plugins/visualize/public/application/components/visualize_editor.tsx index c6333e978183f..546738bf36c3f 100644 --- a/src/plugins/visualize/public/application/components/visualize_editor.tsx +++ b/src/plugins/visualize/public/application/components/visualize_editor.tsx @@ -27,6 +27,7 @@ import { VisualizeConstants } from '../..'; export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => { const { id: visualizationIdFromUrl } = useParams<{ id: string }>(); const [originatingApp, setOriginatingApp] = useState(); + const [embeddableIdValue, setEmbeddableId] = useState(); const { services } = useKibana(); const [eventEmitter] = useState(new EventEmitter()); const [hasUnsavedChanges, setHasUnsavedChanges] = useState(!visualizationIdFromUrl); @@ -55,8 +56,17 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => { useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance); useEffect(() => { - const { originatingApp: value } = - services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {}; + const { stateTransferService, data } = services; + const { originatingApp: value, searchSessionId, embeddableId } = + stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {}; + + if (searchSessionId) { + data.search.session.continue(searchSessionId); + } else { + data.search.session.start(); + } + + setEmbeddableId(embeddableId); setOriginatingApp(value); }, [services]); @@ -65,7 +75,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => { return () => { eventEmitter.removeAllListeners(); }; - }, [eventEmitter]); + }, [eventEmitter, services]); return ( { setHasUnsavedChanges={setHasUnsavedChanges} visEditorRef={visEditorRef} onAppLeave={onAppLeave} + embeddableId={embeddableIdValue} /> ); }; diff --git a/src/plugins/visualize/public/application/components/visualize_top_nav.tsx b/src/plugins/visualize/public/application/components/visualize_top_nav.tsx index f6ef1caf9c9e0..ad933e597f0a7 100644 --- a/src/plugins/visualize/public/application/components/visualize_top_nav.tsx +++ b/src/plugins/visualize/public/application/components/visualize_top_nav.tsx @@ -61,13 +61,21 @@ const TopNav = ({ const session = embeddableHandler.openInspector(); setInspectorSession(session); }, [embeddableHandler]); + + const doReload = useCallback(async () => { + // start a new session to make sure all data is up to date + services.data.search.session.start(); + + await visInstance.embeddableHandler.reload(); + }, [visInstance.embeddableHandler, services.data.search.session]); + const handleRefresh = useCallback( (_payload: any, isUpdate?: boolean) => { if (isUpdate === false) { - visInstance.embeddableHandler.reload(); + doReload(); } }, - [visInstance.embeddableHandler] + [doReload] ); const config = useMemo(() => { @@ -185,7 +193,7 @@ const TopNav = ({ .getAutoRefreshFetch$() .subscribe(async (done) => { try { - await visInstance.embeddableHandler.reload(); + await doReload(); } finally { done(); } @@ -193,7 +201,7 @@ const TopNav = ({ return () => { autoRefreshFetchSub.unsubscribe(); }; - }, [services.data.query.timefilter.timefilter, visInstance.embeddableHandler]); + }, [services.data.query.timefilter.timefilter, doReload]); return isChromeVisible ? ( /** diff --git a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx index 82757e9a8e357..ed361bbdb104d 100644 --- a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx +++ b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx @@ -81,6 +81,7 @@ export const getTopNavConfig = ( embeddableId, }: TopNavConfigParams, { + data, application, chrome, history, @@ -154,17 +155,17 @@ export const getTopNavConfig = ( saveOptions.dashboardId === 'new' ? '#/create' : `#/view/${saveOptions.dashboardId}`; } - if (newlyCreated && stateTransfer) { + if (stateTransfer) { stateTransfer.navigateToWithEmbeddablePackage(app, { state: { type: VISUALIZE_EMBEDDABLE_TYPE, input: { savedObjectId: id }, - embeddableId, + embeddableId: savedVis.copyOnSave ? undefined : embeddableId, + searchSessionId: data.search.session.getSessionId(), }, path, }); } else { - // TODO: need the same thing here? application.navigateToApp(app, { path }); } } else { @@ -214,6 +215,7 @@ export const getTopNavConfig = ( } as VisualizeInput, embeddableId, type: VISUALIZE_EMBEDDABLE_TYPE, + searchSessionId: data.search.session.getSessionId(), }; stateTransfer.navigateToWithEmbeddablePackage(originatingApp, { state }); }; @@ -394,6 +396,7 @@ export const getTopNavConfig = ( } as VisualizeInput, embeddableId, type: VISUALIZE_EMBEDDABLE_TYPE, + searchSessionId: data.search.session.getSessionId(), }; const path = dashboardId === 'new' ? '#/create' : `#/view/${dashboardId}`; diff --git a/src/plugins/visualize/public/application/utils/get_visualization_instance.ts b/src/plugins/visualize/public/application/utils/get_visualization_instance.ts index 9eda709e58c3e..8898076d7ddbd 100644 --- a/src/plugins/visualize/public/application/utils/get_visualization_instance.ts +++ b/src/plugins/visualize/public/application/utils/get_visualization_instance.ts @@ -40,9 +40,10 @@ const createVisualizeEmbeddableAndLinkSavedSearch = async ( savedObjectsPublic, } = visualizeServices; const embeddableHandler = (await createVisEmbeddableFromObject(vis, { + id: '', timeRange: data.query.timefilter.timefilter.getTime(), filters: data.query.filterManager.getFilters(), - id: '', + searchSessionId: data.search.session.getSessionId(), })) as VisualizeEmbeddableContract; embeddableHandler.getOutput$().subscribe((output) => { diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index b5ddbdf6d10a3..00c3545034b32 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -215,6 +215,7 @@ export class VisualizePlugin const { renderApp } = await import('./application'); const unmount = renderApp(params, services); return () => { + data.search.session.clear(); params.element.classList.remove('visAppWrapper'); unlistenParentHistory(); unmount();