Create detector refactor alert triggers per mocks (#503) (#514)

* [FEATURE] Create detector \ Refactor and move field mapping to first the page of create detector feature #495 * [FEATURE] Create global state object for async requests #493 * [FEATURE] Create detector \ Refactor alert triggers per mocks #498 * [FEATURE] Create detector \ Refactor alert triggers per mocks #498 * [FEATURE] Create detector \ Refactor alert triggers per mocks #498 * Create detector refactor alert triggers per mocks #503 * Update detector details component #504 --------- Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> Co-authored-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
opensearch-project · Apr 17, 2023 · c8c288a · c8c288a
1 parent 0faf5e6
commit c8c288a
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 103 deletions.
diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -18,6 +18,10 @@ const testMappings = {
 
 const cypressDNSRule = dns_rule_data.title;
 
+const cypressIndexDns = 'cypress-index-dns';
+const cypressIndexWindows = 'cypress-index-windows';
+const detectorName = 'test detector';
+
 const createDetector = (detectorName, dataSource, expectFailure) => {
   // Locate Create detector button click to start
   cy.get('.euiButton').filter(':contains("Create detector")').click({ force: true });
@@ -73,10 +77,10 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
   cy.get('button').contains('Next').click({ force: true });
 
   // Check that correct page now showing
-  cy.contains('Set up alerts');
+  cy.contains('Set up alert triggers');
 
   // Type name of new trigger
-  cy.get(`input[placeholder="Enter a name for the alert condition."]`)
+  cy.get(`input[placeholder="Enter a name to describe the alert condition"]`)
     .focus()
     .realType('test_trigger');
 
@@ -113,8 +117,7 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
   cy.contains('Detector details');
   cy.contains(detectorName);
   cy.contains('dns');
-  cy.contains(dataSource);
-  cy.contains('Alert on test_trigger');
+  cy.contains('test_trigger');
 
   // Create the detector
   cy.get('button').contains('Create').click({ force: true });
@@ -141,10 +144,6 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
 };
 
 describe('Detectors', () => {
-  const cypressIndexDns = 'cypress-index-dns';
-  const cypressIndexWindows = 'cypress-index-windows';
-  const detectorName = 'test detector';
-
   before(() => {
     cy.cleanUpTests();
 
@@ -362,6 +361,8 @@ describe('Detectors', () => {
     cy.get(`[data-test-subj="define-detector-select-data-source"]`).type(
       `${cypressIndexWindows}{enter}`
     );
+
+    cy.get('.reviewFieldMappings').should('be.visible');
   });
 
   it('...should show field mappings if rule selection is changed', () => {

diff --git a/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx b/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
@@ -311,7 +311,7 @@ export default class AlertConditionPanel extends Component<
           error={getNameErrorMessage(name, nameIsInvalid, nameFieldTouched)}
         >
           <EuiFieldText
-            placeholder={'Enter a name for the alert condition.'}
+            placeholder={'Enter a name to describe the alert condition'}
             readOnly={false}
             value={name}
             onBlur={this.onNameBlur}

diff --git a/...ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap b/...ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
@@ -40,7 +40,7 @@ Object {
                   class="euiFieldText"
                   data-test-subj="alert-condition-name-0"
                   id="some_html_id"
-                  placeholder="Enter a name for the alert condition."
+                  placeholder="Enter a name to describe the alert condition"
                   type="text"
                   value="alert_name"
                 />
@@ -779,7 +779,7 @@ Object {
                 class="euiFieldText"
                 data-test-subj="alert-condition-name-0"
                 id="some_html_id"
-                placeholder="Enter a name for the alert condition."
+                placeholder="Enter a name to describe the alert condition"
                 type="text"
                 value="alert_name"
               />

diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -8,16 +8,17 @@ import { RouteComponentProps } from 'react-router-dom';
 import {
   EuiAccordion,
   EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiTitle,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
-import { createDetectorSteps } from '../../../utils/constants';
 import { MAX_ALERT_CONDITIONS } from '../utils/constants';
 import AlertConditionPanel from '../components/AlertCondition';
-import { Detector } from '../../../../../../models/interfaces';
 import { DetectorCreationStep } from '../../../models/types';
 import { CreateDetectorRulesOptions } from '../../../../../models/types';
 import { NotificationChannelTypeOptions } from '../models/interfaces';
@@ -30,6 +31,7 @@ import { NotificationsService } from '../../../../../services';
 import { validateName } from '../../../../../utils/validation';
 import { CoreServicesContext } from '../../../../../components/core_services';
 import { BREADCRUMBS } from '../../../../../utils/constants';
+import { Detector } from '../../../../../../types';
 
 interface ConfigureAlertsProps extends RouteComponentProps {
   detector: Detector;
@@ -39,6 +41,7 @@ interface ConfigureAlertsProps extends RouteComponentProps {
   updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   notificationsService: NotificationsService;
   hasNotificationPlugin: boolean;
+  skipAndConfigureHandler: () => void;
 }
 
 interface ConfigureAlertsState {
@@ -77,12 +80,10 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
   componentDidMount = async () => {
     this.updateBreadcrumbs();
     const {
-      isEdit,
-      detector,
       detector: { triggers },
     } = this.props;
     this.getNotificationChannels();
-    
+
     if (triggers.length === 0) {
       this.addCondition();
     }
@@ -114,9 +115,11 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
   };
 
   onAlertTriggerChanged = (newDetector: Detector): void => {
-    const isTriggerDataValid = newDetector.triggers.every((trigger) => {
-      return !!trigger.name && validateName(trigger.name) && trigger.severity;
-    });
+    const isTriggerDataValid =
+      !newDetector.triggers.length ||
+      newDetector.triggers.every((trigger) => {
+        return !!trigger.name && validateName(trigger.name) && trigger.severity;
+      });
 
     this.props.changeDetector(newDetector);
     this.props.updateDataValidState(DetectorCreationStep.CONFIGURE_ALERTS, isTriggerDataValid);
@@ -135,22 +138,45 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
     const {
       isEdit,
       detector: { triggers },
+      skipAndConfigureHandler,
     } = this.props;
+
+    let getPageTitle = (): string | JSX.Element => {
+      if (isEdit) {
+        return <>Alert triggers (${triggers.length})</>;
+      }
+
+      return (
+        <EuiFlexGroup alignItems={'center'}>
+          <EuiFlexItem grow={true}>
+            <EuiTitle size={'m'}>
+              <h3>Set up alert triggers</h3>
+            </EuiTitle>
+            <EuiText size="s" color="subdued">
+              Get notified when specific rule conditions are found by the detector.
+            </EuiText>
+          </EuiFlexItem>
+          {triggers?.length && (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => {
+                  const { changeDetector, detector } = this.props;
+                  changeDetector({ ...detector, triggers: [] });
+                  skipAndConfigureHandler();
+                }}
+              >
+                Skip and configure later
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      );
+    };
+
     const { loading, notificationChannels } = this.state;
     return (
       <div>
-        <EuiTitle size={'m'}>
-          <h3>
-            {isEdit
-              ? 'Edit alert triggers'
-              : createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title +
-                ` (${triggers.length})`}
-          </h3>
-        </EuiTitle>
-
-        <EuiText size="s" color="subdued">
-          Get notified when specific rule conditions are found by the detector.
-        </EuiText>
+        {getPageTitle()}
 
         <EuiSpacer size={'m'} />
 
@@ -162,19 +188,15 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
                 id={`alert-condition-${index}`}
                 buttonContent={
                   <EuiTitle>
-                    <h4>{alertCondition.name}</h4>
+                    <h4>{isEdit ? alertCondition.name : 'Alert trigger'}</h4>
                   </EuiTitle>
                 }
                 paddingSize={'none'}
                 initialIsOpen={true}
                 extraAction={
-                  triggers.length > 1 ? (
-                    <EuiButton color="danger" onClick={() => this.onDelete(index)}>
-                      Remove alert trigger
-                    </EuiButton>
-                  ) : (
-                    <></>
-                  )
+                  <EuiButton color="danger" onClick={() => this.onDelete(index)}>
+                    Remove
+                  </EuiButton>
                 }
               >
                 <EuiHorizontalRule margin={'xs'} />
@@ -193,11 +215,26 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
             </EuiPanel>
           </div>
         ))}
+        {!triggers?.length && (
+          <EuiCallOut
+            color={'primary'}
+            iconType={'iInCircle'}
+            title={
+              <>
+                <p>
+                  We recommend creating alert triggers to get notified when specific conditions are
+                  found by the detector.
+                </p>
+                <p>You can also configure alert triggers after the detector is created.</p>
+              </>
+            }
+          />
+        )}
 
         <EuiSpacer size={'m'} />
 
         <EuiButton disabled={triggers.length >= MAX_ALERT_CONDITIONS} onClick={this.addCondition}>
-          {`Add ${triggers.length > 0 ? 'another' : 'an'} alert condition`}
+          {triggers.length > 0 ? 'Add another alert trigger' : 'Add alert triggers'}
         </EuiButton>
       </div>
     );

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -312,6 +312,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
             updateDataValidState={this.updateDataValidState}
             notificationsService={services.notificationsService}
             hasNotificationPlugin={this.state.plugins.includes(OS_NOTIFICATION_PLUGIN)}
+            skipAndConfigureHandler={this.onNextClick}
           />
         );
       case DetectorCreationStep.REVIEW_CREATE:
@@ -355,7 +356,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
           {currentStep > DetectorCreationStep.DEFINE_DETECTOR && (
             <EuiFlexItem grow={false}>
               <EuiButton disabled={creatingDetector} onClick={this.onPreviousClick}>
-                Previous
+                Back
               </EuiButton>
             </EuiFlexItem>
           )}
@@ -380,7 +381,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
                 fill={true}
                 onClick={this.onCreateClick}
               >
-                Create
+                Create detector
               </EuiButton>
             </EuiFlexItem>
           )}

diff --git a/public/pages/CreateDetector/utils/constants.ts b/public/pages/CreateDetector/utils/constants.ts
@@ -12,7 +12,7 @@ export const createDetectorSteps: Record<DetectorCreationStep, DetectorCreationS
     step: 1,
   },
   [DetectorCreationStep.CONFIGURE_ALERTS]: {
-    title: 'Set up alerts',
+    title: 'Set up alert triggers',
     step: 2,
   },
   [DetectorCreationStep.REVIEW_CREATE]: {

diff --git a/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx b/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
@@ -44,15 +44,15 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
   const conditionRuleNames = ids.map((ruleId) => rules[ruleId]?._source.title);
   return (
     <div>
-      {orderPosition > 0 && <EuiHorizontalRule />}
-      <EuiSpacer size={'l'} />
+      {orderPosition > 0 && <EuiHorizontalRule margin={'m'} />}
+      {orderPosition === 0 && <EuiSpacer size={'s'} />}
       <EuiAccordion
         id={`alert-trigger-${orderPosition}`}
         paddingSize={'m'}
         initialIsOpen={false}
         buttonContent={
           <EuiText size="m">
-            <p>{`Alert on ${name}`}</p>
+            <p>{name}</p>
           </EuiText>
         }
       >
@@ -104,7 +104,6 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
           },
         ])}
       </EuiAccordion>
-      <EuiSpacer size={'m'} />
     </div>
   );
 };
diff --git a/.../pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap b/.../pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
@@ -7,10 +7,7 @@ Object {
     <div>
       <div>
         <hr
-          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-        />
-        <div
-          class="euiSpacer euiSpacer--l"
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
         <div
           class="euiAccordion"
@@ -37,7 +34,7 @@ Object {
                   class="euiText euiText--medium"
                 >
                   <p>
-                    Alert on alert_name
+                    alert_name
                   </p>
                 </div>
               </span>
@@ -362,19 +359,13 @@ Object {
             </div>
           </div>
         </div>
-        <div
-          class="euiSpacer euiSpacer--m"
-        />
       </div>
     </div>
   </body>,
   "container": <div>
     <div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-      />
-      <div
-        class="euiSpacer euiSpacer--l"
+        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
       />
       <div
         class="euiAccordion"
@@ -401,7 +392,7 @@ Object {
                 class="euiText euiText--medium"
               >
                 <p>
-                  Alert on alert_name
+                  alert_name
                 </p>
               </div>
             </span>
@@ -726,9 +717,6 @@ Object {
           </div>
         </div>
       </div>
-      <div
-        class="euiSpacer euiSpacer--m"
-      />
     </div>
   </div>,
   "debug": [Function],

diff --git a/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx b/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
@@ -29,7 +29,7 @@ const columns: EuiBasicTableColumn<FieldMappingsTableItem>[] = [
   },
   {
     field: 'logFieldName',
-    name: 'Mapped index field name',
+    name: 'Mapped log field name',
   },
 ];