shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 04:43:44 +08:00
Code Packages Projects Releases Activity

fix: Fix connection table sort error

Browse Source 
#108
This commit is contained in:
MystiPanda 2024-01-17 12:54:54 +08:00
parent d776f1765d
commit 73a597e3e5
2 changed files with 23 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/connection/connection-table.tsx
View File

@ -1,9 +1,12 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { DataGrid, GridColDef } from "@mui/x-data-grid"; import {
DataGrid,
GridColDef,
GridValueFormatterParams,
} from "@mui/x-data-grid";
import { truncateStr } from "@/utils/truncate-str"; import { truncateStr } from "@/utils/truncate-str";
import parseTraffic from "@/utils/parse-traffic"; import parseTraffic from "@/utils/parse-traffic";
import { sortWithUnit, sortStringTime } from "@/utils/custom-comparator";
interface Props { interface Props {
connections: IConnectionsItem[]; connections: IConnectionsItem[];
@ -25,7 +28,8 @@ export const ConnectionTable = (props: Props) => {
width: 88, width: 88,
align: "right", align: "right",
headerAlign: "right", headerAlign: "right",
sortComparator: sortWithUnit, valueFormatter: (params: GridValueFormatterParams<number>) =>
parseTraffic(params.value).join(" "),
}, },
{ {
field: "upload", field: "upload",
@ -33,7 +37,8 @@ export const ConnectionTable = (props: Props) => {
width: 88, width: 88,
align: "right", align: "right",
headerAlign: "right", headerAlign: "right",
sortComparator: sortWithUnit, valueFormatter: (params: GridValueFormatterParams<number>) =>
parseTraffic(params.value).join(" "),
}, },
{ {
field: "dlSpeed", field: "dlSpeed",
@ -41,7 +46,8 @@ export const ConnectionTable = (props: Props) => {
width: 88, width: 88,
align: "right", align: "right",
headerAlign: "right", headerAlign: "right",
sortComparator: sortWithUnit, valueFormatter: (params: GridValueFormatterParams<number>) =>
parseTraffic(params.value).join(" ") + "/s",
}, },
{ {
field: "ulSpeed", field: "ulSpeed",
@ -49,7 +55,8 @@ export const ConnectionTable = (props: Props) => {
width: 88, width: 88,
align: "right", align: "right",
headerAlign: "right", headerAlign: "right",
sortComparator: sortWithUnit, valueFormatter: (params: GridValueFormatterParams<number>) =>
parseTraffic(params.value).join(" ") + "/s",
}, },
{ field: "chains", headerName: "Chains", flex: 360, minWidth: 360 }, { field: "chains", headerName: "Chains", flex: 360, minWidth: 360 },
{ field: "rule", headerName: "Rule", flex: 300, minWidth: 250 }, { field: "rule", headerName: "Rule", flex: 300, minWidth: 250 },
@ -61,7 +68,11 @@ export const ConnectionTable = (props: Props) => {
minWidth: 100, minWidth: 100,
align: "right", align: "right",
headerAlign: "right", headerAlign: "right",
sortComparator: sortStringTime, sortComparator: (v1, v2) => {
return new Date(v2).getTime() - new Date(v1).getTime();
},
valueFormatter: (params: GridValueFormatterParams<string>) =>
dayjs(params.value).fromNow(),
}, },
{ field: "source", headerName: "Source", flex: 200, minWidth: 130 }, { field: "source", headerName: "Source", flex: 200, minWidth: 130 },
{ {
@ -83,14 +94,14 @@ export const ConnectionTable = (props: Props) => {
host: metadata.host host: metadata.host
? `${metadata.host}:${metadata.destinationPort}` ? `${metadata.host}:${metadata.destinationPort}`
: `${metadata.destinationIP}:${metadata.destinationPort}`, : `${metadata.destinationIP}:${metadata.destinationPort}`,
download: parseTraffic(each.download).join(" "), download: each.download,
upload: parseTraffic(each.upload).join(" "), upload: each.upload,
dlSpeed: parseTraffic(each.curDownload).join(" ") + "/s", dlSpeed: each.curDownload,
ulSpeed: parseTraffic(each.curUpload).join(" ") + "/s", ulSpeed: each.curUpload,
chains, chains,
rule, rule,
process: truncateStr(metadata.process || metadata.processPath), process: truncateStr(metadata.process || metadata.processPath),
time: dayjs(each.start).fromNow(), time: each.start,
source: `${metadata.sourceIP}:${metadata.sourcePort}`, source: `${metadata.sourceIP}:${metadata.sourcePort}`,
destinationIP: metadata.destinationIP, destinationIP: metadata.destinationIP,
type: `${metadata.type}(${metadata.network})`, type: `${metadata.type}(${metadata.network})`,

38
src/utils/custom-comparator.ts
View File

@ -1,38 +0,0 @@
import { GridComparatorFn } from "@mui/x-data-grid";
const UNITS = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const unitMap = new Map<string, number>();
unitMap.set("分钟前", 60);
unitMap.set("小时前", 60 * 60);
unitMap.set("天前", 60 * 60 * 24);
unitMap.set("个月前", 60 * 60 * 24 * 30);
unitMap.set("年前", 60 * 60 * 24 * 30 * 12);
export const sortWithUnit: GridComparatorFn<string> = (v1, v2) => {
const [ret1, unit1] = v1.split(" ");
const [ret2, unit2] = v2.split(" ");
let value1 =
parseFloat(ret1) *
Math.pow(1024, UNITS.indexOf(unit1.replace("/s", "").trim()));
let value2 =
parseFloat(ret2) *
Math.pow(1024, UNITS.indexOf(unit2.replace("/s", "").trim()));
return value1 - value2;
};
export const sortStringTime: GridComparatorFn<string> = (v1, v2) => {
if (v1 === "几秒前") {
return -1;
}
if (v2 === "几秒前") {
return 1;
}
const matches1 = v1.match(/[0-9]+/);
const num1 = matches1 !== null ? parseInt(matches1[0]) : 0;
const matches2 = v2.match(/[0-9]+/);
const num2 = matches2 !== null ? parseInt(matches2[0]) : 0;
const unit1 = unitMap.get(v1.replace(num1.toString(), "").trim()) || 0;
const unit2 = unitMap.get(v2.replace(num2.toString(), "").trim()) || 0;
return num1 * unit1 - num2 * unit2;
};