[Synthetics] Fix status filter and sorting by status (elastic#177406)

## Summary

Fixes elastic#172305

<img width="1727" alt="image"
src="https://github.com/elastic/kibana/assets/3505601/9eddaac2-e371-4393-b846-2041411c2996">

### testing

- [ ] Fixes status filter , make sure up/down/disable/pending are
working
- [ ] Fixes sort by status
- [ ] Also fixes pending monitors appearing under up, not they have
their own category

(cherry picked from commit 90905c4)

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

@@ -6,36 +6,49 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFilterGroup, EuiFilterButton } from '@elastic/eui';
+import { EuiButtonGroup } from '@elastic/eui';
+import { useOverviewStatus } from '../../hooks/use_overview_status';
 import { useGetUrlParams, useUrlParams } from '../../../../hooks';
 
 export const QuickFilters = () => {
   const { statusFilter } = useGetUrlParams();
   const [_, updateUrlParams] = useUrlParams();
+  const { status } = useOverviewStatus({ scopeStatusByLocation: true });
 
   const handleFilterUpdate = (monitorStatus: string) => {
-    return () => {
-      updateUrlParams({ statusFilter: statusFilter !== monitorStatus ? monitorStatus : undefined });
-    };
+    updateUrlParams({ statusFilter: statusFilter !== monitorStatus ? monitorStatus : undefined });
   };
+
+  const statusButtons = [
+    {
+      id: 'up',
+      label: UP_LABEL,
+    },
+    {
+      id: 'down',
+      label: DOWN_LABEL,
+    },
+    {
+      id: 'disabled',
+      label: DISABLED_LABEL,
+    },
+  ];
+  if (status?.pending && status?.pending > 0) {
+    statusButtons.push({
+      id: 'pending',
+      label: PENDING_LABEL,
+    });
+  }
   return (
-    <EuiFilterGroup>
-      <EuiFilterButton hasActiveFilters={statusFilter === 'up'} onClick={handleFilterUpdate('up')}>
-        {UP_LABEL}
-      </EuiFilterButton>
-      <EuiFilterButton
-        hasActiveFilters={statusFilter === 'down'}
-        onClick={handleFilterUpdate('down')}
-      >
-        {DOWN_LABEL}
-      </EuiFilterButton>
-      <EuiFilterButton
-        hasActiveFilters={statusFilter === 'disabled'}
-        onClick={handleFilterUpdate('disabled')}
-      >
-        {DISABLED_LABEL}
-      </EuiFilterButton>
-    </EuiFilterGroup>
+    <EuiButtonGroup
+      buttonSize="m"
+      legend={i18n.translate('xpack.synthetics.overview.status.filters.legend', {
+        defaultMessage: 'Monitor status',
+      })}
+      options={statusButtons}
+      idSelected={statusFilter}
+      onChange={handleFilterUpdate}
+    />
   );
 };
 
@@ -50,3 +63,7 @@ const UP_LABEL = i18n.translate('xpack.synthetics.overview.status.filters.up', {
 const DISABLED_LABEL = i18n.translate('xpack.synthetics.overview.status.filters.disabled', {
   defaultMessage: 'Disabled',
 });
+
+const PENDING_LABEL = i18n.translate('xpack.synthetics.overview.status.filters.pending', {
+  defaultMessage: 'Pending',
+});

x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.test.tsx

@@ -117,44 +117,44 @@ describe('useMonitorsSortedByStatus', () => {
           overviewStatus: {
             status: {
               upConfigs: {
-                [`test-monitor-1-${location2.label}`]: {
+                [`test-monitor-1-${location2.id}`]: {
                   configId: 'test-monitor-1',
                   monitorQueryId: 'test-monitor-1',
-                  locationId: location2.label,
+                  locationId: location2.id,
                 },
-                [`test-monitor-2-${location2.label}`]: {
+                [`test-monitor-2-${location2.id}`]: {
                   configId: 'test-monitor-2',
                   monitorQueryId: 'test-monitor-2',
-                  locationId: location2.label,
+                  locationId: location2.id,
                 },
-                [`test-monitor-3-${location2.label}`]: {
+                [`test-monitor-3-${location2.id}`]: {
                   configId: 'test-monitor-3',
                   monitorQueryId: 'test-monitor-3',
-                  locationId: location2.label,
+                  locationId: location2.id,
                 },
               },
               downConfigs: {
-                [`test-monitor-1-${location1.label}`]: {
+                [`test-monitor-1-${location1.id}`]: {
                   configId: 'test-monitor-1',
                   monitorQueryId: 'test-monitor-1',
-                  locationId: location1.label,
+                  locationId: location1.id,
                 },
-                [`test-monitor-2-${location1.label}`]: {
+                [`test-monitor-2-${location1.id}`]: {
                   configId: 'test-monitor-2',
                   monitorQueryId: 'test-monitor-2',
-                  locationId: location1.label,
+                  locationId: location1.id,
                 },
-                [`test-monitor-3${location1.label}`]: {
+                [`test-monitor-3${location1.id}`]: {
                   configId: 'test-monitor-3',
                   monitorQueryId: 'test-monitor-3',
-                  locationId: location1.label,
+                  locationId: location1.id,
                 },
               },
               pendingConfigs: {
-                [`test-monitor-4-${location1.label}`]: {
+                [`test-monitor-4-${location1.id}`]: {
                   configId: 'test-monitor-4',
                   monitorQueryId: 'test-monitor-4',
-                  location: location1.label,
+                  location: location1.id,
                 },
               },
             },
@@ -223,9 +223,9 @@ describe('useMonitorsSortedByStatus', () => {
         },
       ],
       downMonitors: {
-        'test-monitor-1': ['US Central'],
-        'test-monitor-2': ['US Central'],
-        'test-monitor-3': ['US Central'],
+        'test-monitor-1': ['us_central'],
+        'test-monitor-2': ['us_central'],
+        'test-monitor-3': ['us_central'],
       },
     });
   });
@@ -289,9 +289,9 @@ describe('useMonitorsSortedByStatus', () => {
         },
       ],
       downMonitors: {
-        'test-monitor-1': ['US Central'],
-        'test-monitor-2': ['US Central'],
-        'test-monitor-3': ['US Central'],
+        'test-monitor-1': ['us_central'],
+        'test-monitor-2': ['us_central'],
+        'test-monitor-3': ['us_central'],
       },
     });
   });
@@ -331,9 +331,9 @@ describe('useMonitorsSortedByStatus', () => {
         },
       ],
       downMonitors: {
-        'test-monitor-1': ['US Central'],
-        'test-monitor-2': ['US Central'],
-        'test-monitor-3': ['US Central'],
+        'test-monitor-1': ['us_central'],
+        'test-monitor-2': ['us_central'],
+        'test-monitor-3': ['us_central'],
       },
     });
   });
@@ -366,9 +366,9 @@ describe('useMonitorsSortedByStatus', () => {
         },
       ],
       downMonitors: {
-        'test-monitor-1': ['US Central'],
-        'test-monitor-2': ['US Central'],
-        'test-monitor-3': ['US Central'],
+        'test-monitor-1': ['us_central'],
+        'test-monitor-2': ['us_central'],
+        'test-monitor-3': ['us_central'],
       },
     });
   });
@@ -394,9 +394,9 @@ describe('useMonitorsSortedByStatus', () => {
         },
       ],
       downMonitors: {
-        'test-monitor-1': ['US Central'],
-        'test-monitor-2': ['US Central'],
-        'test-monitor-3': ['US Central'],
+        'test-monitor-1': ['us_central'],
+        'test-monitor-2': ['us_central'],
+        'test-monitor-3': ['us_central'],
       },
     });
   });

x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx

@@ -10,7 +10,6 @@ import { useSelector } from 'react-redux';
 import { selectOverviewStatus } from '../state/overview_status';
 import { MonitorOverviewItem } from '../../../../common/runtime_types';
 import { selectOverviewState } from '../state/overview';
-import { useLocationNames } from './use_location_names';
 import { useGetUrlParams } from './use_url_params';
 
 export function useMonitorsSortedByStatus() {
@@ -23,7 +22,6 @@ export function useMonitorsSortedByStatus() {
   } = useSelector(selectOverviewState);
 
   const downMonitors = useRef<Record<string, string[]> | null>(null);
-  const locationNames = useLocationNames();
 
   const monitorsSortedByStatus = useMemo(() => {
     if (!status) {
@@ -51,15 +49,14 @@ export function useMonitorsSortedByStatus() {
     const orderedPendingMonitors: MonitorOverviewItem[] = [];
 
     monitors.forEach((monitor) => {
-      const monitorLocation = locationNames[monitor.location.id];
       if (!monitor.isEnabled) {
         orderedDisabledMonitors.push(monitor);
       } else if (
         monitor.configId in downMonitorMap &&
-        downMonitorMap[monitor.configId].includes(monitorLocation)
+        downMonitorMap[monitor.configId].includes(monitor.location.id)
       ) {
         orderedDownMonitors.push(monitor);
-      } else if (pendingConfigs?.[`${monitor.configId}-${locationNames[monitor.location.id]}`]) {
+      } else if (pendingConfigs?.[`${monitor.configId}-${monitor.location.id}`]) {
         orderedPendingMonitors.push(monitor);
       } else {
         orderedUpMonitors.push(monitor);
@@ -73,7 +70,7 @@ export function useMonitorsSortedByStatus() {
       disabled: orderedDisabledMonitors,
       pending: orderedPendingMonitors,
     };
-  }, [monitors, locationNames, downMonitors, status]);
+  }, [monitors, downMonitors, status]);
 
   return useMemo(() => {
     switch (statusFilter) {