Support Global Search for formats zst, zip, tar.gz, .gz, .gzip #6

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@msgpack/msgpack": "^3.0.0-beta2",
     "@obsidize/tar-browserify": "4.0.0",
+    "axios": "^1.6.7",
     "bootstrap": "^5.2.3",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",

src/App.js

@@ -25,7 +25,7 @@ export function App () {
     };
 
     const [appMode, setAppMode] = useState(null);
-    const [fileInfo, setFileInfo] = useState(null);
+    const [fileSrc, setFileSrc] = useState(null);
     const [logEventIdx, setLogEventIdx] = useState(null);
     const [timestamp, setTimestamp] = useState(null);
     const [prettify, setPrettify] = useState(null);
@@ -65,11 +65,11 @@ export function App () {
         const filePath = getFilePathFromWindowLocation();
 
         if (null !== filePath) {
-            setFileInfo(filePath);
+            setFileSrc(filePath);
             setAppMode(APP_STATE.FILE_VIEW);
         } else {
             if (null !== config.defaultFileUrl) {
-                setFileInfo(config.defaultFileUrl);
+                setFileSrc(config.defaultFileUrl);
                 setAppMode(APP_STATE.FILE_VIEW);
             } else {
                 setAppMode(APP_STATE.FILE_PROMPT);
@@ -82,7 +82,7 @@ export function App () {
      * @param {File} file
      */
     const handleFileChange = (file) => {
-        setFileInfo(file);
+        setFileSrc(file);
         setAppMode(APP_STATE.FILE_VIEW);
     };
 
@@ -94,7 +94,7 @@ export function App () {
                         <Viewer logEventNumber={logEventIdx}
                             timestamp={timestamp}
                             prettifyLog={prettify}
-                            fileInfo={fileInfo}/>
+                            fileSrc={fileSrc}/>
                     }
                 </DropFile>
             </ThemeContext.Provider>

src/DropFile/README.md

@@ -19,16 +19,16 @@ import {DropFile} from "./DropFile/DropFile";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 const App = () => {
-    const [fileInfo, setFileInfo] = useState(null);
+    const [fileSrc, setFileSrc] = useState(null);
 
     const handleFileChange = (file) => {
-        setFileInfo(file);
+        setFileSrc(file);
     };
 
     return (
         <div id="app">
             <DropFile handleFileDrop={handleFileChange}>
-                <CustomComponent fileInfo={fileInfo}>
+                <CustomComponent fileSrc={fileSrc}>
             </DropFile>
         </div>
     );

src/ThemeContext/README.md

@@ -23,7 +23,7 @@ const App = () => {
         FILE_VIEW: 1,
     };
 
-    const [fileInfo, setFileInfo] = useState(null);
+    const [fileSrc, setfileSrc] = useState(null);
     const [theme, setTheme] = useState(THEME_STATES.DARK);
     const [appMode, setAppMode] = useState();
 
@@ -34,7 +34,7 @@ const App = () => {
     };
 
     const handleFileChange = (file) => {
-        setFileInfo(file);
+        setfileSrc(file);
         setAppMode(APP_STATE.FILE_VIEW);
     };
 
@@ -52,7 +52,7 @@ const App = () => {
                     {appMode === APP_STATE.VIEWER &&
                         <Viewer logEventNumber={333}
                             prettifyLog={true}
-                            fileInfo={fileInfo}/>
+                            fileSrc={fileSrc}/>
                     }
                 </DropFile>
             </ThemeContext.Provider>

src/Viewer/Viewer.js

@@ -21,7 +21,7 @@ import {getModifiedUrl, isNumeric, modifyPage} from "./services/utils";
 import "./Viewer.scss";
 
 Viewer.propTypes = {
-    fileInfo: oneOfType([PropTypes.object, PropTypes.string]),
+    fileSrc: oneOfType([PropTypes.object, PropTypes.string]),
     filePath: PropTypes.string,
     prettifyLog: PropTypes.bool,
     logEventNumber: PropTypes.string,
@@ -31,14 +31,14 @@ Viewer.propTypes = {
 /**
  * Contains the menu, Monaco editor, and status bar. Viewer spawns its own
  * worker to manage the file and perform CLP operations.
- * @param {File|String} fileInfo File object to read or file path to load
+ * @param {File|String} fileSrc File object to read or file path to load
  * @param {boolean} prettifyLog Whether to prettify the log file
  * @param {Number} logEventNumber The initial log event number
  * @param {Number} timestamp The initial timestamp to show. If this field is
  * valid, logEventNumber will be ignored.
  * @return {JSX.Element}
  */
-export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
+export function Viewer ({fileSrc, prettifyLog, logEventNumber, timestamp}) {
     const {theme} = useContext(ThemeContext);
 
     // Ref hook used to reference worker used for loading and decoding
@@ -68,7 +68,7 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
         numberOfEvents: null,
         verbosity: null,
     });
-    const [fileMetadata, setFileMetadata] = useState(null);
+    const [fileInfo, setFileInfo] = useState(null);
     const [logData, setLogData] = useState("");
 
     const [leftPanelActiveTabId, setLeftPanelActiveTabId] = useState(LEFT_PANEL_TAB_IDS.SEARCH);
@@ -89,10 +89,10 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
     }, []);
 
     /**
-     * Reload viewer on fileInfo change
-     * @param {File|string} fileInfo
+     * Reload viewer on fileSrc change
+     * @param {File|string} fileSrc
      */
-    const loadFile = (fileInfo) => {
+    const loadFile = (fileSrc) => {
         if (clpWorker.current) {
             clpWorker.current.terminate();
         }
@@ -104,11 +104,11 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
         // Create new worker and pass args to worker to load file
         clpWorker.current = new Worker(new URL("./services/clpWorker.js", import.meta.url));
         // If file was loaded using file dialog or drag/drop, reset logEventIdx
-        const logEvent = (typeof fileInfo === "string") ? logFileState.logEventIdx : null;
+        const logEvent = (typeof fileSrc === "string") ? logFileState.logEventIdx : null;
         const initialTimestamp = isNumeric(timestamp) ? Number(timestamp) : null;
         clpWorker.current.postMessage({
             code: CLP_WORKER_PROTOCOL.LOAD_FILE,
-            fileInfo: fileInfo,
+            fileSrc: fileSrc,
             prettify: logFileState.prettify,
             logEventIdx: logEvent,
             initialTimestamp: initialTimestamp,
@@ -118,8 +118,8 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
 
     // Load file if file info changes (this could happen from drag and drop)
     useEffect(() => {
-        loadFile(fileInfo);
-    }, [fileInfo]);
+        loadFile(fileSrc);
+    }, [fileSrc]);
 
     // Save statusMessages to the msg logger for debugging
     useEffect(() => {
@@ -269,7 +269,7 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
                 setStatusMessage("");
                 break;
             case CLP_WORKER_PROTOCOL.UPDATE_FILE_INFO:
-                setFileMetadata(event.data.fileState);
+                setFileInfo(event.data.fileInfo);
                 break;
             case CLP_WORKER_PROTOCOL.UPDATE_SEARCH_RESULTS:
                 setSearchResults((prevArray) => [...prevArray, {
@@ -287,14 +287,14 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
     }, [logFileState, logData, searchQuery, shouldReloadSearch]);
 
     useEffect(() => {
-        if (null !== fileMetadata) {
-            const searchParams = {filePath: fileMetadata.filePath};
+        if (null !== fileInfo) {
+            const searchParams = {filePath: fileInfo.filePath};
             const hashParams = {logEventIdx: logFileState.logEventIdx};
 
             const newUrl = getModifiedUrl(searchParams, hashParams);
             window.history.pushState({}, null, newUrl);
         }
-    }, [fileMetadata]);
+    }, [fileInfo]);
 
     /**
      * Unsets the cached page size in case it causes a client OOM. If it
@@ -380,7 +380,7 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
                     }}>
                         <LeftPanel
                             logFileState={logFileState}
-                            fileMetaData={fileMetadata}
+                            fileInfo={fileInfo}
                             panelWidth={leftPanelWidth}
                             setPanelWidth={setLeftPanelWidth}
                             activeTabId={leftPanelActiveTabId}
@@ -403,7 +403,7 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
                             }}>
                                 <MenuBar
                                     loadingLogs={loadingLogs}
-                                    fileMetaData={fileMetadata}
+                                    fileInfo={fileInfo}
                                     logFileState={logFileState}
                                     changeStateCallback={changeState}
                                 />

src/Viewer/components/LeftPanel/LeftPanel.js

@@ -8,17 +8,18 @@ import {THEME_STATES} from "../../../ThemeContext/THEME_STATES";
 import {ThemeContext} from "../../../ThemeContext/ThemeContext";
 import STATE_CHANGE_TYPE from "../../services/STATE_CHANGE_TYPE";
 import {ResizeHandle} from "../ResizeHandle/ResizeHandle";
+import DOWNLOAD_WORKER_ACTION from "./DOWNLOAD_WORKER_ACTION";
+import {BlobAppender, downloadBlob, downloadCompressedFile} from "./DownloadHelper";
 
 import "./LeftPanel.scss";
-import {BlobAppender, downloadBlob, downloadCompressedFile} from "./DownloadHelper";
-import DOWNLOAD_WORKER_ACTION from "./DOWNLOAD_WORKER_ACTION";
 
 const LEFT_PANEL_WIDTH_LIMIT_FACTOR = 0.8;
 const LEFT_PANEL_SNAP_WIDTH = 108;
 const LEFT_PANEL_DEFAULT_WIDTH_FACTOR = 0.2;
 
 LeftPanel.propTypes = {
     logFileState: PropTypes.object,
+    fileInfo: PropTypes.object,
     panelWidth: PropTypes.number,
     setPanelWidth: PropTypes.func,
     activeTabId: PropTypes.number,
@@ -57,7 +58,7 @@ LeftPanel.propTypes = {
 /**
  * The left panel component
  * @param {object} logFileState Current state of the log file
- * @param {object} fileMetaData Object containing file metadata
+ * @param {object} fileInfo Object containing file metadata
  * @param {number} panelWidth
  * @param {SetPanelWidth} setPanelWidth
  * @param {number} activeTabId
@@ -69,7 +70,7 @@ LeftPanel.propTypes = {
  */
 export function LeftPanel ({
     logFileState,
-    fileMetaData,
+    fileInfo,
     panelWidth,
     setPanelWidth,
     activeTabId,
@@ -110,7 +111,7 @@ export function LeftPanel ({
         <>
             <LeftPanelTabs
                 logFileState={logFileState}
-                fileMetaData={fileMetaData}
+                fileInfo={fileInfo}
                 activeTabId={panelWidth > 0 ? activeTabId : -1}
                 togglePanel={togglePanel}
                 loadFileCallback={loadFileCallback}
@@ -131,7 +132,7 @@ export function LeftPanel ({
 
 LeftPanelTabs.propTypes = {
     logFileState: PropTypes.object,
-    fileMetaData: PropTypes.object,
+    fileInfo: PropTypes.object,
     activeTabId: PropTypes.number,
     togglePanel: PropTypes.func,
     loadFileCallback: PropTypes.func,
@@ -170,7 +171,7 @@ LeftPanelTabs.propTypes = {
  */
 function LeftPanelTabs ({
     logFileState,
-    fileMetaData,
+    fileInfo,
     activeTabId,
     togglePanel,
     loadFileCallback,
@@ -254,7 +255,7 @@ function LeftPanelTabs ({
 
         worker.postMessage({
             code: DOWNLOAD_WORKER_ACTION.initialize,
-            name: fileMetaData.name,
+            name: fileInfo.name,
             count: logFileState.downloadPageChunks,
         });
 
@@ -278,7 +279,7 @@ function LeftPanelTabs ({
                             code: DOWNLOAD_WORKER_ACTION.clearDatabase,
                         });
                         worker.terminate();
-                        downloadBlob(blob.getBlob(), fileMetaData.name);
+                        downloadBlob(blob.getBlob(), fileInfo.name);
                     }
                     break;
                 case DOWNLOAD_WORKER_ACTION.progress:
@@ -363,10 +364,10 @@ function LeftPanelTabs ({
                         <button
                             className={`left-panel-tab 
                             ${(LEFT_PANEL_TAB_IDS.SEARCH === activeTabId ?
-                                "left-panel-tab-selected" :
-                                "")}`}
+            "left-panel-tab-selected" :
+            "")}`}
                             onClick={toggleSearchPanel}>
-                            <Search size={25} style={{transform: 'scaleX(-1)'}}/>
+                            <Search size={25} style={{transform: "scaleX(-1)"}}/>
                         </button>
                         <button className={"left-panel-tab"} onClick={handleShowDownload}>
                             <CloudArrowDown size={28}/>
@@ -384,7 +385,7 @@ function LeftPanelTabs ({
             <input type='file' id='file' onChange={loadFile} ref={inputFile}
                 style={{display: "none"}}/>
             <Modal show={showDownload} className="border-0" onHide={handleShowDownload}
-                   contentClassName={getModalClass()}>
+                contentClassName={getModalClass()}>
                 <Modal.Header className="modal-background border-0" >
                     <div className="float-left">
                         Download
@@ -394,27 +395,27 @@ function LeftPanelTabs ({
                     <div style={{fontSize: "14px"}}>
                         {hasFilePath() &&
                             <Row className="m-0 mb-4 d-flex flex-column align-items-center text-center">
-                                <label style={{fontSize: "17px"}}>Compressed Log ({logFileState.compressedSize})</label>
+                                <label style={{fontSize: "17px"}}>Compressed Log ({logFileState.compressedHumanSize})</label>
                                 <button className="btn btn-secondary download-button m-2"
-                                        style={{fontSize: "13px", width: "200px"}} onClick={downloadCompressedFile}>
+                                    style={{fontSize: "13px", width: "200px"}} onClick={downloadCompressedFile}>
                                     <Download className="me-3 icon-button"/>
                                     Download File
                                 </button>
                             </Row>
                         }
 
                         <Row className="m-0 d-flex flex-column align-items-center text-center">
-                            <label style={{fontSize: "17px"}}>Uncompressed Log ({logFileState.decompressedSize})</label>
+                            <label style={{fontSize: "17px"}}>Uncompressed Log ({logFileState.decompressedHumanSize})</label>
                             {!isDownloading &&
                                 <button className="btn btn-secondary download-button m-2"
-                                        style={{fontSize: "13px", width: "200px"}} onClick={downloadUncompressedFile}>
+                                    style={{fontSize: "13px", width: "200px"}} onClick={downloadUncompressedFile}>
                                     <Download className="me-3 icon-button"/>
                                     Start Download
                                 </button>
                             }
                             {isDownloading &&
                                 <button className="btn btn-outline-warning download-button m-2"
-                                        style={{fontSize: "15px", width: "200px"}} onClick={stopUncompressedDownload}>
+                                    style={{fontSize: "15px", width: "200px"}} onClick={stopUncompressedDownload}>
                                     <XCircle className="me-3 icon-button"/>
                                     Cancel Download
                                 </button>
@@ -433,7 +434,7 @@ function LeftPanelTabs ({
                                         </div>
                                     </div>
                                     <ProgressBar animated now={progress} style={{height: "10px"}}
-                                                 className="p-0 border-0 rounded-0"/>
+                                        className="p-0 border-0 rounded-0"/>
                                 </Row>
                             }
                         </Row>

src/Viewer/components/MenuBar/MenuBar.js

@@ -24,7 +24,7 @@ import "./MenuBar.scss";
 
 MenuBar.propTypes = {
     logFileState: PropTypes.object,
-    fileMetaData: PropTypes.object,
+    fileInfo: PropTypes.object,
     loadingLogs: PropTypes.bool,
     changeStateCallback: PropTypes.func,
     loadFileCallback: PropTypes.func,
@@ -40,14 +40,14 @@ MenuBar.propTypes = {
 /**
  * Menu bar used to navigate the log file.
  * @param {object} logFileState Current state of the log file
- * @param {object} fileMetaData Object containing file metadata
+ * @param {object} fileInfo Object containing file name & path
  * @param {boolean} loadingLogs Indicates if logs are being decoded and
  *                              loaded by worker.
  * @param {ChangeStateCallback} changeStateCallback
  * @return {JSX.Element}
  */
 export function MenuBar ({
-    logFileState, fileMetaData, loadingLogs, changeStateCallback, loadFileCallback,
+    logFileState, fileInfo, loadingLogs, changeStateCallback, loadFileCallback,
 }) {
     const {theme, switchTheme} = useContext(ThemeContext);
 
@@ -159,7 +159,7 @@ export function MenuBar ({
             :<div style={{height: loadingBarHeight}} className="w-100" />;
     };
 
-    const fileName = fileMetaData.name.split("?")[0];
+    const fileName = fileInfo.name.split("?")[0];
 
     // TODO make file icon a button to open modal with file info
     // TODO Move modals into their own component