Updated context type being passed to detector notification form

opensearch-project · Dec 21, 2024 · 4da8746 · 4da8746
1 parent 00d2e7f
commit 4da8746
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/public/components/Notifications/NotificationForm.tsx b/public/components/Notifications/NotificationForm.tsx
@@ -18,7 +18,7 @@ import {
   EuiCompressedTextArea,
   EuiCompressedCheckbox,
 } from '@elastic/eui';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { NOTIFICATIONS_HREF } from '../../utils/constants';
 import { NotificationsCallOut } from '../NotificationsCallOut';
 import {
@@ -28,7 +28,7 @@ import {
   TriggerContext,
 } from '../../../types';
 import { getIsNotificationPluginInstalled } from '../../utils/helpers';
-import Mustache from 'mustache';
+import { render } from 'mustache';
 
 export interface NotificationFormProps {
   allNotificationChannels: NotificationChannelTypeOptions[];
@@ -58,8 +58,10 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
   const hasNotificationPlugin = getIsNotificationPluginInstalled();
   const [shouldSendNotification, setShouldSendNotification] = useState(!!action?.destination_id);
   const selectedNotificationChannelOption: NotificationChannelOption[] = [];
-  const onDisplayPreviewChange = (e) => setDisplayPreview(e.target.checked);
   const [displayPreview, setDisplayPreview] = useState(false);
+  const onDisplayPreviewChange = useCallback((e) => setDisplayPreview(e.target.checked), [
+    displayPreview,
+  ]);
   if (shouldSendNotification && action?.destination_id) {
     allNotificationChannels.forEach((typeOption) => {
       const matchingChannel = typeOption.options.find(
@@ -70,7 +72,7 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
   }
   let preview = '';
   try {
-    preview = `${Mustache.render(action?.subject_template.source, context)}\n\n${Mustache.render(
+    preview = `${render(action?.subject_template.source, context)}\n\n${render(
       action?.message_template.source,
       context
     )}`;
@@ -194,7 +196,7 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
                   onChange={onDisplayPreviewChange}
                 />
               </EuiFlexItem>
-              {displayPreview ? (
+              {displayPreview && (
                 <EuiFlexItem>
                   <EuiCompressedFormRow label="Message preview" fullWidth>
                     <EuiCompressedTextArea
@@ -205,7 +207,7 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
                     />
                   </EuiCompressedFormRow>
                 </EuiFlexItem>
-              ) : null}
+              )}
             </EuiFlexGroup>
           </EuiAccordion>
 

diff --git a/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx b/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
@@ -28,6 +28,7 @@ import {
   Detector,
   NotificationChannelOption,
   NotificationChannelTypeOptions,
+  TriggerContext,
 } from '../../../../../../../types';
 import { NotificationForm } from '../../../../../../components/Notifications/NotificationForm';
 import { ALERT_SEVERITY_OPTIONS, DEFAULT_MESSAGE_SOURCE } from '../../../../../../utils/constants';
@@ -99,23 +100,25 @@ export default class AlertConditionPanel extends Component<
     });
   }
 
-  getTriggerContext = () => {
+  getTriggerContext = (): TriggerContext => {
     const lineBreakAndTab = '\n\t';
     const { alertCondition, detector } = this.props;
     const detectorInput = detector.inputs[0].detector_input;
     const detectorIndices = `${lineBreakAndTab}${detectorInput.indices.join(
       `,${lineBreakAndTab}`
     )}`;
     return {
-      trigger: {
-        name: alertCondition.name,
-        severity:
-          parseAlertSeverityToOption(alertCondition.severity)?.label || alertCondition.severity,
-      },
-      detector: {
-        name: detector.name,
-        description: detectorInput.description,
-        datasources: detectorIndices,
+      ctx: {
+        trigger: {
+          name: alertCondition.name,
+          severity:
+            parseAlertSeverityToOption(alertCondition.severity)?.label || alertCondition.severity,
+        },
+        detector: {
+          name: detector.name,
+          description: detectorInput.description,
+          datasources: detectorIndices,
+        },
       },
     };
   };
@@ -307,7 +310,6 @@ export default class AlertConditionPanel extends Component<
   };
 
   render() {
-    const context = this.getTriggerContext();
     const {
       alertCondition = getEmptyAlertCondition(),
       allNotificationChannels,
@@ -559,9 +561,7 @@ export default class AlertConditionPanel extends Component<
 
         <NotificationForm
           action={alertCondition.actions[0]}
-          context={{
-            ctx: context,
-          }}
+          context={this.getTriggerContext()}
           allNotificationChannels={allNotificationChannels}
           loadingNotifications={loadingNotifications}
           prepareMessage={this.prepareMessage}

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -321,10 +321,6 @@ export const dataSourceObservable = new BehaviorSubject<DataSourceOption>({});
 
 export const DATA_SOURCE_NOT_SET_ERROR = 'Data source is not set';
 
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
 export const DEFAULT_MESSAGE_SOURCE = {
   MESSAGE_BODY: `- Triggered alert condition: {{ctx.trigger.name}}
  - Severity: {{ctx.trigger.severity}}

diff --git a/types/Alert.ts b/types/Alert.ts
@@ -44,14 +44,16 @@ export interface TriggerAction {
 }
 
 export interface TriggerContext {
-  trigger: {
-    name: string;
-    severity: string;
-  };
-  detector: {
-    name: string;
-    description: string;
-    datasources: string;
+  ctx: {
+    trigger: {
+      name: string;
+      severity: string;
+    };
+    detector: {
+      name: string;
+      description: string;
+      datasources: string;
+    };
   };
 }