Allow plugins get vis embeddable to show in flyouts (#4250)

* Allow plugins get vis embeddable to show in flyouts Signed-off-by: Ashish Agrawal <ashisagr@amazon.com> * address comment Signed-off-by: Ashish Agrawal <ashisagr@amazon.com> --------- Signed-off-by: Ashish Agrawal <ashisagr@amazon.com>
opensearch-project · Jun 9, 2023 · bcc8f94 · bcc8f94
1 parent 6189e87
commit bcc8f94
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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<VisualizeEmbeddable> {
+  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<void> {
-  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(getQueryService().timefilter.timefilter.getTime());
     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
@@ -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 */