[Feature] Multi-data Source Support for Getting Started (opensearch-p…

…roject#2048) * first step of MDS Signed-off-by: Adam Tackett <[email protected]> * add mds support to getting started Signed-off-by: Adam Tackett <[email protected]> * update references, renaming, code cleanup Signed-off-by: Adam Tackett <[email protected]> * update snapshots, remove depend Signed-off-by: Adam Tackett <[email protected]> * only add mds reference to index patterns Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
mengweieric · Aug 19, 2024 · 359cdf9 · 359cdf9
1 parent 65453a3
commit 359cdf9
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 45 deletions.
diff --git a/public/components/getting_started/components/getting_started.tsx b/public/components/getting_started/components/getting_started.tsx
@@ -10,13 +10,17 @@ import { GettingStartedConnectionsHeader } from './getting_started_header';
 import { CollectAndShipData } from './getting_started_collectData';
 import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';
 
-export const NewGettingStarted = (props: HomeProps) => {
-  const { chrome } = props;
+interface ExtendedHomeProps extends HomeProps {
+  selectedDataSourceId: string;
+  selectedDataSourceLabel: string;
+}
+
+export const NewGettingStarted = (props: ExtendedHomeProps) => {
+  const { chrome, selectedDataSourceId, selectedDataSourceLabel } = props;
   const [selectedSource, setSelectedSource] = useState('');
   const [isPickYourSourceOpen, setIsPickYourSourceOpen] = useState(true);
   const [isQueryDataOpen, setIsQueryDataOpen] = useState(false);
-  const [indexPatterns, setIndexPatterns] = useState<string[]>([]);
-  const [isSampleDataset, setIsSampleDataset] = useState(false); // New state
+  const [isSampleDataset, setIsSampleDataset] = useState(false);
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -25,7 +29,7 @@ export const NewGettingStarted = (props: HomeProps) => {
         href: '#/',
       },
     ]);
-  }, []);
+  }, [chrome]);
 
   const handleSelectSource = (source: string) => {
     setSelectedSource(source);
@@ -42,10 +46,9 @@ export const NewGettingStarted = (props: HomeProps) => {
     setIsQueryDataOpen(isOpen);
   };
 
-  const setQueryDataOpen = (patterns: string[]) => {
+  const setQueryDataOpen = () => {
     setIsPickYourSourceOpen(false);
     setIsQueryDataOpen(true);
-    setIndexPatterns(patterns);
   };
 
   const handleCardSelectionChange = (isSample: boolean) => {
@@ -64,14 +67,17 @@ export const NewGettingStarted = (props: HomeProps) => {
           onMoveToQueryData={setQueryDataOpen}
           onSelectSource={handleSelectSource}
           onCardSelectionChange={handleCardSelectionChange}
+          selectedDataSourceId={selectedDataSourceId}
+          selectedDataSourceLabel={selectedDataSourceLabel}
         />
         <EuiSpacer size="l" />
         {!isSampleDataset && (
           <QueryAndAnalyze
             isOpen={isQueryDataOpen}
             onToggle={toggleQueryData}
             selectedTechnology={selectedSource}
-            indexPatterns={indexPatterns}
+            selectedDataSourceId={selectedDataSourceId}
+            selectedDataSourceLabel={selectedDataSourceLabel}
           />
         )}
       </EuiPageBody>

diff --git a/public/components/getting_started/components/getting_started_collectData.tsx b/public/components/getting_started/components/getting_started_collectData.tsx
@@ -40,6 +40,13 @@ interface CollectAndShipDataProps {
   onMoveToQueryData: (indexPatterns: string[]) => void;
   onSelectSource: (source: string) => void;
   onCardSelectionChange: (isSampleDataset: boolean) => void;
+  selectedDataSourceId: string;
+  selectedDataSourceLabel: string;
+}
+
+interface CollectorOption {
+  label: string;
+  value: string;
 }
 
 export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
@@ -48,6 +55,8 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   onMoveToQueryData,
   onSelectSource,
   onCardSelectionChange,
+  selectedDataSourceId,
+  selectedDataSourceLabel,
 }) => {
   const [collectionMethod, setCollectionMethod] = useState('');
   const [specificMethod, setSpecificMethod] = useState('');
@@ -56,7 +65,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   const [_selectedWorkflow, setSelectedWorkflow] = useState('');
   const [workflows, setWorkflows] = useState<any[]>([]);
   const [selectedCard, setSelectedCard] = useState('');
-  const [collectorOptions, setCollectorOptions] = useState([]);
+  const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);
 
   const technologyJsonMap: Record<string, any> = {
     otel: otelJson,
@@ -267,7 +276,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
       </EuiListGroup>
       <EuiButton
         onClick={async () => {
-          await UploadAssets(specificMethod);
+          await UploadAssets(specificMethod, selectedDataSourceId, selectedDataSourceLabel);
         }}
         fill
       >

diff --git a/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx b/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
@@ -19,20 +19,32 @@ import {
 import { coreRefs } from '../../../../public/framework/core_refs';
 import { fetchDashboardIds, fetchIndexPatternIds } from './utils';
 
+interface Pattern {
+  id: string;
+  title: string;
+}
+
+interface Dashboard {
+  id: string;
+  title: string;
+}
+
 interface QueryAndAnalyzeProps {
   isOpen: boolean;
   onToggle: (isOpen: boolean) => void;
   selectedTechnology: string;
-  indexPatterns: string[];
+  selectedDataSourceId: string;
+  selectedDataSourceLabel: string;
 }
 
 export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
   isOpen,
   onToggle,
   selectedTechnology,
+  selectedDataSourceId,
 }) => {
-  const [patternsContent, setPatternsContent] = useState([]);
-  const [dashboardsContent, setDashboardsContent] = useState([]);
+  const [patternsContent, setPatternsContent] = useState<Pattern[]>([]);
+  const [dashboardsContent, setDashboardsContent] = useState<Dashboard[]>([]);
 
   const fetchIndexPatternContent = async () => {
     try {
@@ -47,26 +59,34 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
       const content = await fetchDashboardIds(selectedTechnology);
       setDashboardsContent(content.data.length !== 0 ? content.data : []);
     } catch (error) {
-      console.error('Error fetching index patterns:', error);
+      console.error('Error fetching dashboards:', error);
       setDashboardsContent([]);
     }
   };
 
-  const redirectToDashboards = (path: string) => {
-    coreRefs?.application!.navigateToApp('dashboards', {
-      path: `#/${path}`,
-    });
-  };
-
   useEffect(() => {
     if (selectedTechnology !== '') {
       fetchIndexPatternContent();
     }
-  }, [selectedTechnology]);
+  }, [selectedTechnology, selectedDataSourceId]);
 
   const handleIndexPatternClick = (patternId: string) => {
+    const finalPatternId = selectedDataSourceId
+      ? `mds-${selectedDataSourceId}-objectId-${patternId}`
+      : patternId;
+
     coreRefs?.application!.navigateToApp('data-explorer', {
-      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${patternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
+      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${finalPatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
+    });
+  };
+
+  const redirectToDashboards = (dashboardId: string) => {
+    const finalDashboardId = selectedDataSourceId
+      ? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
+      : dashboardId;
+
+    coreRefs?.application!.navigateToApp('dashboards', {
+      path: `#/view/${finalDashboardId}`,
     });
   };
 
@@ -111,13 +131,13 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
         <EuiFlexGroup wrap>
           {dashboardsContent.length !== 0 &&
             dashboardsContent.map((dashboard) => (
-              <EuiFlexItem style={{ maxWidth: '300px' }}>
+              <EuiFlexItem key={dashboard.id} style={{ maxWidth: '300px' }}>
                 <EuiCard
                   icon={<div />}
                   title={dashboard.title}
                   description={`Explore the ${dashboard.title} dashboard`}
                   onClick={() => {
-                    redirectToDashboards(`/view/${dashboard.id}`);
+                    redirectToDashboards(dashboard.id);
                   }}
                 />
               </EuiFlexItem>

diff --git a/public/components/getting_started/components/utils.tsx b/public/components/getting_started/components/utils.tsx
@@ -4,7 +4,6 @@
  */
 
 import { coreRefs } from '../../../framework/core_refs';
-import { uploadBundle } from '../../integrations/components/upload_flyout';
 import { useToast } from '../../../../public/components/common/toast';
 
 const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'indexPatterns') => {
@@ -21,18 +20,20 @@ const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'ind
   return responeData;
 };
 
-export const UploadAssets = async (tutorialId: string) => {
+export const UploadAssets = async (tutorialId: string, mdsId: string, mdsLabel: string) => {
   const { setToast } = useToast();
-  try {
-    const responeData = await fetchAssets(tutorialId);
+  const http = coreRefs.http;
 
-    const blob = new Blob([responeData.data], { type: 'application/x-ndjson' });
-    const file = new File([blob], 'ndjson-file.ndjson');
+  try {
+    const response = await http!.post(`/api/observability/gettingStarted/createAssets`, {
+      body: JSON.stringify({
+        mdsId,
+        mdsLabel,
+        tutorialId,
+      }),
+    });
 
-    const error = await uploadBundle(file);
-    if (error) {
-      console.error(error.message);
-    } else {
+    if (response) {
       setToast('Created saved object assets successfully', 'success');
     }
   } catch (err) {

diff --git a/public/components/getting_started/home.tsx b/public/components/getting_started/home.tsx
@@ -3,45 +3,107 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import {
   ChromeBreadcrumb,
   ChromeStart,
   HttpStart,
+  MountPoint,
   NotificationsStart,
+  SavedObjectsStart,
 } from '../../../../../src/core/public';
+import {
+  DataSourceManagementPluginSetup,
+  DataSourceSelectableConfig,
+} from '../../../../../src/plugins/data_source_management/public';
 import { NewGettingStarted } from './components/getting_started';
-
-export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
+import { dataSourceFilterFn } from '../../../common/utils/shared';
 
 export interface HomeProps extends RouteComponentProps {
   pplService: any;
   parentBreadcrumb: ChromeBreadcrumb;
   http: HttpStart;
   chrome: ChromeStart;
   notifications: NotificationsStart;
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  savedObjectsMDSClient: SavedObjectsStart;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
 export const Home = (props: HomeProps) => {
-  const { http, chrome, pplService, notifications } = props;
+  const {
+    http,
+    chrome,
+    pplService,
+    notifications,
+    dataSourceEnabled,
+    dataSourceManagement,
+    savedObjectsMDSClient,
+    parentBreadcrumb,
+    setActionMenu,
+  } = props;
+
+  const [selectedDataSourceId, setSelectedDataSourceId] = useState<string>('');
+  const [selectedDataSourceLabel, setSelectedDataSourceLabel] = useState<string>('');
+
+  const onSelectedDataSourceChange = (e: any) => {
+    const dataSourceId = e[0] ? e[0].id : undefined;
+    const dataSourceLabel = e[0] ? e[0].label : '';
+    setSelectedDataSourceId(dataSourceId);
+    setSelectedDataSourceLabel(dataSourceLabel);
+  };
+
+  const DataSourceMenu = useMemo(() => {
+    if (dataSourceEnabled && dataSourceManagement?.ui) {
+      return dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
+    }
+    return null;
+  }, [dataSourceManagement, dataSourceEnabled]);
+
+  const dataSourceMenuComponent = useMemo(() => {
+    if (DataSourceMenu) {
+      return (
+        <DataSourceMenu
+          setMenuMountPoint={setActionMenu}
+          componentType={'DataSourceSelectable'}
+          componentConfig={{
+            savedObjects: savedObjectsMDSClient.client,
+            notifications,
+            fullWidth: true,
+            onSelectedDataSources: onSelectedDataSourceChange,
+            dataSourceFilter: dataSourceFilterFn,
+          }}
+        />
+      );
+    }
+    return null;
+  }, [savedObjectsMDSClient.client, notifications, DataSourceMenu, setActionMenu]);
 
   const commonProps = {
     http,
     chrome,
     pplService,
     notifications,
+    dataSourceEnabled,
+    dataSourceManagement,
+    savedObjectsMDSClient,
+    parentBreadcrumb,
+    selectedDataSourceId,
+    selectedDataSourceLabel,
+    setActionMenu,
   };
 
   return (
     <div>
+      {dataSourceMenuComponent}
       <HashRouter>
         <Switch>
           <Route
             exact
             path={['/']}
-            render={(_routerProps) => <NewGettingStarted {...commonProps} />}
+            render={(routerProps) => <NewGettingStarted {...routerProps} {...commonProps} />}
           />
         </Switch>
       </HashRouter>