mirror of
https://github.com/prometheus/prometheus.git
synced 2024-12-25 05:34:05 -08:00
Improve styling of selected exemplar details (#8945)
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:
parent
eb8ca06885
commit
b12622206d
|
@ -6,6 +6,9 @@ import { Legend } from './Legend';
|
|||
import { Metric, ExemplarData, QueryParams } from '../../types/types';
|
||||
import { isPresent } from '../../utils';
|
||||
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.stack');
|
||||
|
@ -201,23 +204,37 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
|||
<ReactResizeDetector handleWidth onResize={this.handleResize} skipOnMount />
|
||||
<div className="graph-chart" ref={this.chartRef} />
|
||||
{Object.keys(selectedLabels.exemplar).length > 0 ? (
|
||||
<div className="float-right">
|
||||
<span style={{ fontSize: '17px' }}>Selected exemplar:</span>
|
||||
<div className="labels mt-1">
|
||||
<div className="graph-selected-exemplar">
|
||||
<div className="font-weight-bold">Selected exemplar labels:</div>
|
||||
<div className="labels mt-1 ml-3">
|
||||
{Object.keys(selectedLabels.exemplar).map((k, i) => (
|
||||
<div key={i} style={{ fontSize: '15px' }}>
|
||||
<div key={i}>
|
||||
<strong>{k}</strong>: {selectedLabels.exemplar[k]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span style={{ fontSize: '16px' }}>Series labels:</span>
|
||||
<div className="labels mt-1">
|
||||
<div className="font-weight-bold mt-3">Associated series labels:</div>
|
||||
<div className="labels mt-1 ml-3">
|
||||
{Object.keys(selectedLabels.series).map((k, i) => (
|
||||
<div key={i} style={{ fontSize: '15px' }}>
|
||||
<div key={i}>
|
||||
<strong>{k}</strong>: {selectedLabels.series[k]}
|
||||
</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>
|
||||
) : null}
|
||||
<Legend
|
||||
|
|
|
@ -222,8 +222,16 @@ input[type='checkbox']:checked + label {
|
|||
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 {
|
||||
margin: 15px 0 15px 55px;
|
||||
margin: 15px 55px;
|
||||
font-size: 0.75em;
|
||||
padding: 10px 5px;
|
||||
display: inline-block;
|
||||
|
|
Loading…
Reference in a new issue