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

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

@@ -9,6 +9,7 @@ import {
 } from "@mui/joy";
 
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
+import SearchIcon from "@mui/icons-material/Search";
 
 import {StateContext} from "../../contexts/StateContextProvider";
 import {CURSOR_CODE} from "../../typings/worker";
@@ -25,14 +26,18 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, loadFile, startQuery} = useContext(StateContext);
 
     const handleOpenFile = () => {
         openFile((file) => {
             loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
         });
     };
 
+    const handleQueryClick = () => {
+        startQuery("ERROR", false, false);
+    };
+
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -71,6 +76,12 @@ const MenuBar = () => {
                 <Divider orientation={"vertical"}/>
 
                 <ExportLogsButton/>
+                <IconButton
+                    size={"sm"}
+                    onClick={handleQueryClick}
+                >
+                    <SearchIcon/>
+                </IconButton>
             </Sheet>
         </>
     );

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

@@ -20,6 +20,7 @@ import {
     EVENT_POSITION_ON_PAGE,
     FileSrcType,
     MainWorkerRespMessage,
+    QueryResults,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
     WorkerReq,
@@ -55,11 +56,13 @@ interface StateContextType {
     numPages: number,
     onDiskFileSizeInBytes: number,
     pageNum: number,
+    queryResults: QueryResults,
 
     exportLogs: () => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPageByAction: (navAction: NavigationAction) => void,
     setLogLevelFilter: (newLogLevelFilter: LogLevelFilter) => void,
+    startQuery: (searchString: string, isRegex: boolean, isCaseSensitive: boolean) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -75,11 +78,13 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
+    queryResults: new Map(),
 
     exportLogs: () => null,
     loadFile: () => null,
     loadPageByAction: () => null,
     setLogLevelFilter: () => null,
+    startQuery: () => null,
 });
 
 interface StateContextProviderProps {
@@ -226,17 +231,18 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
     // States
+    const [exportProgress, setExportProgress] =
+        useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
     const [onDiskFileSizeInBytes, setOnDiskFileSizeInBytes] =
         useState(STATE_DEFAULT.onDiskFileSizeInBytes);
     const [pageNum, setPageNum] = useState<number>(STATE_DEFAULT.pageNum);
+    const [queryResults, setQueryResults] = useState<QueryResults>(STATE_DEFAULT.queryResults);
     const beginLineNumToLogEventNumRef =
         useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
-    const [exportProgress, setExportProgress] =
-        useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
 
     // Refs
     const logEventNumRef = useRef(logEventNum);
@@ -276,12 +282,41 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 });
                 break;
             }
+            case WORKER_RESP_CODE.QUERY_RESULT:
+                setQueryResults((v) => {
+                    args.results.forEach((resultsPerPage, queryPageNum) => {
+                        if (false === v.has(queryPageNum)) {
+                            v.set(queryPageNum, []);
+                        }
+                        v.get(queryPageNum)?.push(...resultsPerPage);
+                    });
+
+                    return v;
+                });
+                break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;
         }
     }, []);
 
+    const startQuery = useCallback((
+        searchString: string,
+        isRegex: boolean,
+        isCaseSensitive: boolean
+    ) => {
+        if (null === mainWorkerRef.current) {
+            console.error("Unexpected null mainWorkerRef.current");
+
+            return;
+        }
+        workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.START_QUERY, {
+            searchString: searchString,
+            isRegex: isRegex,
+            isCaseSensitive: isCaseSensitive,
+        });
+    }, []);
+
     const exportLogs = useCallback(() => {
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
@@ -437,11 +472,13 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 numPages: numPages,
                 onDiskFileSizeInBytes: onDiskFileSizeInBytes,
                 pageNum: pageNum,
+                queryResults: queryResults,
 
                 exportLogs: exportLogs,
                 loadFile: loadFile,
                 loadPageByAction: loadPageByAction,
                 setLogLevelFilter: setLogLevelFilter,
+                startQuery: startQuery,
             }}
         >
             {children}

new-log-viewer/src/index.tsx

@@ -13,3 +13,4 @@ root.render(
         <App/>
     </StrictMode>
 );
+export {SEARCH_CHUNK_SIZE} from "./utils/config";

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

@@ -1,3 +1,4 @@
+/* eslint max-lines: ["error", 400] */
 import {
     Decoder,
     DecoderOptionsType,
@@ -11,11 +12,16 @@
     CursorType,
     EMPTY_PAGE_RESP,
     FileSrcType,
+    QueryResults,
     WORKER_RESP_CODE,
     WorkerResp,
 } from "../../typings/worker";
-import {EXPORT_LOGS_CHUNK_SIZE} from "../../utils/config";
+import {
+    EXPORT_LOGS_CHUNK_SIZE,
+    SEARCH_CHUNK_SIZE,
+} from "../../utils/config";
 import {getChunkNum} from "../../utils/math";
+import {defer} from "../../utils/time";
 import {formatSizeInBytes} from "../../utils/units";
 import ClpIrDecoder from "../decoders/ClpIrDecoder";
 import JsonlDecoder from "../decoders/JsonlDecoder";
@@ -31,35 +37,42 @@
  * 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;
 
     readonly #onDiskFileSizeInBytes: number;
 
-    #decoder: Decoder;
+    readonly #onQueryResults: (queryResults: QueryResults) => void;
 
-    #numEvents: number = 0;
+    #decoder: Decoder;
 
     /**
      * Private constructor for LogFileManager. This is not intended to be invoked publicly.
      * Instead, use LogFileManager.create() to create a new instance of the class.
      *
-     * @param decoder
-     * @param fileName
-     * @param onDiskFileSizeInBytes
-     * @param pageSize Page size for setting up pagination.
+     * @param params
+     * @param params.decoder
+     * @param params.fileName
+     * @param params.onDiskFileSizeInBytes
+     * @param params.pageSize Page size for setting up pagination.
      */
-    constructor (
+    constructor ({decoder, fileName, onDiskFileSizeInBytes, pageSize, onQueryResults}: {
         decoder: Decoder,
         fileName: string,
         onDiskFileSizeInBytes: number,
         pageSize: number,
-    ) {
+        onQueryResults: (queryResults: QueryResults) => void,
+    }) {
+        this.#decoder = decoder;
         this.#fileName = fileName;
-        this.#onDiskFileSizeInBytes = onDiskFileSizeInBytes;
         this.#pageSize = pageSize;
-        this.#decoder = decoder;
+        this.#onDiskFileSizeInBytes = onDiskFileSizeInBytes;
+        this.#onQueryResults = onQueryResults;
 
         // Build index for the entire file.
         const buildResult = decoder.build();
@@ -90,17 +103,26 @@
      * File object.
      * @param pageSize Page size for setting up pagination.
      * @param decoderOptions Initial decoder options.
+     * @param onQueryResults
      * @return A Promise that resolves to the created LogFileManager instance.
      */
     static async create (
         fileSrc: FileSrcType,
         pageSize: number,
-        decoderOptions: DecoderOptionsType
+        decoderOptions: DecoderOptionsType,
+        onQueryResults: (queryResults: QueryResults) => void,
     ): Promise<LogFileManager> {
         const {fileName, fileData} = await loadFile(fileSrc);
         const decoder = await LogFileManager.#initDecoder(fileName, fileData, decoderOptions);
 
-        return new LogFileManager(decoder, fileName, fileData.length, pageSize);
+        return new LogFileManager({
+            decoder: decoder,
+            fileName: fileName,
+            onDiskFileSizeInBytes: fileData.length,
+            pageSize: pageSize,
+
+            onQueryResults: onQueryResults,
+        });
     }
 
     /**
@@ -254,6 +276,84 @@
         };
     }
 
+    /**
+     * Creates a RegExp object based on the given search string and options,
+     * and starts querying the first log chunk.
+     *
+     * @param searchString
+     * @param isRegex
+     * @param isCaseSensitive
+     */
+    startQuery (searchString: string, isRegex: boolean, isCaseSensitive: boolean): void {
+        this.#queryId++;
+
+        // If the search string is empty, or there are no logs, return
+        if ("" === searchString || 0 === this.#numEvents) {
+            return;
+        }
+
+        // Construct search RegExp
+        const regexPattern = isRegex ?
+            searchString :
+            searchString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const regexFlags = isCaseSensitive ?
+            "" :
+            "i";
+        const searchRegex = new RegExp(regexPattern, regexFlags);
+
+        this.#searchChunkAndScheduleNext(this.#queryId, 0, searchRegex);
+    }
+
+    /**
+     * Queries a chunk of log events, sends the results,
+     * and schedules the next chunk query if more log events remain.
+     *
+     * @param queryId
+     * @param beginSearchIdx The beginning index of the search range.
+     * @param searchRegex
+     */
+    #searchChunkAndScheduleNext (
+        queryId: number,
+        beginSearchIdx: number,
+        searchRegex: RegExp
+    ): void {
+        if (queryId !== this.#queryId) {
+            // Current task no longer corresponds to the latest query in the LogFileManager.
+            return;
+        }
+        const endSearchIdx = Math.min(beginSearchIdx + SEARCH_CHUNK_SIZE, this.#numEvents);
+        const results: QueryResults = new Map();
+        const decodedEvents = this.#decoder.decodeRange(
+            beginSearchIdx,
+            endSearchIdx,
+            null !== this.#decoder.getFilteredLogEventMap()
+        );
+
+        decodedEvents?.forEach(([message, , , logEventNum]) => {
+            const match = message.match(searchRegex);
+            if (match && "number" === typeof match.index) {
+                const pageNum = Math.ceil(logEventNum / this.#pageSize);
+                if (false === results.has(pageNum)) {
+                    results.set(pageNum, []);
+                }
+                results.get(pageNum)?.push({
+                    logEventNum: logEventNum,
+                    message: message,
+                    matchRange: [match.index,
+                        (match.index + match[0].length)],
+                });
+            }
+        });
+
+        this.#onQueryResults(results);
+
+        if (endSearchIdx < this.#numEvents) {
+            defer(() => {
+                this.#searchChunkAndScheduleNext(queryId, endSearchIdx, searchRegex);
+            });
+        }
+    }
+
     /**
      * Gets the data that corresponds to the cursor.
      *