fix(logs): improve log fetching and add log level selection

5 files changed, 41 insertions, 22 deletions

diff --git a/src/api/logs.ts b/src/api/logs.ts
index db37bcd..fd08d56 100644
--- a/src/api/logs.ts
+++ b/src/api/logs.ts
@@ -107,7 +107,10 @@ export function fetchLogs(apiConfig: LogsAPIConfig, appendLog: AppendLogFn) {
 }
 
 export function stop() {
-  ws.close();
+  if (ws) {
+    ws.close();
+    fetched = false;
+  }
   if (controller) controller.abort();
 }
 
@@ -146,6 +149,6 @@ function fetchLogsWithFetch(apiConfig: LogsAPIConfig, appendLog: AppendLogFn) {
 
       // eslint-disable-next-line no-console
       console.log('GET /logs error:', err.message);
-    }
+    },
   );
 }
diff --git a/src/app/router.tsx b/src/app/router.tsx
index 87e78ee..dc7ce6f 100644
--- a/src/app/router.tsx
+++ b/src/app/router.tsx
@@ -1,26 +1,22 @@
-import * as React from 'react';
+import { Suspense } from 'react';
 import { HashRouter, Navigate, Route, RouteObject, Routes, useRoutes } from 'react-router-dom';
 
 import Loading from '~/components/Loading';
-import Loading2 from '~/components/Loading2';
 import { Head } from '~/components/shared/Head';
 import SideBar from '~/components/SideBar';
 
 import styles from '../App.module.scss';
 
 import APIDiscovery from './APIDiscovery';
-
-const { Suspense, lazy } = React;
-
-const HomePage = lazy(() => import('../pages/HomePage'));
-const ConnectionsPage = lazy(() => import('../pages/ConnectionsPage'));
-const ConfigPage = lazy(() => import('../pages/ConfigPage'));
-const LogsPage = lazy(() => import('../pages/LogsPage'));
-const ProxiesPage = lazy(() => import('../pages/ProxiesPage'));
-const RulesPage = lazy(() => import('../pages/RulesPage'));
-const AboutPage = lazy(() => import('../pages/AboutPage'));
-const BackendPage = lazy(() => import('../pages/BackendPage'));
-const StyleGuidePage = lazy(() => import('../pages/StyleGuidePage'));
+import AboutPage from '../pages/AboutPage';
+import BackendPage from '../pages/BackendPage';
+import ConfigPage from '../pages/ConfigPage';
+import ConnectionsPage from '../pages/ConnectionsPage';
+import HomePage from '../pages/HomePage';
+import LogsPage from '../pages/LogsPage';
+import ProxiesPage from '../pages/ProxiesPage';
+import RulesPage from '../pages/RulesPage';
+import StyleGuidePage from '../pages/StyleGuidePage';
 
 const routes = [
   { path: '/', element: <Navigate to="/proxies" replace /> },
@@ -39,9 +35,7 @@ function DashboardRouter() {
     <>
       <APIDiscovery />
       <SideBar />
-      <div className={styles.content}>
-        <Suspense fallback={<Loading2 />}>{useRoutes(routes)}</Suspense>
-      </div>
+      <div className={styles.content}>{useRoutes(routes)}</div>
     </>
   );
 }
diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index 87492c7..c90071d 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -25,6 +25,12 @@
   }
 }
 
+.levelSelect {
+  flex-shrink: 0;
+  width: auto;
+  min-width: 90px;
+}
+
 .clearBtn {
   background: none;
   border: none;
@@ -35,7 +41,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 
   &:hover {
     background-color: var(--bg-near-transparent);
@@ -119,7 +127,9 @@
   border-radius: 8px;
   color: var(--color-text);
   overflow-y: auto;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
   @media (max-width: 768px) {
     margin: 10px 15px;
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 59abced..9baf3fa 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -4,11 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 import ContentHeader from '~/components/ContentHeader';
 import LogSearch from '~/components/LogSearch';
+import Select from '~/components/shared/Select';
 import { useStoreActions } from '~/components/StateProvider';
 import SvgYacd from '~/components/SvgYacd';
 import useRemainingViewPortHeight from '~/hooks/useRemainingViewPortHeight';
 import { useLogsPage } from '~/modules/logs/hooks';
+import { LOG_LEVEL_OPTIONS } from '~/modules/config/utils';
 import { LOG_TYPES, LOGS_HEIGHT_RATIO } from '~/modules/logs/utils';
+import { updateConfigs } from '~/store/configs';
 import { clearLogs } from '~/store/logs';
 import { DispatchFn, Log } from '~/store/types';
 import { ClashAPIConfig } from '~/types';
@@ -58,6 +61,12 @@ export default function Logs({ dispatch, logLevel, apiConfig, logs, logStreaming
       <ContentHeader>
         <div className={s.headerControls}>
           <LogSearch className={s.searchWrapper} />
+          <Select
+            className={s.levelSelect}
+            options={LOG_LEVEL_OPTIONS}
+            selected={logLevel ? logLevel.toLowerCase() : 'info'}
+            onChange={(e) => dispatch(updateConfigs(apiConfig, { 'log-level': e.target.value }))}
+          />
           <button className={s.clearBtn} onClick={() => dispatch(clearLogs())} title={t('Clear')}>
             <Trash2 size={18} />
           </button>
diff --git a/src/modules/logs/hooks.ts b/src/modules/logs/hooks.ts
index 45e09e4..abab77f 100644
--- a/src/modules/logs/hooks.ts
+++ b/src/modules/logs/hooks.ts
@@ -35,6 +35,9 @@ export function useLogsPage({
 
   useEffect(() => {
     fetchLogs({ ...apiConfig, logLevel }, appendLogInternal);
+    return () => {
+      stopLogs();
+    };
   }, [apiConfig, logLevel, appendLogInternal]);
 
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -65,4 +68,4 @@ export function useLogsPage({
     scrollToBottom,
     onScroll,
   };
-}
\ No newline at end of file
+}