diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx
index d03936c6a89ac..5d62f1060b50e 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx
@@ -13,9 +13,6 @@ import {
EuiCodeBlock,
EuiSpacer,
EuiSkeletonText,
- EuiBadge,
- EuiFlexGroup,
- EuiFlexItem,
EuiText,
useGeneratedHtmlId,
EuiIcon,
@@ -38,6 +35,7 @@ import { isSupportedLogo, LogoIcon } from '../../shared/logo_icon';
import { FeedbackButtons } from '../shared/feedback_buttons';
import { ObservabilityOnboardingContextValue } from '../../../plugin';
import { useAutoDetectTelemetry } from './use_auto_detect_telemetry';
+import { SupportedIntegrationsList } from './supported_integrations_list';
export const AutoDetectPanel: FunctionComponent = () => {
const { status, data, error, refetch, installedIntegrations } = useOnboardingFlow();
@@ -92,28 +90,7 @@ export const AutoDetectPanel: FunctionComponent = () => {
-
- {[
- 'Apache',
- 'Docker',
- 'Nginx',
- 'System',
- 'MySQL',
- 'PostgreSQL',
- 'Redis',
- 'HAProxy',
- 'Kafka',
- 'RabbitMQ',
- 'Prometheus',
- 'Tomcat',
- 'MongoDB',
- 'Custom .log files',
- ].map((item) => (
-
- {item}
-
- ))}
-
+
{/* Bash syntax highlighting only highlights a few random numbers (badly) so it looks less messy to go with plain text */}
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/supported_integrations_list.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/supported_integrations_list.tsx
new file mode 100644
index 0000000000000..8351b7d709917
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/supported_integrations_list.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+ EuiBadge,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiText,
+ EuiTextColor,
+ EuiToolTip,
+ IconType,
+ useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import apacheIconSrc from '../../../assets/apache.svg';
+import dockerIconSrc from '../../../assets/docker.svg';
+import nginxIconSrc from '../../../assets/nginx.svg';
+import mysqlIconSrc from '../../../assets/mysql.svg';
+
+const SUPPORTED_INTEGRATIONS_LIST = [
+ 'Apache',
+ 'Docker',
+ 'Nginx',
+ 'System',
+ 'MySQL',
+ 'PostgreSQL',
+ 'Redis',
+ 'Haproxy',
+ 'Kafka',
+ 'RabbitMQ',
+ 'Prometheus',
+ 'Apache Tomcat',
+ 'MongoDB',
+] as const;
+
+type SupportedIntegrationName = (typeof SUPPORTED_INTEGRATIONS_LIST)[number];
+
+interface SupportedIntegrationItem {
+ title: SupportedIntegrationName;
+ icon: IconType;
+}
+
+const FEATURED_INTEGRATIONS_LIST: SupportedIntegrationItem[] = [
+ { title: 'Apache', icon: apacheIconSrc },
+ { title: 'Docker', icon: dockerIconSrc },
+ { title: 'Nginx', icon: nginxIconSrc },
+ { title: 'MySQL', icon: mysqlIconSrc },
+ { title: 'System', icon: 'desktop' },
+];
+
+export function SupportedIntegrationsList() {
+ const {
+ euiTheme: { colors },
+ } = useEuiTheme();
+ const customLogFilesTitle = i18n.translate(
+ 'xpack.observability_onboarding.autoDetectPanel.supportedIntegrationsList.customIntegrationTitle',
+ { defaultMessage: 'Custom .log files' }
+ );
+ return (
+
+ {FEATURED_INTEGRATIONS_LIST.map(({ title, icon }) => (
+
+
+ {title}
+
+
+ ))}
+
+
+ {customLogFilesTitle}
+
+
+
+
+ {SUPPORTED_INTEGRATIONS_LIST.map((integration) => (
+ - {integration}
+ ))}
+ - {customLogFilesTitle}
+
+
+ }
+ >
+
+
+ {`+${SUPPORTED_INTEGRATIONS_LIST.length - FEATURED_INTEGRATIONS_LIST.length}`}
+
+
+
+
+ );
+}
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/assets/docker.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/docker.svg
new file mode 100644
index 0000000000000..0833b403ad87c
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/docker.svg
@@ -0,0 +1,10 @@
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/assets/nginx.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/nginx.svg
new file mode 100644
index 0000000000000..d01940ba02a91
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/nginx.svg
@@ -0,0 +1,4 @@
+