Refactored trigger condition popover to dropdown menu. Refactored actions panel to hide throttling for 'per execution'

public/pages/CreateMonitor/containers/DataSource/DataSource.js

@@ -9,6 +9,21 @@
  * GitHub history for details.
  */
 
+/*
+ * Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { EuiSpacer } from '@elastic/eui';
@@ -39,7 +54,16 @@ class DataSource extends Component {
     const { searchType } = this.props.values;
     const isGraph = searchType === SEARCH_TYPE.GRAPH;
     return (
-      <ContentPanel title="Data source" titleSize="s" bodyStyles={{ padding: 'initial' }}>
+      <ContentPanel
+        title="Data source"
+        titleSize="s"
+        bodyStyles={{
+          padding: 'initial',
+          paddingBottom: '10px',
+          paddingLeft: '20px',
+          paddingRight: '20px',
+        }}
+      >
         <MonitorIndex httpClient={this.props.httpClient} />
         <EuiSpacer size="s" />
         {isGraph && <MonitorTimeField dataTypes={this.props.dataTypes} />}

public/pages/CreateTrigger/components/Action/Action.js

@@ -10,18 +10,18 @@
  */
 
 /*
- *   Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
- *   Licensed under the Apache License, Version 2.0 (the "License").
- *   You may not use this file except in compliance with the License.
- *   A copy of the License is located at
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
  *
- *       http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
- *   or in the "license" file accompanying this file. This file is distributed
- *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
- *   express or implied. See the License for the specific language governing
- *   permissions and limitations under the License.
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
 
 import React from 'react';
@@ -60,7 +60,7 @@ const Action = ({
   const isFirstAction = index !== undefined && index === 0;
   return (
     <div style={{ paddingTop: isFirstAction ? undefined : '20px' }}>
-      <EuiPanel panelStyles={{ backgroundColor: '#FFFFFF' }}>
+      <EuiPanel styles={{ backgroundColor: '#FFFFFF' }}>
         <EuiAccordion
           id={name}
           initialIsOpen={!name}
@@ -136,7 +136,6 @@ const Action = ({
               values={values}
             />
           </div>
-          <EuiSpacer size={'l'} />
         </EuiAccordion>
       </EuiPanel>
     </div>

public/pages/CreateTrigger/components/Action/actions/Message.js

@@ -24,7 +24,7 @@
  * permissions and limitations under the License.
  */
 
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import _ from 'lodash';
 import Mustache from 'mustache';
 import {
@@ -181,16 +181,19 @@ export default function Message(
     `${actionExecutionPolicyPath}.action_execution_scope.${NOTIFY_OPTIONS_VALUES.PER_ALERT}.actionable_alerts`
   );
 
-  if (
-    actionExecutionScopeId === NOTIFY_OPTIONS_VALUES.PER_ALERT &&
-    actionableAlertsSelections === undefined
-  ) {
-    _.set(
-      values,
-      `${actionExecutionPolicyPath}.action_execution_scope.${NOTIFY_OPTIONS_VALUES.PER_ALERT}.actionable_alerts`,
-      DEFAULT_ACTIONABLE_ALERTS_SELECTIONS
-    );
-    actionableAlertsSelections = DEFAULT_ACTIONABLE_ALERTS_SELECTIONS;
+  if (actionExecutionScopeId === NOTIFY_OPTIONS_VALUES.PER_ALERT) {
+    if (_.get(values, `${actionExecutionPolicyPath}.throttle.value`) === undefined) {
+      _.set(values, `${actionExecutionPolicyPath}.throttle.value`, 10);
+    }
+
+    if (actionableAlertsSelections === undefined) {
+      _.set(
+        values,
+        `${actionExecutionPolicyPath}.action_execution_scope.${NOTIFY_OPTIONS_VALUES.PER_ALERT}.actionable_alerts`,
+        DEFAULT_ACTIONABLE_ALERTS_SELECTIONS
+      );
+      actionableAlertsSelections = DEFAULT_ACTIONABLE_ALERTS_SELECTIONS;
+    }
   }
 
   let preview = '';
@@ -369,61 +372,54 @@ export default function Message(
         </EuiFormRow>
       ) : null}
 
-      <EuiFormRow
-        label={<span style={{ color: '#343741' }}>Throttling</span>}
-        style={{ maxWidth: '100%' }}
-      >
-        <EuiFlexGroup direction="column">
-          <EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>
-            <FormikCheckbox
-              name={`${fieldPath}actions.${index}.throttle_enabled`}
-              inputProps={{
-                disabled: actionExecutionScopeId === NOTIFY_OPTIONS_VALUES.PER_EXECUTION,
-                label: 'Enable action throttling',
-              }}
-            />
-          </EuiFlexItem>
-          <EuiFlexGroup
-            alignItems="center"
-            style={{ margin: '0px', display: _.get(action, `throttle_enabled`) ? '' : 'none' }}
-          >
-            <EuiFlexItem grow={false} style={{ marginRight: '0px' }}>
-              <EuiFormRow label="Throttle actions to only trigger every">
-                <FormikFieldNumber
-                  name={`${actionExecutionPolicyPath}.throttle.value`}
-                  fieldProps={{ validate: validateActionThrottle(action) }}
-                  formRow={true}
-                  rowProps={{
-                    isInvalid: isInvalidActionThrottle(action),
-                    helpText: !isInvalidActionThrottle(action) && WRONG_THROTTLE_WARNING,
-                    error: [WRONG_THROTTLE_WARNING],
-                  }}
-                  inputProps={{
-                    style: { width: '400px', height: '40px' },
-                    min: 1,
-                    max: MAX_THROTTLE_VALUE,
-                    compressed: true,
-                    append: (
-                      <EuiText
-                        style={{
-                          height: '40px',
-                          lineHeight: '24px',
-                          backgroundColor: 'transparent',
-                          paddingLeft: '4px',
-                        }}
-                      >
-                        minutes
-                      </EuiText>
-                    ),
-                    className: 'euiFieldText',
-                    disabled: !_.get(action, `throttle_enabled`) ? 'disabled' : '',
-                  }}
-                />
-              </EuiFormRow>
+      {actionExecutionScopeId !== NOTIFY_OPTIONS_VALUES.PER_EXECUTION ? (
+        <EuiFormRow label={'Throttling'} style={{ paddingBottom: '10px', maxWidth: '100%' }}>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>
+              <FormikCheckbox
+                name={`${fieldPath}actions.${index}.throttle_enabled`}
+                inputProps={{ label: 'Enable action throttling' }}
+              />
             </EuiFlexItem>
+            <EuiFlexGroup
+              alignItems="center"
+              style={{ margin: '0px', display: _.get(action, `throttle_enabled`) ? '' : 'none' }}
+            >
+              <EuiFlexItem grow={false} style={{ marginRight: '0px' }}>
+                <EuiFormRow label="Throttle actions to only trigger every">
+                  <FormikFieldNumber
+                    name={`${actionExecutionPolicyPath}.throttle.value`}
+                    fieldProps={{ validate: validateActionThrottle(action) }}
+                    formRow={true}
+                    rowProps={{
+                      isInvalid: isInvalidActionThrottle(action),
+                      helpText: !isInvalidActionThrottle(action) && WRONG_THROTTLE_WARNING,
+                      error: [WRONG_THROTTLE_WARNING],
+                    }}
+                    inputProps={{
+                      style: { width: '400px' },
+                      min: 1,
+                      max: MAX_THROTTLE_VALUE,
+                      append: (
+                        <EuiText
+                          style={{
+                            backgroundColor: 'transparent',
+                            paddingLeft: '4px',
+                          }}
+                        >
+                          minutes
+                        </EuiText>
+                      ),
+                      className: 'euiFieldText',
+                      disabled: !_.get(action, `throttle_enabled`) ? 'disabled' : '',
+                    }}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexGroup>
-        </EuiFlexGroup>
-      </EuiFormRow>
+        </EuiFormRow>
+      ) : null}
     </div>
   );
 }

public/pages/CreateTrigger/components/BucketLevelTriggerExpression/BucketLevelTriggerExpression.js

@@ -1,3 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
 /*
  * Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
@@ -24,7 +35,6 @@ import {
   EuiSelect,
 } from '@elastic/eui';
 
-const DEFAULT_CLOSED_STATES = { THRESHOLD: false };
 export const Expressions = { THRESHOLD: 'THRESHOLD' };
 
 const THRESHOLD_ENUM_OPTIONS = [
@@ -47,22 +57,6 @@ const VALUE_FIELD_WIDTH = 200;
 class BucketLevelTriggerExpression extends Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      openedStates: { ...DEFAULT_CLOSED_STATES },
-    };
-
-    this.openExpression = this.openExpression.bind(this);
-    this.closeExpression = this.closeExpression.bind(this);
-  }
-
-  openExpression(expression) {
-    this.setState({ openedStates: { ...DEFAULT_CLOSED_STATES, [expression]: true } });
-  }
-
-  closeExpression(expression) {
-    const { openedStates } = this.state;
-    this.setState({ openedStates: { ...openedStates, [expression]: false } });
   }
 
   render() {