feat: show connections with table layout

src/components/connection/connection-item.tsx

@@ -1,19 +1,25 @@
 import dayjs from "dayjs";
 import { useLockFn } from "ahooks";
-import { styled, ListItem, IconButton, ListItemText } from "@mui/material";
+import {
+  styled,
+  ListItem,
+  IconButton,
+  ListItemText,
+  Box,
+  alpha,
+} from "@mui/material";
 import { CloseRounded } from "@mui/icons-material";
 import { deleteConnection } from "@/services/api";
 import parseTraffic from "@/utils/parse-traffic";
 
 const Tag = styled("span")(({ theme }) => ({
-  display: "inline-block",
-  fontSize: "12px",
+  fontSize: "10px",
   padding: "0 4px",
   lineHeight: 1.375,
-  border: "1px solid #ccc",
+  border: "1px solid",
   borderRadius: 4,
-  marginRight: "0.1em",
-  transform: "scale(0.92)",
+  borderColor: alpha(theme.palette.text.secondary, 0.35),
+  marginRight: "4px",
 }));
 
 interface Props {
@@ -26,7 +32,7 @@ const ConnectionItem = (props: Props) => {
   const { id, metadata, chains, start, curUpload, curDownload } = value;
 
   const onDelete = useLockFn(async () => deleteConnection(id));
-  const showTraffic = curUpload! > 1024 || curDownload! > 1024;
+  const showTraffic = curUpload! >= 100 || curDownload! >= 100;
 
   return (
     <ListItem
@@ -41,19 +47,17 @@ const ConnectionItem = (props: Props) => {
         sx={{ userSelect: "text" }}
         primary={metadata.host || metadata.destinationIP}
         secondary={
-          <>
+          <Box sx={{ display: "flex", flexWrap: "wrap" }}>
             <Tag sx={{ textTransform: "uppercase", color: "success" }}>
               {metadata.network}
             </Tag>
 
             <Tag>{metadata.type}</Tag>
 
-            {metadata.process && <Tag>{metadata.process}</Tag>}
+            {!!metadata.process && <Tag>{metadata.process}</Tag>}
 
             {chains.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
 
-            {chains.length > 0 && <Tag>{chains[0]}</Tag>}
-
             <Tag>{dayjs(start).fromNow()}</Tag>
 
             {showTraffic && (
@@ -61,7 +65,7 @@ const ConnectionItem = (props: Props) => {
                 {parseTraffic(curUpload!)} / {parseTraffic(curDownload!)}
               </Tag>
             )}
-          </>
+          </Box>
         }
       />
     </ListItem>

src/components/connection/connection-table.tsx

@@ -0,0 +1,144 @@
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import parseTraffic from "@/utils/parse-traffic";
+
+interface Props {
+  connections: ApiType.ConnectionsItem[];
+}
+
+const ConnectionTable = (props: Props) => {
+  const { connections } = props;
+
+  const columns: GridColDef[] = [
+    {
+      field: "host",
+      headerName: "Host",
+      flex: 200,
+      minWidth: 200,
+      resizable: false,
+      disableColumnMenu: true,
+    },
+    {
+      field: "download",
+      headerName: "Download",
+      width: 88,
+      align: "right",
+      headerAlign: "right",
+      disableColumnMenu: true,
+      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
+    },
+    {
+      field: "upload",
+      headerName: "Upload",
+      width: 88,
+      align: "right",
+      headerAlign: "right",
+      disableColumnMenu: true,
+      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
+    },
+    {
+      field: "dlSpeed",
+      headerName: "DL Speed",
+      align: "right",
+      width: 88,
+      headerAlign: "right",
+      disableColumnMenu: true,
+      valueFormatter: (params: any) =>
+        parseTraffic(params.value).join(" ") + "/s",
+    },
+    {
+      field: "ulSpeed",
+      headerName: "UL Speed",
+      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: 120,
+      disableColumnMenu: true,
+    },
+    {
+      field: "time",
+      headerName: "Time",
+      width: 120,
+      align: "right",
+      headerAlign: "right",
+      disableColumnMenu: true,
+      valueFormatter: (params) => dayjs(params.value).fromNow(),
+    },
+    {
+      field: "source",
+      headerName: "Source",
+      width: 150,
+      disableColumnMenu: true,
+    },
+    {
+      field: "destinationIP",
+      headerName: "Destination IP",
+      width: 125,
+      disableColumnMenu: true,
+    },
+    {
+      field: "type",
+      headerName: "Type",
+      width: 160,
+      disableColumnMenu: true,
+    },
+  ];
+
+  const connRows = useMemo(() => {
+    return connections.map((each) => {
+      const { metadata, rulePayload } = each;
+      const chains = [...each.chains].reverse().join(" / ");
+      const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
+
+      return {
+        id: each.id,
+        host: metadata.host
+          ? `${metadata.host}:${metadata.destinationPort}`
+          : `${metadata.destinationIP}:${metadata.destinationPort}`,
+        download: each.download,
+        upload: each.upload,
+        dlSpeed: each.curDownload,
+        ulSpeed: each.curUpload,
+        chains,
+        rule,
+        process: metadata.process || metadata.processPath,
+        time: each.start,
+        source: `${metadata.sourceIP}:${metadata.sourcePort}`,
+        destinationIP: metadata.destinationIP,
+        type: `${metadata.type}(${metadata.network})`,
+      };
+    });
+  }, [connections]);
+
+  return (
+    <DataGrid
+      rows={connRows}
+      columns={columns}
+      density="compact"
+      sx={{ border: "none", "div:focus": { outline: "none !important" } }}
+      hideFooter
+    />
+  );
+};
+
+export default ConnectionTable;