implemented dynamic config forms

Author: jan hof

package-lock.json

@@ -31,6 +31,8 @@
     "@coreui/react": "^3.2.3",
     "@coreui/react-chartjs": "^1.0.1",
     "@coreui/utils": "^1.3.1",
+    "@rjsf/core": "^2.4.0",
+    "@types/react-jsonschema-form": "^1.7.4",
     "@types/socket.io-client": "^1.4.34",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
@@ -39,18 +41,21 @@
     "enzyme-adapter-react-16": "^1.15.3",
     "http-proxy-middleware": "^1.0.6",
     "node-sass": "^4.14.1",
+    "nvm": "0.0.4",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-addons-update": "^15.6.2",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.13.1",
+    "react-jsonschema-form": "^1.8.1",
     "react-redux": "7.2.1",
     "react-router-dom": "^5.2.0",
     "redux": "4.0.5",
     "socket.io-client": "^2.3.1",
     "ws": "^7.3.1"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
     "auto-changelog": "2.2.0",

package.json

@@ -15,11 +15,12 @@ import {
 import CIcon from '@coreui/icons-react'
 
 // sidebar nav config
-import navigation from './_nav'
+import useNavigation from '../hooks/navigationFetcher'
 
 const TheSidebar = () => {
   const dispatch = useDispatch()
   const show = useSelector(state => state.sidebarShow)
+  const [navigation, setNavigation] = useNavigation();
 
   return (
     <CSidebar

src/containers/TheSidebar.js

@@ -0,0 +1,17 @@
+import Axios from "axios";
+import { JSONSchema6 } from "json-schema";
+import { useEffect, useState } from "react";
+
+const useConfig = (namespace: string) => {
+  const [config, setConfig] = useState<JSONSchema6>();
+
+  useEffect(() => {
+    Axios.get("/api/webinterface/service/" + namespace).then((res) =>
+      setConfig(res.data)
+    );
+  }, []);
+
+  return [config, setConfig];
+};
+
+export default useConfig;

src/hooks/configHook.tsx

@@ -0,0 +1,14 @@
+import Axios from "axios";
+import { useEffect, useState } from "react";
+
+function useNavigation() {
+  const [navigation, setNavigation] = useState();
+
+  useEffect(() => {
+    Axios.get("/api/webinterface/nav").then((res) => setNavigation(res.data));
+  }, []);
+
+  return [navigation, setNavigation];
+}
+
+export default useNavigation;

src/hooks/navigationFetcher.tsx

@@ -5,7 +5,9 @@ function useWebsocketUrl() {
   const [websocketUrl, setWebsocketUrl] = useState<string>();
 
   useEffect(() => {
-    Axios.get("/api/websocket").then((res) => setWebsocketUrl(res.data));
+    Axios.get("/api/webinterface/websocket").then((res) =>
+      setWebsocketUrl(res.data)
+    );
   }, []);
 
   return [websocketUrl, setWebsocketUrl];

src/hooks/websocketFetcher.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'));
+const ServiceDetails = React.lazy(() => import('./views/service/ServiceDetails'));
 
 const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/dashboard', name: 'Dashboard', component: Dashboard },
+  { path: '/service/:namespace', name: 'Services', component: ServiceDetails },
 ];
 
 export default routes;

src/routes.js

@@ -14,6 +14,7 @@ import { freeSet } from "@coreui/icons";
 import io from "socket.io-client";
 import Axios from "axios";
 import useWebsocketUrl from "../../hooks/websocketFetcher";
+import { useHistory } from "react-router-dom";
 
 let ws: SocketIOClient.Socket;
 
@@ -37,6 +38,7 @@ const Dashboard = () => {
 
   //useServiceFetcher(setServices);
   const [websocketUrl, setWebsocketUrl] = useWebsocketUrl();
+  const router = useHistory();
 
   useEffect(() => {
     ws = io(websocketUrl as string);

src/views/dashboard/Dashboard.tsx

@@ -0,0 +1,40 @@
+import { CRow } from "@coreui/react";
+import React, { ReactPropTypes } from "react";
+import Form from "react-jsonschema-form";
+import { RouteComponentProps } from "react-router-dom";
+import { JSONSchema6 } from "json-schema";
+import useConfig from "../../hooks/configHook";
+
+type ServiceDetailsProps = {
+  namespace: string;
+};
+
+const schema: JSONSchema6 = {
+  title: "Todo",
+  type: "object",
+  required: ["title"],
+  properties: {
+    title: { type: "string", title: "Title", default: "A new task" },
+    done: { type: "boolean", title: "Done?", default: false },
+  },
+};
+
+const ServiceDetails = (props: RouteComponentProps<ServiceDetailsProps>) => {
+  const [config, setConfig] = useConfig(props.match.params.namespace);
+
+  return (
+    <>
+      <CRow>
+        {config && (
+          <Form
+            schema={config as JSONSchema6}
+            onChange={() => console.log("changed")}
+            onSubmit={() => console.log("submitted")}
+            onError={() => console.log("errors")}
+          />
+        )}
+      </CRow>
+    </>
+  );
+};
+export default ServiceDetails;