From fe7fe41bcce14d903496ef0ac2833e6284eaa240 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Mon, 12 Apr 2021 16:15:58 -0400 Subject: [PATCH 1/2] add Beta disclaimer to Uptime synthetics monitor details title --- .../components/monitor/monitor_title.test.tsx | 112 ++++++++++++++++-- .../components/monitor/monitor_title.tsx | 49 +++++--- 2 files changed, 135 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx index dabc0021898eb..5167584347c3d 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx @@ -7,11 +7,11 @@ import React from 'react'; import moment from 'moment'; +import { screen } from '@testing-library/react'; +import { render } from '../../lib/helper/rtl_helpers'; import * as reactRouterDom from 'react-router-dom'; import { Ping } from '../../../common/runtime_types'; import { MonitorPageTitle } from './monitor_title'; -import { renderWithRouter } from '../../lib'; -import { mockReduxHooks } from '../../lib/helper/test_helpers'; jest.mock('react-router-dom', () => { const originalModule = jest.requireActual('react-router-dom'); @@ -48,6 +48,54 @@ describe('MonitorTitle component', () => { }, }; + const defaultTCPMonitorStatus: Ping = { + docId: 'few213kl', + timestamp: moment(new Date()).subtract(15, 'm').toString(), + monitor: { + duration: { + us: 1234567, + }, + id: 'tcp', + status: 'up', + type: 'tcp', + }, + url: { + full: 'https://www.elastic.co/', + }, + }; + + const defaultICMPMonitorStatus: Ping = { + docId: 'few213kl', + timestamp: moment(new Date()).subtract(15, 'm').toString(), + monitor: { + duration: { + us: 1234567, + }, + id: 'icmp', + status: 'up', + type: 'icmp', + }, + url: { + full: 'https://www.elastic.co/', + }, + }; + + const defaultBrowserMonitorStatus: Ping = { + docId: 'few213kl', + timestamp: moment(new Date()).subtract(15, 'm').toString(), + monitor: { + duration: { + us: 1234567, + }, + id: 'browser', + status: 'up', + type: 'browser', + }, + url: { + full: 'https://www.elastic.co/', + }, + }; + const monitorStatusWithName: Ping = { ...defaultMonitorStatus, monitor: { @@ -58,25 +106,67 @@ describe('MonitorTitle component', () => { beforeEach(() => { mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } }); - mockReduxHooks(defaultMonitorStatus); }); it('renders the monitor heading and EnableMonitorAlert toggle', () => { - mockReduxHooks(monitorStatusWithName); - const component = renderWithRouter(); - expect(component.find('h1').text()).toBe(monitorName); - expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); + render(, { + state: { monitorStatus: { status: monitorStatusWithName, loading: false } }, + }); + expect(screen.getByRole('heading', { level: 1, name: monitorName })).toBeInTheDocument(); + expect(screen.getByTestId('uptimeDisplayDefineConnector')).toBeInTheDocument(); }); it('renders the user provided monitorId when the name is not present', () => { mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } }); - const component = renderWithRouter(); - expect(component.find('h1').text()).toBe(defaultMonitorId); + render(, { + state: { monitorStatus: { status: defaultMonitorStatus, loading: false } }, + }); + expect(screen.getByRole('heading', { level: 1, name: defaultMonitorId })).toBeInTheDocument(); }); it('renders the url when the monitorId is auto generated and the monitor name is not present', () => { mockReactRouterDomHooks({ useParamsResponse: { monitorId: autoGeneratedMonitorIdEncoded } }); - const component = renderWithRouter(); - expect(component.find('h1').text()).toBe(defaultMonitorStatus.url?.full); + render(, { + state: { monitorStatus: { status: defaultMonitorStatus, loading: false } }, + }); + expect( + screen.getByRole('heading', { level: 1, name: defaultMonitorStatus.url?.full }) + ).toBeInTheDocument(); + }); + + it('renders beta disclaimer for synthetics monitors', () => { + render(, { + state: { monitorStatus: { status: defaultBrowserMonitorStatus, loading: false } }, + }); + const betaLink = screen.getByRole('link', { + name: 'See more External link', + }) as HTMLAnchorElement; + expect(betaLink).toBeInTheDocument(); + expect(betaLink.href).toBe('https://www.elastic.co/what-is/synthetic-monitoring'); + expect(screen.getByText('Beta')).toBeInTheDocument(); + }); + + it('does not render beta disclaimer for http', () => { + render(, { + state: { monitorStatus: { status: defaultMonitorStatus, loading: false } }, + }); + expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); + }); + + it('does not render beta disclaimer for tcp', () => { + render(, { + state: { monitorStatus: { status: defaultTCPMonitorStatus, loading: false } }, + }); + expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); + }); + + it('does not render beta disclaimer for icmp', () => { + render(, { + state: { monitorStatus: { status: defaultICMPMonitorStatus, loading: false } }, + }); + expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index a0e4ea507909f..064817e803a0f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -5,7 +5,8 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiText, EuiLink } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { useSelector } from 'react-redux'; import { useMonitorId } from '../../hooks'; @@ -38,22 +39,40 @@ export const MonitorPageTitle: React.FC = () => { const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); + const isBrowser = selectedMonitor?.monitor?.type === 'browser'; + useBreadcrumbs([{ text: nameOrId }]); return ( - - - -

{nameOrId}

- - - - - - - + <> + + + +

{nameOrId}

+ + + + + + + + {isBrowser && ( + + {' '} + + + + + )} + ); }; From 164363c17ddbb3a74577945c2ae87f2ee6a6a35a Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 20 Apr 2021 10:22:03 -0400 Subject: [PATCH 2/2] update beta disclaimer to use EUIBadge --- .../components/monitor/monitor_title.test.tsx | 13 +-- .../components/monitor/monitor_title.tsx | 80 +++++++++++++++---- 2 files changed, 72 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx index 5167584347c3d..4bf4e9193de7e 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx @@ -143,14 +143,15 @@ describe('MonitorTitle component', () => { }) as HTMLAnchorElement; expect(betaLink).toBeInTheDocument(); expect(betaLink.href).toBe('https://www.elastic.co/what-is/synthetic-monitoring'); - expect(screen.getByText('Beta')).toBeInTheDocument(); + expect(screen.getByText('Browser (BETA)')).toBeInTheDocument(); }); it('does not render beta disclaimer for http', () => { render(, { state: { monitorStatus: { status: defaultMonitorStatus, loading: false } }, }); - expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.getByText('HTTP ping')).toBeInTheDocument(); + expect(screen.queryByText(/BETA/)).not.toBeInTheDocument(); expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); }); @@ -158,15 +159,17 @@ describe('MonitorTitle component', () => { render(, { state: { monitorStatus: { status: defaultTCPMonitorStatus, loading: false } }, }); - expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.getByText('TCP ping')).toBeInTheDocument(); + expect(screen.queryByText(/BETA/)).not.toBeInTheDocument(); expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); }); - it('does not render beta disclaimer for icmp', () => { + it('renders badge and does not render beta disclaimer for icmp', () => { render(, { state: { monitorStatus: { status: defaultICMPMonitorStatus, loading: false } }, }); - expect(screen.queryByText('Beta')).not.toBeInTheDocument(); + expect(screen.getByText('ICMP ping')).toBeInTheDocument(); + expect(screen.queryByText(/BETA/)).not.toBeInTheDocument(); expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index 064817e803a0f..d25d7eca333cf 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiText, EuiLink } from '@elastic/eui'; +import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { useSelector } from 'react-redux'; @@ -39,10 +39,46 @@ export const MonitorPageTitle: React.FC = () => { const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); - const isBrowser = selectedMonitor?.monitor?.type === 'browser'; + const type = selectedMonitor?.monitor?.type; + const isBrowser = type === 'browser'; useBreadcrumbs([{ text: nameOrId }]); + const renderMonitorType = (monitorType: string) => { + switch (monitorType) { + case 'http': + return ( + + ); + case 'tcp': + return ( + + ); + case 'icmp': + return ( + + ); + case 'browser': + return ( + + ); + default: + return ''; + } + }; + return ( <> @@ -59,20 +95,32 @@ export const MonitorPageTitle: React.FC = () => { /> - {isBrowser && ( - - {' '} - - - - - )} + + + + {type && ( + + {renderMonitorType(type)}{' '} + {isBrowser && ( + + )} + + )} + + {isBrowser && ( + + + + + + )} + ); };