diff --git a/public/components/getting_started/components/getting_started_collectData.tsx b/public/components/getting_started/components/getting_started_collectData.tsx index 239d0f4cf2..9c8199b548 100644 --- a/public/components/getting_started/components/getting_started_collectData.tsx +++ b/public/components/getting_started/components/getting_started_collectData.tsx @@ -21,6 +21,7 @@ import { EuiButton, EuiIcon, EuiCard, + EuiSelectableOption, } from '@elastic/eui'; import React, { useEffect, useState } from 'react'; @@ -44,6 +45,7 @@ import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils'; const cardOne = 'Logs'; const cardTwo = 'Metrics'; const cardThree = 'Traces'; +const OTEL_LOGS_OPTION = { label: 'Open Telemetry', value: 'otelLogs' }; interface CollectAndShipDataProps { isOpen: boolean; @@ -69,6 +71,9 @@ export const CollectAndShipData: React.FC = ({ const [workflows, setWorkflows] = useState([]); const [collectorOptions, setCollectorOptions] = useState([]); const [patternsContent, setPatternsContent] = useState([]); + const [selectedIntegration, setSelectedIntegration] = useState< + Array> + >([OTEL_LOGS_OPTION]); const technologyJsonMap: Record = { otelLogs: otelJsonLogs, @@ -129,6 +134,7 @@ export const CollectAndShipData: React.FC = ({ return; } + setSelectedIntegration(newOption); setSpecificMethod(selectedOptionValue); setSelectedWorkflow(''); setGettingStarted(null); @@ -138,7 +144,7 @@ export const CollectAndShipData: React.FC = ({ // Auto-select first collector if nothing is selected and a collection method is set useEffect(() => { if (collectorOptions.length > 0 && !specificMethod && collectionMethod) { - handleSpecificMethodChange([{ value: collectorOptions[0].value }]); + handleSpecificMethodChange([{ ...OTEL_LOGS_OPTION }]); } }, [collectorOptions, specificMethod, collectionMethod]); @@ -151,7 +157,7 @@ export const CollectAndShipData: React.FC = ({ if (value === cardOne) { setCollectorOptions([ - { label: 'Open Telemetry', value: 'otelLogs' }, + { ...OTEL_LOGS_OPTION }, { label: 'Nginx', value: 'nginx' }, { label: 'Java', value: 'java' }, { label: 'Python', value: 'python' }, @@ -354,7 +360,7 @@ export const CollectAndShipData: React.FC = ({ technologyJsonMap[specificMethod]?.['getting-started']?.schema || technologyJsonMap[specificMethod]?.schema || [], - collectorOptions + selectedIntegration ); }} fill diff --git a/public/components/getting_started/components/utils.tsx b/public/components/getting_started/components/utils.tsx index 21566ddc85..420ce5c432 100644 --- a/public/components/getting_started/components/utils.tsx +++ b/public/components/getting_started/components/utils.tsx @@ -44,33 +44,29 @@ export const UploadAssets = async ( mdsId: string, mdsLabel: string, schema: ICollectorSchema[], - collectorOptions: Array> + selectedIntegration: Array> ) => { const { setToast } = useToast(); const http = coreRefs.http; - let selectedIntegration: string | undefined; - const checkedCollector = collectorOptions.find((collector) => { - return !!collector.checked; - }); - - if (checkedCollector !== undefined) { - if (checkedCollector.value === 'otel') { - selectedIntegration = 'otel-services'; - } else if (checkedCollector.value === 'nginx') { - selectedIntegration = checkedCollector.value; + let curIntegration: string | undefined; + if (selectedIntegration !== undefined) { + if (/^otel[A-Za-z]+$/i.test(selectedIntegration[0].value)) { + curIntegration = 'otel-services'; + } else if (selectedIntegration[0].value === 'nginx') { + curIntegration = selectedIntegration[0].value; } } try { // Auto-generate index templates based on the selected integration let templates: ICollectorIndexTemplate[] = []; - if (selectedIntegration !== undefined) { + if (curIntegration !== undefined) { const indexTemplateMappings = await http!.get( - `/api/integrations/repository/${selectedIntegration}/schema` + `/api/integrations/repository/${curIntegration}/schema` ); templates = schema.reduce((acc: ICollectorIndexTemplate[], sh) => { - const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type]; + const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type.toLowerCase()]; if (!!templateMapping) { acc.push({ name: sh.content.match(/[^/]+$/)?.[0] || '',