From a6b2db182d4b30a704adc77b53500405d95e8aab Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Fri, 23 Sep 2022 00:08:52 +0800
Subject: [PATCH] feat: adjust connection page ui
---
src/pages/connections.tsx | 103 ++++++++++++++------------------------
1 file changed, 37 insertions(+), 66 deletions(-)
diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx
index 759c376..ece2bfe 100644
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -1,53 +1,42 @@
import { useEffect, useMemo, useState } from "react";
import { useLockFn } from "ahooks";
-import { Box, Button, ButtonGroup, Paper, TextField } from "@mui/material";
+import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
import { Virtuoso } from "react-virtuoso";
import { useTranslation } from "react-i18next";
import { closeAllConnections, getInformation } from "@/services/api";
import BasePage from "@/components/base/base-page";
-import ConnectionItem from "@/components/connection/connection-item";
import BaseEmpty from "@/components/base/base-empty";
+import ConnectionItem from "@/components/connection/connection-item";
const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
-type IOderOpts = {
- [key in string]: {
- orderFunc(
- connections: ApiType.ConnectionsItem[]
- ): ApiType.ConnectionsItem[];
- };
-};
+type OrderFunc = (list: ApiType.ConnectionsItem[]) => ApiType.ConnectionsItem[];
const ConnectionsPage = () => {
- const { t } = useTranslation();
+ const { t, i18n } = useTranslation();
const [filterText, setFilterText] = useState("");
+ const [curOrderOpt, setOrderOpt] = useState("Default");
const [connData, setConnData] = useState<ApiType.Connections>(initConn);
+ 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!),
+ };
+
const filterConn = useMemo(() => {
- return connData.connections.filter((conn) =>
+ const orderFunc = orderOpts[curOrderOpt];
+ const connetions = connData.connections.filter((conn) =>
(conn.metadata.host || conn.metadata.destinationIP)?.includes(filterText)
);
- }, [connData, filterText]);
-
- const orderOpts: IOderOpts = {
- Default: {
- orderFunc: (list) => list,
- },
- // "Download Traffic": {
- // orderFunc: (list) => list,
- // },
- // "Upload Traffic": {
- // orderFunc: (list) => list,
- // },
- "Download Speed": {
- orderFunc: (list) => list.sort((a, b) => b.curDownload! - a.curDownload!),
- },
- "Upload Speed": {
- orderFunc: (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
- },
- };
- const [curOrderOpt, setOrderOpt] = useState("Default");
+
+ if (orderFunc) return orderFunc(connetions);
+ return connetions;
+ }, [connData, filterText, curOrderOpt]);
useEffect(() => {
let ws: WebSocket | null = null;
@@ -88,19 +77,13 @@ const ConnectionsPage = () => {
}
}
- const orderedConnections =
- orderOpts[curOrderOpt].orderFunc(connections);
-
- return {
- ...data,
- connections: orderedConnections,
- };
+ return { ...data, connections };
});
});
});
return () => ws?.close();
- }, [curOrderOpt]);
+ }, []);
const onCloseAll = useLockFn(closeAllConnections);
@@ -130,17 +113,23 @@ const ConnectionsPage = () => {
alignItems: "center",
}}
>
- {/* <Select
+ <Select
size="small"
autoComplete="off"
- value={logState}
- onChange={(e) => setLogState(e.target.value)}
- sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
+ value={curOrderOpt}
+ onChange={(e) => setOrderOpt(e.target.value)}
+ sx={{
+ mr: 1,
+ width: i18n.language === "en" ? 190 : 120,
+ '[role="button"]': { py: 0.65 },
+ }}
>
- <MenuItem value="all">ALL</MenuItem>
- <MenuItem value="info">INFO</MenuItem>
- <MenuItem value="warn">WARN</MenuItem>
- </Select> */}
+ {Object.keys(orderOpts).map((opt) => (
+ <MenuItem key={opt} value={opt}>
+ <span style={{ fontSize: 14 }}>{t(opt)}</span>
+ </MenuItem>
+ ))}
+ </Select>
<TextField
hiddenLabel
@@ -155,25 +144,7 @@ const ConnectionsPage = () => {
/>
</Box>
- <Box sx={{ mx: "12px", mb: 0.5 }}>
- <ButtonGroup size="small" sx={{ width: "100%" }}>
- {Object.keys(orderOpts).map((opt) => (
- <Button
- key={opt}
- variant={opt === curOrderOpt ? "contained" : "outlined"}
- onClick={() => setOrderOpt(opt)}
- sx={{
- fontSize: "0.5rem",
- textTransform: "capitalize",
- }}
- >
- {t(opt)}
- </Button>
- ))}
- </ButtonGroup>
- </Box>
-
- <Box height="calc(100% - 50px - 30px)">
+ <Box height="calc(100% - 50px)">
{filterConn.length > 0 ? (
<Virtuoso
data={filterConn}
--
GitLab