the connections page has been slightly revised.
This commit is contained in:
coolcoala
@@ -1,15 +1,14 @@
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import React, { useMemo, useState, useEffect, RefObject } from "react";
|
||||
import React, { useMemo, useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
Row,
|
||||
Header,
|
||||
ColumnSizingState,
|
||||
} from "@tanstack/react-table";
|
||||
import { TableVirtuoso, TableComponents } from "react-virtuoso";
|
||||
|
||||
import {
|
||||
Table,
|
||||
@@ -27,7 +26,30 @@ import { cn } from "@root/lib/utils";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
// Интерфейс для строки данных, которую использует react-table
|
||||
interface IConnectionsItem {
|
||||
id: string;
|
||||
metadata: {
|
||||
host: string;
|
||||
destinationIP: string;
|
||||
destinationPort: string;
|
||||
remoteDestination: string;
|
||||
process?: string;
|
||||
processPath?: string;
|
||||
sourceIP: string;
|
||||
sourcePort: string;
|
||||
type: string;
|
||||
network: string;
|
||||
};
|
||||
rule: string;
|
||||
rulePayload?: string;
|
||||
chains: string[];
|
||||
download: number;
|
||||
upload: number;
|
||||
curDownload?: number;
|
||||
curUpload?: number;
|
||||
start: string;
|
||||
}
|
||||
|
||||
interface ConnectionRow {
|
||||
id: string;
|
||||
host: string;
|
||||
@@ -45,29 +67,81 @@ interface ConnectionRow {
|
||||
connectionData: IConnectionsItem;
|
||||
}
|
||||
|
||||
// Интерфейс для пропсов, которые компонент получает от родителя
|
||||
interface Props {
|
||||
connections: IConnectionsItem[];
|
||||
onShowDetail: (data: IConnectionsItem) => void;
|
||||
scrollerRef: (element: HTMLElement | Window | null) => void;
|
||||
}
|
||||
|
||||
const ColumnResizer = ({ header }: { header: Header<ConnectionRow, unknown> }) => {
|
||||
return (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
className={cn(
|
||||
"absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none",
|
||||
"bg-transparent hover:bg-primary/50 active:bg-primary",
|
||||
"transition-colors duration-150",
|
||||
header.column.getIsResizing() && "bg-primary"
|
||||
)}
|
||||
style={{
|
||||
transform: header.column.getIsResizing() ? `translateX(0px)` : "",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const ConnectionTable = (props: Props) => {
|
||||
const { connections, onShowDetail, scrollerRef } = props;
|
||||
const tableContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (tableContainerRef.current && scrollerRef) {
|
||||
scrollerRef(tableContainerRef.current);
|
||||
}
|
||||
}, [scrollerRef]);
|
||||
|
||||
const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem("connection-table-widths");
|
||||
return saved ? JSON.parse(saved) : {};
|
||||
return saved
|
||||
? JSON.parse(saved)
|
||||
: {
|
||||
host: 220,
|
||||
download: 88,
|
||||
upload: 88,
|
||||
dlSpeed: 88,
|
||||
ulSpeed: 88,
|
||||
chains: 340,
|
||||
rule: 280,
|
||||
process: 220,
|
||||
time: 120,
|
||||
source: 200,
|
||||
remoteDestination: 200,
|
||||
type: 160,
|
||||
};
|
||||
} catch {
|
||||
return {};
|
||||
return {
|
||||
host: 220,
|
||||
download: 88,
|
||||
upload: 88,
|
||||
dlSpeed: 88,
|
||||
ulSpeed: 88,
|
||||
chains: 340,
|
||||
rule: 280,
|
||||
process: 220,
|
||||
time: 120,
|
||||
source: 200,
|
||||
remoteDestination: 200,
|
||||
type: 160,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(
|
||||
"connection-table-widths",
|
||||
JSON.stringify(columnSizing),
|
||||
"connection-table-widths",
|
||||
JSON.stringify(columnSizing)
|
||||
);
|
||||
}, [columnSizing]);
|
||||
|
||||
@@ -77,13 +151,13 @@ export const ConnectionTable = (props: Props) => {
|
||||
const chains = [...each.chains].reverse().join(" / ");
|
||||
const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
|
||||
const Destination = metadata.destinationIP
|
||||
? `${metadata.destinationIP}:${metadata.destinationPort}`
|
||||
: `${metadata.remoteDestination}:${metadata.destinationPort}`;
|
||||
? `${metadata.destinationIP}:${metadata.destinationPort}`
|
||||
: `${metadata.remoteDestination}:${metadata.destinationPort}`;
|
||||
return {
|
||||
id: each.id,
|
||||
host: metadata.host
|
||||
? `${metadata.host}:${metadata.destinationPort}`
|
||||
: `${metadata.remoteDestination}:${metadata.destinationPort}`,
|
||||
? `${metadata.host}:${metadata.destinationPort}`
|
||||
: `${metadata.remoteDestination}:${metadata.destinationPort}`,
|
||||
download: each.download,
|
||||
upload: each.upload,
|
||||
dlSpeed: each.curDownload ?? 0,
|
||||
@@ -101,102 +175,118 @@ export const ConnectionTable = (props: Props) => {
|
||||
}, [connections]);
|
||||
|
||||
const columns = useMemo<ColumnDef<ConnectionRow>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "host",
|
||||
header: () => t("Host"),
|
||||
size: columnSizing?.host || 220,
|
||||
minSize: 180,
|
||||
},
|
||||
{
|
||||
accessorKey: "download",
|
||||
header: () => t("Downloaded"),
|
||||
size: columnSizing?.download || 88,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right">
|
||||
{parseTraffic(getValue<number>()).join(" ")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "upload",
|
||||
header: () => t("Uploaded"),
|
||||
size: columnSizing?.upload || 88,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right">
|
||||
{parseTraffic(getValue<number>()).join(" ")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "dlSpeed",
|
||||
header: () => t("DL Speed"),
|
||||
size: columnSizing?.dlSpeed || 88,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right">
|
||||
{parseTraffic(getValue<number>()).join(" ")}/s
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "ulSpeed",
|
||||
header: () => t("UL Speed"),
|
||||
size: columnSizing?.ulSpeed || 88,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right">
|
||||
{parseTraffic(getValue<number>()).join(" ")}/s
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "chains",
|
||||
header: () => t("Chains"),
|
||||
size: columnSizing?.chains || 340,
|
||||
minSize: 180,
|
||||
},
|
||||
{
|
||||
accessorKey: "rule",
|
||||
header: () => t("Rule"),
|
||||
size: columnSizing?.rule || 280,
|
||||
minSize: 180,
|
||||
},
|
||||
{
|
||||
accessorKey: "process",
|
||||
header: () => t("Process"),
|
||||
size: columnSizing?.process || 220,
|
||||
minSize: 180,
|
||||
},
|
||||
{
|
||||
accessorKey: "time",
|
||||
header: () => t("Time"),
|
||||
size: columnSizing?.time || 120,
|
||||
minSize: 100,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right">
|
||||
{dayjs(getValue<string>()).fromNow()}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "source",
|
||||
header: () => t("Source"),
|
||||
size: columnSizing?.source || 200,
|
||||
minSize: 130,
|
||||
},
|
||||
{
|
||||
accessorKey: "remoteDestination",
|
||||
header: () => t("Destination"),
|
||||
size: columnSizing?.remoteDestination || 200,
|
||||
minSize: 130,
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: () => t("Type"),
|
||||
size: columnSizing?.type || 160,
|
||||
minSize: 100,
|
||||
},
|
||||
],
|
||||
[columnSizing],
|
||||
() => [
|
||||
{
|
||||
accessorKey: "host",
|
||||
header: () => t("Host"),
|
||||
size: columnSizing?.host || 220,
|
||||
minSize: 180,
|
||||
maxSize: 400,
|
||||
},
|
||||
{
|
||||
accessorKey: "download",
|
||||
header: () => t("Downloaded"),
|
||||
size: columnSizing?.download || 88,
|
||||
minSize: 80,
|
||||
maxSize: 150,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right font-mono text-sm">
|
||||
{parseTraffic(getValue<number>()).join(" ")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "upload",
|
||||
header: () => t("Uploaded"),
|
||||
size: columnSizing?.upload || 88,
|
||||
minSize: 80,
|
||||
maxSize: 150,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right font-mono text-sm">
|
||||
{parseTraffic(getValue<number>()).join(" ")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "dlSpeed",
|
||||
header: () => t("DL Speed"),
|
||||
size: columnSizing?.dlSpeed || 88,
|
||||
minSize: 80,
|
||||
maxSize: 150,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right font-mono text-sm">
|
||||
{parseTraffic(getValue<number>()).join(" ")}/s
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "ulSpeed",
|
||||
header: () => t("UL Speed"),
|
||||
size: columnSizing?.ulSpeed || 88,
|
||||
minSize: 80,
|
||||
maxSize: 150,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right font-mono text-sm">
|
||||
{parseTraffic(getValue<number>()).join(" ")}/s
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "chains",
|
||||
header: () => t("Chains"),
|
||||
size: columnSizing?.chains || 340,
|
||||
minSize: 180,
|
||||
maxSize: 500,
|
||||
},
|
||||
{
|
||||
accessorKey: "rule",
|
||||
header: () => t("Rule"),
|
||||
size: columnSizing?.rule || 280,
|
||||
minSize: 180,
|
||||
maxSize: 400,
|
||||
},
|
||||
{
|
||||
accessorKey: "process",
|
||||
header: () => t("Process"),
|
||||
size: columnSizing?.process || 220,
|
||||
minSize: 180,
|
||||
maxSize: 350,
|
||||
},
|
||||
{
|
||||
accessorKey: "time",
|
||||
header: () => t("Time"),
|
||||
size: columnSizing?.time || 120,
|
||||
minSize: 100,
|
||||
maxSize: 180,
|
||||
cell: ({ getValue }) => (
|
||||
<div className="text-right font-mono text-sm">
|
||||
{dayjs(getValue<string>()).fromNow()}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "source",
|
||||
header: () => t("Source"),
|
||||
size: columnSizing?.source || 200,
|
||||
minSize: 130,
|
||||
maxSize: 300,
|
||||
},
|
||||
{
|
||||
accessorKey: "remoteDestination",
|
||||
header: () => t("Destination"),
|
||||
size: columnSizing?.remoteDestination || 200,
|
||||
minSize: 130,
|
||||
maxSize: 300,
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: () => t("Type"),
|
||||
size: columnSizing?.type || 160,
|
||||
minSize: 100,
|
||||
maxSize: 220,
|
||||
},
|
||||
],
|
||||
[columnSizing]
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
@@ -206,92 +296,91 @@ export const ConnectionTable = (props: Props) => {
|
||||
onColumnSizingChange: setColumnSizing,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
columnResizeMode: "onChange",
|
||||
enableColumnResizing: true,
|
||||
});
|
||||
|
||||
const VirtuosoTableComponents = useMemo<TableComponents<Row<ConnectionRow>>>(
|
||||
() => ({
|
||||
// Явно типизируем `ref` для каждого компонента
|
||||
Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
|
||||
<div className="h-full" {...props} ref={ref} />
|
||||
)),
|
||||
Table: (props) => <Table {...props} className="w-full border-collapse" />,
|
||||
TableHead: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
|
||||
<TableHeader {...props} ref={ref} />
|
||||
)),
|
||||
// Явно типизируем пропсы и `ref` для TableRow
|
||||
TableRow: React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
{ item: Row<ConnectionRow> } & React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ item: row, ...props }, ref) => {
|
||||
// `Virtuoso` передает нам готовую строку `row` в пропсе `item`.
|
||||
// Больше не нужно искать ее по индексу!
|
||||
return (
|
||||
<TableRow
|
||||
{...props}
|
||||
ref={ref}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => onShowDetail(row.original.connectionData)}
|
||||
/>
|
||||
);
|
||||
}),
|
||||
TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
|
||||
<TableBody {...props} ref={ref} />
|
||||
)),
|
||||
}),
|
||||
[],
|
||||
);
|
||||
const totalTableWidth = useMemo(() => {
|
||||
return table.getCenterTotalSize();
|
||||
}, [table.getState().columnSizing]);
|
||||
|
||||
if (connRows.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground">{t("No connections")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full rounded-md border overflow-hidden">
|
||||
{connRows.length > 0 ? (
|
||||
<TableVirtuoso
|
||||
scrollerRef={scrollerRef}
|
||||
data={table.getRowModel().rows}
|
||||
components={VirtuosoTableComponents}
|
||||
fixedHeaderContent={() =>
|
||||
table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow
|
||||
key={headerGroup.id}
|
||||
className="hover:bg-transparent bg-background/95 backdrop-blur"
|
||||
>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
style={{ width: header.getSize() }}
|
||||
className="p-2"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
itemContent={(index, row) => (
|
||||
<>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
style={{ width: cell.column.getSize() }}
|
||||
className="p-2 whitespace-nowrap"
|
||||
onClick={() => onShowDetail(row.original.connectionData)}
|
||||
<div className="rounded-md border relative bg-background">
|
||||
<Table
|
||||
className="w-full border-collapse table-fixed"
|
||||
style={{
|
||||
width: totalTableWidth,
|
||||
minWidth: "100%",
|
||||
}}
|
||||
>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow
|
||||
key={headerGroup.id}
|
||||
className="hover:bg-transparent border-b-0 h-10"
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p>No results.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className={cn(
|
||||
"sticky top-0 z-10",
|
||||
"p-2 text-xs font-semibold select-none border-r last:border-r-0 bg-background h-10"
|
||||
)}
|
||||
style={{
|
||||
width: header.getSize(),
|
||||
minWidth: header.column.columnDef.minSize,
|
||||
maxWidth: header.column.columnDef.maxSize,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between h-full">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</div>
|
||||
{header.column.getCanResize() && (
|
||||
<ColumnResizer header={header} />
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="cursor-pointer hover:bg-muted/50 transition-colors"
|
||||
onClick={() => onShowDetail(row.original.connectionData)}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className="p-2 whitespace-nowrap overflow-hidden text-ellipsis text-sm border-r last:border-r-0"
|
||||
style={{
|
||||
width: cell.column.getSize(),
|
||||
minWidth: cell.column.columnDef.minSize,
|
||||
maxWidth: cell.column.columnDef.maxSize,
|
||||
}}
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -49,18 +49,37 @@ import {
|
||||
PauseCircle,
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
Menu,
|
||||
} from "lucide-react";
|
||||
import {SidebarTrigger} from "@/components/ui/sidebar";
|
||||
|
||||
interface IConnectionsItem {
|
||||
id: string;
|
||||
metadata: {
|
||||
host: string;
|
||||
destinationIP: string;
|
||||
process?: string;
|
||||
};
|
||||
start?: string;
|
||||
curUpload?: number;
|
||||
curDownload?: number;
|
||||
}
|
||||
|
||||
interface IConnections {
|
||||
uploadTotal: number;
|
||||
downloadTotal: number;
|
||||
connections: IConnectionsItem[];
|
||||
data: IConnectionsItem[];
|
||||
}
|
||||
|
||||
type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
|
||||
|
||||
const initConn: IConnections = {
|
||||
uploadTotal: 0,
|
||||
downloadTotal: 0,
|
||||
connections: [],
|
||||
data: [],
|
||||
};
|
||||
|
||||
type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
|
||||
|
||||
const ConnectionsPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const pageVisible = useVisibility();
|
||||
@@ -72,14 +91,14 @@ const ConnectionsPage = () => {
|
||||
|
||||
const orderOpts: Record<string, OrderFunc> = {
|
||||
Default: (list) =>
|
||||
list.sort(
|
||||
(a, b) =>
|
||||
new Date(b.start || "0").getTime()! -
|
||||
new Date(a.start || "0").getTime()!,
|
||||
),
|
||||
"Upload Speed": (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
|
||||
list.sort(
|
||||
(a, b) =>
|
||||
new Date(b.start || "0").getTime()! -
|
||||
new Date(a.start || "0").getTime()!,
|
||||
),
|
||||
"Upload Speed": (list) => list.sort((a, b) => (b.curUpload ?? 0) - (a.curUpload ?? 0)),
|
||||
"Download Speed": (list) =>
|
||||
list.sort((a, b) => b.curDownload! - a.curDownload!),
|
||||
list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
|
||||
};
|
||||
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
@@ -91,6 +110,7 @@ const ConnectionsPage = () => {
|
||||
uploadTotal: connections.uploadTotal,
|
||||
downloadTotal: connections.downloadTotal,
|
||||
connections: connections.data,
|
||||
data: connections.data,
|
||||
};
|
||||
if (isPaused) return frozenData ?? currentData;
|
||||
return currentData;
|
||||
@@ -101,7 +121,7 @@ const ConnectionsPage = () => {
|
||||
let conns = displayData.connections.filter((conn) => {
|
||||
const { host, destinationIP, process } = conn.metadata;
|
||||
return (
|
||||
match(host || "") || match(destinationIP || "") || match(process || "")
|
||||
match(host || "") || match(destinationIP || "") || match(process || "")
|
||||
);
|
||||
});
|
||||
if (orderFunc) conns = orderFunc(conns);
|
||||
@@ -109,24 +129,24 @@ const ConnectionsPage = () => {
|
||||
}, [displayData, match, curOrderOpt]);
|
||||
|
||||
const [scrollingElement, setScrollingElement] = useState<
|
||||
HTMLElement | Window | null
|
||||
HTMLElement | Window | null
|
||||
>(null);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
const scrollerRefCallback = useCallback(
|
||||
(node: HTMLElement | Window | null) => {
|
||||
setScrollingElement(node);
|
||||
},
|
||||
[],
|
||||
(node: HTMLElement | Window | null) => {
|
||||
setScrollingElement(node);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scrollingElement) return;
|
||||
const handleScroll = () => {
|
||||
const scrollTop =
|
||||
scrollingElement instanceof Window
|
||||
? scrollingElement.scrollY
|
||||
: scrollingElement.scrollTop;
|
||||
scrollingElement instanceof Window
|
||||
? scrollingElement.scrollY
|
||||
: scrollingElement.scrollTop;
|
||||
setIsScrolled(scrollTop > 5);
|
||||
};
|
||||
|
||||
@@ -137,8 +157,8 @@ const ConnectionsPage = () => {
|
||||
const onCloseAll = useLockFn(closeAllConnections);
|
||||
const detailRef = useRef<ConnectionDetailRef>(null!);
|
||||
const handleSearch = useCallback(
|
||||
(m: (content: string) => boolean) => setMatch(() => m),
|
||||
[],
|
||||
(m: (content: string) => boolean) => setMatch(() => m),
|
||||
[],
|
||||
);
|
||||
const handlePauseToggle = useCallback(() => {
|
||||
setIsPaused((prev) => {
|
||||
@@ -147,6 +167,7 @@ const ConnectionsPage = () => {
|
||||
uploadTotal: connections.uploadTotal,
|
||||
downloadTotal: connections.downloadTotal,
|
||||
connections: connections.data,
|
||||
data: connections.data,
|
||||
});
|
||||
} else {
|
||||
setFrozenData(null);
|
||||
@@ -155,133 +176,137 @@ const ConnectionsPage = () => {
|
||||
});
|
||||
}, [connections]);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative">
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-0 left-0 right-0 z-10 p-4 transition-all duration-200",
|
||||
{ "bg-background/80 backdrop-blur-sm shadow-sm": isScrolled },
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="w-10">
|
||||
<SidebarTrigger />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("Connections")}
|
||||
</h2>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<ArrowDown className="h-4 w-4 text-green-500" />
|
||||
{parseTraffic(displayData.downloadTotal)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<ArrowUp className="h-4 w-4 text-sky-500" />
|
||||
{parseTraffic(displayData.uploadTotal)}
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-6 mx-2" />
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setSetting((o) =>
|
||||
o?.layout !== "table"
|
||||
? { ...o, layout: "table" }
|
||||
: { ...o, layout: "list" },
|
||||
)
|
||||
}
|
||||
>
|
||||
{isTableLayout ? (
|
||||
<List className="h-5 w-5" />
|
||||
) : (
|
||||
<Table2 className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{isTableLayout ? t("List View") : t("Table View")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handlePauseToggle}
|
||||
>
|
||||
{isPaused ? (
|
||||
<PlayCircle className="h-5 w-5" />
|
||||
) : (
|
||||
<PauseCircle className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{isPaused ? t("Resume") : t("Pause")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button size="sm" variant="destructive" onClick={onCloseAll}>
|
||||
{t("Close All")}
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
{!isTableLayout && (
|
||||
<Select
|
||||
value={curOrderOpt}
|
||||
onValueChange={(value) => setOrderOpt(value)}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder={t("Sort by")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.keys(orderOpts).map((opt) => (
|
||||
<SelectItem key={opt} value={opt}>
|
||||
{t(opt)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<BaseSearchBox onSearch={handleSearch} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const headerHeight = "7rem";
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 bottom-0 pt-28">
|
||||
{filterConn.length === 0 ? (
|
||||
<BaseEmpty />
|
||||
) : isTableLayout ? (
|
||||
<div className="p-4 pt-0 h-full w-full">
|
||||
<ConnectionTable
|
||||
connections={filterConn}
|
||||
onShowDetail={(detail) => detailRef.current?.open(detail)}
|
||||
scrollerRef={scrollerRefCallback}
|
||||
/>
|
||||
return (
|
||||
<div className="relative h-full w-full">
|
||||
<div
|
||||
className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
|
||||
style={{ height: headerHeight }}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="w-10">
|
||||
<SidebarTrigger />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("Connections")}
|
||||
</h2>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<ArrowDown className="h-4 w-4 text-green-500" />
|
||||
{parseTraffic(displayData.downloadTotal)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<ArrowUp className="h-4 w-4 text-sky-500" />
|
||||
{parseTraffic(displayData.uploadTotal)}
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-6 mx-2" />
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setSetting((o) =>
|
||||
o?.layout !== "table"
|
||||
? { ...o, layout: "table" }
|
||||
: { ...o, layout: "list" },
|
||||
)
|
||||
}
|
||||
>
|
||||
{isTableLayout ? (
|
||||
<List className="h-5 w-5" />
|
||||
) : (
|
||||
<Table2 className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{isTableLayout ? t("List View") : t("Table View")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handlePauseToggle}
|
||||
>
|
||||
{isPaused ? (
|
||||
<PlayCircle className="h-5 w-5" />
|
||||
) : (
|
||||
<PauseCircle className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{isPaused ? t("Resume") : t("Pause")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button size="sm" variant="destructive" onClick={onCloseAll}>
|
||||
{t("Close All")}
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
) : (
|
||||
<Virtuoso
|
||||
scrollerRef={scrollerRefCallback}
|
||||
data={filterConn}
|
||||
className="h-full w-full"
|
||||
itemContent={(_, item) => (
|
||||
<ConnectionItem
|
||||
value={item}
|
||||
onShowDetail={() => detailRef.current?.open(item)}
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
{!isTableLayout && (
|
||||
<Select
|
||||
value={curOrderOpt}
|
||||
onValueChange={(value) => setOrderOpt(value)}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder={t("Sort by")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.keys(orderOpts).map((opt) => (
|
||||
<SelectItem key={opt} value={opt}>
|
||||
{t(opt)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<ConnectionDetail ref={detailRef} />
|
||||
<div className="flex-1">
|
||||
<BaseSearchBox onSearch={handleSearch} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={scrollerRefCallback}
|
||||
className="absolute left-0 right-0 bottom-0 overflow-y-auto"
|
||||
style={{ top: headerHeight }}
|
||||
>
|
||||
{filterConn.length === 0 ? (
|
||||
<BaseEmpty />
|
||||
) : isTableLayout ? (
|
||||
<div className="p-4 pt-0">
|
||||
<ConnectionTable
|
||||
connections={filterConn}
|
||||
onShowDetail={(detail) => detailRef.current?.open(detail)}
|
||||
scrollerRef={scrollerRefCallback}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Virtuoso
|
||||
scrollerRef={scrollerRefCallback}
|
||||
data={filterConn}
|
||||
className="h-full w-full"
|
||||
itemContent={(_, item) => (
|
||||
<ConnectionItem
|
||||
value={item}
|
||||
onShowDetail={() => detailRef.current?.open(item)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<ConnectionDetail ref={detailRef} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
2
src/services/types.d.ts
vendored
2
src/services/types.d.ts
vendored
@@ -154,7 +154,7 @@ interface IConnectionsItem {
|
||||
start: string;
|
||||
chains: string[];
|
||||
rule: string;
|
||||
rulePayload: string;
|
||||
rulePayload?: string;
|
||||
curUpload?: number; // upload speed, calculate at runtime
|
||||
curDownload?: number; // download speed, calculate at runtime
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user