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

Move loading indicator into "Execute" button

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2019-05-19 22:28:29 +02:00
parent 6794f680c4
commit a2d93d5114
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.css
View file

@ -16,7 +16,7 @@ body {
}
button.execute-btn {
width: 84px;
width: 120px;
}
.alert.alert-danger {

24
src/ExpressionInput.tsx
View file

@ -13,9 +13,9 @@ import fuzzy from 'fuzzy';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { faSearch, faSpinner, faLevelDownAlt } from '@fortawesome/free-solid-svg-icons';
library.add(faSearch, faSpinner);
library.add(faSearch, faSpinner, faLevelDownAlt);
interface ExpressionInputProps {
value: string;
@ -101,12 +101,6 @@ class ExpressionInput extends Component<ExpressionInputProps> {
{(downshift) => (
<div>
<InputGroup className="expression-input">
<InputGroupAddon addonType="prepend">
<InputGroupText>
{this.props.loading ? <FontAwesomeIcon icon="spinner" spin/> : <FontAwesomeIcon icon="search"/>}
</InputGroupText>
</InputGroupAddon>
<Input
autoFocus
type="textarea"
@ -143,7 +137,19 @@ class ExpressionInput extends Component<ExpressionInputProps> {
} as any)}
/>
<InputGroupAddon addonType="append">
<Button className="execute-btn" color="primary" onClick={() => this.props.executeQuery(this.exprInputRef.current!.value)}>Execute</Button>
<Button
className="execute-btn"
color="primary"
onClick={() => this.props.executeQuery(this.exprInputRef.current!.value)}
>
Execute&nbsp;&nbsp;
{
this.props.loading
? <FontAwesomeIcon icon="spinner" fixedWidth spin/>
: <FontAwesomeIcon icon="level-down-alt" fixedWidth rotation={90}/>
}
</Button>
</InputGroupAddon>
</InputGroup>
{this.renderAutosuggest(downshift)}