From d8b80901d7ea1b2f3ca333c9452f4962de720f3d Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 25 Sep 2023 12:50:57 +0200 Subject: [PATCH] [Uptime] Fixes monitor details overview (#166736) --- .../components/monitor/monitor_title.test.tsx | 33 +------- .../components/monitor/monitor_title.tsx | 83 ------------------- .../monitor_status.bar.test.tsx.snap | 75 ++++++++++++----- .../ssl_certificate.test.tsx.snap | 42 ++-------- .../status_bar/ssl_certificate.tsx | 13 ++- .../status_details/status_bar/status_bar.tsx | 68 ++++++++------- .../monitor/status_details/status_details.tsx | 25 +----- .../columns/define_connectors.test.tsx | 12 +-- .../columns/define_connectors.tsx | 44 ++-------- .../monitor_list/columns/enable_alert.tsx | 8 +- .../uptime/public/legacy_uptime/routes.tsx | 3 +- 11 files changed, 122 insertions(+), 284 deletions(-) diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.test.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.test.tsx index 3c98245760fcb..45b3c182084f6 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.test.tsx @@ -13,7 +13,7 @@ import { render } from '../../lib/helper/rtl_helpers'; import * as reactRouterDom from 'react-router-dom'; import { Ping } from '../../../../common/runtime_types'; -import { MonitorPageTitle, MonitorPageTitleContent } from './monitor_title'; +import { MonitorPageTitle } from './monitor_title'; jest.mock('react-router-dom', () => { const originalModule = jest.requireActual('react-router-dom'); @@ -51,23 +51,6 @@ describe('MonitorTitle component', () => { }, }; - const defaultBrowserMonitorStatus: Ping = { - docId: 'few213kl', - timestamp: moment(new Date()).subtract(15, 'm').toString(), - monitor: { - duration: { - us: 1234567, - }, - id: 'browser', - status: 'up', - type: 'browser', - check_group: 'test-group', - }, - url: { - full: 'https://www.elastic.co/', - }, - }; - const monitorStatusWithName: Ping = { ...defaultMonitorStatus, monitor: { @@ -84,14 +67,12 @@ describe('MonitorTitle component', () => { render( <> - , { state: { monitorStatus: { status: monitorStatusWithName, loading: false } }, } ); expect(screen.getByText(monitorName)); - expect(screen.getByRole('switch')).toBeInTheDocument(); }); it('renders the user provided monitorId when the name is not present', () => { @@ -114,16 +95,4 @@ describe('MonitorTitle component', () => { ); expect(screen.getByText(defaultMonitorStatus!.url!.full!)); }); - - it('renders beta disclaimer for synthetics monitors', () => { - render(, { - state: { monitorStatus: { status: defaultBrowserMonitorStatus, loading: false } }, - }); - const betaLink = screen.getByRole('link', { - name: 'See more External link (opens in a new tab or window)', - }) as HTMLAnchorElement; - expect(betaLink).toBeInTheDocument(); - expect(betaLink.href).toBe('https://www.elastic.co/what-is/synthetic-monitoring'); - expect(screen.getByText('Browser (BETA)')).toBeInTheDocument(); - }); }); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.tsx index a15b941e4e935..2a84d3acbf4ad 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/monitor_title.tsx @@ -5,13 +5,10 @@ * 2.0. */ -import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLink, EuiText } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { useSelector } from 'react-redux'; import { useMonitorId } from '../../hooks'; import { monitorStatusSelector } from '../../state/selectors'; -import { EnableMonitorAlert } from '../overview/monitor_list/columns/enable_alert'; import { Ping } from '../../../../common/runtime_types/ping'; import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; @@ -32,86 +29,6 @@ const getPageTitle = (monitorId: string, selectedMonitor: Ping | null) => { return monitorId; }; -export const MonitorPageTitleContent: React.FC = () => { - const monitorId = useMonitorId(); - const selectedMonitor = useSelector(monitorStatusSelector); - const type = selectedMonitor?.monitor?.type; - const isBrowser = type === 'browser'; - const renderMonitorType = (monitorType: string) => { - switch (monitorType) { - case 'http': - return ( - - ); - case 'tcp': - return ( - - ); - case 'icmp': - return ( - - ); - case 'browser': - return ( - - ); - default: - return ''; - } - }; - return ( - <> - - - - - - - - - {isBrowser && type && ( - - {renderMonitorType(type)}{' '} - - - )} - - {isBrowser && ( - - - - - - - - )} - - - ); -}; - export const MonitorPageTitle: React.FC = () => { const monitorId = useMonitorId(); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap index 5ebde1d72dd0d..77345c95164a6 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap @@ -12,58 +12,49 @@ Array [
, - .c0.c0.c0 { - width: 30%; - max-width: 250px; -} - -.c1.c1.c1 { - width: 70%; - overflow-wrap: anywhere; -} - -
Overall availability
0.00 %
Url
--
Monitor ID
Tags
+
+ Enable status alerts +
+
+
+
+
+
+ +
+
+
+
+
, ] `; diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap index d80ca3bb00376..1e50379a09553 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap @@ -2,32 +2,19 @@ exports[`SSL Certificate component renders 1`] = ` Array [ - .c0.c0.c0 { - width: 30%; - max-width: 250px; -} - -
TLS Certificate
, -
, .c0.c0.c0 { - width: 70%; - overflow-wrap: anywhere; -} - -.c1.c1.c1 { margin: 0 0 0 4px; display: inline-block; color: inherit; }

Expires in 2 months

@@ -57,26 +44,13 @@ Array [ exports[`SSL Certificate component renders null if invalid date 1`] = ` Array [ - .c0.c0.c0 { - width: 30%; - max-width: 250px; -} - -
TLS Certificate
, -
, - .c0.c0.c0 { - width: 70%; - overflow-wrap: anywhere; -} - -
{ return ( <> - + - - - - + + - + ); }; diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx index 50e4ca36dabc5..f122415d725c0 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_bar/status_bar.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import styled from 'styled-components'; import { EuiLink, EuiSpacer, @@ -16,6 +15,10 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; +import { useSelector } from 'react-redux'; +import { ENABLE_STATUS_ALERT } from '../../../overview/monitor_list/columns/translations'; +import { monitorStatusSelector } from '../../../../state/selectors'; +import { EnableMonitorAlert } from '../../../overview/monitor_list/columns/enable_alert'; import { MonitorSSLCertificate } from './ssl_certificate'; import * as labels from '../translations'; import { StatusByLocations } from './status_by_location'; @@ -31,20 +34,6 @@ import { formatAvailabilityValue } from '../availability_reporting/availability_ import { MonitorRedirects } from './monitor_redirects'; import { MonitorTags } from '../../../common/monitor_tags'; -export const MonListTitle = styled(EuiDescriptionListTitle)` - &&& { - width: 30%; - max-width: 250px; - } -`; - -export const MonListDescription = styled(EuiDescriptionListDescription)` - &&& { - width: 70%; - overflow-wrap: anywhere; - } -`; - export const renderMonitorType = (type: string | undefined) => { switch (type) { case 'http': @@ -77,24 +66,29 @@ export const MonitorStatusBar: React.FC = () => { const availability = (ups === 0 && downs === 0) || !ups ? 0 : (ups / (ups + downs)) * 100; + const selectedMonitor = useSelector(monitorStatusSelector); + return ( <>
- - {OverallAvailability} - + + {OverallAvailability} + - - {URL_LABEL} - + + {URL_LABEL} + {full ? ( { ) : ( '--' )} - - {MonitorIDLabel} - {monitorId} + + {MonitorIDLabel} + + {monitorId} + {monitorStatus?.monitor?.type && ( <> - {labels.typeLabel} - + + {labels.typeLabel} + + {renderMonitorType(monitorStatus?.monitor?.type)} - + )} - {TAGS_LABEL} - + {TAGS_LABEL} + - + {monitorStatus?.monitor?.project?.id && ( <> - {PROJECT_LABEL} - {monitorStatus?.monitor?.project.id} + {PROJECT_LABEL} + + {monitorStatus?.monitor?.project.id} + )} + {ENABLE_STATUS_ALERT} + {selectedMonitor && ( + + )} ); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_details.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_details.tsx index 0c9c347fc8c80..48196a75f37b5 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_details.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/status_details/status_details.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import React, { useContext, useEffect, useState } from 'react'; +import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import styled from 'styled-components'; import { LocationAvailability } from './location_availability/location_availability'; -import { UptimeRefreshContext } from '../../../contexts'; import { MonitorLocations } from '../../../../../common/runtime_types'; import { MonitorStatusBar } from './status_bar'; @@ -26,28 +25,6 @@ const WrapFlexItem = styled(EuiFlexItem)` `; export const MonitorStatusDetailsComponent = ({ monitorLocations }: MonitorStatusDetailsProps) => { - const { refreshApp } = useContext(UptimeRefreshContext); - - const [isTabActive] = useState(document.visibilityState); - const onTabActive = () => { - if (document.visibilityState === 'visible' && isTabActive === 'hidden') { - refreshApp(); - } - }; - - // Refreshing application state after Tab becomes active to render latest map state - // If application renders in when tab is not in focus it gives some unexpected behaviors - // Where map is not visible on change - useEffect(() => { - document.addEventListener('visibilitychange', onTabActive); - return () => { - document.removeEventListener('visibilitychange', onTabActive); - }; - - // we want this effect to execute exactly once after the component mounts - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return ( diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.test.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.test.tsx index aa257177970a1..29f0dd189594c 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.test.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.test.tsx @@ -21,21 +21,23 @@ describe('EnableAlertComponent', () => { fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector')); - expect(screen.queryByTestId('uptimeSettingsDefineConnector')).not.toBeInTheDocument(); + expect(screen.queryByTestId('uptimeSettingsDefineConnector')).toBeInTheDocument(); }); it('shows label when showLabel is true', () => { - render(); - expect(screen.getByText(ENABLE_STATUS_ALERT)).toBeInTheDocument(); + render(); + expect(screen.getByLabelText(ENABLE_STATUS_ALERT)).toBeInTheDocument(); }); it('shows helpText when showHelpText is true', () => { - render(); + render(); + fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector')); + expect(screen.getByText(/Define a default connector/)).toBeInTheDocument(); }); it('renders popover on click when showPopover is true', () => { - render(); + render(); fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector')); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.tsx index 0a6040249a663..4ee8cb1c67d89 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/define_connectors.tsx @@ -12,17 +12,7 @@ import { ReactRouterEuiLink } from '../../../common/react_router_helpers'; import { SETTINGS_ROUTE } from '../../../../../../common/constants'; import { ENABLE_STATUS_ALERT } from './translations'; -interface Props { - showPopover?: boolean; - showHelpText?: boolean; - showLabel?: boolean; -} - -export const DefineAlertConnectors = ({ - showPopover = false, - showHelpText = false, - showLabel = false, -}: Props) => { +export const DefineAlertConnectors = () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => setIsPopoverOpen((val) => !val); @@ -32,46 +22,22 @@ export const DefineAlertConnectors = ({ - - - - ), - }} - /> - ) : undefined - } - > + {}} + onChange={onButtonClick} checked={false} compressed={true} - disabled={!showPopover} data-test-subj={'uptimeDisplayDefineConnector'} /> } - isOpen={showPopover ? isPopoverOpen : false} + isOpen={isPopoverOpen} closePopover={closePopover} > diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/enable_alert.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/enable_alert.tsx index b52aacd5abb6e..e7ff83f5ebae1 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/enable_alert.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/enable_alert.tsx @@ -111,7 +111,7 @@ export const EnableMonitorAlert = ({ monitorId, selectedMonitor }: Props) => { compressed={!isMonitorPage} disabled={showSpinner} label={btnLabel} - showLabel={!!isMonitorPage} + showLabel={false} aria-label={btnLabel} onChange={onAlertClick} checked={!!hasAlert} @@ -126,10 +126,6 @@ export const EnableMonitorAlert = ({ monitorId, selectedMonitor }: Props) => {
) : ( - + ); }; diff --git a/x-pack/plugins/uptime/public/legacy_uptime/routes.tsx b/x-pack/plugins/uptime/public/legacy_uptime/routes.tsx index 43194e10735d6..269624a0c6dc0 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/routes.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/routes.tsx @@ -30,7 +30,7 @@ import { SyntheticsCheckStepsPageHeader, SyntheticsCheckStepsPageRightSideItem, } from './pages/synthetics/synthetics_checks'; -import { MonitorPageTitle, MonitorPageTitleContent } from './components/monitor/monitor_title'; +import { MonitorPageTitle } from './components/monitor/monitor_title'; import { UptimeDatePicker } from './components/common/uptime_date_picker'; import { CertRefreshBtn } from './components/certificates/cert_refresh_btn'; import { CertificateTitle } from './components/certificates/certificate_title'; @@ -69,7 +69,6 @@ const getRoutes = (): RouteProps[] => { component: MonitorPage, dataTestSubj: 'uptimeMonitorPage', pageHeader: { - children: , pageTitle: , rightSideItems: [], },