new-log-viewer: Add support for exporting decoded logs as a file.

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

@@ -10,9 +10,10 @@ import {
     Typography,
 } from "@mui/joy";
 
-import Description from "@mui/icons-material/Description";
+import DescriptionIcon from "@mui/icons-material/Description";
+import DownloadIcon from "@mui/icons-material/Download";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
-import Settings from "@mui/icons-material/Settings";
+import SettingsIcon from "@mui/icons-material/Settings";
 
 import {StateContext} from "../../contexts/StateContextProvider";
 import {CURSOR_CODE} from "../../typings/worker";
@@ -30,7 +31,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, exportLogs, loadFile} = useContext(StateContext);
 
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
 
@@ -48,6 +49,10 @@ const MenuBar = () => {
         setIsSettingsModalOpen(true);
     };
 
+    const handleExportLogsButtonClick = () => {
+        exportLogs();
+    };
+
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -58,7 +63,7 @@ const MenuBar = () => {
                     flexGrow={1}
                     gap={0.5}
                 >
-                    <Description/>
+                    <DescriptionIcon/>
                     <Typography level={"body-md"}>
                         {fileName}
                     </Typography>
@@ -74,7 +79,10 @@ const MenuBar = () => {
                 <SmallIconButton
                     onClick={handleSettingsModalOpen}
                 >
-                    <Settings/>
+                    <SettingsIcon/>
+                </SmallIconButton>
+                <SmallIconButton onClick={handleExportLogsButtonClick}>
+                    <DownloadIcon/>
                 </SmallIconButton>
             </Sheet>
             <SettingsModal

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

@@ -1,3 +1,4 @@
+/* eslint max-lines: ["error", 400] */
 import React, {
     createContext,
     useCallback,
@@ -7,6 +8,7 @@ import React, {
     useState,
 } from "react";
 
+import LogExportManager from "../services/LogExportManager";
 import {Nullable} from "../typings/common";
 import {CONFIG_KEY} from "../typings/config";
 import {SEARCH_PARAM_NAMES} from "../typings/url";
@@ -20,7 +22,10 @@ import {
     WORKER_RESP_CODE,
     WorkerReq,
 } from "../typings/worker";
-import {getConfig} from "../utils/config";
+import {
+    EXPORT_LOGS_CHUNK_SIZE,
+    getConfig,
+} from "../utils/config";
 import {
     clamp,
     getChunkNum,
@@ -37,12 +42,14 @@ import {
 interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     fileName: string,
-    loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
-    loadPage: (newPageNum: number) => void,
     logData: string,
     numEvents: number,
     numPages: number,
-    pageNum: Nullable<number>
+    pageNum: Nullable<number>,
+
+    exportLogs: () => void,
+    loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
+    loadPage: (newPageNum: number) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -52,12 +59,14 @@ const StateContext = createContext<StateContextType>({} as StateContextType);
 const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
     fileName: "",
-    loadFile: () => null,
-    loadPage: () => null,
     logData: "Loading...",
     numEvents: 0,
     numPages: 0,
     pageNum: 0,
+
+    exportLogs: () => null,
+    loadFile: () => null,
+    loadPage: () => null,
 });
 
 interface StateContextProviderProps {
@@ -138,36 +147,66 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const logEventNumRef = useRef(logEventNum);
     const numPagesRef = useRef<number>(STATE_DEFAULT.numPages);
     const pageNumRef = useRef<Nullable<number>>(STATE_DEFAULT.pageNum);
+    const logExportManagerRef = useRef<null|LogExportManager>(null);
 
     const mainWorkerRef = useRef<null|Worker>(null);
 
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
+
         console.log(`[MainWorker -> Renderer] code=${code}`);
         switch (code) {
+            case WORKER_RESP_CODE.CHUNK_DATA:
+                if (null !== logExportManagerRef.current) {
+                    logExportManagerRef.current.appendChunkData(args.logs);
+                }
+                break;
             case WORKER_RESP_CODE.LOG_FILE_INFO:
                 setFileName(args.fileName);
                 setNumEvents(args.numEvents);
                 break;
+            case WORKER_RESP_CODE.NOTIFICATION:
+                // eslint-disable-next-line no-warning-comments
+                // TODO: notifications should be shown in the UI when the NotificationProvider
+                //  is added
+                console.error(args.logLevel, args.message);
+                break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
                 beginLineNumToLogEventNumRef.current = args.beginLineNumToLogEventNum;
                 const lastLogEventNum = getLastLogEventNum(args.beginLineNumToLogEventNum);
                 updateLogEventNumInUrl(lastLogEventNum, logEventNumRef.current);
                 break;
             }
-            case WORKER_RESP_CODE.NOTIFICATION:
-                // eslint-disable-next-line no-warning-comments
-                // TODO: notifications should be shown in the UI when the NotificationProvider
-                //  is added
-                console.error(args.logLevel, args.message);
-                break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;
         }
     }, []);
 
+    const exportLogs = useCallback(() => {
+        if (null === mainWorkerRef.current) {
+            console.error("Unexpected null mainWorkerRef.current");
+
+            return;
+        }
+        if (STATE_DEFAULT.numEvents === numEvents && STATE_DEFAULT.fileName === fileName) {
+            console.error("numEvents and fileName not initialized yet");
+
+            return;
+        }
+        logExportManagerRef.current = new LogExportManager(
+            Math.ceil(numEvents / EXPORT_LOGS_CHUNK_SIZE),
+            fileName
+        );
+        workerPostReq(
+            mainWorkerRef.current,
+            WORKER_REQ_CODE.EXPORT_LOG,
+            {decoderOptions: getConfig(CONFIG_KEY.DECODER_OPTIONS)}
+        );
+    }, [numEvents,
+        fileName]);
+
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
         if ("string" !== typeof fileSrc) {
             updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
@@ -275,12 +314,14 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             value={{
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
                 fileName: fileName,
-                loadFile: loadFile,
-                loadPage: loadPage,
                 logData: logData,
                 numEvents: numEvents,
                 numPages: numPagesRef.current,
                 pageNum: pageNumRef.current,
+
+                exportLogs: exportLogs,
+                loadFile: loadFile,
+                loadPage: loadPage,
             }}
         >
             {children}

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

@@ -0,0 +1,73 @@
+import {downloadBlob} from "../utils/file";
+
+
+/**
+ * Manager for exporting logs to a file.
+ */
+class LogExportManager {
+    /**
+     * Array to store chunks of log data.
+     *
+     * @type {string[]}
+     * @private
+     */
+    readonly #chunks: string[] = [];
+
+    /**
+     * Total number of chunks to export.
+     *
+     * @type {number}
+     * @private
+     */
+    readonly #numChunks: number;
+
+    /**
+     * Name of the file to export to.
+     *
+     * @type {string}
+     * @private
+     */
+    readonly #fileName: string;
+
+    constructor (numChunks: number, fileName: string) {
+        this.#numChunks = numChunks;
+        this.#fileName = fileName;
+    }
+
+    /**
+     * Append a chunk of log string.
+     * If the number of chunks reaches the specified limit, trigger a download.
+     *
+     * @param chunkData The chunk of log string to append.
+     * @return The current download progress.
+     */
+    appendChunkData (chunkData: string) {
+        if (0 === this.#numChunks) {
+            this.#download();
+
+            return 1;
+        }
+        this.#chunks.push(chunkData);
+        if (this.#chunks.length === this.#numChunks) {
+            this.#download();
+            this.#chunks.length = 0;
+        }
+
+        return this.#chunks.length / this.#numChunks;
+    }
+
+    /**
+     * Trigger a download of the accumulated log data chunks.
+     *
+     * @private
+     */
+    #download () {
+        const blob = new Blob(this.#chunks, {type: "text/plain"});
+        const fileNameTimeStamped = `${this.#fileName}-exported-${new Date().toISOString()
+            .replace(/[:.]/g, "-")}.log`;
+
+        downloadBlob(blob, fileNameTimeStamped);
+    }
+}
+
+export default LogExportManager;

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

@@ -10,6 +10,7 @@ import {
     CursorType,
     FileSrcType,
 } from "../typings/worker";
+import {EXPORT_LOGS_CHUNK_SIZE} from "../utils/config";
 import {getUint8ArrayFrom} from "../utils/http";
 import {getChunkNum} from "../utils/math";
 import {formatSizeInBytes} from "../utils/units";
@@ -152,6 +153,26 @@ class LogFileManager {
         this.#decoder.setDecoderOptions(options);
     }
 
+    loadChunk (eventIdx: number): {
+        logs: string,
+    } {
+        const results = this.#decoder.decode(
+            eventIdx,
+            Math.min(eventIdx + EXPORT_LOGS_CHUNK_SIZE, this.#numEvents)
+        );
+
+        if (null === results) {
+            throw new Error("Error occurred during decoding chunk. " +
+                `eventIdx=${eventIdx});`);
+        }
+
+        const messages = results.map(([msg]) => msg);
+
+        return {
+            logs: messages.join(""),
+        };
+    }
+
     /**
      * Loads a page of log events based on the provided cursor.
      *

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

@@ -9,6 +9,7 @@ import {
     WORKER_RESP_CODE,
     WorkerResp,
 } from "../typings/worker";
+import {EXPORT_LOGS_CHUNK_SIZE} from "../utils/config";
 import LogFileManager from "./LogFileManager";
 
 
@@ -35,12 +36,31 @@ const postResp = <T extends WORKER_RESP_CODE>(
     postMessage({code, args});
 };
 
+// eslint-disable-next-line max-lines-per-function,max-statements
 onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
     const {code, args} = ev.data;
     console.log(`[Renderer -> MainWorker] code=${code}: args=${JSON.stringify(args)}`);
 
     try {
         switch (code) {
+            case WORKER_REQ_CODE.EXPORT_LOG: {
+                if (null === LOG_FILE_MANAGER) {
+                    throw new Error("Log file manager hasn't been initialized");
+                }
+                if ("undefined" !== typeof args.decoderOptions) {
+                    LOG_FILE_MANAGER.setDecoderOptions(args.decoderOptions);
+                }
+
+                let decodedEventIdx = 0;
+                while (decodedEventIdx < LOG_FILE_MANAGER.numEvents) {
+                    postResp(
+                        WORKER_RESP_CODE.CHUNK_DATA,
+                        LOG_FILE_MANAGER.loadChunk(decodedEventIdx)
+                    );
+                    decodedEventIdx += EXPORT_LOGS_CHUNK_SIZE;
+                }
+                break;
+            }
             case WORKER_REQ_CODE.LOAD_FILE: {
                 LOG_FILE_MANAGER = await LogFileManager.create(
                     args.fileSrc,

new-log-viewer/src/typings/worker.ts

@@ -38,17 +38,22 @@ type BeginLineNumToLogEventNumMap = Map<number, number>;
  * Enum of the protocol code for communications between the renderer and MainWorker.
  */
 enum WORKER_REQ_CODE {
+    EXPORT_LOG = "exportLog",
     LOAD_FILE = "loadFile",
     LOAD_PAGE = "loadPage",
 }
 
 enum WORKER_RESP_CODE {
+    CHUNK_DATA = "chunkData",
     LOG_FILE_INFO = "fileInfo",
     PAGE_DATA = "pageData",
     NOTIFICATION = "notification",
 }
 
 type WorkerReqMap = {
+    [WORKER_REQ_CODE.EXPORT_LOG]: {
+        decoderOptions: DecoderOptionsType
+    }
     [WORKER_REQ_CODE.LOAD_FILE]: {
         fileSrc: FileSrcType,
         pageSize: number,
@@ -62,6 +67,9 @@ type WorkerReqMap = {
 };
 
 type WorkerRespMap = {
+    [WORKER_RESP_CODE.CHUNK_DATA]: {
+        logs: string
+    },
     [WORKER_RESP_CODE.LOG_FILE_INFO]: {
         fileName: string,
         numEvents: number,