new-log-viewer: Finish support for filtering by log-level and associated refactoring.

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

@@ -11,6 +11,7 @@ import React, {
 import LogExportManager, {EXPORT_LOG_PROGRESS_VALUE_MIN} from "../services/LogExportManager";
 import {Nullable} from "../typings/common";
 import {CONFIG_KEY} from "../typings/config";
+import {LogLevelFilter} from "../typings/logs";
 import {SEARCH_PARAM_NAMES} from "../typings/url";
 import {
     BeginLineNumToLogEventNumMap,
@@ -32,9 +33,10 @@ import {
     getConfig,
 } from "../utils/config";
 import {
-    clamp,
-    getChunkNum,
-} from "../utils/math";
+    findNearestLessThanOrEqualElement,
+    isWithinBounds,
+} from "../utils/data";
+import {clamp} from "../utils/math";
 import {
     updateWindowUrlHashParams,
     updateWindowUrlSearchParams,
@@ -56,6 +58,7 @@ interface StateContextType {
     exportLogs: () => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPageByAction: (navAction: NavigationAction) => void,
+    setLogLevelFilter: (newLogLevelFilter: LogLevelFilter) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -74,6 +77,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     exportLogs: () => null,
     loadFile: () => null,
     loadPageByAction: () => null,
+    setLogLevelFilter: () => null,
 });
 
 interface StateContextProviderProps {
@@ -170,6 +174,25 @@ const loadPageByCursor = (
     });
 };
 
+/**
+ * If the log event number changed, update the URL.
+ *
+ * @param logEventNum
+ * @param newLogEventNum
+ * @return Whether the log event number changed.
+ */
+const updateUrlIfModified = (logEventNum: number, newLogEventNum: Nullable<number>): boolean => {
+    if (newLogEventNum !== logEventNum) {
+        updateWindowUrlHashParams({
+            logEventNum: newLogEventNum,
+        });
+
+        return true;
+    }
+
+    return false;
+};
+
 /**
  * Provides state management for the application. This provider must be wrapped by
  * UrlContextProvider to function correctly.
@@ -186,15 +209,17 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     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 [pageNum, setPageNum] = useState<number>(STATE_DEFAULT.pageNum);
+    const [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
     const beginLineNumToLogEventNumRef =
         useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
     const [exportProgress, setExportProgress] =
         useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
 
     // Refs
     const logEventNumRef = useRef(logEventNum);
-    const numPagesRef = useRef<number>(STATE_DEFAULT.numPages);
-    const pageNumRef = useRef<number>(STATE_DEFAULT.pageNum);
+    const numPagesRef = useRef<number>(pageNum);
+    const pageNumRef = useRef<number>(numPages);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
@@ -220,7 +245,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
-                pageNumRef.current = args.pageNum;
+                setPageNum(args.pageNum);
+                setNumPages(args.numPages);
                 beginLineNumToLogEventNumRef.current = args.beginLineNumToLogEventNum;
                 updateWindowUrlHashParams({
                     logEventNum: args.logEventNum,
@@ -283,6 +309,16 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         handleMainWorkerResp,
     ]);
 
+    // Synchronize `pageNumRef` with `numPages`.
+    useEffect(() => {
+        pageNumRef.current = pageNum;
+    }, [pageNum]);
+
+    // Synchronize `numPagesRef` with `numPages`.
+    useEffect(() => {
+        numPagesRef.current = numPages;
+    }, [numPages]);
+
     const loadPageByAction = useCallback((navAction: NavigationAction) => {
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
@@ -298,14 +334,16 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, []);
 
-    // On `numEvents` update, recalculate `numPagesRef`.
-    useEffect(() => {
-        if (STATE_DEFAULT.numEvents === numEvents) {
+    const setLogLevelFilter = (newLogLevelFilter: LogLevelFilter) => {
+        if (null === mainWorkerRef.current) {
             return;
         }
 
-        numPagesRef.current = getChunkNum(numEvents, getConfig(CONFIG_KEY.PAGE_SIZE));
-    }, [numEvents]);
+        workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.SET_FILTER, {
+            cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current}},
+            logLevelFilter: newLogLevelFilter,
+        });
+    };
 
     // Synchronize `logEventNumRef` with `logEventNum`.
     useEffect(() => {
@@ -327,16 +365,23 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
         const clampedLogEventNum = clamp(logEventNum, 1, numEvents);
 
-        // eslint-disable-next-line no-warning-comments
-        // TODO: After filter is added, will need to find the largest <= log event number on the
-        // current page. Once found, we update the event number in the URL instead of sending a new
-        // request since the page has not changed.
+        if (isWithinBounds(logEventNumsOnPage, clampedLogEventNum)) {
+            if (updateUrlIfModified(logEventNum, clampedLogEventNum)) {
+                return;
+            }
 
-        if (logEventNumsOnPage.includes(clampedLogEventNum)) {
-            if (clampedLogEventNum !== logEventNum) {
-                updateWindowUrlHashParams({
-                    logEventNum: clampedLogEventNum,
-                });
+            const nearestIdx = findNearestLessThanOrEqualElement(
+                logEventNumsOnPage,
+                clampedLogEventNum
+            );
+
+            // First explicit cast since typescript thinks `nearestIdx` can be null, but
+            // it can't as `clampedLogEventNum` must be inside `logEventNumsOnPage`. Second explicit
+            // cast since typescript thinks `logEventNumsOnPage` can be empty, but it can't as
+            // isWithinBounds would have returned false.
+            const nearestLogEventNum = logEventNumsOnPage[nearestIdx as number] as number;
+            if (updateUrlIfModified(logEventNum, nearestLogEventNum)) {
+                return;
             }
 
             return;
@@ -380,12 +425,13 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 fileName: fileName,
                 logData: logData,
                 numEvents: numEvents,
-                numPages: numPagesRef.current,
-                pageNum: pageNumRef.current,
+                numPages: numPages,
+                pageNum: pageNum,
 
                 exportLogs: exportLogs,
                 loadFile: loadFile,
                 loadPageByAction: loadPageByAction,
+                setLogLevelFilter: setLogLevelFilter,
             }}
         >
             {children}

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

@@ -1,8 +1,10 @@
+import {Nullable} from "../../typings/common";
 import {
     Decoder,
     DecoderOptionsType,
 } from "../../typings/decoders";
 import {MAX_V8_STRING_LENGTH} from "../../typings/js";
+import {LogLevelFilter} from "../../typings/logs";
 import {
     BeginLineNumToLogEventNumMap,
     CURSOR_CODE,
@@ -17,6 +19,8 @@ import JsonlDecoder from "../decoders/JsonlDecoder";
 import {
     getEventNumCursorData,
     getLastEventCursorData,
+    getMatchingLogEventNum,
+    getNewNumPages,
     getPageNumCursorData,
     loadFile,
 } from "./utils";
@@ -128,6 +132,19 @@ class LogFileManager {
         this.#decoder.setFormatterOptions(options);
     }
 
+    /**
+     * Sets the log level filter.
+     *
+     * @param logLevelFilter
+     * @throws {Error} If changing the log level filter couldn't be set.
+     */
+    setLogLevelFilter (logLevelFilter: LogLevelFilter) {
+        const result: boolean = this.#decoder.setLogLevelFilter(logLevelFilter);
+        if (false === result) {
+            throw new Error("Failed to set log level filter for current decoder.");
+        }
+    }
+
     /**
      * Loads log events in the range
      * [`beginLogEventIdx`, `beginLogEventIdx + EXPORT_LOGS_CHUNK_SIZE`), or all remaining log
@@ -174,25 +191,29 @@ class LogFileManager {
         logEventNum: number
         logs: string,
         pageNum: number
+        numPages: number
     } {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
 
         const {
-            pageBeginLogEventNum,
-            pageEndLogEventNum,
-            matchingLogEventNum,
+            pageBeginIdx,
+            pageEndIdx,
+            matchingIdx,
         } = this.#getCursorData(cursor);
 
+        const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
+        const useFilter: boolean = null !== filteredLogEventMap;
+
         const results = this.#decoder.decodeRange(
-            pageBeginLogEventNum - 1,
-            pageEndLogEventNum - 1,
-            false
+            pageBeginIdx,
+            pageEndIdx,
+            useFilter
         );
 
         if (null === results) {
             throw new Error("Error occurred during decoding. " +
-                `pageBeginLogEventNum=${pageBeginLogEventNum}, ` +
-                `pageEndLogEventNum=${pageEndLogEventNum}`);
+                `pageBeginIdx=${pageBeginIdx}, ` +
+                `pageEndIdx=${pageEndIdx}`);
         }
 
         const messages: string[] = [];
@@ -211,13 +232,20 @@ class LogFileManager {
             currentLine += msg.split("\n").length - 1;
         });
 
-        const newPageNum: number = getChunkNum(pageBeginLogEventNum, this.#pageSize);
+        const matchingLogEventNum = getMatchingLogEventNum(matchingIdx, filteredLogEventMap);
+        const newPageNum: number = getChunkNum(pageBeginIdx + 1, this.#pageSize);
+        const newNumPages: number = getNewNumPages(
+            this.#numEvents,
+            this.#pageSize,
+            filteredLogEventMap,
+        );
 
         return {
             beginLineNumToLogEventNum: beginLineNumToLogEventNum,
             cursorLineNum: 1,
             logEventNum: matchingLogEventNum,
             logs: messages.join(""),
+            numPages: newNumPages,
             pageNum: newPageNum,
         };
     }
@@ -226,39 +254,42 @@ class LogFileManager {
      * Gets the data that corresponds to the cursor.
      *
      * @param cursor
-     * @return Log event numbers for:
+     * @return Index for:
      * - the range [begin, end) of the page containing the matching log event.
      * - the log event number that matches the cursor.
      * @throws {Error} if the type of cursor is not supported.
      */
     #getCursorData (cursor: CursorType): {
-        pageBeginLogEventNum: number,
-        pageEndLogEventNum: number,
-        matchingLogEventNum: number
+        pageBeginIdx: number,
+        pageEndIdx: number,
+        matchingIdx: Nullable<number>
     } {
         const {code, args} = cursor;
+        const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
+        const numEvents: number = filteredLogEventMap ?
+            filteredLogEventMap.length :
+            this.#numEvents;
+
+        if (0 === numEvents) {
+            return {pageBeginIdx: 0, pageEndIdx: 0, matchingIdx: null};
+        }
         switch (code) {
             case CURSOR_CODE.PAGE_NUM:
                 return getPageNumCursorData(
                     args.pageNum,
                     args.eventPositionOnPage,
-                    this.#numEvents,
-                    this.#pageSize
+                    numEvents,
+                    this.#pageSize,
                 );
-
             case CURSOR_CODE.LAST_EVENT:
-                return getLastEventCursorData(
-                    this.#numEvents,
-                    this.#pageSize
-                );
-
+                return getLastEventCursorData(numEvents, this.#pageSize);
             case CURSOR_CODE.EVENT_NUM:
                 return getEventNumCursorData(
                     args.eventNum,
-                    this.#numEvents,
-                    this.#pageSize
+                    numEvents,
+                    this.#pageSize,
+                    filteredLogEventMap,
                 );
-
             default:
                 throw new Error(`Unsupported cursor type: ${code}`);
         }