mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

React UI: Improve styling of autocomplete sections (#6228)

Browse source 
* React UI: Improve styling of autocomplete sections

I removed the Card-related components and went back to normal <ul>/<li>,
since the style that Cards added just got in the way (like adding extra
borders and rounding, etc.), and from the examples at
https://getbootstrap.com/docs/4.3/components/card/, it doesn't seem like
multiple Cards are meant to be used as part of a larger list
(style-wise).

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Address review feedback

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2019-11-03 12:47:47 +01:00 committed by GitHub
parent fffb5ca1e9
commit 8c0b76d1da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -62,20 +62,21 @@ button.execute-btn {
.autosuggest-dropdown { .autosuggest-dropdown {
position: absolute; position: absolute;
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: .25rem;
background-color: #fff; background-color: #fff;
color: #495057; color: #495057;
font-size: 1rem; font-size: 1rem;
z-index: 1000; z-index: 1000;
min-width: 10rem;
top: 100%;
left: 56px; left: 56px;
float: left; margin-top: -6px;
margin: -5px; }
.autosuggest-dropdown-list {
padding: 0;
margin: 0;
list-style: none; list-style: none;
} }
.autosuggest-dropdown li { .autosuggest-dropdown-list li {
width: 100%; width: 100%;
padding: .25rem 1.5rem; padding: .25rem 1.5rem;
clear: both; clear: both;
@ -85,12 +86,12 @@ button.execute-btn {
display: block; display: block;
} }
.autosuggest-dropdown .card-header { .autosuggest-dropdown-list li.autosuggest-dropdown-header {
background: rgba(240, 230, 140, 0.4); background-color: #bfdeff;
height: 30px; font-size: 10px;
display: flex; line-height: 1.5;
align-items: center;
text-transform: uppercase; text-transform: uppercase;
text-align: center;
} }
.graph-controls, .table-controls { .graph-controls, .table-controls {

2
web/ui/react-app/src/ExpressionInput.test.tsx
View file

@ -127,7 +127,7 @@ describe('ExpressionInput', () => {
const downshift = expressionInput.find(Downshift); const downshift = expressionInput.find(Downshift);
downshift.setState({ isOpen: true }); downshift.setState({ isOpen: true });
const ul = downshift.find('ul'); const ul = downshift.find('ul');
expect(ul.prop('className')).toEqual('card list-group'); expect(ul.prop('className')).toEqual('autosuggest-dropdown-list');
const items = ul.find(SanitizeHTML); const items = ul.find(SanitizeHTML);
expect(items.map(item => item.text()).join(', ')).toEqual( expect(items.map(item => item.text()).join(', ')).toEqual(
'node_cpu_guest_seconds_total, node_cpu_seconds_total, instance:node_cpu_utilisation:rate1m' 'node_cpu_guest_seconds_total, node_cpu_seconds_total, instance:node_cpu_utilisation:rate1m'

20
web/ui/react-app/src/ExpressionInput.tsx
View file

@ -1,15 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import { Button, InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';
Button,
InputGroup,
InputGroupAddon,
InputGroupText,
Input,
ListGroup,
ListGroupItem,
Card,
CardHeader,
} from 'reactstrap';
import Downshift, { ControllerStateAndHelpers } from 'downshift'; import Downshift, { ControllerStateAndHelpers } from 'downshift';
import fuzzy from 'fuzzy'; import fuzzy from 'fuzzy';
@ -93,8 +83,8 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
? acc ? acc
: [ : [
...acc, ...acc,
<Card tag={ListGroup} key={title}> <ul className="autosuggest-dropdown-list" key={title}>
<CardHeader style={{ fontSize: 13 }}>{title}</CardHeader> <li className="autosuggest-dropdown-header">{title}</li>
{matches {matches
.slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow. .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
.map(({ original, string }) => { .map(({ original, string }) => {
@ -107,12 +97,12 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
}, },
}); });
return ( return (
<SanitizeHTML tag={ListGroupItem} {...itemProps} allowedTags={['strong']}> <SanitizeHTML tag="li" {...itemProps} allowedTags={['strong']}>
{string} {string}
</SanitizeHTML> </SanitizeHTML>
); );
})} })}
</Card>, </ul>,
]; ];
}, },
[] as JSX.Element[] [] as JSX.Element[]