mirror of https://github.com/prometheus/prometheus
React UI: Implement /config page (#6236)
* React UI: Implement /config page Signed-off-by: Julius Volz <julius.volz@gmail.com> * Address review comments Signed-off-by: Julius Volz <julius.volz@gmail.com>pull/6239/head
Julius Volz
5 years ago
committed by
GitHub
parent
8afa8452fd
commit
c83094b443
@ -0,0 +1,10 @@
|
||||
.config-yaml {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -1,6 +1,46 @@
|
||||
import React, { FC } from 'react';
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
import { RouteComponentProps } from '@reach/router';
|
||||
import { Alert, Button } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
const Config: FC<RouteComponentProps> = () => <div>Config page</div>
|
||||
import './Config.css';
|
||||
|
||||
const Config: FC<RouteComponentProps> = () => {
|
||||
const [config, setConfig] = useState(null);
|
||||
const [error, setError] = useState("");
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('../api/v1/status/config')
|
||||
.then(res => res.json())
|
||||
.then(res => setConfig(res.data.yaml))
|
||||
.catch(error => setError(error.message));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>
|
||||
Configuration
|
||||
<CopyToClipboard
|
||||
text={config ? config! : ''}
|
||||
onCopy={(text, result) => { setCopied(result); setTimeout(setCopied, 1500);}}
|
||||
>
|
||||
<Button color="light" disabled={!config}>
|
||||
{copied ? 'Copied' : 'Copy to clipboard'}
|
||||
</Button>
|
||||
</CopyToClipboard>
|
||||
</h2>
|
||||
|
||||
{error
|
||||
? <Alert color="danger"><strong>Error:</strong> Error fetching configuration: {error}</Alert>
|
||||
: config
|
||||
? <pre className="config-yaml">{config}</pre>
|
||||
: <FontAwesomeIcon icon={faSpinner} spin />
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Config;
|
||||
|
||||
Loading…
Reference in new issue