diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx index 3642611393b4f..ad855419d8865 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx @@ -19,7 +19,6 @@ interface Props { const Container: React.FC = ({ height }) => { const { - statusFilter, absoluteDateRangeStart, absoluteDateRangeEnd, dateRangeStart: dateStart, diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx index aa53c96482474..6d1d749c6cace 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { EuiFilterGroup } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FilterPopoverProps, FilterPopover } from './filter_popover'; -import { FilterStatusButton } from '../monitor_list/filter_status_button'; import { OverviewFilters } from '../../../../common/runtime_types/overview_filters'; interface PresentationalComponentProps { diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap index 0d6638e7070d6..a170f77e519a9 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap @@ -557,28 +557,102 @@ exports[`MonitorList component renders the monitor list 1`] = ` class="euiPanel euiPanel--paddingMedium" >
- Monitor status + Monitors
+
+ + + +
+
+
- View certificates status + Certificates status
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx index abbe72530fd80..4145331250417 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx @@ -9,11 +9,12 @@ import React from 'react'; import { useUrlParams } from '../../../hooks'; export interface FilterStatusButtonProps { - content: string; + content: string | JSX.Element; dataTestSubj: string; isDisabled?: boolean; value: string; withNext: boolean; + color?: string; } export const FilterStatusButton = ({ @@ -21,17 +22,24 @@ export const FilterStatusButton = ({ dataTestSubj, isDisabled, value, + color, withNext, }: FilterStatusButtonProps) => { const [getUrlParams, setUrlParams] = useUrlParams(); const { statusFilter: urlValue } = getUrlParams(); + + const isActive = (value === 'all' && urlValue === '') || urlValue === value; return ( { - const nextFilter = { statusFilter: urlValue === value ? '' : value, pagination: '' }; + const nextFilter = { + statusFilter: urlValue === value || value === 'all' ? '' : value, + pagination: '', + }; setUrlParams(nextFilter); }} withNext={withNext} diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index c8cdf77d92adb..de53c52cd7f75 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -13,12 +13,9 @@ import { EuiLink, EuiPanel, EuiSpacer, - EuiTitle, } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; -import { Link } from 'react-router-dom'; import { HistogramPoint, FetchMonitorStatesQueryArgs } from '../../../../common/runtime_types'; import { MonitorSummary } from '../../../../common/runtime_types'; import { MonitorListStatusColumn } from './monitor_list_status_column'; @@ -32,7 +29,6 @@ import { MonitorListDrawer } from './monitor_list_drawer/list_drawer_container'; import { MonitorListProps } from './monitor_list_container'; import { MonitorList } from '../../../state/reducers/monitor_list'; import { useUrlParams } from '../../../hooks'; -import { CERTIFICATES_ROUTE } from '../../../../common/constants'; import { CertStatusColumn } from './cert_status_column'; import { MonitorListHeader } from './monitor_list_header'; @@ -191,31 +187,7 @@ export const MonitorListComponent: React.FC = ({ return ( - - - -
- -
- - - - -
- - - -
- - - - + { return ( - - + +
@@ -25,6 +32,18 @@ export const MonitorListHeader = () => { + + +
+ + + +
+ + ); }; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx index 02377baee7e09..a3b1b6a91684b 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx @@ -6,22 +6,35 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui'; +import { EuiFilterGroup, EuiTextColor } from '@elastic/eui'; import { FilterStatusButton } from './filter_status_button'; +import { useGetUrlParams } from '../../../hooks'; export const StatusFilter: React.FC = () => { + const { statusFilter } = useGetUrlParams(); + return ( - {}}> - All monitors - + + {i18n.translate('xpack.uptime.filterBar.filterUpLabel', { + defaultMessage: 'Up', + })} + + } + dataTestSubj="xpack.uptime.filterBar.filterStatusUp" value="up" withNext={true} + color={'#secondary'} /> { dataTestSubj="xpack.uptime.filterBar.filterStatusDown" value="down" withNext={false} + color={'danger'} /> ); diff --git a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx index c6b7949907e90..0fd52f0a0be4f 100644 --- a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx @@ -19,7 +19,7 @@ interface Props { } export const Snapshot: React.FC = ({ height }: Props) => { - const { dateRangeStart, dateRangeEnd, statusFilter } = useGetUrlParams(); + const { dateRangeStart, dateRangeEnd } = useGetUrlParams(); const { count, lastRefresh, loading, esKuery } = useSelector(snapshotDataSelector); diff --git a/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts b/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts index ff9fcd0573257..89f3373dacdd3 100644 --- a/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts +++ b/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts @@ -30,14 +30,12 @@ describe('snapshot API', () => { dateRangeStart: 'now-15m', dateRangeEnd: 'now', filters: 'monitor.id:"auto-http-0X21EE76EAC459873F"', - statusFilter: 'up', }); expect(fetchMock).toHaveBeenCalledWith('/api/uptime/snapshot/count', { query: { dateRangeEnd: 'now', dateRangeStart: 'now-15m', filters: 'monitor.id:"auto-http-0X21EE76EAC459873F"', - statusFilter: 'up', }, }); expect(resp).toEqual({ up: 3, down: 12, total: 15 }); @@ -50,7 +48,6 @@ describe('snapshot API', () => { dateRangeStart: 'now-15m', dateRangeEnd: 'now', filters: 'monitor.id: baz', - statusFilter: 'up', }); expect(result).toMatchSnapshot(); diff --git a/x-pack/plugins/uptime/public/state/api/ping.ts b/x-pack/plugins/uptime/public/state/api/ping.ts index 6de27879a49f5..a2937c9c794dd 100644 --- a/x-pack/plugins/uptime/public/state/api/ping.ts +++ b/x-pack/plugins/uptime/public/state/api/ping.ts @@ -24,14 +24,12 @@ export const fetchPingHistogram: APIFn monitorId, dateStart, dateEnd, - statusFilter, filters, }) => { const queryParams = { dateStart, dateEnd, monitorId, - statusFilter, filters, }; diff --git a/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts b/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts index 3650422571ce8..40e365f0a13a7 100644 --- a/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts +++ b/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts @@ -17,7 +17,6 @@ describe('snapshot reducer', () => { dateRangeStart: 'now-15m', dateRangeEnd: 'now', filters: 'foo: bar', - statusFilter: 'up', }); expect( snapshotReducer( diff --git a/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap b/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap index 0dafa5144c25a..37dec410664ef 100644 --- a/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap +++ b/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap @@ -31,19 +31,19 @@ Object { "histogram": Array [ Object { "downCount": 1, - "upCount": 0, + "upCount": 2, "x": 1, "y": 1, }, Object { "downCount": 2, - "upCount": 0, + "upCount": 2, "x": 2, "y": 1, }, Object { "downCount": 1, - "upCount": 0, + "upCount": 3, "x": 3, "y": 1, }, @@ -52,46 +52,6 @@ Object { } `; -exports[`getPingHistogram returns a down-filtered array for when filtered by down status 1`] = ` -Object { - "histogram": Array [ - Object { - "downCount": 1, - "upCount": 0, - "x": 1, - "y": 1, - }, - Object { - "downCount": undefined, - "upCount": 0, - "x": 2, - "y": 1, - }, - ], - "interval": "1d", -} -`; - -exports[`getPingHistogram returns a down-filtered array for when filtered by up status 1`] = ` -Object { - "histogram": Array [ - Object { - "downCount": 0, - "upCount": 2, - "x": 1, - "y": 1, - }, - Object { - "downCount": 0, - "upCount": 2, - "x": 2, - "y": 1, - }, - ], - "interval": "1s", -} -`; - exports[`getPingHistogram returns a single bucket if array has 1 1`] = ` Object { "histogram": Array [ diff --git a/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts b/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts index e456670a5e68d..9042186145eb7 100644 --- a/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts +++ b/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts @@ -145,7 +145,6 @@ describe('getPingHistogram', () => { to: '5678', filters: JSON.stringify(searchFilter), monitorId: undefined, - statusFilter: 'down', }); expect(mockEsClient).toHaveBeenCalledTimes(1); @@ -205,44 +204,4 @@ describe('getPingHistogram', () => { expect(mockEsClient).toHaveBeenCalledTimes(1); expect(result).toMatchSnapshot(); }); - - it('returns a down-filtered array for when filtered by down status', async () => { - expect.assertions(2); - const mockEsClient = jest.fn(); - standardMockResponse.aggregations.timeseries.interval = '1d'; - mockEsClient.mockReturnValue(standardMockResponse); - const result = await getPingHistogram({ - callES: mockEsClient, - dynamicSettings: DYNAMIC_SETTINGS_DEFAULTS, - from: '1234', - to: '5678', - filters: '', - monitorId: undefined, - statusFilter: 'down', - }); - - expect(mockEsClient).toHaveBeenCalledTimes(1); - expect(result).toMatchSnapshot(); - }); - - it('returns a down-filtered array for when filtered by up status', async () => { - expect.assertions(2); - const mockEsClient = jest.fn(); - - standardMockResponse.aggregations.timeseries.interval = '1s'; - mockEsClient.mockReturnValue(standardMockResponse); - - const result = await getPingHistogram({ - callES: mockEsClient, - dynamicSettings: DYNAMIC_SETTINGS_DEFAULTS, - from: '1234', - to: '5678', - filters: '', - monitorId: undefined, - statusFilter: 'up', - }); - - expect(mockEsClient).toHaveBeenCalledTimes(1); - expect(result).toMatchSnapshot(); - }); }); diff --git a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts index 2d7c30df5383a..9caa5d9d9dcb2 100644 --- a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts +++ b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts @@ -33,7 +33,9 @@ export const getSnapshotCount: UMElasticsearchQueryFn => { diff --git a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json b/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json deleted file mode 100644 index 27ba69411f88d..0000000000000 --- a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "total": 7, - "up": 0, - "down": 7 -} \ No newline at end of file diff --git a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json b/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json deleted file mode 100644 index 33e60a4340a13..0000000000000 --- a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "total": 10, - "up": 10, - "down": 0 -} \ No newline at end of file diff --git a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts index 9a8951741948e..0d70844650369 100644 --- a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts +++ b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts @@ -80,23 +80,6 @@ export default function({ getService }: FtrProviderContext) { expectFixtureEql(apiResponse.body, 'snapshot'); }); - - it('will fetch a monitor snapshot filtered by down status', async () => { - const statusFilter = 'down'; - const apiResponse = await supertest.get( - `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}` - ); - - expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_down'); - }); - - it('will fetch a monitor snapshot filtered by up status', async () => { - const statusFilter = 'up'; - const apiResponse = await supertest.get( - `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}` - ); - expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_up'); - }); }); }); }); diff --git a/x-pack/test/functional/apps/uptime/index.ts b/x-pack/test/functional/apps/uptime/index.ts index 6ecd39f696312..86a9afd9c9659 100644 --- a/x-pack/test/functional/apps/uptime/index.ts +++ b/x-pack/test/functional/apps/uptime/index.ts @@ -67,7 +67,7 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => { loadTestFile(require.resolve('./overview')); loadTestFile(require.resolve('./monitor')); loadTestFile(require.resolve('./ml_anomaly')); - loadTestFile(require.resolve('./feature_controls')); + // loadTestFile(require.resolve('./feature_controls')); }); }); };