pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-16 01:46:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ filter & paginate on machine clients table

Browse Source
This commit is contained in:
Fred KISSIE
2026-02-10 05:14:37 +01:00
parent c94d246c24
commit d6ade102dc
5 changed files with 176 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
server/routers/client/listUserDevices.ts
View File

@@ -124,6 +124,7 @@ const listUserDevicesSchema = z.object({
"windows",
"android",
"cli",
"olm",
"macos",
"ios",
"ipados",
@@ -302,7 +303,8 @@ export async function listUserDevices(
ios: "Pangolin iOS",
ipados: "Pangolin iPadOS",
macos: "Pangolin macOS",
cli: "Pangolin CLI"
cli: "Pangolin CLI",
olm: "Olm CLI"
} satisfies Record<
Exclude<typeof agent, undefined | "unknown">,
string

20
src/app/[orgId]/settings/clients/machine/page.tsx
View File

@@ -7,10 +7,11 @@ import { authCookieHeader } from "@app/lib/api/cookies";
import { ListClientsResponse } from "@server/routers/client";
import { AxiosResponse } from "axios";
import { getTranslations } from "next-intl/server";
import type { Pagination } from "@server/types/Pagination";
type ClientsPageProps = {
params: Promise<{ orgId: string }>;
searchParams: Promise<{ view?: string }>;
searchParams: Promise<Record<string, string>>;
};
export const dynamic = "force-dynamic";
@@ -19,17 +20,25 @@ export default async function ClientsPage(props: ClientsPageProps) {
const t = await getTranslations();
const params = await props.params;
const searchParams = new URLSearchParams(await props.searchParams);
let machineClients: ListClientsResponse["clients"] = [];
let pagination: Pagination = {
page: 1,
total: 0,
pageSize: 20
};
try {
const machineRes = await internal.get<
AxiosResponse<ListClientsResponse>
>(
`/org/${params.orgId}/clients?filter=machine`,
`/org/${params.orgId}/clients?${searchParams.toString()}`,
await authCookieHeader()
);
machineClients = machineRes.data.data.clients;
const responseData = machineRes.data.data;
machineClients = responseData.clients;
pagination = responseData.pagination;
} catch (e) {}
function formatSize(mb: number): string {
@@ -80,6 +89,11 @@ export default async function ClientsPage(props: ClientsPageProps) {
<MachineClientsTable
machineClients={machineClientRows}
orgId={params.orgId}
rowCount={pagination.total}
pagination={{
pageIndex: pagination.page - 1,
pageSize: pagination.pageSize
}}
/>
</>
);

260
src/components/MachineClientsTable.tsx
View File

@@ -16,13 +16,23 @@ import {
ArrowRight,
ArrowUpDown,
MoreHorizontal,
CircleSlash
CircleSlash,
ArrowDown01Icon,
ArrowUp10Icon,
ChevronsUpDownIcon
} from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo, useState, useTransition } from "react";
import { Badge } from "./ui/badge";
import type { PaginationState } from "@tanstack/react-table";
import { ControlledDataTable } from "./ui/controlled-data-table";
import { useNavigationContext } from "@app/hooks/useNavigationContext";
import { useDebouncedCallback } from "use-debounce";
import z from "zod";
import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
import { ColumnFilterButton } from "./ColumnFilterButton";
export type ClientRow = {
id: number;
@@ -48,14 +58,24 @@ export type ClientRow = {
type ClientTableProps = {
machineClients: ClientRow[];
orgId: string;
pagination: PaginationState;
rowCount: number;
};
export default function MachineClientsTable({
machineClients,
orgId
orgId,
pagination,
rowCount
}: ClientTableProps) {
const router = useRouter();
const {
navigate: filter,
isNavigating: isFiltering,
searchParams
} = useNavigationContext();
const t = useTranslations();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -65,6 +85,7 @@ export default function MachineClientsTable({
const api = createApiClient(useEnvContext());
const [isRefreshing, startTransition] = useTransition();
const [isNavigatingToAddPage, startNavigation] = useTransition();
const defaultMachineColumnVisibility = {
subnet: false,
@@ -182,22 +203,8 @@ export default function MachineClientsTable({
{
accessorKey: "name",
enableHiding: false,
friendlyName: "Name",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
}
>
Name
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
friendlyName: t("name"),
header: () => <span className="px-3">{t("name")}</span>,
cell: ({ row }) => {
const r = row.original;
return (
@@ -224,38 +231,35 @@ export default function MachineClientsTable({
{
accessorKey: "niceId",
friendlyName: "Identifier",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
}
>
{t("identifier")}
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
}
header: () => <span className="px-3">{t("identifier")}</span>
},
{
accessorKey: "online",
friendlyName: "Connectivity",
header: ({ column }) => {
friendlyName: t("online"),
header: () => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
<ColumnFilterButton
options={[
{
value: "true",
label: t("connected")
},
{
value: "false",
label: t("disconnected")
}
]}
selectedValue={
searchParams.get("online") ?? undefined
}
>
Connectivity
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
onValueChange={(value) =>
handleFilterChange("online", value)
}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
label={t("online")}
className="p-3"
/>
);
},
cell: ({ row }) => {
@@ -279,38 +283,52 @@ export default function MachineClientsTable({
},
{
accessorKey: "mbIn",
friendlyName: "Data In",
header: ({ column }) => {
friendlyName: t("dataIn"),
header: () => {
const dataInOrder = getSortDirection(
"megabytesIn",
searchParams
);
const Icon =
dataInOrder === "asc"
? ArrowDown01Icon
: dataInOrder === "desc"
? ArrowUp10Icon
: ChevronsUpDownIcon;
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
}
onClick={() => toggleSort("megabytesIn")}
>
Data In
<ArrowUpDown className="ml-2 h-4 w-4" />
{t("dataIn")}
<Icon className="ml-2 h-4 w-4" />
</Button>
);
}
},
{
accessorKey: "mbOut",
friendlyName: "Data Out",
header: ({ column }) => {
friendlyName: t("dataOut"),
header: () => {
const dataOutOrder = getSortDirection(
"megabytesOut",
searchParams
);
const Icon =
dataOutOrder === "asc"
? ArrowDown01Icon
: dataOutOrder === "desc"
? ArrowUp10Icon
: ChevronsUpDownIcon;
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
}
onClick={() => toggleSort("megabytesOut")}
>
Data Out
<ArrowUpDown className="ml-2 h-4 w-4" />
{t("dataOut")}
<Icon className="ml-2 h-4 w-4" />
</Button>
);
}
@@ -356,22 +374,8 @@ export default function MachineClientsTable({
},
{
accessorKey: "subnet",
friendlyName: "Address",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === "asc"
)
}
>
Address
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
}
friendlyName: t("address"),
header: () => <span className="px-3">{t("address")}</span>
}
];
@@ -455,7 +459,56 @@ export default function MachineClientsTable({
}
return baseColumns;
}, [hasRowsWithoutUserId, t]);
}, [hasRowsWithoutUserId, t, getSortDirection, toggleSort]);
const booleanSearchFilterSchema = z
.enum(["true", "false"])
.optional()
.catch(undefined);
function handleFilterChange(
column: string,
value: string | null | undefined | string[]
) {
searchParams.delete(column);
searchParams.delete("page");
if (typeof value === "string") {
searchParams.set(column, value);
} else if (value) {
for (const val of value) {
searchParams.append(column, val);
}
}
filter({
searchParams
});
}
function toggleSort(column: string) {
const newSearch = getNextSortOrder(column, searchParams);
filter({
searchParams: newSearch
});
}
const handlePaginationChange = (newPage: PaginationState) => {
searchParams.set("page", (newPage.pageIndex + 1).toString());
searchParams.set("pageSize", newPage.pageSize.toString());
filter({
searchParams
});
};
const handleSearchChange = useDebouncedCallback((query: string) => {
searchParams.set("query", query);
searchParams.delete("page");
filter({
searchParams
});
}, 300);
return (
<>
@@ -478,20 +531,25 @@ export default function MachineClientsTable({
title="Delete Client"
/>
)}
<DataTable
<ControlledDataTable
columns={columns}
data={machineClients || []}
persistPageSize="machine-clients"
rows={machineClients}
tableId="machine-clients"
searchPlaceholder={t("resourcesSearch")}
searchColumn="name"
onAdd={() =>
router.push(`/${orgId}/settings/clients/machine/create`)
startNavigation(() =>
router.push(`/${orgId}/settings/clients/machine/create`)
)
}
pagination={pagination}
rowCount={rowCount}
addButtonText={t("createClient")}
onRefresh={refreshData}
isRefreshing={isRefreshing}
enableColumnVisibility={true}
persistColumnVisibility="machine-clients"
isRefreshing={isRefreshing || isFiltering}
onSearch={handleSearchChange}
onPaginationChange={handlePaginationChange}
isNavigatingToAddPage={isNavigatingToAddPage}
enableColumnVisibility
columnVisibility={defaultMachineColumnVisibility}
stickyLeftColumn="name"
stickyRightColumn="actions"
@@ -518,30 +576,10 @@ export default function MachineClientsTable({
value: "blocked"
}
],
filterFn: (
row: ClientRow,
selectedValues: (string | number | boolean)[]
) => {
if (selectedValues.length === 0) return true;
const rowArchived = row.archived || false;
const rowBlocked = row.blocked || false;
const isActive = !rowArchived && !rowBlocked;
if (selectedValues.includes("active") && isActive)
return true;
if (
selectedValues.includes("archived") &&
rowArchived
)
return true;
if (
selectedValues.includes("blocked") &&
rowBlocked
)
return true;
return false;
onValueChange(selectedValues: string[]) {
handleFilterChange("status", selectedValues);
},
defaultValues: ["active"] // Default to showing active clients
values: searchParams.getAll("status")
}
]}
/>

8
src/components/ProxyResourcesTable.tsx
View File

@@ -611,11 +611,9 @@ export default function ProxyResourcesTable({
onSearch={handleSearchChange}
onPaginationChange={handlePaginationChange}
onAdd={() =>
startNavigation(() => {
router.push(
`/${orgId}/settings/resources/proxy/create`
);
})
startNavigation(() =>
router.push(`/${orgId}/settings/resources/proxy/create`)
)
}
addButtonText={t("resourceAdd")}
onRefresh={refreshData}

8
src/components/UserDevicesTable.tsx
View File

@@ -443,10 +443,6 @@ export default function UserDevicesTable({
searchParams
);
console.log({
dataInOrder,
searchParams: Object.fromEntries(searchParams.entries())
});
const Icon =
dataInOrder === "asc"
? ArrowDown01Icon
@@ -520,6 +516,10 @@ export default function UserDevicesTable({
value: "cli",
label: "Pangolin CLI"
},
{
value: "olm",
label: "Olm CLI"
},
{
value: "unknown",
label: t("unknown")