diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/quick_filters.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/quick_filters.tsx index 3243f6923e3e7..999d16ccc87fc 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/quick_filters.tsx +++ b/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 ( - - - {UP_LABEL} - - - {DOWN_LABEL} - - - {DISABLED_LABEL} - - + ); }; @@ -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', +}); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.test.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.test.tsx deleted file mode 100644 index 26d808ca5ef7c..0000000000000 --- a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * 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 React from 'react'; -import { renderHook } from '@testing-library/react-hooks'; -import { useLocationNames } from './use_location_names'; -import { WrappedHelper } from '../utils/testing'; - -describe('useMonitorListFilters', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('returns map of id to name', () => { - const WrapperWithState = ({ children }: { children: React.ReactElement }) => { - return ( - - {children} - - ); - }; - - const { result } = renderHook(() => useLocationNames(), { wrapper: WrapperWithState }); - expect(result.current).toEqual({ - us_central: 'US Central', - us_east: 'US East', - }); - }); -}); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.tsx deleted file mode 100644 index 1911719a093e3..0000000000000 --- a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/* - * 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 { useMemo, useEffect } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { selectServiceLocationsState, getServiceLocations } from '../state'; - -export function useLocationNames() { - const dispatch = useDispatch(); - const { locationsLoaded, locations } = useSelector(selectServiceLocationsState); - useEffect(() => { - if (!locationsLoaded) { - dispatch(getServiceLocations()); - } - }); - - return useMemo( - () => - locations.reduce>((acc, location) => { - acc[location.id] = location.label; - return acc; - }, {}), - [locations] - ); -} diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.test.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.test.tsx index 30a09853ba27f..d7f1f4bb778ba 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.test.tsx +++ b/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'], }, }); }); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx index fd4c353a1f91d..9a617422bd01f 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx +++ b/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 | 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) {