[8.x] [Synthetics] Remove extra overview route (#192449) (#193720)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Synthetics] Remove extra overview route
(#192449)](#192449)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-23T13:09:13Z","message":"[Synthetics]
Remove extra overview route (#192449)\n\n## Summary\r\n\r\nRemove extra
overview route !!\r\n\r\n### Testing\r\nTest overview page with filters
and paging etc \r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a64f7c04-f834-4496-a377-b8bd74542d21\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"5fcc495ae9875b94d0d7748bf0c078445c74e1ca","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-major","ci:project-deploy-observability","Team:obs-ux-management"],"title":"[Synthetics]
Remove extra overview
route","number":192449,"url":"https://github.com/elastic/kibana/pull/192449","mergeCommit":{"message":"[Synthetics]
Remove extra overview route (#192449)\n\n## Summary\r\n\r\nRemove extra
overview route !!\r\n\r\n### Testing\r\nTest overview page with filters
and paging etc \r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a64f7c04-f834-4496-a377-b8bd74542d21\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"5fcc495ae9875b94d0d7748bf0c078445c74e1ca"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192449","number":192449,"mergeCommit":{"message":"[Synthetics]
Remove extra overview route (#192449)\n\n## Summary\r\n\r\nRemove extra
overview route !!\r\n\r\n### Testing\r\nTest overview page with filters
and paging etc \r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a64f7c04-f834-4496-a377-b8bd74542d21\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"5fcc495ae9875b94d0d7748bf0c078445c74e1ca"}}]}]
BACKPORT-->

---------

Co-authored-by: Shahzad <[email protected]>

x-pack/plugins/observability_solution/synthetics/common/constants/synthetics/rest_api.ts

@@ -23,7 +23,6 @@ export enum SYNTHETICS_API_URLS {
   SYNTHETICS_PROJECT_APIKEY = '/internal/synthetics/service/api_key',
   SYNTHETICS_HAS_INTEGRATION_MONITORS = '/internal/synthetics/fleet/has_integration_monitors',
 
-  SYNTHETICS_OVERVIEW = '/internal/synthetics/overview',
   PINGS = '/internal/synthetics/pings',
   MONITOR_STATUS_HEATMAP = '/internal/synthetics/ping_heatmap',
   OVERVIEW_TRENDS = '/internal/synthetics/overview_trends',

x-pack/plugins/observability_solution/synthetics/common/runtime_types/alert_rules/common.ts

@@ -6,6 +6,7 @@
  */
 
 import * as t from 'io-ts';
+import { OverviewPingCodec } from '../monitor_management/synthetics_overview_status';
 
 export const SyntheticsCommonStateCodec = t.intersection([
   t.partial({
@@ -36,3 +37,49 @@ export const SyntheticsMonitorStatusAlertStateCodec = t.type({
 export type SyntheticsMonitorStatusAlertState = t.TypeOf<
   typeof SyntheticsMonitorStatusAlertStateCodec
 >;
+
+export const AlertStatusMetaDataCodec = t.interface({
+  monitorQueryId: t.string,
+  configId: t.string,
+  status: t.string,
+  locationId: t.string,
+  timestamp: t.string,
+  ping: OverviewPingCodec,
+});
+
+export const StaleAlertStatusMetaDataCodec = t.intersection([
+  AlertStatusMetaDataCodec,
+  t.partial({
+    isDeleted: t.boolean,
+    isLocationRemoved: t.boolean,
+  }),
+]);
+
+export const AlertPendingStatusMetaDataCodec = t.intersection([
+  t.interface({
+    monitorQueryId: t.string,
+    configId: t.string,
+    status: t.string,
+    locationId: t.string,
+  }),
+  t.partial({
+    timestamp: t.string,
+    ping: OverviewPingCodec,
+  }),
+]);
+
+export const AlertStatusCodec = t.interface({
+  up: t.number,
+  down: t.number,
+  pending: t.number,
+  upConfigs: t.record(t.string, AlertStatusMetaDataCodec),
+  downConfigs: t.record(t.string, AlertStatusMetaDataCodec),
+  pendingConfigs: t.record(t.string, AlertPendingStatusMetaDataCodec),
+  enabledMonitorQueryIds: t.array(t.string),
+  staleDownConfigs: t.record(t.string, StaleAlertStatusMetaDataCodec),
+});
+
+export type AlertPendingStatusMetaData = t.TypeOf<typeof AlertPendingStatusMetaDataCodec>;
+export type StaleDownConfig = t.TypeOf<typeof StaleAlertStatusMetaDataCodec>;
+export type AlertStatusMetaData = t.TypeOf<typeof AlertStatusMetaDataCodec>;
+export type AlertOverviewStatus = t.TypeOf<typeof AlertStatusCodec>;

x-pack/plugins/observability_solution/synthetics/common/runtime_types/monitor_management/monitor_types.ts

@@ -383,30 +383,6 @@ export const MonitorManagementListResultCodec = t.type({
   syncErrors: t.union([ServiceLocationErrors, t.null]),
 });
 
-export const MonitorOverviewItemCodec = t.intersection([
-  t.interface({
-    name: t.string,
-    id: t.string,
-    configId: t.string,
-    location: MonitorServiceLocationCodec,
-    isEnabled: t.boolean,
-    isStatusAlertEnabled: t.boolean,
-    type: t.string,
-    tags: t.array(t.string),
-    schedule: t.string,
-  }),
-  t.partial({
-    status: t.string,
-    projectId: t.string,
-  }),
-]);
-
-export const MonitorOverviewResultCodec = t.type({
-  total: t.number,
-  allMonitorIds: t.array(t.string),
-  monitors: t.array(MonitorOverviewItemCodec),
-});
-
 export const SyntheticsMonitorWithSecretsCodec = t.intersection([
   EncryptedSyntheticsMonitorCodec,
   t.interface({
@@ -431,8 +407,6 @@ export type EncryptedSyntheticsSavedMonitor = t.TypeOf<typeof EncryptedSynthetic
 export type HeartbeatConfig = t.TypeOf<typeof HeartbeatConfigCodec>;
 export type MonitorDefaults = t.TypeOf<typeof MonitorDefaultsCodec>;
 export type MonitorManagementListResult = t.TypeOf<typeof MonitorManagementListResultCodec>;
-export type MonitorOverviewItem = t.TypeOf<typeof MonitorOverviewItemCodec>;
-export type MonitorOverviewResult = t.TypeOf<typeof MonitorOverviewResultCodec>;
 export type Secret = (typeof secretKeys)[number];
 export type SyntheticsMonitorWithSecrets = Omit<
   t.TypeOf<typeof SyntheticsMonitorWithSecretsCodec>,

x-pack/plugins/observability_solution/synthetics/common/runtime_types/monitor_management/synthetics_overview_status.ts

@@ -30,25 +30,25 @@ export const OverviewPingCodec = t.intersection([
   }),
 ]);
 
-export const OverviewStatusMetaDataCodec = t.interface({
-  monitorQueryId: t.string,
-  configId: t.string,
-  status: t.string,
-  locationId: t.string,
-  timestamp: t.string,
-  ping: OverviewPingCodec,
-});
-
-export const OverviewPendingStatusMetaDataCodec = t.intersection([
+export const OverviewStatusMetaDataCodec = t.intersection([
   t.interface({
     monitorQueryId: t.string,
     configId: t.string,
     status: t.string,
     locationId: t.string,
+    locationLabel: t.string,
+    name: t.string,
+    schedule: t.string,
+    isEnabled: t.boolean,
+    tags: t.array(t.string),
+    isStatusAlertEnabled: t.boolean,
+    type: t.string,
   }),
   t.partial({
-    timestamp: t.string,
+    projectId: t.string,
+    updated_at: t.string,
     ping: OverviewPingCodec,
+    timestamp: t.string,
   }),
 ]);
 
@@ -62,21 +62,13 @@ export const OverviewStatusCodec = t.interface({
   disabledCount: t.number,
   upConfigs: t.record(t.string, OverviewStatusMetaDataCodec),
   downConfigs: t.record(t.string, OverviewStatusMetaDataCodec),
-  pendingConfigs: t.record(t.string, OverviewPendingStatusMetaDataCodec),
+  pendingConfigs: t.record(t.string, OverviewStatusMetaDataCodec),
   enabledMonitorQueryIds: t.array(t.string),
   disabledMonitorQueryIds: t.array(t.string),
   allIds: t.array(t.string),
 });
 
-export const OverviewStatusStateCodec = t.intersection([
-  OverviewStatusCodec,
-  t.interface({
-    allConfigs: t.record(t.string, OverviewStatusMetaDataCodec),
-  }),
-]);
-
 export type OverviewPing = t.TypeOf<typeof OverviewPingCodec>;
 export type OverviewStatus = t.TypeOf<typeof OverviewStatusCodec>;
-export type OverviewStatusState = t.TypeOf<typeof OverviewStatusStateCodec>;
+export type OverviewStatusState = t.TypeOf<typeof OverviewStatusCodec>;
 export type OverviewStatusMetaData = t.TypeOf<typeof OverviewStatusMetaDataCodec>;
-export type OverviewPendingStatusMetaData = t.TypeOf<typeof OverviewPendingStatusMetaDataCodec>;

x-pack/plugins/observability_solution/synthetics/e2e/synthetics/journeys/detail_flyout.ts

@@ -5,14 +5,19 @@
  * 2.0.
  */
 
-import { expect, journey, step } from '@elastic/synthetics';
+import { before, expect, journey, step } from '@elastic/synthetics';
+import { cleanTestMonitors } from './services/add_monitor';
 import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
 
 journey('TestMonitorDetailFlyout', async ({ page, params }) => {
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl, params });
   const monitorName = 'test-flyout-http-monitor';
   const locationId = 'us_central';
 
+  before(async () => {
+    await cleanTestMonitors(params);
+  });
+
   step('Go to monitor-management', async () => {
     await syntheticsApp.navigateToAddMonitor();
   });

x-pack/plugins/observability_solution/synthetics/e2e/synthetics/journeys/overview_sorting.journey.ts

@@ -36,7 +36,6 @@ journey('OverviewSorting', async ({ page, params }) => {
     await page.waitForSelector(`[data-test-subj="syntheticsOverviewGridItem"]`);
     await page.click('[data-test-subj="syntheticsOverviewSortButton"]');
     await page.click('button:has-text("Alphabetical")');
-    await page.waitForSelector(`[data-test-subj="syntheticsOverviewMonitorsLoading"]`);
     await page.waitForSelector(`text=${testMonitor1}`);
     await page.waitForSelector(`text=${testMonitor2}`);
     await page.waitForSelector(`text=${testMonitor3}`);

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/add_to_dashboard.tsx

@@ -90,6 +90,12 @@ export const AddToDashboard = ({
               data-test-subj="syntheticsEmbeddablePanelWrapperButton"
               iconType="boxesHorizontal"
               onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+              aria-label={i18n.translate(
+                'xpack.synthetics.embeddablePanelWrapper.shareButtonAriaLabel',
+                {
+                  defaultMessage: 'Add to dashboard',
+                }
+              )}
             />
           }
           isOpen={isPopoverOpen}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_can_use_public_loc_id.ts

@@ -7,18 +7,21 @@
 
 import { useSelector } from 'react-redux';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { selectServiceLocationsState } from '../../../state';
+import { selectOverviewStatus } from '../../../state/overview_status';
 import { useEnablement } from '../../../hooks';
-import { selectOverviewState } from '../../../state';
 
 export const useCanUsePublicLocById = (configId: string) => {
-  const {
-    data: { monitors },
-  } = useSelector(selectOverviewState);
+  const { allConfigs } = useSelector(selectOverviewStatus);
 
   const { isServiceAllowed } = useEnablement();
 
-  const hasManagedLocation = monitors?.filter(
-    (mon) => mon.configId === configId && mon.location.isServiceManaged
+  const { locations: allLocations } = useSelector(selectServiceLocationsState);
+
+  const listIds = allLocations?.filter((loc) => loc.isServiceManaged).map((loc) => loc.id) ?? [];
+
+  const hasManagedLocation = allConfigs?.filter(
+    (mon) => mon.configId === configId && listIds.includes(mon.locationId)
   );
 
   const canUsePublicLocations =

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts

@@ -18,7 +18,7 @@ import {
 export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLocation: boolean }) {
   const pageState = useSelector(selectOverviewPageState);
 
-  const { status, error, loaded, loading } = useSelector(selectOverviewStatus);
+  const { status, error, loaded, loading, allConfigs } = useSelector(selectOverviewStatus);
 
   const { lastRefresh } = useSyntheticsRefreshContext();
 
@@ -38,5 +38,7 @@ export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLoca
     status,
     error,
     loading,
+    loaded,
+    allConfigs: allConfigs ?? [],
   };
 }

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

@@ -14,10 +14,10 @@ import * as monitorDetailLocatorModule from '../../../../hooks/use_monitor_detai
 import * as monitorEnableHandlerModule from '../../../../hooks/use_monitor_enable_handler';
 import * as enablementHook from '../../../../hooks/use_enablement';
 import { FETCH_STATUS } from '@kbn/observability-shared-plugin/public';
-import { MonitorOverviewItem } from '../types';
+import { OverviewStatusMetaData } from '../types';
 
 describe('ActionsPopover', () => {
-  let testMonitor: MonitorOverviewItem;
+  let testMonitor: OverviewStatusMetaData;
 
   beforeEach(() => {
     jest.spyOn(enablementHook, 'useEnablement').mockReturnValue({
@@ -32,19 +32,17 @@ describe('ActionsPopover', () => {
     });
 
     testMonitor = {
-      location: {
-        id: 'us_central',
-        isServiceManaged: true,
-      },
+      locationId: 'us_central',
       isEnabled: true,
       isStatusAlertEnabled: true,
       name: 'Monitor 1',
-      id: 'somelongstring',
       configId: '1lkjelre',
       type: 'browser',
       tags: [],
       schedule: '120',
-    };
+      monitorQueryId: '123',
+      status: 'up',
+    } as any;
   });
 
   afterEach(() => {
@@ -58,7 +56,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={false}
         setIsPopoverOpen={jest.fn()}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     expect(getByLabelText('Open actions menu'));
@@ -74,7 +72,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={isPopoverOpen}
         setIsPopoverOpen={setIsPopoverOpen}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     const popoverButton = getByLabelText('Open actions menu');
@@ -94,7 +92,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={isPopoverOpen}
         setIsPopoverOpen={setIsPopoverOpen}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     const popoverButton = getByLabelText('Open actions menu');
@@ -115,7 +113,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={true}
         setIsPopoverOpen={jest.fn()}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
 
@@ -132,7 +130,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={true}
         setIsPopoverOpen={jest.fn()}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
 
@@ -151,7 +149,7 @@ describe('ActionsPopover', () => {
         isPopoverOpen={true}
         setIsPopoverOpen={jest.fn()}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     expect(getByTestId('actionsPopoverGoToMonitor')?.getAttribute('href')).toBe(
@@ -172,7 +170,7 @@ describe('ActionsPopover', () => {
         position="relative"
         setIsPopoverOpen={jest.fn()}
         monitor={testMonitor}
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     const enableButton = getByText('Disable monitor (all locations)');
@@ -194,7 +192,7 @@ describe('ActionsPopover', () => {
         setIsPopoverOpen={jest.fn()}
         monitor={{ ...testMonitor, isEnabled: false }}
         position="relative"
-        locationId={testMonitor.location.id}
+        locationId={testMonitor.locationId}
       />
     );
     const enableButton = getByText('Enable monitor (all locations)');