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

Improve styling of selected exemplar details (#8945)

Browse source 
This isn't perfect yet, but IMO better than the initial draft.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2021-06-15 22:50:01 +02:00 committed by GitHub
parent eb8ca06885
commit b12622206d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/ui/react-app/src/pages/graph/Graph.tsx
View file

@ -6,6 +6,9 @@ import { Legend } from './Legend';
import { Metric, ExemplarData, QueryParams } from '../../types/types'; import { Metric, ExemplarData, QueryParams } from '../../types/types';
import { isPresent } from '../../utils'; import { isPresent } from '../../utils';
import { normalizeData, getOptions, toHoverColor } from './GraphHelpers'; import { normalizeData, getOptions, toHoverColor } from './GraphHelpers';
import { Button } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
require('../../vendor/flot/jquery.flot'); require('../../vendor/flot/jquery.flot');
require('../../vendor/flot/jquery.flot.stack'); require('../../vendor/flot/jquery.flot.stack');
@ -201,23 +204,37 @@ class Graph extends PureComponent<GraphProps, GraphState> {
<ReactResizeDetector handleWidth onResize={this.handleResize} skipOnMount /> <ReactResizeDetector handleWidth onResize={this.handleResize} skipOnMount />
<div className="graph-chart" ref={this.chartRef} /> <div className="graph-chart" ref={this.chartRef} />
{Object.keys(selectedLabels.exemplar).length > 0 ? ( {Object.keys(selectedLabels.exemplar).length > 0 ? (
<div className="float-right"> <div className="graph-selected-exemplar">
<span style={{ fontSize: '17px' }}>Selected exemplar:</span> <div className="font-weight-bold">Selected exemplar labels:</div>
<div className="labels mt-1"> <div className="labels mt-1 ml-3">
{Object.keys(selectedLabels.exemplar).map((k, i) => ( {Object.keys(selectedLabels.exemplar).map((k, i) => (
<div key={i} style={{ fontSize: '15px' }}> <div key={i}>
<strong>{k}</strong>: {selectedLabels.exemplar[k]} <strong>{k}</strong>: {selectedLabels.exemplar[k]}
</div> </div>
))} ))}
</div> </div>
<span style={{ fontSize: '16px' }}>Series labels:</span> <div className="font-weight-bold mt-3">Associated series labels:</div>
<div className="labels mt-1"> <div className="labels mt-1 ml-3">
{Object.keys(selectedLabels.series).map((k, i) => ( {Object.keys(selectedLabels.series).map((k, i) => (
<div key={i} style={{ fontSize: '15px' }}> <div key={i}>
<strong>{k}</strong>: {selectedLabels.series[k]} <strong>{k}</strong>: {selectedLabels.series[k]}
</div> </div>
))} ))}
</div> </div>
<Button
size="small"
color="light"
style={{ position: 'absolute', top: 5, right: 5 }}
title="Hide selected exemplar details"
onClick={() =>
this.setState({
chartData: this.state.chartData,
selectedExemplarLabels: { exemplar: {}, series: {} },
})
}
>
<FontAwesomeIcon icon={faTimes} />
</Button>
</div> </div>
) : null} ) : null}
<Legend <Legend

10
web/ui/react-app/src/themes/_shared.scss
View file

@ -222,8 +222,16 @@ input[type='checkbox']:checked + label {
margin-left: 20px; margin-left: 20px;
} }
.graph-selected-exemplar {
position: relative;
border: 1px solid $nav-tabs-border-color;
margin: 15px 55px;
font-size: 0.75em;
padding: 10px 10px;
}
.graph-legend { .graph-legend {
margin: 15px 0 15px 55px; margin: 15px 55px;
font-size: 0.75em; font-size: 0.75em;
padding: 10px 5px; padding: 10px 5px;
display: inline-block; display: inline-block;