mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-02-21 03:16:00 -08:00
Code Issues Actions 4 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; font-size: large;
} }
.status-badges { .group-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; 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 AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
const [state, setState] = useState<RuleStatus<boolean>>({ const [filter, setFilter] = useState<RuleStatus<boolean>>({
firing: true, firing: true,
pending: true, pending: true,
inactive: true, inactive: true,
}); });
const [showAnnotations, setShowAnnotations] = useState(false); const [showAnnotations, setShowAnnotations] = useState(false);
const toggle = (ruleState: RuleState) => () => { const toggleFilter = (ruleState: RuleState) => () => {
setState({ setFilter({
...state, ...filter,
[ruleState]: !state[ruleState], [ruleState]: !filter[ruleState],
}); });
}; };
@ -70,7 +70,13 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
<div className="d-flex togglers-wrapper"> <div className="d-flex togglers-wrapper">
{stateColorTuples.map(([state, color]) => { {stateColorTuples.map(([state, color]) => {
return ( 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"> <Badge color={color} className="text-capitalize">
{state} ({statsCount[state]}) {state} ({statsCount[state]})
</Badge> </Badge>
@ -86,30 +92,31 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
</Checkbox> </Checkbox>
</div> </div>
{groups.map((group, i) => { {groups.map((group, i) => {
return ( const hasFilterOn = group.rules.some(rule => filter[rule.state]);
return hasFilterOn ? (
<Fragment key={i}> <Fragment key={i}>
<StatusBadges rules={group.rules}> <GroupInfo rules={group.rules}>
{group.file} > {group.name} {group.file} > {group.name}
</StatusBadges> </GroupInfo>
{group.rules.map((rule, j) => { {group.rules.map((rule, j) => {
return ( return (
state[rule.state] && ( filter[rule.state] && (
<CollapsibleAlertPanel key={rule.name + j} showAnnotations={showAnnotations} rule={rule} /> <CollapsibleAlertPanel key={rule.name + j} showAnnotations={showAnnotations} rule={rule} />
) )
); );
})} })}
</Fragment> </Fragment>
); ) : null;
})} })}
</> </>
); );
}; };
interface StatusBadgesProps { interface GroupInfoProps {
rules: Rule[]; rules: Rule[];
} }
const StatusBadges: FC<StatusBadgesProps> = ({ rules, children }) => { export const GroupInfo: FC<GroupInfoProps> = ({ rules, children }) => {
const statesCounter = rules.reduce<any>( const statesCounter = rules.reduce<any>(
(acc, r) => { (acc, r) => {
return { return {
@ -124,7 +131,7 @@ const StatusBadges: FC<StatusBadgesProps> = ({ rules, children }) => {
); );
return ( return (
<div className="status-badges border rounded-sm" style={{ lineHeight: 1.1 }}> <div className="group-info border rounded-sm" style={{ lineHeight: 1.1 }}>
{children} {children}
<div className="badges-wrapper"> <div className="badges-wrapper">
{isPresent(statesCounter.inactive) && <Badge color="success">inactive</Badge>} {isPresent(statesCounter.inactive) && <Badge color="success">inactive</Badge>}