Fixed due to comments and simplified props

elastic · Feb 7, 2020 · c7485d5 · c7485d5
1 parent f8438c9
commit c7485d5
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 200 deletions.
diff --git a/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -20,9 +20,6 @@ import {
   EuiFormRow,
   EuiCallOut,
 } from '@elastic/eui';
-import { HttpSetup, IUiSettingsClient, ToastsApi } from 'kibana/public';
-import { ChartsPluginSetup } from 'src/plugins/charts/public';
-import { FieldFormatsRegistry } from 'src/plugins/data/common/field_formats/static';
 import { COMPARATORS, builtInComparators } from '../../../../common/constants';
 import {
   getMatchingIndicesForThresholdAlertType,
@@ -39,7 +36,8 @@ import {
   GroupByExpression,
 } from '../../../../common';
 import { builtInAggregationTypes } from '../../../../common/constants';
-import { IndexThresholdAlertParams } from '../types';
+import { IndexThresholdAlertParams } from './types';
+import { AlertsContextValue } from '../../../context/alerts_context';
 
 const DEFAULT_VALUES = {
   AGGREGATION_TYPE: 'count',
@@ -69,26 +67,15 @@ interface IndexThresholdProps {
   setAlertParams: (property: string, value: any) => void;
   setAlertProperty: (key: string, value: any) => void;
   errors: { [key: string]: string[] };
-  http: HttpSetup;
-  uiSettings?: IUiSettingsClient;
-  toastNotifications?: Pick<
-    ToastsApi,
-    'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
-  >;
-  charts?: ChartsPluginSetup;
-  dataFieldsFormats?: Pick<FieldFormatsRegistry, 'register'>;
+  alertsContext: AlertsContextValue;
 }
 
 export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThresholdProps> = ({
   alertParams,
   setAlertParams,
   setAlertProperty,
   errors,
-  http,
-  uiSettings,
-  toastNotifications,
-  charts,
-  dataFieldsFormats,
+  alertsContext,
 }) => {
   const {
     index,
@@ -113,6 +100,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
     ),
     value: '',
   };
+  const { http } = alertsContext;
 
   const [indexPopoverOpen, setIndexPopoverOpen] = useState(false);
   const [indexPatterns, setIndexPatterns] = useState([]);
@@ -446,17 +434,13 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {canShowVizualization || !uiSettings || !dataFieldsFormats || !charts ? null : (
+      {canShowVizualization ? null : (
         <Fragment>
           <ThresholdVisualization
             alertParams={alertParams}
             aggregationTypes={builtInAggregationTypes}
             comparators={builtInComparators}
-            http={http}
-            toastNotifications={toastNotifications}
-            uiSettings={uiSettings}
-            charts={charts}
-            dataFieldsFormats={dataFieldsFormats}
+            alertsContext={alertsContext}
           />
         </Fragment>
       )}

diff --git a/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts b/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts
@@ -6,7 +6,7 @@
 import { i18n } from '@kbn/i18n';
 import { AlertTypeModel, ValidationResult } from '../../../../types';
 import { IndexThresholdAlertTypeExpression } from './expression';
-import { IndexThresholdAlertParams } from '../types';
+import { IndexThresholdAlertParams } from './types';
 import { builtInGroupByTypes, builtInAggregationTypes } from '../../../../common/constants';
 
 export function getAlertType(): AlertTypeModel {

diff --git a/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/types.ts b/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/types.ts
@@ -23,3 +23,17 @@ export interface GroupByType {
   value: string;
   validNormalizedTypes: string[];
 }
+
+export interface IndexThresholdAlertParams {
+  index: string[];
+  timeField?: string;
+  aggType: string;
+  aggField?: string;
+  groupBy?: string;
+  termSize?: number;
+  termField?: string;
+  thresholdComparator?: string;
+  threshold: number[];
+  timeWindowSize: number;
+  timeWindowUnit: string;
+}
diff --git a/..._actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/..._actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { Fragment, useEffect, useState } from 'react';
-import { IUiSettingsClient, HttpSetup, ToastsApi } from 'kibana/public';
+import { IUiSettingsClient } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import {
   AnnotationDomainTypes,
@@ -23,13 +23,12 @@ import dateMath from '@elastic/datemath';
 import moment from 'moment-timezone';
 import { EuiCallOut, EuiLoadingChart, EuiSpacer, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ChartsPluginSetup } from 'src/plugins/charts/public';
-import { FieldFormatsRegistry } from 'src/plugins/data/common/field_formats/static';
 import { getThresholdAlertVisualizationData } from './lib/api';
 import { AggregationType, Comparator } from '../../../../common/types';
-import { IndexThresholdAlertParams } from '../types';
 /* TODO: This file was copied from ui/time_buckets for NP migration. We should clean this up and add TS support */
 import { TimeBuckets } from './lib/time_buckets';
+import { AlertsContextValue } from '../../../context/alerts_context';
+import { IndexThresholdAlertParams } from './types';
 
 const customTheme = () => {
   return {
@@ -94,30 +93,15 @@ interface Props {
   comparators: {
     [key: string]: Comparator;
   };
-  http: HttpSetup;
-  uiSettings: IUiSettingsClient;
-  toastNotifications?: Pick<
-    ToastsApi,
-    'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
-  >;
-  charts: ChartsPluginSetup;
-  dataFieldsFormats: Pick<FieldFormatsRegistry, 'register'>;
+  alertsContext: AlertsContextValue;
 }
 
 export const ThresholdVisualization: React.FunctionComponent<Props> = ({
   alertParams,
   aggregationTypes,
   comparators,
-  http,
-  uiSettings,
-  toastNotifications,
-  charts,
-  dataFieldsFormats,
+  alertsContext,
 }) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<undefined | any>(undefined);
-  const [visualizationData, setVisualizationData] = useState<Record<string, any>>([]);
-  const chartsTheme = charts.theme.useChartsTheme();
   const {
     index,
     timeField,
@@ -131,20 +115,11 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
     groupBy,
     threshold,
   } = alertParams;
+  const { http, toastNotifications, charts, uiSettings, dataFieldsFormats } = alertsContext;
 
-  const domain = getDomain(alertParams);
-  const timeBuckets = new TimeBuckets(uiSettings, dataFieldsFormats);
-  timeBuckets.setBounds(domain);
-  const interval = timeBuckets.getInterval().expression;
-  const visualizeOptions = {
-    rangeFrom: domain.min,
-    rangeTo: domain.max,
-    interval,
-    timezone: getTimezone(uiSettings),
-  };
-
-  // Fetching visualization data is independent of alert actions
-  const alertWithoutActions = { ...alertParams, actions: [], type: 'threshold' };
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<undefined | any>(undefined);
+  const [visualizationData, setVisualizationData] = useState<Record<string, any>>([]);
 
   useEffect(() => {
     (async () => {
@@ -187,6 +162,25 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
   ]);
   /* eslint-enable react-hooks/exhaustive-deps */
 
+  if (!charts || !uiSettings || !dataFieldsFormats) {
+    return null;
+  }
+  const chartsTheme = charts.theme.useChartsTheme();
+
+  const domain = getDomain(alertParams);
+  const timeBuckets = new TimeBuckets(uiSettings, dataFieldsFormats);
+  timeBuckets.setBounds(domain);
+  const interval = timeBuckets.getInterval().expression;
+  const visualizeOptions = {
+    rangeFrom: domain.min,
+    rangeTo: domain.max,
+    interval,
+    timezone: getTimezone(uiSettings),
+  };
+
+  // Fetching visualization data is independent of alert actions
+  const alertWithoutActions = { ...alertParams, actions: [], type: 'threshold' };
+
   if (isLoading) {
     return (
       <EuiEmptyPrompt

diff --git a/...ck/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/types.ts b/...ck/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/types.ts
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx b/x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx
@@ -5,11 +5,26 @@
  */
 
 import React, { useContext, createContext } from 'react';
+import { HttpSetup, IUiSettingsClient, ToastsApi } from 'kibana/public';
+import { ChartsPluginSetup } from 'src/plugins/charts/public';
+import { FieldFormatsRegistry } from 'src/plugins/data/common/field_formats/static';
+import { TypeRegistry } from '../type_registry';
+import { AlertTypeModel, ActionTypeModel } from '../../types';
 
 export interface AlertsContextValue {
   addFlyoutVisible: boolean;
   setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
   reloadAlerts?: () => Promise<void>;
+  http: HttpSetup;
+  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
+  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
+  uiSettings?: IUiSettingsClient;
+  toastNotifications?: Pick<
+    ToastsApi,
+    'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
+  >;
+  charts?: ChartsPluginSetup;
+  dataFieldsFormats?: Pick<FieldFormatsRegistry, 'register'>;
 }
 
 const AlertsContext = createContext<AlertsContextValue>(null as any);

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.test.tsx
@@ -95,16 +95,14 @@ describe('alert_add', () => {
               reloadAlerts: () => {
                 return new Promise<void>(() => {});
               },
+              http: deps.http,
+              actionTypeRegistry: deps.actionTypeRegistry,
+              alertTypeRegistry: deps.alertTypeRegistry,
+              toastNotifications: deps.toastNotifications,
+              uiSettings: deps.uiSettings,
             }}
           >
-            <AlertAdd
-              consumer={'alerting'}
-              http={deps.http}
-              actionTypeRegistry={deps.actionTypeRegistry}
-              alertTypeRegistry={deps.alertTypeRegistry}
-              toastNotifications={deps.toastNotifications}
-              uiSettings={deps.uiSettings}
-            />
+            <AlertAdd consumer={'alerting'} />
           </AlertsContextProvider>
         );
       }

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx
@@ -18,44 +18,19 @@ import {
   EuiPortal,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { HttpSetup, ToastsApi, IUiSettingsClient } from 'kibana/public';
-import { ChartsPluginSetup } from 'src/plugins/charts/public';
-import { FieldFormatsRegistry } from 'src/plugins/data/common/field_formats/static';
 import { useAlertsContext } from '../../context/alerts_context';
-import { Alert, AlertAction, IErrorObject, AlertTypeModel, ActionTypeModel } from '../../../types';
+import { Alert, AlertAction, IErrorObject } from '../../../types';
 import { AlertForm, validateBaseProperties } from './alert_form';
 import { alertReducer } from './alert_reducer';
 import { createAlert } from '../../lib/alert_api';
-import { TypeRegistry } from '../../type_registry';
 
 interface AlertAddProps {
   consumer: string;
-  http: HttpSetup;
-  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
-  uiSettings?: IUiSettingsClient;
-  toastNotifications?: Pick<
-    ToastsApi,
-    'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
-  >;
   alertTypeId?: string;
   canChangeTrigger?: boolean;
-  charts?: ChartsPluginSetup;
-  dataFieldsFormats?: Pick<FieldFormatsRegistry, 'register'>;
 }
 
-export const AlertAdd = ({
-  consumer,
-  http,
-  toastNotifications,
-  alertTypeRegistry,
-  actionTypeRegistry,
-  uiSettings,
-  canChangeTrigger,
-  alertTypeId,
-  charts,
-  dataFieldsFormats,
-}: AlertAddProps) => {
+export const AlertAdd = ({ consumer, canChangeTrigger, alertTypeId }: AlertAddProps) => {
   const initialAlert = ({
     params: {},
     consumer,
@@ -74,7 +49,15 @@ export const AlertAdd = ({
     dispatch({ command: { type: 'setAlert' }, payload: { key: 'alert', value } });
   };
 
-  const { addFlyoutVisible, setAddFlyoutVisibility, reloadAlerts } = useAlertsContext();
+  const {
+    addFlyoutVisible,
+    setAddFlyoutVisibility,
+    reloadAlerts,
+    http,
+    toastNotifications,
+    alertTypeRegistry,
+    actionTypeRegistry,
+  } = useAlertsContext();
 
   const closeFlyout = useCallback(() => {
     setAddFlyoutVisibility(false);
@@ -158,18 +141,11 @@ export const AlertAdd = ({
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <AlertForm
-            http={http}
-            actionTypeRegistry={actionTypeRegistry}
-            alertTypeRegistry={alertTypeRegistry}
-            toastNotifications={toastNotifications}
-            uiSettings={uiSettings}
             alert={alert}
             dispatch={dispatch}
             errors={errors}
             serverError={serverError}
             canChangeTrigger={canChangeTrigger}
-            charts={charts}
-            dataFieldsFormats={dataFieldsFormats}
           />
         </EuiFlyoutBody>
         <EuiFlyoutFooter>