feat: show connections with table layout

package.json

@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
+    "@mui/x-data-grid": "^5.17.4",
     "@tauri-apps/api": "^1.1.0",
     "ahooks": "^3.7.0",
     "axios": "^0.27.2",

src/components/connection/connection-item.tsx

 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

+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;

src/pages/connections.tsx

 import { useEffect, useMemo, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  MenuItem,
+  Paper,
+  Select,
+  TextField,
+} from "@mui/material";
+import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
+import { TableChartRounded, TableRowsRounded } from "@mui/icons-material";
 import { closeAllConnections, getInformation } from "@/services/api";
+import { atomConnectionSetting } from "@/services/states";
 import BasePage from "@/components/base/base-page";
 import BaseEmpty from "@/components/base/base-empty";
 import ConnectionItem from "@/components/connection/connection-item";
+import ConnectionTable from "@/components/connection/connection-table";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -19,10 +31,12 @@ const ConnectionsPage = () => {
   const [curOrderOpt, setOrderOpt] = useState("Default");
   const [connData, setConnData] = useState<ApiType.Connections>(initConn);
 
+  const [setting, setSetting] = useRecoilState(atomConnectionSetting);
+
+  const isTableLayout = setting.layout === "table";
+
   const orderOpts: Record<string, OrderFunc> = {
     Default: (list) => list,
-    // "Download Traffic": (list) => list,
-    // "Upload Traffic": (list) => list,
     "Upload Speed": (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
     "Download Speed": (list) =>
       list.sort((a, b) => b.curDownload! - a.curDownload!),
@@ -92,14 +106,29 @@ const ConnectionsPage = () => {
       title={t("Connections")}
       contentStyle={{ height: "100%" }}
       header={
-        <Button
-          size="small"
-          sx={{ mt: 1 }}
-          variant="contained"
-          onClick={onCloseAll}
-        >
-          {t("Close All")}
-        </Button>
+        <Box sx={{ mt: 1, display: "flex", alignItems: "center" }}>
+          <IconButton
+            size="small"
+            sx={{ mr: 2 }}
+            onClick={() =>
+              setSetting((o) =>
+                o.layout === "list"
+                  ? { ...o, layout: "table" }
+                  : { ...o, layout: "list" }
+              )
+            }
+          >
+            {isTableLayout ? (
+              <TableChartRounded fontSize="inherit" />
+            ) : (
+              <TableRowsRounded fontSize="inherit" />
+            )}
+          </IconButton>
+
+          <Button size="small" variant="contained" onClick={onCloseAll}>
+            {t("Close All")}
+          </Button>
+        </Box>
       }
     >
       <Paper sx={{ boxShadow: 2, height: "100%" }}>
@@ -113,23 +142,25 @@ const ConnectionsPage = () => {
             alignItems: "center",
           }}
         >
-          <Select
-            size="small"
-            autoComplete="off"
-            value={curOrderOpt}
-            onChange={(e) => setOrderOpt(e.target.value)}
-            sx={{
-              mr: 1,
-              width: i18n.language === "en" ? 190 : 120,
-              '[role="button"]': { py: 0.65 },
-            }}
-          >
-            {Object.keys(orderOpts).map((opt) => (
-              <MenuItem key={opt} value={opt}>
-                <span style={{ fontSize: 14 }}>{t(opt)}</span>
-              </MenuItem>
-            ))}
-          </Select>
+          {!isTableLayout && (
+            <Select
+              size="small"
+              autoComplete="off"
+              value={curOrderOpt}
+              onChange={(e) => setOrderOpt(e.target.value)}
+              sx={{
+                mr: 1,
+                width: i18n.language === "en" ? 190 : 120,
+                '[role="button"]': { py: 0.65 },
+              }}
+            >
+              {Object.keys(orderOpts).map((opt) => (
+                <MenuItem key={opt} value={opt}>
+                  <span style={{ fontSize: 14 }}>{t(opt)}</span>
+                </MenuItem>
+              ))}
+            </Select>
+          )}
 
           <TextField
             hiddenLabel
@@ -145,13 +176,15 @@ const ConnectionsPage = () => {
         </Box>
 
         <Box height="calc(100% - 50px)">
-          {filterConn.length > 0 ? (
+          {filterConn.length === 0 ? (
+            <BaseEmpty text="No Connections" />
+          ) : isTableLayout ? (
+            <ConnectionTable connections={filterConn} />
+          ) : (
             <Virtuoso
               data={filterConn}
               itemContent={(index, item) => <ConnectionItem value={item} />}
             />
-          ) : (
-            <BaseEmpty text="No Connections" />
           )}
         </Box>
       </Paper>

src/services/states.ts

@@ -21,14 +21,45 @@ export const atomEnableLog = atom<boolean>({
     ({ setSelf, onSet }) => {
       const key = "enable-log";
 
-      setSelf(localStorage.getItem(key) !== "false");
+      try {
+        setSelf(localStorage.getItem(key) !== "false");
+      } catch {}
 
       onSet((newValue, _, isReset) => {
-        if (isReset) {
-          localStorage.removeItem(key);
-        } else {
-          localStorage.setItem(key, newValue.toString());
-        }
+        try {
+          if (isReset) {
+            localStorage.removeItem(key);
+          } else {
+            localStorage.setItem(key, newValue.toString());
+          }
+        } catch {}
+      });
+    },
+  ],
+});
+
+interface IConnectionSetting {
+  layout: "table" | "list";
+}
+
+export const atomConnectionSetting = atom<IConnectionSetting>({
+  key: "atomConnectionSetting",
+  effects: [
+    ({ setSelf, onSet }) => {
+      const key = "connections-setting";
+
+      try {
+        const value = localStorage.getItem(key);
+        const data = value == null ? { layout: "list" } : JSON.parse(value);
+        setSelf(data);
+      } catch {
+        setSelf({ layout: "list" });
+      }
+
+      onSet((newValue) => {
+        try {
+          localStorage.setItem(key, JSON.stringify(newValue));
+        } catch {}
       });
     },
   ],

src/services/types.d.ts

@@ -68,6 +68,7 @@ declare namespace ApiType {
       destinationPort: string;
       destinationIP?: string;
       process?: string;
+      processPath?: string;
     };
     upload: number;
     download: number;

yarn.lock

@@ -552,6 +552,17 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/x-data-grid@^5.17.4":
+  version "5.17.4"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-5.17.4.tgz#93ccd06a0a15d02b8d59c2d3038e217ffc72350d"
+  integrity sha512-cxZuu65Whh1DNU9M2X5ljDOx+GAEpGeJLPnugMjhgqTOszfJZX/4kI7NftrPy051Hy0um0sv0NVTDSFXG6yixA==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@mui/utils" "^5.10.3"
+    clsx "^1.2.1"
+    prop-types "^15.8.1"
+    reselect "^4.1.6"
+
 "@octokit/auth-token@^2.4.4":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.5.0.tgz#27c37ea26c205f28443402477ffd261311f21e36"
@@ -2016,6 +2027,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+reselect@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.6.tgz#19ca2d3d0b35373a74dc1c98692cdaffb6602656"
+  integrity sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"