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
parent
8afa8452fd
commit
c83094b443
|
@ -12,6 +12,7 @@
|
|||
"@types/node": "^12.11.1",
|
||||
"@types/reach__router": "^1.2.6",
|
||||
"@types/react": "^16.8.2",
|
||||
"@types/react-copy-to-clipboard": "^4.3.0",
|
||||
"@types/react-dom": "^16.8.0",
|
||||
"@types/react-resize-detector": "^4.0.2",
|
||||
"@types/sanitize-html": "^1.20.2",
|
||||
|
@ -27,6 +28,7 @@
|
|||
"moment-timezone": "^0.5.23",
|
||||
"popper.js": "^1.14.3",
|
||||
"react": "^16.7.0",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-resize-detector": "^4.2.1",
|
||||
"react-scripts": "^3.2.0",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1398,6 +1398,13 @@
|
|||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-copy-to-clipboard@^4.3.0":
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz#8e07becb4f11cfced4bd36038cb5bdf5c2658be5"
|
||||
integrity sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dom@^16.8.0":
|
||||
version "16.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.2.tgz#90f9e6c161850be1feb31d2f448121be2a4f3b47"
|
||||
|
@ -2944,6 +2951,13 @@ copy-descriptor@^0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
|
||||
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
|
||||
|
||||
copy-to-clipboard@^3:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
|
||||
integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==
|
||||
dependencies:
|
||||
toggle-selection "^1.0.6"
|
||||
|
||||
core-js-compat@^3.1.1:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.3.2.tgz#1096c989c1b929ede06b5b6b4768dc4439078c03"
|
||||
|
@ -8477,6 +8491,14 @@ react-app-polyfill@^1.0.4:
|
|||
regenerator-runtime "0.13.3"
|
||||
whatwg-fetch "3.0.0"
|
||||
|
||||
react-copy-to-clipboard@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
|
||||
integrity sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==
|
||||
dependencies:
|
||||
copy-to-clipboard "^3"
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-dev-utils@^9.1.0:
|
||||
version "9.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
|
||||
|
@ -9970,6 +9992,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
|
|||
regex-not "^1.0.2"
|
||||
safe-regex "^1.1.0"
|
||||
|
||||
toggle-selection@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
|
||||
integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
|
||||
|
||||
toidentifier@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
|
||||
|
|
Loading…
Reference in New Issue