From 999fa8a0eccc8762ce522e85308546f184cb591c Mon Sep 17 00:00:00 2001 From: shahzad Date: Tue, 4 Feb 2020 12:44:47 +0100 Subject: [PATCH 1/6] added test for pages --- .../plugins/uptime/common/constants/ui.ts | 4 + .../public/components/connected/index.ts | 1 - ...ew_container.ts => overview_container.tsx} | 0 .../connected/pages/page_header_container.tsx | 16 + .../__tests__/monitor_charts.test.tsx | 29 +- .../__tests__/uptime_date_picker.test.tsx | 7 +- .../__tests__/filter_status_button.test.tsx | 5 +- .../__snapshots__/location_map.test.tsx.snap | 80 +- .../functional/location_map/location_map.tsx | 9 +- .../__tests__/monitor_list_drawer.test.tsx | 59 +- .../use_url_params.test.tsx.snap | 4 +- .../hooks/__tests__/use_url_params.test.tsx | 57 +- .../public/lib/helper/render_with_router.tsx | 26 +- .../legacy/plugins/uptime/public/lib/index.ts | 2 +- .../__snapshots__/monitor.test.tsx.snap | 56 + .../__snapshots__/not_found.test.tsx.snap | 56 + .../__snapshots__/overview.test.tsx.snap | 161 +++ .../__snapshots__/page_header.test.tsx.snap | 1154 +++++++++++++++++ .../public/pages/__tests__/monitor.test.tsx | 15 + .../public/pages/__tests__/not_found.test.tsx | 16 + .../public/pages/__tests__/overview.test.tsx | 104 ++ .../pages/__tests__/page_header.test.tsx | 145 +++ .../plugins/uptime/public/pages/index.ts | 10 - .../plugins/uptime/public/pages/monitor.tsx | 15 +- .../plugins/uptime/public/pages/overview.tsx | 6 +- .../uptime/public/pages/page_header.tsx | 39 +- .../legacy/plugins/uptime/public/routes.tsx | 17 +- .../plugins/uptime/public/uptime_app.tsx | 8 +- 28 files changed, 1896 insertions(+), 205 deletions(-) rename x-pack/legacy/plugins/uptime/public/components/connected/pages/{overview_container.ts => overview_container.tsx} (100%) create mode 100644 x-pack/legacy/plugins/uptime/public/components/connected/pages/page_header_container.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/not_found.test.tsx.snap create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/monitor.test.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/not_found.test.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/pages/__tests__/page_header.test.tsx delete mode 100644 x-pack/legacy/plugins/uptime/public/pages/index.ts diff --git a/x-pack/legacy/plugins/uptime/common/constants/ui.ts b/x-pack/legacy/plugins/uptime/common/constants/ui.ts index c91a2f6625194..8389d86fd2072 100644 --- a/x-pack/legacy/plugins/uptime/common/constants/ui.ts +++ b/x-pack/legacy/plugins/uptime/common/constants/ui.ts @@ -4,6 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ +export const MONITOR_ROUTE = '/monitor/:monitorId?'; + +export const OVERVIEW_ROUTE = '/'; + export enum STATUS { UP = 'up', DOWN = 'down', diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/index.ts b/x-pack/legacy/plugins/uptime/public/components/connected/index.ts index 5bb0d1ae8468f..6f13f8a74981e 100644 --- a/x-pack/legacy/plugins/uptime/public/components/connected/index.ts +++ b/x-pack/legacy/plugins/uptime/public/components/connected/index.ts @@ -6,5 +6,4 @@ export { PingHistogram } from './charts/ping_histogram'; export { KueryBar } from './kuerybar/kuery_bar_container'; -export { OverviewPage } from './pages/overview_container'; export { FilterGroup } from './filter_group/filter_group_container'; diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts b/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.tsx similarity index 100% rename from x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts rename to x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.tsx diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/pages/page_header_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/pages/page_header_container.tsx new file mode 100644 index 0000000000000..9429b87061ff7 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/components/connected/pages/page_header_container.tsx @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { connect } from 'react-redux'; +import { selectSelectedMonitor } from '../../../state/selectors'; +import { AppState } from '../../../state'; +import { PageHeaderComponent } from '../../../pages/page_header'; + +const mapStateToProps = (state: AppState) => ({ + monitorStatus: selectSelectedMonitor(state), +}); + +export const PageHeader = connect(mapStateToProps, null)(PageHeaderComponent); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx index 81c60c8fbeaaa..59cdbbb8f6844 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx @@ -6,10 +6,9 @@ import React from 'react'; import DateMath from '@elastic/datemath'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { MonitorChartsComponent } from '../monitor_charts'; import { MonitorChart } from '../../../../common/graphql/types'; -import { renderWithRouter } from '../../../lib'; +import { shallowWithRouter } from '../../../lib'; describe('MonitorCharts component', () => { let dateMathSpy: any; @@ -63,20 +62,18 @@ describe('MonitorCharts component', () => { }; it('renders the component without errors', () => { - const component = shallowWithIntl( - renderWithRouter( - - ) + const component = shallowWithRouter( + ); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx index 5ce88f2bd5c22..445d9302e3a9d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx @@ -4,19 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ -import { shallowWithIntl, renderWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { UptimeDatePicker } from '../uptime_date_picker'; -import { renderWithRouter } from '../../../lib'; +import { renderWithRouter, shallowWithRouter } from '../../../lib'; describe('UptimeDatePicker component', () => { it('validates props with shallow render', () => { - const component = shallowWithIntl(renderWithRouter()); + const component = shallowWithRouter(); expect(component).toMatchSnapshot(); }); it('renders properly with mock data', () => { - const component = renderWithIntl(renderWithRouter()); + const component = renderWithRouter(); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/__tests__/filter_status_button.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/__tests__/filter_status_button.test.tsx index 0c0393cb4fedf..1813229a97d1b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/__tests__/filter_status_button.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/__tests__/filter_status_button.test.tsx @@ -5,9 +5,8 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { FilterStatusButton, FilterStatusButtonProps } from '../filter_status_button'; -import { renderWithRouter } from '../../../../lib/'; +import { shallowWithRouter } from '../../../../lib/'; describe('FilterStatusButton', () => { let props: FilterStatusButtonProps; @@ -21,7 +20,7 @@ describe('FilterStatusButton', () => { }); it('renders without errors for valid props', () => { - const wrapper = shallowWithIntl(renderWithRouter()); + const wrapper = shallowWithRouter(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/__tests__/__snapshots__/location_map.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/__tests__/__snapshots__/location_map.test.tsx.snap index ed50bc0be382a..d782eb565ef99 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/__tests__/__snapshots__/location_map.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/__tests__/__snapshots__/location_map.test.tsx.snap @@ -42,15 +42,15 @@ exports[`LocationMap component doesnt shows warning if geo is provided 1`] = ` } /> - - - - + + `; @@ -127,15 +127,15 @@ exports[`LocationMap component renders correctly against snapshot 1`] = ` } /> - - @@ -155,8 +155,8 @@ exports[`LocationMap component renders correctly against snapshot 1`] = ` } /> - - + + `; @@ -186,15 +186,15 @@ exports[`LocationMap component renders named locations that have missing geo dat } /> - - @@ -203,8 +203,8 @@ exports[`LocationMap component renders named locations that have missing geo dat upPoints={Array []} /> - - + + `; @@ -247,15 +247,15 @@ exports[`LocationMap component shows warning if geo information is missing 1`] = } /> - - @@ -271,8 +271,8 @@ exports[`LocationMap component shows warning if geo information is missing 1`] = } /> - - + + `; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx index 8b9e410b0de79..27fe3a2274270 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx @@ -32,7 +32,6 @@ const EuiFlexItemTags = styled(EuiFlexItem)` padding-top: 5px; @media (max-width: 850px) { order: 1; - text-align: center; } `; @@ -80,14 +79,14 @@ export const LocationMap = ({ monitorLocations }: LocationMapProps) => { - - + + {isGeoInfoMissing && } - - + + ); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx index 9bd407902cb55..c222728df3bb3 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx @@ -5,11 +5,10 @@ */ import 'jest'; import { MonitorSummary, Check } from '../../../../../../common/graphql/types'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { MonitorListDrawerComponent } from '../monitor_list_drawer'; import { MonitorDetails } from '../../../../../../common/runtime_types'; -import { renderWithRouter } from '../../../../../lib'; +import { shallowWithRouter } from '../../../../../lib'; describe('MonitorListDrawer component', () => { let summary: MonitorSummary; @@ -52,41 +51,35 @@ describe('MonitorListDrawer component', () => { }); it('renders nothing when no summary data is present', () => { - const component = shallowWithIntl( - renderWithRouter( - - ) + const component = shallowWithRouter( + ); expect(component).toEqual({}); }); it('renders nothing when no check data is present', () => { delete summary.state.checks; - const component = shallowWithIntl( - renderWithRouter( - - ) + const component = shallowWithRouter( + ); expect(component).toEqual({}); }); it('renders a MonitorListDrawer when there is only one check', () => { - const component = shallowWithIntl( - renderWithRouter( - - ) + const component = shallowWithRouter( + ); expect(component).toMatchSnapshot(); }); @@ -116,14 +109,12 @@ describe('MonitorListDrawer component', () => { }, ]; summary.state.checks = checks; - const component = shallowWithIntl( - renderWithRouter( - - ) + const component = shallowWithRouter( + ); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap index a2c52f9405289..827c9257893ad 100644 --- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap @@ -11,7 +11,7 @@ exports[`useUrlParams deletes keys that do not have truthy values 1`] = ` "entries": Array [ Object { "hash": "", - "key": "test", + "key": "TestKeyForTesting", "pathname": "/", "search": "?g=%22%22&dateRangeStart=now-12&dateRangeEnd=now&pagination=foo", "state": undefined, @@ -25,7 +25,7 @@ exports[`useUrlParams deletes keys that do not have truthy values 1`] = ` "listen": [Function], "location": Object { "hash": "", - "key": "test", + "key": "TestKeyForTesting", "pathname": "/", "search": "?g=%22%22&dateRangeStart=now-12&dateRangeEnd=now&pagination=foo", "state": undefined, diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx index c9ba7b9bc0098..da6b33bc49300 100644 --- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx @@ -4,12 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import { mountWithIntl } from 'test_utils/enzyme_helpers'; import DateMath from '@elastic/datemath'; import React, { useState, Fragment } from 'react'; import { useUrlParams, UptimeUrlParamsHook } from '../use_url_params'; import { UptimeRefreshContext } from '../../contexts'; -import { renderWithRouter } from '../../lib'; +import { mountWithRouter } from '../../lib'; import { createMemoryHistory } from 'history'; interface MockUrlParamsComponentProps { @@ -51,13 +50,11 @@ describe('useUrlParams', () => { const history = createMemoryHistory(); jest.spyOn(history, 'push'); - const component = mountWithIntl( - renderWithRouter( - - - , - history - ) + const component = mountWithRouter( + + + , + history ); const setUrlParamsButton = component.find('#setUrlParams'); @@ -69,17 +66,15 @@ describe('useUrlParams', () => { }); it('gets the expected values using the context', () => { - const component = mountWithIntl( - renderWithRouter( - - - - ) + const component = mountWithRouter( + + + ); const getUrlParamsButton = component.find('#getUrlParams'); @@ -95,18 +90,16 @@ describe('useUrlParams', () => { history.location.key = 'test'; jest.spyOn(history, 'push'); - const component = mountWithIntl( - renderWithRouter( - - - , - history - ) + const component = mountWithRouter( + + + , + history ); const getUrlParamsButton = component.find('#getUrlParams'); diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx b/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx index 5cd9ec23a3587..abd01fa2d6849 100644 --- a/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx +++ b/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx @@ -9,13 +9,35 @@ import React from 'react'; import { Router } from 'react-router-dom'; import { MemoryHistory } from 'history/createMemoryHistory'; import { createMemoryHistory } from 'history'; +import { mountWithIntl, renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; export const renderWithRouter = (Component: any, customHistory?: MemoryHistory) => { if (customHistory) { - return {Component}; + return renderWithIntl({Component}); } const history = createMemoryHistory(); history.location.key = 'TestKeyForTesting'; - return {Component}; + return renderWithIntl({Component}); +}; + +export const shallowWithRouter = (Component: any, customHistory?: MemoryHistory) => { + if (customHistory) { + return shallowWithIntl({Component}); + } + const history = createMemoryHistory(); + history.location.key = 'TestKeyForTesting'; + + return shallowWithIntl({Component}); +}; + +export const mountWithRouter = (Component: any, customHistory?: MemoryHistory) => { + if (customHistory) { + customHistory.location.key = 'TestKeyForTesting'; + return mountWithIntl({Component}); + } + const history = createMemoryHistory(); + history.location.key = 'TestKeyForTesting'; + + return mountWithIntl({Component}); }; diff --git a/x-pack/legacy/plugins/uptime/public/lib/index.ts b/x-pack/legacy/plugins/uptime/public/lib/index.ts index 9a78c6df5d63d..07a0792360044 100644 --- a/x-pack/legacy/plugins/uptime/public/lib/index.ts +++ b/x-pack/legacy/plugins/uptime/public/lib/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { renderWithRouter } from './helper/render_with_router'; +export { renderWithRouter, shallowWithRouter, mountWithRouter } from './helper/render_with_router'; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap new file mode 100644 index 0000000000000..6064caa868bf8 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/monitor.test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` + + + +`; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/not_found.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/not_found.test.tsx.snap new file mode 100644 index 0000000000000..a4d13963aaf77 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/not_found.test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotFoundPage render component for valid props 1`] = ` + + + +`; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap new file mode 100644 index 0000000000000..c9af85bc10b6d --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap @@ -0,0 +1,161 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` + + + +`; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap new file mode 100644 index 0000000000000..2563b15eed5d5 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap @@ -0,0 +1,1154 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageHeaderComponent mount expected page title for valid monitor route 1`] = ` + + + + +
+ +
+ +

+ https://www.elastic.co +

+ +
+ + +
+ + + +
+ +
+ + } + > +
+ + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="QuickSelectPopover" + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + > + +
+
+ + + +
+
+ + + +
+ } + iconType={false} + isCustom={true} + startDateControl={
} + > +
+ +
+ + +
+
+ +
+ + +
+ + + + + + + + + +
+ +
+ + + +
+ +
+ + +
+ + + + +`; + +exports[`PageHeaderComponent renders expected elements for valid props 1`] = ` +Array [ +
+
+

+ Overview +

+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
, +
, +] +`; + +exports[`PageHeaderComponent renders expected title for valid monitor route 1`] = ` +Array [ +
+
+

+ https://www.elastic.co +

+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
, +
, +] +`; + +exports[`PageHeaderComponent renders expected title for valid overview route 1`] = ` +Array [ +
+
+

+ Overview +

+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
, +
, +] +`; + +exports[`PageHeaderComponent shallow renders expected elements for valid props 1`] = ` + + + +`; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/monitor.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/monitor.test.tsx new file mode 100644 index 0000000000000..8a1256c741c85 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/monitor.test.tsx @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { MonitorPage } from '../monitor'; +import { shallowWithRouter } from '../../lib'; + +describe('MonitorPage', () => { + it('shallow renders expected elements for valid props', () => { + expect(shallowWithRouter()).toMatchSnapshot(); + }); +}); diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/not_found.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/not_found.test.tsx new file mode 100644 index 0000000000000..2b6c60efc84b0 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/not_found.test.tsx @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallowWithRouter } from '../../lib'; +import { NotFoundPage } from '../not_found'; + +describe('NotFoundPage', () => { + it('render component for valid props', () => { + const component = shallowWithRouter(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx new file mode 100644 index 0000000000000..a44660a64d549 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx @@ -0,0 +1,104 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { OverviewPageComponent } from '../overview'; +import { shallowWithRouter } from '../../lib'; + +describe('MonitorPage', () => { + const indexPattern = { + fields: [ + { + name: '@timestamp', + type: 'date', + esTypes: ['date'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + + { + name: 'monitor.check_group', + type: 'string', + esTypes: ['keyword'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.duration.us', + type: 'number', + esTypes: ['long'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.id', + type: 'string', + esTypes: ['keyword'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.ip', + type: 'ip', + esTypes: ['ip'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.name', + type: 'string', + esTypes: ['keyword'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.status', + type: 'string', + esTypes: ['keyword'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.timespan', + type: 'unknown', + esTypes: ['date_range'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + { + name: 'monitor.type', + type: 'string', + esTypes: ['keyword'], + searchable: true, + aggregatable: true, + readFromDocValues: true, + }, + ], + title: 'heartbeat-8*', + }; + + const autocomplete = { + getQuerySuggestions: jest.fn(), + hasQuerySuggestions: () => true, + getValueSuggestions: jest.fn(), + }; + + it('shallow renders expected elements for valid props', () => { + expect( + shallowWithRouter( + + ) + ).toMatchSnapshot(); + }); +}); diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/page_header.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/page_header.test.tsx new file mode 100644 index 0000000000000..f6388bf8b606b --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/page_header.test.tsx @@ -0,0 +1,145 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { Route } from 'react-router-dom'; +import { PageHeaderComponent } from '../page_header'; +import { mountWithRouter, renderWithRouter, shallowWithRouter } from '../../lib'; +import { MONITOR_ROUTE, OVERVIEW_ROUTE } from '../../../common/constants'; +import { Ping } from '../../../common/graphql/types'; +import { createMemoryHistory } from 'history'; +import { ChromeBreadcrumb } from 'kibana/public'; + +describe('PageHeaderComponent', () => { + const monitorStatus: Ping = { + id: 'elastic-co', + tcp: { rtt: { connect: { us: 174982 } } }, + http: { + response: { + body: { + bytes: 2092041, + hash: '5d970606a6be810ae5d37115c4807fdd07ba4c3e407924ee5297e172d2efb3dc', + }, + status_code: 200, + }, + rtt: { + response_header: { us: 340175 }, + write_request: { us: 38 }, + validate: { us: 1797839 }, + content: { us: 1457663 }, + total: { us: 2030012 }, + }, + }, + monitor: { + ip: '2a04:4e42:3::729', + status: 'up', + duration: { us: 2030035 }, + type: 'http', + id: 'elastic-co', + name: 'elastic', + check_group: '2a017afa-4736-11ea-b3d0-acde48001122', + }, + resolve: { ip: '2a04:4e42:3::729', rtt: { us: 2102 } }, + url: { port: 443, full: 'https://www.elastic.co', scheme: 'https', domain: 'www.elastic.co' }, + ecs: { version: '1.4.0' }, + tls: { + certificate_not_valid_after: '2020-07-16T03:15:39.000Z', + rtt: { handshake: { us: 57115 } }, + certificate_not_valid_before: '2019-08-16T01:40:25.000Z', + }, + observer: { + geo: { name: 'US-West', location: '37.422994, -122.083666' }, + }, + timestamp: '2020-02-04T10:07:42.142Z', + }; + + it('shallow renders expected elements for valid props', () => { + const component = shallowWithRouter(); + expect(component).toMatchSnapshot(); + }); + it('renders expected elements for valid props', () => { + const component = renderWithRouter(); + expect(component).toMatchSnapshot(); + }); + + it('renders expected title for valid overview route', () => { + const component = renderWithRouter( + + + + ); + expect(component).toMatchSnapshot(); + + const titleComponent = component.find('.euiTitle'); + expect(titleComponent.text()).toBe('Overview'); + }); + + it('renders expected title for valid monitor route', () => { + const history = createMemoryHistory({ initialEntries: ['/monitor/ZWxhc3RpYy1jbw=='] }); + + const component = renderWithRouter( + + + , + history + ); + expect(component).toMatchSnapshot(); + + const titleComponent = component.find('.euiTitle'); + expect(titleComponent.text()).toBe('https://www.elastic.co'); + }); + + it('mount expected page title for valid monitor route', () => { + const history = createMemoryHistory({ initialEntries: ['/monitor/ZWxhc3RpYy1jbw=='] }); + + const component = mountWithRouter( + + + , + history + ); + expect(component).toMatchSnapshot(); + + const titleComponent = component.find('.euiTitle'); + expect(titleComponent.text()).toBe('https://www.elastic.co'); + expect(document.title).toBe('Uptime | elastic - Kibana'); + }); + + it('mount and set expected breadcrumb for monitor route', () => { + const history = createMemoryHistory({ initialEntries: ['/monitor/ZWxhc3RpYy1jbw=='] }); + let breadcrumbObj: ChromeBreadcrumb[] = []; + const setBreadcrumb = (breadcrumbs: ChromeBreadcrumb[]) => { + breadcrumbObj = breadcrumbs; + }; + + mountWithRouter( + + + , + history + ); + + expect(breadcrumbObj).toStrictEqual([ + { href: '#/?', text: 'Uptime' }, + { text: 'https://www.elastic.co' }, + ]); + }); + + it('mount and set expected breadcrumb for overview route', () => { + let breadcrumbObj: ChromeBreadcrumb[] = []; + const setBreadcrumb = (breadcrumbs: ChromeBreadcrumb[]) => { + breadcrumbObj = breadcrumbs; + }; + + mountWithRouter( + + + + ); + + expect(breadcrumbObj).toStrictEqual([{ href: '#/', text: 'Uptime' }]); + }); +}); diff --git a/x-pack/legacy/plugins/uptime/public/pages/index.ts b/x-pack/legacy/plugins/uptime/public/pages/index.ts deleted file mode 100644 index 17f083ca023ed..0000000000000 --- a/x-pack/legacy/plugins/uptime/public/pages/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export { MonitorPage } from './monitor'; -export { NotFoundPage } from './not_found'; -export { PageHeader } from './page_header'; -export { OverviewPage } from '../components/connected/'; diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx index 408d2584911e0..92687a08a2f83 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx @@ -5,21 +5,15 @@ */ import { EuiSpacer } from '@elastic/eui'; -import React, { Fragment, useContext, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { useParams } from 'react-router-dom'; import { MonitorCharts, PingList } from '../components/functional'; -import { UMUpdateBreadcrumbs } from '../lib/lib'; import { UptimeRefreshContext, UptimeThemeContext } from '../contexts'; import { useUptimeTelemetry, useUrlParams, UptimePage } from '../hooks'; import { useTrackPageview } from '../../../infra/public'; import { MonitorStatusDetails } from '../components/functional/monitor_status_details'; -import { PageHeader } from './page_header'; -interface MonitorPageProps { - setBreadcrumbs: UMUpdateBreadcrumbs; -} - -export const MonitorPage = ({ setBreadcrumbs }: MonitorPageProps) => { +export const MonitorPage = () => { // decode 64 base string, it was decoded to make it a valid url, since monitor id can be a url let { monitorId } = useParams(); monitorId = atob(monitorId || ''); @@ -46,8 +40,7 @@ export const MonitorPage = ({ setBreadcrumbs }: MonitorPageProps) => { useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 }); return ( - - + <> { status: selectedPingStatus, }} /> - + ); }; diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index 0f6195c5f4c66..42b931f72dc22 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx @@ -13,11 +13,9 @@ import { OverviewPageParsingErrorCallout, StatusPanel, } from '../components/functional'; -import { UMUpdateBreadcrumbs } from '../lib/lib'; import { useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks'; import { stringifyUrlParams } from '../lib/helper/stringify_url_params'; import { useTrackPageview } from '../../../infra/public'; -import { PageHeader } from './page_header'; import { DataPublicPluginStart, IIndexPattern } from '../../../../../../src/plugins/data/public'; import { UptimeThemeContext } from '../contexts'; import { FilterGroup, KueryBar } from '../components/connected'; @@ -25,7 +23,6 @@ import { useUpdateKueryString } from '../hooks'; interface OverviewPageProps { autocomplete: DataPublicPluginStart['autocomplete']; - setBreadcrumbs: UMUpdateBreadcrumbs; indexPattern: IIndexPattern; } @@ -40,7 +37,7 @@ const EuiFlexItemStyled = styled(EuiFlexItem)` } `; -export const OverviewPageComponent = ({ autocomplete, setBreadcrumbs, indexPattern }: Props) => { +export const OverviewPageComponent = ({ autocomplete, indexPattern }: Props) => { const { colors } = useContext(UptimeThemeContext); const [getUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams(); @@ -71,7 +68,6 @@ export const OverviewPageComponent = ({ autocomplete, setBreadcrumbs, indexPatte return ( <> - diff --git a/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx b/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx index 7c3f80d4beb98..5c051c491c6f5 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/page_header.tsx @@ -4,23 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import React, { useEffect, useState } from 'react'; -import { connect } from 'react-redux'; import { useRouteMatch } from 'react-router-dom'; -import { i18n } from '@kbn/i18n'; +import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { UptimeDatePicker } from '../components/functional/uptime_date_picker'; -import { AppState } from '../state'; -import { selectSelectedMonitor } from '../state/selectors'; import { getMonitorPageBreadcrumb, getOverviewPageBreadcrumbs } from '../breadcrumbs'; import { stringifyUrlParams } from '../lib/helper/stringify_url_params'; import { getTitle } from '../lib/helper/get_title'; import { UMUpdateBreadcrumbs } from '../lib/lib'; -import { MONITOR_ROUTE } from '../routes'; import { useUrlParams } from '../hooks'; +import { MONITOR_ROUTE } from '../../common/constants'; +import { Ping } from '../../common/graphql/types'; interface PageHeaderProps { - monitorStatus?: any; + monitorStatus?: Ping; setBreadcrumbs: UMUpdateBreadcrumbs; } @@ -32,24 +30,27 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade const [getUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams(); - const headingText = i18n.translate('xpack.uptime.overviewPage.headerText', { - defaultMessage: 'Overview', - description: `The text that will be displayed in the app's heading when the Overview page loads.`, - }); + const headingText = !monitorPage + ? i18n.translate('xpack.uptime.overviewPage.headerText', { + defaultMessage: 'Overview', + description: `The text that will be displayed in the app's heading when the Overview page loads.`, + }) + : monitorStatus?.url?.full; const [headerText, setHeaderText] = useState(headingText); useEffect(() => { if (monitorPage) { - setHeaderText(monitorStatus?.url?.full); + setHeaderText(monitorStatus?.url?.full ?? ''); if (monitorStatus?.monitor) { const { name, id } = monitorStatus.monitor; - document.title = getTitle(name || id); + document.title = getTitle((name || id) ?? ''); } } else { + setHeaderText(headingText); document.title = getTitle(); } - }, [monitorStatus, monitorPage, setHeaderText]); + }, [monitorStatus, monitorPage, setHeaderText, headingText]); useEffect(() => { if (monitorPage) { @@ -61,10 +62,6 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade } }, [headerText, setBreadcrumbs, params, monitorPage]); - useEffect(() => { - document.title = getTitle(); - }, []); - return ( <> @@ -81,9 +78,3 @@ export const PageHeaderComponent = ({ monitorStatus, setBreadcrumbs }: PageHeade ); }; - -const mapStateToProps = (state: AppState) => ({ - monitorStatus: selectSelectedMonitor(state), -}); - -export const PageHeader = connect(mapStateToProps, null)(PageHeaderComponent); diff --git a/x-pack/legacy/plugins/uptime/public/routes.tsx b/x-pack/legacy/plugins/uptime/public/routes.tsx index c318a82ab7f19..d6c642a6004e3 100644 --- a/x-pack/legacy/plugins/uptime/public/routes.tsx +++ b/x-pack/legacy/plugins/uptime/public/routes.tsx @@ -6,26 +6,23 @@ import React, { FC } from 'react'; import { Route, Switch } from 'react-router-dom'; -import { MonitorPage, NotFoundPage, OverviewPage } from './pages'; import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; -import { UMUpdateBreadcrumbs } from './lib/lib'; - -export const MONITOR_ROUTE = '/monitor/:monitorId?'; -export const OVERVIEW_ROUTE = '/'; +import { OverviewPage } from './components/connected/pages/overview_container'; +import { MONITOR_ROUTE, OVERVIEW_ROUTE } from '../common/constants'; +import { MonitorPage } from './pages/monitor'; +import { NotFoundPage } from './pages/not_found'; interface RouterProps { autocomplete: DataPublicPluginStart['autocomplete']; - basePath: string; - setBreadcrumbs: UMUpdateBreadcrumbs; } -export const PageRouter: FC = ({ autocomplete, basePath, setBreadcrumbs }) => ( +export const PageRouter: FC = ({ autocomplete }) => ( - + - + diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 513faa3eb4bc2..5f181e5f6f252 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx @@ -23,6 +23,7 @@ import { CommonlyUsedRange } from './components/functional/uptime_date_picker'; import { store } from './state'; import { setBasePath } from './state/actions'; import { PageRouter } from './routes'; +import { PageHeader } from './components/connected/pages/page_header_container'; export interface UptimeAppColors { danger: string; @@ -98,11 +99,8 @@ const Application = (props: UptimeAppProps) => {
- + +
From 8c59a1c95869fe32fb0ddda6938b24363d63b1a1 Mon Sep 17 00:00:00 2001 From: shahzad Date: Tue, 4 Feb 2020 13:03:53 +0100 Subject: [PATCH 2/6] fixed types --- .../__tests__/monitor_bar_series.test.tsx | 17 ++++++++-------- .../__tests__/monitor_list.test.tsx | 20 +++++++++---------- .../plugins/uptime/public/pages/monitor.tsx | 2 +- 3 files changed, 18 insertions(+), 21 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/monitor_bar_series.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/monitor_bar_series.test.tsx index c3e98134e438d..5d4e112aa5f28 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/monitor_bar_series.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/monitor_bar_series.test.tsx @@ -5,9 +5,8 @@ */ import React from 'react'; -import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; import { MonitorBarSeries, MonitorBarSeriesProps } from '../monitor_bar_series'; -import { renderWithRouter } from '../../../../lib'; +import { renderWithRouter, shallowWithRouter } from '../../../../lib'; import { SummaryHistogramPoint } from '../../../../../common/graphql/types'; describe('MonitorBarSeries component', () => { @@ -161,13 +160,13 @@ describe('MonitorBarSeries component', () => { }); it('shallow renders a series when there are down items', () => { - const component = shallowWithIntl(renderWithRouter()); + const component = shallowWithRouter(); expect(component).toMatchSnapshot(); }); it('shallow renders null when there are no down items', () => { props.histogramSeries = []; - const component = shallowWithIntl(renderWithRouter()); + const component = shallowWithRouter(); expect(component).toEqual({}); }); @@ -189,20 +188,20 @@ describe('MonitorBarSeries component', () => { up: 0, }, ]; - const component = shallowWithIntl(renderWithRouter()); + const component = shallowWithRouter(); expect(component).toEqual({}); }); it('shallow renders nothing if the data series is null', () => { - const component = shallowWithIntl( - renderWithRouter() + const component = shallowWithRouter( + ); expect(component).toEqual({}); }); it('renders if the data series is present', () => { - const component = renderWithIntl( - renderWithRouter() + const component = renderWithRouter( + ); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/monitor_list.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/monitor_list.test.tsx index bb9ce59ea62b1..14e91b9db920e 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/monitor_list.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/monitor_list.test.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { MonitorSummaryResult } from '../../../../../common/graphql/types'; import { MonitorListComponent } from '../monitor_list'; @@ -110,16 +110,14 @@ describe('MonitorList component', () => { }); it('renders the monitor list', () => { - const component = renderWithIntl( - renderWithRouter( - - ) + const component = renderWithRouter( + ); expect(component).toMatchSnapshot(); diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx index d0efaa3b5c7f9..1d45c7b7ab99b 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx @@ -11,7 +11,7 @@ import { MonitorCharts, PingList } from '../components/functional'; import { UptimeRefreshContext, UptimeThemeContext } from '../contexts'; import { useUptimeTelemetry, useUrlParams, UptimePage } from '../hooks'; import { useTrackPageview } from '../../../infra/public'; -import { MonitorStatusDetails } from '../components/functional/monitor_status_details'; +import { MonitorStatusDetails } from '../components/connected'; export const MonitorPage = () => { // decode 64 base string, it was decoded to make it a valid url, since monitor id can be a url From ca1ace90109414b12310a43f67fb9440410212bb Mon Sep 17 00:00:00 2001 From: shahzad Date: Thu, 6 Feb 2020 13:16:13 +0100 Subject: [PATCH 3/6] moved redux logic to connected --- .../public/components/connected/index.ts | 2 + .../monitor/drawer_popover_container.tsx | 26 ++++++++ .../monitor/list_drawer_container.tsx | 49 +++++++++++++++ .../monitor/status_bar_container.tsx | 2 +- .../public/components/functional/index.ts | 1 - .../functional/monitor_list/monitor_list.tsx | 2 +- .../integration_group.test.tsx.snap | 61 ++++++++++++++++++- .../integration_link.test.tsx.snap | 0 .../monitor_list_drawer.test.tsx.snap | 2 - .../__tests__/integration_group.test.tsx | 38 ++++++------ .../__tests__/integration_link.test.tsx | 0 .../__tests__/monitor_list_drawer.test.tsx | 29 ++------- .../monitor_list/monitor_list_drawer/index.ts | 2 +- .../integration_group.tsx | 33 +++++----- .../monitor_list_drawer}/integration_link.tsx | 2 +- .../monitor_list_actions_popover.tsx | 51 +++------------- .../monitor_list_drawer.tsx | 49 ++------------- .../__snapshots__/overview.test.tsx.snap | 1 + .../public/pages/__tests__/overview.test.tsx | 6 +- 19 files changed, 197 insertions(+), 159 deletions(-) create mode 100644 x-pack/legacy/plugins/uptime/public/components/connected/monitor/drawer_popover_container.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/components/connected/monitor/list_drawer_container.tsx rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/__tests__/__snapshots__/integration_group.test.tsx.snap (66%) rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/__tests__/__snapshots__/integration_link.test.tsx.snap (100%) rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/__tests__/integration_group.test.tsx (66%) rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/__tests__/integration_link.test.tsx (100%) rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/integration_group.tsx (95%) rename x-pack/legacy/plugins/uptime/public/components/functional/{ => monitor_list/monitor_list_drawer}/integration_link.tsx (100%) rename x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/{ => monitor_list_drawer}/monitor_list_actions_popover.tsx (58%) diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/index.ts b/x-pack/legacy/plugins/uptime/public/components/connected/index.ts index 13309acd03622..585f0bf7f25f5 100644 --- a/x-pack/legacy/plugins/uptime/public/components/connected/index.ts +++ b/x-pack/legacy/plugins/uptime/public/components/connected/index.ts @@ -10,3 +10,5 @@ export { KueryBar } from './kuerybar/kuery_bar_container'; export { FilterGroup } from './filter_group/filter_group_container'; export { MonitorStatusDetails } from './monitor/status_details_container'; export { MonitorStatusBar } from './monitor/status_bar_container'; +export { MonitorListDrawer } from './monitor/list_drawer_container'; +export { MonitorListActionsPopover } from './monitor/drawer_popover_container'; diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/monitor/drawer_popover_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/drawer_popover_container.tsx new file mode 100644 index 0000000000000..be29e12f716a9 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/drawer_popover_container.tsx @@ -0,0 +1,26 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { connect } from 'react-redux'; +import { AppState } from '../../../state'; +import { isIntegrationsPopupOpen } from '../../../state/selectors'; +import { PopoverState, toggleIntegrationsPopover } from '../../../state/actions'; +import { MonitorListActionsPopoverComponent } from '../../functional/monitor_list/monitor_list_drawer'; + +const mapStateToProps = (state: AppState) => ({ + popoverState: isIntegrationsPopupOpen(state), +}); + +const mapDispatchToProps = (dispatch: any) => ({ + togglePopoverIsVisible: (popoverState: PopoverState) => { + return dispatch(toggleIntegrationsPopover(popoverState)); + }, +}); + +export const MonitorListActionsPopover = connect( + mapStateToProps, + mapDispatchToProps +)(MonitorListActionsPopoverComponent); diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/monitor/list_drawer_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/list_drawer_container.tsx new file mode 100644 index 0000000000000..8c670b485cc56 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/list_drawer_container.tsx @@ -0,0 +1,49 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { useEffect } from 'react'; +import { connect } from 'react-redux'; +import { AppState } from '../../../state'; +import { getMonitorDetails } from '../../../state/selectors'; +import { MonitorDetailsActionPayload } from '../../../state/actions/types'; +import { fetchMonitorDetails } from '../../../state/actions/monitor'; +import { MonitorListDrawerComponent } from '../../functional/monitor_list/monitor_list_drawer/monitor_list_drawer'; +import { useUrlParams } from '../../../hooks'; +import { MonitorSummary } from '../../../../common/graphql/types'; +import { MonitorDetails } from '../../../../common/runtime_types/monitor'; + +interface ContainerProps { + summary: MonitorSummary; + monitorDetails: MonitorDetails; + loadMonitorDetails: typeof fetchMonitorDetails; +} + +const Container: React.FC = ({ summary, loadMonitorDetails, monitorDetails }) => { + const monitorId = summary?.monitor_id; + + const [getUrlParams] = useUrlParams(); + const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams(); + + useEffect(() => { + loadMonitorDetails({ + dateStart, + dateEnd, + monitorId, + }); + }, [dateStart, dateEnd, monitorId, loadMonitorDetails]); + return ; +}; + +const mapStateToProps = (state: AppState, { summary }: any) => ({ + monitorDetails: getMonitorDetails(state, summary), +}); + +const mapDispatchToProps = (dispatch: any) => ({ + loadMonitorDetails: (actionPayload: MonitorDetailsActionPayload) => + dispatch(fetchMonitorDetails(actionPayload)), +}); + +export const MonitorListDrawer = connect(mapStateToProps, mapDispatchToProps)(Container); diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx index db6337732091a..b2b555d32a3c7 100644 --- a/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx @@ -31,7 +31,7 @@ interface OwnProps { type Props = OwnProps & StateProps & DispatchProps; -export const Container: React.FC = ({ +const Container: React.FC = ({ loadMonitorStatus, monitorId, monitorStatus, diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/index.ts b/x-pack/legacy/plugins/uptime/public/components/functional/index.ts index 4ec4cf4f52607..e86ba548fb5d9 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/index.ts +++ b/x-pack/legacy/plugins/uptime/public/components/functional/index.ts @@ -6,7 +6,6 @@ export { DonutChart } from './charts/donut_chart'; export { EmptyState } from './empty_state'; -export { IntegrationLink } from './integration_link'; export { KueryBarComponent } from './kuery_bar/kuery_bar'; export { MonitorCharts } from './monitor_charts'; export { MonitorList } from './monitor_list'; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx index de6cc1982f1a8..58250222e1330 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx @@ -28,11 +28,11 @@ import { import { MonitorListStatusColumn } from './monitor_list_status_column'; import { formatUptimeGraphQLErrorList } from '../../../lib/helper/format_error_list'; import { ExpandedRowMap } from './types'; -import { MonitorListDrawer } from './monitor_list_drawer'; import { MonitorBarSeries } from '../charts'; import { MonitorPageLink } from './monitor_page_link'; import { OverviewPageLink } from './overview_page_link'; import * as labels from './translations'; +import { MonitorListDrawer } from '../../connected'; interface MonitorListQueryResult { monitorStates?: MonitorSummaryResult; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/integration_group.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/integration_group.test.tsx.snap similarity index 66% rename from x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/integration_group.test.tsx.snap rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/integration_group.test.tsx.snap index bab69a6de9708..bb578d850ff7e 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/integration_group.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/integration_group.test.tsx.snap @@ -4,6 +4,15 @@ exports[`IntegrationGroup will not display APM links when APM is unavailable 1`] + + + + + + + + + + + + + + + + + + + + + `; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/integration_link.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/integration_link.test.tsx.snap similarity index 100% rename from x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/integration_link.test.tsx.snap rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/integration_link.test.tsx.snap diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap index 29f2c0b63991e..cf754581b1a33 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap @@ -52,7 +52,6 @@ exports[`MonitorListDrawer component renders a MonitorListDrawer when there are } > { it('will not display APM links when APM is unavailable', () => { const component = shallowWithIntl( ); @@ -41,12 +41,12 @@ describe('IntegrationGroup', () => { it('will not display infra links when infra is unavailable', () => { const component = shallowWithIntl( ); @@ -56,12 +56,12 @@ describe('IntegrationGroup', () => { it('will not display logging links when logging is unavailable', () => { const component = shallowWithIntl( ); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/integration_link.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_link.test.tsx similarity index 100% rename from x-pack/legacy/plugins/uptime/public/components/functional/__tests__/integration_link.test.tsx rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_link.test.tsx diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx index c222728df3bb3..6dce07c319b74 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx @@ -3,16 +3,14 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import 'jest'; -import { MonitorSummary, Check } from '../../../../../../common/graphql/types'; import React from 'react'; +import { MonitorSummary, Check } from '../../../../../../common/graphql/types'; import { MonitorListDrawerComponent } from '../monitor_list_drawer'; import { MonitorDetails } from '../../../../../../common/runtime_types'; import { shallowWithRouter } from '../../../../../lib'; describe('MonitorListDrawer component', () => { let summary: MonitorSummary; - let loadMonitorDetails: any; let monitorDetails: MonitorDetails; beforeEach(() => { @@ -47,16 +45,11 @@ describe('MonitorListDrawer component', () => { 'Get https://expired.badssl.com: x509: certificate has expired or is not yet valid', }, }; - loadMonitorDetails = () => null; }); it('renders nothing when no summary data is present', () => { const component = shallowWithRouter( - + ); expect(component).toEqual({}); }); @@ -64,22 +57,14 @@ describe('MonitorListDrawer component', () => { it('renders nothing when no check data is present', () => { delete summary.state.checks; const component = shallowWithRouter( - + ); expect(component).toEqual({}); }); it('renders a MonitorListDrawer when there is only one check', () => { const component = shallowWithRouter( - + ); expect(component).toMatchSnapshot(); }); @@ -110,11 +95,7 @@ describe('MonitorListDrawer component', () => { ]; summary.state.checks = checks; const component = shallowWithRouter( - + ); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/index.ts b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/index.ts index 73fb07db60de8..2933a71c2240b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/index.ts +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/index.ts @@ -4,5 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ -export { MonitorListDrawer } from './monitor_list_drawer'; export { LocationLink } from './location_link'; +export { MonitorListActionsPopoverComponent } from './monitor_list_actions_popover'; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/integration_group.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_group.tsx similarity index 95% rename from x-pack/legacy/plugins/uptime/public/components/functional/integration_group.tsx rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_group.tsx index da66235e37f1a..34bff58a3e2d9 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/integration_group.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_group.tsx @@ -5,7 +5,7 @@ */ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import React from 'react'; +import React, { useContext } from 'react'; import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -18,32 +18,29 @@ import { getLoggingContainerHref, getLoggingIpHref, getLoggingKubernetesHref, -} from '../../lib/helper'; -import { MonitorSummary } from '../../../common/graphql/types'; +} from '../../../../lib/helper'; +import { MonitorSummary } from '../../../../../common/graphql/types'; +import { UptimeSettingsContext } from '../../../../contexts'; interface IntegrationGroupProps { - basePath: string; - dateRangeStart: string; - dateRangeEnd: string; - isApmAvailable: boolean; - isInfraAvailable: boolean; - isLogsAvailable: boolean; summary: MonitorSummary; } -export const IntegrationGroup = ({ - basePath, - dateRangeStart, - dateRangeEnd, - isApmAvailable, - isInfraAvailable, - isLogsAvailable, - summary, -}: IntegrationGroupProps) => { +export const IntegrationGroup = ({ summary }: IntegrationGroupProps) => { + const { + basePath, + dateRangeStart, + dateRangeEnd, + isApmAvailable, + isInfraAvailable, + isLogsAvailable, + } = useContext(UptimeSettingsContext); + const domain = get(summary, 'state.url.domain', ''); const podUid = get(summary, 'state.checks[0].kubernetes.pod.uid', undefined); const containerId = get(summary, 'state.checks[0].container.id', undefined); const ip = get(summary, 'state.checks[0].monitor.ip', undefined); + return isApmAvailable || isInfraAvailable || isLogsAvailable ? ( {isApmAvailable ? ( diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/integration_link.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_link.tsx similarity index 100% rename from x-pack/legacy/plugins/uptime/public/components/functional/integration_link.tsx rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_link.tsx index a545cd7c42927..4b4c2003931a3 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/integration_link.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/integration_link.tsx @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText, EuiToolTip } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText, EuiToolTip } from '@elastic/eui'; interface IntegrationLinkProps { ariaLabel: string; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_actions_popover.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_actions_popover.tsx similarity index 58% rename from x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_actions_popover.tsx rename to x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_actions_popover.tsx index af06761f50c83..6b946baa8d403 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_actions_popover.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_actions_popover.tsx @@ -4,17 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiPopover, EuiButton } from '@elastic/eui'; -import React, { useContext } from 'react'; -import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; -import { connect } from 'react-redux'; -import { MonitorSummary } from '../../../../common/graphql/types'; -import { IntegrationGroup } from '../integration_group'; -import { UptimeSettingsContext } from '../../../contexts'; -import { isIntegrationsPopupOpen } from '../../../state/selectors'; -import { AppState } from '../../../state'; -import { toggleIntegrationsPopover, PopoverState } from '../../../state/actions'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { EuiPopover, EuiButton } from '@elastic/eui'; +import { IntegrationGroup } from './integration_group'; +import { MonitorSummary } from '../../../../../common/graphql/types'; +import { toggleIntegrationsPopover, PopoverState } from '../../../../state/actions'; interface MonitorListActionsPopoverProps { summary: MonitorSummary; @@ -22,20 +18,12 @@ interface MonitorListActionsPopoverProps { togglePopoverIsVisible: typeof toggleIntegrationsPopover; } -const MonitorListActionsPopoverComponent = ({ +export const MonitorListActionsPopoverComponent = ({ summary, popoverState, togglePopoverIsVisible, }: MonitorListActionsPopoverProps) => { const popoverId = `${summary.monitor_id}_popover`; - const { - basePath, - dateRangeStart, - dateRangeEnd, - isApmAvailable, - isInfraAvailable, - isLogsAvailable, - } = useContext(UptimeSettingsContext); const monitorUrl: string | undefined = get(summary, 'state.url.full', undefined); const isPopoverOpen: boolean = @@ -64,30 +52,7 @@ const MonitorListActionsPopoverComponent = ({ id={popoverId} isOpen={isPopoverOpen} > - + ); }; - -const mapStateToProps = (state: AppState) => ({ - popoverState: isIntegrationsPopupOpen(state), -}); - -const mapDispatchToProps = (dispatch: any) => ({ - togglePopoverIsVisible: (popoverState: PopoverState) => { - return dispatch(toggleIntegrationsPopover(popoverState)); - }, -}); - -export const MonitorListActionsPopover = connect( - mapStateToProps, - mapDispatchToProps -)(MonitorListActionsPopoverComponent); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx index 35b649fa35795..8383596ccc346 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx @@ -4,20 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; -import { EuiLink, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'; +import React from 'react'; import styled from 'styled-components'; -import { connect } from 'react-redux'; +import { EuiLink, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'; import { MonitorSummary } from '../../../../../common/graphql/types'; -import { AppState } from '../../../../state'; -import { fetchMonitorDetails } from '../../../../state/actions/monitor'; import { MostRecentError } from './most_recent_error'; -import { getMonitorDetails } from '../../../../state/selectors'; import { MonitorStatusList } from './monitor_status_list'; import { MonitorDetails } from '../../../../../common/runtime_types'; -import { useUrlParams } from '../../../../hooks'; -import { MonitorDetailsActionPayload } from '../../../../state/actions/types'; -import { MonitorListActionsPopover } from '../monitor_list_actions_popover'; +import { MonitorListActionsPopover } from '../../../connected'; const ContainerDiv = styled.div` padding: 10px; @@ -34,34 +28,13 @@ interface MonitorListDrawerProps { * Monitor details to be fetched from rest api using monitorId */ monitorDetails: MonitorDetails; - - /** - * Redux action to trigger , loading monitor details - */ - loadMonitorDetails: typeof fetchMonitorDetails; } /** * The elements shown when the user expands the monitor list rows. */ -export function MonitorListDrawerComponent({ - summary, - loadMonitorDetails, - monitorDetails, -}: MonitorListDrawerProps) { - const monitorId = summary?.monitor_id; - const [getUrlParams] = useUrlParams(); - const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams(); - - useEffect(() => { - loadMonitorDetails({ - dateStart, - dateEnd, - monitorId, - }); - }, [dateStart, dateEnd, monitorId, loadMonitorDetails]); - +export function MonitorListDrawerComponent({ summary, monitorDetails }: MonitorListDrawerProps) { const monitorUrl = summary?.state?.url?.full || ''; return summary && summary.state.checks ? ( @@ -91,17 +64,3 @@ export function MonitorListDrawerComponent({ ) : null; } - -const mapStateToProps = (state: AppState, { summary }: any) => ({ - monitorDetails: getMonitorDetails(state, summary), -}); - -const mapDispatchToProps = (dispatch: any) => ({ - loadMonitorDetails: (actionPayload: MonitorDetailsActionPayload) => - dispatch(fetchMonitorDetails(actionPayload)), -}); - -export const MonitorListDrawer = connect( - mapStateToProps, - mapDispatchToProps -)(MonitorListDrawerComponent); diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap index c9af85bc10b6d..fff947bd96024 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap @@ -156,6 +156,7 @@ exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` "title": "heartbeat-8*", } } + setEsKueryFilters={[MockFunction]} /> `; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx index a44660a64d549..365e96788bbbf 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx @@ -97,7 +97,11 @@ describe('MonitorPage', () => { it('shallow renders expected elements for valid props', () => { expect( shallowWithRouter( - + ) ).toMatchSnapshot(); }); From ecf1ee395266c1010a1feabcb22609a76289fd50 Mon Sep 17 00:00:00 2001 From: shahzad Date: Wed, 12 Feb 2020 21:40:11 +0100 Subject: [PATCH 4/6] comment --- x-pack/legacy/plugins/uptime/public/uptime_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index dbde9f8b6a8c0..8861360cfccba 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx @@ -100,7 +100,7 @@ const Application = (props: UptimeAppProps) => {
- // @ts-ignore we need to update the type of this prop + {/* @ts-ignore we need to update the type of this prop*/}
From 2e6db8422d0f9ef321a2847e630932422c48beef Mon Sep 17 00:00:00 2001 From: shahzad Date: Thu, 13 Feb 2020 12:52:26 +0100 Subject: [PATCH 5/6] update type --- .../functional/kuery_bar/kuery_bar.tsx | 4 ++-- .../public/lib/helper/render_with_router.tsx | 21 ------------------- .../public/pages/__tests__/overview.test.tsx | 1 + .../plugins/uptime/public/pages/overview.tsx | 4 ++-- .../legacy/plugins/uptime/public/routes.tsx | 4 ++-- .../plugins/uptime/public/uptime_app.tsx | 1 - 6 files changed, 7 insertions(+), 28 deletions(-) delete mode 100644 x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx index b1eb3f38097b2..496e8d898df3c 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx @@ -15,7 +15,7 @@ import { esKuery, IIndexPattern, QuerySuggestion, - DataPublicPluginStart, + DataPublicPluginSetup, } from '../../../../../../../../src/plugins/data/public'; const Container = styled.div` @@ -33,7 +33,7 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) { } interface Props { - autocomplete: DataPublicPluginStart['autocomplete']; + autocomplete: DataPublicPluginSetup['autocomplete']; loadIndexPattern: any; indexPattern: any; } diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx b/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx deleted file mode 100644 index 5cd9ec23a3587..0000000000000 --- a/x-pack/legacy/plugins/uptime/public/lib/helper/render_with_router.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; - -import { Router } from 'react-router-dom'; -import { MemoryHistory } from 'history/createMemoryHistory'; -import { createMemoryHistory } from 'history'; - -export const renderWithRouter = (Component: any, customHistory?: MemoryHistory) => { - if (customHistory) { - return {Component}; - } - const history = createMemoryHistory(); - history.location.key = 'TestKeyForTesting'; - - return {Component}; -}; diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx index 365e96788bbbf..86713c606c1bb 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/overview.test.tsx @@ -92,6 +92,7 @@ describe('MonitorPage', () => { getQuerySuggestions: jest.fn(), hasQuerySuggestions: () => true, getValueSuggestions: jest.fn(), + addQuerySuggestionProvider: jest.fn(), }; it('shallow renders expected elements for valid props', () => { diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index ae7457e835c94..5360d66f87e99 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx @@ -16,13 +16,13 @@ import { import { useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks'; import { stringifyUrlParams } from '../lib/helper/stringify_url_params'; import { useTrackPageview } from '../../../infra/public'; -import { DataPublicPluginStart, IIndexPattern } from '../../../../../../src/plugins/data/public'; +import { DataPublicPluginSetup, IIndexPattern } from '../../../../../../src/plugins/data/public'; import { UptimeThemeContext } from '../contexts'; import { FilterGroup, KueryBar } from '../components/connected'; import { useUpdateKueryString } from '../hooks'; interface OverviewPageProps { - autocomplete: DataPublicPluginStart['autocomplete']; + autocomplete: DataPublicPluginSetup['autocomplete']; indexPattern: IIndexPattern; setEsKueryFilters: (esFilters: string) => void; } diff --git a/x-pack/legacy/plugins/uptime/public/routes.tsx b/x-pack/legacy/plugins/uptime/public/routes.tsx index 0f726d89e0d28..83be45083b645 100644 --- a/x-pack/legacy/plugins/uptime/public/routes.tsx +++ b/x-pack/legacy/plugins/uptime/public/routes.tsx @@ -6,13 +6,13 @@ import React, { FC } from 'react'; import { Route, Switch } from 'react-router-dom'; -import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; +import { DataPublicPluginSetup } from '../../../../../src/plugins/data/public'; import { OverviewPage } from './components/connected/pages/overview_container'; import { MONITOR_ROUTE, OVERVIEW_ROUTE } from '../common/constants'; import { MonitorPage, NotFoundPage } from './pages'; interface RouterProps { - autocomplete: DataPublicPluginStart['autocomplete']; + autocomplete: DataPublicPluginSetup['autocomplete']; } export const PageRouter: FC = ({ autocomplete }) => ( diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 8861360cfccba..db34566d6c148 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx @@ -100,7 +100,6 @@ const Application = (props: UptimeAppProps) => {
- {/* @ts-ignore we need to update the type of this prop*/}
From 2f1f47d4886b88cdbbfc8c35c76b3be821f26fc5 Mon Sep 17 00:00:00 2001 From: shahzad Date: Thu, 13 Feb 2020 12:56:01 +0100 Subject: [PATCH 6/6] type fix --- .../__tests__/integration_group.test.tsx | 36 ++----------------- .../__snapshots__/overview.test.tsx.snap | 1 + 2 files changed, 4 insertions(+), 33 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_group.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_group.test.tsx index a767d0db8bccd..723f8f9f4430a 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_group.test.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_group.test.tsx @@ -24,47 +24,17 @@ describe('IntegrationGroup', () => { }); it('will not display APM links when APM is unavailable', () => { - const component = shallowWithIntl( - - ); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); it('will not display infra links when infra is unavailable', () => { - const component = shallowWithIntl( - - ); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); it('will not display logging links when logging is unavailable', () => { - const component = shallowWithIntl( - - ); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap index fff947bd96024..71b3fb5c7146a 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap @@ -54,6 +54,7 @@ exports[`MonitorPage shallow renders expected elements for valid props 1`] = `