[8.x] [Security Solution][SIEM migrations] Onboarding UI improvements (…

…#204320) (#204719) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][SIEM migrations] Onboarding UI improvements (#204320)](#204320)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jan 8, 2025 · 4b931d0 · 4b931d0
1 parent 45c4faa
commit 4b931d0
Show file tree

Hide file tree

Showing 67 changed files with 1,850 additions and 639 deletions.
diff --git a/x-pack/solutions/security/plugins/security_solution/common/siem_migrations/constants.ts b/x-pack/solutions/security/plugins/security_solution/common/siem_migrations/constants.ts
@@ -44,7 +44,7 @@ export enum SiemMigrationStatus {
   FAILED = 'failed',
 }
 
-export enum SiemMigrationRuleTranslationResult {
+export enum RuleTranslationResult {
   FULL = 'full',
   PARTIAL = 'partial',
   UNTRANSLATABLE = 'untranslatable',
@@ -60,3 +60,5 @@ export const DEFAULT_TRANSLATION_FIELDS = {
   to: 'now',
   interval: '5m',
 } as const;
+
+export const EMPTY_RESOURCE_PLACEHOLDER = '<empty>';
diff --git a/...ons/security/plugins/security_solution/common/siem_migrations/model/rule_migration.gen.ts b/...ons/security/plugins/security_solution/common/siem_migrations/model/rule_migration.gen.ts
@@ -285,21 +285,47 @@ export const RuleMigrationTranslationStats = z.object({
    */
   rules: z.object({
     /**
-     * The total number of rules to migrate.
+     * The total number of rules in the migration.
      */
     total: z.number().int(),
     /**
-     * The number of rules that matched Elastic prebuilt rules.
-     */
-    prebuilt: z.number().int(),
-    /**
-     * The number of rules that did not match Elastic prebuilt rules and will be installed as custom rules.
+     * The number of rules that have been successfully translated.
      */
-    custom: z.number().int(),
+    success: z.object({
+      /**
+       * The total number of rules that have been successfully translated.
+       */
+      total: z.number().int(),
+      /**
+       * The translation results
+       */
+      result: z.object({
+        /**
+         * The number of rules that have been fully translated.
+         */
+        full: z.number().int(),
+        /**
+         * The number of rules that have been partially translated.
+         */
+        partial: z.number().int(),
+        /**
+         * The number of rules that could not be translated.
+         */
+        untranslatable: z.number().int(),
+      }),
+      /**
+       * The number of rules that have been successfully translated and can be installed.
+       */
+      installable: z.number().int(),
+      /**
+       * The number of rules that have been successfully translated and matched Elastic prebuilt rules.
+       */
+      prebuilt: z.number().int(),
+    }),
     /**
-     * The number of rules that can be installed.
+     * The number of rules that have failed translation.
      */
-    installable: z.number().int(),
+    failed: z.number().int(),
   }),
 });
 

diff --git a/...ecurity/plugins/security_solution/common/siem_migrations/model/rule_migration.schema.yaml b/...ecurity/plugins/security_solution/common/siem_migrations/model/rule_migration.schema.yaml
@@ -234,23 +234,50 @@ components:
           description: The rules migration translation stats.
           required:
             - total
-            - prebuilt
-            - custom
-            - installable
+            - success
+            - failed
           properties:
             total:
               type: integer
-              description: The total number of rules to migrate.
-            prebuilt:
-              type: integer
-              description: The number of rules that matched Elastic prebuilt rules.
-            custom:
-              type: integer
-              description: The number of rules that did not match Elastic prebuilt rules and will be installed as custom rules.
-            installable:
+              description: The total number of rules in the migration.
+            success:
+              type: object
+              description: The number of rules that have been successfully translated.
+              required:
+                - total
+                - result
+                - installable
+                - prebuilt
+              properties:
+                total:
+                  type: integer
+                  description: The total number of rules that have been successfully translated.
+                result:
+                  type: object
+                  description: The translation results
+                  required:
+                    - full
+                    - partial
+                    - untranslatable
+                  properties:
+                    full:
+                      type: integer
+                      description: The number of rules that have been fully translated.
+                    partial:
+                      type: integer
+                      description: The number of rules that have been partially translated.
+                    untranslatable:
+                      type: integer
+                      description: The number of rules that could not be translated.
+                installable:
+                  type: integer
+                  description: The number of rules that have been successfully translated and can be installed.
+                prebuilt:
+                  type: integer
+                  description: The number of rules that have been successfully translated and matched Elastic prebuilt rules.
+            failed:
               type: integer
-              description: The number of rules that can be installed.
-
+              description: The number of rules that have failed translation.
     RuleMigrationTranslationResult:
       type: string
       description: The rule translation result.

diff --git a/...solutions/security/plugins/security_solution/public/common/components/panel_text/index.ts b/...solutions/security/plugins/security_solution/public/common/components/panel_text/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { PanelText, type PanelTextProps } from './panel_text';
diff --git a/...ons/security/plugins/security_solution/public/common/components/panel_text/panel_text.tsx b/...ons/security/plugins/security_solution/public/common/components/panel_text/panel_text.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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, { type PropsWithChildren } from 'react';
+import { css, type CSSInterpolation } from '@emotion/css';
+import { EuiText, useEuiTheme, COLOR_MODES_STANDARD, type EuiTextProps } from '@elastic/eui';
+
+export interface PanelTextProps extends PropsWithChildren<EuiTextProps> {
+  subdued?: true;
+  semiBold?: true;
+}
+export const PanelText = React.memo<PanelTextProps>(({ children, subdued, semiBold, ...props }) => {
+  const { euiTheme, colorMode } = useEuiTheme();
+  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+
+  let color;
+  if (subdued && !isDarkMode) {
+    color = 'subdued';
+  }
+
+  const style: CSSInterpolation = {};
+  if (semiBold) {
+    style.fontWeight = euiTheme.font.weight.semiBold;
+  }
+
+  return (
+    <EuiText {...props} color={color} className={css(style)}>
+      {children}
+    </EuiText>
+  );
+});
+PanelText.displayName = 'PanelText';
diff --git a/...s/security/plugins/security_solution/public/onboarding/components/hooks/use_url_detail.ts b/...s/security/plugins/security_solution/public/onboarding/components/hooks/use_url_detail.ts
@@ -28,7 +28,7 @@ const getCardHash = (cardId: OnboardingCardId | null) => (cardId ? `#${cardId}`
  * This hook manages the expanded card id state in the LocalStorage and the hash in the URL.
  */
 export const useUrlDetail = () => {
-  const { spaceId, telemetry } = useOnboardingContext();
+  const { config, spaceId, telemetry } = useOnboardingContext();
   const topicId = useTopicId();
   const [storedUrlDetail, setStoredUrlDetail] = useStoredUrlDetails(spaceId);
 
@@ -56,6 +56,14 @@ export const useUrlDetail = () => {
 
   const syncUrlDetails = useCallback(
     (pathTopicId: OnboardingTopicId | null, hashCardId: OnboardingCardId | null) => {
+      if (storedUrlDetail) {
+        // If the stored topic is not valid, clear it
+        const [storedTopicId] = storedUrlDetail.split('#');
+        if (storedTopicId && !config.has(storedTopicId as OnboardingTopicId)) {
+          setStoredUrlDetail(null);
+          return;
+        }
+      }
       const urlDetail = `${pathTopicId || ''}${hashCardId ? `#${hashCardId}` : ''}`;
       if (urlDetail && urlDetail !== storedUrlDetail) {
         if (hashCardId) {
@@ -67,7 +75,7 @@ export const useUrlDetail = () => {
         navigateTo({ deepLinkId: SecurityPageName.landing, path: storedUrlDetail });
       }
     },
-    [navigateTo, setStoredUrlDetail, storedUrlDetail, telemetry]
+    [config, navigateTo, setStoredUrlDetail, storedUrlDetail, telemetry]
   );
 
   return { setTopicDetail, setCardDetail, syncUrlDetails };

diff --git a/...rding/components/onboarding_body/cards/siem_migrations/ai_connector/ai_connector_card.tsx b/...rding/components/onboarding_body/cards/siem_migrations/ai_connector/ai_connector_card.tsx
@@ -7,6 +7,7 @@
 
 import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { CenteredLoadingSpinner } from '../../../../../../common/components/centered_loading_spinner';
 import { useKibana } from '../../../../../../common/lib/kibana/kibana_react';
 import { useDefinedLocalStorage } from '../../../../hooks/use_stored_state';
 import type { OnboardingCardComponent } from '../../../../../types';
@@ -35,9 +36,15 @@ export const AIConnectorCard: OnboardingCardComponent<AIConnectorCardMetadata> =
     [setComplete, setStoredConnectorId]
   );
 
-  const connectors = checkCompleteMetadata?.connectors;
-  const canExecuteConnectors = checkCompleteMetadata?.canExecuteConnectors;
-  const canCreateConnectors = checkCompleteMetadata?.canCreateConnectors;
+  if (!checkCompleteMetadata) {
+    return (
+      <OnboardingCardContentPanel>
+        <CenteredLoadingSpinner />
+      </OnboardingCardContentPanel>
+    );
+  }
+
+  const { connectors, canExecuteConnectors, canCreateConnectors } = checkCompleteMetadata;
 
   return (
     <OnboardingCardContentPanel>

diff --git a/...c/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/context.tsx b/...c/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/context.tsx
diff --git a/...onboarding_body/cards/siem_migrations/start_migration/panels/migration_progress_panel.tsx b/...onboarding_body/cards/siem_migrations/start_migration/panels/migration_progress_panel.tsx
diff --git a/...ts/onboarding_body/cards/siem_migrations/start_migration/panels/migration_ready_panel.tsx b/...ts/onboarding_body/cards/siem_migrations/start_migration/panels/migration_ready_panel.tsx