feat: logger support all level filters

src/hooks/use-log-data.ts

@@ -7,7 +7,7 @@ import { create } from "zustand";
 
 const MAX_LOG_NUM = 1000;
 
-export type LogLevel = "warning" | "info" | "debug" | "error";
+export type LogLevel = "warning" | "info" | "debug" | "error" | "all";
 
 interface ILogItem {
   time?: string;
@@ -23,7 +23,11 @@ const buildWSUrl = (server: string, secret: string, logLevel: LogLevel) => {
   if (secret) {
     params.append("token", encodeURIComponent(secret));
   }
-  params.append("level", logLevel);
+  if (logLevel === "all") {
+    params.append("level", "debug");
+  } else {
+    params.append("level", logLevel);
+  }
   const queryString = params.toString();
   return queryString ? `${baseUrl}?${queryString}` : baseUrl;
 };
@@ -41,12 +45,13 @@ const useLogStore = create<LogStore>(
       info: [],
       debug: [],
       error: [],
+      all: [],
     },
     clearLogs: (level?: LogLevel) =>
       set((state: LogStore) => ({
         logs: level
           ? { ...state.logs, [level]: [] }
-          : { warning: [], info: [], debug: [], error: [] },
+          : { warning: [], info: [], debug: [], error: [], all: [] },
       })),
     appendLog: (level: LogLevel, log: ILogItem) =>
       set((state: LogStore) => {
@@ -57,7 +62,7 @@ const useLogStore = create<LogStore>(
             : [...currentLogs, log];
         return { logs: { ...state.logs, [level]: newLogs } };
       }),
-  })
+  }),
 );
 
 export const useLogData = (logLevel: LogLevel) => {

src/pages/logs.tsx

@@ -22,16 +22,18 @@ const LogPage = () => {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [logLevel, setLogLevel] = useLocalStorage<LogLevel>(
-    "log-level",
-    "info"
+    "log:log-level",
+    "info",
   );
   const [match, setMatch] = useState(() => (_: string) => true);
   const logData = useLogData(logLevel);
 
   const filterLogs = useMemo(() => {
     return logData
-      ? logData.filter(
-          (data) => data.type.includes(logLevel) && match(data.payload)
+      ? logData.filter((data) =>
+          logLevel === "all"
+            ? match(data.payload)
+            : data.type.includes(logLevel) && match(data.payload),
         )
       : [];
   }, [logData, logLevel, match]);
@@ -84,6 +86,7 @@ const LogPage = () => {
           value={logLevel}
           onChange={(e) => setLogLevel(e.target.value as LogLevel)}
         >
+          <MenuItem value="all">ALL</MenuItem>
           <MenuItem value="info">INFO</MenuItem>
           <MenuItem value="warning">WARNING</MenuItem>
           <MenuItem value="error">ERROR</MenuItem>