[FEATURE] Detector must have at least one alert set #288 (#289)

* [FEATURE] Detector must have at least one alert set #288

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Detector must have at least one alert set #288

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>

Author: jovancvetkovic3006

public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx

@@ -27,6 +27,7 @@ import {
   parseNotificationChannelsToOptions,
 } from '../utils/helpers';
 import { NotificationsService } from '../../../../../services';
+import { validateName } from '../../../../../utils/validation';
 
 interface ConfigureAlertsProps extends RouteComponentProps {
   detector: Detector;
@@ -81,8 +82,9 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
 
   onAlertTriggerChanged = (newDetector: Detector): void => {
     const isTriggerDataValid = newDetector.triggers.every((trigger) => {
-      return !!trigger.name && trigger.severity;
+      return !!trigger.name && validateName(trigger.name) && trigger.severity;
     });
+
     this.props.changeDetector(newDetector);
     this.props.updateDataValidState(DetectorCreationStep.CONFIGURE_ALERTS, isTriggerDataValid);
   };
@@ -130,9 +132,13 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
                 paddingSize={'none'}
                 initialIsOpen={true}
                 extraAction={
-                  <EuiButton color="danger" onClick={() => this.onDelete(index)}>
-                    Remove alert trigger
-                  </EuiButton>
+                  triggers.length > 1 ? (
+                    <EuiButton color="danger" onClick={() => this.onDelete(index)}>
+                      Remove alert trigger
+                    </EuiButton>
+                  ) : (
+                    <></>
+                  )
                 }
               >
                 <EuiHorizontalRule margin={'xs'} />

public/pages/Detectors/components/UpdateAlertConditions/UpdateAlertConditions.tsx

@@ -23,6 +23,7 @@ import {
   getPlugins,
   successNotificationToast,
 } from '../../../../utils/helpers';
+import { DetectorCreationStep } from '../../../CreateDetector/models/types';
 
 export interface UpdateAlertConditionsProps
   extends RouteComponentProps<any, any, { detectorHit: DetectorHit }> {
@@ -39,6 +40,7 @@ export interface UpdateAlertConditionsState {
   rulesOptions: RuleOptions[];
   submitting: boolean;
   plugins: string[];
+  isTriggerNameValid: boolean;
 }
 
 export default class UpdateAlertConditions extends Component<
@@ -53,6 +55,7 @@ export default class UpdateAlertConditions extends Component<
       rulesOptions: [],
       submitting: false,
       plugins: [],
+      isTriggerNameValid: true,
     };
   }
 
@@ -189,8 +192,15 @@ export default class UpdateAlertConditions extends Component<
     });
   };
 
+  updateDataValidState = (step: DetectorCreationStep, isValid: boolean): void => {
+    this.setState({
+      isTriggerNameValid: isValid,
+    });
+  };
+
   render() {
-    const { detector, rulesOptions, submitting } = this.state;
+    const { detector, rulesOptions, submitting, isTriggerNameValid } = this.state;
+    const isSaveDisabled = submitting || !isTriggerNameValid;
     return (
       <div>
         <ConfigureAlerts
@@ -199,7 +209,7 @@ export default class UpdateAlertConditions extends Component<
           detector={detector}
           rulesOptions={rulesOptions}
           changeDetector={this.changeDetector}
-          updateDataValidState={() => {}}
+          updateDataValidState={this.updateDataValidState}
           hasNotificationPlugin={this.state.plugins.includes(OS_NOTIFICATION_PLUGIN)}
         />
 
@@ -211,7 +221,7 @@ export default class UpdateAlertConditions extends Component<
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
-              disabled={submitting}
+              disabled={isSaveDisabled}
               fill={true}
               isLoading={submitting}
               onClick={this.onSave}