new-log-viewer: Add log query support in StateContextProvider.

new-log-viewer/src/components/MenuBar/index.tsx

@@ -12,6 +12,7 @@ import {
 
 import DescriptionIcon from "@mui/icons-material/Description";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
+import SearchIcon from "@mui/icons-material/Search";
 import SettingsIcon from "@mui/icons-material/Settings";
 
 import {StateContext} from "../../contexts/StateContextProvider";
@@ -31,10 +32,14 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, loadFile, queryLogs} = useContext(StateContext);
 
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
 
+    const handleSearchButtonClick = () => {
+        queryLogs("scheduled", false, false);
+    };
+
     const handleOpenFileButtonClick = () => {
         openFile((file) => {
             loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
@@ -78,6 +83,11 @@ const MenuBar = () => {
                     <SettingsIcon/>
                 </SmallIconButton>
                 <ExportLogsButton/>
+                <SmallIconButton
+                    onClick={handleSearchButtonClick}
+                >
+                    <SearchIcon/>
+                </SmallIconButton>
             </Sheet>
             <SettingsModal
                 isOpen={isSettingsModalOpen}

new-log-viewer/src/contexts/StateContextProvider.tsx

@@ -14,6 +14,7 @@ import {CONFIG_KEY} from "../typings/config";
 import {SEARCH_PARAM_NAMES} from "../typings/url";
 import {
     BeginLineNumToLogEventNumMap,
+    ChunkResults,
     CURSOR_CODE,
     CursorType,
     FileSrcType,
@@ -51,6 +52,7 @@ interface StateContextType {
     exportLogs: () => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPage: (newPageNum: number) => void,
+    queryLogs: (searchString: string, isRegex: boolean, isCaseSensitive: boolean) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -69,6 +71,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     exportLogs: () => null,
     loadFile: () => null,
     loadPage: () => null,
+    queryLogs: () => null,
 });
 
 interface StateContextProviderProps {
@@ -137,7 +140,7 @@ const workerPostReq = <T extends WORKER_REQ_CODE>(
  * @param props.children
  * @return
  */
-// eslint-disable-next-line max-lines-per-function
+// eslint-disable-next-line max-lines-per-function,max-statements
 const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
@@ -157,6 +160,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
+    const queryResults = useRef<ChunkResults>({});
+
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
         console.log(`[MainWorker -> Renderer] code=${code}`);
@@ -184,12 +189,39 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 updateLogEventNumInUrl(lastLogEventNum, logEventNumRef.current);
                 break;
             }
+            case WORKER_RESP_CODE.CHUNK_RESULT:
+                console.log(`[MainWorker -> Renderer] CHUNK_RESULT: ${JSON.stringify(args)}`);
+                for (const [pageNumStr, results] of Object.entries(args)) {
+                    const pageNum = parseInt(pageNumStr, 10);
+                    if (!queryResults.current[pageNum]) {
+                        queryResults.current[pageNum] = [];
+                    }
+                    queryResults.current[pageNum].push(...results);
+                }
+                break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;
         }
     }, []);
 
+    const queryLogs = useCallback((
+        searchString: string,
+        isRegex: boolean,
+        isCaseSensitive: boolean
+    ) => {
+        if (null === mainWorkerRef.current) {
+            console.error("Unexpected null mainWorkerRef.current");
+
+            return;
+        }
+        workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.QUERY_LOG, {
+            searchString: searchString,
+            isRegex: isRegex,
+            isCaseSensitive: isCaseSensitive,
+        });
+    }, []);
+
     const exportLogs = useCallback(() => {
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
@@ -335,6 +367,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 exportLogs: exportLogs,
                 loadFile: loadFile,
                 loadPage: loadPage,
+                queryLogs: queryLogs,
             }}
         >
             {children}

new-log-viewer/src/services/LogFileManager.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+// TODO: either increase max-lines or refactor the code
 import {
     Decoder,
     DecoderOptionsType,
@@ -6,19 +8,23 @@ import {
 import {MAX_V8_STRING_LENGTH} from "../typings/js";
 import {
     BeginLineNumToLogEventNumMap,
+    ChunkResults,
     CURSOR_CODE,
     CursorType,
     FileSrcType,
 } from "../typings/worker";
 import {EXPORT_LOGS_CHUNK_SIZE} from "../utils/config";
 import {getUint8ArrayFrom} from "../utils/http";
 import {getChunkNum} from "../utils/math";
+import {defer} from "../utils/time";
 import {formatSizeInBytes} from "../utils/units";
 import {getBasenameFromUrlOrDefault} from "../utils/url";
 import ClpIrDecoder from "./decoders/ClpIrDecoder";
 import JsonlDecoder from "./decoders/JsonlDecoder";
 
 
+const SEARCH_CHUNK_SIZE = 10000;
+
 /**
  * Loads a file from a given source.
  *
@@ -49,13 +55,17 @@ const loadFile = async (fileSrc: FileSrcType)
  * Class to manage the retrieval and decoding of a given log file.
  */
 class LogFileManager {
+    readonly #fileName: string;
+
+    readonly #numEvents: number = 0;
+
     readonly #pageSize: number;
 
-    readonly #fileName: string;
+    #queryId: number = 0;
 
-    #decoder: Decoder;
+    readonly #chunkResultsHandler: (chunkResults: ChunkResults) => void;
 
-    #numEvents: number = 0;
+    #decoder: Decoder;
 
     /**
      * Private constructor for LogFileManager. This is not intended to be invoked publicly.
@@ -64,15 +74,18 @@ class LogFileManager {
      * @param decoder
      * @param fileName
      * @param pageSize Page size for setting up pagination.
+     * @param chunkResultsHandler
      */
     constructor (
         decoder: Decoder,
         fileName: string,
         pageSize: number,
+        chunkResultsHandler: (chunkResults: ChunkResults) => void,
     ) {
+        this.#decoder = decoder;
         this.#fileName = fileName;
         this.#pageSize = pageSize;
-        this.#decoder = decoder;
+        this.#chunkResultsHandler = chunkResultsHandler;
 
         // Build index for the entire file
         const buildIdxResult = decoder.buildIdx(0, LOG_EVENT_FILE_END_IDX);
@@ -99,17 +112,19 @@ class LogFileManager {
      * File object.
      * @param pageSize Page size for setting up pagination.
      * @param decoderOptions Initial decoder options.
+     * @param chunkResultsHandler
      * @return A Promise that resolves to the created LogFileManager instance.
      */
     static async create (
         fileSrc: FileSrcType,
         pageSize: number,
-        decoderOptions: DecoderOptionsType
+        decoderOptions: DecoderOptionsType,
+        chunkResultsHandler: (chunkResults: ChunkResults) => void,
     ): Promise<LogFileManager> {
         const {fileName, fileData} = await loadFile(fileSrc);
         const decoder = await LogFileManager.#initDecoder(fileName, fileData, decoderOptions);
 
-        return new LogFileManager(decoder, fileName, pageSize);
+        return new LogFileManager(decoder, fileName, pageSize, chunkResultsHandler);
     }
 
     /**
@@ -153,6 +168,10 @@ class LogFileManager {
         this.#decoder.setDecoderOptions(options);
     }
 
+    incrementQueryId () {
+        this.#queryId++;
+    }
+
     /**
      * Loads log events in the range
      * [`beginLogEventIdx`, `beginLogEventIdx + EXPORT_LOGS_CHUNK_SIZE`), or all remaining log
@@ -230,6 +249,78 @@ class LogFileManager {
         };
     }
 
+    /**
+     * Searches for log events based on the given search string.
+     *
+     * @param searchString The search string.
+     * @param isRegex Whether the search string is a regular expression.
+     * @param matchCase Whether the search is case-sensitive.
+     * @return An object containing the search results.
+     */
+    startQuery (searchString: string, isRegex: boolean, matchCase: boolean): void {
+        this.incrementQueryId();
+
+        // If the search string is empty, or there are no logs, return
+        if ("" === searchString) {
+            return;
+        } else if (0 === this.#numEvents) {
+            return;
+        }
+
+        // Construct search RegExp
+        const regexPattern = isRegex ?
+            searchString :
+            searchString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const regexFlags = matchCase ?
+            "" :
+            "i";
+        const searchRegex = new RegExp(regexPattern, regexFlags);
+        this.#searchChunk(this.#queryId, 0, searchRegex);
+    }
+
+    /**
+     * Searches for log events in the given range.
+     *
+     * @param queryId
+     * @param beginSearchIdx The beginning index of the search range.
+     * @param searchRegex The regular expression to search
+     * @return
+     */
+    #searchChunk (queryId: number, beginSearchIdx: number, searchRegex: RegExp): void {
+        if (queryId !== this.#queryId) {
+            return;
+        }
+
+        const endSearchIdx = Math.min(beginSearchIdx + SEARCH_CHUNK_SIZE, this.#numEvents);
+        const results: ChunkResults = {};
+
+        for (let eventIdx = beginSearchIdx; eventIdx < endSearchIdx; eventIdx++) {
+            const contentString = this.#decoder.decode(eventIdx, eventIdx + 1)?.[0]?.[0] || "";
+            const match = contentString.match(searchRegex);
+            if (match && "number" === typeof match.index) {
+                const logEventNum = eventIdx + 1;
+                const pageNum = Math.ceil(logEventNum / this.#pageSize);
+                if (!results[pageNum]) {
+                    results[pageNum] = [];
+                }
+                results[pageNum].push({
+                    logEventNum: logEventNum,
+                    message: contentString,
+                    matchRange: [match.index,
+                        (match.index + match[0].length)],
+                });
+            }
+        }
+
+        if (endSearchIdx < this.#numEvents) {
+            defer(() => {
+                this.#searchChunk(queryId, endSearchIdx, searchRegex);
+            });
+        }
+
+        this.#chunkResultsHandler(results);
+    }
+
     /**
      * Gets the range of log event numbers for the page containing the given cursor.
      *

new-log-viewer/src/services/MainWorker.ts

@@ -4,6 +4,7 @@ import dayjsUtc from "dayjs/plugin/utc";
 
 import {LOG_LEVEL} from "../typings/logs";
 import {
+    ChunkResults,
     MainWorkerReqMessage,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -36,6 +37,16 @@ const postResp = <T extends WORKER_RESP_CODE>(
     postMessage({code, args});
 };
 
+
+/**
+ * Post a response of a query chunk.
+ *
+ * @param chunkResults
+ */
+const chunkResultsHandler = (chunkResults: ChunkResults) => {
+    postResp(WORKER_RESP_CODE.CHUNK_RESULT, chunkResults);
+};
+
 // eslint-disable-next-line no-warning-comments
 // TODO: Break this function up into smaller functions.
 // eslint-disable-next-line max-lines-per-function,max-statements
@@ -67,7 +78,8 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 LOG_FILE_MANAGER = await LogFileManager.create(
                     args.fileSrc,
                     args.pageSize,
-                    args.decoderOptions
+                    args.decoderOptions,
+                    chunkResultsHandler
                 );
 
                 postResp(WORKER_RESP_CODE.LOG_FILE_INFO, {
@@ -92,6 +104,23 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                     LOG_FILE_MANAGER.loadPage(args.cursor)
                 );
                 break;
+            case WORKER_REQ_CODE.QUERY_LOG:
+                if (null === LOG_FILE_MANAGER) {
+                    throw new Error("Log file manager hasn't been initialized");
+                }
+                if (
+                    "string" !== typeof args.searchString ||
+                    "boolean" !== typeof args.isRegex ||
+                    "boolean" !== typeof args.isCaseSensitive
+                ) {
+                    throw new Error("Invalid arguments for QUERY_LOG");
+                }
+                LOG_FILE_MANAGER.startQuery(
+                    args.searchString,
+                    args.isRegex,
+                    args.isCaseSensitive
+                );
+                break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;