Add support for loading files, decoding them as JSONL, and formatting them using a Logback-like format string.

new-log-viewer/package.json

@@ -18,6 +18,8 @@
   },
   "homepage": "https://github.com/y-scope/yscope-log-viewer#readme",
   "dependencies": {
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

new-log-viewer/src/components/Layout.tsx

@@ -3,7 +3,10 @@ import {
     useEffect,
 } from "react";
 
-import {StateContext} from "../contexts/StateContextProvider";
+import {
+    PAGE_SIZE,
+    StateContext,
+} from "../contexts/StateContextProvider";
 
 
 /**
@@ -15,16 +18,37 @@ const Layout = () => {
     const {
         logData,
         loadFile,
+        logEventNum,
     } = useContext(StateContext);
 
     useEffect(() => {
-        loadFile("");
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        const filePath = urlSearchParams.get("filePath");
+        if (null !== filePath) {
+            loadFile(filePath);
+        }
     }, [loadFile]);
 
     return (
         <>
             <div>
-                {logData}
+                <h3>
+                    LogEventNum -
+                    {" "}
+                    {logEventNum}
+                    {" "}
+                    |
+                    PageNum -
+                    {" "}
+                    {Math.ceil(logEventNum / PAGE_SIZE)}
+                </h3>
+                {logData.split("\n").map((line, index) => (
+                    <p key={index}>
+                        {`<${index + 1}>`}
+                        -
+                        {line}
+                    </p>
+                ))}
             </div>
         </>
     );

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

@@ -7,8 +7,9 @@ import React, {
 } from "react";
 
 import {
+    BeginLineNumToLogEventNumMap,
+    CURSOR_CODE,
     FileSrcType,
-    LineNumLogEventNumMap,
     MainWorkerRespMessage,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -17,10 +18,10 @@ import {
 
 
 interface StateContextType {
+    beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     loadFile: (fileSrc: FileSrcType) => void,
     logData: string,
     logEventNum: number,
-    logLines: LineNumLogEventNumMap,
     numEvents: number,
     numPages: number,
     pageNum: number
@@ -30,11 +31,11 @@ const StateContext = createContext<StateContextType>({} as StateContextType);
 /**
  * Default values of the state object.
  */
-const StateDefaultValue = Object.freeze({
+const STATE_DEFAULT = Object.freeze({
+    beginLineNumToLogEventNum: new Map(),
     loadFile: () => null,
-    logData: "",
+    logData: "Loading...",
     logEventNum: 1,
-    logLines: new Map(),
     numEvents: 0,
     numPages: 0,
     pageNum: 0,
@@ -53,10 +54,11 @@ interface StateContextProviderProps {
  * @return
  */
 const StateContextProvider = ({children}: StateContextProviderProps) => {
-    const [logLines, setLogLines] = useState<LineNumLogEventNumMap>(StateDefaultValue.logLines);
-    const [logData, setLogData] = useState<string>(StateDefaultValue.logData);
-    const [numEvents, setNumEvents] = useState<number>(StateDefaultValue.numEvents);
-    const [logEventNum, setLogEventNum] = useState<number>(StateDefaultValue.logEventNum);
+    const [beginLineNumToLogEventNum, setBeginLineNumToLogEventNum] =
+        useState<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
+    const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
+    const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
+    const [logEventNum, setLogEventNum] = useState<number>(STATE_DEFAULT.logEventNum);
 
     const mainWorkerRef = useRef<null|Worker>(null);
 
@@ -79,14 +81,26 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         const {code, args} = ev.data;
         console.log(`[MainWorker -> Renderer] code=${code}`);
         switch (code) {
-            case WORKER_RESP_CODE.PAGE_DATA:
+            case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
-                setLogLines(args.lines);
-                setLogEventNum(args.startLogEventNum);
+                setBeginLineNumToLogEventNum(args.beginLineNumToLogEventNum);
+                const logEventNums = Array.from(args.beginLineNumToLogEventNum.values());
+
+                let lastLogEventNum = logEventNums.at(-1);
+                if ("undefined" === typeof lastLogEventNum) {
+                    lastLogEventNum = 1;
+                }
+                setLogEventNum(lastLogEventNum);
                 break;
+            }
             case WORKER_RESP_CODE.NUM_EVENTS:
                 setNumEvents(args.numEvents);
                 break;
+            case WORKER_RESP_CODE.NOTIFICATION:
+                // 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;
@@ -104,7 +118,14 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         mainWorkerPostReq(WORKER_REQ_CODE.LOAD_FILE, {
             fileSrc: fileSrc,
             pageSize: PAGE_SIZE,
-            cursor: null,
+            cursor: {code: CURSOR_CODE.LAST_EVENT, args: null},
+            decoderOptions: {
+                // TODO: these shall come from config provider
+                formatString: "%d{yyyy-MM-dd HH:mm:ss.SSS} [%process.thread.name] %log.level" +
+                    " %message%n",
+                logLevelKey: "log.level",
+                timestampKey: "@timestamp",
+            },
         });
     }, [
         handleMainWorkerResp,
@@ -114,10 +135,10 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     return (
         <StateContext.Provider
             value={{
+                beginLineNumToLogEventNum,
                 loadFile,
                 logData,
                 logEventNum,
-                logLines,
                 numEvents,
                 numPages,
                 pageNum,
@@ -130,4 +151,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
 
 export default StateContextProvider;
-export {StateContext};
+export {
+    PAGE_SIZE,
+    StateContext,
+};