[Automatic Migrations] Migrations page with nav #260379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

kqualters-elastic merged 12 commits into elastic:main from kqualters-elastic:migrations-page-with-nav

Apr 6, 2026

src/platform/packages/shared/deeplinks/security/deep_links.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -79,6 +79,7 @@ export enum SecurityPageName { @@
       siemMigrationsLanding = 'siem_migrations',
       siemMigrationsRules = 'siem_migrations-rules',
       siemMigrationsDashboards = 'siem_migrations-dashboards',
+      siemMigrationsManage = 'siem_migrations-manage',
       /*
        * Warning: Computed values are not permitted in an enum with string valued members
        * All threat intelligence page names must match `TIPageId` in x-pack/solutions/security/plugins/threat_intelligence/public/common/navigation/types.ts
@@ Expand Down @@

x-pack/platform/plugins/private/translations/translations/de-DE.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -36763,19 +36763,6 @@ @@
         "xpack.securitySolution.onboarding.footer.labs.description": "Einblicke von Sicherheitsforschern",
         "xpack.securitySolution.onboarding.footer.labs.link.title": "Weitere Informationen",
         "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs",
-        "xpack.securitySolution.onboarding.header.card.demo.description": "Entdecken Sie die Demo, keine Einrichtung erforderlich!",
-        "xpack.securitySolution.onboarding.header.card.demo.link.title": "Demo erkunden",
-        "xpack.securitySolution.onboarding.header.card.demo.title": "Elastic Security in Aktion erleben",
-        "xpack.securitySolution.onboarding.header.card.teammates.description": "Erhöhen Sie die Zusammenarbeit in Ihrer Organisation",
-        "xpack.securitySolution.onboarding.header.card.teammates.link.title": "Nutzer hinzufügen",
-        "xpack.securitySolution.onboarding.header.card.teammates.title": "Teammitglieder hinzufügen",
-        "xpack.securitySolution.onboarding.header.card.video.description": "Machen Sie sich mit Elastic Security vertraut",
-        "xpack.securitySolution.onboarding.header.card.video.link.title": "Video ansehen",
-        "xpack.securitySolution.onboarding.header.card.video.title": "Sehen Sie sich das 2-minütige Überblicksvideo an",
-        "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "Schließen",
-        "xpack.securitySolution.onboarding.header.card.videoModal.description": "Wir freuen uns, Sie beim Schutz der Daten Ihres Unternehmens zu unterstützen. Hier ist eine Vorschau der Schritte, die Sie zur Einrichtung ausführen sollten.",
-        "xpack.securitySolution.onboarding.header.card.videoModal.title": "Willkommen bei Elastic Security!",
-        "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security",
         "xpack.securitySolution.onboarding.integrationsCard.agent.link": "hier",
         "xpack.securitySolution.onboarding.integrationsCard.agent.text": "Für eine oder mehrere Ihrer Integrationen wird Elastic Agent benötigt. Elastic Agent hinzufügen",
         "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {Integrationen}} hinzugefügt",
@@ Expand Down @@

x-pack/platform/plugins/private/translations/translations/fr-FR.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -37146,19 +37146,6 @@ @@
         "xpack.securitySolution.onboarding.footer.labs.description": "Points de vue des chercheurs en sécurité",
         "xpack.securitySolution.onboarding.footer.labs.link.title": "En savoir plus",
         "xpack.securitySolution.onboarding.footer.labs.title": "Ateliers Elastic Security",
-        "xpack.securitySolution.onboarding.header.card.demo.description": "Explorez la démonstration, aucune configuration requise !",
-        "xpack.securitySolution.onboarding.header.card.demo.link.title": "Explorer la démonstration",
-        "xpack.securitySolution.onboarding.header.card.demo.title": "Découvrez Elastic Security en action",
-        "xpack.securitySolution.onboarding.header.card.teammates.description": "Augmentez la collaboration au sein de votre organisation",
-        "xpack.securitySolution.onboarding.header.card.teammates.link.title": "Ajouter des utilisateurs",
-        "xpack.securitySolution.onboarding.header.card.teammates.title": "Ajouter des coéquipiers",
-        "xpack.securitySolution.onboarding.header.card.video.description": "Familiarisez-vous avec Elastic Security",
-        "xpack.securitySolution.onboarding.header.card.video.link.title": "Regarder la vidéo",
-        "xpack.securitySolution.onboarding.header.card.video.title": "Regardez la vidéo d'aperçu de 2 minutes",
-        "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "Fermer",
-        "xpack.securitySolution.onboarding.header.card.videoModal.description": "Nous sommes ravis de vous aider à protéger les données de votre organisation. Voici un aperçu des différentes étapes à suivre pour la configuration.",
-        "xpack.securitySolution.onboarding.header.card.videoModal.title": "Bienvenue dans Elastic Security !",
-        "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security",
         "xpack.securitySolution.onboarding.integrationsCard.agent.link": "ici",
         "xpack.securitySolution.onboarding.integrationsCard.agent.text": "Elastic Agent est requis pour une ou plusieurs de vos intégrations. Ajouter Elastic Agent",
         "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {intégrations}} ajoutées",
@@ Expand Down @@

x-pack/platform/plugins/private/translations/translations/ja-JP.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -37205,19 +37205,6 @@ @@
         "xpack.securitySolution.onboarding.footer.labs.description": "セキュリティ研究者によるインサイト",
         "xpack.securitySolution.onboarding.footer.labs.link.title": "詳しくはこちら",
         "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs",
-        "xpack.securitySolution.onboarding.header.card.demo.description": "デモを探索してください。設定は不要です！",
-        "xpack.securitySolution.onboarding.header.card.demo.link.title": "デモの探索",
-        "xpack.securitySolution.onboarding.header.card.demo.title": "Elastic Securityの活用事例を見る",
-        "xpack.securitySolution.onboarding.header.card.teammates.description": "組織全体でコラボレーションを強化",
-        "xpack.securitySolution.onboarding.header.card.teammates.link.title": "ユーザーを追加",
-        "xpack.securitySolution.onboarding.header.card.teammates.title": "チームメイトを追加",
-        "xpack.securitySolution.onboarding.header.card.video.description": "Elastic Securityを使い始める",
-        "xpack.securitySolution.onboarding.header.card.video.link.title": "動画を見る",
-        "xpack.securitySolution.onboarding.header.card.video.title": "2分間の概要動画を見る",
-        "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "閉じる",
-        "xpack.securitySolution.onboarding.header.card.videoModal.description": "Elasticが組織のデータ保護をサポートします。以下は、設定する手順のプレビューです。",
-        "xpack.securitySolution.onboarding.header.card.videoModal.title": "Elastic Securityへようこそ！",
-        "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elasticセキュリティ",
         "xpack.securitySolution.onboarding.integrationsCard.agent.link": "こちら",
         "xpack.securitySolution.onboarding.integrationsCard.agent.text": "1つ以上の統合には、Elasticエージェントが必要です。Elasticエージェントの追加",
         "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {個の統合}}が追加されました",
@@ Expand Down @@

x-pack/platform/plugins/private/translations/translations/zh-CN.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -37185,19 +37185,6 @@ @@
         "xpack.securitySolution.onboarding.footer.labs.description": "安全研究员的见解",
         "xpack.securitySolution.onboarding.footer.labs.link.title": "了解详情",
         "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs",
-        "xpack.securitySolution.onboarding.header.card.demo.description": "浏览演示，而无需设置！",
-        "xpack.securitySolution.onboarding.header.card.demo.link.title": "浏览演示",
-        "xpack.securitySolution.onboarding.header.card.demo.title": "查看 Elastic Security 的实际应用",
-        "xpack.securitySolution.onboarding.header.card.teammates.description": "加强跨组织协作",
-        "xpack.securitySolution.onboarding.header.card.teammates.link.title": "添加用户",
-        "xpack.securitySolution.onboarding.header.card.teammates.title": "添加队友",
-        "xpack.securitySolution.onboarding.header.card.video.description": "开始了解 Elastic Security",
-        "xpack.securitySolution.onboarding.header.card.video.link.title": "观看视频",
-        "xpack.securitySolution.onboarding.header.card.video.title": "观看 2 分钟概览视频",
-        "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "关闭",
-        "xpack.securitySolution.onboarding.header.card.videoModal.description": "我们很高兴为您提供支持，帮助保护您组织的数据。此处提供了您完成设置所需执行步骤的预览。",
-        "xpack.securitySolution.onboarding.header.card.videoModal.title": "欢迎使用 Elastic Security！",
-        "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security",
         "xpack.securitySolution.onboarding.integrationsCard.agent.link": "此处",
         "xpack.securitySolution.onboarding.integrationsCard.agent.text": "您的一个或多个集成需要 Elastic 代理。添加 Elastic 代理",
         "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "已添加 {count} 个{count, plural, one {集成} other {集成}}",
@@ Expand Down @@

x-pack/solutions/security/plugins/security_solution/common/constants.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -172,6 +172,7 @@ export const APP_RESPONSE_ACTIONS_HISTORY_PATH = @@
     export const APP_SCRIPT_LIBRARY_PATH = `${APP_PATH}${SCRIPT_LIBRARY_PATH}` as const;
     export const NOTES_PATH = `${MANAGEMENT_PATH}/notes` as const;
     export const SIEM_MIGRATIONS_PATH = '/siem_migrations' as const;
+    export const SIEM_MIGRATIONS_MANAGE_PATH = `${SIEM_MIGRATIONS_PATH}/manage` as const;
     export const SIEM_MIGRATIONS_LANDING_PATH = `${SIEM_MIGRATIONS_PATH}/landing` as const;
     export const SIEM_MIGRATIONS_RULES_PATH = `${SIEM_MIGRATIONS_PATH}/rules` as const;
     export const SIEM_MIGRATIONS_DASHBOARDS_PATH = `${SIEM_MIGRATIONS_PATH}/dashboards` as const;
@@ Expand Down @@

...solutions/security/plugins/security_solution/public/common/icons/agent/icon.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ions/security/plugins/security_solution/public/common/icons/agent/icon_dark.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/index.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,19 @@
+    /*
+     * 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 { EuiIcon, type EuiIconProps } from '@elastic/eui';
+    import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme';
+    import IconSVG from './icon.svg';
+    import IconDarkSVG from './icon_dark.svg';
+    export const IconAgent = React.memo<Omit<EuiIconProps, 'type'>>((props) => {
+      const isDark = useKibanaIsDarkMode();
+      const Icon = isDark ? IconDarkSVG : IconSVG;
+      return <EuiIcon type={Icon} {...props} />;
+    });
+    IconAgent.displayName = 'IconAgent';

...ons/security/plugins/security_solution/public/onboarding/components/hooks/use_topic_id.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,10 @@ import type { OnboardingRouteParams } from '../../types'; @@
      * Hook that returns the topic id from the URL, or the default topic id if none is present
      * This is the Single Source of Truth for the topic id
      */
-    export const useTopicId = (): OnboardingTopicId => {
-      const { topicId = OnboardingTopicId.default } = useParams<OnboardingRouteParams>();
-      return topicId;
+    export const useTopicId = (topicId?: OnboardingTopicId): OnboardingTopicId => {
+      const { topicId: urlTopicId = OnboardingTopicId.default } = useParams<OnboardingRouteParams>();
+      if (topicId) {
+        return topicId;
+      }
+      return urlTopicId;
     };

.../onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.test.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     jest.mock('./agentless_available_callout');
     jest.mock('./active_integrations_callout');
     jest.mock('./endpoint_callout');
+    jest.mock('./migrations_callout', () => ({
+      MigrationsCallout: () => null,
+    }));
     describe('IntegrationCardTopCallout', () => {
       beforeEach(() => {
@@ Expand Down @@

...nents/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,13 +6,15 @@ @@
      */
     import React from 'react';
+    import { EuiSpacer } from '@elastic/eui';
     import useObservable from 'react-use/lib/useObservable';
     import { useOnboardingService } from '../../../../../hooks/use_onboarding_service';
     import { AgentlessAvailableCallout } from './agentless_available_callout';
     import { ActiveIntegrationsCallout } from './active_integrations_callout';
     import { EndpointCallout } from './endpoint_callout';
     import { IntegrationTabId } from '../../../../../../../common/lib/integrations/types';
+    import { MigrationsCallout } from './migrations_callout';
     export const IntegrationCardTopCallout = React.memo<{
       activeIntegrationsCount: number;
@@ Expand All / @@ -32,12 +34,12 @@ export const IntegrationCardTopCallout = React.memo<{ @@
       const showEndpointCallout =
         activeIntegrationsCount === 0 && selectedTabId === IntegrationTabId.endpoint;
-      if (!showAgentlessCallout && !showEndpointCallout && !showActiveCallout) {
-        return null;
-      }
+      const showAnyLegacyCallout = showAgentlessCallout || showEndpointCallout || showActiveCallout;
       return (
         <>
+          <MigrationsCallout />
+          {showAnyLegacyCallout && <EuiSpacer size="s" />}
           {showEndpointCallout && <EndpointCallout />}
           {showAgentlessCallout && <AgentlessAvailableCallout />}
           {showActiveCallout && (
@@ Expand Down @@

...ding/components/onboarding_body/cards/common/integrations/callouts/migrations_callout.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,58 @@
+    /*
+     * 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, { memo, useMemo, useCallback } from 'react';
+    import { FormattedMessage } from '@kbn/i18n-react';
+    import { EuiPanel, EuiButton, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+    import { SecurityPageName, useNavigateTo } from '@kbn/security-solution-navigation';
+    import { IconAgent } from '../../../../../../../common/icons/agent';
+    import { useGetSecuritySolutionUrl } from '../../../../../../../common/components/link_to';
+    export const MigrationsCallout = memo(() => {
+      const { navigateTo } = useNavigateTo();
+      const getSecuritySolutionUrl = useGetSecuritySolutionUrl();
+      const href = useMemo(
+        () => getSecuritySolutionUrl({ deepLinkId: SecurityPageName.siemMigrationsManage }),
+        [getSecuritySolutionUrl]
+      );
+      const onClick = useCallback(
+        (e: React.SyntheticEvent) => {
+          e.preventDefault();
+          navigateTo({ deepLinkId: SecurityPageName.siemMigrationsManage });
+        },
+        [navigateTo]
+      );
+      return (
+        <EuiPanel color="primary" hasShadow={false} paddingSize="l">
+          <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+            <IconAgent aria-hidden={true} />
+            <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+              <b>
+                <FormattedMessage
+                  id="xpack.securitySolution.onboarding.migrations.callout.title"
+                  defaultMessage="Migrating from another SIEM?"
+                />
+              </b>{' '}
+              <FormattedMessage
+                id="xpack.securitySolution.onboarding.migrations.callout.description"
+                defaultMessage="Streamline the process with automatic migration"
+              />
+            </EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiButton href={href} onClick={onClick}>
+                <FormattedMessage
+                  id="xpack.securitySolution.onboarding.migrations.callout.button"
+                  defaultMessage="Start automatic migration"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      );
+    });
+    MigrationsCallout.displayName = 'MigrationsCallout';

...s/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,14 +8,15 @@ @@
     import { useMemo } from 'react';
     import { useOnboardingContext } from '../../onboarding_context';
     import { useTopicId } from '../../hooks/use_topic_id';
+    import type { OnboardingTopicId } from '../../../constants';
     import type { OnboardingGroupConfig } from '../../../types';
     /**
      * Hook that returns the body config for the selected topic
      */
-    export const useBodyConfig = (): OnboardingGroupConfig[] => {
-      const topicId = useTopicId();
+    export const useBodyConfig = (topicIdOverride?: OnboardingTopicId): OnboardingGroupConfig[] => {
       const { config } = useOnboardingContext();
+      const topicId = useTopicId(topicIdOverride);
       const topicBodyConfig = useMemo(() => {
         let bodyConfig: OnboardingGroupConfig[] = [];
         const topicConfig = config.get(topicId);
@@ Expand Down @@

...lugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,16 +8,16 @@
  
    import React, { Suspense, useCallback } from 'react';

    import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';

    import { CenteredLoadingSpinner } from '../../../common/components/centered_loading_spinner';

    import type { OnboardingCardId } from '../../constants';

    import type { OnboardingCardId, OnboardingTopicId } from '../../constants';

    import { useBodyConfig } from './hooks/use_body_config';

    import { OnboardingCardGroup } from './onboarding_card_group';

    import { OnboardingCardPanel } from './onboarding_card_panel';

    import { useExpandedCard } from './hooks/use_expanded_card';

    import { useCompletedCards } from './hooks/use_completed_cards';

    import type { IsCardAvailable } from '../../types';

    export const OnboardingBody = React.memo(() => {

      const bodyConfig = useBodyConfig();

    export const OnboardingBody = React.memo<{ topicId?: OnboardingTopicId }>(({ topicId }) => {

      const bodyConfig = useBodyConfig(topicId);

      const { expandedCardId, setExpandedCardId } = useExpandedCard();

      const { isCardComplete, setCardComplete, getCardCheckCompleteResult, checkCardComplete } =

        useCompletedCards(bodyConfig);

..._solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts

This file was deleted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Automatic Migrations] Migrations page with nav #260379

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!