fix: Fix connection table sort error

#108

src/components/connection/connection-table.tsx

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

src/utils/custom-comparator.ts

@@ -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;
-};