From 5c151683fff4df6b87623d5db00276bc31d189bb Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 17 Oct 2022 13:52:10 +0200 Subject: [PATCH] [Synthetics] Fix monitor details project monitor view (#143258) --- .../hooks/use_monitor_latest_ping.tsx | 15 ++++++++----- .../hooks/use_monitor_query_id.ts | 22 +++++++++++++++++++ .../availability_sparklines.tsx | 4 ++-- .../monitor_summary/duration_panel.tsx | 4 ++-- .../monitor_summary/duration_trend.tsx | 8 +++---- .../monitor_summary/step_duration_panel.tsx | 6 ++--- 6 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_latest_ping.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_latest_ping.tsx index 2017109855bfb..6b9ab1442b9eb 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_latest_ping.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_latest_ping.tsx @@ -7,6 +7,7 @@ import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { ConfigKey } from '../../../../../../common/runtime_types'; import { getMonitorRecentPingsAction, selectLatestPing, selectPingsLoading } from '../../../state'; import { useSelectedLocation } from './use_selected_location'; import { useSelectedMonitor } from './use_selected_monitor'; @@ -28,10 +29,14 @@ export const useMonitorLatestPing = (params?: UseMonitorLatestPingParams) => { const latestPing = useSelector(selectLatestPing); const pingsLoading = useSelector(selectPingsLoading); - const isUpToDate = - latestPing && - latestPing.monitor.id === monitorId && - latestPing.observer?.geo?.name === locationLabel; + const latestPingId = latestPing?.monitor.id; + + const isIdSame = + latestPingId === monitorId || latestPingId === monitor?.[ConfigKey.CUSTOM_HEARTBEAT_ID]; + + const isLocationSame = latestPing?.observer?.geo?.name === locationLabel; + + const isUpToDate = isIdSame && isLocationSame; useEffect(() => { if (monitorId && locationLabel && !isUpToDate) { @@ -47,7 +52,7 @@ export const useMonitorLatestPing = (params?: UseMonitorLatestPingParams) => { return { loading: pingsLoading, latestPing: null }; } - if (latestPing.monitor.id !== monitorId || latestPing.observer?.geo?.name !== locationLabel) { + if (!isIdSame || !isLocationSame) { return { loading: pingsLoading, latestPing: null }; } diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts new file mode 100644 index 0000000000000..4b1e88461fa16 --- /dev/null +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useParams } from 'react-router-dom'; +import { ConfigKey } from '../../../../../../common/runtime_types'; +import { useSelectedMonitor } from './use_selected_monitor'; + +export const useMonitorQueryId = () => { + const { monitorId } = useParams<{ monitorId: string }>(); + + const { monitor } = useSelectedMonitor(); + + if (monitor && monitor.origin === 'project') { + return monitor[ConfigKey.CUSTOM_HEARTBEAT_ID]!; + } + + return monitorId; +}; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx index bc05d8fcc7a51..308ba581f6b0b 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx @@ -8,8 +8,8 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ReportTypes, useTheme } from '@kbn/observability-plugin/public'; -import { useParams } from 'react-router-dom'; import { ClientPluginsStart } from '../../../../../plugin'; +import { useMonitorQueryId } from '../hooks/use_monitor_query_id'; export const AvailabilitySparklines = () => { const { @@ -17,7 +17,7 @@ export const AvailabilitySparklines = () => { observability: { ExploratoryViewEmbeddable }, }, } = useKibana(); - const { monitorId } = useParams<{ monitorId: string }>(); + const monitorId = useMonitorQueryId(); const theme = useTheme(); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx index 6d3ff68b2785c..4c6ede0ade308 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ReportTypes } from '@kbn/observability-plugin/public'; -import { useParams } from 'react-router-dom'; import { ClientPluginsStart } from '../../../../../plugin'; import { KpiWrapper } from './kpi_wrapper'; +import { useMonitorQueryId } from '../hooks/use_monitor_query_id'; export const DurationPanel = () => { const { @@ -19,7 +19,7 @@ export const DurationPanel = () => { observability: { ExploratoryViewEmbeddable }, }, } = useKibana(); - const { monitorId } = useParams<{ monitorId: string }>(); + const monitorId = useMonitorQueryId(); return ( diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx index 8336e33a7e973..3642aa520c211 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx @@ -7,15 +7,15 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { useParams } from 'react-router-dom'; import { ClientPluginsStart } from '../../../../../plugin'; +import { useMonitorQueryId } from '../hooks/use_monitor_query_id'; export const MonitorDurationTrend = () => { const { observability } = useKibana().services; const { ExploratoryViewEmbeddable } = observability; - const { monitorId } = useParams<{ monitorId: string }>(); + const monitorId = useMonitorQueryId(); const metricsToShow = ['min', 'max', 'median', '25th', '75th']; @@ -31,9 +31,7 @@ export const MonitorDurationTrend = () => { }, name: metric + ' Series', selectedMetricField: 'monitor.duration.us', - reportDefinitions: { - 'monitor.id': [monitorId], - }, + reportDefinitions: { 'monitor.id': [monitorId] }, seriesType: 'line', operationType: metric, }))} diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx index 120449b88bd04..1fe6ef23a44a0 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx @@ -9,9 +9,9 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiTitle } from '@elastic/eui'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ReportTypes } from '@kbn/observability-plugin/public'; -import { useParams } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; +import { useMonitorQueryId } from '../hooks/use_monitor_query_id'; import { useSelectedMonitor } from '../hooks/use_selected_monitor'; import { ClientPluginsStart } from '../../../../../plugin'; export const StepDurationPanel = () => { @@ -19,10 +19,10 @@ export const StepDurationPanel = () => { const { ExploratoryViewEmbeddable } = observability; - const { monitorId } = useParams<{ monitorId: string }>(); - const { monitor } = useSelectedMonitor(); + const monitorId = useMonitorQueryId(); + const isBrowser = monitor?.type === 'browser'; return (