Skip to content

Commit

Permalink
[8.13] [Synthetics] Fix status filter and sorting by status (elastic#…
Browse files Browse the repository at this point in the history 
…177406) (elastic#177481)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[Synthetics] Fix status filter and sorting by status
(elastic#177406)](elastic#177406)

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

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

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2024-02-21T16:30:34Z","message":"[Synthetics]
Fix status filter and sorting by status (elastic#177406)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/172305\r\n\r\n<img
width=\"1727\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/9eddaac2-e371-4393-b846-2041411c2996\">\r\n\r\n\r\n###
testing\r\n\r\n- [ ] Fixes status filter , make sure
up/down/disable/pending are\r\nworking\r\n- [ ] Fixes sort by status
\r\n- [ ] Also fixes pending monitors appearing under up, not they
have\r\ntheir own
category","sha":"90905c465fc1c10748a711b3e00b4601541dd9ef","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","ci:cloud-deploy","v8.12.0","Team:obs-ux-infra_services","v8.13.0","v8.14.0"],"title":"[Synthetics]
Fix status filter and sorting by
status","number":177406,"url":"https://github.com/elastic/kibana/pull/177406","mergeCommit":{"message":"[Synthetics]
Fix status filter and sorting by status (elastic#177406)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/172305\r\n\r\n<img
width=\"1727\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/9eddaac2-e371-4393-b846-2041411c2996\">\r\n\r\n\r\n###
testing\r\n\r\n- [ ] Fixes status filter , make sure
up/down/disable/pending are\r\nworking\r\n- [ ] Fixes sort by status
\r\n- [ ] Also fixes pending monitors appearing under up, not they
have\r\ntheir own
category","sha":"90905c465fc1c10748a711b3e00b4601541dd9ef"}},"sourceBranch":"main","suggestedTargetBranches":["8.12","8.13"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/177406","number":177406,"mergeCommit":{"message":"[Synthetics]
Fix status filter and sorting by status (elastic#177406)\n\n##
Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/172305\r\n\r\n<img
width=\"1727\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/9eddaac2-e371-4393-b846-2041411c2996\">\r\n\r\n\r\n###
testing\r\n\r\n- [ ] Fixes status filter , make sure
up/down/disable/pending are\r\nworking\r\n- [ ] Fixes sort by status
\r\n- [ ] Also fixes pending monitors appearing under up, not they
have\r\ntheir own
category","sha":"90905c465fc1c10748a711b3e00b4601541dd9ef"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>
  • Loading branch information
@kibanamachine @shahzad31
kibanamachine and shahzad31 authored Feb 21, 2024
1 parent 5a95949 commit 57f8812
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 138 deletions.
59 changes: 38 additions & 21 deletions ...etics/public/apps/synthetics/components/monitors_page/overview/overview/quick_filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
};

Expand All @@ -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',
});
53 changes: 0 additions & 53 deletions x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.test.tsx
View file

This file was deleted.

29 changes: 0 additions & 29 deletions x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_location_names.tsx
View file

This file was deleted.

58 changes: 29 additions & 29 deletions ...ck/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
},
Expand Down Expand Up @@ -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'],
},
});
});
Expand Down Expand Up @@ -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'],
},
});
});
Expand Down Expand Up @@ -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'],
},
});
});
Expand Down Expand Up @@ -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'],
},
});
});
Expand All @@ -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'],
},
});
});
Expand Down
9 changes: 3 additions & 6 deletions x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -73,7 +70,7 @@ export function useMonitorsSortedByStatus() {
disabled: orderedDisabledMonitors,
pending: orderedPendingMonitors,
};
}, [monitors, locationNames, downMonitors, status]);
}, [monitors, downMonitors, status]);

return useMemo(() => {
switch (statusFilter) {
Expand Down

0 comments on commit 57f8812

Please sign in to comment.