[Synthetics] Standardize the uses of MONITOR_QUERY_ID and CONFIG_ID t…

…hroughout the app (#144176)

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: shahzad31 <shahzad.muhammad@elastic.co>
Co-authored-by: Shahzad <shahzad31comp@gmail.com>
Resolves #143309

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts

@@ -5,18 +5,11 @@
  * 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;
+  return monitor?.[ConfigKey.MONITOR_QUERY_ID];
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_ping_statuses.tsx

@@ -8,7 +8,7 @@
 import { useEffect, useCallback, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { PingStatus } from '../../../../../../common/runtime_types';
+import { ConfigKey, PingStatus } from '../../../../../../common/runtime_types';
 import {
   getMonitorPingStatusesAction,
   selectIsMonitorStatusesLoading,
@@ -35,8 +35,11 @@ export const usePingStatuses = ({
   const location = useSelectedLocation();
 
   const pingStatusesSelector = useCallback(() => {
-    return selectPingStatusesForMonitorAndLocationAsc(monitor?.id ?? '', location?.label ?? '');
-  }, [monitor?.id, location?.label]);
+    return selectPingStatusesForMonitorAndLocationAsc(
+      monitor?.[ConfigKey.CONFIG_ID] ?? '',
+      location?.label ?? ''
+    );
+  }, [monitor, location?.label]);
   const isLoading = useSelector(selectIsMonitorStatusesLoading);
   const pingStatuses = useSelector(pingStatusesSelector()) as PingStatus[];
   const dispatch = useDispatch();

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_selected_monitor.tsx

@@ -8,6 +8,7 @@
 import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import { ConfigKey } from '../../../../../../common/runtime_types';
 import {
   getMonitorAction,
   selectEncryptedSyntheticsSavedMonitors,
@@ -20,16 +21,16 @@ export const useSelectedMonitor = () => {
   const monitorsList = useSelector(selectEncryptedSyntheticsSavedMonitors);
   const { loading: monitorListLoading } = useSelector(selectMonitorListState);
   const monitorFromList = useMemo(
-    () => monitorsList.find((monitor) => monitor.id === monitorId) ?? null,
+    () => monitorsList.find((monitor) => monitor[ConfigKey.CONFIG_ID] === monitorId) ?? null,
     [monitorId, monitorsList]
   );
-
   const { syntheticsMonitor, syntheticsMonitorLoading } = useSelector(selectorMonitorDetailsState);
   const dispatch = useDispatch();
 
-  const isMonitorFromListValid = monitorId && monitorFromList && monitorFromList?.id === monitorId;
+  const isMonitorFromListValid =
+    monitorId && monitorFromList && monitorFromList[ConfigKey.CONFIG_ID] === monitorId;
   const isLoadedSyntheticsMonitorValid =
-    monitorId && syntheticsMonitor && syntheticsMonitor?.id === monitorId;
+    monitorId && syntheticsMonitor && syntheticsMonitor[ConfigKey.CONFIG_ID] === monitorId;
   const availableMonitor = isLoadedSyntheticsMonitorValid
     ? syntheticsMonitor
     : isMonitorFromListValid

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx

@@ -7,15 +7,19 @@
 
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useParams } from 'react-router-dom';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 import { ClientPluginsStart } from '../../../../../plugin';
 
 export const MonitorFailedTests = ({ time }: { time: { to: string; from: string } }) => {
   const { observability } = useKibana<ClientPluginsStart>().services;
 
   const { ExploratoryViewEmbeddable } = observability;
 
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const monitorId = useMonitorQueryId();
+
+  if (!monitorId) {
+    return null;
+  }
 
   return (
     <ExploratoryViewEmbeddable

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx

@@ -17,6 +17,10 @@ export const FailedTestsCount = (time: { to: string; from: string }) => {
 
   const monitorId = useMonitorQueryId();
 
+  if (!monitorId) {
+    return null;
+  }
+
   return (
     <ExploratoryViewEmbeddable
       reportType="single-metric"

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/monitor_errors.tsx

@@ -37,7 +37,7 @@ export const MonitorErrors = () => {
       <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem grow={1}>
-          <EuiPanel>
+          <EuiPanel hasBorder>
             <EuiTitle size="xs">
               <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{OVERVIEW_LABEL}</h3>
             </EuiTitle>
@@ -52,7 +52,7 @@ export const MonitorErrors = () => {
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem grow={3}>
-          <EuiPanel>
+          <EuiPanel hasBorder>
             <EuiTitle size="xs">
               <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{FAILED_TESTS_LABEL}</h3>
             </EuiTitle>
@@ -62,15 +62,15 @@ export const MonitorErrors = () => {
       </EuiFlexGroup>
       <EuiFlexGroup>
         <EuiFlexItem grow={2}>
-          <EuiPanel>
+          <EuiPanel hasBorder>
             <EuiTitle size="xs">
               <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{ERRORS_LABEL}</h3>
             </EuiTitle>
             <ErrorsList />
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem grow={1}>
-          <EuiPanel>
+          <EuiPanel hasBorder>
             <EuiTitle size="xs">
               <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>
                 {FAILED_TESTS_BY_STEPS_LABEL}

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_header.tsx

@@ -17,6 +17,7 @@ import {
 import { css } from '@emotion/css';
 import { useHistory } from 'react-router-dom';
 
+import { ConfigKey } from '../../../../../../common/runtime_types';
 import { MONITOR_HISTORY_ROUTE } from '../../../../../../common/constants';
 import { stringifyUrlParams } from '../../../utils/url_params';
 import { useGetUrlParams } from '../../../hooks';
@@ -69,9 +70,12 @@ export const MonitorStatusHeader = ({
         <EuiFlexItem grow={false}>
           <EuiLink
             href={
-              monitor?.id
+              monitor?.[ConfigKey.CONFIG_ID]
                 ? history.createHref({
-                    pathname: MONITOR_HISTORY_ROUTE.replace(':monitorId', monitor?.id),
+                    pathname: MONITOR_HISTORY_ROUTE.replace(
+                      ':monitorId',
+                      monitor[ConfigKey.CONFIG_ID]
+                    ),
                     search: stringifyUrlParams(
                       { ...params, dateRangeStart: 'now-24h', dateRangeEnd: 'now' },
                       true

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx

@@ -27,7 +27,7 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
 
   const monitorId = useMonitorQueryId();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx

@@ -29,7 +29,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
 
   const selectedLocation = useSelectedLocation();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx

@@ -27,7 +27,7 @@ export const DurationPanel = (props: DurationPanelProps) => {
 
   const monitorId = useMonitorQueryId();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx

@@ -8,7 +8,7 @@
 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 { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useSelectedLocation } from '../hooks/use_selected_location';
 
@@ -23,13 +23,12 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
       observability: { ExploratoryViewEmbeddable },
     },
   } = useKibana<ClientPluginsStart>();
-  const { monitorId } = useParams<{ monitorId: string }>();
-
+  const monitorId = useMonitorQueryId();
   const theme = useTheme();
 
   const selectedLocation = useSelectedLocation();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 
@@ -48,7 +47,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
             dataType: 'synthetics',
             selectedMetricField: 'monitor.duration.us',
             reportDefinitions: {
-              config_id: [monitorId],
+              'monitor.id': [monitorId],
               'observer.geo.name': [selectedLocation?.label],
             },
             color: theme.eui.euiColorVis1,

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx

@@ -25,7 +25,7 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
   const monitorId = useMonitorQueryId();
   const selectedLocation = useSelectedLocation();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx

@@ -23,6 +23,10 @@ export const MonitorCompleteCount = (props: MonitorCompleteCountProps) => {
 
   const monitorId = useMonitorQueryId();
 
+  if (!monitorId) {
+    return null;
+  }
+
   return (
     <ExploratoryViewEmbeddable
       align="left"

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx

@@ -24,6 +24,10 @@ export const MonitorCompleteSparklines = (props: Props) => {
 
   const { euiTheme } = useEuiTheme();
 
+  if (!monitorId) {
+    return null;
+  }
+
   return (
     <ExploratoryViewEmbeddable
       reportType="kpi-over-time"

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx

@@ -44,7 +44,7 @@ export const MonitorDetailsPanel = () => {
 
   if (
     (latestPing && latestPing?.config_id !== monitorId) ||
-    (monitor && monitor.id !== monitorId)
+    (monitor && monitor[ConfigKey.CONFIG_ID] !== monitorId)
   ) {
     return <EuiLoadingContent lines={6} />;
   }

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx

@@ -26,7 +26,7 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
 
   const selectedLocation = useSelectedLocation();
 
-  if (!selectedLocation) {
+  if (!selectedLocation || !monitorId) {
     return null;
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx

@@ -23,6 +23,10 @@ export const MonitorTotalRunsCount = (props: MonitorTotalRunsCountProps) => {
 
   const monitorId = useMonitorQueryId();
 
+  if (!monitorId) {
+    return null;
+  }
+
   return (
     <ExploratoryViewEmbeddable
       align="left"

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx

@@ -34,6 +34,10 @@ export const StepDurationPanel = ({ legendPosition }: { legendPosition?: Positio
     return null;
   }
 
+  if (!monitorId) {
+    return null;
+  }
+
   return (
     <EuiPanel hasShadow={false} hasBorder>
       <EuiFlexGroup alignItems="center" gutterSize="s">

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_inline_errors.ts

@@ -89,7 +89,7 @@ export function useInlineErrors({
             filter: getInlineErrorFilters(),
           },
         },
-        collapse: { field: 'config_id' },
+        collapse: { field: 'monitor.id' },
         sort: sortFieldMap[sortField] ? [{ [sortFieldMap[sortField]]: sortOrder }] : undefined,
       },
     },

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_inline_errors_count.ts

@@ -30,7 +30,7 @@ export function useInlineErrorsCount() {
         },
         aggs: {
           total: {
-            cardinality: { field: 'config_id' },
+            cardinality: { field: 'monitor.id' },
           },
         },
       },

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_details_link.tsx

@@ -31,7 +31,10 @@ export const MonitorDetailsLink = ({
   const locationId =
     lastSelectedLocationId && monitorHasLocation ? lastSelectedLocationId : firstMonitorLocationId;
 
-  const monitorDetailLinkUrl = useMonitorDetailLocator({ monitorId: monitor.id, locationId });
+  const monitorDetailLinkUrl = useMonitorDetailLocator({
+    monitorId: monitor[ConfigKey.CONFIG_ID],
+    locationId,
+  });
 
   return (
     <>

x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_last_x_checks.ts

@@ -44,7 +44,7 @@ export function useLastXChecks<Fields>({
             EXCLUDE_RUN_ONCE_FILTER,
             {
               term: {
-                config_id: monitorId,
+                'monitor.id': monitorId,
               },
             },
           ],

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_details/api.ts

@@ -75,7 +75,6 @@ export const fetchSyntheticsMonitor = async ({
 
   return {
     ...savedObject.attributes,
-    id: savedObject.id,
     updated_at: savedObject.updated_at,
   } as EncryptedSyntheticsSavedMonitor;
 };

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/selectors.ts

@@ -7,7 +7,7 @@
 
 import { createSelector } from 'reselect';
 
-import { EncryptedSyntheticsSavedMonitor } from '../../../../../common/runtime_types';
+import { ConfigKey, EncryptedSyntheticsSavedMonitor } from '../../../../../common/runtime_types';
 import { SyntheticsAppState } from '../root_reducer';
 
 export const selectMonitorListState = (state: SyntheticsAppState) => state.monitorList;
@@ -16,7 +16,7 @@ export const selectEncryptedSyntheticsSavedMonitors = createSelector(
   (state) =>
     state.data.monitors.map((monitor) => ({
       ...monitor.attributes,
-      id: monitor.id,
+      id: monitor.attributes[ConfigKey.MONITOR_QUERY_ID],
       updated_at: monitor.updated_at,
     })) as EncryptedSyntheticsSavedMonitor[]
 );

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_inline_errors.test.tsx

@@ -33,7 +33,7 @@ describe('useInlineErrors', function () {
       3,
       {
         body: {
-          collapse: { field: 'config_id' },
+          collapse: { field: 'monitor.id' },
           query: {
             bool: {
               filter: [

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_inline_errors.ts

@@ -89,7 +89,7 @@ export function useInlineErrors({
             filter: getInlineErrorFilters(),
           },
         },
-        collapse: { field: 'config_id' },
+        collapse: { field: 'monitor.id' },
         sort: [{ [sortFieldMap[sortField]]: sortOrder }],
       },
     },

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_inline_errors_count.test.tsx

@@ -33,7 +33,7 @@ describe('useInlineErrorsCount', function () {
       2,
       {
         body: {
-          aggs: { total: { cardinality: { field: 'config_id' } } },
+          aggs: { total: { cardinality: { field: 'monitor.id' } } },
           query: {
             bool: {
               filter: [

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_inline_errors_count.ts

@@ -30,7 +30,7 @@ export function useInlineErrorsCount() {
         },
         aggs: {
           total: {
-            cardinality: { field: 'config_id' },
+            cardinality: { field: 'monitor.id' },
           },
         },
       },