calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-22 16:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚧 tried to memo proxy resource table, failed

Browse Source
This commit is contained in:
Fred KISSIE
2026-05-11 21:06:20 +02:00
parent 3855486a00
commit d321d7275c
1 changed files with 399 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/ProxyResourcesTable.tsx
View File

@@ -118,6 +118,11 @@ type ProxyResourcesTableProps = {
initialFilterSite?: Selectedsite | null;
};
const booleanSearchFilterSchema = z
.enum(["true", "false"])
.optional()
.catch(undefined);
export default function ProxyResourcesTable({
resources,
orgId,
@@ -224,7 +229,30 @@ export default function ProxyResourcesTable({
}
}
const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
const clearSiteFilter = () => {
handleFilterChange("siteId", undefined);
setSiteFilterOpen(false);
};
const onPickSite = (site: Selectedsite) => {
handleFilterChange("siteId", String(site.siteId));
setSiteFilterOpen(false);
};
const siteFilterOpenRef = useRef(siteFilterOpen);
siteFilterOpenRef.current = siteFilterOpen;
const selectedSiteRef = useRef(selectedSite);
selectedSiteRef.current = selectedSite;
const clearSiteFilterRef = useRef(clearSiteFilter);
clearSiteFilterRef.current = clearSiteFilter;
const onPickSiteRef = useRef(onPickSite);
onPickSiteRef.current = onPickSite;
const proxyColumns = useMemo<ExtendedColumnDef<ResourceRow>[]>(() => {
const cols: ExtendedColumnDef<ResourceRow>[] = [
{
accessorKey: "name",
enableHiding: false,
@@ -262,10 +290,14 @@ export default function ProxyResourcesTable({
},
{
id: "sites",
accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "),
accessorFn: (row) =>
row.sites.map((s) => s.siteName).join(", "),
friendlyName: t("sites"),
header: () => (
<Popover open={siteFilterOpen} onOpenChange={setSiteFilterOpen}>
<Popover
open={siteFilterOpenRef.current}
onOpenChange={setSiteFilterOpen}
>
<PopoverTrigger asChild>
<Button
type="button"
@@ -273,18 +305,19 @@ export default function ProxyResourcesTable({
role="combobox"
className={cn(
"justify-between text-sm h-8 px-2 w-full p-3",
!selectedSite && "text-muted-foreground"
!selectedSiteRef.current &&
"text-muted-foreground"
)}
>
<div className="flex items-center gap-2 min-w-0">
{t("sites")}
<Funnel className="size-4 flex-none" />
{selectedSite && (
{selectedSiteRef.current && (
<Badge
className="truncate max-w-[10rem]"
variant="secondary"
>
{selectedSite.name}
{selectedSiteRef.current.name}
</Badge>
)}
</div>
@@ -300,15 +333,17 @@ export default function ProxyResourcesTable({
variant="ghost"
size="sm"
className="h-8 w-full justify-start font-normal"
onClick={clearSiteFilter}
onClick={() => clearSiteFilterRef.current()}
>
{t("standaloneHcFilterAnySite")}
</Button>
</div>
<SitesSelector
orgId={orgId}
selectedSite={selectedSite}
onSelectSite={onPickSite}
selectedSite={selectedSiteRef.current}
onSelectSite={(site) =>
onPickSiteRef.current(site)
}
/>
</PopoverContent>
</Popover>
@@ -345,7 +380,10 @@ export default function ProxyResourcesTable({
header: () => (
<ColumnFilterButton
options={[
{ value: "healthy", label: t("resourcesTableHealthy") },
{
value: "healthy",
label: t("resourcesTableHealthy")
},
{
value: "degraded",
label: t("resourcesTableDegraded")
@@ -354,7 +392,10 @@ export default function ProxyResourcesTable({
value: "unhealthy",
label: t("resourcesTableUnhealthy")
},
{ value: "unknown", label: t("resourcesTableUnknown") }
{
value: "unknown",
label: t("resourcesTableUnknown")
}
]}
selectedValue={
searchParams.get("healthStatus") ?? undefined
@@ -398,7 +439,9 @@ export default function ProxyResourcesTable({
header: () => <span className="p-3">{t("uptime30d")}</span>,
cell: ({ row }) => {
const resourceRow = row.original;
return <UptimeMiniBar resourceId={resourceRow.id} days={30} />;
return (
<UptimeMiniBar resourceId={resourceRow.id} days={30} />
);
}
},
{
@@ -412,7 +455,9 @@ export default function ProxyResourcesTable({
return (
<div className="flex items-center gap-2 min-w-0">
<CopyToClipboard
text={resourceRow.proxyPort?.toString() || ""}
text={
resourceRow.proxyPort?.toString() || ""
}
isLink={false}
/>
</div>
@@ -468,10 +513,15 @@ export default function ProxyResourcesTable({
<ColumnFilterButton
options={[
{ value: "protected", label: t("protected") },
{ value: "not_protected", label: t("notProtected") },
{
value: "not_protected",
label: t("notProtected")
},
{ value: "none", label: t("none") }
]}
selectedValue={searchParams.get("authState") ?? undefined}
selectedValue={
searchParams.get("authState") ?? undefined
}
onValueChange={(value) =>
handleFilterChange("authState", value)
}
@@ -530,27 +580,6 @@ export default function ProxyResourcesTable({
/>
)
},
...(isLabelFeatureEnabled
? [
{
id: "labels",
accessorKey: "labels",
header: () => (
<span className="p-3 text-end w-full inline-block">
{t("labels")}
</span>
),
cell: ({ row }: { row: { original: ResourceRow } }) => {
return (
<ResourceLabelCell
resource={row.original}
orgId={orgId}
/>
);
}
}
]
: []),
{
id: "actions",
enableHiding: false,
@@ -561,7 +590,10 @@ export default function ProxyResourcesTable({
<div className="flex items-center gap-2 justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<Button
variant="ghost"
className="h-8 w-8 p-0"
>
<span className="sr-only">
{t("openMenu")}
</span>
@@ -603,10 +635,23 @@ export default function ProxyResourcesTable({
}
];
const booleanSearchFilterSchema = z
.enum(["true", "false"])
.optional()
.catch(undefined);
if (isLabelFeatureEnabled) {
cols.splice(cols.length - 1, 0, {
id: "labels",
accessorKey: "labels",
header: () => (
<span className="p-3 text-end w-full inline-block">
{t("labels")}
</span>
),
cell: ({ row }: { row: { original: ResourceRow } }) => (
<ResourceLabelCell resource={row.original} orgId={orgId} />
)
});
}
return cols;
}, [isLabelFeatureEnabled, orgId, t, searchParams]);
function handleFilterChange(
column: string,
@@ -623,16 +668,6 @@ export default function ProxyResourcesTable({
});
}
const clearSiteFilter = () => {
handleFilterChange("siteId", undefined);
setSiteFilterOpen(false);
};
const onPickSite = (site: Selectedsite) => {
handleFilterChange("siteId", String(site.siteId));
setSiteFilterOpen(false);
};
function toggleSort(column: string) {
const newSearch = getNextSortOrder(column, searchParams);