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,41 @@ const loadPageByCursor = (
     });
 };
 
+/**
+ * If the new log event number is within the page boundaries, update the url with the nearest log
+ * event and return true. If the new log event number is outside page boundaries, do not update and
+ * return false.
+ *
+ * @param logEventNum
+ * @param logEventNumsOnPage
+ * @return Whether the log event number is within page boundaries.
+ */
+const updateUrlIfEventOnPage = (
+    logEventNum: number,
+    logEventNumsOnPage: number[]
+): boolean => {
+    if (!isWithinBounds(logEventNumsOnPage, logEventNum)) {
+        return false;
+    }
+
+    const nearestIdx = findNearestLessThanOrEqualElement(
+        logEventNumsOnPage,
+        logEventNum
+    );
+
+    // First explicit cast since typescript thinks `nearestIdx` can be null, but
+    // it can't as `logEventNum` must be a value in `logEventNumsOnPage` array.
+    // 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;
+
+    updateWindowUrlHashParams({
+        logEventNum: nearestLogEventNum,
+    });
+
+    return true;
+};
+
 /**
  * Provides state management for the application. This provider must be wrapped by
  * UrlContextProvider to function correctly.
@@ -186,15 +225,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 [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
+    const [pageNum, setPageNum] = useState<number>(STATE_DEFAULT.pageNum);
     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>(numPages);
+    const pageNumRef = useRef<number>(pageNum);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
@@ -220,7 +261,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
-                pageNumRef.current = args.pageNum;
+                setNumPages(args.numPages);
+                setPageNum(args.pageNum);
                 beginLineNumToLogEventNumRef.current = args.beginLineNumToLogEventNum;
                 updateWindowUrlHashParams({
                     logEventNum: args.logEventNum,
@@ -283,6 +325,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 +350,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,18 +381,8 @@ 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 (logEventNumsOnPage.includes(clampedLogEventNum)) {
-            if (clampedLogEventNum !== logEventNum) {
-                updateWindowUrlHashParams({
-                    logEventNum: clampedLogEventNum,
-                });
-            }
-
+        if (updateUrlIfEventOnPage(clampedLogEventNum, logEventNumsOnPage)) {
+            // Do not request a new page, if the log event can be found on the current page.
             return;
         }
 
@@ -380,12 +424,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,9 +19,12 @@
 import {
     getEventNumCursorData,
     getLastEventCursorData,
+    getMatchingLogEventNum,
+    getNewNumPages,
     getPageNumCursorData,
+    getEmptyPage,
     loadFile,
 } from "./utils";
 
 
 /**
@@ -128,6 +133,19 @@
         this.#decoder.setFormatterOptions(options);
     }
 
+    /**
+     * Sets the log level filter.
+     *
+     * @param logLevelFilter
+     * @throws {Error} If 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
@@ -168,31 +186,42 @@
      * numbers, and the line number of the first line in the cursor identified event.
      * @throws {Error} if any error occurs during decode.
      */
     loadPage (cursor: CursorType): {
         beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
         cursorLineNum: number
         logEventNum: number
         logs: string,
         pageNum: number
+        numPages: number
     } {
         console.debug(`loadPage: cursor=${JSON.stringify(cursor)}`);
 
+        const filteredLogEventMap = this.#decoder.getFilteredLogEventMap();
+
+        const numEvents: number = filteredLogEventMap ?
+            filteredLogEventMap.length :
+            this.#numEvents;
+
+        if (0 === numEvents) {
+            return getEmptyPage();
+        }
+
         const {
-            pageBeginLogEventNum,
-            pageEndLogEventNum,
-            matchingLogEventNum,
-        } = this.#getCursorData(cursor);
+            pageBeginIdx,
+            pageEndIdx,
+            matchingIdx,
+        } = this.#getCursorData(cursor, numEvents);
 
         const results = this.#decoder.decodeRange(
-            pageBeginLogEventNum - 1,
-            pageEndLogEventNum - 1,
-            false
+            pageBeginIdx,
+            pageEndIdx,
+            null !== filteredLogEventMap,
         );
 
         if (null === results) {
             throw new Error("Error occurred during decoding. " +
-                `pageBeginLogEventNum=${pageBeginLogEventNum}, ` +
-                `pageEndLogEventNum=${pageEndLogEventNum}`);
+                `pageBeginIdx=${pageBeginIdx}, ` +
+                `pageEndIdx=${pageEndIdx}`);
         }
 
         const messages: string[] = [];
@@ -211,13 +240,20 @@
             currentLine += msg.split("\n").length - 1;
         });
 
-        const newPageNum: number = getChunkNum(pageBeginLogEventNum, this.#pageSize);
+        const newPageNum: number = getChunkNum(pageBeginIdx + 1, this.#pageSize);
+        const matchingLogEventNum = 1 + (
+            null !== filteredLogEventMap ?
+                (filteredLogEventMap[matchingIdx] as number) :
+                matchingIdx
+        );
+        const newNumPages: number = getChunkNum(numEvents, this.#pageSize);
 
         return {
             beginLineNumToLogEventNum: beginLineNumToLogEventNum,
             cursorLineNum: 1,
             logEventNum: matchingLogEventNum,
             logs: messages.join(""),
+            numPages: newNumPages,
             pageNum: newPageNum,
         };
     }
@@ -226,43 +262,40 @@
      * Gets the data that corresponds to the cursor.
      *
      * @param cursor
-     * @return Log event numbers for:
+     * @param numEvents
+     * @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
+    #getCursorData (cursor: CursorType, numEvents: number): {
+        pageBeginIdx: number,
+        pageEndIdx: number,
+        matchingIdx: number,
     } {
         const {code, args} = cursor;
+
         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,
+                    this.#decoder.getFilteredLogEventMap(),
                 );
-
             default:
                 throw new Error(`Unsupported cursor type: ${code}`);
         }
     }
 }
 
 export default LogFileManager;