fix(AA): should update template selection when template list updates

cryostatio · May 2, 2023 · 988d262 · 988d262
1 parent bbb6964
commit 988d262
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 29 deletions.
diff --git a/src/app/CreateRecording/CustomRecordingForm.tsx b/src/app/CreateRecording/CustomRecordingForm.tsx
@@ -41,10 +41,10 @@ import { NotificationsContext } from '@app/Notifications/Notifications';
 import { RecordingLabel } from '@app/RecordingMetadata/RecordingLabel';
 import { RecordingLabelFields } from '@app/RecordingMetadata/RecordingLabelFields';
 import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
+import { SelectTemplateSelectorForm } from '@app/Shared/SelectTemplateSelectorForm';
 import { RecordingOptions, RecordingAttributes, TemplateType } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { isTargetAgentHttp, NO_TARGET, Target } from '@app/Shared/Services/Target.service';
-import { SelectTemplateSelectorForm } from '@app/TemplateSelector/SelectTemplateSelectorForm';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
 import {
@@ -110,7 +110,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
   const [duration, setDuration] = React.useState(prefilled?.duration || 30);
   const [durationUnit, setDurationUnit] = React.useState(1000);
   const [durationValid, setDurationValid] = React.useState(ValidatedOptions.success);
-  const [templates, setTemplates] = React.useState([] as EventTemplate[]);
+  const [templates, setTemplates] = React.useState<EventTemplate[]>([]);
   const [template, setTemplate] = React.useState<Pick<Partial<EventTemplate>, 'name' | 'type'>>({});
   const [maxAge, setMaxAge] = React.useState(prefilled?.maxAge || 0);
   const [maxAgeUnits, setMaxAgeUnits] = React.useState(1);

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm.tsx
@@ -38,14 +38,14 @@
 import { EventTemplate } from '@app/CreateRecording/CreateRecording';
 import { authFailMessage, ErrorView, isAuthFail } from '@app/ErrorView/ErrorView';
 import { LoadingView } from '@app/LoadingView/LoadingView';
+import { SelectTemplateSelectorForm } from '@app/Shared/SelectTemplateSelectorForm';
 import {
   AutomatedAnalysisRecordingConfig,
   automatedAnalysisRecordingName,
   TemplateType,
 } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NO_TARGET, Target } from '@app/Shared/Services/Target.service';
-import { SelectTemplateSelectorForm } from '@app/TemplateSelector/SelectTemplateSelectorForm';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import {
   Form,
@@ -64,7 +64,7 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { concatMap, filter, first, Observable } from 'rxjs';
+import { concatMap, filter, first, Observable, take } from 'rxjs';
 
 interface AutomatedAnalysisConfigFormProps {
   useTitle?: boolean;
@@ -79,25 +79,29 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
   const addSubscription = useSubscriptions();
   const { t } = useTranslation();
 
-  const parseEventString = React.useMemo((): [string | undefined, TemplateType | undefined] => {
+  const parseEventString = React.useMemo((): Pick<Partial<EventTemplate>, 'name' | 'type'> => {
     const eventString = context.settings.automatedAnalysisRecordingConfig().template;
     if (!eventString) {
-      return [undefined, undefined];
+      return {};
     }
     const templateName = eventString.split(',')[0].split('=')[1];
     const templateType = eventString.split(',')[1].split('=')[1];
     if (!(templateType === 'TARGET' || templateType === 'CUSTOM')) {
       console.error(`Invalid template type ${templateType}`);
-      return [undefined, undefined];
+      return {};
     }
-    return [templateName, templateType];
+    return {
+      name: templateName,
+      type: templateType,
+    };
   }, [context.settings]);
+
   const [recordingConfig, setRecordingConfig] = React.useState<AutomatedAnalysisRecordingConfig>(
     context.settings.automatedAnalysisRecordingConfig()
   );
-  const [templates, setTemplates] = React.useState([] as EventTemplate[]);
-  const [templateName, setTemplateName] = React.useState<string | undefined>(parseEventString[0]);
-  const [templateType, setTemplateType] = React.useState<TemplateType | undefined>(parseEventString[1]);
+
+  const [templates, setTemplates] = React.useState<EventTemplate[]>([]);
+  const [template, setTemplate] = React.useState<Pick<Partial<EventTemplate>, 'name' | 'type'>>(parseEventString);
   const [maxAge, setMaxAge] = React.useState(recordingConfig.maxAge);
   const [maxAgeUnits, setMaxAgeUnits] = React.useState(1);
   const [maxSize, setMaxSize] = React.useState(recordingConfig.maxSize);
@@ -111,7 +115,7 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
       (targetObs ? targetObs : context.target.target())
         .pipe(
           filter((target) => target !== NO_TARGET),
-          first(),
+          take(1), // first() will throw EmptyError
           concatMap((target) =>
             context.api
               .doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`)
@@ -122,14 +126,28 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
           next: (templates) => {
             setErrorMessage('');
             setTemplates(templates);
+            setTemplate((old) => {
+              const matched = templates.find((t) => t.name === old.name && t.type === t.type);
+              return matched ? { name: matched.name, type: matched.type } : {};
+            });
           },
           error: (err) => {
             setErrorMessage(err.message);
             setTemplates([]);
+            setTemplate({});
           },
         })
     );
-  }, [addSubscription, context.target, context.api, setErrorMessage, setTemplates, setIsLoading, targetObs]);
+  }, [
+    addSubscription,
+    context.target,
+    context.api,
+    setErrorMessage,
+    setTemplates,
+    setTemplate,
+    setIsLoading,
+    targetObs,
+  ]);
 
   React.useEffect(() => {
     addSubscription(
@@ -203,29 +221,29 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
 
   const handleTemplateChange = React.useCallback(
     (templateName?: string, templateType?: TemplateType) => {
-      setTemplateName(templateName);
-      setTemplateType(templateType);
-      if (!templateName || !templateType) {
-        return;
-      }
+      setTemplate({
+        name: templateName,
+        type: templateType,
+      });
       setAAConfig({
         ...recordingConfig,
         template: getEventString(templateName || '', templateType || ''),
       });
     },
-    [recordingConfig, setTemplateName, setTemplateType, setAAConfig, getEventString]
+    [setTemplate, recordingConfig, getEventString, setAAConfig]
   );
 
   const authRetry = React.useCallback(() => {
     context.target.setAuthRetry();
   }, [context.target]);
 
   const selectedSpecifier = React.useMemo(() => {
-    if (templateName && templateType) {
-      return `${templateName},${templateType}`;
+    const { name, type } = template;
+    if (name && type) {
+      return `${name},${type}`;
     }
     return '';
-  }, [templateName, templateType]);
+  }, [template]);
 
   const formContent = React.useMemo(
     () => (
@@ -234,13 +252,13 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
           label={t(`TEMPLATE`, { ns: 'common' })}
           isRequired
           fieldId="recording-template"
-          validated={!templateName ? ValidatedOptions.error : ValidatedOptions.success}
+          validated={!template.name ? ValidatedOptions.error : ValidatedOptions.success}
           helperText={t('AutomatedAnalysisConfigForm.TEMPLATE_HELPER_TEXT')}
           helperTextInvalid={t('TEMPLATE_HELPER_TEXT_INVALID', { ns: 'common' })}
         >
           <SelectTemplateSelectorForm
             templates={templates}
-            validated={!templateName ? ValidatedOptions.error : ValidatedOptions.success}
+            validated={!template.name ? ValidatedOptions.error : ValidatedOptions.success}
             onSelect={handleTemplateChange}
             selected={selectedSpecifier}
           />
@@ -305,7 +323,7 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
             </SplitItem>
           </Split>
         </FormGroup>
-        {templateType == 'TARGET' && (
+        {template.type == 'TARGET' && (
           <HelperText className={`${automatedAnalysisRecordingName}-config-save-template-warning-helper`}>
             <HelperTextItem variant="warning">
               <Text component={TextVariants.p}>{t('AutomatedAnalysisConfigForm.TEMPLATE_INVALID_WARNING')}</Text>
@@ -316,8 +334,7 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
     ),
     [
       t,
-      templateName,
-      templateType,
+      template,
       templates,
       selectedSpecifier,
       maxSize,

diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
@@ -41,10 +41,10 @@ import { NotificationsContext } from '@app/Notifications/Notifications';
 import { MatchExpressionHint } from '@app/Shared/MatchExpression/MatchExpressionHint';
 import { MatchExpressionVisualizer } from '@app/Shared/MatchExpression/MatchExpressionVisualizer';
 import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
+import { SelectTemplateSelectorForm } from '@app/Shared/SelectTemplateSelectorForm';
 import { TemplateType } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
-import { SelectTemplateSelectorForm } from '@app/TemplateSelector/SelectTemplateSelectorForm';
 import { SearchExprService, SearchExprServiceContext } from '@app/Topology/Shared/utils';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { evaluateTargetWithExpr, portalRoot } from '@app/utils/utils';

diff --git a/src/app/Settings/AutomatedAnalysisConfig.tsx b/src/app/Settings/AutomatedAnalysisConfig.tsx
@@ -38,7 +38,7 @@
 
 import { AutomatedAnalysisConfigForm } from '@app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm';
 import { NO_TARGET } from '@app/Shared/Services/Target.service';
-import { TargetSelect } from '@app/TargetSelect/TargetSelect';
+import { TargetSelect } from '@app/Shared/TargetSelect';
 import { Stack, StackItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { of } from 'rxjs';

diff --git a/...teSelector/SelectTemplateSelectorForm.tsx → ...app/Shared/SelectTemplateSelectorForm.tsx b/...teSelector/SelectTemplateSelectorForm.tsx → ...app/Shared/SelectTemplateSelectorForm.tsx
diff --git a/src/app/TargetSelect/TargetSelect.tsx → src/app/Shared/TargetSelect.tsx b/src/app/TargetSelect/TargetSelect.tsx → src/app/Shared/TargetSelect.tsx