Updated embeddable by ref

Signed-off-by: Dan Dong <danieldong51@gmail.com>
danieldong51 · Sep 5, 2024 · c3a1150 · c3a1150
1 parent bcac740
commit c3a1150
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 77 deletions.
diff --git a/public/components/overview/components/dashboard_input.tsx b/public/components/overview/components/dashboard_input.tsx
@@ -6,6 +6,7 @@
 import { SimpleSavedObject } from '../../../../../../src/core/public';
 import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public';
 import { DashboardContainerInput } from '../../../../../../src/plugins/dashboard/public/application/embeddable/dashboard_container';
+import { ViewMode } from '../../../../../../src/plugins/embeddable/public';
 
 export const dashboardInput = (dashboardObject: SimpleSavedObject<SavedObjectDashboard>) => {
   const panels: DashboardContainerInput['panels'] = {};
@@ -38,7 +39,7 @@ export const dashboardInput = (dashboardObject: SimpleSavedObject<SavedObjectDas
     panels,
     id: 'id',
     title: '',
-    viewMode: 'view',
+    viewMode: ViewMode.VIEW,
     useMargins: true,
     isFullScreenMode: false,
     filters: [],

diff --git a/public/components/overview/components/utils.tsx b/public/components/overview/components/utils.tsx
@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import React, { useState } from 'react';
 import { observabilityDashboardsKey } from '../../../../common/constants/overview';
 import { uiSettingsService } from '../../../../common/utils';
+import { DashboardStart } from '../../../../../../src/plugins/dashboard/public/plugin';
+import { DashboardContainerInput } from '../../../../../../src/plugins/dashboard/public/application/embeddable/dashboard_container';
 
 export const getObservabilityDashboardsId = () => {
   return uiSettingsService.get(observabilityDashboardsKey);
@@ -13,3 +16,19 @@ export const getObservabilityDashboardsId = () => {
 export const setObservabilityDashboardsId = (id: string | null) => {
   return uiSettingsService.set(observabilityDashboardsKey, id);
 };
+
+export const DashboardEmbeddableByValue = ({
+  DashboardContainerByValueRenderer,
+  initialInput,
+}: {
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+  initialInput: DashboardContainerInput;
+}) => {
+  const [input, setInput] = useState(initialInput);
+
+  return (
+    <>
+      <DashboardContainerByValueRenderer input={input} onInputUpdated={setInput} />
+    </>
+  );
+};
diff --git a/public/components/overview/home.tsx b/public/components/overview/home.tsx
@@ -9,15 +9,18 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import { DashboardSavedObjectsType } from '../../../common/types/overview';
 import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
 import { coreRefs } from '../../framework/core_refs';
-import { HOME_CONTENT_AREAS } from '../../plugin_helpers/plugin_overview';
-import { DashboardControls } from './components/dashboard_controls';
 import { ObsDashboardStateManager } from './components/obs_dashboard_state_manager';
 import { SelectDashboardFlyout } from './components/select_dashboard_flyout';
-import { getObservabilityDashboardsId, setObservabilityDashboardsId } from './components/utils';
+import {
+  DashboardEmbeddableByValue,
+  getObservabilityDashboardsId,
+  setObservabilityDashboardsId,
+} from './components/utils';
 import './index.scss';
-import { EmbeddableInput, EmbeddableRenderer } from '../../../../../src/plugins/embeddable/public';
 import { dashboardInput } from './components/dashboard_input';
 import { Cards } from './components/cards';
+import { DashboardContainerInput } from '../../../../../src/plugins/dashboard/public';
+import { DashboardControls } from './components/dashboard_controls';
 
 export const Home = () => {
   const [dashboardsSavedObjects, setDashboardsSavedObjects] = useState<DashboardSavedObjectsType>(
@@ -26,19 +29,6 @@ export const Home = () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   ObsDashboardStateManager.showFlyout$.next(() => () => setIsFlyoutVisible(true));
 
-  const registerDashboardsControl = () => {
-    coreRefs.contentManagement?.registerContentProvider({
-      id: 'dashboards_controls',
-      getContent: () => ({
-        id: 'dashboards_controls',
-        kind: 'custom',
-        order: 1000,
-        render: () => <DashboardControls />,
-      }),
-      getTargetArea: () => HOME_CONTENT_AREAS.SELECTOR,
-    });
-  };
-
   const loadDashboardsState = () => {
     coreRefs.savedObjectsClient
       ?.find({
@@ -99,7 +89,6 @@ export const Home = () => {
   );
 
   useEffect(() => {
-    registerDashboardsControl();
     loadDashboard();
   }, [dashboardsSavedObjects]);
 
@@ -117,7 +106,7 @@ export const Home = () => {
   }, []);
 
   const ref = useRef(false);
-  const [embeddable, setEmbeddable] = useState<EmbeddableInput | undefined>(undefined);
+  const [embeddable, setEmbeddable] = useState<DashboardContainerInput | undefined>(undefined);
 
   const loadDashboard = () => {
     ref.current = true;
@@ -148,10 +137,12 @@ export const Home = () => {
               <EuiPanel color="transparent" hasBorder={false}>
                 <DashboardControls />
               </EuiPanel>
-              {coreRefs.embeddable && embeddable && (
-                <EmbeddableRenderer
-                  factory={coreRefs.embeddable.getEmbeddableFactory('dashboard')}
-                  input={embeddable}
+              {coreRefs.dashboard && embeddable && (
+                <DashboardEmbeddableByValue
+                  DashboardContainerByValueRenderer={
+                    coreRefs.dashboard.DashboardContainerByValueRenderer
+                  }
+                  initialInput={embeddable}
                 />
               )}
               {flyout}

diff --git a/public/framework/core_refs.ts b/public/framework/core_refs.ts
@@ -17,12 +17,9 @@ import { DashboardStart } from '../../../../src/plugins/dashboard/public';
 import { DataSourcePluginStart } from '../../../../src/plugins/data_source/public';
 import PPLService from '../services/requests/ppl';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { ContentManagementPluginStart } from '../../../../src/plugins/content_management/public';
-import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 
 class CoreRefs {
   private static _instance: CoreRefs;
-
   public core?: CoreStart;
   public http?: HttpStart;
   public savedObjectsClient?: SavedObjectsClientContract;
@@ -38,8 +35,6 @@ class CoreRefs {
   public overlays?: OverlayStart;
   public dataSource?: DataSourcePluginStart;
   public navigation?: NavigationPublicPluginStart;
-  public contentManagement?: ContentManagementPluginStart;
-  public embeddable?: EmbeddableStart;
   private constructor() {
     // ...
   }

diff --git a/public/plugin.tsx b/public/plugin.tsx
@@ -104,7 +104,6 @@ import { DataSourcePluggable } from './framework/datasource_pluggables/datasourc
 import { S3DataSource } from './framework/datasources/s3_datasource';
 import './index.scss';
 import { registerAllPluginNavGroups } from './plugin_helpers/plugin_nav';
-import { setupOverviewPage } from './plugin_helpers/plugin_overview';
 import DSLService from './services/requests/dsl';
 import PPLService from './services/requests/ppl';
 import SavedObjects from './services/saved_objects/event_analytics/saved_objects';
@@ -183,8 +182,6 @@ export class ObservabilityPlugin
       setOSDSavedObjectsClient(coreStart.savedObjects.client);
     });
 
-    setupOverviewPage(setupDeps.contentManagement!);
-
     // redirect legacy notebooks URL to current URL under observability
     if (window.location.pathname.includes('notebooks-dashboards')) {
       window.location.assign(convertLegacyNotebooksUrl(window.location));
@@ -448,8 +445,7 @@ export class ObservabilityPlugin
     coreRefs.overlays = core.overlays;
     coreRefs.dataSource = startDeps.dataSource;
     coreRefs.navigation = startDeps.navigation;
-    coreRefs.contentManagement = startDeps.contentManagement;
-    coreRefs.embeddable = startDeps.embeddable;
+    coreRefs.dashboardStart = startDeps.dashboardStart;
 
     const { dataSourceService, dataSourceFactory } = startDeps.data.dataSources;
     dataSourceFactory.registerDataSourceType(S3_DATA_SOURCE_TYPE, S3DataSource);

diff --git a/public/plugin_helpers/plugin_overview.tsx b/public/plugin_helpers/plugin_overview.tsx
@@ -3,47 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { ContentManagementPluginSetup } from '../../../../src/plugins/content_management/public';
-
 export const HOME_PAGE_ID = 'observabilityOverviewPage';
-
-export enum SECTIONS {
-  GET_STARTED = 'get_started',
-  SELECTOR = 'selector',
-  DASHBOARD = 'dashboard',
-}
-
-export enum HOME_CONTENT_AREAS {
-  GET_STARTED = `${HOME_PAGE_ID}/${SECTIONS.GET_STARTED}`,
-  SELECTOR = `${HOME_PAGE_ID}/${SECTIONS.SELECTOR}`,
-  DASHBOARD = `${HOME_PAGE_ID}/${SECTIONS.DASHBOARD}`,
-}
-
-export const setupOverviewPage = (contentManagement: ContentManagementPluginSetup) => {
-  contentManagement.registerPage({
-    id: HOME_PAGE_ID,
-    title: 'Home',
-    sections: [
-      {
-        id: SECTIONS.GET_STARTED,
-        order: 1000,
-        kind: 'card',
-        wrap: false,
-        columns: 5,
-      },
-      {
-        id: SECTIONS.SELECTOR,
-        order: 2000,
-        title: 'Dashboards controls',
-        kind: 'custom',
-        render: (contents) => <div key={contents[0].id}>{contents[0].render()}</div>,
-      },
-      {
-        id: SECTIONS.DASHBOARD,
-        order: 3000,
-        kind: 'dashboard',
-      },
-    ],
-  });
-};
diff --git a/public/types.ts b/public/types.ts
@@ -50,6 +50,7 @@ export interface SetupDependencies {
   dataSource: DataSourcePluginSetup;
   dataSourceManagement: DataSourceManagementPluginSetup;
   contentManagement?: ContentManagementPluginSetup;
+  dashboard?: DashboardStart;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface