Miscellaneous bug fixes (opensearch-project#95)

* bug fixes Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * fixed group by legend for summary vis Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
riysaxen-amzn · Nov 9, 2022 · ce2b172 · ce2b172
1 parent 9b16ac5
commit ce2b172
Show file tree

Hide file tree

Showing 16 changed files with 152 additions and 50 deletions.
diff --git a/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx b/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
@@ -271,10 +271,17 @@ export default class AlertConditionPanel extends Component<
         label: severity,
       });
     });
-    const namesOptions: EuiComboBoxOptionOption<string>[] = rulesOptions.map((option) => ({
-      label: option.name,
-      value: option.id,
-    }));
+    const uniqueRuleNames = new Set<string>();
+    const namesOptions: EuiComboBoxOptionOption<string>[] = [];
+    rulesOptions.forEach((option) => {
+      if (!uniqueRuleNames.has(option.name)) {
+        uniqueRuleNames.add(option.name);
+        namesOptions.push({
+          label: option.name,
+          value: option.id,
+        });
+      }
+    });
 
     const channelId = alertCondition.actions[0].destination_id;
     const selectedNotificationChannelOption: NotificationChannelOption[] = [];

diff --git a/...teDetector/components/DefineDetector/components/DetectorDataSource/DetectorDataSource.tsx b/...teDetector/components/DefineDetector/components/DetectorDataSource/DetectorDataSource.tsx
@@ -66,8 +66,8 @@ export default class DetectorDataSource extends Component<
         );
         this.setState({ errorMessage: indicesResponse.error });
       }
-    } catch (e) {
-      errorNotificationToast(this.props.notifications, 'retrieve', 'indices', e);
+    } catch (error: any) {
+      errorNotificationToast(this.props.notifications, 'retrieve', 'indices', error);
     }
     this.setState({ loading: false });
   };

diff --git a/...etector/components/DefineDetector/components/DetectorDetails/DetectorBasicDetailsForm.tsx b/...etector/components/DefineDetector/components/DetectorDetails/DetectorBasicDetailsForm.tsx
@@ -54,19 +54,19 @@ export default class DetectorBasicDetailsForm extends Component<
     this.props.onDetectorNameChange(event.target.value.trimStart());
   };
 
-  onDescriptionBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onDescriptionBlur = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({
       descriptionFieldTouched: true,
       descriptionIsInvalid: !validateDescription(event.target.value),
     });
   };
 
-  onDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.props.onDetectorInputDescriptionChange(event.target.value.trimStart());
   };
 
   render() {
-    const { detectorName, detectorDescription, onDetectorInputDescriptionChange } = this.props;
+    const { detectorName, detectorDescription } = this.props;
     const {
       descriptionIsInvalid,
       descriptionFieldTouched,
@@ -93,7 +93,6 @@ export default class DetectorBasicDetailsForm extends Component<
         </EuiFormRow>
         <EuiSpacer size={'m'} />
 
-        {/*// TODO: Implement regex pattern validation for description field.*/}
         <EuiFormRow
           label={<FormFieldHeader headerTitle={'Description'} optionalField={true} />}
           isInvalid={descriptionFieldTouched && descriptionIsInvalid}

diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
@@ -20,12 +20,14 @@ import {
   CreateDetectorRulesState,
   DetectionRules,
 } from '../components/DetectionRules/DetectionRules';
+import { NotificationsStart } from 'opensearch-dashboards/public';
 
 interface DefineDetectorProps extends RouteComponentProps {
   detector: Detector;
   isEdit: boolean;
   indexService: IndexService;
   rulesState: CreateDetectorRulesState;
+  notifications: NotificationsStart;
   changeDetector: (detector: Detector) => void;
   updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   onPageChange: (page: { index: number; size: number }) => void;

diff --git a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
@@ -11,10 +11,12 @@ import { AlertTriggersView } from '../../../../Detectors/containers/AlertTrigger
 import { RouteComponentProps } from 'react-router-dom';
 import { Detector, FieldMapping } from '../../../../../../models/interfaces';
 import { DetectorCreationStep } from '../../../models/types';
+import { NotificationsStart } from 'opensearch-dashboards/public';
 
 export interface ReviewAndCreateProps extends RouteComponentProps {
   detector: Detector;
   existingMappings: FieldMapping[];
+  notifications: NotificationsStart;
   setDetectorCreationStep: (step: DetectorCreationStep) => void;
 }
 
@@ -56,6 +58,7 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
         <EuiSpacer size="l" />
         <AlertTriggersView
           {...this.props}
+          notifications={this.props.notifications}
           detector={this.props.detector}
           editAlertTriggers={this.setConfigureAlertsStep}
         />

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -122,8 +122,8 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
           createDetectorRes.error
         );
       }
-    } catch (e) {
-      errorNotificationToast(this.props.notifications, 'create', 'detector', e);
+    } catch (error: any) {
+      errorNotificationToast(this.props.notifications, 'create', 'detector', error);
     }
     this.setState({ creatingDetector: false });
   };
@@ -152,8 +152,8 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
   };
 
   getRulesOptions(): CreateDetectorRulesOptions {
-    const allRules = this.state.rulesState.allRules;
-    const options: CreateDetectorRulesOptions = allRules.map((rule) => ({
+    const enabledRules = this.state.rulesState.allRules.filter((rule) => rule.enabled);
+    const options: CreateDetectorRulesOptions = enabledRules.map((rule) => ({
       id: rule._id,
       name: rule._source.title,
       severity: rule._source.level,
@@ -309,6 +309,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
           <ConfigureFieldMapping
             {...this.props}
             detector={this.state.detector}
+            loading={false}
             filedMappingService={services.fieldMappingService}
             fieldMappings={this.state.fieldMappings}
             replaceFieldMappings={this.replaceFieldMappings}

diff --git a/public/pages/Detectors/components/UpdateFieldMappings/UpdateFieldMappings.tsx b/public/pages/Detectors/components/UpdateFieldMappings/UpdateFieldMappings.tsx
@@ -9,7 +9,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elas
 import ConfigureFieldMapping from '../../../CreateDetector/components/ConfigureFieldMapping';
 import { Detector, FieldMapping } from '../../../../../models/interfaces';
 import FieldMappingService from '../../../../services/FieldMappingService';
-import { DetectorHit, GetDetectorResponse } from '../../../../../server/models/interfaces';
+import { DetectorHit, SearchDetectorsResponse } from '../../../../../server/models/interfaces';
 import { EMPTY_DEFAULT_DETECTOR, ROUTES } from '../../../../utils/constants';
 import { DetectorsService } from '../../../../services';
 import { ServerResponse } from '../../../../../server/models/types';
@@ -57,12 +57,12 @@ export default class UpdateFieldMappings extends Component<
       const { detectorService, history } = this.props;
       const { detectorId } = this.state;
       const response = (await detectorService.getDetectors()) as ServerResponse<
-        GetDetectorResponse
+        SearchDetectorsResponse
       >;
       if (response.ok) {
         const detectorHit = response.response.hits.hits.find(
           (detectorHit) => detectorHit._id === detectorId
-        );
+        ) as DetectorHit;
         const detector = detectorHit._source;
         detector.detector_type = detector.detector_type.toLowerCase();
 
@@ -77,8 +77,8 @@ export default class UpdateFieldMappings extends Component<
       } else {
         errorNotificationToast(this.props.notifications, 'retrieve', 'detector', response.error);
       }
-    } catch (e) {
-      errorNotificationToast(this.props.notifications, 'retrieve', 'detector', e);
+    } catch (error: any) {
+      errorNotificationToast(this.props.notifications, 'retrieve', 'detector', error);
     }
     this.setState({ loading: false });
   };
@@ -129,8 +129,8 @@ export default class UpdateFieldMappings extends Component<
           updateDetectorResponse.error
         );
       }
-    } catch (e) {
-      errorNotificationToast(this.props.notifications, 'update', 'detector', e);
+    } catch (error: any) {
+      errorNotificationToast(this.props.notifications, 'update', 'detector', error);
     }
 
     this.setState({ submitting: false });

diff --git a/public/pages/Detectors/containers/Detector/DetectorDetails.tsx b/public/pages/Detectors/containers/Detector/DetectorDetails.tsx
@@ -172,7 +172,7 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
         this.context.chrome.setBreadcrumbs([
           BREADCRUMBS.SECURITY_ANALYTICS,
           BREADCRUMBS.DETECTORS,
-          BREADCRUMBS.DETECTORS_DETAILS(detector._source.name),
+          BREADCRUMBS.DETECTORS_DETAILS(detector._source.name, detector._id),
         ]);
       } else {
         errorNotificationToast(notifications, 'retrieve', 'detector', response.error);

diff --git a/public/pages/Findings/components/CreateAlertFlyout.tsx b/public/pages/Findings/components/CreateAlertFlyout.tsx
@@ -32,6 +32,7 @@ interface CreateAlertFlyoutProps extends RouteComponentProps {
   detectorService: DetectorsService;
   finding: Finding;
   notificationChannels: NotificationChannelTypeOptions[];
+  refreshNotificationChannels: () => void;
   allRules: object;
   rulesOptions: Pick<RulesSharedState, 'rulesOptions'>['rulesOptions'];
 }
@@ -53,7 +54,6 @@ export default class CreateAlertFlyout extends Component<
       alertCondition: EMPTY_DEFAULT_ALERT_CONDITION,
       loading: false,
       detector: this.props.finding.detector._source,
-      rules: [],
       submitting: false,
     };
   }
@@ -64,23 +64,24 @@ export default class CreateAlertFlyout extends Component<
 
   prepareAlertCondition = async () => {
     const { rulesOptions } = this.props;
-    const { alertCondition, detector } = this.state;
+    const { alertCondition } = this.state;
+    const newAlertCondition = { ...alertCondition };
 
-    const selectedRuleNames = new Set();
-    const selectedRuleSeverities = new Set();
-    const selectedTags = new Set();
+    const selectedRuleNames = new Set<string>();
+    const selectedRuleSeverities = new Set<string>();
+    const selectedTags = new Set<string>();
 
     rulesOptions.forEach((rule) => {
       selectedRuleNames.add(rule.id);
       selectedRuleSeverities.add(rule.severity);
       rule.tags.forEach((tag) => selectedTags.add(tag));
     });
 
-    alertCondition.ids = Array.from(selectedRuleNames);
-    alertCondition.sev_levels = Array.from(selectedRuleSeverities);
-    alertCondition.tags = Array.from(selectedTags);
+    newAlertCondition.ids = Array.from(selectedRuleNames);
+    newAlertCondition.sev_levels = Array.from(selectedRuleSeverities);
+    newAlertCondition.tags = Array.from(selectedTags);
 
-    this.setState({ alertCondition: { ...alertCondition } });
+    this.setState({ alertCondition: newAlertCondition });
   };
 
   onAlertConditionChange = (newDetector: Detector): void => {

diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
@@ -69,6 +69,14 @@ interface MainState {
   selectedNavItemIndex: number;
 }
 
+const navItemIndexByRoute: { [route: string]: number } = {
+  [ROUTES.OVERVIEW]: 1,
+  [ROUTES.FINDINGS]: 2,
+  [ROUTES.ALERTS]: 3,
+  [ROUTES.DETECTORS]: 4,
+  [ROUTES.RULES]: 5,
+};
+
 export default class Main extends Component<MainProps, MainState> {
   constructor(props: MainProps) {
     super(props);
@@ -78,6 +86,32 @@ export default class Main extends Component<MainProps, MainState> {
     };
   }
 
+  componentDidMount(): void {
+    this.updateSelectedNavItem();
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<MainProps>,
+    prevState: Readonly<MainState>,
+    snapshot?: any
+  ): void {
+    if (this.props.location.pathname === prevProps.location.pathname) {
+      return;
+    }
+
+    this.updateSelectedNavItem();
+  }
+
+  updateSelectedNavItem() {
+    if (navItemIndexByRoute[this.props.location.pathname] !== undefined) {
+      this.setState({ selectedNavItemIndex: navItemIndexByRoute[this.props.location.pathname] });
+    }
+
+    if (this.props.location.pathname.includes('detector-details')) {
+      this.setState({ selectedNavItemIndex: navItemIndexByRoute[ROUTES.DETECTORS] });
+    }
+  }
+
   setGetStartedDismissedOnce = () => {
     this.setState({ getStartedDismissedOnce: true });
   };

diff --git a/public/pages/Overview/components/Widgets/Summary.tsx b/public/pages/Overview/components/Widgets/Summary.tsx
@@ -64,6 +64,7 @@ export const Summary: React.FC<SummaryProps> = ({ alerts, findings }) => {
         time: getTimeWithMinPrecision(alert.time),
         alert: 1,
         finding: 0,
+        logType: alert.logType,
       });
     });
 

diff --git a/public/pages/Rules/components/RuleEditor/RuleEditor.tsx b/public/pages/Rules/components/RuleEditor/RuleEditor.tsx
@@ -21,6 +21,14 @@ import {
 import { Rule } from '../../../../../models/interfaces';
 import { FieldTextArray } from './FieldTextArray';
 import { ruleStatus, ruleTypes } from '../../utils/constants';
+import {
+  authorErrorString,
+  AUTHOR_REGEX,
+  descriptionErrorString,
+  nameErrorString,
+  validateDescription,
+  validateName,
+} from '../../../../utils/validation';
 
 export interface RuleEditorProps {
   services: BrowserServices;
@@ -34,6 +42,14 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
   const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
   };
+  const [nameError, setNameError] = useState('');
+  const onNameBlur = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!validateName(e.target.value)) {
+      setNameError(nameErrorString);
+    } else {
+      setNameError('');
+    }
+  };
 
   const [logType, setLogType] = useState(rule?.category || '');
   const onLogTypeChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -44,6 +60,14 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
   const onDescriptionChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setDescription(e.target.value);
   };
+  const [descriptionError, setDescriptionError] = useState('');
+  const onDescriptionBlur = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!validateDescription(e.target.value)) {
+      setDescriptionError(descriptionErrorString);
+    } else {
+      setDescriptionError('');
+    }
+  };
 
   const [level, setLevel] = useState(rule?.level || '');
   const onLevelChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -62,6 +86,14 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
   const onAuthorChange = (e: ChangeEvent<HTMLInputElement>) => {
     setAuthor(e.target.value);
   };
+  const [authorError, setAuthorError] = useState('');
+  const onAuthorBlur = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!validateName(e.target.value, AUTHOR_REGEX)) {
+      setAuthorError(authorErrorString);
+    } else {
+      setAuthorError('');
+    }
+  };
 
   const [status, setRuleStatus] = useState(rule?.status || '');
   const onStatusChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -129,11 +161,13 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
       <ContentPanel title={title}>
         <EuiFlexGroup component="span">
           <EuiFlexItem grow={false} style={{ minWidth: 400 }}>
-            <EuiFormRow label="Rule name">
+            <EuiFormRow label="Rule name" isInvalid={!!nameError} error={nameError}>
               <EuiFieldText
                 placeholder="Enter rule name"
                 value={name}
                 onChange={onNameChange}
+                onBlur={onNameBlur}
+                required
                 data-test-subj={'rule_name_field'}
               />
             </EuiFormRow>
@@ -154,10 +188,16 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
 
         <EuiSpacer />
 
-        <EuiFormRow label="Description" fullWidth>
+        <EuiFormRow
+          label="Description"
+          fullWidth
+          isInvalid={!!descriptionError}
+          error={descriptionError}
+        >
           <EuiTextArea
             value={description}
             onChange={onDescriptionChange}
+            onBlur={onDescriptionBlur}
             data-test-subj={'rule_description_field'}
           />
         </EuiFormRow>
@@ -224,11 +264,12 @@ export const RuleEditor: React.FC<RuleEditorProps> = ({ title, rule, FooterActio
           onFieldRemove={onFalsePositiveRemove}
         />
 
-        <EuiFormRow label="Author">
+        <EuiFormRow label="Author" isInvalid={!!authorError} error={authorError}>
           <EuiFieldText
             placeholder="Enter author name"
             value={author}
             onChange={onAuthorChange}
+            onBlur={onAuthorBlur}
             required
             data-test-subj={'rule_author_field'}
           />