diff --git a/messages/en-US.json b/messages/en-US.json index 2f67eca21..1f3717110 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -1164,6 +1164,8 @@ "siteLabelsDescription": "Manage labels associated with this site.", "labelsNotFound": "Labels not found", "labelSearch": "Search labels", + "accessLabelFilterCount": "{count, plural, one {# label} other {# labels}}", + "accessLabelFilterClear": "Clear label filters", "selectColor": "Select color", "createNewLabel": "Create new org label \"{label}\"", "inviteInvalidDescription": "The invite link is invalid.", diff --git a/server/routers/client/listClients.ts b/server/routers/client/listClients.ts index 220f845f4..84abb95f4 100644 --- a/server/routers/client/listClients.ts +++ b/server/routers/client/listClients.ts @@ -118,7 +118,27 @@ const listClientsSchema = z.object({ description: "Filter by client status. Can be a comma-separated list of values. Defaults to 'active'." }) - ) + ), + labels: z + .preprocess((val) => { + if (val === undefined || val === null || val === "") { + return undefined; + } + if (Array.isArray(val)) { + return val; + } + // the array is returned as this + if (typeof val === "string") { + return val.split(","); + } + return undefined; + }, z.array(z.string())) + .optional() + .catch([]) + .openapi({ + type: "array", + description: "Filter by client labels" + }) }); function queryClientsBase() { @@ -210,8 +230,16 @@ export async function listClients( ) ); } - const { page, pageSize, online, query, status, sort_by, order } = - parsedQuery.data; + const { + page, + pageSize, + online, + query, + status, + sort_by, + order, + labels: labelFilter + } = parsedQuery.data; const parsedParams = listClientsParamsSchema.safeParse(req.params); if (!parsedParams.success) { @@ -298,6 +326,22 @@ export async function listClients( conditions.push(or(...filterAggregates)); } + if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) { + conditions.push( + inArray( + clients.clientId, + db + .select({ id: clientLabels.clientId }) + .from(clientLabels) + .innerJoin( + labels, + eq(labels.labelId, clientLabels.labelId) + ) + .where(inArray(labels.name, labelFilter)) + ) + ); + } + if (query) { const q = "%" + query.toLowerCase() + "%"; const queryList = [ diff --git a/server/routers/resource/listResources.ts b/server/routers/resource/listResources.ts index 49b7f2b57..d37f04e13 100644 --- a/server/routers/resource/listResources.ts +++ b/server/routers/resource/listResources.ts @@ -71,7 +71,7 @@ const listResourcesSchema = z.object({ }), query: z.string().optional(), sort_by: z - .enum(["name"]) + .literal("name") .optional() .catch(undefined) .openapi({ @@ -123,7 +123,27 @@ const listResourcesSchema = z.object({ type: "integer", description: "When set, only resources that have at least one target on this site are returned" - }) + }), + labels: z + .preprocess((val) => { + if (val === undefined || val === null || val === "") { + return undefined; + } + if (Array.isArray(val)) { + return val; + } + // the array is returned as this + if (typeof val === "string") { + return val.split(","); + } + return undefined; + }, z.array(z.string())) + .optional() + .catch([]) + .openapi({ + type: "array", + description: "Filter by resource labels" + }) }); // grouped by resource with targets[]) @@ -261,7 +281,8 @@ export async function listResources( healthStatus, sort_by, order, - siteId + siteId, + labels: labelFilter } = parsedQuery.data; const parsedParams = listResourcesParamsSchema.safeParse(req.params); @@ -379,6 +400,23 @@ export async function listResources( .where(and(eq(sites.orgId, orgId), eq(sites.siteId, siteId))); conditions.push(inArray(resources.resourceId, resourcesWithSite)); } + + if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) { + conditions.push( + inArray( + resources.resourceId, + db + .select({ id: resourceLabels.resourceId }) + .from(resourceLabels) + .innerJoin( + labels, + eq(labels.labelId, resourceLabels.labelId) + ) + .where(inArray(labels.name, labelFilter)) + ) + ); + } + if (query) { const q = "%" + query.toLowerCase() + "%"; const queryList = [ diff --git a/server/routers/site/listSites.ts b/server/routers/site/listSites.ts index af6514f02..8b73a984b 100644 --- a/server/routers/site/listSites.ts +++ b/server/routers/site/listSites.ts @@ -187,6 +187,26 @@ const listSitesSchema = z.object({ type: "string", enum: ["pending", "approved"], description: "Filter by site status" + }), + labels: z + .preprocess((val) => { + if (val === undefined || val === null || val === "") { + return undefined; + } + if (Array.isArray(val)) { + return val; + } + // the array is returned as this + if (typeof val === "string") { + return val.split(","); + } + return undefined; + }, z.array(z.string())) + .optional() + .catch([]) + .openapi({ + type: "array", + description: "Filter by site labels" }) }); @@ -319,8 +339,16 @@ export async function listSites( tierMatrix.labels ); - const { pageSize, page, query, sort_by, order, online, status } = - parsedQuery.data; + const { + pageSize, + page, + query, + sort_by, + order, + online, + status, + labels: labelFilter + } = parsedQuery.data; const accessibleSiteIds = accessibleSites.map((site) => site.siteId); @@ -337,6 +365,23 @@ export async function listSites( if (typeof status !== "undefined") { conditions.push(eq(sites.status, status)); } + + if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) { + conditions.push( + inArray( + sites.siteId, + db + .select({ id: siteLabels.siteId }) + .from(siteLabels) + .innerJoin( + labels, + eq(labels.labelId, siteLabels.labelId) + ) + .where(inArray(labels.name, labelFilter)) + ) + ); + } + if (query) { const q = "%" + query.toLowerCase() + "%"; const queryList = [ @@ -366,7 +411,9 @@ export async function listSites( // we need to add `as` so that drizzle filters the result as a subquery const countQuery = db.$count( - querySitesBase().where(and(...conditions)).as("filtered_sites") + querySitesBase() + .where(and(...conditions)) + .as("filtered_sites") ); const siteListQuery = baseQuery diff --git a/server/routers/siteResource/listAllSiteResourcesByOrg.ts b/server/routers/siteResource/listAllSiteResourcesByOrg.ts index ac243328c..2298e9cba 100644 --- a/server/routers/siteResource/listAllSiteResourcesByOrg.ts +++ b/server/routers/siteResource/listAllSiteResourcesByOrg.ts @@ -85,7 +85,27 @@ const listAllSiteResourcesByOrgQuerySchema = z.object({ type: "integer", description: "When set, only site resources associated with this site (via network) are returned" - }) + }), + labels: z + .preprocess((val) => { + if (val === undefined || val === null || val === "") { + return undefined; + } + if (Array.isArray(val)) { + return val; + } + // the array is returned as this + if (typeof val === "string") { + return val.split(","); + } + return undefined; + }, z.array(z.string())) + .optional() + .catch([]) + .openapi({ + type: "array", + description: "Filter by resource labels" + }) }); export type ListAllSiteResourcesByOrgResponse = PaginatedResponse<{ @@ -239,8 +259,16 @@ export async function listAllSiteResourcesByOrg( } const { orgId } = parsedParams.data; - const { page, pageSize, query, mode, sort_by, order, siteId } = - parsedQuery.data; + const { + page, + pageSize, + query, + mode, + sort_by, + order, + siteId, + labels: labelFilter + } = parsedQuery.data; const isLabelFeatureEnabled = await isLicensedOrSubscribed( orgId, @@ -276,6 +304,22 @@ export async function listAllSiteResourcesByOrg( conditions.push(eq(siteResources.mode, mode)); } + if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) { + conditions.push( + inArray( + siteResources.siteResourceId, + db + .select({ id: siteResourceLabels.siteResourceId }) + .from(siteResourceLabels) + .innerJoin( + labels, + eq(labels.labelId, siteResourceLabels.labelId) + ) + .where(inArray(labels.name, labelFilter)) + ) + ); + } + if (query) { const q = "%" + query.toLowerCase() + "%"; const queryList = [ diff --git a/src/components/ClientResourcesTable.tsx b/src/components/ClientResourcesTable.tsx index 156cc7f41..1d6971f73 100644 --- a/src/components/ClientResourcesTable.tsx +++ b/src/components/ClientResourcesTable.tsx @@ -64,6 +64,7 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus"; import { tierMatrix } from "@server/lib/billing/tierMatrix"; import { LabelBadge } from "./label-badge"; import { LabelsSelector, type SelectedLabel } from "./labels-selector"; +import { LabelColumnFilterButton } from "./LabelColumnFilterButton"; export type InternalResourceSiteRow = ResourceSiteRow; @@ -220,59 +221,6 @@ export default function ClientResourcesTable({ } }; - function SiteCell({ resourceRow }: { resourceRow: InternalResourceRow }) { - const { siteNames, siteNiceIds, orgId } = resourceRow; - - if (!siteNames || siteNames.length === 0) { - return ( - - {t("noSites", { defaultValue: "No sites" })} - - ); - } - - if (siteNames.length === 1) { - return ( - - - - ); - } - - return ( - - - - - - {siteNames.map((siteName, idx) => ( - - - {siteName} - - - - ))} - - - ); - } - const internalColumns = useMemo< ExtendedColumnDef[] >(() => { @@ -585,9 +533,15 @@ export default function ClientResourcesTable({ id: "labels", accessorKey: "labels", header: () => ( - - {t("labels")} - + + handleFilterChange("labels", value) + } + label={t("labels")} + className="p-3" + /> ), cell: ({ row }: { row: { original: InternalResourceRow } }) => ( searchParams.append(column, val)); } filter({ searchParams @@ -682,7 +638,7 @@ export default function ClientResourcesTable({ rows={internalResources} tableId="internal-resources" searchPlaceholder={t("resourcesSearch")} - searchQuery={searchParams.get("query") ?? ""} + searchQuery={searchParams.get("query")?.toString()} onAdd={() => setIsCreateDialogOpen(true)} addButtonText={t("resourceAdd")} onSearch={handleSearchChange} diff --git a/src/components/CreateBlueprintForm.tsx b/src/components/CreateBlueprintForm.tsx index 2b58f34f6..e71a66572 100644 --- a/src/components/CreateBlueprintForm.tsx +++ b/src/components/CreateBlueprintForm.tsx @@ -109,7 +109,7 @@ export default function CreateBlueprintForm({ if (res && res.status === 201) { const createdBlueprint = res.data.data; toast({ - variant: "warning", + variant: createdBlueprint.succeeded ? "default" : "warning", title: createdBlueprint.succeeded ? "Success" : "Warning", description: createdBlueprint.message }); diff --git a/src/components/HealthChecksTable.tsx b/src/components/HealthChecksTable.tsx index 2e85d55bd..4ed766884 100644 --- a/src/components/HealthChecksTable.tsx +++ b/src/components/HealthChecksTable.tsx @@ -109,7 +109,6 @@ export default function HealthChecksTable({ const [siteFilterOpen, setSiteFilterOpen] = useState(false); const [resourceFilterOpen, setResourceFilterOpen] = useState(false); - const pageSize = pagination.pageSize; const query = searchParams.get("query") ?? undefined; const siteIdQ = searchParams.get("siteId"); @@ -586,7 +585,9 @@ export default function HealthChecksTable({ handleToggleEnabled(r, v)} /> diff --git a/src/components/LabelColumnFilterButton.tsx b/src/components/LabelColumnFilterButton.tsx new file mode 100644 index 000000000..ff55e3ebd --- /dev/null +++ b/src/components/LabelColumnFilterButton.tsx @@ -0,0 +1,187 @@ +"use client"; + +import { Button } from "@app/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList +} from "@app/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger +} from "@app/components/ui/popover"; +import { cn } from "@app/lib/cn"; +import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover"; +import { CheckIcon, Funnel } from "lucide-react"; +import { useTranslations } from "next-intl"; +import { useMemo, useState } from "react"; +import { Badge } from "./ui/badge"; +import { orgQueries } from "@app/lib/queries"; +import { useQuery } from "@tanstack/react-query"; +import { useDebounce } from "use-debounce"; + +type LabelColumnFilterButtonProps = { + selectedValues: string[]; + onSelectedValuesChange: (values: string[]) => void; + className?: string; + label: string; + orgId: string; +}; + +export function LabelColumnFilterButton({ + selectedValues, + onSelectedValuesChange, + className, + label, + orgId +}: LabelColumnFilterButtonProps) { + const [open, setOpen] = useState(false); + const t = useTranslations(); + + const [labelSearchQuery, setlabelsSearchQuery] = useState(""); + const [debouncedQuery] = useDebounce(labelSearchQuery, 150); + + const { data: labels = [] } = useQuery( + orgQueries.labels({ + orgId, + query: debouncedQuery, + perPage: 500 + }) + ); + + const selectedSet = useMemo( + () => new Set(selectedValues), + [selectedValues] + ); + + const summary = useMemo(() => { + if (selectedValues.length === 0) { + return null; + } + if (selectedValues.length === 1) { + const foundLabel = labels.find((o) => o.name === selectedValues[0]); + + if (foundLabel) { + return ( +
+
+ {foundLabel.name} +
+ ); + } + return selectedValues[0]; + } + return t("accessLabelFilterCount", { + count: selectedValues.length + }); + }, [selectedValues, labels, t]); + + function toggle(value: string) { + const next = selectedSet.has(value) + ? selectedValues.filter((v) => v !== value) + : [...selectedValues, value]; + onSelectedValuesChange(next); + } + + return ( +
+ + + + + + + + + {t("labelsNotFound")} + + {selectedValues.length > 0 && ( + { + onSelectedValuesChange([]); + setOpen(false); + }} + className="text-muted-foreground" + > + {t("accessLabelFilterClear")} + + )} + {labels.map((label) => ( + { + toggle(label.name); + }} + className="flex items-center gap-2" + > + +
+ {label.name} + + ))} + + + + + +
+ ); +} diff --git a/src/components/MachineClientsTable.tsx b/src/components/MachineClientsTable.tsx index 8e113f340..866aa1038 100644 --- a/src/components/MachineClientsTable.tsx +++ b/src/components/MachineClientsTable.tsx @@ -2,7 +2,7 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import { Button } from "@app/components/ui/button"; -import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table"; +import { ExtendedColumnDef } from "@app/components/ui/data-table"; import { DropdownMenu, DropdownMenuContent, @@ -10,19 +10,21 @@ import { DropdownMenuTrigger } from "@app/components/ui/dropdown-menu"; import { useEnvContext } from "@app/hooks/useEnvContext"; +import { useNavigationContext } from "@app/hooks/useNavigationContext"; import { usePaidStatus } from "@app/hooks/usePaidStatus"; import { toast } from "@app/hooks/useToast"; import { createApiClient, formatAxiosError } from "@app/lib/api"; import { cn } from "@app/lib/cn"; +import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn"; import { tierMatrix } from "@server/lib/billing/tierMatrix"; +import type { PaginationState } from "@tanstack/react-table"; import { - ArrowRight, - ArrowUpDown, - MoreHorizontal, - CircleSlash, ArrowDown01Icon, + ArrowRight, ArrowUp10Icon, ChevronsUpDownIcon, + CircleSlash, + MoreHorizontal, PlusIcon } from "lucide-react"; import { useTranslations } from "next-intl"; @@ -35,21 +37,15 @@ import { useState, useTransition } from "react"; -import { LabelBadge } from "./label-badge"; -import { LabelsSelector, type SelectedLabel } from "./labels-selector"; -import { - Popover, - PopoverContent, - PopoverTrigger -} from "./ui/popover"; -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"; +import { LabelBadge } from "./label-badge"; +import { LabelsSelector, type SelectedLabel } from "./labels-selector"; +import { Badge } from "./ui/badge"; +import { ControlledDataTable } from "./ui/controlled-data-table"; +import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; +import { LabelColumnFilterButton } from "./LabelColumnFilterButton"; export type ClientRow = { id: number; @@ -415,9 +411,15 @@ export default function MachineClientsTable({ id: "labels", accessorKey: "labels", header: () => ( - - {t("labels")} - + + handleFilterChange("labels", value) + } + label={t("labels")} + className="p-3" + /> ), cell: ({ row }: { row: { original: ClientRow } }) => ( startNavigation(() => router.push(`/${orgId}/settings/clients/machine/create`) @@ -602,35 +600,6 @@ export default function MachineClientsTable({ columnVisibility={defaultMachineColumnVisibility} stickyLeftColumn="name" stickyRightColumn="actions" - filters={[ - { - id: "status", - label: t("status") || "Status", - multiSelect: true, - displayMode: "calculated", - options: [ - { - id: "active", - label: t("active") || "Active", - value: "active" - }, - { - id: "archived", - label: t("archived") || "Archived", - value: "archived" - }, - { - id: "blocked", - label: t("blocked") || "Blocked", - value: "blocked" - } - ], - onValueChange(selectedValues: string[]) { - handleFilterChange("status", selectedValues); - }, - values: searchParams.getAll("status") - } - ]} /> ); @@ -641,7 +610,10 @@ type MachineClientLabelCellProps = { orgId: string; }; -function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps) { +function MachineClientLabelCell({ + client, + orgId +}: MachineClientLabelCellProps) { const t = useTranslations(); const api = createApiClient(useEnvContext()); const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -650,7 +622,10 @@ function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps) const labels = client.labels ?? []; const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels); - function toggleClientLabel(label: SelectedLabel, action: "attach" | "detach") { + function toggleClientLabel( + label: SelectedLabel, + action: "attach" | "detach" + ) { startTransition(async () => { try { if (action === "attach") { diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx index 51c3254b6..ac7e424f6 100644 --- a/src/components/ProxyResourcesTable.tsx +++ b/src/components/ProxyResourcesTable.tsx @@ -72,6 +72,7 @@ import { ControlledDataTable } from "./ui/controlled-data-table"; import UptimeMiniBar from "./UptimeMiniBar"; import { LabelsSelector, type SelectedLabel } from "./labels-selector"; import { LabelBadge } from "./label-badge"; +import { LabelColumnFilterButton } from "./LabelColumnFilterButton"; export type TargetHealth = { targetId: number; @@ -640,9 +641,15 @@ export default function ProxyResourcesTable({ id: "labels", accessorKey: "labels", header: () => ( - - {t("labels")} - + + handleFilterChange("labels", value) + } + label={t("labels")} + className="p-3" + /> ), cell: ({ row }: { row: { original: ResourceRow } }) => ( @@ -655,13 +662,15 @@ export default function ProxyResourcesTable({ function handleFilterChange( column: string, - value: string | undefined | null + value: string | undefined | null | string[] ) { searchParams.delete(column); searchParams.delete("page"); - if (value) { + if (typeof value === "string") { searchParams.set(column, value); + } else if (value) { + value.forEach((val) => searchParams.append(column, val)); } filter({ searchParams @@ -721,6 +730,7 @@ export default function ProxyResourcesTable({ searchPlaceholder={t("resourcesSearch")} pagination={pagination} rowCount={rowCount} + searchQuery={searchParams.get("query")?.toString()} onSearch={handleSearchChange} onPaginationChange={handlePaginationChange} onAdd={() => diff --git a/src/components/SitesTable.tsx b/src/components/SitesTable.tsx index 4412ecccf..3db076819 100644 --- a/src/components/SitesTable.tsx +++ b/src/components/SitesTable.tsx @@ -64,6 +64,7 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix"; import { LabelBadge } from "./label-badge"; import { LabelsSelector, type SelectedLabel } from "./labels-selector"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; +import { LabelColumnFilterButton } from "./LabelColumnFilterButton"; export type SiteRow = { id: number; @@ -136,14 +137,16 @@ export default function SitesTable({ function handleFilterChange( column: string, - value: string | undefined | null + value: string | undefined | null | string[] ) { const sp = new URLSearchParams(searchParams); sp.delete(column); sp.delete("page"); - if (value) { + if (typeof value === "string") { sp.set(column, value); + } else if (value) { + value.forEach((val) => sp.append(column, val)); } startTransition(() => router.push(`${pathname}?${sp.toString()}`)); } @@ -183,358 +186,373 @@ export default function SitesTable({ const columns = useMemo[]>(() => { const cols: ExtendedColumnDef[] = [ - { - accessorKey: "name", - enableHiding: false, - header: () => { - const nameOrder = getSortDirection("name", searchParams); - const Icon = - nameOrder === "asc" - ? ArrowDown01Icon - : nameOrder === "desc" - ? ArrowUp10Icon - : ChevronsUpDownIcon; + { + accessorKey: "name", + enableHiding: false, + header: () => { + const nameOrder = getSortDirection("name", searchParams); + const Icon = + nameOrder === "asc" + ? ArrowDown01Icon + : nameOrder === "desc" + ? ArrowUp10Icon + : ChevronsUpDownIcon; - return ( - - ); - } - }, - { - id: "niceId", - accessorKey: "nice", - friendlyName: t("identifier"), - enableHiding: true, - header: () => { - return {t("identifier")}; + return ( + + ); + } }, - cell: ({ row }) => { - return {row.original.nice || "-"}; - } - }, - { - accessorKey: "online", - friendlyName: t("online"), - header: () => { - return ( - - handleFilterChange("online", value) + { + id: "niceId", + accessorKey: "nice", + friendlyName: t("identifier"), + enableHiding: true, + header: () => { + return {t("identifier")}; + }, + cell: ({ row }) => { + return {row.original.nice || "-"}; + } + }, + { + accessorKey: "online", + friendlyName: t("online"), + header: () => { + return ( + + handleFilterChange("online", value) + } + searchPlaceholder={t("searchPlaceholder")} + emptyMessage={t("emptySearchOptions")} + label={t("online")} + className="p-3" + /> + ); + }, + cell: ({ row }) => { + const originalRow = row.original; + if ( + originalRow.type == "newt" || + originalRow.type == "wireguard" + ) { + if (originalRow.online) { + return ( + +
+ {t("online")} + + ); + } else { + return ( + +
+ {t("offline")} + + ); } - searchPlaceholder={t("searchPlaceholder")} - emptyMessage={t("emptySearchOptions")} - label={t("online")} - className="p-3" - /> - ); - }, - cell: ({ row }) => { - const originalRow = row.original; - if ( - originalRow.type == "newt" || - originalRow.type == "wireguard" - ) { - if (originalRow.online) { - return ( - -
- {t("online")} - - ); } else { + return -; + } + } + }, + { + id: "uptime", + friendlyName: "Uptime", + header: () => {t("uptime30d")}, + cell: ({ row }) => { + const originalRow = row.original; + if (originalRow.type == "local") { + return -; + } + return ; + } + }, + { + accessorKey: "mbIn", + friendlyName: t("dataIn"), + header: () => { + const dataInOrder = getSortDirection( + "megabytesIn", + searchParams + ); + const Icon = + dataInOrder === "asc" + ? ArrowDown01Icon + : dataInOrder === "desc" + ? ArrowUp10Icon + : ChevronsUpDownIcon; + return ( + + ); + } + }, + { + accessorKey: "mbOut", + friendlyName: t("dataOut"), + header: () => { + const dataOutOrder = getSortDirection( + "megabytesOut", + searchParams + ); + + const Icon = + dataOutOrder === "asc" + ? ArrowDown01Icon + : dataOutOrder === "desc" + ? ArrowUp10Icon + : ChevronsUpDownIcon; + return ( + + ); + } + }, + { + accessorKey: "type", + friendlyName: t("type"), + header: () => { + return {t("type")}; + }, + cell: ({ row }) => { + const originalRow = row.original; + + if (originalRow.type === "newt") { return ( - -
- {t("offline")} - +
+ +
+ Newt + {originalRow.newtVersion && ( + + v{originalRow.newtVersion} + + )} +
+ + {originalRow.newtUpdateAvailable && ( + + )} +
); } - } else { - return -; - } - } - }, - { - id: "uptime", - friendlyName: "Uptime", - header: () => {t("uptime30d")}, - cell: ({ row }) => { - const originalRow = row.original; - if (originalRow.type == "local") { - return -; - } - return ; - } - }, - { - accessorKey: "mbIn", - friendlyName: t("dataIn"), - header: () => { - const dataInOrder = getSortDirection( - "megabytesIn", - searchParams - ); - const Icon = - dataInOrder === "asc" - ? ArrowDown01Icon - : dataInOrder === "desc" - ? ArrowUp10Icon - : ChevronsUpDownIcon; - return ( - - ); - } - }, - { - accessorKey: "mbOut", - friendlyName: t("dataOut"), - header: () => { - const dataOutOrder = getSortDirection( - "megabytesOut", - searchParams - ); - const Icon = - dataOutOrder === "asc" - ? ArrowDown01Icon - : dataOutOrder === "desc" - ? ArrowUp10Icon - : ChevronsUpDownIcon; - return ( - - ); - } - }, - { - accessorKey: "type", - friendlyName: t("type"), - header: () => { - return {t("type")}; + if (originalRow.type === "wireguard") { + return ( +
+ WireGuard +
+ ); + } + + if (originalRow.type === "local") { + return ( +
+ Local +
+ ); + } + } }, - cell: ({ row }) => { - const originalRow = row.original; - - if (originalRow.type === "newt") { + { + id: "resources", + accessorKey: "resourceCount", + friendlyName: t("resources"), + header: () => {t("resources")}, + cell: ({ row }) => { + const siteRow = row.original; return ( -
+ + ); + } + }, + { + accessorKey: "exitNode", + friendlyName: t("exitNode"), + header: () => { + return {t("exitNode")}; + }, + cell: ({ row }) => { + const originalRow = row.original; + if (!originalRow.exitNodeName) { + return "-"; + } + + const isCloudNode = + build == "saas" && + originalRow.exitNodeName && + [ + "mercury", + "venus", + "earth", + "mars", + "jupiter", + "saturn", + "uranus", + "neptune", + "pluto" + ].includes(originalRow.exitNodeName.toLowerCase()); + + if (isCloudNode) { + const capitalizedName = + originalRow.exitNodeName.charAt(0).toUpperCase() + + originalRow.exitNodeName.slice(1).toLowerCase(); + return ( -
- Newt - {originalRow.newtVersion && ( - v{originalRow.newtVersion} - )} -
+ Pangolin {capitalizedName} - {originalRow.newtUpdateAvailable && ( - - )} -
- ); - } + ); + } - if (originalRow.type === "wireguard") { - return ( -
- WireGuard -
- ); - } - - if (originalRow.type === "local") { - return ( -
- Local -
- ); - } - } - }, - { - id: "resources", - accessorKey: "resourceCount", - friendlyName: t("resources"), - header: () => {t("resources")}, - cell: ({ row }) => { - const siteRow = row.original; - return ( - - ); - } - }, - { - accessorKey: "exitNode", - friendlyName: t("exitNode"), - header: () => { - return {t("exitNode")}; - }, - cell: ({ row }) => { - const originalRow = row.original; - if (!originalRow.exitNodeName) { - return "-"; - } - - const isCloudNode = - build == "saas" && - originalRow.exitNodeName && - [ - "mercury", - "venus", - "earth", - "mars", - "jupiter", - "saturn", - "uranus", - "neptune", - "pluto" - ].includes(originalRow.exitNodeName.toLowerCase()); - - if (isCloudNode) { - const capitalizedName = - originalRow.exitNodeName.charAt(0).toUpperCase() + - originalRow.exitNodeName.slice(1).toLowerCase(); - return ( - - Pangolin {capitalizedName} - - ); - } - - // Self-hosted node - if (originalRow.remoteExitNodeId) { - return ( - - - - ); - } - - // Fallback if no remoteExitNodeId - return {originalRow.exitNodeName}; - } - }, - { - accessorKey: "address", - header: () => { - return {t("address")}; - }, - cell: ({ row }) => { - const originalRow = row.original; - return originalRow.address ? ( -
- {originalRow.address} -
- ) : ( - "-" - ); - } - }, - { - id: "actions", - enableHiding: false, - header: () => , - cell: ({ row }) => { - const siteRow = row.original; - return ( -
- - - - - - - - {t("viewSettings")} - - - - - {t("sitesTableViewPublicResources")} - - - - - {t("sitesTableViewPrivateResources")} - - - - - - - -
- ); + + ); + } + + // Fallback if no remoteExitNodeId + return {originalRow.exitNodeName}; + } + }, + { + accessorKey: "address", + header: () => { + return {t("address")}; + }, + cell: ({ row }) => { + const originalRow = row.original; + return originalRow.address ? ( +
+ {originalRow.address} +
+ ) : ( + "-" + ); + } + }, + { + id: "actions", + enableHiding: false, + header: () => , + cell: ({ row }) => { + const siteRow = row.original; + return ( +
+ + + + + + + + {t("viewSettings")} + + + + + {t("sitesTableViewPublicResources")} + + + + + {t( + "sitesTableViewPrivateResources" + )} + + + + + + + +
+ ); + } } - } ]; if (isLabelFeatureEnabled) { cols.splice(cols.length - 1, 0, { accessorKey: "labels", header: () => ( - - {t("labels")} - + + handleFilterChange("labels", value) + } + label={t("labels")} + className="p-3" + /> ), cell: ({ row }: { row: { original: SiteRow } }) => ( diff --git a/src/components/UserDevicesTable.tsx b/src/components/UserDevicesTable.tsx index 1908f1100..20eeae897 100644 --- a/src/components/UserDevicesTable.tsx +++ b/src/components/UserDevicesTable.tsx @@ -794,6 +794,7 @@ export default function UserDevicesTable({ columnVisibility={defaultUserColumnVisibility} onSearch={handleSearchChange} onPaginationChange={handlePaginationChange} + searchQuery={searchParams.get("query")?.toString()} pagination={pagination} rowCount={rowCount} stickyLeftColumn="name"