From 88d3bba30033c49b760628b974cc12b907ae1496 Mon Sep 17 00:00:00 2001
From: keiko233 <keiko23333@gmail.com>
Date: Tue, 10 Oct 2023 17:05:31 +0800
Subject: [PATCH] feat: add Connections Info to ConnectionsPage

*Add Upload Traffic, Download Traffic and Active Connections to ConnectionsPage.
*IConnections uploadTotal and downloadTotal data missing not displayed, add it to ConnectionsPage interface here.
---
 src/locales/en.json       |  3 +++
 src/locales/zh.json       |  3 +++
 src/pages/connections.tsx | 49 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 3ea7b21..e556c97 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -7,6 +7,9 @@
   "Label-Settings": "Settings",
 
   "Connections": "Connections",
+  "Upload Total": "Upload Total",
+  "Download Total": "Download Total",
+  "Active Connections": "Active Connections",
   "Logs": "Logs",
   "Clear": "Clear",
   "Proxies": "Proxies",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 256ce8c..2f207da 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -7,6 +7,9 @@
   "Label-Settings": "设 置",
 
   "Connections": "连接",
+  "Upload Total": "上传总量",
+  "Download Total": "下载总量",
+  "Active Connections": "活动连接",
   "Logs": "日志",
   "Clear": "清除",
   "Proxies": "代理",
diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx
index 1b5f2e7..24baca6 100644
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -3,16 +3,24 @@ import { useLockFn } from "ahooks";
 import {
   Box,
   Button,
+  Grid,
   IconButton,
   MenuItem,
   Paper,
   Select,
   TextField,
+  Typography,
 } 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 {
+  ArrowDownward,
+  ArrowUpward,
+  Link,
+  TableChartRounded,
+  TableRowsRounded,
+} from "@mui/icons-material";
 import { closeAllConnections } from "@/services/api";
 import { atomConnectionSetting } from "@/services/states";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -24,6 +32,7 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
+import parseTraffic from "@/utils/parse-traffic";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -48,6 +57,10 @@ const ConnectionsPage = () => {
       list.sort((a, b) => b.curDownload! - a.curDownload!),
   };
 
+  const uploadTotal = connData.uploadTotal;
+
+  const downloadTotal = connData.downloadTotal;
+
   const filterConn = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];
     const connections = connData.connections.filter((conn) =>
@@ -112,6 +125,24 @@ const ConnectionsPage = () => {
 
   const detailRef = useRef<ConnectionDetailRef>(null!);
 
+  const connectionItems = [
+    {
+      icon: <ArrowUpward />,
+      label: t("Upload Total"),
+      value: parseTraffic(uploadTotal).join(" "),
+    },
+    {
+      icon: <ArrowDownward />,
+      label: t("Download Total"),
+      value: parseTraffic(downloadTotal).join(" "),
+    },
+    {
+      icon: <Link />,
+      label: t("Active Connections"),
+      value: filterConn.length,
+    },
+  ];
+
   return (
     <BasePage
       title={t("Connections")}
@@ -142,7 +173,21 @@ const ConnectionsPage = () => {
         </Box>
       }
     >
-      <Paper sx={{ boxShadow: 2, height: "100%" }}>
+      <Paper sx={{ padding: 2, mb: 2 }}>
+        <Grid container>
+          {connectionItems.map((item, index) => (
+            <Grid item xs={4} key={index}>
+              <Box display="flex" alignItems="center" whiteSpace="nowrap">
+                {item.icon}
+                <Typography sx={{ ml: 1, mr: 1 }}>{item.label}</Typography>
+                <Typography>{item.value}</Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </Paper>
+
+      <Paper sx={{ boxShadow: 2, height: "calc(100% - 56px - 16px)" }}>
         <Box
           sx={{
             pt: 1,