mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-09 23:24:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

React UI: hide non selected alert types (#6642)

Browse source 
* hide non selected alert types

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* revert 'show annotations' checkbox to be always visible

Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
Boyko 2020-01-17 00:22:47 +03:00 committed by Julius Volz
parent 2ca25d1c96
commit c8469ecaf5
2 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/ui/react-app/src/App.css
View file

@ -226,7 +226,7 @@ button.execute-btn {
font-size: large;
}
.status-badges {
.group-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;

35
web/ui/react-app/src/pages/alerts/AlertContents.tsx
View file

@ -51,17 +51,17 @@ const stateColorTuples: Array<[RuleState, 'success' | 'warning' | 'danger']> = [
];
const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
const [state, setState] = useState<RuleStatus<boolean>>({
const [filter, setFilter] = useState<RuleStatus<boolean>>({
firing: true,
pending: true,
inactive: true,
});
const [showAnnotations, setShowAnnotations] = useState(false);
const toggle = (ruleState: RuleState) => () => {
setState({
...state,
[ruleState]: !state[ruleState],
const toggleFilter = (ruleState: RuleState) => () => {
setFilter({
...filter,
[ruleState]: !filter[ruleState],
});
};
@ -70,7 +70,13 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
<div className="d-flex togglers-wrapper">
{stateColorTuples.map(([state, color]) => {
return (
<Checkbox wrapperStyles={{ marginRight: 10 }} defaultChecked id={`${state}-toggler`} onClick={toggle(state)}>
<Checkbox
key={state}
wrapperStyles={{ marginRight: 10 }}
defaultChecked
id={`${state}-toggler`}
onClick={toggleFilter(state)}
>
<Badge color={color} className="text-capitalize">
{state} ({statsCount[state]})
</Badge>
@ -86,30 +92,31 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
</Checkbox>
</div>
{groups.map((group, i) => {
return (
const hasFilterOn = group.rules.some(rule => filter[rule.state]);
return hasFilterOn ? (
<Fragment key={i}>
<StatusBadges rules={group.rules}>
<GroupInfo rules={group.rules}>
{group.file} > {group.name}
</StatusBadges>
</GroupInfo>
{group.rules.map((rule, j) => {
return (
state[rule.state] && (
filter[rule.state] && (
<CollapsibleAlertPanel key={rule.name + j} showAnnotations={showAnnotations} rule={rule} />
)
);
})}
</Fragment>
);
) : null;
})}
</>
);
};
interface StatusBadgesProps {
interface GroupInfoProps {
rules: Rule[];
}
const StatusBadges: FC<StatusBadgesProps> = ({ rules, children }) => {
export const GroupInfo: FC<GroupInfoProps> = ({ rules, children }) => {
const statesCounter = rules.reduce<any>(
(acc, r) => {
return {
@ -124,7 +131,7 @@ const StatusBadges: FC<StatusBadgesProps> = ({ rules, children }) => {
);
return (
<div className="status-badges border rounded-sm" style={{ lineHeight: 1.1 }}>
<div className="group-info border rounded-sm" style={{ lineHeight: 1.1 }}>
{children}
<div className="badges-wrapper">
{isPresent(statesCounter.inactive) && <Badge color="success">inactive</Badge>}