From 3b8ba626afd045999e89a6269469997cc8c0235e Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Tue, 16 Aug 2022 02:03:16 +0200 Subject: [PATCH 1/6] Move reusable translations up. --- .../monitor_list/columns/test_now_col.tsx | 42 +++---------------- .../overview/monitor_list/translations.ts | 32 ++++++++++++++ 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx index 425d881e0141e..17e8047ac64c7 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx @@ -6,12 +6,12 @@ */ import { EuiButtonIcon, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Ping } from '../../../../../../common/runtime_types'; import { testNowMonitorAction } from '../../../../state/actions'; import { testNowRunSelector, TestRunStats } from '../../../../state/reducers/test_now_runs'; +import * as labels from '../translations'; export const TestNowColumn = ({ monitorId, @@ -28,7 +28,7 @@ export const TestNowColumn = ({ if (selectedMonitor.monitor.fleet_managed) { return ( - + <>-- ); @@ -36,7 +36,7 @@ export const TestNowColumn = ({ if (!configId) { return ( - + <>-- ); @@ -54,45 +54,13 @@ export const TestNowColumn = ({ } return ( - + testNowClick()} isDisabled={!isTestNowCompleted} - aria-label={TEST_NOW_ARIA_LABEL} + aria-label={labels.TEST_NOW_ARIA_LABEL} /> ); }; - -export const TEST_NOW_ARIA_LABEL = i18n.translate( - 'xpack.synthetics.monitorList.testNow.AriaLabel', - { - defaultMessage: 'CLick to run test now', - } -); - -export const TEST_NOW_AVAILABLE_LABEL = i18n.translate( - 'xpack.synthetics.monitorList.testNow.available', - { - defaultMessage: 'Test now is only available for monitors added via Monitor Management.', - } -); - -export const PRIVATE_AVAILABLE_LABEL = i18n.translate( - 'xpack.synthetics.monitorList.testNow.available.private', - { - defaultMessage: `You can't currently test monitors running on private locations on demand.`, - } -); - -export const TEST_NOW_LABEL = i18n.translate('xpack.synthetics.monitorList.testNow.label', { - defaultMessage: 'Test now', -}); - -export const TEST_SCHEDULED_LABEL = i18n.translate( - 'xpack.synthetics.monitorList.testNow.scheduled', - { - defaultMessage: 'Test is already scheduled', - } -); diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts index 402846b16c875..00a593365f070 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts @@ -83,3 +83,35 @@ export const STATUS_ALERT_COLUMN = i18n.translate( export const TEST_NOW_COLUMN = i18n.translate('xpack.synthetics.monitorList.testNow.label', { defaultMessage: 'Test now', }); + +export const TEST_NOW_AVAILABLE_LABEL = i18n.translate( + 'xpack.synthetics.monitorList.testNow.available', + { + defaultMessage: 'Test now is only available for monitors added via Monitor Management.', + } +); + +export const TEST_SCHEDULED_LABEL = i18n.translate( + 'xpack.synthetics.monitorList.testNow.scheduled', + { + defaultMessage: 'Test is already scheduled', + } +); + +export const PRIVATE_AVAILABLE_LABEL = i18n.translate( + 'xpack.synthetics.monitorList.testNow.available.private', + { + defaultMessage: `You can't currently test monitors running on private locations on demand.`, + } +); + +export const TEST_NOW_ARIA_LABEL = i18n.translate( + 'xpack.synthetics.monitorList.testNow.AriaLabel', + { + defaultMessage: 'CLick to run test now', + } +); + +export const TEST_NOW_LABEL = i18n.translate('xpack.synthetics.monitorList.testNow.label', { + defaultMessage: 'Test now', +}); From 290908654b99b11f80e17f76f0dc6520713c6a9f Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Tue, 16 Aug 2022 02:04:32 +0200 Subject: [PATCH 2/6] Control popover logic with MouseOver and MouseOut to be able to show popover on a disabled button. --- .../action_bar/action_bar.tsx | 50 ++++++++++++++++--- 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx index f0e69395f6075..2899aacc9ce56 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useContext, useState, useEffect } from 'react'; +import React, { useCallback, useContext, useState, useEffect, useRef } from 'react'; import { useParams, Redirect } from 'react-router-dom'; import { EuiFlexGroup, @@ -14,6 +14,7 @@ import { EuiButtonEmpty, EuiText, EuiPopover, + EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -38,6 +39,11 @@ import { monitorManagementListSelector } from '../../../state/selectors'; import { kibanaService } from '../../../state/kibana_service'; +import { + PRIVATE_AVAILABLE_LABEL, + TEST_SCHEDULED_LABEL, +} from '../../overview/monitor_list/translations'; + export interface ActionBarProps { monitor: SyntheticsMonitor; isValid: boolean; @@ -63,6 +69,7 @@ export const ActionBar = ({ const [isSaving, setIsSaving] = useState(false); const [isSuccessful, setIsSuccessful] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(undefined); + const mouseMoveTimeoutIds = useRef<[number, number]>([0, 0]); const isReadOnly = monitor[ConfigKey.MONITOR_SOURCE_TYPE] === SourceType.PROJECT; const hasServiceManagedLocation = monitor.locations?.some((loc) => loc.isServiceManaged); @@ -139,11 +146,23 @@ export const ActionBar = ({ {!isValid && hasBeenSubmitted && VALIDATION_ERROR_LABEL} + + Works on any kind of element — buttons, inputs, you name it!

} + > + {}}> + Hover me + + + {onTestNow && ( {/* Popover is used instead of EuiTooltip until the resolution of https://github.com/elastic/eui/issues/5604 */} onTestNow()} - onMouseEnter={() => { - setIsPopoverOpen(true); + onMouseOver={() => { + // We need this custom logic to display a popover even when button is disabled. + clearInterval(mouseMoveTimeoutIds.current[1]); + if (mouseMoveTimeoutIds.current[0] === 0) { + mouseMoveTimeoutIds.current[0] = setTimeout(() => { + clearTimeout(mouseMoveTimeoutIds.current[1]); + setIsPopoverOpen(true); + }, 250) as unknown as number; + } }} - onMouseLeave={() => { - setIsPopoverOpen(false); + onMouseOut={() => { + // We need this custom logic to display a popover even when button is disabled. + clearTimeout(mouseMoveTimeoutIds.current[1]); + mouseMoveTimeoutIds.current[1] = setTimeout(() => { + clearTimeout(mouseMoveTimeoutIds.current[0]); + setIsPopoverOpen(false); + mouseMoveTimeoutIds.current = [0, 0]; + }, 100) as unknown as number; }} > {testRun ? RE_RUN_TEST_LABEL : RUN_TEST_LABEL} @@ -167,7 +199,13 @@ export const ActionBar = ({ isOpen={isPopoverOpen} > -

{TEST_NOW_DESCRIPTION}

+

+ {isTestRunInProgress + ? TEST_SCHEDULED_LABEL + : isValid && !hasServiceManagedLocation + ? PRIVATE_AVAILABLE_LABEL + : TEST_NOW_DESCRIPTION} +

From 109f85f221c6842b102ef14119e9b4afff36aa8f Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Tue, 16 Aug 2022 02:05:12 +0200 Subject: [PATCH 3/6] Run "Test now" only on public locations. --- .../monitor_management/hooks/use_run_once_errors.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_run_once_errors.ts b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_run_once_errors.ts index 916ca8c00b972..098154f4e20ce 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_run_once_errors.ts +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_run_once_errors.ts @@ -22,6 +22,10 @@ export function useRunOnceErrors({ }) { const [locationErrors, setLocationErrors] = useState([]); const [runOnceServiceError, setRunOnceServiceError] = useState(null); + const publicLocations = useMemo( + () => (locations ?? []).filter((loc) => loc.isServiceManaged), + [locations] + ); useEffect(() => { setLocationErrors([]); @@ -43,16 +47,16 @@ export function useRunOnceErrors({ }, [serviceError]); const locationsById: Record = useMemo( - () => (locations as Locations).reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}), - [locations] + () => (publicLocations as Locations).reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}), + [publicLocations] ); const expectPings = - locations.length - (locationErrors ?? []).filter(({ locationId }) => !!locationId).length; + publicLocations.length - (locationErrors ?? []).filter(({ locationId }) => !!locationId).length; const hasBlockingError = !!runOnceServiceError || - (locationErrors?.length && locationErrors?.length === locations.length); + (locationErrors?.length && locationErrors?.length === publicLocations.length); const errorMessages = useMemo(() => { if (hasBlockingError) { From a7b9a9d7302c818c62820165d82d29a476f08620 Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Wed, 17 Aug 2022 16:08:42 +0200 Subject: [PATCH 4/6] PR Feedback. --- .../monitor_management/action_bar/action_bar.tsx | 10 ---------- .../components/overview/monitor_list/translations.ts | 2 +- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx index 2899aacc9ce56..c7702bf673660 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx @@ -14,7 +14,6 @@ import { EuiButtonEmpty, EuiText, EuiPopover, - EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -147,15 +146,6 @@ export const ActionBar = ({ {!isValid && hasBeenSubmitted && VALIDATION_ERROR_LABEL} - Works on any kind of element — buttons, inputs, you name it!

} - > - {}}> - Hover me - - - {onTestNow && ( {/* Popover is used instead of EuiTooltip until the resolution of https://github.com/elastic/eui/issues/5604 */} diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts index 00a593365f070..2f3bac51ce887 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/translations.ts @@ -108,7 +108,7 @@ export const PRIVATE_AVAILABLE_LABEL = i18n.translate( export const TEST_NOW_ARIA_LABEL = i18n.translate( 'xpack.synthetics.monitorList.testNow.AriaLabel', { - defaultMessage: 'CLick to run test now', + defaultMessage: 'Click to run test now', } ); From 651761a541ecfb8a9ac6bb1d1055a8191f45119f Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Wed, 17 Aug 2022 16:32:14 +0200 Subject: [PATCH 5/6] Fix. --- .../components/monitor_management/action_bar/action_bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx index c7702bf673660..2cf9c699cc8d3 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx @@ -165,7 +165,7 @@ export const ActionBar = ({ onClick={() => onTestNow()} onMouseOver={() => { // We need this custom logic to display a popover even when button is disabled. - clearInterval(mouseMoveTimeoutIds.current[1]); + clearTimeout(mouseMoveTimeoutIds.current[1]); if (mouseMoveTimeoutIds.current[0] === 0) { mouseMoveTimeoutIds.current[0] = setTimeout(() => { clearTimeout(mouseMoveTimeoutIds.current[1]); From d0c22dd6d11c8d13c1edf73a4df54fac83069a28 Mon Sep 17 00:00:00 2001 From: Abdul Zahid Date: Tue, 23 Aug 2022 15:19:51 +0200 Subject: [PATCH 6/6] Show specific tooltip when only private locations are available. --- .../components/monitor_management/action_bar/action_bar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx index 2cf9c699cc8d3..0cae34a05e35b 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx @@ -72,6 +72,7 @@ export const ActionBar = ({ const isReadOnly = monitor[ConfigKey.MONITOR_SOURCE_TYPE] === SourceType.PROJECT; const hasServiceManagedLocation = monitor.locations?.some((loc) => loc.isServiceManaged); + const isOnlyPrivateLocations = !locations.some((loc) => loc.isServiceManaged); const { data, status } = useFetcher(() => { if (!isSaving || !isValid) { @@ -192,7 +193,7 @@ export const ActionBar = ({

{isTestRunInProgress ? TEST_SCHEDULED_LABEL - : isValid && !hasServiceManagedLocation + : isOnlyPrivateLocations || (isValid && !hasServiceManagedLocation) ? PRIVATE_AVAILABLE_LABEL : TEST_NOW_DESCRIPTION}