[Feature] Multi-data Source Support for Getting Started

public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`Log Config component renders empty log config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -119,6 +120,7 @@ exports[`Log Config component renders empty log config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -649,6 +651,7 @@ exports[`Log Config component renders with query 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -752,6 +755,7 @@ exports[`Log Config component renders with query 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`Service Config component renders empty service config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -119,6 +120,7 @@ exports[`Service Config component renders empty service config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -1219,6 +1221,7 @@ exports[`Service Config component renders with one service selected 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -1322,6 +1325,7 @@ exports[`Service Config component renders with one service selected 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -118,6 +119,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -931,6 +933,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -1034,6 +1037,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap

@@ -888,6 +888,7 @@ exports[`Panels View Component renders panel view container with visualizations
         "getBreadcrumbsEnricher$": [MockFunction],
         "getCustomNavLink$": [MockFunction],
         "getHeaderComponent": [MockFunction],
+        "getHeaderVariant$": [MockFunction],
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction] {
           "calls": Array [
@@ -1285,6 +1286,7 @@ exports[`Panels View Component renders panel view container with visualizations
         },
         "setBreadcrumbsEnricher": [MockFunction],
         "setCustomNavLink": [MockFunction],
+        "setHeaderVariant": [MockFunction],
         "setHelpExtension": [MockFunction],
         "setHelpSupportUrl": [MockFunction],
         "setIsVisible": [MockFunction],
@@ -2692,6 +2694,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         "getBreadcrumbsEnricher$": [MockFunction],
                         "getCustomNavLink$": [MockFunction],
                         "getHeaderComponent": [MockFunction],
+                        "getHeaderVariant$": [MockFunction],
                         "getHelpExtension$": [MockFunction],
                         "getIsNavDrawerLocked$": [MockFunction] {
                           "calls": Array [
@@ -3089,6 +3092,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         },
                         "setBreadcrumbsEnricher": [MockFunction],
                         "setCustomNavLink": [MockFunction],
+                        "setHeaderVariant": [MockFunction],
                         "setHelpExtension": [MockFunction],
                         "setHelpSupportUrl": [MockFunction],
                         "setIsVisible": [MockFunction],
@@ -3259,6 +3263,7 @@ exports[`Panels View Component renders panel view container without visualizatio
         "getBreadcrumbsEnricher$": [MockFunction],
         "getCustomNavLink$": [MockFunction],
         "getHeaderComponent": [MockFunction],
+        "getHeaderVariant$": [MockFunction],
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction] {
           "calls": Array [
@@ -3545,6 +3550,7 @@ exports[`Panels View Component renders panel view container without visualizatio
         },
         "setBreadcrumbsEnricher": [MockFunction],
         "setCustomNavLink": [MockFunction],
+        "setHeaderVariant": [MockFunction],
         "setHelpExtension": [MockFunction],
         "setHelpSupportUrl": [MockFunction],
         "setIsVisible": [MockFunction],
@@ -4947,6 +4953,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         "getBreadcrumbsEnricher$": [MockFunction],
                         "getCustomNavLink$": [MockFunction],
                         "getHeaderComponent": [MockFunction],
+                        "getHeaderVariant$": [MockFunction],
                         "getHelpExtension$": [MockFunction],
                         "getIsNavDrawerLocked$": [MockFunction] {
                           "calls": Array [
@@ -5233,6 +5240,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         },
                         "setBreadcrumbsEnricher": [MockFunction],
                         "setCustomNavLink": [MockFunction],
+                        "setHeaderVariant": [MockFunction],
                         "setHelpExtension": [MockFunction],
                         "setHelpSupportUrl": [MockFunction],
                         "setIsVisible": [MockFunction],

public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction] {
         "calls": Array [
@@ -276,6 +277,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap

@@ -609,7 +609,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 showLabel={true}
               >
                 <div
-                  className="euiSwitch euiSwitch--compressed"
+                  className="euiSwitch euiSwitch--primary euiSwitch--compressed euiSwitch-isDisabled"
                 >
                   <button
                     aria-checked={false}

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>

public/components/getting_started/components/getting_started_collectData.tsx

@@ -40,6 +40,13 @@
   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,17 +55,19 @@
   onMoveToQueryData,
   onSelectSource,
   onCardSelectionChange,
+  selectedDataSourceId,
+  selectedDataSourceLabel,
 }) => {
   const [collectionMethod, setCollectionMethod] = useState('');
   const [specificMethod, setSpecificMethod] = useState('');
   const [_gettingStarted, setGettingStarted] = useState<any>(null);
   const [selectedTabId, setSelectedTabId] = useState('workflow_0');
   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,
     csv: csvFileJson,
     golang: golangClientJson,
@@ -86,7 +95,7 @@
       setGettingStarted(null);
       setWorkflows([]);
     }
   }, [specificMethod]);
 
   const handleCollectionMethodChange = (value: string) => {
     setCollectionMethod(value);
@@ -109,7 +118,7 @@
     }
   };
 
   const handleSpecificMethodChange = (selectedOption: any) => {
     if (!selectedOption) {
       return;
     }
@@ -126,7 +135,7 @@
     setWorkflows([]);
   };
 
   const onTabClick = (tab: any) => {
     const workflowIndex = parseInt(tab.id.split('_')[1], 10);
     setSelectedTabId(tab.id);
     setSelectedWorkflow(workflows[workflowIndex].name);
@@ -156,8 +165,8 @@
     );
   };
 
   const renderSteps = (workflow: any) => {
     const steps = workflow.steps.map((step: any) => ({
       title: step.name,
       children: (
         <div>
@@ -172,7 +181,7 @@
               <EuiTitle size="xs">
                 <h4>Input Parameters:</h4>
               </EuiTitle>
               {step['input-params'].map((param: any, idx: number) => (
                 <EuiText key={idx}>
                   <strong>{param.name}:</strong> {param.description} ({param.type})
                 </EuiText>
@@ -216,7 +225,7 @@
     return <EuiSteps steps={steps} />;
   };
 
   const renderSchema = (schemas: any[]) =>
     schemas.map((schema, idx) => (
       <div key={idx}>
         <EuiTitle size="s">
@@ -267,7 +276,7 @@
       </EuiListGroup>
       <EuiButton
         onClick={async () => {
-          await UploadAssets(specificMethod);
+          await UploadAssets(specificMethod, selectedDataSourceId, selectedDataSourceLabel);
         }}
         fill
       >

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>