feat: logger support all level filters

This commit is contained in:
huzibaca 2024-11-19 01:40:45 +08:00
parent 2a9e2d47f5
commit a7a661e60f
2 changed files with 16 additions and 8 deletions

View File

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

View File

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