From c83094b44310fe6e808304ab5b65eb2ef8ad3e92 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Mon, 28 Oct 2019 10:00:00 +0100 Subject: [PATCH] React UI: Implement /config page (#6236) * React UI: Implement /config page Signed-off-by: Julius Volz * Address review comments Signed-off-by: Julius Volz --- web/ui/react-app/package.json | 2 ++ web/ui/react-app/src/pages/Config.css | 10 ++++++ web/ui/react-app/src/pages/Config.tsx | 44 +++++++++++++++++++++++++-- web/ui/react-app/yarn.lock | 27 ++++++++++++++++ 4 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 web/ui/react-app/src/pages/Config.css diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json index f3a896439..d204fb3a4 100644 --- a/web/ui/react-app/package.json +++ b/web/ui/react-app/package.json @@ -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", diff --git a/web/ui/react-app/src/pages/Config.css b/web/ui/react-app/src/pages/Config.css new file mode 100644 index 000000000..afe3aad7f --- /dev/null +++ b/web/ui/react-app/src/pages/Config.css @@ -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; +} diff --git a/web/ui/react-app/src/pages/Config.tsx b/web/ui/react-app/src/pages/Config.tsx index f55ac2382..6c302d64e 100644 --- a/web/ui/react-app/src/pages/Config.tsx +++ b/web/ui/react-app/src/pages/Config.tsx @@ -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 = () =>
Config page
+import './Config.css'; + +const Config: FC = () => { + 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 ( + <> +

+ Configuration  + { setCopied(result); setTimeout(setCopied, 1500);}} + > + + +

+ + {error + ? Error: Error fetching configuration: {error} + : config + ? 
{config}
+ : + } + + ) +} export default Config; diff --git a/web/ui/react-app/yarn.lock b/web/ui/react-app/yarn.lock index d020ac9e8..cc01c6693 100644 --- a/web/ui/react-app/yarn.lock +++ b/web/ui/react-app/yarn.lock @@ -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" -- GitLab