[FEATURE] Create detector \ Refactor alert triggers per mocks opensea…

…rch-project#498 Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Apr 6, 2023 · e3afea6 · e3afea6
1 parent 62055c8
commit e3afea6
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 23 deletions.
diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -13,8 +13,10 @@ import {
   EuiSpacer,
   EuiTitle,
   EuiText,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
-import { createDetectorSteps } from '../../../utils/constants';
 import { MAX_ALERT_CONDITIONS } from '../utils/constants';
 import AlertConditionPanel from '../components/AlertCondition';
 import { DetectorCreationStep } from '../../../models/types';
@@ -39,6 +41,7 @@ interface ConfigureAlertsProps extends RouteComponentProps {
   updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   notificationsService: NotificationsService;
   hasNotificationPlugin: boolean;
+  skipAndConfigureHandler: () => void;
 }
 
 interface ConfigureAlertsState {
@@ -112,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);
@@ -133,21 +138,45 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
     const {
       isEdit,
       detector: { triggers },
+      skipAndConfigureHandler,
     } = this.props;
+
+    let getPageTitle = (): string | JSX.Element => {
+      let title = (
+        <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>
+      );
+      if (isEdit) {
+        title = <>Alert triggers (${triggers.length})</>;
+      }
+
+      return title;
+    };
     const { loading, notificationChannels } = this.state;
     return (
       <div>
-        <EuiTitle size={'m'}>
-          <h3>
-            {isEdit
-              ? `Alert triggers (${triggers.length})`
-              : createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title}
-          </h3>
-        </EuiTitle>
-
-        <EuiText size="s" color="subdued">
-          Get notified when specific rule conditions are found by the detector.
-        </EuiText>
+        {getPageTitle()}
 
         <EuiSpacer size={'m'} />
 
@@ -186,6 +215,21 @@ 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'} />
 

diff --git a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
@@ -9,9 +9,10 @@ import { DetectorDetailsView } from '../../../../Detectors/containers/DetectorDe
 import { FieldMappingsView } from '../../../../Detectors/components/FieldMappingsView/FieldMappingsView';
 import { AlertTriggersView } from '../../../../Detectors/containers/AlertTriggersView/AlertTriggersView';
 import { RouteComponentProps } from 'react-router-dom';
-import { Detector, FieldMapping } from '../../../../../../models/interfaces';
+import { FieldMapping } from '../../../../../../models/interfaces';
 import { DetectorCreationStep } from '../../../models/types';
 import { NotificationsStart } from 'opensearch-dashboards/public';
+import { Detector } from '../../../../../../types';
 
 export interface ReviewAndCreateProps extends RouteComponentProps {
   detector: Detector;

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -322,6 +322,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:
@@ -390,7 +391,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
                 fill={true}
                 onClick={this.onCreateClick}
               >
-                Create
+                Create detector
               </EuiButton>
             </EuiFlexItem>
           )}

diff --git a/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx b/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
@@ -11,12 +11,13 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { AlertCondition, Detector } from '../../../../../models/interfaces';
+import { AlertCondition } from '../../../../../models/interfaces';
 import React from 'react';
 import { createTextDetailsGroup } from '../../../../utils/helpers';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
 import { DEFAULT_EMPTY_DATA, getNotificationDetailsHref } from '../../../../utils/constants';
 import { FeatureChannelList, RuleInfo } from '../../../../../server/models/interfaces';
+import { Detector } from '../../../../../types';
 
 export interface AlertTriggerViewProps {
   alertTrigger: AlertCondition;

diff --git a/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx b/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
@@ -18,7 +18,7 @@ export interface FieldMappingsViewProps {
   existingMappings?: FieldMapping[];
   editFieldMappings: () => void;
   notifications: NotificationsStart;
-  isEditable: boolean;
+  isEditable?: boolean;
 }
 
 const columns: EuiBasicTableColumn<FieldMappingsTableItem>[] = [

diff --git a/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx b/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx
@@ -5,9 +5,8 @@
 
 import { ContentPanel } from '../../../../components/ContentPanel';
 import React, { useMemo, useEffect, useState, useContext } from 'react';
-import { EuiButton } from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { AlertTriggerView } from '../../components/AlertTriggerView/AlertTriggerView';
-import { Detector } from '../../../../../models/interfaces';
 import { ServicesContext } from '../../../../services';
 import { ServerResponse } from '../../../../../server/models/types';
 import {
@@ -18,12 +17,13 @@ import {
 import { errorNotificationToast } from '../../../../utils/helpers';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { DataStore } from '../../../../store/DataStore';
+import { Detector } from '../../../../../types';
 
 export interface AlertTriggersViewProps {
   detector: Detector;
   editAlertTriggers: () => void;
   notifications: NotificationsStart;
-  isEditable: boolean;
+  isEditable?: boolean;
 }
 
 export const AlertTriggersView: React.FC<AlertTriggersViewProps> = ({
@@ -102,6 +102,27 @@ export const AlertTriggersView: React.FC<AlertTriggersViewProps> = ({
           rules={rules}
         />
       ))}
+      {!detector?.triggers?.length && (
+        <>
+          <EuiSpacer size={'m'} />
+          <p>No alert triggers defined.</p>
+          <EuiSpacer size={'m'} />
+
+          <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>
+              </>
+            }
+          />
+        </>
+      )}
     </ContentPanel>
   );
 };
diff --git a/public/pages/Detectors/containers/DetectorDetailsView/DetectorDetailsView.tsx b/public/pages/Detectors/containers/DetectorDetailsView/DetectorDetailsView.tsx
@@ -20,7 +20,7 @@ export interface DetectorDetailsViewProps {
   dashboardId?: string;
   editBasicDetails: () => void;
   editDetectorRules: (enabledRules: RuleItem[], allRuleItems: RuleItem[]) => void;
-  isEditable: boolean;
+  isEditable?: boolean;
 }
 
 export interface DetectorDetailsViewState {}