[Synthetics] Remove extra overview route

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,10 @@
  */
 
 import * as t from 'io-ts';
+import {
+  OverviewPendingStatusMetaDataCodec,
+  OverviewPingCodec,
+} from '../monitor_management/synthetics_overview_status';
 
 export const SyntheticsCommonStateCodec = t.intersection([
   t.partial({
@@ -36,3 +40,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 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, OverviewPendingStatusMetaDataCodec),
+  enabledMonitorQueryIds: t.array(t.string),
+  staleDownConfigs: t.record(t.string, StaleAlertStatusMetaDataCodec),
+});
+
+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 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

@@ -382,30 +382,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({
@@ -430,8 +406,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,14 +30,26 @@ 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 OverviewStatusMetaDataCodec = t.intersection([
+  t.interface({
+    monitorQueryId: t.string,
+    configId: t.string,
+    status: t.string,
+    locationId: t.string,
+    locationLabel: t.string,
+    timestamp: t.string,
+    ping: OverviewPingCodec,
+    name: t.string,
+    schedule: t.string,
+    isEnabled: t.boolean,
+    tags: t.array(t.string),
+    isStatusAlertEnabled: t.boolean,
+    type: t.string,
+  }),
+  t.partial({
+    projectId: t.string,
+  }),
+]);
 
 export const OverviewPendingStatusMetaDataCodec = t.intersection([
   t.interface({
@@ -68,15 +80,8 @@ export const OverviewStatusCodec = t.interface({
   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/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)');

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

@@ -29,7 +29,7 @@ import {
   manualTestRunInProgressSelector,
 } from '../../../../state/manual_test_runs';
 import { useMonitorAlertEnable } from '../../../../hooks/use_monitor_alert_enable';
-import { ConfigKey, MonitorOverviewItem } from '../../../../../../../common/runtime_types';
+import { ConfigKey, OverviewStatusMetaData } from '../../../../../../../common/runtime_types';
 import { useCanEditSynthetics } from '../../../../../../hooks/use_capabilities';
 import { useMonitorEnableHandler, useLocationName, useEnablement } from '../../../../hooks';
 import { setFlyoutConfig } from '../../../../state/overview/actions';
@@ -65,7 +65,7 @@ const Container = styled.div<ActionContainerProps>`
 interface Props {
   isPopoverOpen: boolean;
   isInspectView?: boolean;
-  monitor: MonitorOverviewItem;
+  monitor: OverviewStatusMetaData;
   setIsPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
   position: PopoverPosition;
   iconHasPanel?: boolean;
@@ -112,7 +112,7 @@ export function ActionsPopover({
 
   const detailUrl = useMonitorDetailLocator({
     configId: monitor.configId,
-    locationId: locationId ?? monitor.location.id,
+    locationId: locationId ?? monitor.locationId,
   });
   const editUrl = useEditMonitorLocator({ configId: monitor.configId });
 
@@ -168,8 +168,8 @@ export function ActionsPopover({
           setFlyoutConfig({
             configId: monitor.configId,
             location: locationName,
-            id: monitor.id,
-            locationId: monitor.location.id,
+            id: monitor.configId,
+            locationId: monitor.locationId,
           })
         );
         setIsPopoverOpen(false);