mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-13 06:47:28 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

React-UI: flex-wrap the content (#6796)

Browse source 
* flex-wrap the content

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

* wrap formatted series in a div

Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
Boyko 2020-02-11 16:25:39 +02:00 committed by GitHub
parent 26574eb04d
commit 1c321ed047
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -153,17 +153,20 @@ button.execute-btn {
.legend-item { .legend-item {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center;
padding: 0 5px; padding: 0 5px;
border-radius: 3px; border-radius: 3px;
line-height: 1.7;
}
.legend-item div {
flex-wrap: wrap;
} }
.legend-swatch { .legend-swatch {
width: 7px; min-width: 7px;
height: 7px; height: 7px;
outline-offset: 1px; outline-offset: 1px;
outline: 1.5px solid #ccc; outline: 1.5px solid #ccc;
margin: 2px 8px 2px 0; margin: 6px 8px 2px 0;
display: inline-block; display: inline-block;
} }
@ -244,7 +247,7 @@ button.execute-btn {
.rule_cell { .rule_cell {
white-space: pre-wrap; white-space: pre-wrap;
background-color: #F5F5F5; background-color: #f5f5f5;
display: block; display: block;
font-family: monospace; font-family: monospace;
} }

4
web/ui/react-app/src/pages/graph/SeriesName.tsx
View file

@ -28,12 +28,12 @@ const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
} }
return ( return (
<> <div>
<span className="legend-metric-name">{labels!.__name__ || ''}</span> <span className="legend-metric-name">{labels!.__name__ || ''}</span>
<span className="legend-label-brace">{'{'}</span> <span className="legend-label-brace">{'{'}</span>
{labelNodes} {labelNodes}
<span className="legend-label-brace">{'}'}</span> <span className="legend-label-brace">{'}'}</span>
</> </div>
); );
}; };