[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>
This commit is contained in:
parent
54717eb178
commit
dc45560e80
|
@ -33,14 +33,27 @@ export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
||||||
const [valueInput, setValueInput] = useState<VisualizeInput>();
|
const [valueInput, setValueInput] = useState<VisualizeInput>();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { originatingApp: value, embeddableId: embeddableIdValue, valueInput: valueInputValue } =
|
const { stateTransferService, history, data } = services;
|
||||||
services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
|
const {
|
||||||
|
originatingApp: value,
|
||||||
|
embeddableId: embeddableIdValue,
|
||||||
|
valueInput: valueInputValue,
|
||||||
|
searchSessionId,
|
||||||
|
} = stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
|
||||||
|
|
||||||
setOriginatingApp(value);
|
setOriginatingApp(value);
|
||||||
setValueInput(valueInputValue);
|
setValueInput(valueInputValue);
|
||||||
setEmbeddableId(embeddableIdValue);
|
setEmbeddableId(embeddableIdValue);
|
||||||
|
|
||||||
if (!valueInputValue) {
|
if (!valueInputValue) {
|
||||||
// if there is no value input to load, redirect to the visualize listing page.
|
// 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]);
|
}, [services]);
|
||||||
|
|
||||||
|
|
|
@ -27,6 +27,7 @@ import { VisualizeConstants } from '../..';
|
||||||
export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
||||||
const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
|
const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
|
||||||
const [originatingApp, setOriginatingApp] = useState<string>();
|
const [originatingApp, setOriginatingApp] = useState<string>();
|
||||||
|
const [embeddableIdValue, setEmbeddableId] = useState<string>();
|
||||||
const { services } = useKibana<VisualizeServices>();
|
const { services } = useKibana<VisualizeServices>();
|
||||||
const [eventEmitter] = useState(new EventEmitter());
|
const [eventEmitter] = useState(new EventEmitter());
|
||||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(!visualizationIdFromUrl);
|
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(!visualizationIdFromUrl);
|
||||||
|
@ -55,8 +56,17 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
||||||
useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance);
|
useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { originatingApp: value } =
|
const { stateTransferService, data } = services;
|
||||||
services.stateTransferService.getIncomingEditorState(VisualizeConstants.APP_ID) || {};
|
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);
|
setOriginatingApp(value);
|
||||||
}, [services]);
|
}, [services]);
|
||||||
|
|
||||||
|
@ -65,7 +75,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
||||||
return () => {
|
return () => {
|
||||||
eventEmitter.removeAllListeners();
|
eventEmitter.removeAllListeners();
|
||||||
};
|
};
|
||||||
}, [eventEmitter]);
|
}, [eventEmitter, services]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VisualizeEditorCommon
|
<VisualizeEditorCommon
|
||||||
|
@ -82,6 +92,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
|
||||||
setHasUnsavedChanges={setHasUnsavedChanges}
|
setHasUnsavedChanges={setHasUnsavedChanges}
|
||||||
visEditorRef={visEditorRef}
|
visEditorRef={visEditorRef}
|
||||||
onAppLeave={onAppLeave}
|
onAppLeave={onAppLeave}
|
||||||
|
embeddableId={embeddableIdValue}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -61,13 +61,21 @@ const TopNav = ({
|
||||||
const session = embeddableHandler.openInspector();
|
const session = embeddableHandler.openInspector();
|
||||||
setInspectorSession(session);
|
setInspectorSession(session);
|
||||||
}, [embeddableHandler]);
|
}, [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(
|
const handleRefresh = useCallback(
|
||||||
(_payload: any, isUpdate?: boolean) => {
|
(_payload: any, isUpdate?: boolean) => {
|
||||||
if (isUpdate === false) {
|
if (isUpdate === false) {
|
||||||
visInstance.embeddableHandler.reload();
|
doReload();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[visInstance.embeddableHandler]
|
[doReload]
|
||||||
);
|
);
|
||||||
|
|
||||||
const config = useMemo(() => {
|
const config = useMemo(() => {
|
||||||
|
@ -185,7 +193,7 @@ const TopNav = ({
|
||||||
.getAutoRefreshFetch$()
|
.getAutoRefreshFetch$()
|
||||||
.subscribe(async (done) => {
|
.subscribe(async (done) => {
|
||||||
try {
|
try {
|
||||||
await visInstance.embeddableHandler.reload();
|
await doReload();
|
||||||
} finally {
|
} finally {
|
||||||
done();
|
done();
|
||||||
}
|
}
|
||||||
|
@ -193,7 +201,7 @@ const TopNav = ({
|
||||||
return () => {
|
return () => {
|
||||||
autoRefreshFetchSub.unsubscribe();
|
autoRefreshFetchSub.unsubscribe();
|
||||||
};
|
};
|
||||||
}, [services.data.query.timefilter.timefilter, visInstance.embeddableHandler]);
|
}, [services.data.query.timefilter.timefilter, doReload]);
|
||||||
|
|
||||||
return isChromeVisible ? (
|
return isChromeVisible ? (
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -81,6 +81,7 @@ export const getTopNavConfig = (
|
||||||
embeddableId,
|
embeddableId,
|
||||||
}: TopNavConfigParams,
|
}: TopNavConfigParams,
|
||||||
{
|
{
|
||||||
|
data,
|
||||||
application,
|
application,
|
||||||
chrome,
|
chrome,
|
||||||
history,
|
history,
|
||||||
|
@ -154,17 +155,17 @@ export const getTopNavConfig = (
|
||||||
saveOptions.dashboardId === 'new' ? '#/create' : `#/view/${saveOptions.dashboardId}`;
|
saveOptions.dashboardId === 'new' ? '#/create' : `#/view/${saveOptions.dashboardId}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newlyCreated && stateTransfer) {
|
if (stateTransfer) {
|
||||||
stateTransfer.navigateToWithEmbeddablePackage(app, {
|
stateTransfer.navigateToWithEmbeddablePackage(app, {
|
||||||
state: {
|
state: {
|
||||||
type: VISUALIZE_EMBEDDABLE_TYPE,
|
type: VISUALIZE_EMBEDDABLE_TYPE,
|
||||||
input: { savedObjectId: id },
|
input: { savedObjectId: id },
|
||||||
embeddableId,
|
embeddableId: savedVis.copyOnSave ? undefined : embeddableId,
|
||||||
|
searchSessionId: data.search.session.getSessionId(),
|
||||||
},
|
},
|
||||||
path,
|
path,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// TODO: need the same thing here?
|
|
||||||
application.navigateToApp(app, { path });
|
application.navigateToApp(app, { path });
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -214,6 +215,7 @@ export const getTopNavConfig = (
|
||||||
} as VisualizeInput,
|
} as VisualizeInput,
|
||||||
embeddableId,
|
embeddableId,
|
||||||
type: VISUALIZE_EMBEDDABLE_TYPE,
|
type: VISUALIZE_EMBEDDABLE_TYPE,
|
||||||
|
searchSessionId: data.search.session.getSessionId(),
|
||||||
};
|
};
|
||||||
stateTransfer.navigateToWithEmbeddablePackage(originatingApp, { state });
|
stateTransfer.navigateToWithEmbeddablePackage(originatingApp, { state });
|
||||||
};
|
};
|
||||||
|
@ -394,6 +396,7 @@ export const getTopNavConfig = (
|
||||||
} as VisualizeInput,
|
} as VisualizeInput,
|
||||||
embeddableId,
|
embeddableId,
|
||||||
type: VISUALIZE_EMBEDDABLE_TYPE,
|
type: VISUALIZE_EMBEDDABLE_TYPE,
|
||||||
|
searchSessionId: data.search.session.getSessionId(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const path = dashboardId === 'new' ? '#/create' : `#/view/${dashboardId}`;
|
const path = dashboardId === 'new' ? '#/create' : `#/view/${dashboardId}`;
|
||||||
|
|
|
@ -40,9 +40,10 @@ const createVisualizeEmbeddableAndLinkSavedSearch = async (
|
||||||
savedObjectsPublic,
|
savedObjectsPublic,
|
||||||
} = visualizeServices;
|
} = visualizeServices;
|
||||||
const embeddableHandler = (await createVisEmbeddableFromObject(vis, {
|
const embeddableHandler = (await createVisEmbeddableFromObject(vis, {
|
||||||
|
id: '',
|
||||||
timeRange: data.query.timefilter.timefilter.getTime(),
|
timeRange: data.query.timefilter.timefilter.getTime(),
|
||||||
filters: data.query.filterManager.getFilters(),
|
filters: data.query.filterManager.getFilters(),
|
||||||
id: '',
|
searchSessionId: data.search.session.getSessionId(),
|
||||||
})) as VisualizeEmbeddableContract;
|
})) as VisualizeEmbeddableContract;
|
||||||
|
|
||||||
embeddableHandler.getOutput$().subscribe((output) => {
|
embeddableHandler.getOutput$().subscribe((output) => {
|
||||||
|
|
|
@ -215,6 +215,7 @@ export class VisualizePlugin
|
||||||
const { renderApp } = await import('./application');
|
const { renderApp } = await import('./application');
|
||||||
const unmount = renderApp(params, services);
|
const unmount = renderApp(params, services);
|
||||||
return () => {
|
return () => {
|
||||||
|
data.search.session.clear();
|
||||||
params.element.classList.remove('visAppWrapper');
|
params.element.classList.remove('visAppWrapper');
|
||||||
unlistenParentHistory();
|
unlistenParentHistory();
|
||||||
unmount();
|
unmount();
|
||||||
|
|
Loading…
Reference in a new issue