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

# Backport This will backport the following commits from `main` to `8.18`: - [[Synthetics] Fix save lens visualization on monitors overview (#216695)](https://github.com/elastic/kibana/pull/216695)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-24 01:38:56 -04:00 · 2025-04-08 14:01:06 +02:00 · 2025-04-08 14:01:06 +02:00 · 42f9afd320
commit 42f9afd320
parent d2b827b1a1
4 changed files with 59 additions and 7 deletions
--- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/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 { ViewMode } from '@kbn/embeddable-plugin/common';
 import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
 import styled from 'styled-components';
@ -218,7 +213,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
--- a/x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/index.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/index.ts
@ -25,3 +25,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';
--- a/x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/overview_save_lens_visualization.journey.ts
+++ b/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.cleaUp();
+  });
+
+  after(async () => {
+    await syntheticsService.cleaUp();
+  });
+
+  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'
+    );
+  });
+});
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
@ -29,6 +29,7 @@ export const OverviewErrorsSparklines = ({ from, to, monitorIds, locations }: Pr
  return (
    <ExploratoryViewEmbeddable
      id="overviewErrorsSparklines"
+      dataTestSubj="overviewErrorsSparklines"
      reportType="kpi-over-time"
      axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
      legendIsVisible={false}