feat(new-webui): Add support for page switching using react-router. (#797)

Author: davemarco

components/log-viewer-webui/client/eslint.config.mjs

@@ -44,6 +44,18 @@ const EslintConfig = [
             ],
         },
     },
+    {
+        // eslint-disable-next-line no-warning-comments
+        // TODO: Remove dot notation rule once part of eslint-config-yscope
+        files: [
+            "**/*.ts",
+            "**/*.tsx",
+        ],
+        rules: {
+            "dot-notation": "off",
+            "@typescript-eslint/dot-notation": "error",
+        },
+    },
 ];
 
 

components/log-viewer-webui/client/package-lock.json

@@ -21,7 +21,8 @@
     "antd": "^5.24.5",
     "axios": "^1.7.9",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router": "^7.4.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.10",

components/log-viewer-webui/client/package.json

@@ -1,4 +1,6 @@
-import MainLayout from "./ui/MainLayout";
+import {RouterProvider} from "react-router";
+
+import router from "./router";
 
 
 /**
@@ -7,9 +9,7 @@ import MainLayout from "./ui/MainLayout";
  * @return
  */
 const AntApp = () => {
-    return (
-        <MainLayout/>
-    );
+    return <RouterProvider router={router}/>;
 };
 
 export default AntApp;

components/log-viewer-webui/client/src/AntdApp.tsx

@@ -1,15 +1,15 @@
-.main-layout {
+.mainLayout {
   min-height: 100vh;
 }
 
-.sider-logo-container {
+.siderLogoContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 64px;
 }
 
-.sider-logo {
+.siderLogo {
   max-width: 100%;
   max-height: 100%;
   height: 32px;

components/log-viewer-webui/client/src/ui/MainLayout.css renamed to components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css

@@ -1,4 +1,8 @@
 import {useState} from "react";
+import {
+    Link,
+    Outlet,
+} from "react-router";
 
 import {
     SearchOutlined,
@@ -10,16 +14,16 @@ import {
     MenuProps,
 } from "antd";
 
-import "./MainLayout.css";
+import styles from "./MainLayout.module.css";
 
 
 const {Sider} = Layout;
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const items: MenuItem[] = [
-    {label: "Ingest", key: "/ingest", icon: <UploadOutlined/>},
-    {label: "Search", key: "/search", icon: <SearchOutlined/>},
+const SIDEBAR_MENU_ITEMS: MenuItem[] = [
+    {label: <Link to={"/ingest"}>Ingest</Link>, key: "/ingest", icon: <UploadOutlined/>},
+    {label: <Link to={"/search"}>Search</Link>, key: "/search", icon: <SearchOutlined/>},
 ];
 
 /**
@@ -31,7 +35,7 @@ const MainLayout = () => {
     const [collapsed, setCollapsed] = useState(false);
 
     return (
-        <Layout className={"main-layout"}>
+        <Layout className={styles["mainLayout"]}>
             <Sider
                 collapsed={collapsed}
                 collapsible={true}
@@ -41,18 +45,22 @@ const MainLayout = () => {
                     setCollapsed(value);
                 }}
             >
-                <div className={"sider-logo-container"}>
+                <div className={styles["siderLogoContainer"]}>
                     <img
                         alt={"CLP Logo"}
-                        className={"sider-logo"}
+                        className={styles["siderLogo"]}
                         src={"/clp-logo.png"}/>
                 </div>
                 <Menu
-                    items={items}
+                    items={SIDEBAR_MENU_ITEMS}
                     mode={"inline"}/>
             </Sider>
+            <Layout>
+                <Outlet/>
+            </Layout>
         </Layout>
     );
 };
 
+
 export default MainLayout;

components/log-viewer-webui/client/src/ui/MainLayout.tsx renamed to components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx

@@ -0,0 +1,16 @@
+/**
+ * Presents compression statistics.
+ *
+ * @return
+ */
+const IngestPage = () => {
+    return (
+        <div>
+            <h1>Ingest Page</h1>
+            <p>This is the Ingest Page.</p>
+        </div>
+    );
+};
+
+
+export default IngestPage;

components/log-viewer-webui/client/src/pages/IngestPage.tsx

@@ -0,0 +1,16 @@
+/**
+ * Provides a search interface that allows users to query archives and visualize search results.
+ *
+ * @return
+ */
+const SearchPage = () => {
+    return (
+        <div>
+            <h1>Search Page</h1>
+            <p>This is the Search Page.</p>
+        </div>
+    );
+};
+
+
+export default SearchPage;

components/log-viewer-webui/client/src/pages/SearchPage.tsx

@@ -0,0 +1,20 @@
+import {createBrowserRouter} from "react-router";
+
+import MainLayout from "./components/Layout/MainLayout";
+import IngestPage from "./pages/IngestPage";
+import SearchPage from "./pages/SearchPage";
+
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        Component: MainLayout,
+        children: [
+            {path: "ingest", Component: IngestPage},
+            {path: "search", Component: SearchPage},
+        ],
+    },
+]);
+
+
+export default router;