Edit detector - UX improvements and updates opensearch-project#482

Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Mar 22, 2023 · 291ae7a · 291ae7a
1 parent 8c82a41
commit 291ae7a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 26 deletions.
diff --git a/public/app.scss b/public/app.scss
@@ -13,7 +13,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 
 @import "./components/Charts/ChartContainer.scss";
 @import "./pages/Overview/components/Widgets/WidgetContainer.scss";
-@import "./pages/Detectors/components/NewFieldMappings/NewFieldMappings";
+@import "./pages/Detectors/components/ReviewFieldMappings/ReviewFieldMappings.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
@@ -120,4 +120,4 @@ $euiTextColor: $euiColorDarkestShade !default;
 
 .sa-overview-widget-empty tbody > .euiTableRow > .euiTableRowCell {
   border-bottom: none;
-} 
+}
diff --git a/...ts/NewFieldMappings/NewFieldMappings.scss → ...iewFieldMappings/ReviewFieldMappings.scss b/...ts/NewFieldMappings/NewFieldMappings.scss → ...iewFieldMappings/ReviewFieldMappings.scss
@@ -1,4 +1,4 @@
-.newFieldMappings {
+.reviewFieldMappings {
   .editFieldMappings {
     .euiPanel {
       &.euiPanel--hasShadow {
@@ -14,4 +14,4 @@
       background-color: transparent !important;
     }
   }
-}
+}
diff --git a/...nts/NewFieldMappings/NewFieldMappings.tsx → ...viewFieldMappings/ReviewFieldMappings.tsx b/...nts/NewFieldMappings/NewFieldMappings.tsx → ...viewFieldMappings/ReviewFieldMappings.tsx
@@ -12,22 +12,23 @@ import { ContentPanel } from '../../../../components/ContentPanel';
 import { FieldMappingService } from '../../../../services';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { Detector } from '../../../../../types';
+import { RouteComponentProps } from 'react-router-dom';
 
-export interface UpdateFieldMappingsProps {
+export interface UpdateFieldMappingsProps extends RouteComponentProps<any, any> {
   detector: Detector;
   fieldMappingService?: FieldMappingService;
   notifications: NotificationsStart;
   onFieldMappingChange: (fieldMappings: FieldMapping[]) => void;
-  ruleQueryFields: Set<string>;
+  ruleQueryFields?: Set<string>;
 }
 
 export interface UpdateFieldMappingsState {
   fieldMappings: FieldMapping[];
   loading: boolean;
-  ruleQueryFields: string[];
+  ruleQueryFields?: Set<string>;
 }
 
-export default class NewFieldMappings extends Component<
+export default class ReviewFieldMappings extends Component<
   UpdateFieldMappingsProps,
   UpdateFieldMappingsState
 > {
@@ -37,7 +38,7 @@ export default class NewFieldMappings extends Component<
     super(props);
 
     this.state = {
-      ruleQueryFields: [],
+      ruleQueryFields: new Set(),
       fieldMappings: [],
       loading: false,
     };
@@ -61,10 +62,10 @@ export default class NewFieldMappings extends Component<
 
   render() {
     const { detector, fieldMappingService } = this.props;
-    const { fieldMappings = [], loading, ruleQueryFields = [] } = this.state;
+    const { fieldMappings = [], loading, ruleQueryFields = new Set([]) } = this.state;
     return (
       <ContentPanel
-        className={'newFieldMappings'}
+        className={'reviewFieldMappings'}
         title={
           <>
             <EuiTitle size={'m'}>

diff --git a/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx b/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx
@@ -11,12 +11,12 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
-import { Detector, PeriodSchedule } from '../../../../../models/interfaces';
+import { PeriodSchedule } from '../../../../../models/interfaces';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import DetectorBasicDetailsForm from '../../../CreateDetector/components/DefineDetector/components/DetectorDetails';
 import DetectorDataSource from '../../../CreateDetector/components/DefineDetector/components/DetectorDataSource';
-import { IndexService, ServicesContext } from '../../../../services';
+import { FieldMappingService, IndexService, ServicesContext } from '../../../../services';
 import { DetectorSchedule } from '../../../CreateDetector/components/DefineDetector/components/DetectorSchedule/DetectorSchedule';
 import { useCallback } from 'react';
 import { DetectorHit, SearchDetectorsResponse } from '../../../../../server/models/interfaces';
@@ -25,8 +25,8 @@ import { ServerResponse } from '../../../../../server/models/types';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { errorNotificationToast, successNotificationToast } from '../../../../utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
-import NewFieldMappings from '../NewFieldMappings/NewFieldMappings';
-import { FieldMapping } from '../../../../../types';
+import ReviewFieldMappings from '../ReviewFieldMappings/ReviewFieldMappings';
+import { FieldMapping, Detector } from '../../../../../types';
 
 export interface UpdateDetectorBasicDetailsProps
   extends RouteComponentProps<any, any, { detectorHit: DetectorHit }> {
@@ -36,7 +36,7 @@ export interface UpdateDetectorBasicDetailsProps
 export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProps> = (props) => {
   const services = useContext(ServicesContext);
   const [detector, setDetector] = useState<Detector>(
-    props.location.state?.detectorHit?._source || EMPTY_DEFAULT_DETECTOR
+    (props.location.state?.detectorHit?._source || EMPTY_DEFAULT_DETECTOR) as Detector
   );
   const [fieldMappings, setFieldMappings] = useState<FieldMapping[]>();
   const { name, inputs } = detector;
@@ -57,7 +57,7 @@ export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProp
         const detectorHit = response.response.hits.hits.find(
           (detectorHit) => detectorHit._id === detectorId
         ) as DetectorHit;
-        setDetector(detectorHit._source);
+        setDetector(detectorHit._source as Detector);
 
         context?.chrome.setBreadcrumbs([
           BREADCRUMBS.SECURITY_ANALYTICS,
@@ -265,7 +265,7 @@ export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProp
         notifications={props.notifications}
         indexService={services?.indexService as IndexService}
         detectorIndices={inputs[0].detector_input.indices}
-        fieldMappingService={services?.fieldMappingService}
+        fieldMappingService={services?.fieldMappingService as FieldMappingService}
         onDetectorInputIndicesChange={onDetectorInputIndicesChange}
       />
       <EuiSpacer size={'xl'} />
@@ -275,7 +275,7 @@ export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProp
 
       {showMappings ? (
         <>
-          <NewFieldMappings
+          <ReviewFieldMappings
             {...props}
             detector={detector}
             fieldMappingService={services?.fieldMappingService}

diff --git a/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx b/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx
@@ -23,8 +23,8 @@ import { RuleTableItem } from '../../../Rules/utils/helpers';
 import { RuleViewerFlyout } from '../../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
 import { ContentPanel } from '../../../../components/ContentPanel';
 import { DataStore } from '../../../../store/DataStore';
-import NewFieldMappings from '../NewFieldMappings/NewFieldMappings';
-import { FieldMapping, Detector, RuleInfo } from '../../../../../types';
+import ReviewFieldMappings from '../ReviewFieldMappings/ReviewFieldMappings';
+import { FieldMapping, Detector } from '../../../../../types';
 
 export interface UpdateDetectorRulesProps
   extends RouteComponentProps<
@@ -39,7 +39,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   const services = useContext(ServicesContext);
   const [loading, setLoading] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  const [detector, setDetector] = useState<Detector>(EMPTY_DEFAULT_DETECTOR);
+  const [detector, setDetector] = useState<Detector>(EMPTY_DEFAULT_DETECTOR as Detector);
   const [customRuleItems, setCustomRuleItems] = useState<RuleItem[]>([]);
   const [prePackagedRuleItems, setPrePackagedRuleItems] = useState<RuleItem[]>([]);
   const detectorId = props.location.pathname.replace(`${ROUTES.EDIT_DETECTOR_RULES}/`, '');
@@ -60,7 +60,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
         const detectorHit = response.response.hits.hits.find(
           (detectorHit) => detectorHit._id === detectorId
         ) as DetectorHit;
-        const newDetector = { ...detectorHit._source, id: detectorId };
+        const newDetector = { ...detectorHit._source, id: detectorId } as Detector;
         setDetector(newDetector);
 
         context?.chrome.setBreadcrumbs([
@@ -145,7 +145,6 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
           rule.id === changedItem.id ? { ...rule, active: isActive } : rule
         );
         setPrePackagedRuleItems(updatedPrePackgedRules);
-        debugger;
         const withPrePackagedRulesUpdated = updatedPrePackgedRules
           .concat(customRuleItems)
           .filter((rule) => rule.active);
@@ -300,7 +299,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
         <EuiSpacer size="xl" />
 
         {showMappings ? (
-          <NewFieldMappings
+          <ReviewFieldMappings
             {...props}
             ruleQueryFields={ruleQueryFields}
             detector={detector}

diff --git a/public/pages/Detectors/containers/FieldMappings/EditFieldMapping.tsx b/public/pages/Detectors/containers/FieldMappings/EditFieldMapping.tsx
@@ -31,7 +31,7 @@ interface EditFieldMappingsProps extends RouteComponentProps {
   loading: boolean;
   replaceFieldMappings: (mappings: FieldMapping[]) => void;
   initialIsOpen?: boolean;
-  ruleQueryFields?: string[];
+  ruleQueryFields?: Set<string>;
 }
 
 interface EditFieldMappingsState {