[Synthetics] Avoid unnecessary queries on metric item hover (#161829)

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/actions_popover.tsx

@@ -19,13 +19,12 @@ import {
 import { FETCH_STATUS } from '@kbn/observability-shared-plugin/public';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { toggleStatusAlert } from '../../../../../../../common/runtime_types/monitor_management/alert_config';
 import { PRIVATE_AVAILABLE_LABEL } from '../../../monitor_add_edit/form/run_test_btn';
 import {
   manualTestMonitorAction,
   manualTestRunInProgressSelector,
 } from '../../../../state/manual_test_runs';
-import { toggleStatusAlert } from '../../../../../../../common/runtime_types/monitor_management/alert_config';
-import { useSelectedMonitor } from '../../../monitor_details/hooks/use_selected_monitor';
 import { useMonitorAlertEnable } from '../../../../hooks/use_monitor_alert_enable';
 import { ConfigKey, MonitorOverviewItem } from '../../../../../../../common/runtime_types';
 import { useCanEditSynthetics } from '../../../../../../hooks/use_capabilities';
@@ -115,7 +114,6 @@ export function ActionsPopover({
   });
   const editUrl = useEditMonitorLocator({ configId: monitor.configId });
 
-  const { monitor: monitorFields } = useSelectedMonitor(monitor.configId);
   const canEditSynthetics = useCanEditSynthetics();
 
   const labels = useMemo(
@@ -235,7 +233,11 @@ export function ActionsPopover({
         if (!alertLoading) {
           updateAlertEnabledState({
             monitor: {
-              [ConfigKey.ALERT_CONFIG]: toggleStatusAlert(monitorFields?.[ConfigKey.ALERT_CONFIG]),
+              [ConfigKey.ALERT_CONFIG]: toggleStatusAlert({
+                status: {
+                  enabled: monitor.isStatusAlertEnabled,
+                },
+              }),
             },
             configId: monitor.configId,
             name: monitor.name,

x-pack/plugins/synthetics/server/routes/monitor_cruds/edit_monitor.ts

@@ -4,12 +4,12 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { mergeWith } from 'lodash';
 import { schema } from '@kbn/config-schema';
 import { SavedObjectsUpdateResponse, SavedObject } from '@kbn/core/server';
 import { SavedObjectsErrorHelpers } from '@kbn/core/server';
 import { DEFAULT_SPACE_ID } from '@kbn/spaces-plugin/common';
 import { getPrivateLocations } from '../../synthetics_service/get_private_locations';
+import { mergeSourceMonitor } from './helper';
 import { RouteContext, SyntheticsRestApiRouteFactory } from '../types';
 import { syntheticsMonitorType } from '../../../common/types/saved_objects';
 import {
@@ -64,7 +64,7 @@ export const editSyntheticsMonitorRoute: SyntheticsRestApiRouteFactory = () => (
         );
       const normalizedPreviousMonitor = normalizeSecrets(decryptedPreviousMonitor).attributes;
 
-      const editedMonitor = mergeWith(normalizedPreviousMonitor, monitor, customizer);
+      const editedMonitor = mergeSourceMonitor(normalizedPreviousMonitor, monitor);
 
       const validationResult = validateMonitor(editedMonitor as MonitorFields);
 
@@ -227,10 +227,3 @@ export const syncEditedMonitor = async ({
     throw e;
   }
 };
-
-// Ensure that METADATA is merged deeply, to protect AAD and prevent decryption errors
-const customizer = (_: any, srcValue: any, key: string) => {
-  if (key !== ConfigKey.METADATA) {
-    return srcValue;
-  }
-};

x-pack/plugins/synthetics/server/routes/monitor_cruds/helper.test.ts

@@ -0,0 +1,131 @@
+/*
+ * 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 { mergeSourceMonitor } from './helper';
+import { EncryptedSyntheticsMonitor } from '../../../common/runtime_types';
+
+describe('mergeSourceMonitor', () => {
+  it('should merge keys', function () {
+    const newData = {
+      name: 'new-name',
+      tags: ['a', 'b', 'c'],
+    };
+    const result = mergeSourceMonitor({ ...testMonitor }, newData as any);
+    expect(result).toEqual({
+      ...testMonitor,
+      ...newData,
+    });
+  });
+
+  it('should merge alert keys', () => {
+    const result = mergeSourceMonitor({ ...testMonitor }, {
+      alert: {
+        status: {
+          enabled: false,
+        },
+      },
+    } as any);
+    expect(result.alert).toEqual({
+      status: {
+        enabled: false,
+      },
+      tls: {
+        enabled: true,
+      },
+    });
+  });
+
+  it('should merge locations keys', () => {
+    const result = mergeSourceMonitor({ ...testMonitor }, {
+      locations: [
+        {
+          geo: {
+            lon: -95.86,
+            lat: 41.25,
+          },
+          isServiceManaged: true,
+          id: 'us_central_qa',
+          label: 'North America - US Central',
+        },
+      ],
+    } as any);
+    expect(result.locations).toEqual([
+      {
+        geo: {
+          lon: -95.86,
+          lat: 41.25,
+        },
+        isServiceManaged: true,
+        id: 'us_central_qa',
+        label: 'North America - US Central',
+      },
+    ]);
+  });
+});
+const testMonitor = {
+  type: 'http',
+  form_monitor_type: 'http',
+  enabled: true,
+  alert: {
+    status: {
+      enabled: true,
+    },
+    tls: {
+      enabled: true,
+    },
+  },
+  schedule: {
+    number: '3',
+    unit: 'm',
+  },
+  'service.name': '',
+  config_id: 'ae88f0aa-9c7d-4a5f-96dc-89d65a0ca947',
+  tags: [],
+  timeout: '16',
+  name: 'Todos Lightweight',
+  locations: [
+    {
+      geo: {
+        lon: -95.86,
+        lat: 41.25,
+      },
+      isServiceManaged: true,
+      id: 'us_central',
+      label: 'North America - US Central',
+    },
+  ],
+  namespace: 'default',
+  origin: 'project',
+  journey_id: 'todos-lightweight',
+  hash: 'f4b6u3Q/PMK5KzEtPeMNzXJBA46rt+yilohaAoqMzqk=',
+  id: 'todos-lightweight-test-projects-default',
+  __ui: {
+    is_tls_enabled: false,
+  },
+  urls: '${devUrl}',
+  max_redirects: '0',
+  'url.port': null,
+  proxy_url: '',
+  'response.include_body': 'on_error',
+  'response.include_headers': true,
+  'check.response.status': ['404'],
+  'check.request.method': 'GET',
+  mode: 'any',
+  'response.include_body_max_bytes': '1024',
+  ipv4: true,
+  ipv6: true,
+  'ssl.certificate_authorities': '',
+  'ssl.certificate': '',
+  'ssl.verification_mode': 'full',
+  'ssl.supported_protocols': ['TLSv1.1', 'TLSv1.2', 'TLSv1.3'],
+  project_id: 'test-projects',
+  original_space: 'default',
+  custom_heartbeat_id: 'todos-lightweight-test-projects-default',
+  revision: 21,
+  created_at: '2023-06-15T10:00:09.650Z',
+  updated_at: '2023-07-11T16:55:45.976Z',
+} as EncryptedSyntheticsMonitor;

x-pack/plugins/synthetics/server/routes/monitor_cruds/helper.ts

@@ -6,8 +6,30 @@
  */
 
 import { SavedObject } from '@kbn/core/server';
-import { EncryptedSyntheticsMonitorAttributes } from '../../../common/runtime_types';
+import { mergeWith } from 'lodash';
+import {
+  EncryptedSyntheticsMonitorAttributes,
+  ConfigKey,
+  EncryptedSyntheticsMonitor,
+} from '../../../common/runtime_types';
 
 export function mapSavedObjectToMonitor(so: SavedObject<EncryptedSyntheticsMonitorAttributes>) {
   return Object.assign(so.attributes, { created_at: so.created_at, updated_at: so.updated_at });
 }
+
+export function mergeSourceMonitor(
+  normalizedPreviousMonitor: EncryptedSyntheticsMonitor,
+  monitor: EncryptedSyntheticsMonitor
+) {
+  return mergeWith(normalizedPreviousMonitor, monitor, customizer);
+}
+
+// Ensure that METADATA is merged deeply, to protect AAD and prevent decryption errors
+const customizer = (destVal: any, srcValue: any, key: string) => {
+  if (key === ConfigKey.ALERT_CONFIG) {
+    return { ...destVal, ...srcValue };
+  }
+  if (key !== ConfigKey.METADATA) {
+    return srcValue;
+  }
+};