Introduce 8px padding to .menu-bar for better spacing. Add .menu-bar-…

…filename class to CSS.

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

@@ -0,0 +1,58 @@
+import {useContext} from "react";
+
+import {
+    CircularProgress,
+    Typography,
+} from "@mui/joy";
+
+import DownloadIcon from "@mui/icons-material/Download";
+
+import {StateContext} from "../../contexts/StateContextProvider";
+import {
+    EXPORT_LOG_PROGRESS_COMPLETE,
+    EXPORT_LOG_PROGRESS_INITIALIZATION,
+} from "../../services/LogExportManager";
+import SmallIconButton from "./SmallIconButton";
+
+
+/**
+ * Represents a button for triggering log exports and displays the progress.
+ *
+ * @return
+ */
+export const ExportLogsButton = () => {
+    const {exportLogs, exportProgress} = useContext(StateContext);
+    const handleExportLogsButtonClick = () => {
+        exportLogs();
+    };
+
+
+    return (
+        <SmallIconButton
+            disabled={null !== exportProgress && 1 !== exportProgress}
+            onClick={handleExportLogsButtonClick}
+        >
+            {null === exportProgress || EXPORT_LOG_PROGRESS_INITIALIZATION === exportProgress ?
+                <DownloadIcon/> :
+                <CircularProgress
+                    determinate={true}
+                    thickness={3}
+                    value={exportProgress * 100}
+                    variant={"solid"}
+                    color={EXPORT_LOG_PROGRESS_COMPLETE === exportProgress ?
+                        "success" :
+                        "primary"}
+                >
+                    {EXPORT_LOG_PROGRESS_COMPLETE === exportProgress ?
+                        <DownloadIcon
+                            color={"success"}
+                            sx={{fontSize: "14px"}}/> :
+                        <Typography level={"body-xs"}>
+                            {Math.ceil(exportProgress * 100)}
+                        </Typography>}
+                </CircularProgress>}
+        </SmallIconButton>
+    );
+};
+
+export default ExportLogsButton;

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

@@ -11,14 +11,14 @@ import {
 } from "@mui/joy";
 
 import DescriptionIcon from "@mui/icons-material/Description";
-import DownloadIcon from "@mui/icons-material/Download";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
 import SettingsIcon from "@mui/icons-material/Settings";
 
 import {StateContext} from "../../contexts/StateContextProvider";
 import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import SettingsModal from "../modals/SettingsModal";
+import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
 import SmallIconButton from "./SmallIconButton";
 
@@ -31,7 +31,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, exportLogs, loadFile} = useContext(StateContext);
+    const {fileName, loadFile} = useContext(StateContext);
 
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
 
@@ -49,9 +49,6 @@ const MenuBar = () => {
         setIsSettingsModalOpen(true);
     };
 
-    const handleExportLogsButtonClick = () => {
-        exportLogs();
-    };
 
     return (
         <>
@@ -81,9 +78,7 @@ const MenuBar = () => {
                 >
                     <SettingsIcon/>
                 </SmallIconButton>
-                <SmallIconButton onClick={handleExportLogsButtonClick}>
-                    <DownloadIcon/>
-                </SmallIconButton>
+                <ExportLogsButton/>
             </Sheet>
             <SettingsModal
                 isOpen={isSettingsModalOpen}

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

@@ -42,6 +42,7 @@ import {
 interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     fileName: string,
+    exportProgress: Nullable<number>,
     logData: string,
     numEvents: number,
     numPages: number,
@@ -58,6 +59,7 @@ const StateContext = createContext<StateContextType>({} as StateContextType);
  */
 const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
+    exportProgress: null,
     fileName: "",
     logData: "Loading...",
     numEvents: 0,
@@ -140,6 +142,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
+    const [exportProgress, setExportProgress] =
+        useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const beginLineNumToLogEventNumRef =
@@ -157,7 +161,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         switch (code) {
             case WORKER_RESP_CODE.CHUNK_DATA:
                 if (null !== logExportManagerRef.current) {
-                    logExportManagerRef.current.appendChunkData(args.logs);
+                    const progress = logExportManagerRef.current.appendChunkData(args.logs);
+                    setExportProgress(progress);
                 }
                 break;
             case WORKER_RESP_CODE.LOG_FILE_INFO:
@@ -314,6 +319,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         <StateContext.Provider
             value={{
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
+                exportProgress: exportProgress,
                 fileName: fileName,
                 logData: logData,
                 numEvents: numEvents,

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

@@ -1,6 +1,9 @@
 import {downloadBlob} from "../utils/file";
 
 
+const EXPORT_LOG_PROGRESS_INITIALIZATION = 0;
+const EXPORT_LOG_PROGRESS_COMPLETE = 1;
+
 /**
  * Manager for exporting logs to a file.
  */
@@ -22,7 +25,8 @@ class LogExportManager {
 
     constructor (numChunks: number, fileName: string) {
         this.#numChunks = numChunks;
-        this.#exportedFileName = fileName;
+        this.#exportedFileName = `${fileName}-exported-${new Date().toISOString()
+            .replace(/[:.]/g, "-")}.log`;
     }
 
     /**
@@ -37,12 +41,14 @@ class LogExportManager {
         if (0 === this.#numChunks) {
             this.#download();
 
-            return 1;
+            return EXPORT_LOG_PROGRESS_COMPLETE;
         }
         this.#chunks.push(chunkData);
         if (this.#chunks.length === this.#numChunks) {
             this.#download();
             this.#chunks.length = 0;
+
+            return EXPORT_LOG_PROGRESS_COMPLETE;
         }
 
         return this.#chunks.length / this.#numChunks;
@@ -53,11 +59,12 @@ class LogExportManager {
      */
     #download () {
         const blob = new Blob(this.#chunks, {type: "text/plain"});
-        const fileNameTimeStamped = `${this.#exportedFileName}-exported-${new Date().toISOString()
-            .replace(/[:.]/g, "-")}.log`;
-
-        downloadBlob(blob, fileNameTimeStamped);
+        downloadBlob(blob, this.#exportedFileName);
     }
 }
 
 export default LogExportManager;
+export {
+    EXPORT_LOG_PROGRESS_COMPLETE,
+    EXPORT_LOG_PROGRESS_INITIALIZATION,
+};