refactor(new-webui): Improve logging for easier debugging; Improve names of Mongo SocketIO library classes.

components/log-viewer-webui/client/src/api/socket/MongoCollectionSocket.ts → components/log-viewer-webui/client/src/api/socket/MongoSocketCollection.ts

@@ -4,15 +4,15 @@ import {
 } from "@common/index.js";
 import {Socket} from "socket.io-client";
 
-import {MongoCursorSocket} from "./MongoCursorSocket.js";
+import {MongoSocketCursor} from "./MongoSocketCursor.js";
 import {getSharedSocket} from "./SocketSingleton.js";
 
 
 /**
  * Socket connection to a MongoDB collection residing on a server. Class provides methods to
  * query the collection.
  */
-class MongoCollectionSocket {
+class MongoSocketCollection {
     #collectionName: string;
 
     #socket: Socket<ServerToClientEvents, ClientToServerEvents>;
@@ -25,19 +25,18 @@ class MongoCollectionSocket {
     constructor (collectionName: string) {
         this.#socket = getSharedSocket();
         this.#collectionName = collectionName;
-        console.log(`MongoDB collection:${collectionName} initialized.`);
     }
 
     /**
      * Selects documents in collection and returns a cursor-like object.
      *
      * @param query
      * @param options
-     * @return a `MongoCursorSocket`.
+     * @return a `MongoSocketCursor`.
      */
 
     find (query: object, options: object) {
-        return new MongoCursorSocket(
+        return new MongoSocketCursor(
             this.#socket,
             this.#collectionName,
             query,
@@ -47,4 +46,4 @@ class MongoCollectionSocket {
 }
 
 
-export default MongoCollectionSocket;
+export default MongoSocketCollection;

components/log-viewer-webui/client/src/api/socket/MongoCursorSocket.ts → components/log-viewer-webui/client/src/api/socket/MongoSocketCursor.ts

@@ -12,7 +12,7 @@ import {Nullable} from "../../typings/common";
 /**
  * A cursor-like object receiving MongoDB documents over a socket connection.
  */
-class MongoCursorSocket {
+class MongoSocketCursor {
     #socket: Socket<ServerToClientEvents, ClientToServerEvents>;
 
     #collectionName: string;
@@ -52,7 +52,11 @@ class MongoCursorSocket {
      * @throws {Error} if subscription fails.
      */
     async subscribe (onDataUpdate: (data: object[]) => void): Promise<void> {
-        console.log("Attempting to subscribe to query:", JSON.stringify(this.#query));
+        console.debug(
+            `Subscribing to query: ${JSON.stringify(this.#query)} ` +
+            `with options:${JSON.stringify(this.#options)} ` +
+            `on collection:${this.#collectionName}`
+        );
 
         this.#updateListener = (respArgs: {queryId: number; data: object[]}) => {
             // Server sends updates for multiple queryIDs using the same event name.
@@ -82,7 +86,12 @@ class MongoCursorSocket {
         onDataUpdate(response.data.initialDocuments);
 
         this.#queryId = response.data.queryId;
-        console.log(`Subscribed to queryID:${this.#queryId}.`);
+        console.debug(
+            `Successfully subscribed to query: ${JSON.stringify(this.#query)} ` +
+            `with options:${JSON.stringify(this.#options)} ` +
+            `on collection:${this.#collectionName} ` +
+            `MongoSocketIoQueryID:${this.#queryId}`
+        );
     }
 
     /**
@@ -105,10 +114,10 @@ class MongoCursorSocket {
             this.#updateListener = null;
         }
 
-        console.log(`Unsubscribed to queryID:${this.#queryId}.`);
+        console.debug(`Unsubscribed from MongoSocketIoQueryID:${this.#queryId}.`);
 
         this.#queryId = null;
     }
 }
 
-export {MongoCursorSocket};
+export {MongoSocketCursor};

components/log-viewer-webui/client/src/api/socket/useCursor.tsx

@@ -5,22 +5,22 @@ import {
 } from "react";
 
 import {Nullable} from "../../typings/common";
-import {MongoCursorSocket} from "./MongoCursorSocket.js";
+import {MongoSocketCursor} from "./MongoSocketCursor.js";
 
 
 /**
- * Custom hook which returns a real-time reactive array of documents from a `MongoCursorSocket`.
+ * Custom hook which returns a real-time reactive array of documents from a `MongoSocketCursor`.
  *
  * @template T The document type returned by the cursor.
- * @param query Function which returns a `MongoCursorSocket` instance or null.
+ * @param query Function which returns a `MongoSocketCursor` instance or null.
  * @param dependencies Array of dependencies for the query.
  * @return
- * - If `query` returns a `MongoCursorSocket` instance, then hook returns null while
+ * - If `query` returns a `MongoSocketCursor` instance, then hook returns null while
  * the subscription is pending, and a reactive array of documents when the subscription is ready.
  * - If `query` returns null, then the hook also returns null.
  */
 const useCursor = <T = object>(
-    query: () => Nullable<MongoCursorSocket>,
+    query: () => Nullable<MongoSocketCursor>,
     dependencies: DependencyList = []
 ): Nullable<T[]> => {
     const [data, setData] = useState<Nullable<T[]>>(null);
@@ -37,7 +37,6 @@ const useCursor = <T = object>(
 
         // Flag to ignore updates after unmounting.
         let ignore = false;
-        console.log("Subscribing to cursor");
 
         // Handler to set data updates from the server.
         const onDataUpdate = (dataUpdate: object[]) => {
@@ -63,7 +62,6 @@ const useCursor = <T = object>(
                 .then(() => {
                     // Unsubscribe will not run if the subscription failed since the promise was
                     // rejected.
-                    console.log("Unsubscribing from cursor");
                     cursor.unsubscribe();
                 })
                 .catch((error: unknown) => {

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/search-requests.ts

@@ -89,10 +89,17 @@ const handleQuerySubmit = (payload: QueryJobCreationSchema) => {
 
     submitQuery(payload)
         .then((result) => {
-            store.updateSearchJobId(result.data.searchJobId);
-            store.updateAggregationJobId(result.data.aggregationJobId);
+            const {searchJobId, aggregationJobId} = result.data;
+            store.updateSearchJobId(searchJobId);
+            store.updateAggregationJobId(aggregationJobId);
             store.updateSearchUiState(SEARCH_UI_STATE.QUERYING);
-            console.log("Query ID Returned", result);
+            console.debug(
+                "Search job created - ",
+                "Search job ID:",
+                searchJobId,
+                "Aggregation job ID:",
+                aggregationJobId
+            );
         })
         .catch((err: unknown) => {
             console.error("Failed to submit query:", err);
@@ -117,7 +124,7 @@ const handleQueryCancel = (payload: QueryJobSchema) => {
     cancelQuery(
         payload
     ).then(() => {
-        console.log("Query cancelled successfully");
+        console.debug("Query cancelled successfully");
     })
         .catch((err: unknown) => {
             console.error("Failed to cancel query:", err);

components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/useSearchResults.ts

@@ -1,4 +1,4 @@
-import MongoCollectionSocket from "../../../../api/socket/MongoCollectionSocket";
+import MongoSocketCollection from "../../../../api/socket/MongoSocketCollection";
 import {useCursor} from "../../../../api/socket/useCursor";
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../SearchState/index";
 import {
@@ -23,6 +23,10 @@ const useSearchResults = () => {
                 return null;
             }
 
+            console.log(
+                `Subscribing to updates to search results with job ID: ${searchJobId}`
+            );
+
             // Retrieve 1k most recent results.
             const options = {
                 sort: [
@@ -38,7 +42,7 @@ const useSearchResults = () => {
                 limit: SEARCH_MAX_NUM_RESULTS,
             };
 
-            const collection = new MongoCollectionSocket(searchJobId.toString());
+            const collection = new MongoSocketCollection(searchJobId.toString());
             return collection.find({}, options);
         },
         [searchJobId]

components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/useAggregationResults.ts

@@ -1,4 +1,4 @@
-import MongoCollectionSocket from "../../../../api/socket/MongoCollectionSocket";
+import MongoSocketCollection from "../../../../api/socket/MongoSocketCollection";
 import {useCursor} from "../../../../api/socket/useCursor";
 import {TimelineBucket} from "../../../../components/ResultsTimeline/typings";
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../SearchState/index";
@@ -20,7 +20,11 @@ const useAggregationResults = () => {
                 return null;
             }
 
-            const collection = new MongoCollectionSocket(aggregationJobId.toString());
+            console.log(
+                `Subscribing to updates to aggregation results with job ID: ${aggregationJobId}`
+            );
+
+            const collection = new MongoSocketCollection(aggregationJobId.toString());
             return collection.find({}, {});
         },
         [aggregationJobId]

components/log-viewer-webui/client/src/pages/SearchPage/SearchState/useResultsMetadata.ts

@@ -1,6 +1,6 @@
 import {SearchResultsMetadataDocument} from "@common/index.js";
 
-import MongoCollectionSocket from "../../../api/socket/MongoCollectionSocket";
+import MongoSocketCollection from "../../../api/socket/MongoSocketCollection";
 import {useCursor} from "../../../api/socket/useCursor";
 import {settings} from "../../../settings";
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "./index";
@@ -22,10 +22,14 @@ const useResultsMetadata = () => {
                 return null;
             }
 
-            const collection = new MongoCollectionSocket(
+            const collection = new MongoSocketCollection(
                 settings.MongoDbSearchResultsMetadataCollectionName
             );
 
+            console.log(
+                `Subscribing to updates for results metadata for search job ID: ${searchJobId}`
+            );
+
             return collection.find({_id: searchJobId.toString()}, {limit: 1});
         },
         [searchJobId]

components/log-viewer-webui/server/src/plugins/MongoSocketIoServer/index.ts

@@ -201,7 +201,7 @@ class MongoSocketIoServer {
         let watcherCollection = this.#collections.get(collectionName);
         if ("undefined" === typeof watcherCollection) {
             watcherCollection = new MongoWatcherCollection(collectionName, this.#mongoDb);
-            this.#fastify.log.info(`Initialize Mongo watcher collection:${collectionName}.`);
+            this.#fastify.log.debug(`Initialize Mongo watcher collection:${collectionName}.`);
             this.#collections.set(collectionName, watcherCollection);
         }
 
@@ -226,7 +226,7 @@ class MongoSocketIoServer {
     ): Promise<void> {
         const {collectionName, query, options} = requestArgs;
 
-        this.#fastify.log.info(
+        this.#fastify.log.debug(
             `Socket:${socket.id} requested query:${JSON.stringify(query)} ` +
             `with options:${JSON.stringify(options)} to collection:${collectionName}`
         );
@@ -252,7 +252,11 @@ class MongoSocketIoServer {
         callback({data: {queryId, initialDocuments}});
 
         this.#addQueryIdToSubscribedList(queryId, socket.id);
-        this.#fastify.log.info(`Socket:${socket.id} subscribed to queryID:${queryId}.`);
+        this.#fastify.log.info(
+            `Socket:${socket.id} subscribed to query:${JSON.stringify(query)} ` +
+            `with options:${JSON.stringify(options)} ` +
+            `on collection:${collectionName} with ID:${queryId}`
+        );
     }
 
     /**
@@ -288,7 +292,7 @@ class MongoSocketIoServer {
     #unsubscribe (socket: MongoCustomSocket, queryId: number) {
         const queryHash: string | undefined = this.#queryIdToQueryHashMap.get(queryId);
         if ("undefined" === typeof queryHash) {
-            this.#fastify.log.error(`QueryId ${queryId} not found in query map`);
+            this.#fastify.log.error(`Query:${queryId} not found in query map`);
 
             return;
         }
@@ -303,10 +307,10 @@ class MongoSocketIoServer {
         }
 
         const isLastSubscriber = collection.unsubscribe(queryId, socket.id);
-        this.#fastify.log.info(`Socket ${socket.id} unsubscribed from query ${queryId}`);
+        this.#fastify.log.info(`Socket:${socket.id} unsubscribed from query:${queryId}`);
 
         if (isLastSubscriber) {
-            this.#fastify.log.info(`QueryID:${queryId} deleted from query map.`);
+            this.#fastify.log.debug(`Query:${queryId} deleted from query map.`);
             this.#queryIdToQueryHashMap.delete(queryId);
         }
 
@@ -316,7 +320,7 @@ class MongoSocketIoServer {
         );
 
         if (false === collection.isReferenced()) {
-            this.#fastify.log.info(`Collection:${queryParams.collectionName}` +
+            this.#fastify.log.debug(`Collection:${queryParams.collectionName}` +
             " deallocated from server.");
             this.#collections.delete(queryParams.collectionName);
         }
@@ -334,8 +338,8 @@ class MongoSocketIoServer {
         requestArgs: {queryId: number}
     ): Promise<void> {
         const {queryId} = requestArgs;
-        this.#fastify.log.info(
-            `Socket:${socket.id} requested unsubscription to QueryId:${queryId}`
+        this.#fastify.log.debug(
+            `Socket:${socket.id} requested unsubscription to query:${queryId}`
         );
 
         const subscribedQueryIds = this.#subscribedQueryIdsMap.get(socket.id);