From 70a3ca2f4839e1bd3255d174c204628f4fe2e0cb Mon Sep 17 00:00:00 2001
From: notfound945 <732039303@qq.com>
Date: Sun, 24 Dec 2023 22:09:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20Supports=20collecting=20console=20l?=
 =?UTF-8?q?og=20messages=20at=20the=20debug=20level=20and=20also=20enables?=
 =?UTF-8?q?=20filtering=20console=20log=20messages=20based=20on=20log=20le?=
 =?UTF-8?q?vels=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/debug.svg                    |  1 +
 .../components/HeaderActions/index.tsx        | 36 +++++++++--
 .../ConsolePanel/components/LogType/index.tsx |  6 ++
 .../components/MainContent/index.tsx          | 61 +++++++++++--------
 src/pages/Devtools/ConsolePanel/index.less    |  3 +
 src/store/socket-message/index.ts             |  6 ++
 6 files changed, 80 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/image/debug.svg

diff --git a/src/assets/image/debug.svg b/src/assets/image/debug.svg
new file mode 100644
index 00000000..014b3cf0
--- /dev/null
+++ b/src/assets/image/debug.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703412624120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4212" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1022.06544 583.40119c0 11.0558-4.034896 20.61962-12.111852 28.696576-8.077979 8.077979-17.639752 12.117992-28.690436 12.117992L838.446445 624.215758c0 72.690556-14.235213 134.320195-42.718941 184.89915l132.615367 133.26312c8.076956 8.065699 12.117992 17.634636 12.117992 28.690436 0 11.050684-4.034896 20.614503-12.117992 28.691459-7.653307 8.065699-17.209964 12.106736-28.690436 12.106736-11.475356 0-21.040199-4.041036-28.690436-12.106736L744.717737 874.15318c-2.124384 2.118244-5.308913 4.88424-9.558703 8.283664-4.259 3.3984-13.180184 9.463536-26.78504 18.171871-13.598716 8.715499-27.415396 16.473183-41.439808 23.276123-14.029528 6.797823-31.462572 12.966313-52.289923 18.49319-20.827351 5.517667-41.446971 8.28571-61.842487 8.28571L552.801776 379.38668l-81.611739 0 0 571.277058c-21.668509 0-43.250036-2.874467-64.707744-8.615215-21.473057-5.734608-39.960107-12.749372-55.476499-21.039175-15.518438-8.289804-29.541827-16.572444-42.077328-24.867364-12.541641-8.290827-21.781072-15.193027-27.739784-20.714787l-9.558703-8.93244L154.95056 998.479767c-8.500605 8.921183-18.699897 13.386892-30.606065 13.386892-10.201339 0-19.335371-3.40454-27.409257-10.202363-8.079002-7.652284-12.437264-17.10968-13.080923-28.372188-0.633427-11.263531 2.659573-21.143553 9.893324-29.647227l128.787178-144.727219c-24.650423-48.464805-36.980239-106.699114-36.980239-174.710091L42.738895 624.207571c-11.057847 0-20.61655-4.041036-28.690436-12.111852-8.079002-8.082072-12.120039-17.640776-12.120039-28.696576 0-11.050684 4.041036-20.61962 12.120039-28.689413 8.073886-8.072863 17.632589-12.107759 28.690436-12.107759l142.81466 0L185.553555 355.156836l-110.302175-110.302175c-8.074909-8.077979-12.113899-17.640776-12.113899-28.691459 0-11.04966 4.044106-20.61962 12.113899-28.690436 8.071839-8.076956 17.638729-12.123109 28.691459-12.123109 11.056823 0 20.612457 4.052293 28.692482 12.123109l110.302175 110.302175 538.128077 0 110.303198-110.302175c8.070816-8.076956 17.632589-12.123109 28.690436-12.123109 11.050684 0 20.617573 4.052293 28.689413 12.123109 8.077979 8.070816 12.119015 17.640776 12.119015 28.690436 0 11.050684-4.041036 20.614503-12.119015 28.691459l-110.302175 110.302175 0 187.448206 142.815683 0c11.0558 0 20.618597 4.034896 28.690436 12.113899 8.076956 8.069793 12.117992 17.638729 12.117992 28.683273l0 0L1022.06544 583.40119 1022.06544 583.40119zM716.021162 216.158085 307.968605 216.158085c0-56.526411 19.871583-104.667851 59.616796-144.414087 39.733956-39.746236 87.88256-59.611679 144.411017-59.611679 56.529481 0 104.678084 19.865443 144.413064 59.611679C696.156742 111.48921 716.021162 159.631674 716.021162 216.158085L716.021162 216.158085 716.021162 216.158085 716.021162 216.158085z" fill="#1c419a" p-id="4213"></path></svg>
\ No newline at end of file
diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
index f79b2fb5..1c63330e 100644
--- a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
@@ -1,12 +1,26 @@
 import { useSocketMessageStore } from '@/store/socket-message';
 import { ClearOutlined } from '@ant-design/icons';
-import { Row, Col, Tooltip, Button } from 'antd';
+import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
   const clearRecord = useSocketMessageStore((state) => state.clearRecord);
+  const changeConsoleMsgFilter = useSocketMessageStore(
+    (state) => state.setConsoleMsgTypeFilter,
+  );
+
+  const logLevelList = [
+    { label: 'Debug', value: 'debug' },
+    { label: 'Info', value: 'info' },
+    {
+      label: 'Warnings',
+      value: 'warn',
+    },
+    { label: 'Errors', value: 'error' },
+    { label: 'Log', value: 'log' },
+  ];
 
   const clear = useCallback(() => {
     clearRecord('console');
@@ -14,11 +28,21 @@ export const HeaderActions = () => {
   return (
     <Row justify="end">
       <Col>
-        <Tooltip title={t('common.clear')}>
-          <Button onClick={clear}>
-            <ClearOutlined />
-          </Button>
-        </Tooltip>
+        <Space>
+          <Select
+            onChange={changeConsoleMsgFilter}
+            maxTagCount="responsive"
+            mode="multiple"
+            options={logLevelList}
+            placeholder="Log Level Filter"
+            style={{ width: 200 }}
+          />
+          <Tooltip title={t('common.clear')}>
+            <Button onClick={clear}>
+              <ClearOutlined />
+            </Button>
+          </Tooltip>
+        </Space>
       </Col>
     </Row>
   );
diff --git a/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx b/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx
index a82e0c9e..3d859b27 100644
--- a/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx
@@ -6,6 +6,7 @@ import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
 import { ReactComponent as DebugOriginSvg } from '@/assets/image/debug-origin.svg';
 import { ReactComponent as DebugEvalSvg } from '@/assets/image/debug-eval.svg';
 import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
 import './index.less';
 import type { SpyConsole } from '@huolala-tech/page-spy';
 
@@ -13,6 +14,7 @@ interface ThemeItem {
   color: string;
   icon: React.ComponentType | null;
 }
+
 type Theme = Record<SpyConsole.DataType | 'default', ThemeItem>;
 
 const Type2Theme: Partial<Theme> = {
@@ -28,6 +30,10 @@ const Type2Theme: Partial<Theme> = {
     color: '#E9994B',
     icon: WarnSvg,
   },
+  debug: {
+    color: '#8236CB',
+    icon: DebugSvg,
+  },
   'debug-origin': {
     color: '#8236CB',
     icon: DebugOriginSvg,
diff --git a/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx b/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
index b91b49c1..0ff30f24 100644
--- a/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
@@ -27,6 +27,9 @@ export const MainContent = () => {
   }, []);
 
   const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
+  const [dataFilter] = useSocketMessageStore((state) => [
+    state.consoleMsgTypeFilter,
+  ]);
   const [newTips, setNewTips] = useState<boolean>(false);
   useEffect(() => {
     if (data.length === 0) {
@@ -72,34 +75,38 @@ export const MainContent = () => {
 
   return (
     <div className="console-list" ref={containerEl}>
-      {data.map((item) => (
-        <div className={`console-item ${item.logType}`} key={item.id}>
-          <div className="console-item__title">
-            <LogType type={item.logType} />
+      {data
+        .filter((item) =>
+          dataFilter.length ? dataFilter.includes(item.logType) : item,
+        )
+        .map((item) => (
+          <div className={`console-item ${item.logType}`} key={item.id}>
+            <div className="console-item__title">
+              <LogType type={item.logType} />
+            </div>
+            <div className="console-item__content">
+              <Row gutter={12} wrap={false}>
+                <Col style={{ flexShrink: 0 }}>
+                  <Timestamp time={item.time} />
+                </Col>
+                <Col flex={1}>
+                  {isPlaceholderNode(item) ? (
+                    <PlaceholderNode data={item.logs} />
+                  ) : isErrorTraceNode(item) ? (
+                    <ErrorTraceNode data={item} />
+                  ) : (
+                    item.logs?.map((log) => {
+                      return <ConsoleNode data={log} key={log.id} />;
+                    })
+                  )}
+                </Col>
+              </Row>
+            </div>
+            <div className="console-item__url" title={item.url}>
+              {item.url?.substring(new URL(item.url).origin.length)}
+            </div>
           </div>
-          <div className="console-item__content">
-            <Row gutter={12} wrap={false}>
-              <Col style={{ flexShrink: 0 }}>
-                <Timestamp time={item.time} />
-              </Col>
-              <Col flex={1}>
-                {isPlaceholderNode(item) ? (
-                  <PlaceholderNode data={item.logs} />
-                ) : isErrorTraceNode(item) ? (
-                  <ErrorTraceNode data={item} />
-                ) : (
-                  item.logs?.map((log) => {
-                    return <ConsoleNode data={log} key={log.id} />;
-                  })
-                )}
-              </Col>
-            </Row>
-          </div>
-          <div className="console-item__url" title={item.url}>
-            {item.url?.substring(new URL(item.url).origin.length)}
-          </div>
-        </div>
-      ))}
+        ))}
       {newTips && (
         <div className="console-list__new" onClick={scrollToBottom}>
           <Button shape="round" type="primary">
diff --git a/src/pages/Devtools/ConsolePanel/index.less b/src/pages/Devtools/ConsolePanel/index.less
index d87175d3..2ee532b1 100644
--- a/src/pages/Devtools/ConsolePanel/index.less
+++ b/src/pages/Devtools/ConsolePanel/index.less
@@ -36,6 +36,9 @@
     &:last-child {
       border-bottom: 1px solid #f0f0f0;
     }
+    &.debug {
+      color: #1c419a;
+    }
     &.warn {
       color: #573c10;
       background-color: #fefae3;
diff --git a/src/store/socket-message/index.ts b/src/store/socket-message/index.ts
index 859d1c5b..8fe3eeaa 100644
--- a/src/store/socket-message/index.ts
+++ b/src/store/socket-message/index.ts
@@ -22,6 +22,7 @@ const USER_ID = 'Debugger';
 interface SocketMessage {
   socket: SocketStore | null;
   consoleMsg: SpyConsole.DataItem[];
+  consoleMsgTypeFilter: string[];
   networkMsg: SpyNetwork.RequestInfo[];
   systemMsg: SpySystem.DataItem[];
   connectMsg: string[];
@@ -36,6 +37,7 @@ interface SocketMessage {
     data: SpyDatabase.GetTypeDataItem | null;
   };
   initSocket: (url: string) => void;
+  setConsoleMsgTypeFilter: (typeList: string[]) => void;
   clearRecord: (key: string) => void;
   refresh: (key: string) => void;
 }
@@ -43,6 +45,7 @@ interface SocketMessage {
 export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
   socket: null,
   consoleMsg: [],
+  consoleMsgTypeFilter: [],
   networkMsg: [],
   systemMsg: [],
   connectMsg: [],
@@ -243,6 +246,9 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
       }
     });
   },
+  setConsoleMsgTypeFilter: (typeList: string[]) => {
+    set({ consoleMsgTypeFilter: typeList });
+  },
   clearRecord: (key: string) => {
     switch (key) {
       case 'console':

From 58c2a24bb7205130a8cebfec45c7a5eb4e3579b6 Mon Sep 17 00:00:00 2001
From: notfound945 <732039303@qq.com>
Date: Mon, 25 Dec 2023 15:09:36 +0800
Subject: [PATCH 2/3] fix:modify the code based on the feedback from the code
 review.

---
 .../components/HeaderActions/index.tsx        | 13 ++--
 .../components/MainContent/index.tsx          | 66 +++++++++----------
 2 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
index 1c63330e..86a5db9b 100644
--- a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
@@ -6,20 +6,19 @@ import { useTranslation } from 'react-i18next';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
-  const clearRecord = useSocketMessageStore((state) => state.clearRecord);
-  const changeConsoleMsgFilter = useSocketMessageStore(
-    (state) => state.setConsoleMsgTypeFilter,
+  const [clearRecord, changeConsoleMsgFilter] = useSocketMessageStore(
+    (state) => [state.clearRecord, state.setConsoleMsgTypeFilter],
   );
 
   const logLevelList = [
-    { label: 'Debug', value: 'debug' },
-    { label: 'Info', value: 'info' },
+    { label: 'User messages', value: 'log' },
+    { label: 'Errors', value: 'error' },
     {
       label: 'Warnings',
       value: 'warn',
     },
-    { label: 'Errors', value: 'error' },
-    { label: 'Log', value: 'log' },
+    { label: 'Info', value: 'info' },
+    { label: 'Verbose', value: 'debug' },
   ];
 
   const clear = useCallback(() => {
diff --git a/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx b/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
index 0ff30f24..1c8ece7e 100644
--- a/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
@@ -26,8 +26,8 @@ export const MainContent = () => {
     });
   }, []);
 
-  const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
-  const [dataFilter] = useSocketMessageStore((state) => [
+  const [data, dataFilter] = useSocketMessageStore((state) => [
+    state.consoleMsg,
     state.consoleMsgTypeFilter,
   ]);
   const [newTips, setNewTips] = useState<boolean>(false);
@@ -73,40 +73,40 @@ export const MainContent = () => {
     };
   }, []);
 
+  const consoleDataList = dataFilter.length
+    ? data.filter((item) => dataFilter.includes(item.logType))
+    : data;
+
   return (
     <div className="console-list" ref={containerEl}>
-      {data
-        .filter((item) =>
-          dataFilter.length ? dataFilter.includes(item.logType) : item,
-        )
-        .map((item) => (
-          <div className={`console-item ${item.logType}`} key={item.id}>
-            <div className="console-item__title">
-              <LogType type={item.logType} />
-            </div>
-            <div className="console-item__content">
-              <Row gutter={12} wrap={false}>
-                <Col style={{ flexShrink: 0 }}>
-                  <Timestamp time={item.time} />
-                </Col>
-                <Col flex={1}>
-                  {isPlaceholderNode(item) ? (
-                    <PlaceholderNode data={item.logs} />
-                  ) : isErrorTraceNode(item) ? (
-                    <ErrorTraceNode data={item} />
-                  ) : (
-                    item.logs?.map((log) => {
-                      return <ConsoleNode data={log} key={log.id} />;
-                    })
-                  )}
-                </Col>
-              </Row>
-            </div>
-            <div className="console-item__url" title={item.url}>
-              {item.url?.substring(new URL(item.url).origin.length)}
-            </div>
+      {consoleDataList.map((item) => (
+        <div className={`console-item ${item.logType}`} key={item.id}>
+          <div className="console-item__title">
+            <LogType type={item.logType} />
+          </div>
+          <div className="console-item__content">
+            <Row gutter={12} wrap={false}>
+              <Col style={{ flexShrink: 0 }}>
+                <Timestamp time={item.time} />
+              </Col>
+              <Col flex={1}>
+                {isPlaceholderNode(item) ? (
+                  <PlaceholderNode data={item.logs} />
+                ) : isErrorTraceNode(item) ? (
+                  <ErrorTraceNode data={item} />
+                ) : (
+                  item.logs?.map((log) => {
+                    return <ConsoleNode data={log} key={log.id} />;
+                  })
+                )}
+              </Col>
+            </Row>
           </div>
-        ))}
+          <div className="console-item__url" title={item.url}>
+            {item.url?.substring(new URL(item.url).origin.length)}
+          </div>
+        </div>
+      ))}
       {newTips && (
         <div className="console-list__new" onClick={scrollToBottom}>
           <Button shape="round" type="primary">

From f86644413c1cdc432bb9c8018765a07ceaf4c495 Mon Sep 17 00:00:00 2001
From: notfound945 <732039303@qq.com>
Date: Mon, 25 Dec 2023 18:52:33 +0800
Subject: [PATCH 3/3] feat: add icon for log level options

---
 .../components/HeaderActions/index.less       |  8 +++
 .../components/HeaderActions/index.tsx        | 62 ++++++++++++++++---
 2 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less

diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less
new file mode 100644
index 00000000..23d3c9cc
--- /dev/null
+++ b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less
@@ -0,0 +1,8 @@
+.select-item {
+  display: flex;
+  align-items: center;
+
+  &.label-text {
+    margin-left: 5px;
+  }
+}
diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
index 86a5db9b..df33124c 100644
--- a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
+++ b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
@@ -1,8 +1,15 @@
 import { useSocketMessageStore } from '@/store/socket-message';
 import { ClearOutlined } from '@ant-design/icons';
 import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ProxyType } from '@huolala-tech/page-spy/dist/types/lib/console';
+import { ReactComponent as ErrorSvg } from '@/assets/image/error.svg';
+import { ReactComponent as InfoSvg } from '@/assets/image/info.svg';
+import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
+import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
+import './index.less';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
@@ -10,15 +17,55 @@ export const HeaderActions = () => {
     (state) => [state.clearRecord, state.setConsoleMsgTypeFilter],
   );
 
-  const logLevelList = [
-    { label: 'User messages', value: 'log' },
-    { label: 'Errors', value: 'error' },
+  const logLevelList: Array<{
+    label: string | React.ReactNode;
+    value: ProxyType;
+  }> = [
     {
-      label: 'Warnings',
+      label: (
+        <div className="select-item">
+          <UserSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">User messages</span>
+        </div>
+      ),
+      value: 'log',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <ErrorSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Errors</span>
+        </div>
+      ),
+      value: 'error',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <WarnSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Warnings</span>
+        </div>
+      ),
       value: 'warn',
     },
-    { label: 'Info', value: 'info' },
-    { label: 'Verbose', value: 'debug' },
+    {
+      label: (
+        <div className="select-item">
+          <InfoSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Info</span>
+        </div>
+      ),
+      value: 'info',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <DebugSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Verbose</span>
+        </div>
+      ),
+      value: 'debug',
+    },
   ];
 
   const clear = useCallback(() => {
@@ -32,6 +79,7 @@ export const HeaderActions = () => {
             onChange={changeConsoleMsgFilter}
             maxTagCount="responsive"
             mode="multiple"
+            allowClear={true}
             options={logLevelList}
             placeholder="Log Level Filter"
             style={{ width: 200 }}