[Synthetics] Fix save lens visualization on monitors overview (#216695)

This PR closes #212490 by fixing the save lens visualization.



https://github.com/user-attachments/assets/34949692-6b72-41f5-aa61-6c743ea5c5a3

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx

@@ -9,12 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { Position } from '@elastic/charts';
 import React, { useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
-import {
-  FormulaPublicApi,
-  LensEmbeddableInput,
-  LensPublicStart,
-  XYState,
-} from '@kbn/lens-plugin/public';
+import { FormulaPublicApi, LensPublicStart, XYState } from '@kbn/lens-plugin/public';
 import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
 import styled from '@emotion/styled';
 import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
@@ -219,7 +214,7 @@ export default function Embeddable(props: ExploratoryEmbeddableComponentProps) {
       />
       {isSaveOpen && attributesJSON && (
         <LensSaveModalComponent
-          initialInput={attributesJSON as unknown as LensEmbeddableInput}
+          initialInput={{ attributes: attributesJSON }}
           onClose={() => setIsSaveOpen(false)}
           // if we want to do anything after the viz is saved
           // right now there is no action, so an empty function

x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/index.ts

@@ -26,3 +26,4 @@ export * from './monitor_details_page/monitor_summary.journey';
 export * from './test_run_details.journey';
 export * from './step_details.journey';
 export * from './project_monitor_read_only.journey';
+export * from './overview_save_lens_visualization.journey';

x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/overview_save_lens_visualization.journey.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 { before, expect, journey, step, after } from '@elastic/synthetics';
+import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
+import { SyntheticsServices } from './services/synthetics_services';
+
+journey('OverviewSaveLensVisualization', async ({ page, params }) => {
+  const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl, params });
+  const syntheticsService = new SyntheticsServices(params);
+
+  before(async () => {
+    await syntheticsService.cleanUp();
+  });
+
+  after(async () => {
+    await syntheticsService.cleanUp();
+  });
+
+  step('Go to Monitors overview page', async () => {
+    await syntheticsApp.navigateToOverview(true, 15);
+  });
+
+  step('Create test monitor', async () => {
+    await syntheticsService.addTestMonitor('Test Overview Save Lens Visualization Monitor', {
+      type: 'http',
+      urls: 'https://www.google.com',
+      locations: ['us_central'],
+    });
+    await page.getByTestId('syntheticsRefreshButtonButton').click();
+  });
+
+  step('Open the save lens visualization', async () => {
+    await page
+      .getByTestId('overviewErrorsSparklines')
+      .getByTestId('embeddablePanelHoverActions-')
+      .hover();
+
+    await page
+      .getByTestId('overviewErrorsSparklines')
+      .getByTestId('embeddablePanelToggleMenuIcon')
+      .click();
+    await page.getByTestId('embeddablePanelAction-expViewSave').click();
+  });
+
+  step('The attributes are correctly passed to the save lens visualization modal', async () => {
+    expect(await page.getByTestId('savedObjectTitle').inputValue()).toBe(
+      'Prefilled from exploratory view app'
+    );
+  });
+});

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx

@@ -31,6 +31,7 @@ export const OverviewErrorsSparklines = ({ from, to }: Props) => {
   return (
     <ExploratoryViewEmbeddable
       id="overviewErrorsSparklines"
+      dataTestSubj="overviewErrorsSparklines"
       reportType="kpi-over-time"
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}