diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_list.test.tsx.snap
deleted file mode 100644
index 1b5562cdd87a..000000000000
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_list.test.tsx.snap
+++ /dev/null
@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonitorStatusList component renders checks 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- ,
- }
- }
- />
-
-
-
-`;
-
-exports[`MonitorStatusList component renders null in place of child status with missing ip 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- ,
- }
- }
- />
-
-
-
-`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_row.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_row.test.tsx.snap
deleted file mode 100644
index 9cf6367b3b4a..000000000000
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_status_row.test.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonitorStatusRow component renders status row when status is down 1`] = `
-
-
-
- Berlin, Islamabad, London
-
-
-`;
-
-exports[`MonitorStatusRow component renders status row when status is up 1`] = `
-
-
-
- Berlin, Islamabad, London
-
-
-`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
index 49aff79cccea..8790975459dc 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
@@ -4,11 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { shallowWithIntl } from '@kbn/test/jest';
import React from 'react';
import { MonitorStatusList } from './monitor_status_list';
import { Ping } from '../../../../../common/runtime_types';
import { mockMoment } from '../../../../lib/helper/test_helpers';
+import { render } from '../../../../lib/helper/rtl_helpers';
describe('MonitorStatusList component', () => {
let pings: Ping[];
@@ -34,51 +34,6 @@ describe('MonitorStatusList component', () => {
},
timestamp: '1570538236414',
},
- {
- docId: '2',
- monitor: {
- ip: '151.101.194.217',
- name: 'elastic',
- status: 'up',
- id: 'myMonitor',
- type: 'icmp',
- duration: { us: 123 },
- },
- observer: {
- geo: {},
- },
- timestamp: '1570538236414',
- },
- {
- docId: '3',
- monitor: {
- ip: '151.101.2.217',
- name: 'elastic',
- status: 'up',
- id: 'myMonitor',
- type: 'icmp',
- duration: { us: 123 },
- },
- observer: {
- geo: {},
- },
- timestamp: '1570538236414',
- },
- {
- docId: '4',
- monitor: {
- ip: '151.101.66.217',
- name: 'elastic',
- status: 'up',
- id: 'myMonitor',
- type: 'icmp',
- duration: { us: 123 },
- },
- observer: {
- geo: {},
- },
- timestamp: '1570538236414',
- },
{
docId: '4',
monitor: {
@@ -95,60 +50,168 @@ describe('MonitorStatusList component', () => {
timestamp: '1570538236414',
},
{
- docId: '5',
+ docId: '8',
monitor: {
- ip: '2a04:4e42:400::729',
- name: 'elastic',
- status: 'down',
- id: 'myMonitor',
+ ip: '8c94:2b92::132',
+ name: 'upMonitor',
+ status: 'up',
+ id: 'myUpMonitor',
type: 'icmp',
- duration: { us: 123 },
+ duration: { us: 234 },
},
observer: {
- geo: {},
+ geo: {
+ name: 'fairbanks',
+ },
},
- timestamp: '1570538236414',
- },
- {
- docId: '6',
- monitor: {
- ip: '2a04:4e42:600::729',
- name: 'elastic',
- status: 'down',
- id: 'myMonitor',
- type: 'icmp',
- duration: { us: 123 },
- },
- observer: {
- geo: {},
- },
- timestamp: '1570538236414',
- },
- {
- docId: '5',
- monitor: {
- ip: '2a04:4e42::729',
- name: 'elastic',
- status: 'down',
- id: 'myMonitor',
- type: 'icmp',
- duration: { us: 123 },
- },
- observer: {
- geo: {},
- },
- timestamp: '1570538236414',
+ timestamp: '1570538235890',
},
];
});
- it('renders checks', () => {
- const component = shallowWithIntl();
- expect(component).toMatchSnapshot();
+ it.each(['up', 'down'])(
+ 'renders call out for monitor location if monitors have no location',
+ (status) => {
+ const { getByRole, getByText } = render(
+ {
+ // test only up, only down
+ ping.monitor.status = status;
+ return ping;
+ })}
+ />
+ );
+
+ getByText('Some heartbeat instances do not have a location defined.', {
+ // contains other elements/text
+ exact: false,
+ });
+ const docsLink = getByRole('link');
+ expect(docsLink.getAttribute('href')).toContain('https://www.elastic.co');
+ }
+ );
+
+ it('does not render call out for monitor location if all monitors have location', () => {
+ const { queryByRole, queryByText } = render(
+ ({
+ ...ping,
+ ...{ observer: { geo: { name: 'test-name' } } },
+ }))}
+ />
+ );
+
+ expect(
+ queryByText('Some heartbeat instances do not have a location defined.', { exact: false })
+ ).toBeNull();
+ expect(queryByRole('link')).toBeNull();
});
- it('renders null in place of child status with missing ip', () => {
- const component = shallowWithIntl();
- expect(component).toMatchSnapshot();
+ it.each([
+ [
+ 'up',
+ 'Up',
+ 'A list of locations with "up" status when last checked.',
+ 'Down',
+ 'A list of locations with "down" status when last checked.',
+ ],
+ [
+ 'down',
+ 'Down',
+ 'A list of locations with "down" status when last checked.',
+ 'Up',
+ 'A list of locations with "up" status when last checked.',
+ ],
+ ])(
+ 'renders only up badge when there are no down checks',
+ (
+ statusToFilter,
+ statusText,
+ expectedLabel,
+ expectedMissingStatusText,
+ expectedMissingLabel
+ ) => {
+ const { getByText, getByLabelText, queryByText, queryByLabelText } = render(
+ status === statusToFilter)}
+ />
+ );
+ expect(getByText(statusText));
+ expect(getByLabelText(expectedLabel));
+ expect(queryByText(expectedMissingStatusText)).toBeNull();
+ expect(queryByLabelText(expectedMissingLabel)).toBeNull();
+ }
+ );
+
+ it('displays badges for up and down locations when the results are mixed', () => {
+ const { getByText, getByLabelText } = render();
+ expect(getByText('Up'));
+ expect(getByLabelText('A list of locations with "up" status when last checked.'));
+ expect(getByText('fairbanks'));
+ expect(getByText('Down'));
+ expect(getByLabelText('A list of locations with "down" status when last checked.'));
+ expect(getByText('Unnamed-location'));
+ });
+
+ it('displays a location as "down" if any summary checks are down', () => {
+ const newlyUpPings = [
+ {
+ docId: '100',
+ monitor: {
+ ip: '8c94:2b92::132',
+ name: 'monitor',
+ status: 'down',
+ id: 'myMonitor',
+ type: 'icmp',
+ duration: { us: 234 },
+ },
+ observer: {
+ geo: {
+ name: 'fairbanks',
+ },
+ },
+ timestamp: '1570538235890',
+ },
+ {
+ docId: '101',
+ monitor: {
+ ip: '8c94:2b92::132',
+ name: 'monitor',
+ status: 'down',
+ id: 'myMonitor',
+ type: 'icmp',
+ duration: { us: 234 },
+ },
+ observer: {
+ geo: {
+ name: 'fairbanks',
+ },
+ },
+ timestamp: '1570538236890',
+ },
+ {
+ docId: '101',
+ monitor: {
+ ip: '8c94:2b92::132',
+ name: 'monitor',
+ status: 'up',
+ id: 'myMonitor',
+ type: 'icmp',
+ duration: { us: 234 },
+ },
+ observer: {
+ geo: {
+ name: 'fairbanks',
+ },
+ },
+ timestamp: '1570538237890',
+ },
+ ];
+ const { getByText, getByLabelText } = render();
+ expect(getByText('Down'));
+ const locationContainer = getByLabelText(
+ 'A list of locations with "down" status when last checked.'
+ );
+ expect(locationContainer.innerHTML).toBe('fairbanks');
});
});
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.tsx
index a8b8307929b6..9f2eb753cd1b 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.tsx
@@ -40,12 +40,16 @@ export const MonitorStatusList = ({ summaryPings }: MonitorStatusListProps) => {
return (
<>
-
-
-
-
-
-
+ {downChecks.size > 0 && (
+
+
+
+ )}
+ {absUpChecks.size > 0 && (
+
+
+
+ )}
{(downChecks.has(UNNAMED_LOCATION) || upChecks.has(UNNAMED_LOCATION)) && (
<>
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.test.tsx
index f8fa2d2b4f94..a495cd4c71aa 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.test.tsx
@@ -4,28 +4,27 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { shallowWithIntl } from '@kbn/test/jest';
import React from 'react';
+import { render } from '../../../../lib/helper/rtl_helpers';
import { MonitorStatusRow } from './monitor_status_row';
describe('MonitorStatusRow component', () => {
- let locationNames: Set;
+ it.each(['Up'])('renders status row when status is up', (expectedStatus) => {
+ const locationNames = new Set(['Berlin', 'Islamabad', 'London']);
+ const { getByLabelText } = render(
+
+ );
- beforeEach(() => {
- locationNames = new Set(['Berlin', 'Islamabad', 'London']);
+ const locationElement = getByLabelText(
+ `A list of locations with "${expectedStatus}" status when last checked.`
+ );
+
+ expect(locationElement.innerHTML).toBe('Berlin, Islamabad, London');
});
- it('renders status row when status is up', () => {
- const component = shallowWithIntl(
-
- );
- expect(component).toMatchSnapshot();
- });
+ it('renders an empty set string', () => {
+ const { getByText } = render();
- it('renders status row when status is down', () => {
- const component = shallowWithIntl(
-
- );
- expect(component).toMatchSnapshot();
+ expect(getByText('--'));
});
});
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.tsx
index 5bcb4ef97c3a..775fa3547109 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_row.tsx
@@ -5,6 +5,7 @@
*/
import React from 'react';
+import { i18n } from '@kbn/i18n';
import { EuiBadge, EuiSpacer } from '@elastic/eui';
import { UNNAMED_LOCATION, STATUS } from '../../../../../common/constants';
import { getHealthMessage } from '../columns/monitor_status_column';
@@ -35,7 +36,14 @@ export const MonitorStatusRow = ({ locationNames, status }: MonitorStatusRowProp
{getHealthMessage(status)}
- {locations || '--'}
+
+ {locations || '--'}
+
);