[8.x] [Synthetics] Public API's refactor (#190531) (#193863)

# Backport This will backport the following commits from `main` to `8.x`: - [[Synthetics] Public API's refactor (#190531)](#190531)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Shahzad <[email protected]>
elastic · Sep 24, 2024 · 4686f35 · 4686f35
1 parent e294ce9
commit 4686f35
Show file tree

Hide file tree

Showing 50 changed files with 767 additions and 442 deletions.
diff --git a/...bservability_solution/synthetics/common/runtime_types/monitor_management/monitor_types.ts b/...bservability_solution/synthetics/common/runtime_types/monitor_management/monitor_types.ts
@@ -173,7 +173,8 @@ export type ICMPFields = t.TypeOf<typeof ICMPFieldsCodec>;
 export const HTTPSimpleFieldsCodec = t.intersection([
   t.interface({
     [ConfigKey.METADATA]: MetadataCodec,
-    [ConfigKey.MAX_REDIRECTS]: t.string,
+    // string is for yaml config and number for public api
+    [ConfigKey.MAX_REDIRECTS]: t.union([t.string, t.number]),
     [ConfigKey.URLS]: getNonEmptyStringCodec('url'),
     [ConfigKey.PORT]: t.union([t.number, t.null]),
   }),
@@ -318,6 +319,11 @@ export const MonitorFieldsCodec = t.intersection([
   BrowserFieldsCodec,
 ]);
 
+export const MonitorFieldsResultCodec = t.intersection([
+  MonitorFieldsCodec,
+  t.interface({ id: t.string, updated_at: t.string, created_at: t.string }),
+]);
+
 // Monitor, represents one of (Icmp | Tcp | Http | Browser) decrypted
 export const SyntheticsMonitorCodec = t.union([
   HTTPFieldsCodec,
@@ -336,7 +342,7 @@ export const EncryptedSyntheticsMonitorCodec = t.union([
 
 export const SyntheticsMonitorWithIdCodec = t.intersection([
   SyntheticsMonitorCodec,
-  t.interface({ id: t.string }),
+  t.interface({ id: t.string, updated_at: t.string, created_at: t.string }),
 ]);
 
 const HeartbeatFieldsCodec = t.intersection([
@@ -355,7 +361,10 @@ const HeartbeatFieldsCodec = t.intersection([
 ]);
 
 export const HeartbeatConfigCodec = t.intersection([
-  SyntheticsMonitorWithIdCodec,
+  SyntheticsMonitorCodec,
+  t.interface({
+    id: t.string,
+  }),
   t.partial({
     fields_under_root: t.boolean,
     fields: HeartbeatFieldsCodec,
@@ -400,6 +409,7 @@ export type BrowserFields = t.TypeOf<typeof BrowserFieldsCodec>;
 export type BrowserSimpleFields = t.TypeOf<typeof BrowserSimpleFieldsCodec>;
 export type BrowserAdvancedFields = t.TypeOf<typeof BrowserAdvancedFieldsCodec>;
 export type MonitorFields = t.TypeOf<typeof MonitorFieldsCodec>;
+export type MonitorFieldsResult = t.TypeOf<typeof MonitorFieldsResultCodec>;
 export type HeartbeatFields = t.TypeOf<typeof HeartbeatFieldsCodec>;
 export type SyntheticsMonitor = t.TypeOf<typeof SyntheticsMonitorCodec>;
 export type SyntheticsMonitorWithId = t.TypeOf<typeof SyntheticsMonitorWithIdCodec>;

diff --git a/...lity_solution/synthetics/common/runtime_types/monitor_management/monitor_types_project.ts b/...lity_solution/synthetics/common/runtime_types/monitor_management/monitor_types_project.ts
@@ -62,7 +62,7 @@ export const ProjectMonitorCodec = t.intersection([
     hash: t.string,
     namespace: t.string,
     retestOnFailure: t.boolean,
-    labels: t.record(t.string, t.string),
+    fields: t.record(t.string, t.string),
   }),
 ]);
 
@@ -91,14 +91,10 @@ export const ProjectMonitorsResponseCodec = t.intersection([
   }),
 ]);
 
-export type ProjectMonitorThrottlingConfig = t.TypeOf<typeof ProjectMonitorThrottlingConfigCodec>;
-
 export type ProjectMonitor = t.TypeOf<typeof ProjectMonitorCodec>;
 
 export type LegacyProjectMonitorsRequest = t.TypeOf<typeof LegacyProjectMonitorsRequestCodec>;
 
 export type ProjectMonitorsRequest = t.TypeOf<typeof ProjectMonitorsRequestCodec>;
 
-export type ProjectMonitorsResponse = t.TypeOf<typeof ProjectMonitorsResponseCodec>;
-
 export type ProjectMonitorMetaData = t.TypeOf<typeof ProjectMonitorMetaDataCodec>;
diff --git a/x-pack/plugins/observability_solution/synthetics/e2e/config.ts b/x-pack/plugins/observability_solution/synthetics/e2e/config.ts
@@ -10,6 +10,7 @@ import { CA_CERT_PATH } from '@kbn/dev-utils';
 import { get } from 'lodash';
 import { commonFunctionalServices } from '@kbn/ftr-common-functional-services';
 import { commonFunctionalUIServices } from '@kbn/ftr-common-functional-ui-services';
+
 import { readKibanaConfig } from './tasks/read_kibana_config';
 const MANIFEST_KEY = 'xpack.uptime.service.manifestUrl';
 const SERVICE_PASSWORD = 'xpack.uptime.service.password';

diff --git a/...vability_solution/synthetics/e2e/synthetics/journeys/project_monitor_read_only.journey.ts b/...vability_solution/synthetics/e2e/synthetics/journeys/project_monitor_read_only.journey.ts
@@ -6,9 +6,10 @@
  */
 
 import { after, before, expect, journey, step } from '@elastic/synthetics';
+import { omit } from 'lodash';
 import { SyntheticsMonitor } from '@kbn/synthetics-plugin/common/runtime_types';
 import { SyntheticsServices } from './services/synthetics_services';
-import { cleanTestMonitors, enableMonitorManagedViaApi } from './services/add_monitor';
+import { cleanTestMonitors } from './services/add_monitor';
 import { addTestMonitorProject } from './services/add_monitor_project';
 import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
 
@@ -23,14 +24,13 @@ journey('ProjectMonitorReadOnly', async ({ page, params }) => {
 
   before(async () => {
     await cleanTestMonitors(params);
-    await enableMonitorManagedViaApi(params.kibanaUrl);
+  });
 
+  step('Go to monitor-management', async () => {
     await addTestMonitorProject(params.kibanaUrl, monitorName);
 
     await syntheticsApp.waitForLoadingToFinish();
-  });
 
-  step('Go to monitor-management', async () => {
     await syntheticsApp.navigateToMonitorManagement();
   });
 
@@ -62,11 +62,16 @@ journey('ProjectMonitorReadOnly', async ({ page, params }) => {
     // hash is always reset to empty string when monitor is edited
     // this ensures that when the monitor is pushed again, the monitor
     // config in the process takes precedence
-    expect(newConfiguration).toEqual({
-      ...originalMonitorConfiguration,
-      hash: '',
-      revision: 2,
-    });
+    expect(omit(newConfiguration, ['updated_at'])).toEqual(
+      omit(
+        {
+          ...originalMonitorConfiguration,
+          hash: '',
+          revision: 2,
+        },
+        ['updated_at']
+      )
+    );
   });
 
   step('Navigate to edit monitor', async () => {
@@ -83,29 +88,39 @@ journey('ProjectMonitorReadOnly', async ({ page, params }) => {
     // hash is always reset to empty string when monitor is edited
     // this ensures that when the monitor is pushed again, the monitor
     // config in the process takes precedence
-    expect(newConfiguration).toEqual({
-      ...originalMonitorConfiguration,
-      hash: '',
-      revision: 3,
-      alert: {
-        status: {
-          enabled: !(originalMonitorConfiguration?.alert?.status?.enabled as boolean),
-        },
-        tls: {
-          enabled: originalMonitorConfiguration?.alert?.tls?.enabled as boolean,
+    expect(omit(newConfiguration, ['updated_at'])).toEqual(
+      omit(
+        {
+          ...originalMonitorConfiguration,
+          hash: '',
+          revision: 3,
+          alert: {
+            status: {
+              enabled: !(originalMonitorConfiguration?.alert?.status?.enabled as boolean),
+            },
+            tls: {
+              enabled: originalMonitorConfiguration?.alert?.tls?.enabled as boolean,
+            },
+          },
+          enabled: !originalMonitorConfiguration?.enabled,
         },
-      },
-      enabled: !originalMonitorConfiguration?.enabled,
-    });
+        ['updated_at']
+      )
+    );
   });
 
   step('Monitor can be re-pushed and overwrite any changes', async () => {
     await addTestMonitorProject(params.kibanaUrl, monitorName);
     const repushedConfiguration = await services.getMonitor(monitorId);
-    expect(repushedConfiguration).toEqual({
-      ...originalMonitorConfiguration,
-      revision: 4,
-    });
+    expect(omit(repushedConfiguration, ['updated_at'])).toEqual(
+      omit(
+        {
+          ...originalMonitorConfiguration,
+          revision: 4,
+        },
+        ['updated_at']
+      )
+    );
   });
 
   step('Navigate to edit monitor', async () => {

diff --git a/...observability_solution/synthetics/e2e/synthetics/journeys/services/add_monitor_project.ts b/...observability_solution/synthetics/e2e/synthetics/journeys/services/add_monitor_project.ts
@@ -17,23 +17,15 @@ export const addTestMonitorProject = async (
   const testData = {
     ...testProjectMonitorBrowser(name, config),
   };
-  try {
-    return await axios.put(
-      kibanaUrl +
-        SYNTHETICS_API_URLS.SYNTHETICS_MONITORS_PROJECT_UPDATE.replace(
-          '{projectName}',
-          projectName
-        ),
-      testData,
-      {
-        auth: { username: 'elastic', password: 'changeme' },
-        headers: { 'kbn-xsrf': 'true', 'x-elastic-internal-origin': 'synthetics-e2e' },
-      }
-    );
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log(e);
-  }
+  return await axios.put(
+    kibanaUrl +
+      SYNTHETICS_API_URLS.SYNTHETICS_MONITORS_PROJECT_UPDATE.replace('{projectName}', projectName),
+    testData,
+    {
+      auth: { username: 'elastic', password: 'changeme' },
+      headers: { 'kbn-xsrf': 'true', 'x-elastic-internal-origin': 'synthetics-e2e' },
+    }
+  );
 };
 
 const testProjectMonitorBrowser = (name: string, config?: Record<string, unknown>) => ({

diff --git a/...observability_solution/synthetics/e2e/synthetics/journeys/services/synthetics_services.ts b/...observability_solution/synthetics/e2e/synthetics/journeys/services/synthetics_services.ts
@@ -28,10 +28,9 @@ export class SyntheticsServices {
     try {
       const { data } = await this.requester.request({
         description: 'get monitor by id',
-        path: SYNTHETICS_API_URLS.GET_SYNTHETICS_MONITOR.replace('{monitorId}', monitorId),
-        query: {
-          decrypted: true,
-        },
+        path:
+          SYNTHETICS_API_URLS.GET_SYNTHETICS_MONITOR.replace('{monitorId}', monitorId) +
+          '?internal=true',
         method: 'GET',
       });
       return data as SyntheticsMonitor;

diff --git a/.../synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx b/.../synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
@@ -28,6 +28,7 @@ import {
   EncryptedSyntheticsSavedMonitor,
   MonitorFields,
   Ping,
+  SyntheticsMonitorWithId,
 } from '../../../../../../common/runtime_types';
 import { MonitorTypeBadge } from './monitor_type_badge';
 import { useDateFormat } from '../../../../../hooks/use_date_format';
@@ -36,7 +37,7 @@ export interface MonitorDetailsPanelProps {
   latestPing?: Ping;
   loading: boolean;
   configId: string;
-  monitor: EncryptedSyntheticsSavedMonitor | null;
+  monitor: SyntheticsMonitorWithId | EncryptedSyntheticsSavedMonitor | null;
   hideEnabled?: boolean;
   hideLocations?: boolean;
   hasBorder?: boolean;

diff --git a/...lution/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx b/...lution/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx
@@ -15,7 +15,12 @@ import { LastRefreshed } from '../components/last_refreshed';
 import { AutoRefreshButton } from '../components/auto_refresh_button';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 import { useGetUrlParams } from '../../../hooks';
-import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../../common/constants';
+import {
+  MONITOR_ADD_ROUTE,
+  MONITOR_EDIT_ROUTE,
+  MONITOR_ROUTE,
+  SETTINGS_ROUTE,
+} from '../../../../../../common/constants';
 import { stringifyUrlParams } from '../../../utils/url_params';
 import { InspectorHeaderLink } from './inspector_header_link';
 import { ToggleAlertFlyoutButton } from '../../alerts/toggle_alert_flyout_button';
@@ -41,6 +46,8 @@ export function ActionMenuContent(): React.ReactElement {
   }; /* useSelector(monitorStatusSelector) TODO: Implement state for monitor status */
 
   const detailRouteMatch = useRouteMatch(MONITOR_ROUTE);
+  const isEditRoute = useRouteMatch(MONITOR_EDIT_ROUTE);
+  const isAddRoute = useRouteMatch(MONITOR_ADD_ROUTE);
   const monitorId = selectedMonitor?.monitor?.id;
 
   const syntheticExploratoryViewLink = createExploratoryViewUrl(
@@ -69,8 +76,12 @@ export function ActionMenuContent(): React.ReactElement {
 
   return (
     <EuiHeaderLinks gutterSize="xs">
-      <LastRefreshed />
-      <AutoRefreshButton />
+      {!isEditRoute && !isAddRoute && (
+        <>
+          <LastRefreshed />
+          <AutoRefreshButton />
+        </>
+      )}
       <ToggleAlertFlyoutButton />
 
       <EuiHeaderLink

diff --git a/..._solution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/defaults.tsx b/..._solution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/defaults.tsx
@@ -70,6 +70,26 @@ export const formatDefaultFormValues = (monitor?: SyntheticsMonitor) => {
     schedule.number = `${schedule.number}s`;
   }
 
+  const params = monitorWithFormMonitorType[ConfigKey.PARAMS];
+  if (typeof params !== 'string' && params) {
+    try {
+      monitorWithFormMonitorType[ConfigKey.PARAMS] = JSON.stringify(params);
+    } catch (e) {
+      // ignore
+    }
+  }
+  const browserMonitor = monitor as BrowserFields;
+
+  const pwOptions = browserMonitor[ConfigKey.PLAYWRIGHT_OPTIONS];
+  if (typeof pwOptions !== 'string' && pwOptions) {
+    try {
+      (monitorWithFormMonitorType as BrowserFields)[ConfigKey.PLAYWRIGHT_OPTIONS] =
+        JSON.stringify(pwOptions);
+    } catch (e) {
+      // ignore
+    }
+  }
+
   // handle default monitor types from Uptime, which don't contain `ConfigKey.FORM_MONITOR_TYPE`
   if (!formMonitorType) {
     formMonitorType =
@@ -81,7 +101,6 @@ export const formatDefaultFormValues = (monitor?: SyntheticsMonitor) => {
 
   switch (formMonitorType) {
     case FormMonitorType.MULTISTEP:
-      const browserMonitor = monitor as BrowserFields;
       return {
         ...monitorWithFormMonitorType,
         'source.inline': {

diff --git a/...lution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/form_config.tsx b/...lution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/form_config.tsx
@@ -148,6 +148,7 @@ export const BROWSER_ADVANCED = (readOnly: boolean) => [
       FIELD(readOnly)[ConfigKey.IGNORE_HTTPS_ERRORS],
       FIELD(readOnly)[ConfigKey.SYNTHETICS_ARGS],
       FIELD(readOnly)[ConfigKey.PLAYWRIGHT_OPTIONS],
+      FIELD(readOnly)[ConfigKey.PARAMS],
     ],
   },
 ];

diff --git a/...olution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/validation.tsx b/...olution/synthetics/public/apps/synthetics/components/monitor_add_edit/form/validation.tsx
@@ -117,8 +117,7 @@ const validateHTTP: ValidationLibrary = {
     return validateHeaders(headers);
   },
   [ConfigKey.MAX_REDIRECTS]: ({ [ConfigKey.MAX_REDIRECTS]: value }) =>
-    (!!value && !`${value}`.match(DIGITS_ONLY)) ||
-    parseFloat(value as MonitorFields[ConfigKey.MAX_REDIRECTS]) < 0,
+    (!!value && !`${value}`.match(DIGITS_ONLY)) || parseFloat(value as string) < 0,
   [ConfigKey.URLS]: ({ [ConfigKey.URLS]: value }) => !value,
   ...validateCommon,
 };

diff --git a/.../synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_clone_monitor.ts b/.../synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_clone_monitor.ts
@@ -6,13 +6,13 @@
  */
 
 import { useFetcher } from '@kbn/observability-shared-plugin/public';
+import { fetchSyntheticsMonitor } from '../../../state/monitor_details/api';
 import { useGetUrlParams } from '../../../hooks';
-import { getDecryptedMonitorAPI } from '../../../state/monitor_management/api';
 
 export const useCloneMonitor = () => {
   const { cloneId } = useGetUrlParams();
   return useFetcher(() => {
     if (!cloneId) return Promise.resolve(undefined);
-    return getDecryptedMonitorAPI({ id: cloneId });
+    return fetchSyntheticsMonitor({ monitorId: cloneId });
   }, [cloneId]);
 };
diff --git a/...hetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_not_found.tsx b/...hetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_not_found.tsx
@@ -6,10 +6,10 @@
  */
 
 import { useEffect } from 'react';
-import { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser';
 import { useGetUrlParams, useUrlParams } from '../../../hooks';
+import { IHttpSerializedFetchError } from '../../../state';
 
-export const useMonitorNotFound = (error?: IHttpFetchError<ResponseErrorBody>, id?: string) => {
+export const useMonitorNotFound = (error?: IHttpSerializedFetchError | null, id?: string) => {
   const { packagePolicyId } = useGetUrlParams();
   const updateUrlParams = useUrlParams()[1];