Group ProxyHosts table by base domain

frontend/package.json

@@ -37,7 +37,8 @@
 		"react-router-dom": "^7.16.0",
 		"react-select": "^5.10.2",
 		"react-toastify": "^11.1.0",
-		"rooks": "^9.8.0"
+		"rooks": "^9.8.0",
+		"tldts": "^7.4.8"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.15",

frontend/src/components/Table/TableBody.tsx

@@ -1,4 +1,5 @@
 import { flexRender } from "@tanstack/react-table";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import type { TableLayoutProps } from "src/components";
 import { EmptyRow } from "./EmptyRow";
 
@@ -14,12 +15,39 @@ function TableBody<T>(props: TableLayoutProps<T>) {
 		);
 	}
 
+	const visibleColumnCount = tableInstance.getVisibleLeafColumns().length;
+
 	return (
 		<tbody className="table-tbody">
 			{rows.map((row: any) => {
+				if (row.getIsGrouped()) {
+					const isExpanded = row.getIsExpanded();
+					return (
+						<tr
+							key={row.id}
+							className="table-group-row table-active cursor-pointer"
+							onClick={row.getToggleExpandedHandler()}
+						>
+							<td colSpan={visibleColumnCount}>
+								<span className="d-inline-flex align-items-center gap-2">
+									{isExpanded ? (
+										<IconChevronDown size={16} />
+									) : (
+										<IconChevronRight size={16} />
+									)}
+									<strong>{String(row.groupingValue ?? "")}</strong>
+									<span className="badge bg-secondary-lt">{row.subRows.length}</span>
+								</span>
+							</td>
+						</tr>
+					);
+				}
 				return (
 					<tr key={row.id} {...extraStyles?.row(row.original)}>
 						{row.getVisibleCells().map((cell: any) => {
+							if (cell.getIsPlaceholder()) {
+								return null;
+							}
 							const { className } = (cell.column.columnDef.meta as any) ?? {};
 							return (
 								<td key={cell.id} className={className}>

frontend/src/pages/Nginx/ProxyHosts/Table.tsx

@@ -1,7 +1,10 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
 import {
 	createColumnHelper,
+	type ExpandedState,
 	getCoreRowModel,
+	getExpandedRowModel,
+	getGroupedRowModel,
 	getSortedRowModel,
 	type SortingState,
 	useReactTable,
@@ -21,8 +24,10 @@ import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 
+type ProxyHostRow = ProxyHost & { baseDomain: string };
+
 interface Props {
-	data: ProxyHost[];
+	data: ProxyHostRow[];
 	isFiltered?: boolean;
 	isFetching?: boolean;
 	onEdit?: (id: number) => void;
@@ -31,9 +36,13 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
-	const columnHelper = createColumnHelper<ProxyHost>();
+	const columnHelper = createColumnHelper<ProxyHostRow>();
 	const columns = useMemo(
 		() => [
+			columnHelper.accessor((row: any) => row.baseDomain, {
+				id: "baseDomain",
+				enableSorting: false,
+			}),
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
 				enableSorting: false,
@@ -164,14 +173,23 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 	);
 
 	const [sorting, setSorting] = useState<SortingState>([]);
+	const [expanded, setExpanded] = useState<ExpandedState>(true);
 
-	const tableInstance = useReactTable<ProxyHost>({
+	const tableInstance = useReactTable<ProxyHostRow>({
 		columns,
 		data,
-		state: { sorting },
+		state: { sorting, expanded },
+		initialState: {
+			grouping: ["baseDomain"],
+			columnVisibility: { baseDomain: false },
+		},
 		onSortingChange: setSorting,
+		onExpandedChange: setExpanded,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
+		autoResetExpanded: false,
 		rowCount: data.length,
 		meta: {
 			isFetching,

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -1,6 +1,6 @@
 import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
 import { Button, HasPermission, LoadingPage } from "src/components";
@@ -9,13 +9,33 @@ import { T } from "src/locale";
 import { showDeleteConfirmModal, showHelpModal, showProxyHostModal } from "src/modals";
 import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
+import { getBaseDomain } from "./baseDomain";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
 	const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
 
+	const filtered = useMemo(() => {
+		if (!search || !data) return null;
+		return data.filter(
+			(item) =>
+				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
+				item.forwardHost.toLowerCase().includes(search) ||
+				`${item.forwardPort}`.includes(search),
+		);
+	}, [search, data]);
+
+	const tableData = useMemo(
+		() =>
+			(filtered ?? data ?? []).map((item) => ({
+				...item,
+				baseDomain: getBaseDomain(item.domainNames?.[0]),
+			})),
+		[filtered, data],
+	);
+
 	if (isLoading) {
 		return <LoadingPage />;
 	}
@@ -24,6 +44,11 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	if (search !== "" && !data?.length) {
+		// this can happen if someone deletes the last item while searching
+		setSearch("");
+	}
+
 	const handleDelete = async (id: number) => {
 		await deleteProxyHost(id);
 		showObjectSuccess("proxy-host", "deleted");
@@ -36,19 +61,6 @@ export default function TableWrapper() {
 		showObjectSuccess("proxy-host", enabled ? "enabled" : "disabled");
 	};
 
-	let filtered = null;
-	if (search && data) {
-		filtered = data?.filter(
-			(item) =>
-				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
-				item.forwardHost.toLowerCase().includes(search) ||
-				`${item.forwardPort}`.includes(search),
-		);
-	} else if (search !== "") {
-		// this can happen if someone deletes the last item while searching
-		setSearch("");
-	}
-
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-lime" />
@@ -95,7 +107,7 @@ export default function TableWrapper() {
 					</div>
 				</div>
 				<Table
-					data={filtered ?? data ?? []}
+					data={tableData}
 					isFiltered={!!search}
 					isFetching={isFetching}
 					onEdit={(id: number) => showProxyHostModal(id)}

frontend/src/pages/Nginx/ProxyHosts/baseDomain.ts

@@ -0,0 +1,6 @@
+import { getDomain } from "tldts";
+
+export function getBaseDomain(domain: string | undefined): string {
+	if (!domain) return "";
+	return getDomain(domain) ?? domain;
+}

frontend/yarn.lock

@@ -2555,6 +2555,18 @@ tinyrainbow@^3.1.0:
   resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-3.1.0.tgz#1d8a623893f95cf0a2ddb9e5d11150e191409421"
   integrity sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==
 
+tldts-core@^7.4.8:
+  version "7.4.8"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-7.4.8.tgz#c729aee4ff9d3670741193682a98e25a3d780dd9"
+  integrity sha512-c1P7u0EhACHj7lPy4MJm8iTFEU8+nB0LCtddH0fhP7noaVoXAqafMtOOeX+ulpuPBqnrRgRhw494RICT3mbhnw==
+
+tldts@^7.4.8:
+  version "7.4.8"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-7.4.8.tgz#f2edc0d81483ea76c45827d642ccd535a3a7a4f7"
+  integrity sha512-htwgN/8KRB3z3vnC0BOETVh2m499g5GmyTK9Wq5JBLX3FNz6tSBveAd+fQhzy9hkjif8vy2jwDMR1sGhLtZl2A==
+  dependencies:
+    tldts-core "^7.4.8"
+
 tmp@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.7.tgz#26f4db11d1601ce8012dcb8a798ece1c06a99059"