Improvements to threshold watch (#36688)

elastic · May 22, 2019 · 84a5905 · 84a5905
1 parent 76adef5
commit 84a5905
Show file tree

Hide file tree

Showing 7 changed files with 512 additions and 338 deletions.
diff --git a/x-pack/plugins/watcher/public/index.scss b/x-pack/plugins/watcher/public/index.scss
@@ -14,3 +14,8 @@
   justify-content: flex-end;
   flex-direction: row;
 }
+
+.watcherThresholdWatchActionContextMenuItem,
+.watcherThresholdWatchInBetweenComparatorText {
+  align-self: center;
+}
diff --git a/x-pack/plugins/watcher/public/lib/api.ts b/x-pack/plugins/watcher/public/lib/api.ts
@@ -152,12 +152,16 @@ export const loadIndexPatterns = async () => {
   return savedObjects;
 };
 
-export const getWatchVisualizationData = async (watchModel: BaseWatch, visualizeOptions: any) => {
-  const response = await getHttpClient().post(`${basePath}/watch/visualize`, {
-    watch: watchModel.upstreamJson,
-    options: visualizeOptions.upstreamJson,
+export const getWatchVisualizationData = (watchModel: BaseWatch, visualizeOptions: any) => {
+  return useRequest({
+    path: `${basePath}/watch/visualize`,
+    method: 'post',
+    body: {
+      watch: watchModel.upstreamJson,
+      options: visualizeOptions.upstreamJson,
+    },
+    processData: ({ visualizeData }: { visualizeData: any }) => visualizeData,
   });
-  return response.data;
 };
 
 export const loadSettings = () => {

diff --git a/x-pack/plugins/watcher/public/models/watch/threshold_watch.js b/x-pack/plugins/watcher/public/models/watch/threshold_watch.js
@@ -36,6 +36,7 @@ export class ThresholdWatch extends BaseWatch {
 
     this.index = props.index;
     this.timeField = props.timeField;
+    this.timeFields = props.timeFields || undefined;
     this.triggerIntervalSize =
       props.triggerIntervalSize == null
         ? DEFAULT_VALUES.TRIGGER_INTERVAL_SIZE
@@ -124,6 +125,20 @@ export class ThresholdWatch extends BaseWatch {
         )
       );
     }
+    if (this.index !== undefined
+        && this.index.length > 0
+        && this.timeFields !== undefined
+        && this.timeFields.length === 1 // first option will have empty value
+    ) {
+      errors.index.push(
+        i18n.translate(
+          'xpack.watcher.sections.watchEdit.threshold.invalidIndexValidationMessage',
+          {
+            defaultMessage: 'Your index query does not have an associated time field',
+          }
+        )
+      );
+    }
     if (!this.timeField) {
       errors.timeField.push(
         i18n.translate(
@@ -144,6 +159,16 @@ export class ThresholdWatch extends BaseWatch {
         )
       );
     }
+    if (this.triggerIntervalSize !== undefined && this.triggerIntervalSize < 0) {
+      errors.triggerIntervalSize.push(
+        i18n.translate(
+          'xpack.watcher.sections.watchEdit.threshold.intervalSizeNegativeNumberValidationMessage',
+          {
+            defaultMessage: 'Interval size cannot be a negative number',
+          }
+        )
+      );
+    }
     if (aggTypes[this.aggType].fieldRequired && !this.aggField) {
       errors.aggField.push(
         i18n.translate(

diff --git a/...ctions/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx b/...ctions/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
@@ -5,7 +5,16 @@
  */
 import React, { Fragment, useEffect } from 'react';
 
-import { EuiCodeEditor, EuiFieldNumber, EuiFieldText, EuiFormRow, EuiSelect } from '@elastic/eui';
+import {
+  EuiCodeEditor,
+  EuiFieldNumber,
+  EuiFieldText,
+  EuiFormRow,
+  EuiSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ErrableFormRow } from '../../../../../components/form_errors';
 import { WebhookAction } from '../../../../../../common/types/action_types';
@@ -33,100 +42,118 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
 
   return (
     <Fragment>
-      <EuiFormRow
-        fullWidth
-        label={i18n.translate(
-          'xpack.watcher.sections.watchEdit.threshold.webhookAction.methodFieldLabel',
-          {
-            defaultMessage: 'Method',
-          }
-        )}
-      >
-        <EuiSelect
-          fullWidth
-          name="method"
-          value={method || 'get'}
-          options={HTTP_VERBS.map(verb => ({ text: verb.toUpperCase(), value: verb }))}
-          onChange={e => {
-            editAction({ key: 'method', value: e.target.value });
-          }}
-        />
-      </EuiFormRow>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem>
+          <EuiFormRow
+            label={i18n.translate(
+              'xpack.watcher.sections.watchEdit.threshold.webhookAction.methodFieldLabel',
+              {
+                defaultMessage: 'Method',
+              }
+            )}
+          >
+            <EuiSelect
+              name="method"
+              value={method || 'get'}
+              options={HTTP_VERBS.map(verb => ({ text: verb.toUpperCase(), value: verb }))}
+              onChange={e => {
+                editAction({ key: 'method', value: e.target.value });
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
 
-      <ErrableFormRow
-        id="webhookHost"
-        errorKey="host"
-        fullWidth
-        errors={errors}
-        isShowingErrors={hasErrors && host !== undefined}
-        label={i18n.translate(
-          'xpack.watcher.sections.watchEdit.threshold.webhookAction.hostFieldLabel',
-          {
-            defaultMessage: 'Host',
-          }
-        )}
-      >
-        <EuiFieldText
-          fullWidth
-          name="host"
-          value={host || ''}
-          onChange={e => {
-            editAction({ key: 'host', value: e.target.value });
-          }}
-          onBlur={() => {
-            if (!host) {
-              editAction({ key: 'host', value: '' });
-            }
-          }}
-        />
-      </ErrableFormRow>
+        <EuiFlexItem>
+          <ErrableFormRow
+            id="webhookHost"
+            errorKey="host"
+            fullWidth
+            errors={errors}
+            isShowingErrors={hasErrors && host !== undefined}
+            label={i18n.translate(
+              'xpack.watcher.sections.watchEdit.threshold.webhookAction.hostFieldLabel',
+              {
+                defaultMessage: 'Host',
+              }
+            )}
+          >
+            <EuiFieldText
+              fullWidth
+              name="host"
+              value={host || ''}
+              onChange={e => {
+                editAction({ key: 'host', value: e.target.value });
+              }}
+              onBlur={() => {
+                if (!host) {
+                  editAction({ key: 'host', value: '' });
+                }
+              }}
+            />
+          </ErrableFormRow>
+        </EuiFlexItem>
 
-      <ErrableFormRow
-        id="webhookPort"
-        errorKey="port"
-        fullWidth
-        errors={errors}
-        isShowingErrors={hasErrors && port !== undefined}
-        label={i18n.translate(
-          'xpack.watcher.sections.watchEdit.threshold.webhookAction.methodPortLabel',
-          {
-            defaultMessage: 'Port',
-          }
-        )}
-      >
-        <EuiFieldNumber
-          fullWidth
-          name="port"
-          value={port || ''}
-          onChange={e => {
-            editAction({ key: 'port', value: parseInt(e.target.value, 10) });
-          }}
-          onBlur={() => {
-            if (!port) {
-              editAction({ key: 'port', value: '' });
-            }
-          }}
-        />
-      </ErrableFormRow>
+        <EuiFlexItem>
+          <ErrableFormRow
+            id="webhookPort"
+            errorKey="port"
+            fullWidth
+            errors={errors}
+            isShowingErrors={hasErrors && port !== undefined}
+            label={i18n.translate(
+              'xpack.watcher.sections.watchEdit.threshold.webhookAction.methodPortLabel',
+              {
+                defaultMessage: 'Port',
+              }
+            )}
+          >
+            <EuiFieldNumber
+              prepend={
+                <EuiText size="xs">
+                  <strong>:</strong>
+                </EuiText>
+              }
+              fullWidth
+              name="port"
+              value={port || ''}
+              onChange={e => {
+                editAction({ key: 'port', value: parseInt(e.target.value, 10) });
+              }}
+              onBlur={() => {
+                if (!port) {
+                  editAction({ key: 'port', value: '' });
+                }
+              }}
+            />
+          </ErrableFormRow>
+        </EuiFlexItem>
 
-      <EuiFormRow
-        fullWidth
-        label={i18n.translate(
-          'xpack.watcher.sections.watchEdit.threshold.webhookAction.pathFieldLabel',
-          {
-            defaultMessage: 'Path',
-          }
-        )}
-      >
-        <EuiFieldText
-          fullWidth
-          name="path"
-          value={path || ''}
-          onChange={e => {
-            editAction({ key: 'path', value: e.target.value });
-          }}
-        />
-      </EuiFormRow>
+        <EuiFlexItem>
+          <EuiFormRow
+            fullWidth
+            label={i18n.translate(
+              'xpack.watcher.sections.watchEdit.threshold.webhookAction.pathFieldLabel',
+              {
+                defaultMessage: 'Path',
+              }
+            )}
+          >
+            <EuiFieldText
+              prepend={
+                <EuiText size="xs">
+                  <strong>/</strong>
+                </EuiText>
+              }
+              fullWidth
+              name="path"
+              value={path || ''}
+              onChange={e => {
+                editAction({ key: 'path', value: e.target.value });
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
       <ErrableFormRow
         id="webhookBody"