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

ReactUI: replace togglers tabs with checkboxes (#6543)

Browse source 
* replace togglers tabs with checkboxes

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

* create state-color tuples config for checkboxes rendering

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

* separate filters from show-annotations checkbox

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

* style improvements

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

* lint fix

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

* style adjustments

Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
Boyko 2020-01-07 17:12:38 +02:00 committed by Julius Volz
parent 4708915ac6
commit 1637ad2717
2 changed files with 139 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,8 +8,18 @@ input[type='checkbox']:checked + label {
.custom-control-label {
cursor: pointer;
font-size: .875rem;
line-height: 1.8;
}
.togglers-wrapper .form-group {
margin-bottom: 0.5rem;
}
[for$='-toggler'].custom-control-label::before,
[for$='-toggler'].custom-control-label::after {
top: 0.28rem;
left: -1.3rem;
width: 1.12rem;
height: 1.12rem;
}
.capitalize-title::first-letter {
@ -78,7 +88,7 @@ button.execute-btn {
.autosuggest-dropdown-list li {
width: 100%;
padding: .25rem 1.5rem;
padding: 0.25rem 1.5rem;
clear: both;
white-space: nowrap;
background-color: transparent;
@ -94,11 +104,13 @@ button.execute-btn {
text-align: center;
}
.graph-controls, .table-controls {
.graph-controls,
.table-controls {
margin-bottom: 10px;
}
.graph-controls input, .table-controls input {
.graph-controls input,
.table-controls input {
text-align: center;
}
@ -122,7 +134,8 @@ button.execute-btn {
margin-left: 20px;
}
.graph-controls .clear-time-btn, .table-controls .clear-time-btn {
.graph-controls .clear-time-btn,
.table-controls .clear-time-btn {
background: #fff;
border-left: none;
border-top: 1px solid #ced4da;
@ -184,7 +197,7 @@ button.execute-btn {
}
.graph-tooltip {
background: rgba(0,0,0,.8);
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
@ -196,7 +209,7 @@ button.execute-btn {
.graph-tooltip .labels {
font-size: 11px;
line-height: 11px;
}
}
.graph-tooltip .detail-swatch {
display: inline-block;

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

@ -1,5 +1,5 @@
import React, { FC, useState, Fragment } from 'react';
import { ButtonGroup, Button, Row, Badge } from 'reactstrap';
import { Badge } from 'reactstrap';
import CollapsibleAlertPanel from './CollapsibleAlertPanel';
import Checkbox from '../../Checkbox';
import { isPresent } from '../../utils/func';
@ -44,6 +44,12 @@ interface RuleGroup {
interval: number;
}
const stateColorTuples: Array<[RuleState, 'success' | 'warning' | 'danger']> = [
['inactive', 'success'],
['pending', 'warning'],
['firing', 'danger'],
];
const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
const [state, setState] = useState<RuleStatus<boolean>>({
firing: true,
@ -61,26 +67,24 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
return (
<>
<ButtonGroup className="mb-3">
<Button active={state.inactive} onClick={toggle('inactive')} color="primary">
Inactive ({statsCount.inactive})
</Button>
<Button active={state.pending} onClick={toggle('pending')} color="primary">
Pending ({statsCount.pending})
</Button>
<Button active={state.firing} onClick={toggle('firing')} color="primary">
Firing ({statsCount.firing})
</Button>
</ButtonGroup>
<Row className="mb-2">
<div className="d-flex togglers-wrapper">
{stateColorTuples.map(([state, color]) => {
return (
<Checkbox wrapperStyles={{ marginRight: 10 }} defaultChecked id={`${state}-toggler`} onClick={toggle(state)}>
<Badge color={color} className="text-capitalize">
{state} ({statsCount[state]})
</Badge>
</Checkbox>
);
})}
<Checkbox
id="show-annotations"
wrapperStyles={{ margin: '0 0 0 15px', alignSelf: 'center' }}
wrapperStyles={{ marginLeft: 'auto' }}
id="show-annotations-toggler"
onClick={() => setShowAnnotations(!showAnnotations)}
>
Show annotations
<span style={{ fontSize: '0.9rem', lineHeight: 1.9 }}>Show annotations</span>
</Checkbox>
</Row>
</div>
{groups.map((group, i) => {
return (
<Fragment key={i}>