Merge pull request #1 from nreese/synthetics_review_feedback

yiannisnikolopoulos · web-flow · commit 8f8dad9ac68a · 2026-02-19T16:59:54.000Z
Synthetics review feedback
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/bwc/transform_filters_out.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/bwc/transform_filters_out.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { MonitorFilters, MonitorOption } from "../../types";
+
+interface LegacyStoredFilters {
+  monitorIds?: MonitorOption[];
+  monitorTypes?: MonitorOption[];
+}
+
+/**
+ * Pre 9.4 the monitor_ids and monitor_types state was stored in a camelCased key called monitorIds and monitorTypes.
+ * This transform out function ensures that this state is not dropped when loading from
+ * a legacy stored state.
+ */
+export function transformFiltersOut<StateType extends{ filters?: MonitorFilters } >(storedState: StateType) {
+  if (!storedState.filters) {
+    return storedState;
+  }
+
+  const { monitorIds: legacyMonitorIds, monitorTypes: legacyMonitorTypes, ...restOfFilters } = storedState.filters as MonitorFilters & LegacyStoredFilters;
+  const monitorIds = storedState.filters.monitor_ids ?? legacyMonitorIds;
+  const monitorTypes = storedState.filters.monitor_types ?? legacyMonitorTypes;
+  return {
+    ...storedState,
+    filters: {
+      ...restOfFilters,
+      ...(monitorIds ? { monitor_ids: monitorIds } : {}),
+      ...(monitorTypes ? { monitor_types: monitorTypes } : {}),
+    }
+  }
+}
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/monitors_overview/get_transform_out.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/monitors_overview/get_transform_out.ts
@@ -8,8 +8,8 @@
 import type { Reference } from '@kbn/content-management-utils/src/types';
 import { transformTitlesOut } from '@kbn/presentation-publishing';
 import { flow } from 'lodash';
-import type { OverviewMonitorsEmbeddableState } from './types';
-import type { LegacyMonitorFilters } from '../../types';
+import { transformFiltersOut } from '../bwc/transform_filters_out';
+import { OverviewMonitorsEmbeddableState } from '../../types';
 
 export function getTransformOut() {
   function transformOut(
@@ -19,29 +19,7 @@ export function getTransformOut() {
   ): OverviewMonitorsEmbeddableState {
     const transformsFlow = flow(
       transformTitlesOut<OverviewMonitorsEmbeddableState>,
-      (state: OverviewMonitorsEmbeddableState) => {
-        // Handle legacy stored shape: convert camelCase to snake_case (REST API shape)
-        if (state.filters) {
-          const filters = state.filters as unknown as LegacyMonitorFilters;
-          const hasLegacyKeys = 'monitorIds' in filters || 'monitorTypes' in filters;
-
-          if (hasLegacyKeys) {
-            // Convert legacy camelCase to REST API snake_case
-            return {
-              ...state,
-              filters: {
-                projects: filters.projects,
-                tags: filters.tags,
-                locations: filters.locations,
-                monitor_ids: filters.monitorIds || filters.monitor_ids || [],
-                monitor_types: filters.monitorTypes || filters.monitor_types || [],
-              },
-            };
-          }
-        }
-        // Already in REST API shape (snake_case)
-        return state;
-      }
+      transformFiltersOut<OverviewMonitorsEmbeddableState>,
     );
     return transformsFlow(storedState);
   }
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/monitors_overview/types.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/monitors_overview/types.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/constants.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/constants.ts
@@ -5,4 +5,7 @@
  * 2.0.
  */
 
+import { CONTEXT_MENU_TRIGGER } from "@kbn/ui-actions-plugin/common/trigger_ids";
+
 export const SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE = 'SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE';
+export const SYNTHETICS_STATS_SUPPORTED_TRIGGERS = [CONTEXT_MENU_TRIGGER];
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/get_transform_in.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/get_transform_in.ts
@@ -7,7 +7,7 @@
 
 import type { Reference } from '@kbn/content-management-utils';
 import type { DrilldownTransforms } from '@kbn/embeddable-plugin/common';
-import type { OverviewStatsEmbeddableState } from './types';
+import { OverviewStatsEmbeddableState } from '../../types';
 
 export function getTransformIn(transformDrilldownsIn: DrilldownTransforms['transformIn']) {
   function transformIn(state: OverviewStatsEmbeddableState): {
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/get_transform_out.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/get_transform_out.ts
@@ -9,37 +9,15 @@ import type { Reference } from '@kbn/content-management-utils/src/types';
 import { transformTitlesOut } from '@kbn/presentation-publishing';
 import type { DrilldownTransforms } from '@kbn/embeddable-plugin/common';
 import { flow } from 'lodash';
-import type { OverviewStatsEmbeddableState } from './types';
-import type { LegacyMonitorFilters } from '../../types';
+import { transformFiltersOut } from '../bwc/transform_filters_out';
+import { OverviewStatsEmbeddableState } from '../../types';
 
 export function getTransformOut(transformDrilldownsOut: DrilldownTransforms['transformOut']) {
   function transformOut(storedState: OverviewStatsEmbeddableState, references?: Reference[]) {
     const transformsFlow = flow(
       transformTitlesOut<OverviewStatsEmbeddableState>,
-      (state: OverviewStatsEmbeddableState) => {
-        // Handle legacy stored shape: convert camelCase to snake_case (REST API shape)
-        if (state.filters) {
-          const filters = state.filters as unknown as LegacyMonitorFilters;
-          const hasLegacyKeys = 'monitorIds' in filters || 'monitorTypes' in filters;
-
-          if (hasLegacyKeys) {
-            // Convert legacy camelCase to REST API snake_case
-            const convertedState: OverviewStatsEmbeddableState = {
-              ...state,
-              filters: {
-                projects: filters.projects,
-                tags: filters.tags,
-                locations: filters.locations,
-                monitor_ids: filters.monitorIds || filters.monitor_ids || [],
-                monitor_types: filters.monitorTypes || filters.monitor_types || [],
-              },
-            };
-            return transformDrilldownsOut(convertedState, references);
-          }
-        }
-        // Already in REST API shape (snake_case)
-        return transformDrilldownsOut(state, references);
-      }
+      transformFiltersOut<OverviewStatsEmbeddableState>,
+      (state: OverviewStatsEmbeddableState) => transformDrilldownsOut(state, references)
     );
     return transformsFlow(storedState);
   }
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/types.ts b/x-pack/solutions/observability/plugins/synthetics/common/embeddables/stats_overview/types.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/types/index.ts b/x-pack/solutions/observability/plugins/synthetics/common/types/index.ts
@@ -14,7 +14,7 @@ export type * from './overview';
 export type {
   MonitorOption,
   MonitorFilters,
-  LegacyMonitorFilters,
-  SyntheticsStatsOverviewEmbeddableState,
-  SyntheticsMonitorsEmbeddableState,
+  OverviewStatsEmbeddableState,
+  OverviewStatsEmbeddableCustomState,
+  OverviewMonitorsEmbeddableState
 } from '../../server/schemas';
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/field_selector.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/field_selector.tsx
@@ -14,7 +14,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import type { Suggestion } from '../hooks/use_fetch_synthetics_suggestions';
 import { useFetchSyntheticsSuggestions } from '../hooks/use_fetch_synthetics_suggestions';
 import { OptionalText } from './optional_text';
-import type { MonitorFilters } from '../../../../common/embeddables/stats_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 interface Option {
   label: string;
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/monitor_configuration.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
@@ -26,7 +26,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { MonitorFiltersForm } from './monitor_filters_form';
 import type { OverviewView } from '../../synthetics/state';
 import { DEFAULT_OVERVIEW_VIEW } from '../../synthetics/state';
-import type { MonitorFilters } from '../../../../common/embeddables/stats_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 const MonitorConfigurationContext = React.createContext<{
   overviewView: OverviewView;
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
@@ -14,7 +14,7 @@ import type { ClientPluginsStart } from '../../../plugin';
 import { MonitorConfiguration } from './monitor_configuration';
 import { SYNTHETICS_MONITORS_EMBEDDABLE } from '../../../../common/embeddables/monitors_overview/constants';
 import type { OverviewMonitorsEmbeddableCustomState } from '../monitors_overview/monitors_embeddable_factory';
-import type { OverviewStatsEmbeddableCustomState } from '../../../../common/embeddables/stats_overview/types';
+import type { OverviewStatsEmbeddableCustomState } from '../../../../common/types';
 import type { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../../../../common/embeddables/stats_overview/constants';
 
 interface CommonParams {
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/show_selected_filters.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/show_selected_filters.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiBadgeGroup, EuiBadge } from '@elastic/eui';
-import type { MonitorFilters } from '../../../../common/embeddables/stats_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 export const ShowSelectedFilters = ({ filters }: { filters: MonitorFilters }) => {
   return (
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/utils.ts b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/common/utils.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { MonitorFilters } from '../../../../common/embeddables/stats_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 export const areFiltersEmpty = (filters: MonitorFilters) => {
   if (!filters) {
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
@@ -28,7 +28,7 @@ import { SYNTHETICS_MONITORS_EMBEDDABLE } from '../../../../common/embeddables/m
 import type { ClientPluginsStart } from '../../../plugin';
 import { openMonitorConfiguration } from '../common/monitors_open_configuration';
 import type { OverviewView } from '../../synthetics/state';
-import type { MonitorFilters } from '../../../../common/embeddables/monitors_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 export const getOverviewPanelTitle = () =>
   i18n.translate('xpack.synthetics.monitors.displayName', {
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
@@ -27,7 +27,7 @@ import type { FlyoutParamProps } from '../../synthetics/components/monitors_page
 import { MaybeMonitorDetailsFlyout } from '../../synthetics/components/monitors_page/overview/overview/monitor_detail_flyout';
 import { useOverviewStatus } from '../../synthetics/components/monitors_page/hooks/use_overview_status';
 import { OverviewLoader } from '../../synthetics/components/monitors_page/overview/overview/overview_loader';
-import type { MonitorFilters } from '../../../../common/embeddables/monitors_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 export const StatusGridComponent = ({
   reload$,
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
@@ -15,7 +15,7 @@ import { ShowSelectedFilters } from '../common/show_selected_filters';
 import { setOverviewPageStateAction } from '../../synthetics/state';
 import { SyntheticsEmbeddableContext } from '../synthetics_embeddable_context';
 import { OverviewStatus } from '../../synthetics/components/monitors_page/overview/overview/overview_status';
-import type { MonitorFilters } from '../../../../common/embeddables/stats_overview/types';
+import type { MonitorFilters } from '../../../../common/types';
 
 export const StatsOverviewComponent = ({
   reload$,
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 
 import React, { useEffect } from 'react';
 import type { DefaultEmbeddableApi, EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { CONTEXT_MENU_TRIGGER } from '@kbn/ui-actions-plugin/common/trigger_ids';
 import type {
   PublishesWritableTitle,
   PublishesTitle,
@@ -29,11 +28,8 @@ import type { HasDynamicActions } from '@kbn/embeddable-enhanced-plugin/public';
 import type { ClientPluginsStart } from '../../../plugin';
 import { StatsOverviewComponent } from './stats_overview_component';
 import { openMonitorConfiguration } from '../common/monitors_open_configuration';
-import type {
-  MonitorFilters,
-  OverviewStatsEmbeddableState,
-} from '../../../../common/embeddables/stats_overview/types';
-import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../../../../common/embeddables/stats_overview/constants';
+import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE, SYNTHETICS_STATS_SUPPORTED_TRIGGERS } from '../../../../common/embeddables/stats_overview/constants';
+import { MonitorFilters, OverviewStatsEmbeddableState } from '../../../../common/types';
 
 export const getOverviewPanelTitle = () =>
   i18n.translate('xpack.synthetics.statusOverview.list.displayName', {
@@ -117,7 +113,7 @@ export const getStatsOverviewEmbeddableFactory = (
         ...titleManager.api,
         ...(dynamicActionsManager?.api ?? {}),
         ...unsavedChangesApi,
-        supportedTriggers: () => [CONTEXT_MENU_TRIGGER],
+        supportedTriggers: () => SYNTHETICS_STATS_SUPPORTED_TRIGGERS,
         defaultTitle$,
         getTypeDisplayName: () =>
           i18n.translate('xpack.synthetics.editSloOverviewEmbeddableTitle.typeDisplayName', {
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/add_to_dashboard.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/add_to_dashboard.tsx
@@ -26,7 +26,7 @@ import type { SYNTHETICS_MONITORS_EMBEDDABLE } from '../../../../../../common/em
 import { selectOverviewState } from '../../../state';
 import type { OverviewMonitorsEmbeddableCustomState } from '../../../../embeddables/monitors_overview/monitors_embeddable_factory';
 import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../../../../../../common/embeddables/stats_overview/constants';
-import type { OverviewStatsEmbeddableCustomState } from '../../../../../../common/embeddables/stats_overview/types';
+import type { OverviewStatsEmbeddableCustomState } from '../../../../../../common/types';
 
 const SavedObjectSaveModalDashboard = withSuspense(LazySavedObjectSaveModalDashboard);
 
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/plugin.ts b/x-pack/solutions/observability/plugins/synthetics/server/plugin.ts
@@ -16,8 +16,6 @@ import type {
 import { SavedObjectsClient } from '@kbn/core/server';
 import { mappingFromFieldMap } from '@kbn/alerting-plugin/common';
 import { Dataset } from '@kbn/rule-registry-plugin/server';
-import { schema } from '@kbn/config-schema';
-import { serializedTitlesSchema } from '@kbn/presentation-publishing-schemas';
 import { SyncGlobalParamsPrivateLocationsTask } from './tasks/sync_global_params_task';
 import type {
   SyntheticsPluginsSetupDependencies,
@@ -39,7 +37,7 @@ import { getTransforms as getStatsTransforms } from '../common/embeddables/stats
 import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../common/embeddables/stats_overview/constants';
 import { getTransforms as getMonitorsTransforms } from '../common/embeddables/monitors_overview/get_transforms';
 import { SYNTHETICS_MONITORS_EMBEDDABLE } from '../common/embeddables/monitors_overview/constants';
-import { statsOverviewCustomStateSchema, syntheticsMonitorsEmbeddableSchema } from './schemas';
+import { getStatsOverviewEmbeddableSchema, syntheticsMonitorsEmbeddableSchema } from './schemas';
 
 export class Plugin implements PluginType {
   private savedObjectsClient?: SavedObjectsClientContract;
@@ -118,13 +116,7 @@ export class Plugin implements PluginType {
     // Register transforms and schema for SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE
     plugins.embeddable.registerTransforms(SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE, {
       getTransforms: getStatsTransforms,
-      getSchema: (getDrilldownsSchema) => {
-        const drilldownsSchema = getDrilldownsSchema(['CONTEXT_MENU_TRIGGER']);
-        return schema.allOf(
-          [statsOverviewCustomStateSchema, serializedTitlesSchema, drilldownsSchema],
-          { meta: { description: 'Synthetics stats overview embeddable schema' } }
-        );
-      },
+      getSchema: getStatsOverviewEmbeddableSchema,
     });
 
     // Register transforms and schema for SYNTHETICS_MONITORS_EMBEDDABLE
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/schemas/common_schemas.test.ts b/x-pack/solutions/observability/plugins/synthetics/server/schemas/common_schemas.test.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/schemas/common_schemas.ts b/x-pack/solutions/observability/plugins/synthetics/server/schemas/common_schemas.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/schemas/index.ts b/x-pack/solutions/observability/plugins/synthetics/server/schemas/index.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/schemas/synthetics_monitors_embeddable_schema.ts b/x-pack/solutions/observability/plugins/synthetics/server/schemas/synthetics_monitors_embeddable_schema.ts
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/schemas/synthetics_stats_overview_embeddable_schema.ts b/x-pack/solutions/observability/plugins/synthetics/server/schemas/synthetics_stats_overview_embeddable_schema.ts
