From b676b55ddf09e98aaf6eea81a016227850829c53 Mon Sep 17 00:00:00 2001 From: Ashish Agrawal Date: Tue, 6 Jun 2023 15:29:34 -0700 Subject: [PATCH 1/2] Allow plugins get vis embeddable to show in flyouts Signed-off-by: Ashish Agrawal --- src/plugins/vis_augmenter/public/index.ts | 2 + .../view_events_flyout/components/index.ts | 1 + .../view_events_flyout/components/utils.tsx | 74 +++++++++++-------- .../components/view_events_flyout.tsx | 13 +++- .../public/embeddable/visualize_embeddable.ts | 2 +- 5 files changed, 57 insertions(+), 35 deletions(-) diff --git a/src/plugins/vis_augmenter/public/index.ts b/src/plugins/vis_augmenter/public/index.ts index 3fc82ecc0267..d5096b6faf1f 100644 --- a/src/plugins/vis_augmenter/public/index.ts +++ b/src/plugins/vis_augmenter/public/index.ts @@ -36,3 +36,5 @@ export * from './saved_augment_vis'; export * from './test_constants'; export * from './triggers'; export * from './actions'; +export { fetchVisEmbeddable } from './view_events_flyout'; +export { setUISettings } from './services'; // Needed for plugin tests related to the CRUD saved object functions diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/components/index.ts b/src/plugins/vis_augmenter/public/view_events_flyout/components/index.ts index 6c933e023882..70564145711c 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/components/index.ts +++ b/src/plugins/vis_augmenter/public/view_events_flyout/components/index.ts @@ -5,3 +5,4 @@ export { ViewEventsFlyout } from './view_events_flyout'; export { EventVisEmbeddablesMap, EventVisEmbeddableItem } from './types'; +export { fetchVisEmbeddable } from './utils'; diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx b/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx index a103e6731c21..36146b22b211 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx +++ b/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx @@ -43,6 +43,45 @@ function getValueAxisPositions(embeddable: VisualizeEmbeddable): { left: boolean }; } +/** + * Fetching the base vis to show in the flyout, based on the saved object ID. Add constraints + * such that it is static and won't auto-refresh within the flyout. + * @param savedObjectId the saved object id of the base vis + */ +export async function fetchVisEmbeddable(savedObjectId: string): Promise { + const embeddableVisFactory = getEmbeddable().getEmbeddableFactory('visualization'); + const contextInput = { + filters: getQueryService().filterManager.getFilters(), + query: getQueryService().queryString.getQuery(), + timeRange: getQueryService().timefilter.timefilter.getTime(), + }; + + const embeddable = (await embeddableVisFactory?.createFromSavedObject(savedObjectId, { + ...contextInput, + visAugmenterConfig: { + inFlyout: true, + flyoutContext: VisFlyoutContext.BASE_VIS, + }, + } as VisualizeInput)) as VisualizeEmbeddable | ErrorEmbeddable; + + if (embeddable instanceof ErrorEmbeddable) { + throw getErrorMessage(embeddable); + } + + embeddable.updateInput({ + // @ts-ignore + refreshConfig: { + value: 0, + pause: true, + }, + }); + + // By waiting for this to complete, embeddable.visLayers will be populated + await embeddable.populateVisLayers(); + + return embeddable; +} + /** * Fetching the base vis to show in the flyout, based on the saved object ID. Add constraints * such that it is static and won't auto-refresh within the flyout. @@ -51,44 +90,15 @@ function getValueAxisPositions(embeddable: VisualizeEmbeddable): { left: boolean * @param setVisEmbeddable custom hook used in base component * @param setErrorMessage custom hook used in base component */ -export async function fetchVisEmbeddable( +export async function fetchVisEmbeddableWithSetters( savedObjectId: string, setTimeRange: Function, setVisEmbeddable: Function, setErrorMessage: Function ): Promise { - const embeddableVisFactory = getEmbeddable().getEmbeddableFactory('visualization'); try { - const contextInput = { - filters: getQueryService().filterManager.getFilters(), - query: getQueryService().queryString.getQuery(), - timeRange: getQueryService().timefilter.timefilter.getTime(), - }; - setTimeRange(contextInput.timeRange); - - const embeddable = (await embeddableVisFactory?.createFromSavedObject(savedObjectId, { - ...contextInput, - visAugmenterConfig: { - inFlyout: true, - flyoutContext: VisFlyoutContext.BASE_VIS, - }, - } as VisualizeInput)) as VisualizeEmbeddable | ErrorEmbeddable; - - if (embeddable instanceof ErrorEmbeddable) { - throw getErrorMessage(embeddable); - } - - embeddable.updateInput({ - // @ts-ignore - refreshConfig: { - value: 0, - pause: true, - }, - }); - - // By waiting for this to complete, embeddable.visLayers will be populated - await embeddable.populateVisLayers(); - + const embeddable = await fetchVisEmbeddable(savedObjectId); + setTimeRange(embeddable.timeRange); setVisEmbeddable(embeddable); } catch (err: any) { setErrorMessage(String(err)); diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/components/view_events_flyout.tsx b/src/plugins/vis_augmenter/public/view_events_flyout/components/view_events_flyout.tsx index c1b5ffda024f..96a9c66ac0a4 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/components/view_events_flyout.tsx +++ b/src/plugins/vis_augmenter/public/view_events_flyout/components/view_events_flyout.tsx @@ -22,7 +22,11 @@ import { LoadingFlyoutBody } from './loading_flyout_body'; import { ErrorFlyoutBody } from './error_flyout_body'; import { EventsPanel } from './events_panel'; import { TimelinePanel } from './timeline_panel'; -import { fetchVisEmbeddable, createEventEmbeddables, createTimelineEmbeddable } from './utils'; +import { + fetchVisEmbeddableWithSetters, + createEventEmbeddables, + createTimelineEmbeddable, +} from './utils'; import { EventVisEmbeddablesMap } from './types'; interface Props { @@ -56,7 +60,12 @@ export function ViewEventsFlyout(props: Props) { } useEffect(() => { - fetchVisEmbeddable(props.savedObjectId, setTimeRange, setVisEmbeddable, setErrorMessage); + fetchVisEmbeddableWithSetters( + props.savedObjectId, + setTimeRange, + setVisEmbeddable, + setErrorMessage + ); // adding all of the values to the deps array cause a circular re-render. we don't want // to keep re-fetching the visEmbeddable after it is set. /* eslint-disable react-hooks/exhaustive-deps */ diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts index 505c7b045cb4..64259d7ad279 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts @@ -122,7 +122,7 @@ export class VisualizeEmbeddable implements ReferenceOrValueEmbeddable { private handler?: ExpressionLoader; private timefilter: TimefilterContract; - private timeRange?: TimeRange; + public timeRange?: TimeRange; private query?: Query; private filters?: Filter[]; private visCustomizations?: Pick; From 70e9cb56be8af0e99301d43a7ff5f6a65a1640fb Mon Sep 17 00:00:00 2001 From: Ashish Agrawal Date: Tue, 6 Jun 2023 15:51:56 -0700 Subject: [PATCH 2/2] address comment Signed-off-by: Ashish Agrawal --- .../public/view_events_flyout/components/utils.tsx | 2 +- .../visualizations/public/embeddable/visualize_embeddable.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx b/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx index 36146b22b211..7e1c8900d64b 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx +++ b/src/plugins/vis_augmenter/public/view_events_flyout/components/utils.tsx @@ -98,7 +98,7 @@ export async function fetchVisEmbeddableWithSetters( ): Promise { try { const embeddable = await fetchVisEmbeddable(savedObjectId); - setTimeRange(embeddable.timeRange); + setTimeRange(getQueryService().timefilter.timefilter.getTime()); setVisEmbeddable(embeddable); } catch (err: any) { setErrorMessage(String(err)); diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts index 64259d7ad279..505c7b045cb4 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts @@ -122,7 +122,7 @@ export class VisualizeEmbeddable implements ReferenceOrValueEmbeddable { private handler?: ExpressionLoader; private timefilter: TimefilterContract; - public timeRange?: TimeRange; + private timeRange?: TimeRange; private query?: Query; private filters?: Filter[]; private visCustomizations?: Pick;