opensearch-project · amsiglan · Jul 12, 2023 · Jun 9, 2023 · Jun 9, 2023 · Jun 15, 2023
@@ -55,6 +55,7 @@ describe('CompositeLevelMonitor', () => {
 
     it('by visual editor', () => {
       // Select visual editor for method of definition
+      // cy.intercept('GET', '/api/notifications/get_configs?*', channelResponse);
       cy.get('[data-test-subj="visualEditorRadioCard"]').click({ force: true });
 
       // Wait for input to load and then type in the monitor name
@@ -68,30 +69,17 @@ describe('CompositeLevelMonitor', () => {
         .type('monitorTwo', { delay: 50 })
         .type('{enter}');
 
+      cy.get('button').contains('Add trigger').click({ force: true });
+
       // Type trigger name
       cy.get('[data-test-subj="composite-trigger-name"]')
         .type('{selectall}')
         .type('{backspace}')
         .type('Composite trigger');
 
-      // Add associated monitors to condition
-      cy.get('[data-test-subj="condition-add-options-btn"]').click({ force: true });
-
-      cy.get('[data-test-subj="select-expression_0"]').click({ force: true });
-      cy.wait(1000);
-      cy.get('[data-test-subj="monitors-combobox-0"]')
-        .type('monitorOne', { delay: 50 })
-        .type('{enter}');
-
-      cy.get('[data-test-subj="select-expression_1"]').click({ force: true });
-      cy.wait(1000);
-      cy.get('[data-test-subj="monitors-combobox-1"]')
-        .type('monitorTwo', { delay: 50 })
-        .type('{enter}');
-
       // TODO: Test with Notifications plugin
       // Select notification channel
-      // cy.get('[title="Notification 1"]').type('Channel name');
+      // cy.get('[name="channel_name_0_0"]').find('input').type('Slack QA').type('{enter}');
 
       cy.intercept('api/alerting/workflows').as('createMonitorRequest');
       cy.intercept(`api/alerting/monitors?*`).as('getMonitorsRequest');
@@ -172,35 +160,6 @@ describe('CompositeLevelMonitor', () => {
         }
       });
     });
-
-    it('by visual editor', () => {
-      // Verify edit page
-      cy.contains('Edit monitor', { timeout: 20000 });
-      cy.get('input[name="name"]').type('_edited');
-
-      cy.get('label').contains('Visual editor').click({ force: true });
-
-      cy.get('button').contains('Associate another monitor').click({ force: true });
-
-      cy.get('[data-test-subj="monitors_list_2"]')
-        .type('monitorThree', { delay: 50 })
-        .type('{enter}');
-
-      cy.get('[data-test-subj="condition-add-options-btn"]').click({ force: true });
-      cy.get('[data-test-subj="select-expression_2"]').click({ force: true });
-      cy.wait(1000);
-      cy.get('[data-test-subj="monitors-combobox-2"]')
-        .type('monitorThree', { delay: 50 })
-        .type('{enter}');
-
-      cy.intercept('api/alerting/workflows/*').as('updateMonitorRequest');
-      cy.get('button').contains('Update').click({ force: true });
-
-      // Wait for monitor to be created
-      cy.wait('@updateMonitorRequest').then(() => {
-        cy.get('.euiTitle--large').contains(`${SAMPLE_VISUAL_EDITOR_MONITOR}_edited`);
-      });
-    });
   });
 
   after(() => clearAll());

@@ -244,6 +244,8 @@ describe('Query-Level Monitors', () => {
 
       // Click the Delete button
       cy.contains('Delete').click({ force: true });
+      cy.wait(1000);
+      cy.get('[data-test-subj="confirmModalConfirmButton"]').click({ force: true });
 
       // Confirm we can see an empty monitor list
       cy.contains('There are no existing monitors');

@@ -49,7 +49,7 @@ export const DeleteMonitorModal = ({
     warningHeading = `Unable to delete ${monitorNames[0]}`;
     warningBody = (
       <>
-        {`The monitor ${monitorNames[0]} is currently associated with composite monitors. Unlink from the composite monitors before deleting this monitor.`}
+        {`The monitor ${monitorNames[0]} is currently being used as a delegate monitor for composite monitors. Unlink from the following composite monitors before deleting this monitor:`}
         { associatedWorkflows ?
               <ul>
                 {associatedWorkflows.map(({ id, name }) => <li><EuiLink target='_blank' href={`${PLUGIN_NAME}#/monitors/${id}?type=workflow`}>{name}</EuiLink></li>)}

@@ -4,7 +4,7 @@
  */
 
 import React, { Fragment, useState, useEffect } from 'react';
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 import MonitorsList from './components/MonitorsList';
 import MonitorsEditor from './components/MonitorsEditor';
 import { monitorTypesForComposition } from '../../../../utils/constants';
@@ -46,10 +46,19 @@ const AssociateMonitors = ({ isDarkMode, values, httpClient, errors }) => {
   return (
     <Fragment>
       <EuiText size={'m'} style={{ paddingBottom: '0px', marginBottom: '0px' }}>
-        <h4>Associate monitors</h4>
+        <h4>Delegate monitors</h4>
       </EuiText>
       <EuiText color={'subdued'} size={'xs'}>
-        Associate two or more monitors to run as part of this workflow.
+        Delegate two or more monitors to run as part of this workflow. The monitor types per query,
+        per bucket, and per document are supported.{' '}
+        <EuiLink
+          href={
+            'https://opensearch.org/docs/latest/observing-your-data/alerting/monitors/#monitor-types'
+          }
+          target="_blank"
+        >
+          Learn more.
+        </EuiLink>
       </EuiText>
 
       <EuiSpacer size="m" />

@@ -7,7 +7,7 @@ Array [
     style="padding-bottom:0px;margin-bottom:0px"
   >
     <h4>
-      Associate monitors
+      Delegate monitors
     </h4>
   </div>,
   <div
@@ -16,7 +16,23 @@ Array [
     <div
       class="euiTextColor euiTextColor--subdued"
     >
-      Associate two or more monitors to run as part of this workflow.
+      Delegate two or more monitors to run as part of this workflow. The monitor types per query, per bucket, and per document are supported. 
+      <a
+        class="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest/observing-your-data/alerting/monitors/#monitor-types"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Learn more.
+        <div>
+          EuiIconMock
+        </div>
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
     </div>
   </div>,
   <div

@@ -21,6 +21,7 @@ import {
 } from '../../../../../components/FormControls';
 import { DEFAULT_ASSOCIATED_MONITORS_VALUE } from '../../../containers/CreateMonitor/utils/constants';
 import { getMonitors } from '../AssociateMonitors';
+import { required } from '../../../../../utils/validate';
 
 const MonitorsList = ({ values, httpClient }) => {
   const formikFieldName = 'associatedMonitorsList';
@@ -172,15 +173,11 @@ const MonitorsList = ({ values, httpClient }) => {
 
   const isValid = () => Object.keys(selection).length > 1;
 
-  const validate = () => {
-    if (!isValid()) return 'Required.';
-  };
-
   return (
     <FormikInputWrapper
       name={formikFieldName}
       fieldProps={{
-        validate: validate,
+        validate: required,
       }}
       render={({ form }) => (
         <FormikFormRow
@@ -189,7 +186,7 @@ const MonitorsList = ({ values, httpClient }) => {
           rowProps={{
             label: 'Monitor',
             isInvalid: () => form.touched[formikFieldName] && !isValid(),
-            error: () => validate(),
+            error: () => required(),
           }}
         >
           <Fragment>
@@ -271,10 +268,10 @@ const MonitorsList = ({ values, httpClient }) => {
               onClick={() => onAddMonitor()}
               disabled={fields.length >= 10 || fields.length >= options.length}
             >
-              Associate another monitor
+              Add another monitor
             </EuiButton>
             <EuiText color={'subdued'} size={'xs'}>
-              You can associate up to {10 - fields.length} more monitors.
+              You can add up to {10 - fields.length} more monitors.
 export const inputLimitText = ( 
 export const inputLimitText = ( 
             </EuiText>
           </Fragment>
         </FormikFormRow>

@@ -166,7 +166,7 @@ exports[`MonitorsList renders 1`] = `
         <span
           class="euiButton__text"
         >
-          Associate another monitor
+          Add another monitor
         </span>
       </span>
     </button>
@@ -176,7 +176,7 @@ exports[`MonitorsList renders 1`] = `
       <div
         class="euiTextColor euiTextColor--subdued"
       >
-        You can associate up to 8 more monitors.
+        You can add up to 8 more monitors.
       </div>
     </div>
   </div>

@@ -41,28 +41,29 @@ const onChangeDefinition = (e, form) => {
 
 const queryLevelDescription = (
   <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-    Per query monitors run a specified query and define triggers that check the results of that
-    query.
+    Per query monitors run a query and generate alerts based on trigger criteria that match query
+    results.
   </EuiText>
 );
 
 const bucketLevelDescription = (
   <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-    Per bucket monitors allow you to group results into buckets and define triggers that check each
-    bucket.
+    Per bucket monitors run a query that evaluates trigger criteria based on aggregated values in
+    the dataset.
   </EuiText>
 );
 
 const clusterMetricsDescription = (
   <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-    Per cluster metrics monitors allow you to alert based on responses to common REST APIs.
+    Per cluster metrics monitors run API requests to monitor the cluster’s health.
   </EuiText>
 );
 
 const documentLevelDescription = // TODO DRAFT: confirm wording
   (
     <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-      Per document monitors allow you to run queries on new documents as they're indexed.
+      Per document monitors run queries that return individual documents matching the trigger
+      conditions.
     </EuiText>
   );
 

@@ -67,7 +67,7 @@ exports[`MonitorType renders 1`] = `
                 <div
                   class="euiTextColor euiTextColor--subdued"
                 >
-                  Per query monitors run a specified query and define triggers that check the results of that query.
+                  Per query monitors run a query and generate alerts based on trigger criteria that match query results.
                 </div>
               </div>
             </div>
@@ -129,7 +129,7 @@ exports[`MonitorType renders 1`] = `
                 <div
                   class="euiTextColor euiTextColor--subdued"
                 >
-                  Per bucket monitors allow you to group results into buckets and define triggers that check each bucket.
+                  Per bucket monitors run a query that evaluates trigger criteria based on aggregated values in the dataset.
                 </div>
               </div>
             </div>
@@ -191,7 +191,7 @@ exports[`MonitorType renders 1`] = `
                 <div
                   class="euiTextColor euiTextColor--subdued"
                 >
-                  Per cluster metrics monitors allow you to alert based on responses to common REST APIs.
+                  Per cluster metrics monitors run API requests to monitor the cluster’s health.
                 </div>
               </div>
             </div>
@@ -253,7 +253,7 @@ exports[`MonitorType renders 1`] = `
                 <div
                   class="euiTextColor euiTextColor--subdued"
                 >
-                  Per document monitors allow you to run queries on new documents as they're indexed.
+                  Per document monitors run queries that return individual documents matching the trigger conditions.
                 </div>
               </div>
             </div>

@@ -22,14 +22,15 @@ export const FORMIK_INITIAL_WHERE_EXPRESSION_VALUES = {
   fieldRangeEnd: undefined,
 };
 
+/** Sample delegate
+ *  {
+      order: 1,
+      monitor_id: '{{m1}}',
+    }
+ */
 export const DEFAULT_ASSOCIATED_MONITORS_VALUE = {
   sequence: {
-    delegates: [
-      /*{
-        order: 1,
-        monitor_id: '{{m1}}',
-      }*/
-    ],
+    delegates: [],
   },
 };
 

@@ -3,16 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import ContentPanel from '../../../../components/ContentPanel';
 import Schedule from '../../components/Schedule';
 import AssociateMonitors from '../../components/AssociateMonitors/AssociateMonitors';
 import { EuiSpacer } from '@elastic/eui';
-import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants';
 
 const WorkflowDetails = ({ values, isDarkMode, httpClient, errors }) => {
-  const isAd = values.searchType === SEARCH_TYPE.AD;
-  const isComposite = values.monitor_type === MONITOR_TYPE.COMPOSITE_LEVEL;
   return (
     <ContentPanel
       title="Workflow"
@@ -24,19 +21,15 @@ const WorkflowDetails = ({ values, isDarkMode, httpClient, errors }) => {
         paddingTop: '20px',
       }}
     >
-      <Schedule isAd={isAd} />
+      <Schedule isAd={false} />
 
-      {isComposite && (
-        <Fragment>
-          <EuiSpacer size="xl" />
-          <AssociateMonitors
-            isDarkMode={isDarkMode}
-            values={values}
-            httpClient={httpClient}
-            errors={errors}
-          />
-        </Fragment>
-      )}
+      <EuiSpacer size="xl" />
+      <AssociateMonitors
+        isDarkMode={isDarkMode}
+        values={values}
+        httpClient={httpClient}
+        errors={errors}
+      />
     </ContentPanel>
   );
 };