fix macros resource check

elastic · Dec 16, 2024 · 876ddda · 876ddda
1 parent 5864495
commit 876ddda
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 119 deletions.
diff --git a/config/serverless.security.yml b/config/serverless.security.yml
@@ -7,7 +7,6 @@ xpack.infra.enabled: false
 xpack.observabilityLogsExplorer.enabled: false
 xpack.observability.enabled: false
 xpack.observabilityAIAssistant.enabled: false
-xpack.inventory.enabled: false
 xpack.search.notebooks.enabled: false
 xpack.searchPlayground.enabled: false
 xpack.searchInferenceEndpoints.enabled: false

diff --git a/..._solution/public/siem_migrations/rules/components/data_input_flyout/data_input_flyout.tsx b/..._solution/public/siem_migrations/rules/components/data_input_flyout/data_input_flyout.tsx
@@ -86,10 +86,7 @@ export const MigrationDataInputFlyout = React.memo<MigrationDataInputFlyoutProps
       []
     );
 
-    const onMacrosCreated = useCallback(() => {
-      setDataInputStep(DataInputStep.Lookups);
-    }, []);
-    const onLookupsCreated = useCallback(() => {
+    const onAllLookupsCreated = useCallback(() => {
       setDataInputStep(DataInputStep.End);
     }, []);
 
@@ -126,7 +123,6 @@ export const MigrationDataInputFlyout = React.memo<MigrationDataInputFlyoutProps
                 dataInputStep={dataInputStep}
                 missingMacros={missingResourcesIndexed?.macros}
                 migrationStats={migrationStats}
-                onMacrosCreated={onMacrosCreated}
                 onMissingResourcesFetched={onMissingResourcesFetched}
               />
             </EuiFlexItem>
@@ -135,7 +131,7 @@ export const MigrationDataInputFlyout = React.memo<MigrationDataInputFlyoutProps
                 dataInputStep={dataInputStep}
                 missingLookups={missingResourcesIndexed?.lookups}
                 migrationStats={migrationStats}
-                onLookupsCreated={onLookupsCreated}
+                onAllLookupsCreated={onAllLookupsCreated}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/...c/siem_migrations/rules/components/data_input_flyout/steps/lookups/lookups_data_input.tsx b/...c/siem_migrations/rules/components/data_input_flyout/steps/lookups/lookups_data_input.tsx
@@ -34,7 +34,7 @@ export type AddUploadedLookups = (lookups: RuleMigrationResourceData[]) => void;
 interface LookupsDataInputSubStepsProps {
   migrationStats: RuleMigrationTaskStats;
   missingLookups: string[];
-  onLookupsCreated: OnResourcesCreated;
+  onAllLookupsCreated: OnResourcesCreated;
 }
 interface LookupsDataInputProps
   extends Omit<LookupsDataInputSubStepsProps, 'migrationStats' | 'missingLookups'> {
@@ -43,7 +43,7 @@ interface LookupsDataInputProps
   missingLookups?: string[];
 }
 export const LookupsDataInput = React.memo<LookupsDataInputProps>(
-  ({ dataInputStep, migrationStats, missingLookups, onLookupsCreated }) => {
+  ({ dataInputStep, migrationStats, missingLookups, onAllLookupsCreated }) => {
     const dataInputStatus = useMemo(
       () => getStatus(DataInputStep.Lookups, dataInputStep),
       [dataInputStep]
@@ -79,7 +79,7 @@ export const LookupsDataInput = React.memo<LookupsDataInputProps>(
                 <LookupsDataInputSubSteps
                   migrationStats={migrationStats}
                   missingLookups={missingLookups}
-                  onLookupsCreated={onLookupsCreated}
+                  onAllLookupsCreated={onAllLookupsCreated}
                 />
               </EuiFlexItem>
             </>
@@ -94,7 +94,7 @@ LookupsDataInput.displayName = 'LookupsDataInput';
 const END = 10 as const;
 type SubStep = 1 | 2 | typeof END;
 export const LookupsDataInputSubSteps = React.memo<LookupsDataInputSubStepsProps>(
-  ({ migrationStats, missingLookups, onLookupsCreated }) => {
+  ({ migrationStats, missingLookups, onAllLookupsCreated }) => {
     const [subStep, setSubStep] = useState<SubStep>(1);
     const [uploadedLookups, setUploadedLookups] = useState<UploadedLookups>({});
 
@@ -110,9 +110,9 @@ export const LookupsDataInputSubSteps = React.memo<LookupsDataInputSubStepsProps
     useEffect(() => {
       if (missingLookups.every((lookupName) => uploadedLookups[lookupName])) {
         setSubStep(END);
-        onLookupsCreated();
+        onAllLookupsCreated();
       }
-    }, [uploadedLookups, missingLookups, onLookupsCreated]);
+    }, [uploadedLookups, missingLookups, onAllLookupsCreated]);
 
     // Copy query step
     const onCopied = useCallback(() => {

diff --git a/...rules/components/data_input_flyout/steps/lookups/sub_steps/missing_lookups_list/index.tsx b/...rules/components/data_input_flyout/steps/lookups/sub_steps/missing_lookups_list/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import type { EuiStepProps, EuiStepStatus } from '@elastic/eui';
 import { EMPTY_RESOURCE_PLACEHOLDER } from '../../../../../../../../../common/siem_migrations/constants';
 import { useUpsertResources } from '../../../../../../service/hooks/use_upsert_resources';
@@ -30,7 +30,7 @@ export const useMissingLookupsListStep = ({
   addUploadedLookups,
   onCopied,
 }: MissingLookupsListStepProps): EuiStepProps => {
-  const { upsertResources, isLoading } = useUpsertResources(addUploadedLookups);
+  const { upsertResources, isLoading, error } = useUpsertResources(addUploadedLookups);
 
   const clearLookup = useCallback(
     (lookupName: string) => {
@@ -41,16 +41,25 @@ export const useMissingLookupsListStep = ({
     [upsertResources, migrationStats]
   );
 
+  const listStepStatus = useMemo(() => {
+    if (isLoading) {
+      return 'loading';
+    }
+    if (error) {
+      return 'danger';
+    }
+    return status;
+  }, [isLoading, error, status]);
+
   return {
     title: i18n.LOOKUPS_DATA_INPUT_COPY_TITLE,
-    status,
+    status: listStepStatus,
     children: (
       <MissingLookupsList
         onCopied={onCopied}
         missingLookups={missingLookups}
         uploadedLookups={uploadedLookups}
         clearLookup={clearLookup}
-        isLoading={isLoading}
       />
     ),
   };

diff --git a/...s/data_input_flyout/steps/lookups/sub_steps/missing_lookups_list/missing_lookups_list.tsx b/...s/data_input_flyout/steps/lookups/sub_steps/missing_lookups_list/missing_lookups_list.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { css } from '@emotion/css';
 import {
   EuiButtonIcon,
@@ -32,15 +32,14 @@ interface MissingLookupsListProps {
   missingLookups: string[];
   uploadedLookups: UploadedLookups;
   clearLookup: (lookupsName: string) => void;
-  isLoading: boolean;
   onCopied: () => void;
 }
 export const MissingLookupsList = React.memo<MissingLookupsListProps>(
-  ({ missingLookups, uploadedLookups, clearLookup, isLoading, onCopied }) => {
+  ({ missingLookups, uploadedLookups, clearLookup, onCopied }) => {
     const { euiTheme } = useEuiTheme();
     return (
       <>
-        <EuiPanel hasShadow={false} hasBorder className={scrollPanelCss} disabled={isLoading}>
+        <EuiPanel hasShadow={false} hasBorder className={scrollPanelCss}>
           <EuiFlexGroup direction="column" gutterSize="s">
             {missingLookups.map((lookupName) => {
               return (
@@ -136,19 +135,25 @@ interface ClearLookupButtonProps {
   isDisabled: boolean;
 }
 const ClearLookupButton = React.memo<ClearLookupButtonProps>(
-  ({ lookupName, clearLookup, isDisabled }) => {
+  ({ lookupName, clearLookup, isDisabled: isDisabledDefault }) => {
+    const [isDisabled, setIsDisabled] = useState(isDisabledDefault);
+    const onClick = useCallback(() => {
+      setIsDisabled(true);
+      clearLookup(lookupName);
+    }, [clearLookup, lookupName]);
+
     const button = useMemo(
       () => (
         <EuiButtonIcon
-          onClick={() => clearLookup(lookupName)}
+          onClick={onClick}
           iconType="cross"
           color="text"
-          aria-label={`${i18n.CLEAR_EMPTY_LOOKUP_TOOLTIP} ${lookupName}`}
+          aria-label={i18n.CLEAR_EMPTY_LOOKUP_TOOLTIP}
           data-test-subj="lookupNameClear"
           isDisabled={isDisabled}
         />
       ),
-      [clearLookup, isDisabled, lookupName]
+      [onClick, isDisabled]
     );
     if (isDisabled) {
       return button;

diff --git a/...lic/siem_migrations/rules/components/data_input_flyout/steps/macros/macros_data_input.tsx b/...lic/siem_migrations/rules/components/data_input_flyout/steps/macros/macros_data_input.tsx
@@ -21,7 +21,6 @@ import { useCheckResourcesStep } from './sub_steps/check_resources';
 interface MacrosDataInputSubStepsProps {
   migrationStats: RuleMigrationTaskStats;
   missingMacros: string[];
-  onMacrosCreated: OnResourcesCreated;
   onMissingResourcesFetched: OnMissingResourcesFetched;
 }
 interface MacrosDataInputProps
@@ -31,13 +30,7 @@ interface MacrosDataInputProps
   missingMacros?: string[];
 }
 export const MacrosDataInput = React.memo<MacrosDataInputProps>(
-  ({
-    dataInputStep,
-    migrationStats,
-    missingMacros,
-    onMacrosCreated,
-    onMissingResourcesFetched,
-  }) => {
+  ({ dataInputStep, migrationStats, missingMacros, onMissingResourcesFetched }) => {
     const dataInputStatus = useMemo(
       () => getStatus(DataInputStep.Macros, dataInputStep),
       [dataInputStep]
@@ -67,7 +60,6 @@ export const MacrosDataInput = React.memo<MacrosDataInputProps>(
               <MacrosDataInputSubSteps
                 migrationStats={migrationStats}
                 missingMacros={missingMacros}
-                onMacrosCreated={onMacrosCreated}
                 onMissingResourcesFetched={onMissingResourcesFetched}
               />
             </EuiFlexItem>
@@ -82,7 +74,7 @@ MacrosDataInput.displayName = 'MacrosDataInput';
 const END = 10 as const;
 type SubStep = 1 | 2 | 3 | typeof END;
 export const MacrosDataInputSubSteps = React.memo<MacrosDataInputSubStepsProps>(
-  ({ migrationStats, missingMacros, onMacrosCreated, onMissingResourcesFetched }) => {
+  ({ migrationStats, missingMacros, onMissingResourcesFetched }) => {
     const [subStep, setSubStep] = useState<SubStep>(missingMacros.length ? 1 : 3);
 
     // Copy query step
@@ -93,9 +85,8 @@ export const MacrosDataInputSubSteps = React.memo<MacrosDataInputSubStepsProps>(
 
     // Upload macros step
     const onMacrosCreatedStep = useCallback<OnResourcesCreated>(() => {
-      onMacrosCreated();
       setSubStep(3);
-    }, [onMacrosCreated]);
+    }, []);
     const uploadStep = useMacrosFileUploadStep({
       status: getStatus(2, subStep),
       migrationStats,

diff --git a/...public/siem_migrations/rules/components/migration_status_panels/migration_ready_panel.tsx b/...public/siem_migrations/rules/components/migration_status_panels/migration_ready_panel.tsx
@@ -5,57 +5,87 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+import { CenteredLoadingSpinner } from '../../../../common/components/centered_loading_spinner';
+import type { RuleMigrationResourceData } from '../../../../../common/siem_migrations/model/rule_migration.gen';
 import { PanelText } from '../../../../common/components/panel_text';
 import { useStartMigration } from '../../service/hooks/use_start_migration';
 import type { RuleMigrationStats } from '../../types';
 import { useRuleMigrationDataInputContext } from '../data_input_flyout/context';
 import * as i18n from './translations';
+import { useGetMissingResources } from '../../service/hooks/use_get_missing_resources';
 
 export interface MigrationReadyPanelProps {
   migrationStats: RuleMigrationStats;
 }
 export const MigrationReadyPanel = React.memo<MigrationReadyPanelProps>(({ migrationStats }) => {
   const { openFlyout } = useRuleMigrationDataInputContext();
+  const [missingResources, setMissingResources] = React.useState<RuleMigrationResourceData[]>([]);
+  const { getMissingResources, isLoading } = useGetMissingResources(setMissingResources);
+
+  useEffect(() => {
+    getMissingResources(migrationStats.id);
+  }, [getMissingResources, migrationStats]);
+
   const onOpenFlyout = useCallback<React.MouseEventHandler>(() => {
     openFlyout(migrationStats);
   }, [openFlyout, migrationStats]);
 
-  const { startMigration, isLoading } = useStartMigration();
-  const onStartMigration = useCallback(() => {
-    startMigration(migrationStats.id);
-  }, [migrationStats.id, startMigration]);
-
   return (
     <EuiPanel hasShadow={false} hasBorder paddingSize="m">
-      <EuiFlexGroup direction="row" alignItems="center" gutterSize="m">
+      <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
-          <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <PanelText size="s" semiBold>
-                <p>{i18n.RULE_MIGRATION_TITLE(migrationStats.number)}</p>
-              </PanelText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <PanelText size="s" subdued>
-                <p>{i18n.RULE_MIGRATION_READY_DESCRIPTION}</p>
-              </PanelText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={onStartMigration} isLoading={isLoading}>
-            {i18n.RULE_MIGRATION_START_TRANSLATION_BUTTON}
-          </EuiButtonEmpty>
+          <PanelText size="s" semiBold>
+            <p>{i18n.RULE_MIGRATION_TITLE(migrationStats.number)}</p>
+          </PanelText>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton iconType="download" iconSide="right" onClick={onOpenFlyout}>
-            {i18n.RULE_MIGRATION_UPLOAD_MACROS_BUTTON}
-          </EuiButton>
+        <EuiFlexItem>
+          {isLoading ? (
+            <CenteredLoadingSpinner />
+          ) : (
+            <EuiFlexGroup direction="row" alignItems="flexEnd" gutterSize="m">
+              <EuiFlexItem>
+                <PanelText size="s" subdued>
+                  {i18n.RULE_MIGRATION_READY_DESCRIPTION(
+                    missingResources.length > 0 ? i18n.RULE_MIGRATION_READY_MISSING_RESOURCES : ''
+                  )}
+                </PanelText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                {missingResources.length > 0 ? (
+                  <EuiButton
+                    fill
+                    iconType="download"
+                    iconSide="right"
+                    onClick={onOpenFlyout}
+                    size="s"
+                  >
+                    {i18n.RULE_MIGRATION_UPLOAD_BUTTON}
+                  </EuiButton>
+                ) : (
+                  <StartTranslationButton migrationId={migrationStats.id} />
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
   );
 });
 MigrationReadyPanel.displayName = 'MigrationReadyPanel';
+
+const StartTranslationButton = React.memo<{ migrationId: string }>(({ migrationId }) => {
+  const { startMigration, isLoading } = useStartMigration();
+  const onStartMigration = useCallback(() => {
+    startMigration(migrationId);
+  }, [migrationId, startMigration]);
+
+  return (
+    <EuiButton fill onClick={onStartMigration} isLoading={isLoading} size="s">
+      {i18n.RULE_MIGRATION_START_TRANSLATION_BUTTON}
+    </EuiButton>
+  );
+});
+StartTranslationButton.displayName = 'StartTranslationButton';