forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
/
alert_status_filter.tsx
108 lines (101 loc) · 3.36 KB
/
alert_status_filter.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/*
* 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, { useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFilterGroup,
EuiPopover,
EuiFilterButton,
EuiFilterSelectItem,
EuiHealth,
} from '@elastic/eui';
import {
AlertExecutionStatuses,
AlertExecutionStatusValues,
} from '../../../../../../alerting/common';
import { alertsStatusesTranslationsMapping } from '../translations';
interface AlertStatusFilterProps {
selectedStatuses: string[];
onChange?: (selectedAlertStatusesIds: string[]) => void;
}
export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps> = ({
selectedStatuses,
onChange,
}: AlertStatusFilterProps) => {
const [selectedValues, setSelectedValues] = useState<string[]>(selectedStatuses);
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
useEffect(() => {
if (onChange) {
onChange(selectedValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedValues]);
useEffect(() => {
setSelectedValues(selectedStatuses);
}, [selectedStatuses]);
return (
<EuiFilterGroup>
<EuiPopover
isOpen={isPopoverOpen}
closePopover={() => setIsPopoverOpen(false)}
button={
<EuiFilterButton
iconType="arrowDown"
hasActiveFilters={selectedValues.length > 0}
numActiveFilters={selectedValues.length}
numFilters={selectedValues.length}
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
data-test-subj="alertStatusFilterButton"
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertsList.alertStatusFilterLabel"
defaultMessage="Status"
/>
</EuiFilterButton>
}
>
<div className="euiFilterSelect__items">
{[...AlertExecutionStatusValues].sort().map((item: AlertExecutionStatuses) => {
const healthColor = getHealthColor(item);
return (
<EuiFilterSelectItem
key={item}
style={{ textTransform: 'capitalize' }}
onClick={() => {
const isPreviouslyChecked = selectedValues.includes(item);
if (isPreviouslyChecked) {
setSelectedValues(selectedValues.filter((val) => val !== item));
} else {
setSelectedValues(selectedValues.concat(item));
}
}}
checked={selectedValues.includes(item) ? 'on' : undefined}
data-test-subj={`alertStatus${item}FilerOption`}
>
<EuiHealth color={healthColor}>{alertsStatusesTranslationsMapping[item]}</EuiHealth>
</EuiFilterSelectItem>
);
})}
</div>
</EuiPopover>
</EuiFilterGroup>
);
};
export function getHealthColor(status: AlertExecutionStatuses) {
switch (status) {
case 'active':
return 'success';
case 'error':
return 'danger';
case 'ok':
return 'subdued';
case 'pending':
return 'accent';
default:
return 'warning';
}
}