add throttle on action level

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

@@ -76,7 +76,6 @@ const Action = ({
             helpText: 'Choose destination for an action.',
             isInvalid,
             error: hasError,
-            style: { marginTop: '0px' },
           }}
           inputProps={{
             placeholder: 'Select a destination',

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

@@ -14,6 +14,7 @@
  */
 
 import React from 'react';
+import _ from 'lodash';
 import Mustache from 'mustache';
 import {
   EuiFlexGroup,
@@ -25,9 +26,10 @@ import {
   EuiTextArea,
 } from '@elastic/eui';
 
-import { FormikTextArea, FormikFieldText } from '../../../../../components/FormControls';
-import { isInvalid, hasError, required } from '../../../../../utils/validate';
+import { FormikTextArea, FormikFieldText, FormikSwitch, FormikFieldNumber } from '../../../../../components/FormControls';
+import { isInvalid, validateActionThrottle, validateInterval, hasError, required } from '../../../../../utils/validate';
 import { URL } from '../../../../../../utils/constants';
+import { withFormik } from 'formik';
 
 const messageHelpText = (index, sendTestMessage) => (
   <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -122,6 +124,48 @@ const Message = ({
       </EuiFormRow>
 
       <EuiSpacer size="s" />
+
+      <EuiFormRow
+          label={
+            <div>
+              <span>Action throttling</span>
+              <EuiButtonEmpty
+                size="s"
+                onClick={() => { setFlyout({ type: 'messageFrequency' }); }}
+              >
+                Info
+              </EuiButtonEmpty>
+            </div>
+          }
+          style={{ maxWidth: '100%' }}
+        >
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false} style={{ marginRight: '0px' }}>
+              <FormikSwitch
+                name={`actions.${index}.throttle_enabled`}
+                inputProps={{ label: 'Maximum Frequency' }}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} style={{ marginLeft: '4px', marginRight: '4px' }}>
+              <FormikFieldNumber
+                name={`actions.${index}.throttle.value`}
+                fieldProps={{ validate: validateActionThrottle(action) }}
+                inputProps={{
+                  style: { width: '100px' },
+                  min: 1,
+                  compressed: true,
+                  isInvalid: (name, form) => {
+                    return (_.get(form.values, `actions.${index}.throttle_enabled`) && !_.get(form.values, name))
+                    || (_.get(form.values, name) && _.get(form.values, name)<=0)
+                  }
+                }}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} style={{ marginLeft: '0px' }}>
+              <EuiText size="s">minutes.</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
     </div>
   );
 };

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

@@ -0,0 +1,49 @@
+/*
+ *   Copyright 2019 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 from 'react';
+import { render,shallow,mount } from 'enzyme';
+import { Formik } from 'formik'
+import Message from './Message';
+import Mustache from 'mustache';
+
+jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'testing-id');
+
+function getRenderWrapper(customProps = {}) {
+  return render(
+    <Formik
+      render={() => <Message 
+        action={{
+          "message_template": {
+            "source": "Monitor {{ctx.monitor.name}} just entered alert status. Please investigate the issue.\n- Trigger: {{ctx.trigger.name}}\n- Severity: {{ctx.trigger.severity}}\n- Period start: {{ctx.periodStart}}\n- Period end: {{ctx.periodEnd}}",
+            "lang": "mustache"
+          }
+        }}
+        context={{}}
+        index={0}
+        sendTestMessage={jest.fn()}
+        setFlyout={jest.fn()}
+      />}
+    />
+  );
+}
+
+describe('Message', () => {
+  test('renders', () => {
+    const wrapper = getRenderWrapper();
+    expect(wrapper).toMatchSnapshot();
+  });  
+
+});

public/pages/CreateTrigger/components/Action/actions/__snapshots__/Message.test.js.snap

@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message renders 1`] = `
+<div>
+  <div
+    class="euiFormRow"
+    id="actions.0.subject_template.source-row"
+  >
+    <label
+      aria-invalid="false"
+      class="euiFormLabel"
+      for="actions.0.subject_template.source"
+    >
+      Message subject
+    </label>
+    <div
+      class="euiFormControlLayout"
+    >
+      <div
+        class="euiFormControlLayout__childrenWrapper"
+      >
+        <input
+          class="euiFieldText"
+          name="actions.0.subject_template.source"
+          type="text"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFormRow"
+    id="actions.0.message_template.source-row"
+    style="max-width:100%"
+  >
+    <label
+      aria-invalid="false"
+      class="euiFormLabel"
+      for="actions.0.message_template.source"
+    >
+      <div>
+        <span>
+          Message
+        </span>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Info
+            </span>
+          </span>
+        </button>
+      </div>
+    </label>
+    <textarea
+      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+      name="actions.0.message_template.source"
+      placeholder="Can use mustache templates"
+      rows="6"
+    />
+    <div
+      class="euiFormHelpText euiFormRow__text"
+      id="actions.0.message_template.source-help"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+        >
+          <div
+            class="euiText euiText--extraSmall"
+          >
+            Embed variables in your message using Mustache templates. 
+            <a
+              href="https://mustache.github.io/mustache.5.html"
+            >
+              Learn more about Mustache.
+            </a>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiText euiText--extraSmall"
+          >
+            <button
+              class="euiButtonEmpty euiButtonEmpty--primary"
+              type="button"
+            >
+              <span
+                class="euiButtonEmpty__content"
+              >
+                <span
+                  class="euiButtonEmpty__text"
+                >
+                  Send test message
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFormRow"
+    id="testing-id-row"
+    style="max-width:100%"
+  >
+    <label
+      class="euiFormLabel"
+      for="testing-id"
+    >
+      Message preview
+    </label>
+    <textarea
+      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth read-only-text-area"
+      id="testing-id"
+      placeholder="Preview of mustache template"
+      readonly=""
+      rows="6"
+    >
+      Monitor  just entered alert status. Please investigate the issue.
+- Trigger: 
+- Severity: 
+- Period start: 
+- Period end: 
+    </textarea>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  <div
+    class="euiFormRow"
+    id="testing-id-row"
+    style="max-width:100%"
+  >
+    <label
+      class="euiFormLabel"
+      for="testing-id"
+    >
+      <div>
+        <span>
+          Action throttling
+        </span>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Info
+            </span>
+          </span>
+        </button>
+      </div>
+    </label>
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      id="testing-id"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+        style="margin-right:0px"
+      >
+        <div
+          class="euiSwitch"
+        >
+          <input
+            class="euiSwitch__input"
+            id="actions.0.throttle_enabled"
+            name="actions.0.throttle_enabled"
+            type="checkbox"
+          />
+          <span
+            class="euiSwitch__body"
+          >
+            <span
+              class="euiSwitch__thumb"
+            />
+            <span
+              class="euiSwitch__track"
+            >
+              <svg
+                class="euiIcon euiIcon--medium euiSwitch__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                />
+              </svg>
+              <svg
+                class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </span>
+          <label
+            class="euiSwitch__label"
+            for="actions.0.throttle_enabled"
+          >
+            Maximum Frequency
+          </label>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+        style="margin-left:4px;margin-right:4px"
+      >
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              class="euiFieldNumber euiFieldNumber--compressed"
+              min="1"
+              name="actions.0.throttle.value"
+              style="width:100px"
+              type="number"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+        style="margin-left:0px"
+      >
+        <div
+          class="euiText euiText--small"
+        >
+          minutes.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;