|
@@ -1,6 +1,7 @@
|
|
|
import dayjs from "dayjs";
|
|
|
import { useMemo, useState } from "react";
|
|
|
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
|
|
+import { useThemeMode } from "@/services/states";
|
|
|
import { truncateStr } from "@/utils/truncate-str";
|
|
|
import parseTraffic from "@/utils/parse-traffic";
|
|
|
import { t } from "i18next";
|
|
@@ -12,6 +13,9 @@ interface Props {
|
|
|
|
|
|
export const ConnectionTable = (props: Props) => {
|
|
|
const { connections, onShowDetail } = props;
|
|
|
+ const mode = useThemeMode();
|
|
|
+ const isDark = mode === "light" ? false : true;
|
|
|
+ const backgroundColor = isDark ? "#282A36" : "#ffffff";
|
|
|
|
|
|
const [columnVisible, setColumnVisible] = useState<
|
|
|
Partial<Record<keyof IConnectionsItem, boolean>>
|
|
@@ -96,7 +100,6 @@ export const ConnectionTable = (props: Props) => {
|
|
|
source: `${metadata.sourceIP}:${metadata.sourcePort}`,
|
|
|
destinationIP: metadata.destinationIP,
|
|
|
type: `${metadata.type}(${metadata.network})`,
|
|
|
-
|
|
|
connectionData: each,
|
|
|
};
|
|
|
});
|
|
@@ -112,8 +115,8 @@ export const ConnectionTable = (props: Props) => {
|
|
|
sx={{
|
|
|
border: "none",
|
|
|
"div:focus": { outline: "none !important" },
|
|
|
- "& div[aria-rowindex='1']": {
|
|
|
- backgroundColor: "inherit !important",
|
|
|
+ "& div[aria-rowindex]": {
|
|
|
+ backgroundColor: `${backgroundColor} !important`,
|
|
|
},
|
|
|
}}
|
|
|
columnVisibilityModel={columnVisible}
|