code formatting with prettier
This commit is contained in:
coolcoala
@@ -52,7 +52,6 @@ interface Props {
|
||||
scrollerRef: (element: HTMLElement | Window | null) => void;
|
||||
}
|
||||
|
||||
|
||||
export const ConnectionTable = (props: Props) => {
|
||||
const { connections, onShowDetail, scrollerRef } = props;
|
||||
|
||||
@@ -60,11 +59,16 @@ export const ConnectionTable = (props: Props) => {
|
||||
try {
|
||||
const saved = localStorage.getItem("connection-table-widths");
|
||||
return saved ? JSON.parse(saved) : {};
|
||||
} catch { return {}; }
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("connection-table-widths", JSON.stringify(columnSizing));
|
||||
localStorage.setItem(
|
||||
"connection-table-widths",
|
||||
JSON.stringify(columnSizing),
|
||||
);
|
||||
}, [columnSizing]);
|
||||
|
||||
const connRows = useMemo((): ConnectionRow[] => {
|
||||
@@ -86,7 +90,7 @@ export const ConnectionTable = (props: Props) => {
|
||||
ulSpeed: each.curUpload ?? 0,
|
||||
chains,
|
||||
rule,
|
||||
process: truncateStr(metadata.process || metadata.processPath) ?? '',
|
||||
process: truncateStr(metadata.process || metadata.processPath) ?? "",
|
||||
time: each.start,
|
||||
source: `${metadata.sourceIP}:${metadata.sourcePort}`,
|
||||
remoteDestination: Destination,
|
||||
@@ -96,20 +100,104 @@ 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]);
|
||||
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],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: connRows,
|
||||
@@ -117,37 +205,42 @@ export const ConnectionTable = (props: Props) => {
|
||||
state: { columnSizing },
|
||||
onColumnSizingChange: setColumnSizing,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
columnResizeMode: 'onChange',
|
||||
columnResizeMode: "onChange",
|
||||
});
|
||||
|
||||
const VirtuosoTableComponents = useMemo<TableComponents<Row<ConnectionRow>>>(() => ({
|
||||
// Явно типизируем `ref` для каждого компонента
|
||||
Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
|
||||
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)}
|
||||
/>
|
||||
);
|
||||
)),
|
||||
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} />
|
||||
)),
|
||||
}),
|
||||
TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => <TableBody {...props} ref={ref} />)
|
||||
}), []);
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full rounded-md border overflow-hidden">
|
||||
@@ -156,17 +249,29 @@ export const ConnectionTable = (props: Props) => {
|
||||
scrollerRef={scrollerRef}
|
||||
data={table.getRowModel().rows}
|
||||
components={VirtuosoTableComponents}
|
||||
fixedHeaderContent={() => (
|
||||
fixedHeaderContent={() =>
|
||||
table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id} className="hover:bg-transparent bg-background/95 backdrop-blur">
|
||||
<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
|
||||
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) => (
|
||||
|
||||
Reference in New Issue
Block a user