feat(new-webui): MongoCDC Framework

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

@@ -7,7 +7,7 @@
     "build": "tsc -b && vite build",
     "lint:check": "eslint",
     "lint:fix": "eslint --fix",
-    "start": "vite",
+    "start": "vite --host 10.1.0.21",
     "antd": "VITE_USE_ANTD_APP=true npm run start"
   },
   "author": "YScope Inc. <dev@yscope.com>",
@@ -21,13 +21,20 @@
     "antd": "^5.24.5",
     "axios": "^1.7.9",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.19.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
     "eslint-config-yscope": "latest",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
     "typescript": "~5.6.2",
     "vite": "^6.2.5"
   }

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

@@ -1,19 +1,44 @@
-import {CssVarsProvider} from "@mui/joy";
+// import { CssVarsProvider } from "@mui/joy";
+// import { LOCAL_STORAGE_KEY } from "./typings/config";
+// import QueryStatus from "./ui/QueryStatus";
+import MongoReplicaCollection from "./mongoCDCLib/MongoReplicaCollection";
+import {useTracker} from "./mongoCDCLib/useTracker";
 
-import {LOCAL_STORAGE_KEY} from "./typings/config";
-import QueryStatus from "./ui/QueryStatus";
 
+const collection = new MongoReplicaCollection("results-1");
 
 /**
  * Renders the main application.
  *
  * @return
  */
 const App = () => {
+    const results = useTracker(
+        () => collection.find({}, {}),
+        []
+    );
+
+    console.log("results len:", results.length);
+    for (let i = 0; i < results.length; i++) {
+        console.log(results[i]);
+    }
+
+    // const results = ['123'];
+    // results = ["123"];
+
     return (
-        <CssVarsProvider modeStorageKey={LOCAL_STORAGE_KEY.THEME}>
-            <QueryStatus/>
-        </CssVarsProvider>
+        <div>
+            {results.map((r) => (
+                <div>
+                    {JSON.stringify(r)}
+                </div>
+            ))}
+
+        </div>
+
+    // <CssVarsProvider modeStorageKey={LOCAL_STORAGE_KEY.THEME}>
+    //     <QueryStatus/>
+    // </CssVarsProvider>
     );
 };
 

components/log-viewer-webui/client/src/mongoCDCLib/MongoReplicaCollection.ts

@@ -0,0 +1,41 @@
+import {
+    io,
+    Socket,
+} from "socket.io-client";
+
+import MongoReplicaCollectionReactiveCursor from "./MongoReplicaCollectionReactiveCursor.js";
+
+
+class MongoReplicaCollection {
+    private socket: Socket;
+
+    constructor (collectionName: string) {
+        // TODO: use the server URL from the environment / constructor args
+        this.socket = io();
+
+        this.socket.emit("collection::init", {
+            collectionName: collectionName,
+        });
+    }
+
+    // TODO: add support for non-reactive cursors
+    find (query: object, options: object) {
+        return new MongoReplicaCollectionReactiveCursor({
+            options: options,
+            query: query,
+            socket: this.socket,
+        });
+    }
+}
+
+// const main = async () => {
+//     const collection = new MongoReplicaCollection("3");
+//     const cursor = collection.find({}, {});
+
+//     console.log(await cursor.toArray());
+// };
+
+//
+// await main();
+
+export default MongoReplicaCollection;

components/log-viewer-webui/client/src/mongoCDCLib/MongoReplicaCollectionCursor.ts

@@ -0,0 +1,67 @@
+import { Socket } from "socket.io-client";
+
+interface CursorConstructorArgs {
+    socket: Socket;
+    query: object;
+    options: object;
+}
+
+class MongoReplicaCollectionCursor {
+    socket: Socket;
+
+    findQuery: object;
+
+    findOptions: object;
+
+    constructor ({socket, query, options}: CursorConstructorArgs) {
+        this.socket = socket;
+
+        this.findQuery = query;
+        this.findOptions = options;
+    }
+
+    sort (sort: object): this {
+        this.findOptions = {
+            ...this.findOptions,
+            sort: sort,
+        };
+
+        return this;
+    }
+
+    limit (number: number): this {
+        this.findOptions = {
+            ...this.findOptions,
+            limit: number,
+        };
+
+        return this;
+    }
+
+    skip (offset:number): this {
+        this.findOptions = {
+            ...this.findOptions,
+            skip: offset,
+        };
+
+        return this;
+    }
+
+    toArray () {
+        return new Promise((resolve, reject) => {
+            this.socket.emit("collection::find::toArray", {
+                query: this.findQuery,
+                options: this.findOptions,
+            }, (response: { error?: any; data?: any }) => {
+                if (response.error) {
+                    return reject(response.error);
+                }
+
+                return resolve(response.data);
+            });
+        });
+    }
+}
+
+
+export default MongoReplicaCollectionCursor;

components/log-viewer-webui/client/src/mongoCDCLib/MongoReplicaCollectionReactiveCursor.ts

@@ -0,0 +1,66 @@
+import MongoReplicaCollectionCursor from "./MongoReplicaCollectionCursor.js";
+import { Socket } from "socket.io-client";
+
+interface Listener {
+    onData: (data: any) => void;
+    onError: (error: any) => void;
+}
+
+interface ReactiveArrayCallback {
+    onData: (data: any) => void;
+    onError: (error: any) => void;
+}
+
+class MongoReplicaCollectionReactiveCursor extends MongoReplicaCollectionCursor {
+    /**
+     * @type {Listener}
+     */
+    private listener: Listener | null = null;
+
+    constructor (props: {socket: Socket; query: object; options: object}) {
+        super(props);
+
+        this.socket.on("collection::find::update", (response: {error?: any; data?: any}) => {
+            if (response.error) {
+                return this.listener?.onError(response.error);
+            }
+
+            return this.listener?.onData(response.data);
+        });
+    }
+
+    /**
+     * Subscribe to the collection
+     *
+     * @param {{onData: Function, onError: Function}} callback
+     * @return {function(): void} The cleanup function.
+     */
+    toReactiveArray (callback: ReactiveArrayCallback): () => void {
+        console.log("toReactiveArrya");
+        let queryHash: string | undefined;
+        this.socket.emit("collection::find::toReactiveArray", {
+            query: this.findQuery,
+            options: this.findOptions,
+        }, (response: {error?: any; queryHash?: string}) => {
+            if (response.error) {
+                return callback.onError(response.error);
+            }
+
+            ({queryHash} = response);
+
+            this.listener = callback;
+        });
+
+        return () => {
+            // TODO: the server should also rely on some heartbeat from the client
+            //  for deciding when to free the resources.
+            this.socket.emit("collection::find::unsubscribe", {
+                queryHash: queryHash,
+            });
+
+            this.socket.off("collection::find::update");
+        };
+    }
+}
+
+export default MongoReplicaCollectionReactiveCursor;

components/log-viewer-webui/client/src/mongoCDCLib/useTracker.tsx

@@ -0,0 +1,40 @@
+import {
+    useEffect,
+    useState,
+} from "react";
+
+/**
+ * Custom hook to track a MongoDB cursor and return its data as an array.
+ *
+ * @param {Function} getCursor Function that returns a MongoReplicaCollectionReactiveCursor.
+ * @param {object[]} dependencies Array of dependencies for the effect.
+ * @return {object[]} The data from the cursor as an array.
+ */
+const useTracker = (
+    getCursor: Function,
+    dependencies: object[] = []
+): any[] => {
+    const [data, setData] = useState<any[]>([]);
+
+    useEffect(() => {
+        const cursor = getCursor();
+
+        const handleData = (newData: any[]) => setData(newData);
+
+        const unsubscribe = cursor.toReactiveArray({
+            onData: handleData,
+            onError: (error: any) => {
+                console.error("Error fetching data:", error);
+            },
+        });
+
+        return () => {
+            unsubscribe();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+
+    return data;
+};
+
+export {useTracker};

components/log-viewer-webui/client/vite.config.ts

@@ -14,6 +14,11 @@ export default defineConfig({
                 target: "http://localhost:3000/",
                 changeOrigin: true,
             },
+            "/socket.io/": {
+                target: "ws://localhost:3000/",
+                changeOrigin: true,
+                ws: true,
+            },
         },
     },
     publicDir: "public",