Skip to content

Commit 78b9aea

Browse files
notfound945notfound945
authored
Support show debug log and enable filter messages by log level (#102)
* feat: Supports collecting console log messages at the debug level and also enables filtering console log messages based on log levels。 * fix:modify the code based on the feedback from the code review. * feat: add icon for log level options
1 parent c713b57 commit 78b9aea

File tree

7 files changed

+112
-10
lines changed

7 files changed

+112
-10
lines changed

‎src/assets/image/debug.svg

+1
Loading

‎src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.select-item {
2+
display: flex;
3+
align-items: center;
4+
5+
&.label-text {
6+
margin-left: 5px;
7+
}
8+
}

‎src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx

+79-8
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,95 @@
11
import { useSocketMessageStore } from '@/store/socket-message';
22
import { ClearOutlined } from '@ant-design/icons';
3-
import { Row, Col, Tooltip, Button } from 'antd';
4-
import { useCallback } from 'react';
3+
import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
4+
import React, { useCallback } from 'react';
55
import { useTranslation } from 'react-i18next';
6+
import { ProxyType } from '@huolala-tech/page-spy/dist/types/lib/console';
7+
import { ReactComponent as ErrorSvg } from '@/assets/image/error.svg';
8+
import { ReactComponent as InfoSvg } from '@/assets/image/info.svg';
9+
import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
10+
import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
11+
import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
12+
import './index.less';
613

714
export const HeaderActions = () => {
815
const { t } = useTranslation();
9-
const clearRecord = useSocketMessageStore((state) => state.clearRecord);
16+
const [clearRecord, changeConsoleMsgFilter] = useSocketMessageStore(
17+
(state) => [state.clearRecord, state.setConsoleMsgTypeFilter],
18+
);
19+
20+
const logLevelList: Array<{
21+
label: string | React.ReactNode;
22+
value: ProxyType;
23+
}> = [
24+
{
25+
label: (
26+
<div className="select-item">
27+
<UserSvg style={{ height: 15, width: 15 }} />
28+
<span className="select-item label-text">User messages</span>
29+
</div>
30+
),
31+
value: 'log',
32+
},
33+
{
34+
label: (
35+
<div className="select-item">
36+
<ErrorSvg style={{ height: 15, width: 15 }} />
37+
<span className="select-item label-text">Errors</span>
38+
</div>
39+
),
40+
value: 'error',
41+
},
42+
{
43+
label: (
44+
<div className="select-item">
45+
<WarnSvg style={{ height: 15, width: 15 }} />
46+
<span className="select-item label-text">Warnings</span>
47+
</div>
48+
),
49+
value: 'warn',
50+
},
51+
{
52+
label: (
53+
<div className="select-item">
54+
<InfoSvg style={{ height: 15, width: 15 }} />
55+
<span className="select-item label-text">Info</span>
56+
</div>
57+
),
58+
value: 'info',
59+
},
60+
{
61+
label: (
62+
<div className="select-item">
63+
<DebugSvg style={{ height: 15, width: 15 }} />
64+
<span className="select-item label-text">Verbose</span>
65+
</div>
66+
),
67+
value: 'debug',
68+
},
69+
];
1070

1171
const clear = useCallback(() => {
1272
clearRecord('console');
1373
}, [clearRecord]);
1474
return (
1575
<Row justify="end">
1676
<Col>
17-
<Tooltip title={t('common.clear')}>
18-
<Button onClick={clear}>
19-
<ClearOutlined />
20-
</Button>
21-
</Tooltip>
77+
<Space>
78+
<Select
79+
onChange={changeConsoleMsgFilter}
80+
maxTagCount="responsive"
81+
mode="multiple"
82+
allowClear={true}
83+
options={logLevelList}
84+
placeholder="Log Level Filter"
85+
style={{ width: 200 }}
86+
/>
87+
<Tooltip title={t('common.clear')}>
88+
<Button onClick={clear}>
89+
<ClearOutlined />
90+
</Button>
91+
</Tooltip>
92+
</Space>
2293
</Col>
2394
</Row>
2495
);

‎src/pages/Devtools/ConsolePanel/components/LogType/index.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
66
import { ReactComponent as DebugOriginSvg } from '@/assets/image/debug-origin.svg';
77
import { ReactComponent as DebugEvalSvg } from '@/assets/image/debug-eval.svg';
88
import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
9+
import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
910
import './index.less';
1011
import type { SpyConsole } from '@huolala-tech/page-spy';
1112

1213
interface ThemeItem {
1314
color: string;
1415
icon: React.ComponentType | null;
1516
}
17+
1618
type Theme = Record<SpyConsole.DataType | 'default', ThemeItem>;
1719

1820
const Type2Theme: Partial<Theme> = {
@@ -28,6 +30,10 @@ const Type2Theme: Partial<Theme> = {
2830
color: '#E9994B',
2931
icon: WarnSvg,
3032
},
33+
debug: {
34+
color: '#8236CB',
35+
icon: DebugSvg,
36+
},
3137
'debug-origin': {
3238
color: '#8236CB',
3339
icon: DebugOriginSvg,

‎src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ export const MainContent = () => {
2626
});
2727
}, []);
2828

29-
const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
29+
const [data, dataFilter] = useSocketMessageStore((state) => [
30+
state.consoleMsg,
31+
state.consoleMsgTypeFilter,
32+
]);
3033
const [newTips, setNewTips] = useState<boolean>(false);
3134
useEffect(() => {
3235
if (data.length === 0) {
@@ -70,9 +73,13 @@ export const MainContent = () => {
7073
};
7174
}, []);
7275

76+
const consoleDataList = dataFilter.length
77+
? data.filter((item) => dataFilter.includes(item.logType))
78+
: data;
79+
7380
return (
7481
<div className="console-list" ref={containerEl}>
75-
{data.map((item) => (
82+
{consoleDataList.map((item) => (
7683
<div className={`console-item ${item.logType}`} key={item.id}>
7784
<div className="console-item__title">
7885
<LogType type={item.logType} />

‎src/pages/Devtools/ConsolePanel/index.less

+3
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@
3636
&:last-child {
3737
border-bottom: 1px solid #f0f0f0;
3838
}
39+
&.debug {
40+
color: #1c419a;
41+
}
3942
&.warn {
4043
color: #573c10;
4144
background-color: #fefae3;

‎src/store/socket-message/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const USER_ID = 'Debugger';
2222
interface SocketMessage {
2323
socket: SocketStore | null;
2424
consoleMsg: SpyConsole.DataItem[];
25+
consoleMsgTypeFilter: string[];
2526
networkMsg: SpyNetwork.RequestInfo[];
2627
systemMsg: SpySystem.DataItem[];
2728
connectMsg: string[];
@@ -36,13 +37,15 @@ interface SocketMessage {
3637
data: SpyDatabase.GetTypeDataItem | null;
3738
};
3839
initSocket: (url: string) => void;
40+
setConsoleMsgTypeFilter: (typeList: string[]) => void;
3941
clearRecord: (key: string) => void;
4042
refresh: (key: string) => void;
4143
}
4244

4345
export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
4446
socket: null,
4547
consoleMsg: [],
48+
consoleMsgTypeFilter: [],
4649
networkMsg: [],
4750
systemMsg: [],
4851
connectMsg: [],
@@ -243,6 +246,9 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
243246
}
244247
});
245248
},
249+
setConsoleMsgTypeFilter: (typeList: string[]) => {
250+
set({ consoleMsgTypeFilter: typeList });
251+
},
246252
clearRecord: (key: string) => {
247253
switch (key) {
248254
case 'console':

0 commit comments

Comments
 (0)