mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 06:17:27 -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 { .custom-control-label {
cursor: pointer; 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 { .capitalize-title::first-letter {
@ -78,7 +88,7 @@ button.execute-btn {
.autosuggest-dropdown-list li { .autosuggest-dropdown-list li {
width: 100%; width: 100%;
padding: .25rem 1.5rem; padding: 0.25rem 1.5rem;
clear: both; clear: both;
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
@ -94,11 +104,13 @@ button.execute-btn {
text-align: center; text-align: center;
} }
.graph-controls, .table-controls { .graph-controls,
.table-controls {
margin-bottom: 10px; margin-bottom: 10px;
} }
.graph-controls input, .table-controls input { .graph-controls input,
.table-controls input {
text-align: center; text-align: center;
} }
@ -122,7 +134,8 @@ button.execute-btn {
margin-left: 20px; 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; background: #fff;
border-left: none; border-left: none;
border-top: 1px solid #ced4da; border-top: 1px solid #ced4da;
@ -184,7 +197,7 @@ button.execute-btn {
} }
.graph-tooltip { .graph-tooltip {
background: rgba(0,0,0,.8); background: rgba(0, 0, 0, 0.8);
color: #fff; color: #fff;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -196,7 +209,7 @@ button.execute-btn {
.graph-tooltip .labels { .graph-tooltip .labels {
font-size: 11px; font-size: 11px;
line-height: 11px; line-height: 11px;
} }
.graph-tooltip .detail-swatch { .graph-tooltip .detail-swatch {
display: inline-block; 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 React, { FC, useState, Fragment } from 'react';
import { ButtonGroup, Button, Row, Badge } from 'reactstrap'; import { Badge } from 'reactstrap';
import CollapsibleAlertPanel from './CollapsibleAlertPanel'; import CollapsibleAlertPanel from './CollapsibleAlertPanel';
import Checkbox from '../../Checkbox'; import Checkbox from '../../Checkbox';
import { isPresent } from '../../utils/func'; import { isPresent } from '../../utils/func';
@ -44,6 +44,12 @@ interface RuleGroup {
interval: number; interval: number;
} }
const stateColorTuples: Array<[RuleState, 'success' | 'warning' | 'danger']> = [
['inactive', 'success'],
['pending', 'warning'],
['firing', 'danger'],
];
const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => { const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
const [state, setState] = useState<RuleStatus<boolean>>({ const [state, setState] = useState<RuleStatus<boolean>>({
firing: true, firing: true,
@ -61,26 +67,24 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
return ( return (
<> <>
<ButtonGroup className="mb-3"> <div className="d-flex togglers-wrapper">
<Button active={state.inactive} onClick={toggle('inactive')} color="primary"> {stateColorTuples.map(([state, color]) => {
Inactive ({statsCount.inactive}) return (
</Button> <Checkbox wrapperStyles={{ marginRight: 10 }} defaultChecked id={`${state}-toggler`} onClick={toggle(state)}>
<Button active={state.pending} onClick={toggle('pending')} color="primary"> <Badge color={color} className="text-capitalize">
Pending ({statsCount.pending}) {state} ({statsCount[state]})
</Button> </Badge>
<Button active={state.firing} onClick={toggle('firing')} color="primary"> </Checkbox>
Firing ({statsCount.firing}) );
</Button> })}
</ButtonGroup>
<Row className="mb-2">
<Checkbox <Checkbox
id="show-annotations" wrapperStyles={{ marginLeft: 'auto' }}
wrapperStyles={{ margin: '0 0 0 15px', alignSelf: 'center' }} id="show-annotations-toggler"
onClick={() => setShowAnnotations(!showAnnotations)} onClick={() => setShowAnnotations(!showAnnotations)}
> >
Show annotations <span style={{ fontSize: '0.9rem', lineHeight: 1.9 }}>Show annotations</span>
</Checkbox> </Checkbox>
</Row> </div>
{groups.map((group, i) => { {groups.map((group, i) => {
return ( return (
<Fragment key={i}> <Fragment key={i}>