Use Expression components for triggers

elastic · Mar 24, 2020 · b326c42 · b326c42
1 parent 33acee5
commit b326c42
Show file tree

Hide file tree

Showing 36 changed files with 364 additions and 382 deletions.
diff --git a/...ins/apm/public/components/app/APMIndicesPermission/__test__/APMIndicesPermission.test.tsx b/...ins/apm/public/components/app/APMIndicesPermission/__test__/APMIndicesPermission.test.tsx
@@ -11,9 +11,9 @@ import { APMIndicesPermission } from '../';
 import * as hooks from '../../../../hooks/useFetcher';
 import {
   expectTextsInDocument,
-  MockApmPluginContextWrapper,
   expectTextsNotInDocument
 } from '../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 describe('APMIndicesPermission', () => {
   it('returns empty component when api status is loading', () => {

diff --git a/...k/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx b/...k/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx
@@ -9,25 +9,7 @@ import React from 'react';
 import { mockMoment, toJson } from '../../../../../utils/testHelpers';
 import { ErrorGroupList } from '../index';
 import props from './props.json';
-import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
-import {
-  useUiFilters,
-  UrlParamsContext
-} from '../../../../../context/UrlParamsContext';
-
-const mockRefreshTimeRange = jest.fn();
-const MockUrlParamsProvider: React.FC<{
-  params?: IUrlParams;
-}> = ({ params = props.urlParams, children }) => (
-  <UrlParamsContext.Provider
-    value={{
-      urlParams: params,
-      refreshTimeRange: mockRefreshTimeRange,
-      uiFilters: useUiFilters(params)
-    }}
-    children={children}
-  />
-);
+import { MockUrlParamsContextProvider } from '../../../../../context/UrlParamsContext/MockUrlParamsContextProvider';
 
 describe('ErrorGroupOverview -> List', () => {
   beforeAll(() => {
@@ -37,9 +19,9 @@ describe('ErrorGroupOverview -> List', () => {
   it('should render empty state', () => {
     const storeState = {};
     const wrapper = mount(
-      <MockUrlParamsProvider>
+      <MockUrlParamsContextProvider>
         <ErrorGroupList items={[]} />
-      </MockUrlParamsProvider>,
+      </MockUrlParamsContextProvider>,
       storeState
     );
 
@@ -48,9 +30,9 @@ describe('ErrorGroupOverview -> List', () => {
 
   it('should render with data', () => {
     const wrapper = mount(
-      <MockUrlParamsProvider>
+      <MockUrlParamsContextProvider>
         <ErrorGroupList items={props.items} />
-      </MockUrlParamsProvider>
+      </MockUrlParamsContextProvider>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json
@@ -1,11 +1,4 @@
 {
-  "urlParams": {
-    "page": 0,
-    "serviceName": "opbeans-python",
-    "transactionType": "request",
-    "start": "2018-01-10T09:51:41.050Z",
-    "end": "2018-01-10T10:06:41.050Z"
-  },
   "items": [
     {
       "message": "About to blow up!",

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Home/Home.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/Home/Home.test.tsx
@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { Home } from '../Home';
-import { MockApmPluginContextWrapper } from '../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 describe('Home component', () => {
   it('should render services', () => {

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.test.tsx
@@ -8,12 +8,12 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
-import {
-  mockApmPluginContextValue,
-  MockApmPluginContextWrapper
-} from '../../../utils/testHelpers';
 import { routes } from './route_config';
 import { UpdateBreadcrumbs } from './UpdateBreadcrumbs';
+import {
+  MockApmPluginContextWrapper,
+  mockApmPluginContextValue
+} from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 const setBreadcrumbs = jest.fn();
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
@@ -194,6 +194,7 @@ storiesOf('app/ServiceMap/Cytoscape', module)
       const height = 640;
       const width = 1340;
       const serviceName = undefined; // global service map
+
       return (
         <Cytoscape
           elements={elementsFromResponses}

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
@@ -7,9 +7,9 @@
 import { act, render, wait } from '@testing-library/react';
 import cytoscape from 'cytoscape';
 import React, { FunctionComponent } from 'react';
-import { MockApmPluginContextWrapper } from '../../../utils/testHelpers';
 import { CytoscapeContext } from './Cytoscape';
 import { EmptyBanner } from './EmptyBanner';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 const cy = cytoscape({});
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.test.tsx
@@ -8,8 +8,8 @@ import { render } from '@testing-library/react';
 import React, { FunctionComponent } from 'react';
 import { License } from '../../../../../../../plugins/licensing/common/license';
 import { LicenseContext } from '../../../context/LicenseContext';
-import { MockApmPluginContextWrapper } from '../../../utils/testHelpers';
 import { ServiceMap } from './';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 const expiredLicense = new License({
   signature: 'test signature',

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ServiceNodeMetrics } from '.';
-import { MockApmPluginContextWrapper } from '../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 describe('ServiceNodeMetrics', () => {
   describe('render', () => {

diff --git a/...egacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/...egacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
@@ -11,11 +11,11 @@ import * as urlParamsHooks from '../../../../hooks/useUrlParams';
 import * as useLocalUIFilters from '../../../../hooks/useLocalUIFilters';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
 import { SessionStorageMock } from '../../../../services/__test__/SessionStorageMock';
+import { ApmPluginContextValue } from '../../../../context/ApmPluginContext';
 import {
   MockApmPluginContextWrapper,
   mockApmPluginContextValue
-} from '../../../../utils/testHelpers';
-import { ApmPluginContextValue } from '../../../../context/ApmPluginContext';
+} from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 jest.mock('ui/new_platform');
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
@@ -7,8 +7,8 @@
 import { render, wait } from '@testing-library/react';
 import React from 'react';
 import { ApmIndices } from '.';
-import { MockApmPluginContextWrapper } from '../../../../utils/testHelpers';
 import * as hooks from '../../../../hooks/useFetcher';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 describe('ApmIndices', () => {
   it('should not get stuck in infinite loop', async () => {

diff --git a/...k/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx b/...k/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
@@ -13,11 +13,11 @@ import * as hooks from '../../../../../hooks/useFetcher';
 import { LicenseContext } from '../../../../../context/LicenseContext';
 import { CustomLinkOverview } from '.';
 import {
-  MockApmPluginContextWrapper,
   expectTextsInDocument,
   expectTextsNotInDocument
 } from '../../../../../utils/testHelpers';
 import * as saveCustomLink from './CustomLinkFlyout/saveCustomLink';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const data = [
   {

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { TraceLink } from '../';
 import * as hooks from '../../../../hooks/useFetcher';
 import * as urlParamsHooks from '../../../../hooks/useUrlParams';
-import { MockApmPluginContextWrapper } from '../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const renderOptions = { wrapper: MockApmPluginContextWrapper };
 

diff --git a/...ugins/apm/public/components/app/TransactionOverview/__jest__/TransactionOverview.test.tsx b/...ugins/apm/public/components/app/TransactionOverview/__jest__/TransactionOverview.test.tsx
@@ -22,7 +22,7 @@ import * as useFetcherHook from '../../../../hooks/useFetcher';
 import { fromQuery } from '../../../shared/Links/url_helpers';
 import { Router } from 'react-router-dom';
 import { UrlParamsProvider } from '../../../../context/UrlParamsContext';
-import { MockApmPluginContextWrapper } from '../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 jest.spyOn(history, 'push');
 jest.spyOn(history, 'replace');

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.stories.tsx b/x-pack/legacy/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.stories.tsx
@@ -10,7 +10,7 @@ import { ErrorRateAlertTrigger } from '.';
 
 storiesOf('app/ErrorRateAlertTrigger', module).add('example', props => {
   const params = {
-    rate: 2,
+    threshold: 2,
     window: '5m'
   };
 

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx
@@ -6,12 +6,14 @@
 import React from 'react';
 import { EuiFieldNumber } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { ForLastExpression } from '../../../../../../../plugins/triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG } from '../../../../../../../plugins/apm/common/alert_types';
-import { DurationField } from '../ServiceAlertTrigger/DurationField';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
+import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
 
 export interface ErrorRateAlertTriggerParams {
-  window: string;
+  windowSize: number;
+  windowUnit: string;
   threshold: number;
 }
 
@@ -26,41 +28,48 @@ export function ErrorRateAlertTrigger(props: Props) {
 
   const defaults = {
     threshold: 2,
-    window: '5m'
+    windowSize: 5,
+    windowUnit: 'm'
+  };
+
+  const params = {
+    ...defaults,
+    ...alertParams
   };
 
   const fields = [
-    {
-      name: 'threshold',
-      title: i18n.translate('xpack.apm.errorRateAlertTrigger.setThreshold', {
-        defaultMessage: 'Set threshold'
-      }),
-      field: (
-        <EuiFieldNumber
-          value={alertParams.threshold ?? ''}
-          step={0}
-          onChange={e =>
-            setAlertParams('threshold', parseInt(e.target.value, 10))
-          }
-          compressed
-          append={i18n.translate('xpack.apm.errorRateAlertTrigger.errors', {
-            defaultMessage: 'errors'
-          })}
-        />
-      )
-    },
-    {
-      name: 'window',
-      title: i18n.translate('xpack.apm.errorRateAlertTrigger.setWindow', {
-        defaultMessage: 'Set window'
-      }),
-      field: (
-        <DurationField
-          duration={alertParams.window}
-          onChange={duration => setAlertParams('window', duration)}
-        />
-      )
-    }
+    <PopoverExpression
+      title={i18n.translate('xpack.apm.errorRateAlertTrigger.isAbove', {
+        defaultMessage: 'is above'
+      })}
+      value={params.threshold.toString()}
+    >
+      <EuiFieldNumber
+        value={alertParams.threshold ?? ''}
+        step={0}
+        onChange={e =>
+          setAlertParams('threshold', parseInt(e.target.value, 10))
+        }
+        compressed
+        append={i18n.translate('xpack.apm.errorRateAlertTrigger.errors', {
+          defaultMessage: 'errors'
+        })}
+      />
+    </PopoverExpression>,
+    <ForLastExpression
+      onChangeWindowSize={windowSize =>
+        setAlertParams('windowSize', windowSize)
+      }
+      onChangeWindowUnit={windowUnit =>
+        setAlertParams('windowUnit', windowUnit)
+      }
+      timeWindowSize={params.windowSize}
+      timeWindowUnit={params.windowUnit}
+      errors={{
+        timeWindowSize: [],
+        timeWindowUnit: []
+      }}
+    />
   ];
 
   return (

diff --git a/.../apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx b/.../apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx
@@ -10,9 +10,9 @@ import { render } from '@testing-library/react';
 import { APMError } from '../../../../../../../../../plugins/apm/typings/es_schemas/ui/apm_error';
 import {
   expectTextsInDocument,
-  expectTextsNotInDocument,
-  MockApmPluginContextWrapper
+  expectTextsNotInDocument
 } from '../../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const renderOptions = {
   wrapper: MockApmPluginContextWrapper

diff --git a/...ns/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx b/...ns/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx
@@ -10,9 +10,9 @@ import { SpanMetadata } from '..';
 import { Span } from '../../../../../../../../../plugins/apm/typings/es_schemas/ui/span';
 import {
   expectTextsInDocument,
-  expectTextsNotInDocument,
-  MockApmPluginContextWrapper
+  expectTextsNotInDocument
 } from '../../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const renderOptions = {
   wrapper: MockApmPluginContextWrapper

diff --git a/...components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx b/...components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx
@@ -10,9 +10,9 @@ import { render } from '@testing-library/react';
 import { Transaction } from '../../../../../../../../../plugins/apm/typings/es_schemas/ui/transaction';
 import {
   expectTextsInDocument,
-  expectTextsNotInDocument,
-  MockApmPluginContextWrapper
+  expectTextsNotInDocument
 } from '../../../../../utils/testHelpers';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const renderOptions = {
   wrapper: MockApmPluginContextWrapper

diff --git a/...legacy/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx b/...legacy/plugins/apm/public/components/shared/MetadataTable/__test__/MetadataTable.test.tsx
@@ -7,11 +7,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MetadataTable } from '..';
-import {
-  expectTextsInDocument,
-  MockApmPluginContextWrapper
-} from '../../../../utils/testHelpers';
+import { expectTextsInDocument } from '../../../../utils/testHelpers';
 import { SectionsWithRows } from '../helper';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 const renderOptions = {
   wrapper: MockApmPluginContextWrapper