React UI: Implement /config page (#6236)

* React UI: Implement /config page
Signed-off-by: NJulius Volz <julius.volz@gmail.com>

* Address review comments
Signed-off-by: NJulius Volz <julius.volz@gmail.com>

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",

web/ui/react-app/src/pages/Config.css

+.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;
+}

web/ui/react-app/src/pages/Config.tsx

-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&nbsp;
+        <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;

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"