From 02266345cb4199342867e3d9d5718090297f5700 Mon Sep 17 00:00:00 2001 From: Mykola Harmash Date: Mon, 14 Oct 2024 14:14:23 +0200 Subject: [PATCH] [Onboarding][Auto-detect] Update design for supported integrations badges (#195351) Closes https://github.com/elastic/observability-dev/issues/4007 Updates integration badges according to [the latest designs](https://www.figma.com/design/CPhMyRNOgo0wsEiaIMZJ14/Onboarding-Quick-Starts?node-id=3015-58062&t=5tvnrPIOkfg7xAJp-1). ![CleanShot 2024-10-08 at 08 57 48@2x](https://github.com/user-attachments/assets/1ae0d9d7-3b1f-4acd-b16f-ad1cbc09db88) --- .../auto_detect/auto_detect_panel.tsx | 27 +---- .../supported_integrations_list.tsx | 98 +++++++++++++++++++ .../public/assets/docker.svg | 10 ++ .../public/assets/nginx.svg | 4 + 4 files changed, 114 insertions(+), 25 deletions(-) create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/supported_integrations_list.tsx create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/assets/docker.svg create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/assets/nginx.svg 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 @@ + + + +