feat: supports show connection detail

src/components/connection/connection-table.tsx

@@ -1,37 +1,29 @@
 import dayjs from "dayjs";
 import { useMemo, useState } from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { Snackbar } from "@mui/material";
+import { truncateStr } from "@/utils/truncate-str";
 import parseTraffic from "@/utils/parse-traffic";
 
 interface Props {
   connections: IConnectionsItem[];
+  onShowDetail: (data: IConnectionsItem) => void;
 }
 
-const ConnectionTable = (props: Props) => {
-  const { connections } = props;
+export const ConnectionTable = (props: Props) => {
+  const { connections, onShowDetail } = props;
 
-  const [openedDetail, setOpenedDetail] = useState<IConnectionsItem | null>(
-    null
-  );
+  const [columnVisible, setColumnVisible] = useState<
+    Partial<Record<keyof IConnectionsItem, boolean>>
+  >({});
 
   const columns: GridColDef[] = [
-    {
-      field: "host",
-      headerName: "Host",
-      flex: 200,
-      minWidth: 200,
-      resizable: false,
-      disableColumnMenu: true,
-    },
+    { field: "host", headerName: "Host", flex: 220, minWidth: 220 },
     {
       field: "download",
       headerName: "Download",
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
     },
     {
       field: "upload",
@@ -39,18 +31,13 @@ const ConnectionTable = (props: Props) => {
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
     },
     {
       field: "dlSpeed",
       headerName: "DL Speed",
-      align: "right",
       width: 88,
+      align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) =>
-        parseTraffic(params.value).join(" ") + "/s",
     },
     {
       field: "ulSpeed",
@@ -58,55 +45,26 @@ const ConnectionTable = (props: Props) => {
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) =>
-        parseTraffic(params.value).join(" ") + "/s",
-    },
-    {
-      field: "chains",
-      headerName: "Chains",
-      width: 360,
-      disableColumnMenu: true,
-    },
-    {
-      field: "rule",
-      headerName: "Rule",
-      width: 225,
-      disableColumnMenu: true,
-    },
-    {
-      field: "process",
-      headerName: "Process",
-      width: 480,
-      disableColumnMenu: true,
     },
+    { field: "chains", headerName: "Chains", flex: 360, minWidth: 360 },
+    { field: "rule", headerName: "Rule", flex: 300, minWidth: 250 },
+    { field: "process", headerName: "Process", flex: 480, minWidth: 480 },
     {
       field: "time",
       headerName: "Time",
-      width: 120,
+      flex: 120,
+      minWidth: 100,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params) => dayjs(params.value).fromNow(),
-    },
-    {
-      field: "source",
-      headerName: "Source",
-      width: 150,
-      disableColumnMenu: true,
     },
+    { field: "source", headerName: "Source", flex: 200, minWidth: 130 },
     {
       field: "destinationIP",
       headerName: "Destination IP",
-      width: 125,
-      disableColumnMenu: true,
-    },
-    {
-      field: "type",
-      headerName: "Type",
-      width: 160,
-      disableColumnMenu: true,
+      flex: 200,
+      minWidth: 130,
     },
+    { field: "type", headerName: "Type", flex: 160, minWidth: 100 },
   ];
 
   const connRows = useMemo(() => {
@@ -120,18 +78,16 @@ const ConnectionTable = (props: Props) => {
         host: metadata.host
           ? `${metadata.host}:${metadata.destinationPort}`
           : `${metadata.destinationIP}:${metadata.destinationPort}`,
-        download: each.download,
-        upload: each.upload,
-        dlSpeed: each.curDownload,
-        ulSpeed: each.curUpload,
+        download: parseTraffic(each.download).join(" "),
+        upload: parseTraffic(each.upload).join(" "),
+        dlSpeed: parseTraffic(each.curDownload).join(" ") + "/s",
+        ulSpeed: parseTraffic(each.curUpload).join(" ") + "/s",
         chains,
         rule,
-        process: truncateStr(
-          metadata.process || metadata.processPath || "",
-          16,
-          56
+        process: truncateStr(metadata.process || metadata.processPath)?.repeat(
+          10
         ),
-        time: each.start,
+        time: dayjs(each.start).fromNow(),
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
         destinationIP: metadata.destinationIP,
         type: `${metadata.type}(${metadata.network})`,
@@ -142,101 +98,15 @@ const ConnectionTable = (props: Props) => {
   }, [connections]);
 
   return (
-    <>
-      <DataGrid
-        rows={connRows}
-        columns={columns}
-        onRowClick={(e) => setOpenedDetail(e.row.connectionData)}
-        density="compact"
-        sx={{ border: "none", "div:focus": { outline: "none !important" } }}
-        hideFooter
-      />
-      <Snackbar
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-        open={Boolean(openedDetail)}
-        onClose={() => setOpenedDetail(null)}
-        message={
-          openedDetail ? <SingleConnectionDetail data={openedDetail} /> : null
-        }
-      />
-    </>
-  );
-};
-
-export default ConnectionTable;
-
-const truncateStr = (str: string, prefixLen: number, maxLen: number) => {
-  if (str.length <= maxLen) return str;
-  return (
-    str.slice(0, prefixLen) + " ... " + str.slice(-(maxLen - prefixLen - 5))
-  );
-};
-
-const SingleConnectionDetail = ({ data }: { data: IConnectionsItem }) => {
-  const { metadata, rulePayload } = data;
-  const chains = [...data.chains].reverse().join(" / ");
-  const rule = rulePayload ? `${data.rule}(${rulePayload})` : data.rule;
-  const host = metadata.host
-    ? `${metadata.host}:${metadata.destinationPort}`
-    : `${metadata.destinationIP}:${metadata.destinationPort}`;
-
-  return (
-    <div>
-      <div>
-        {" "}
-        <b>Host</b>: <span>{host}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Download</b>: <span>{parseTraffic(data.download).join(" ")}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Upload</b>: <span>{parseTraffic(data.upload).join(" ")}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>DL Speed</b>:{" "}
-        <span>{parseTraffic(data.curDownload ?? -1).join(" ") + "/s"}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>UL Speed</b>:{" "}
-        <span>{parseTraffic(data.curUpload ?? -1).join(" ") + "/s"}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Chains</b>: <span>{chains}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Rule</b>: <span>{rule}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Process</b>: <span>{metadata.process}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>ProcessPath</b>: <span>{metadata.processPath}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Time</b>: <span>{dayjs(data.start).fromNow()}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Source</b>:{" "}
-        <span>{`${metadata.sourceIP}:${metadata.sourcePort}`}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Destination IP</b>: <span>{metadata.destinationIP}</span>{" "}
-      </div>
-      <div>
-        {" "}
-        <b>Type</b>: <span>{`${metadata.type}(${metadata.network})`}</span>{" "}
-      </div>
-    </div>
+    <DataGrid
+      hideFooter
+      rows={connRows}
+      columns={columns}
+      onRowClick={(e) => onShowDetail(e.row.connectionData)}
+      density="compact"
+      sx={{ border: "none", "div:focus": { outline: "none !important" } }}
+      columnVisibilityModel={columnVisible}
+      onColumnVisibilityModelChange={(e) => setColumnVisible(e)}
+    />
   );
 };