Skip to content
Snippets Groups Projects
Unverified Commit dd154550 authored by GyDi's avatar GyDi
Browse files

feat: enhance log data

parent 12ac7bb3
No related branches found
No related tags found
No related merge requests found
...@@ -7,9 +7,10 @@ import { listen } from "@tauri-apps/api/event"; ...@@ -7,9 +7,10 @@ import { listen } from "@tauri-apps/api/event";
import { ApiType } from "../../services/types"; import { ApiType } from "../../services/types";
import { getInfomation } from "../../services/api"; import { getInfomation } from "../../services/api";
import { getVergeConfig } from "../../services/cmds"; import { getVergeConfig } from "../../services/cmds";
import { atomClashPort } from "../../states/setting"; import { atomClashPort } from "../../services/states";
import parseTraffic from "../../utils/parse-traffic"; import useLogSetup from "./use-log-setup";
import useTrafficGraph from "./use-traffic-graph"; import useTrafficGraph from "./use-traffic-graph";
import parseTraffic from "../../utils/parse-traffic";
const LayoutTraffic = () => { const LayoutTraffic = () => {
const portValue = useRecoilValue(atomClashPort); const portValue = useRecoilValue(atomClashPort);
...@@ -21,6 +22,9 @@ const LayoutTraffic = () => { ...@@ -21,6 +22,9 @@ const LayoutTraffic = () => {
const { data } = useSWR("getVergeConfig", getVergeConfig); const { data } = useSWR("getVergeConfig", getVergeConfig);
const trafficGraph = data?.traffic_graph ?? true; const trafficGraph = data?.traffic_graph ?? true;
// setup log ws during layout
useLogSetup();
useEffect(() => { useEffect(() => {
let unlisten: () => void = null!; let unlisten: () => void = null!;
......
import dayjs from "dayjs";
import { useEffect } from "react";
import { useSetRecoilState } from "recoil";
import { listen } from "@tauri-apps/api/event";
import { ApiType } from "../../services/types";
import { getInfomation } from "../../services/api";
import { atomLogData } from "../../services/states";
const MAX_LOG_NUM = 1000;
// setup the log websocket
export default function useLogSetup() {
const setLogData = useSetRecoilState(atomLogData);
useEffect(() => {
let ws: WebSocket = null!;
let unlisten: () => void = null!;
const handler = (event: MessageEvent<any>) => {
const data = JSON.parse(event.data) as ApiType.LogItem;
const time = dayjs().format("MM-DD HH:mm:ss");
setLogData((l) => {
if (l.length >= MAX_LOG_NUM) l.shift();
return [...l, { ...data, time }];
});
};
(async () => {
const { server = "", secret = "" } = await getInfomation();
ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
ws.addEventListener("message", handler);
// reconnect the websocket
unlisten = await listen("restart_clash", async () => {
const { server = "", secret = "" } = await getInfomation();
ws?.close();
ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
ws.addEventListener("message", handler);
});
})();
return () => {
ws?.close();
unlisten?.();
};
}, []);
}
...@@ -11,7 +11,7 @@ import { ...@@ -11,7 +11,7 @@ import {
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
import { ApiType } from "../../services/types"; import { ApiType } from "../../services/types";
import { atomClashPort } from "../../states/setting"; import { atomClashPort } from "../../services/states";
import { patchClashConfig } from "../../services/cmds"; import { patchClashConfig } from "../../services/cmds";
import { SettingList, SettingItem } from "./setting"; import { SettingList, SettingItem } from "./setting";
import { getClashConfig, getVersion, updateConfigs } from "../../services/api"; import { getClashConfig, getVersion, updateConfigs } from "../../services/api";
......
import dayjs from "dayjs"; import { useRecoilState } from "recoil";
import { useEffect, useState } from "react";
import { Button, Paper } from "@mui/material"; import { Button, Paper } from "@mui/material";
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import { ApiType } from "../services/types"; import { atomLogData } from "../services/states";
import { getInfomation } from "../services/api";
import BasePage from "../components/base/base-page"; import BasePage from "../components/base/base-page";
import LogItem from "../components/log/log-item"; import LogItem from "../components/log/log-item";
let logCache: ApiType.LogItem[] = [];
const LogPage = () => { const LogPage = () => {
const [logData, setLogData] = useState(logCache); const [logData, setLogData] = useRecoilState(atomLogData);
useEffect(() => {
let ws: WebSocket | null = null;
getInfomation().then((result) => {
const { server = "", secret = "" } = result;
ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
ws.addEventListener("message", (event) => {
const data = JSON.parse(event.data) as ApiType.LogItem;
const time = dayjs().format("MM-DD HH:mm:ss");
setLogData((l) => (logCache = [...l, { ...data, time }]));
});
});
return () => ws?.close();
}, []);
const onClear = () => {
setLogData([]);
logCache = [];
};
return ( return (
<BasePage <BasePage
...@@ -43,7 +17,7 @@ const LogPage = () => { ...@@ -43,7 +17,7 @@ const LogPage = () => {
size="small" size="small"
sx={{ mt: 1 }} sx={{ mt: 1 }}
variant="contained" variant="contained"
onClick={onClear} onClick={() => setLogData([])}
> >
Clear Clear
</Button> </Button>
......
import { atom } from "recoil"; import { atom } from "recoil";
import { ApiType } from "./types";
export const atomClashPort = atom<number>({ export const atomClashPort = atom<number>({
key: "atomClashPort", key: "atomClashPort",
default: 0, default: 0,
}); });
export const atomLogData = atom<ApiType.LogItem[]>({
key: "atomLogData",
default: [],
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment