[8.x] [Observability Onboarding] Update onboarding landing page (#194565) (#195329)

# Backport This will backport the following commits from `main` to `8.x`: - [[Observability Onboarding] Update onboarding landing page (#194565)](https://github.com/elastic/kibana/pull/194565)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Thom Heymann <190132+thomheymann@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-10-15 20:32:49 +11:00 · 2024-10-15 20:32:49 +11:00 · d7ee2da34b
commit d7ee2da34b
parent 5a67e4d2e1
13 changed files with 326 additions and 308 deletions
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@ -10,7 +10,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FunctionComponent } from 'react';
 import {
-  EuiAvatar,
  EuiCheckableCard,
  EuiFlexGroup,
  EuiFlexItem,
@ -21,12 +20,13 @@ import {
  useGeneratedHtmlId,
  useEuiTheme,
  EuiBadge,
+  EuiFlexGrid,
 } from '@elastic/eui';
+import { css } from '@emotion/react';

 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { OnboardingFlowPackageList } from '../packages_list';
-import { useCustomMargin } from '../shared/use_custom_margin';
 import { Category } from './types';
 import { useCustomCardsForCategory } from './use_custom_cards_for_category';
 import { useVirtualSearchResults } from './use_virtual_search_results';
@ -44,51 +44,63 @@ interface UseCaseOption {
 export const OnboardingFlowForm: FunctionComponent = () => {
  const options: UseCaseOption[] = [
    {
-      id: 'logs',
+      id: 'host',
      label: i18n.translate(
-        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel',
-        { defaultMessage: 'Collect and analyze logs' }
+        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.hostLabel',
+        { defaultMessage: 'Host' }
      ),
      description: i18n.translate(
-        'xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel',
+        'xpack.observability_onboarding.onboardingFlowForm.hostDescription',
        {
          defaultMessage:
-            'Detect patterns, gain insights from logs, get alerted when surpassing error thresholds',
+            'Monitor your host and the services running on it, set-up SLO, get alerted, remediate performance issues',
        }
      ),
-      logos: ['azure', 'aws', 'nginx', 'gcp'],
-      showIntegrationsBadge: true,
+      logos: ['kubernetes', 'opentelemetry', 'apache', 'mysql'],
    },
    {
-      id: 'apm',
+      id: 'kubernetes',
      label: i18n.translate(
-        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel',
-        { defaultMessage: 'Monitor my application performance' }
+        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.kubernetesLabel',
+        { defaultMessage: 'Kubernetes' }
      ),
      description: i18n.translate(
-        'xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel',
+        'xpack.observability_onboarding.onboardingFlowForm.kubernetesDescription',
        {
          defaultMessage:
-            'Catch application problems, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
+            'Observe your Kubernetes cluster, and your container workloads using logs, metrics, traces and profiling data',
+        }
+      ),
+      logos: ['kubernetes', 'opentelemetry'],
+    },
+    {
+      id: 'application',
+      label: i18n.translate(
+        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.applicationLabel',
+        { defaultMessage: 'Application' }
+      ),
+      description: i18n.translate(
+        'xpack.observability_onboarding.onboardingFlowForm.applicationDescription',
+        {
+          defaultMessage:
+            'Monitor the frontend and backend application that you have developed, set-up synthetic monitors',
        }
      ),
      logos: ['opentelemetry', 'java', 'javascript', 'dotnet'],
    },
    {
-      id: 'infra',
+      id: 'cloud',
      label: i18n.translate(
-        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel',
-        { defaultMessage: 'Monitor infrastructure' }
+        'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.cloudLabel',
+        { defaultMessage: 'Cloud' }
      ),
      description: i18n.translate(
-        'xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel',
+        'xpack.observability_onboarding.onboardingFlowForm.cloudDescription',
        {
-          defaultMessage:
-            'Check my system’s health, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
+          defaultMessage: 'Ingest telemetry data from the Cloud for your applications and services',
        }
      ),
-      logos: ['kubernetes', 'prometheus', 'docker', 'opentelemetry'],
-      showIntegrationsBadge: true,
+      logos: ['azure', 'aws', 'gcp'],
    },
  ];

@ -97,7 +109,6 @@ export const OnboardingFlowForm: FunctionComponent = () => {
      context: { isCloud },
    },
  } = useKibana<ObservabilityOnboardingAppServices>();
-  const customMargin = useCustomMargin();
  const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' });
  const categorySelectorTitleId = useGeneratedHtmlId();
  const packageListTitleId = useGeneratedHtmlId();
@ -152,33 +163,72 @@ export const OnboardingFlowForm: FunctionComponent = () => {

  return (
    <EuiPanel hasBorder paddingSize="xl">
-      <TitleWithIcon
-        id={categorySelectorTitleId}
-        iconType="createSingleMetricJob"
-        title={i18n.translate(
-          'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel',
-          {
-            defaultMessage: 'What do you want to monitor?',
-          }
-        )}
-      />
-      <EuiSpacer size="m" />
-      <EuiFlexGroup
-        css={{ ...customMargin, maxWidth: '560px' }}
-        gutterSize="l"
-        direction="column"
-        role="group"
-        aria-labelledby={categorySelectorTitleId}
-      >
+      <EuiTitle size="s" id={categorySelectorTitleId}>
+        <strong>
+          {i18n.translate(
+            'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel',
+            {
+              defaultMessage: 'What do you want to monitor?',
+            }
+          )}
+        </strong>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiFlexGrid columns={2} role="group" aria-labelledby={categorySelectorTitleId}>
        {options.map((option) => (
          <EuiFlexItem
            key={option.id}
-            data-test-subj={`observabilityOnboardingUseCaseCard-${option.id}`}
+            data-test-subj={`observabilityOnboardingUseCaseCard-${option.id}`} // EuiCheckableCard does not forward `data-test-subj` prop so using parent element instead
          >
            <EuiCheckableCard
              id={`${radioGroupId}_${option.id}`}
              name={radioGroupId}
-              label={<EuiText css={{ fontWeight: 'bold' }}>{option.label}</EuiText>}
+              label={
+                <>
+                  <EuiText>
+                    <strong>{option.label}</strong>
+                  </EuiText>
+                  {/* The description and logo icons are passed into `label` prop instead of `children` to ensure they are clickable */}
+                  <EuiSpacer size="s" />
+                  <EuiText
+                    color="subdued"
+                    size="s"
+                    css={css`
+                      flex-grow: 1; // Allow the description to grow to fill the space
+                    `}
+                  >
+                    {option.description}
+                  </EuiText>
+                  {(option.logos || option.showIntegrationsBadge) && (
+                    <>
+                      <EuiSpacer size="m" />
+                      <EuiFlexGroup
+                        gutterSize="m"
+                        responsive={false}
+                        css={css`
+                          flex-grow: 0; // Prevent the logos from growing to align to the bottom
+                        `}
+                        aria-hidden // Hide from screen readers as the logos are mainly decorative
+                      >
+                        {option.logos?.map((logo) => (
+                          <EuiFlexItem key={logo} grow={false}>
+                            <LogoIcon logo={logo} size="l" />
+                          </EuiFlexItem>
+                        ))}
+                        {option.showIntegrationsBadge && (
+                          <EuiBadge color="hollow">
+                            <FormattedMessage
+                              defaultMessage="+ Integrations"
+                              id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
+                              description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
+                            />
+                          </EuiBadge>
+                        )}
+                      </EuiFlexGroup>
+                    </>
+                  )}
+                </>
+              }
              checked={option.id === searchParams.get('category')}
              /**
               * onKeyDown and onKeyUp handlers disable
@ -204,54 +254,62 @@ export const OnboardingFlowForm: FunctionComponent = () => {
                  );
                }
              }}
-            >
-              <EuiText color="subdued" size="s">
-                {option.description}
-              </EuiText>
-              {(option.logos || option.showIntegrationsBadge) && (
-                <>
-                  <EuiSpacer size="m" />
-                  <EuiFlexGroup gutterSize="s" responsive={false}>
-                    {option.logos?.map((logo) => (
-                      <EuiFlexItem key={logo} grow={false}>
-                        <LogoIcon logo={logo} />
-                      </EuiFlexItem>
-                    ))}
-                    {option.showIntegrationsBadge && (
-                      <EuiBadge color="hollow">
-                        <FormattedMessage
-                          defaultMessage="+ Integrations"
-                          id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
-                          description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
-                        />
-                      </EuiBadge>
-                    )}
-                  </EuiFlexGroup>
-                </>
-              )}
-            </EuiCheckableCard>
+              css={css`
+                flex-grow: 1;
+
+                & > .euiPanel {
+                  display: flex;
+
+                  & > .euiCheckableCard__label {
+                    display: flex;
+                    flex-direction: column;
+                  }
+                }
+              `}
+            />
          </EuiFlexItem>
        ))}
-      </EuiFlexGroup>
+      </EuiFlexGrid>
      {/* Hiding element instead of not rending these elements in order to preload available packages on page load */}
      <div
        hidden={!searchParams.get('category') || !customCards}
        role="group"
        aria-labelledby={packageListTitleId}
      >
-        <EuiSpacer />
+        <EuiSpacer size="xxl" />
        <div ref={suggestedPackagesRef}>
-          <TitleWithIcon
-            id={packageListTitleId}
-            iconType="savedObjectsApp"
-            title={i18n.translate(
-              'xpack.observability_onboarding.experimentalOnboardingFlow.whatTypeOfResourceLabel',
-              {
-                defaultMessage: 'What type of resource are you monitoring?',
-              }
-            )}
-          />
-          <EuiSpacer size="s" />
+          <EuiTitle size="s" id={packageListTitleId}>
+            <strong>
+              {searchParams.get('category') === 'kubernetes'
+                ? i18n.translate(
+                    'xpack.observability_onboarding.experimentalOnboardingFlow.kubernetesPackagesTitle',
+                    {
+                      defaultMessage: 'Monitor your Kubernetes cluster using:',
+                    }
+                  )
+                : searchParams.get('category') === 'application'
+                ? i18n.translate(
+                    'xpack.observability_onboarding.experimentalOnboardingFlow.applicationPackagesTitle',
+                    {
+                      defaultMessage: 'Monitor your Application using:',
+                    }
+                  )
+                : searchParams.get('category') === 'cloud'
+                ? i18n.translate(
+                    'xpack.observability_onboarding.experimentalOnboardingFlow.cloudPackagesTitle',
+                    {
+                      defaultMessage: 'Select your Cloud provider:',
+                    }
+                  )
+                : i18n.translate(
+                    'xpack.observability_onboarding.experimentalOnboardingFlow.hostPackagesTitle',
+                    {
+                      defaultMessage: 'Monitor your Host using:',
+                    }
+                  )}
+            </strong>
+          </EuiTitle>
+          <EuiSpacer size="m" />
          <OnboardingFlowPackageList
            customCards={customCards}
            flowSearch={integrationSearch}
@ -259,12 +317,16 @@ export const OnboardingFlowForm: FunctionComponent = () => {
          />
        </div>
        <div ref={searchResultsRef}>
-          <EuiText css={customMargin} size="s" color="subdued">
-            <FormattedMessage
-              id="xpack.observability_onboarding.experimentalOnboardingFlow.form.searchPromptText"
-              defaultMessage="Not seeing yours? Search through our 130 ways of ingesting data:"
-            />
+          <EuiSpacer size="m" />
+          <EuiText size="s" color="subdued">
+            <strong>
+              <FormattedMessage
+                id="xpack.observability_onboarding.experimentalOnboardingFlow.form.searchPromptText"
+                defaultMessage="Search through other ways of ingesting data:"
+              />
+            </strong>
          </EuiText>
+          <EuiSpacer size="m" />
          <OnboardingFlowPackageList
            showSearchBar={true}
            searchQuery={integrationSearch}
@ -286,25 +348,6 @@ export const OnboardingFlowForm: FunctionComponent = () => {
  );
 };

-interface TitleWithIconProps {
-  title: string;
-  iconType: string;
-  id?: string;
-}
-
-const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType, id }) => (
-  <EuiFlexGroup responsive={false} gutterSize="m" alignItems="center">
-    <EuiFlexItem grow={false}>
-      <EuiAvatar size="l" name={title} iconType={iconType} iconSize="l" color="subdued" />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiTitle size="s" id={id}>
-        <strong>{title}</strong>
-      </EuiTitle>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
 function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
  // Fixed header in Kibana is different height between serverless and stateful so need to calculate dynamically.
  const fixedHeaders = document.querySelectorAll('#globalHeaderBars [data-fixed-header=true]');
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/types.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/types.ts
@ -5,4 +5,4 @@
 * 2.0.
 */

-export type Category = 'apm' | 'infra' | 'logs';
+export type Category = 'host' | 'kubernetes' | 'application' | 'cloud';
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.tsx
@ -4,17 +4,16 @@
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */
-
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { EuiFlexItem } from '@elastic/eui';
 import { reactRouterNavigate, useKibana } from '@kbn/kibana-react-plugin/public';
 import { useHistory } from 'react-router-dom';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { ObservabilityOnboardingAppServices } from '../..';
-import { CustomCard, FeaturedCard, VirtualCard } from '../packages_list/types';
+import { CustomCard } from '../packages_list/types';
 import { Category } from './types';
-
-function toFeaturedCard(name: string): FeaturedCard {
-  return { type: 'featured', name };
-}
+import { LogoIcon } from '../shared/logo_icon';

 export function useCustomCardsForCategory(
  createCollectionCardHandler: (query: string) => () => void,
@ -32,35 +31,124 @@ export function useCustomCardsForCategory(
  const getUrlForApp = application?.getUrlForApp;

  const { href: autoDetectUrl } = reactRouterNavigate(history, `/auto-detect/${location.search}`);
-  const { href: customLogsUrl } = reactRouterNavigate(history, `/customLogs/${location.search}`);
  const { href: otelLogsUrl } = reactRouterNavigate(history, `/otel-logs/${location.search}`);
  const { href: kubernetesUrl } = reactRouterNavigate(history, `/kubernetes/${location.search}`);

  const apmUrl = `${getUrlForApp?.('apm')}/${isServerless ? 'onboarding' : 'tutorial'}`;
  const otelApmUrl = isServerless ? `${apmUrl}?agent=openTelemetry` : apmUrl;

-  const otelCard: VirtualCard = {
-    id: 'otel-logs',
-    type: 'virtual',
-    release: 'preview',
-    title: 'OpenTelemetry',
-    description:
-      'Collect logs and host metrics using the Elastic distribution of the OpenTelemetry Collector',
-    name: 'custom-logs-virtual',
-    categories: ['observability'],
-    icons: [
-      {
-        type: 'svg',
-        src: http?.staticAssets.getPluginAssetHref('opentelemetry.svg') ?? '',
-      },
-    ],
-    url: otelLogsUrl,
-    version: '',
-    integration: '',
-  };
-
  switch (category) {
-    case 'apm':
+    case 'host':
+      return [
+        {
+          id: 'auto-detect-logs',
+          name: 'auto-detect-logs-virtual',
+          type: 'virtual',
+          title: 'Auto-detect Integrations with Elastic Agent',
+          description: i18n.translate(
+            'xpack.observability_onboarding.useCustomCardsForCategory.scanYourHostForLabel',
+            {
+              defaultMessage: 'Scan your host for log and metric files, auto-install integrations',
+            }
+          ),
+          extraLabelsBadges: [
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="apple" size="m" />
+            </EuiFlexItem>,
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="linux" size="m" />
+            </EuiFlexItem>,
+          ],
+          categories: ['observability'],
+          icons: [
+            {
+              type: 'eui',
+              src: 'agentApp',
+            },
+          ],
+          url: autoDetectUrl,
+          version: '',
+          integration: '',
+          isQuickstart: true,
+        },
+        {
+          id: 'otel-logs',
+          name: 'custom-logs-virtual',
+          type: 'virtual',
+          title: 'Elastic Distribution for OTel Collector',
+          description: 'Collect logs and host metrics using the Elastic Distro for OTel Collector ',
+          extraLabelsBadges: [
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="apple" size="m" />
+            </EuiFlexItem>,
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="linux" size="m" />
+            </EuiFlexItem>,
+          ],
+          categories: ['observability'],
+          icons: [
+            {
+              type: 'svg',
+              src: http?.staticAssets.getPluginAssetHref('opentelemetry.svg') ?? '',
+            },
+          ],
+          url: otelLogsUrl,
+          version: '',
+          integration: '',
+          isQuickstart: true,
+        },
+      ];
+
+    case 'kubernetes':
+      return [
+        {
+          id: 'kubernetes-quick-start',
+          name: 'kubernetes-quick-start',
+          type: 'virtual',
+          title: 'Elastic Agent',
+          description: 'Monitor your Kubernetes cluster with Elastic Agent, collect container logs',
+          extraLabelsBadges: [
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="kubernetes" size="m" />
+            </EuiFlexItem>,
+          ],
+          categories: ['observability'],
+          icons: [
+            {
+              type: 'eui',
+              src: 'agentApp',
+            },
+          ],
+          url: kubernetesUrl,
+          version: '',
+          integration: '',
+          isQuickstart: true,
+        },
+        {
+          id: 'otel-logs',
+          name: 'custom-logs-virtual',
+          type: 'virtual',
+          title: 'Elastic Distribution for OTel Collector',
+          description: 'Collect logs, metrics and traces for Kubernetes cluster monitoring',
+          extraLabelsBadges: [
+            <EuiFlexItem grow={false}>
+              <LogoIcon logo="kubernetes" size="m" />
+            </EuiFlexItem>,
+          ],
+          categories: ['observability'],
+          icons: [
+            {
+              type: 'svg',
+              src: http?.staticAssets.getPluginAssetHref('opentelemetry.svg') ?? '',
+            },
+          ],
+          url: otelLogsUrl,
+          version: '',
+          integration: '',
+        },
+      ];
+
+    case 'application':
      return [
        {
          id: 'apm-virtual',
@ -114,109 +202,9 @@ export function useCustomCardsForCategory(
          integration: '',
        },
      ];
-    case 'infra':
+
+    case 'cloud':
      return [
-        {
-          id: 'kubernetes-quick-start',
-          type: 'virtual',
-          title: 'Kubernetes',
-          release: 'preview',
-          description: 'Collect logs and metrics from Kubernetes using minimal configuration',
-          name: 'kubernetes-quick-start',
-          categories: ['observability'],
-          icons: [
-            {
-              type: 'svg',
-              src: http?.staticAssets.getPluginAssetHref('kubernetes.svg') ?? '',
-            },
-          ],
-          url: kubernetesUrl,
-          version: '',
-          integration: '',
-        },
-        toFeaturedCard('docker'),
-        otelCard,
-        {
-          id: 'azure-virtual',
-          type: 'virtual',
-          title: 'Azure',
-          description: 'Collect logs and metrics from Microsoft Azure',
-          name: 'azure',
-          categories: ['observability'],
-          icons: [],
-          url: 'https://azure.com',
-          version: '',
-          integration: '',
-          isCollectionCard: true,
-          onCardClick: createCollectionCardHandler('azure'),
-        },
-        {
-          id: 'aws-virtual',
-          type: 'virtual',
-          title: 'AWS',
-          description: 'Collect logs and metrics from Amazon Web Services (AWS)',
-          name: 'aws',
-          categories: ['observability'],
-          icons: [],
-          url: 'https://aws.com',
-          version: '',
-          integration: '',
-          isCollectionCard: true,
-          onCardClick: createCollectionCardHandler('aws'),
-        },
-        {
-          id: 'gcp-virtual',
-          type: 'virtual',
-          title: 'Google Cloud Platform',
-          description: 'Collect logs and metrics from Google Cloud Platform',
-          name: 'gcp',
-          categories: ['observability'],
-          icons: [],
-          url: '',
-          version: '',
-          integration: '',
-          isCollectionCard: true,
-          onCardClick: createCollectionCardHandler('gcp'),
-        },
-      ];
-    case 'logs':
-      return [
-        {
-          id: 'auto-detect-logs',
-          type: 'virtual',
-          title: 'Auto-detect logs and metrics',
-          release: 'preview',
-          description: 'This installation scans your host and auto-detects log files and metrics',
-          name: 'auto-detect-logs-virtual',
-          categories: ['observability'],
-          icons: [
-            {
-              type: 'eui',
-              src: 'consoleApp',
-            },
-          ],
-          url: autoDetectUrl,
-          version: '',
-          integration: '',
-        },
-        {
-          id: 'custom-logs',
-          type: 'virtual',
-          title: 'Stream log files',
-          description: 'Stream any logs into Elastic in a simple way and explore their data',
-          name: 'custom-logs-virtual',
-          categories: ['observability'],
-          icons: [
-            {
-              type: 'eui',
-              src: 'filebeatApp',
-            },
-          ],
-          url: customLogsUrl,
-          version: '',
-          integration: '',
-        },
-        otelCard,
        {
          id: 'azure-logs-virtual',
          type: 'virtual',
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_virtual_search_results.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_virtual_search_results.ts
@ -20,10 +20,12 @@ export function useVirtualSearchResults(): CustomCard[] {
  } = useKibana<ObservabilityOnboardingAppServices>();

  const history = useHistory();
+  const { href: customLogsUrl } = reactRouterNavigate(history, `/customLogs/${location.search}`);
  const { href: firehoseUrl } = reactRouterNavigate(history, `/firehose/${location.search}`);
  const getUrlForApp = application?.getUrlForApp;
  const firehoseQuickstartCard: CustomCard = {
    id: 'firehose-quick-start',
+    name: 'firehose-quick-start',
    type: 'virtual',
    title: i18n.translate('xpack.observability_onboarding.packageList.uploadFileTitle', {
      defaultMessage: 'AWS Firehose',
@ -35,7 +37,6 @@ export function useVirtualSearchResults(): CustomCard[] {
        defaultMessage: 'Collect logs and metrics from Amazon Web Services (AWS).',
      }
    ),
-    name: 'firehose-quick-start',
    categories: [],
    icons: [
      {
@ -46,7 +47,7 @@ export function useVirtualSearchResults(): CustomCard[] {
    url: firehoseUrl,
    version: '',
    integration: '',
-    isCollectionCard: false,
+    isQuickstart: true,
  };

  return [
@ -76,6 +77,23 @@ export function useVirtualSearchResults(): CustomCard[] {
      integration: '',
      isCollectionCard: false,
    },
+    {
+      id: 'custom-logs',
+      type: 'virtual',
+      title: 'Stream log files',
+      description: 'Stream any logs into Elastic in a simple way and explore their data',
+      name: 'custom-logs-virtual',
+      categories: ['observability'],
+      icons: [
+        {
+          type: 'eui',
+          src: 'filebeatApp',
+        },
+      ],
+      url: customLogsUrl,
+      version: '',
+      integration: '',
+    },
    /**
     * The new Firehose card should only be visible on Cloud
     * as Firehose integration requires additional proxy,
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx
@ -9,12 +9,10 @@ import type { AvailablePackagesHookType, IntegrationCardItem } from '@kbn/fleet-
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButton, EuiCallOut, EuiSearchBar, EuiSkeletonText } from '@elastic/eui';
-import { css } from '@emotion/react';
 import React, { useRef, Suspense, useEffect } from 'react';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import { PackageList, fetchAvailablePackagesHook } from './lazy';
 import { useIntegrationCardList } from './use_integration_card_list';
-import { useCustomMargin } from '../shared/use_custom_margin';
 import { CustomCard } from './types';

 interface Props {
@ -62,7 +60,6 @@ const PackageListGridWrapper = ({
  excludePackageIdList = [],
  onLoaded,
 }: WrapperProps) => {
-  const customMargin = useCustomMargin();
  const { filteredCards, isLoading } = useAvailablePackages({
    prereleaseIntegrationsEnabled: false,
  });
@ -89,25 +86,19 @@ const PackageListGridWrapper = ({

  return (
    <Suspense fallback={<Loading />}>
-      <div css={customMargin} ref={packageListRef}>
+      <div ref={packageListRef}>
        {showSearchBar && (
-          <div
-            css={css`
-              max-width: 600px;
-            `}
-          >
-            <EuiSearchBar
-              box={{
-                incremental: true,
-              }}
-              onChange={({ queryText, error }) => {
-                if (error) return;
+          <EuiSearchBar
+            box={{
+              incremental: true,
+            }}
+            onChange={({ queryText, error }) => {
+              if (error) return;

-                setSearchQuery?.(queryText);
-              }}
-              query={searchQuery ?? ''}
-            />
-          </div>
+              setSearchQuery?.(queryText);
+            }}
+            query={searchQuery ?? ''}
+          />
        )}
        {showPackageList && (
          <PackageList
@ -123,7 +114,7 @@ const PackageListGridWrapper = ({
            categories={[]}
            setUrlandReplaceHistory={() => {}}
            setUrlandPushHistory={() => {}}
-            showCardLabels={false}
+            showCardLabels={true}
          />
        )}
      </div>
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/use_integration_card_list.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/use_integration_card_list.ts
@ -9,7 +9,6 @@ import { useMemo } from 'react';
 import { IntegrationCardItem } from '@kbn/fleet-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { CustomCard } from './types';
-import { toCustomCard } from './utils';

 export function toOnboardingPath({
  basePath,
@ -68,9 +67,9 @@ function formatCustomCards(
  const cards: IntegrationCardItem[] = [];
  for (const card of customCards) {
    if (card.type === 'featured' && !!featuredCards[card.name]) {
-      cards.push(toCustomCard(rewriteUrl(featuredCards[card.name]!)));
+      cards.push(rewriteUrl(featuredCards[card.name]!));
    } else if (card.type === 'virtual') {
-      cards.push(toCustomCard(rewriteUrl(card)));
+      cards.push(rewriteUrl(card));
    }
  }
  return cards;
@ -87,8 +86,7 @@ function useFilteredCards(
    const integrationCards = integrationsList
      .filter((card) => !excludePackageIdList.includes(card.id))
      .filter((card) => card.categories.some((category) => selectedCategory.includes(category)))
-      .map(rewriteUrl)
-      .map(toCustomCard);
+      .map(rewriteUrl);

    if (!customCards) {
      return { featuredCards: {}, integrationCards };
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts
@ -1,21 +0,0 @@
-/*
- * 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 { IntegrationCardItem } from '@kbn/fleet-plugin/public';
-
-export const QUICKSTART_FLOWS = [
-  'auto-detect-logs-virtual',
-  'kubernetes-quick-start',
-  'firehose-quick-start',
-];
-
-export const toCustomCard = (card: IntegrationCardItem) => ({
-  ...card,
-  isQuickstart: QUICKSTART_FLOWS.includes(card.name),
-});
-
-export const isQuickstart = (cardName: string) => QUICKSTART_FLOWS.includes(cardName);
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/shared/logo_icon.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/shared/logo_icon.tsx
@ -32,7 +32,9 @@ export type SupportedLogo =
  | 'kafka'
  | 'mongodb'
  | 'apache_tomcat'
-  | 'firehose';
+  | 'firehose'
+  | 'linux'
+  | 'apple';

 export function isSupportedLogo(logo: string): logo is SupportedLogo {
  return [
@ -57,6 +59,8 @@ export function isSupportedLogo(logo: string): logo is SupportedLogo {
    'kafka',
    'mongodb',
    'apache_tomcat',
+    'linux',
+    'apple',
  ].includes(logo);
 }

--- a/x-pack/plugins/observability_solution/observability_onboarding/public/assets/apple.svg
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/apple.svg
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/assets/linux.svg
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/assets/linux.svg
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -31970,9 +31970,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemDescription": "Explorer notre environnement de démonstration en direct",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLabel": "Environnement de démonstration",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLinkLabel": "Explorer la démonstration",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel": "Collectez et analysez les logs",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel": "Surveiller les performances de mon application",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel": "Monitorer l’infrastructure",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemDescription": "Échanger à propos d'Elastic",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLabel": "Explorer le forum",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLinkLabel": "Forum de discussion",
@ -31983,7 +31980,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemDescription": "Obtenez de l'aide dans l’ouverture d’un cas",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLabel": "Hub de support technique",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLinkLabel": "Ouvrir le Hub de support technique",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.whatTypeOfResourceLabel": "Quel type de ressources monitorez-vous ?",
    "xpack.observability_onboarding.fetcher.error.status": "Erreur",
    "xpack.observability_onboarding.fetcher.error.title": "Erreur lors de la récupération des ressources",
    "xpack.observability_onboarding.fetcher.error.url": "URL",
@ -32033,9 +32029,6 @@
    "xpack.observability_onboarding.installIntegration.error.unauthorized": "Le privilège Kibana {requiredKibanaPrivileges} requis est manquant. Veuillez ajouter le privilège requis au rôle de l'utilisateur authentifié.",
    "xpack.observability_onboarding.installOtelCollector.configStep.copyCommand": "Copier dans le presse-papiers",
    "xpack.observability_onboarding.installOtelCollector.configStep.downloadConfigButton": "Télécharger le manifeste",
-    "xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel": "Vérifier l'état de mon système, m’alerter des problèmes de performances ou des violations de SLO, accélérer l'analyse des causes profondes et les mesures correctives",
-    "xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel": "Détecter les problèmes liés aux applications, m’alerter des problèmes de performances ou des violations de SLO, accélérer l'analyse des causes profondes et les mesures correctives",
-    "xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel": "Détecter les modèles, obtenir des informations à partir des logs et être alerté lorsque vous dépassez les seuils d'erreur",
    "xpack.observability_onboarding.otelLogs.status.failed": "Échec de l'installation de l'intégration",
    "xpack.observability_onboarding.otelLogs.status.failedDetails": "Les données entrantes peuvent ne pas être indexées correctement. Détails :",
    "xpack.observability_onboarding.otelLogsPanel.choosePlatform": "Choisissez une plateforme",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -31715,9 +31715,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemDescription": "Elasticのライブデモを見る",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLabel": "デモ環境",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLinkLabel": "デモの探索",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel": "ログを収集して分析",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel": "アプリケーションのパフォーマンスを監視",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel": "インフラを監視",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemDescription": "Elasticに関する意見を交換",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLabel": "フォーラムを探索",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLinkLabel": "ディスカッションフォーラム",
@ -31728,7 +31725,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemDescription": "ケースを作成してヘルプを依頼",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLabel": "サポートハブ",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLinkLabel": "サポートハブを開く",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.whatTypeOfResourceLabel": "監視しているリソースのタイプはどれですか？",
    "xpack.observability_onboarding.fetcher.error.status": "エラー",
    "xpack.observability_onboarding.fetcher.error.title": "リソースの取得中にエラーが発生しました",
    "xpack.observability_onboarding.fetcher.error.url": "URL",
@ -31778,9 +31774,6 @@
    "xpack.observability_onboarding.installIntegration.error.unauthorized": "必要なkibana権限{requiredKibanaPrivileges}がありません。認証されたユーザーのロールに必要な権限を追加してください。",
    "xpack.observability_onboarding.installOtelCollector.configStep.copyCommand": "クリップボードにコピー",
    "xpack.observability_onboarding.installOtelCollector.configStep.downloadConfigButton": "マニフェストのダウンロード",
-    "xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel": "システムの正常性を確認し、パフォーマンスの問題やSLO違反のアラートを受信して、根本分析や修正を迅速化",
-    "xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel": "アプリケーションの問題を特定し、パフォーマンスの問題やSLO違反のアラートを受信して、根本分析や修正を迅速化",
-    "xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel": "パターンを検出し、ログからインサイトを引き出し、エラーしきい値を超えたときにアラートを受信",
    "xpack.observability_onboarding.otelLogs.status.failed": "統合のインストールに失敗しました",
    "xpack.observability_onboarding.otelLogs.status.failedDetails": "受信データは正しくインデックス化されていない可能性があります。詳細：",
    "xpack.observability_onboarding.otelLogsPanel.choosePlatform": "プラットフォームを選択",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -31757,9 +31757,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemDescription": "浏览我们的实时演示环境",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLabel": "演示环境",
    "xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLinkLabel": "浏览演示",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel": "收集和分析日志",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel": "监测我的应用程序性能",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel": "监测基础设施",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemDescription": "交流有关 Elastic 的看法",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLabel": "浏览论坛",
    "xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLinkLabel": "讨论论坛",
@ -31770,7 +31767,6 @@
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemDescription": "通过创建案例获取帮助",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLabel": "支持中心",
    "xpack.observability_onboarding.experimentalOnboardingFlow.supportHubFlexItemLinkLabel": "打开支持中心",
-    "xpack.observability_onboarding.experimentalOnboardingFlow.whatTypeOfResourceLabel": "您正监测哪类资源？",
    "xpack.observability_onboarding.fetcher.error.status": "错误",
    "xpack.observability_onboarding.fetcher.error.title": "提取资源时出错",
    "xpack.observability_onboarding.fetcher.error.url": "URL",
@ -31820,9 +31816,6 @@
    "xpack.observability_onboarding.installIntegration.error.unauthorized": "缺失所需的 Kibana 权限 {requiredKibanaPrivileges}，请将所需权限添加到已通过身份验证的用户的角色。",
    "xpack.observability_onboarding.installOtelCollector.configStep.copyCommand": "复制到剪贴板",
    "xpack.observability_onboarding.installOtelCollector.configStep.downloadConfigButton": "下载清单",
-    "xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel": "检查我的系统的运行状况，获取有关性能问题或 SLO 违规的告警，加快根本原因分析和补救",
-    "xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel": "发现应用程序问题，获取有关性能问题或 SLO 违规的告警，加快根本原因分析和补救",
-    "xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel": "检测模式，从日志中获取洞见，在超出错误阈值时接收告警",
    "xpack.observability_onboarding.otelLogs.status.failed": "集成安装失败",
    "xpack.observability_onboarding.otelLogs.status.failedDetails": "传入数据可能未正确索引。详情：",
    "xpack.observability_onboarding.otelLogsPanel.choosePlatform": "选择平台",