🔄 [UI] refactor routing layer

cyclops-ui/package.json

@@ -32,7 +32,7 @@
     "react-dom": "^18.0.0",
     "react-gauge-component": "^1.1.22",
     "react-highlight-words": "^0.17.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-terminal": "^1.3.1",
     "runtime-env-cra": "^0.2.4",

cyclops-ui/src/App.tsx

@@ -1,9 +1,21 @@
-import React from 'react';
-import ApplicationRoutes from "./config/ApplicationRoutes";
-function App() {
-  //process.env.REACT_APP_CYCLOPS_CTRL_HOST = 'http://localhost:8080'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom"
+import routes from "./routes"
+import Page404 from "./components/pages/Page404"
+import AppLayout from "./components/layouts/AppLayout";
+
+export default function App() {
+  const router = createBrowserRouter([
+    {
+      element: <AppLayout />,
+      errorElement: <Page404 />,
+      children: routes
+    },
+  ])
+
   return (
-      <ApplicationRoutes />
-  );
-}
-export default App;
+      <RouterProvider router={router} />
+  )
+}

cyclops-ui/src/components/layouts/AppLayout.tsx

@@ -0,0 +1,24 @@
+import {Outlet} from "react-router-dom";
+import SideNav from "./sidebar";
+import {Suspense} from "react";
+import Sider from "antd/es/layout/Sider";
+import {Content, Header} from "antd/es/layout/layout";
+import {Layout} from 'antd';
+
+export default function AppLayout() {
+    return (
+        <Layout>
+            <Sider>
+                <SideNav/>
+            </Sider>
+            <Layout>
+                <Header/>
+                <Content style={{margin: '24px 16px', padding: 24, minHeight: "calc(100vh - 112px)", background: "#fff"}}>
+                    <Suspense fallback={<h1 style={{textAlign: "center"}}>Loading...</h1>}>
+                        <Outlet/>
+                    </Suspense>
+                </Content>
+            </Layout>
+        </Layout>
+    )
+}

cyclops-ui/src/components/pages/Page404.tsx

@@ -0,0 +1,23 @@
+import Sider from "antd/es/layout/Sider";
+import SideNav from "../layouts/sidebar";
+import {Layout} from "antd";
+import {Content, Header} from "antd/es/layout/layout";
+
+export default function Page404() {
+    return (
+        <Layout>
+            <Sider>
+                <SideNav/>
+            </Sider>
+            <Layout>
+                <Header/>
+                <Content style={{margin: '24px 16px', padding: 24, minHeight: "calc(100vh - 112px)", background: "#fff"}}>
+                    <h1 style={{
+                        verticalAlign: "center",
+                        textAlign: "center"
+                    }}>Page not found :/</h1>
+                </Content>
+            </Layout>
+        </Layout>
+    )
+}

cyclops-ui/src/components/pages/history.tsx

@@ -31,12 +31,12 @@ const ModuleHistory = () => {
     const [allData, setAllData] = useState([]);
     let {moduleName} = useParams();
     useEffect(() => {
-        axios.get(process.env.REACT_APP_CYCLOPS_CTRL_HOST + `/modules/` + moduleName + `/history`).then(res => {
+        axios.get(window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST + `/modules/` + moduleName + `/history`).then(res => {
             console.log(res.data)
             setAllData(res.data);
         });
 
-        axios.get(process.env.REACT_APP_CYCLOPS_CTRL_HOST + `/modules/` + moduleName + `/currentManifest`).then(res => {
+        axios.get(window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST + `/modules/` + moduleName + `/currentManifest`).then(res => {
             setDiff({
                 curr: res.data,
                 previous: diff.previous,
@@ -112,7 +112,7 @@ const ModuleHistory = () => {
             }
         })
 
-        axios.post(process.env.REACT_APP_CYCLOPS_CTRL_HOST + '/modules/' + moduleName + '/manifest',
+        axios.post(window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST + '/modules/' + moduleName + '/manifest',
             {
                 template: target.template,
                 values: target.values,
@@ -142,7 +142,7 @@ const ModuleHistory = () => {
             }
         })
 
-        axios.post(process.env.REACT_APP_CYCLOPS_CTRL_HOST + '/modules/' + moduleName + '/manifest',
+        axios.post(window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST + '/modules/' + moduleName + '/manifest',
             {
                 template: target.template,
                 values: target.values,

cyclops-ui/src/index.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import 'antd/dist/reset.css'
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
+    <StrictMode>
+        <App />
+    </StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

cyclops-ui/src/routes/PathConstants.tsx

@@ -0,0 +1,12 @@
+const PathConstants = {
+    HOME: "/",
+    MODULES: "/modules",
+    MODULE_NEW: "/modules/new",
+    MODULE_GET: "/modules/:moduleName",
+    MODULE_EDIT: "/modules/:moduleName/edit",
+    MODULE_ROLLBACK: "/modules/:moduleName/rollback",
+    NODES: "/nodes",
+    NODE_GET: "/nodes/:nodeName"
+}
+
+export default PathConstants

cyclops-ui/src/routes/index.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import PathConstants from "./PathConstants"
+
+const Home = React.lazy(() => import("../components/pages/modules"))
+const Modules = React.lazy(() => import("../components/pages/modules"))
+const NewModule = React.lazy(() => import("../components/pages/new_module"))
+const ModuleDetails = React.lazy(() => import("../components/pages/module_details"))
+const EditModule = React.lazy(() => import("../components/pages/edit_module"))
+const ModuleHistory = React.lazy(() => import("../components/pages/history"))
+const Nodes = React.lazy(() => import("../components/pages/nodes"))
+const NodeDetails = React.lazy(() => import("../components/pages/node_details"))
+
+
+const routes = [
+    { path: PathConstants.HOME, element: <Home /> },
+    { path: PathConstants.MODULES, element: <Modules /> },
+    { path: PathConstants.MODULE_NEW, element: <NewModule /> },
+    { path: PathConstants.MODULE_GET, element: <ModuleDetails /> },
+    { path: PathConstants.MODULE_EDIT, element: <EditModule /> },
+    { path: PathConstants.MODULE_ROLLBACK, element: <ModuleHistory /> },
+    { path: PathConstants.NODES, element: <Nodes /> },
+    { path: PathConstants.NODE_GET, element: <NodeDetails /> }
+]
+
+export default routes