render embeddable by using vis embeddable (#521)

Signed-off-by: Jackie Han <jkhanjob@gmail.com>
opensearch-project · Jul 3, 2023 · 8e905d1 · 8e905d1
1 parent bb80536
commit 8e905d1
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
@@ -29,6 +29,7 @@ import {
 import './styles.scss';
 import {
   createAugmentVisSavedObject,
+  fetchVisEmbeddable,
   ISavedAugmentVis,
   ISavedPluginResource,
   SavedAugmentVisLoader,
@@ -50,7 +51,7 @@ import {
   matchDetector,
   startDetector,
 } from '../../../../public/redux/reducers/ad';
-import { EmbeddableRenderer } from '../../../../../../src/plugins/embeddable/public';
+import { EmbeddableRenderer, ErrorEmbeddable } from '../../../../../../src/plugins/embeddable/public';
 import './styles.scss';
 import EnhancedAccordion from '../EnhancedAccordion';
 import MinimalAccordion from '../MinimalAccordion';
@@ -86,10 +87,12 @@ import {
   MAX_FEATURE_NUM,
 } from '../../../../public/utils/constants';
 import {
+  getEmbeddable,
   getNotifications,
   getSavedFeatureAnywhereLoader,
   getUISettings,
   getUiActions,
+  getQueryService
 } from '../../../../public/services';
 import { prettifyErrorMessage } from '../../../../server/utils/helpers';
 import {
@@ -104,6 +107,7 @@ import { AssociateExisting } from './AssociateExisting';
 import { mountReactNode } from '../../../../../../src/core/public/utils';
 import { FLYOUT_MODES } from '../AnywhereParentFlyout/constants';
 import { DetectorListItem } from '../../../../public/models/interfaces';
+import { VisualizeEmbeddable } from '../../../../../../src/plugins/visualizations/public';
 
 function AddAnomalyDetector({
   embeddable,
@@ -115,14 +119,24 @@ function AddAnomalyDetector({
 }) {
   const dispatch = useDispatch();
   const [queryText, setQueryText] = useState('');
+  const [generatedEmbeddable, setGeneratedEmbeddable] = useState<
+  VisualizeEmbeddable | ErrorEmbeddable
+>();
+
   useEffect(() => {
     const getInitialIndices = async () => {
       await dispatch(getIndices(queryText));
     };
     getInitialIndices();
     dispatch(getMappings(embeddable.vis.data.aggs.indexPattern.title));
-  }, []);
 
+    const createEmbeddable = async () => {
+      const visEmbeddable = await fetchVisEmbeddable(embeddable.vis.id, getEmbeddable(), getQueryService());
+      setGeneratedEmbeddable(visEmbeddable);
+    };
+
+    createEmbeddable();
+  }, []);
   const [isShowVis, setIsShowVis] = useState(false);
   const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
   const [detectorNameFromVis, setDetectorNameFromVis] = useState(
@@ -557,7 +571,7 @@ function AddAnomalyDetector({
                       }`}
                     >
                       <EuiSpacer size="s" />
-                      <EmbeddableRenderer embeddable={embeddable} />
+                      <EmbeddableRenderer embeddable={generatedEmbeddable} />
                     </div>
                     <EuiSpacer size="l" />
                     <EuiTitle size="s">

diff --git a/public/plugin.ts b/public/plugin.ts
@@ -34,13 +34,15 @@ import {
   setSavedFeatureAnywhereLoader,
   setUiActions,
   setUISettings,
+  setQueryService
 } from './services';
 import { AnomalyDetectionOpenSearchDashboardsPluginStart } from 'public';
 import {
   VisAugmenterSetup,
   VisAugmenterStart,
 } from '../../../src/plugins/vis_augmenter/public';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
+import { DataPublicPluginStart } from '../../../src/plugins/data/public';
 
 declare module '../../../src/plugins/ui_actions/public' {
   export interface ActionContextMapping {
@@ -61,6 +63,7 @@ export interface AnomalyDetectionStartDeps {
   notifications: NotificationsStart;
   visAugmenter: VisAugmenterStart;
   uiActions: UiActionsStart;
+  data: DataPublicPluginStart;
 }
 
 export class AnomalyDetectionOpenSearchDashboardsPlugin
@@ -104,14 +107,15 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
 
   public start(
     core: CoreStart,
-    { embeddable, visAugmenter, uiActions }: AnomalyDetectionStartDeps
+    { embeddable, visAugmenter, uiActions, data }: AnomalyDetectionStartDeps
   ): AnomalyDetectionOpenSearchDashboardsPluginStart {
     setUISettings(core.uiSettings);
     setEmbeddable(embeddable);
     setOverlays(core.overlays);
     setSavedFeatureAnywhereLoader(visAugmenter.savedAugmentVisLoader);
     setNotifications(core.notifications);
     setUiActions(uiActions);
+    setQueryService(data.query);
     return {};
   }
 }
diff --git a/public/services.ts b/public/services.ts
@@ -9,6 +9,7 @@ import {
   NotificationsStart,
   OverlayStart,
 } from '../../../src/core/public';
+import { DataPublicPluginStart } from '../../../src/plugins/data/public';
 import { EmbeddableStart } from '../../../src/plugins/embeddable/public';
 import { createGetterSetter } from '../../../src/plugins/opensearch_dashboards_utils/public';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
@@ -35,6 +36,9 @@ export const [getUiActions, setUiActions] =
 export const [getUISettings, setUISettings] =
   createGetterSetter<IUiSettingsClient>('UISettings');
 
+export const [getQueryService, setQueryService] = 
+createGetterSetter<DataPublicPluginStart['query']>('Query');
+
 // This is primarily used for mocking this module and each of its fns in tests.
 export default {
   getSavedFeatureAnywhereLoader,
@@ -44,4 +48,5 @@ export default {
   getNotifications,
   getOverlays,
   setUISettings,
+  setQueryService,
 };
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -97,4 +97,4 @@ export enum MISSING_FEATURE_DATA_SEVERITY {
 
 export const SPACE_STR = ' ';
 
-export const APM_TRACE = 'apmTrace';
+export const ANOMALY_DETECTION_ICON = 'anomalyDetection';
diff --git a/public/utils/contextMenu/getActions.tsx b/public/utils/contextMenu/getActions.tsx
@@ -13,7 +13,7 @@ import AnywhereParentFlyout from '../../components/FeatureAnywhereContextMenu/An
 import { Provider } from 'react-redux';
 import configureStore from '../../redux/configureStore';
 import DocumentationTitle from '../../components/FeatureAnywhereContextMenu/DocumentationTitle/containers/DocumentationTitle';
-import { AD_FEATURE_ANYWHERE_LINK, APM_TRACE } from '../constants';
+import { AD_FEATURE_ANYWHERE_LINK, ANOMALY_DETECTION_ICON } from '../constants';
 import { getClient, getOverlays } from '../../../public/services';
 import { FLYOUT_MODES } from '../../../public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/constants';
 
@@ -22,7 +22,7 @@ const grouping: Action['grouping'] = [
   {
     id: 'ad-dashboard-context-menu',
     getDisplayName: () => 'Anomaly Detection',
-    getIconType: () => APM_TRACE,
+    getIconType: () => ANOMALY_DETECTION_ICON,
     category: 'vis_augmenter',
     order: 20,
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -97,4 +97,4 @@ export enum MISSING_FEATURE_DATA_SEVERITY {

		export const SPACE_STR = ' ';

		export const APM_TRACE = 'apmTrace';
		export const ANOMALY_DETECTION_ICON = 'anomalyDetection';