mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-06 04:24:14 +00:00
show site resources
This commit is contained in:
miloschwartz
@@ -49,6 +49,7 @@ import { useDebouncedCallback } from "use-debounce";
|
||||
import { ColumnFilterButton } from "./ColumnFilterButton";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
|
||||
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
||||
import {
|
||||
ResourceSitesStatusCell,
|
||||
type ResourceSiteRow
|
||||
@@ -86,28 +87,13 @@ export type InternalResourceRow = {
|
||||
fullDomain?: string | null;
|
||||
};
|
||||
|
||||
function resolveHttpHttpsDisplayPort(
|
||||
mode: "http",
|
||||
httpHttpsPort: number | null
|
||||
): number {
|
||||
if (httpHttpsPort != null) {
|
||||
return httpHttpsPort;
|
||||
}
|
||||
return 80;
|
||||
}
|
||||
|
||||
function formatDestinationDisplay(row: InternalResourceRow): string {
|
||||
const { mode, destination, httpHttpsPort, scheme } = row;
|
||||
if (mode !== "http") {
|
||||
return destination;
|
||||
}
|
||||
const port = resolveHttpHttpsDisplayPort(mode, httpHttpsPort);
|
||||
const downstreamScheme = scheme ?? "http";
|
||||
const hostPart =
|
||||
destination.includes(":") && !destination.startsWith("[")
|
||||
? `[${destination}]`
|
||||
: destination;
|
||||
return `${downstreamScheme}://${hostPart}:${port}`;
|
||||
return formatSiteResourceDestinationDisplay({
|
||||
mode: row.mode,
|
||||
destination: row.destination,
|
||||
httpHttpsPort: row.httpHttpsPort,
|
||||
scheme: row.scheme
|
||||
});
|
||||
}
|
||||
|
||||
function isSafeUrlForLink(href: string): boolean {
|
||||
@@ -609,6 +595,7 @@ export default function ClientResourcesTable({
|
||||
rows={internalResources}
|
||||
tableId="internal-resources"
|
||||
searchPlaceholder={t("resourcesSearch")}
|
||||
searchQuery={searchParams.get("query") ?? ""}
|
||||
onAdd={() => setIsCreateDialogOpen(true)}
|
||||
addButtonText={t("resourceAdd")}
|
||||
onSearch={handleSearchChange}
|
||||
|
||||
@@ -67,7 +67,7 @@ type SiteResource = {
|
||||
enabled: boolean;
|
||||
alias: string | null;
|
||||
aliasAddress: string | null;
|
||||
type: 'site';
|
||||
type: "site";
|
||||
};
|
||||
|
||||
type MemberResourcesPortalProps = {
|
||||
@@ -130,7 +130,9 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
|
||||
resource.whitelist;
|
||||
|
||||
const hasAnyInfo =
|
||||
Boolean(resource.siteName) || Boolean(hasAuthMethods) || !resource.enabled;
|
||||
Boolean(resource.siteName) ||
|
||||
Boolean(hasAuthMethods) ||
|
||||
!resource.enabled;
|
||||
|
||||
if (!hasAnyInfo) return null;
|
||||
|
||||
@@ -353,7 +355,9 @@ export default function MemberResourcesPortal({
|
||||
const [resources, setResources] = useState<Resource[]>([]);
|
||||
const [siteResources, setSiteResources] = useState<SiteResource[]>([]);
|
||||
const [filteredResources, setFilteredResources] = useState<Resource[]>([]);
|
||||
const [filteredSiteResources, setFilteredSiteResources] = useState<SiteResource[]>([]);
|
||||
const [filteredSiteResources, setFilteredSiteResources] = useState<
|
||||
SiteResource[]
|
||||
>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
@@ -381,7 +385,9 @@ export default function MemberResourcesPortal({
|
||||
setResources(response.data.data.resources);
|
||||
setSiteResources(response.data.data.siteResources || []);
|
||||
setFilteredResources(response.data.data.resources);
|
||||
setFilteredSiteResources(response.data.data.siteResources || []);
|
||||
setFilteredSiteResources(
|
||||
response.data.data.siteResources || []
|
||||
);
|
||||
} else {
|
||||
setError("Failed to load resources");
|
||||
}
|
||||
@@ -459,9 +465,10 @@ export default function MemberResourcesPortal({
|
||||
case "domain-asc":
|
||||
case "domain-desc":
|
||||
// Sort by destination for site resources
|
||||
const destCompare = sortBy === "domain-asc"
|
||||
? a.destination.localeCompare(b.destination)
|
||||
: b.destination.localeCompare(a.destination);
|
||||
const destCompare =
|
||||
sortBy === "domain-asc"
|
||||
? a.destination.localeCompare(b.destination)
|
||||
: b.destination.localeCompare(a.destination);
|
||||
return destCompare;
|
||||
case "status-enabled":
|
||||
return b.enabled ? 1 : -1;
|
||||
@@ -487,12 +494,14 @@ export default function MemberResourcesPortal({
|
||||
startIndex + itemsPerPage
|
||||
);
|
||||
const remainingSlots = itemsPerPage - paginatedResources.length;
|
||||
const paginatedSiteResources = remainingSlots > 0
|
||||
? filteredSiteResources.slice(
|
||||
Math.max(0, startIndex - filteredResources.length),
|
||||
Math.max(0, startIndex - filteredResources.length) + remainingSlots
|
||||
)
|
||||
: [];
|
||||
const paginatedSiteResources =
|
||||
remainingSlots > 0
|
||||
? filteredSiteResources.slice(
|
||||
Math.max(0, startIndex - filteredResources.length),
|
||||
Math.max(0, startIndex - filteredResources.length) +
|
||||
remainingSlots
|
||||
)
|
||||
: [];
|
||||
|
||||
const handleOpenResource = (resource: Resource) => {
|
||||
// Open the resource in a new tab
|
||||
@@ -640,7 +649,8 @@ export default function MemberResourcesPortal({
|
||||
</div>
|
||||
|
||||
{/* Resources Content */}
|
||||
{filteredResources.length === 0 && filteredSiteResources.length === 0 ? (
|
||||
{filteredResources.length === 0 &&
|
||||
filteredSiteResources.length === 0 ? (
|
||||
/* Enhanced Empty State */
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-20 text-center">
|
||||
@@ -697,87 +707,96 @@ export default function MemberResourcesPortal({
|
||||
Public Resources
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Web applications and services accessible via browser
|
||||
Web applications and services accessible via
|
||||
browser
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 auto-cols-fr mb-8">
|
||||
{paginatedResources.map((resource) => (
|
||||
<Card key={resource.resourceId}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center min-w-0 flex-1 gap-3 overflow-hidden">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="min-w-0 max-w-full">
|
||||
<CardTitle className="text-lg font-bold text-foreground truncate group-hover:text-primary transition-colors">
|
||||
{resource.name}
|
||||
</CardTitle>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs break-words">
|
||||
{resource.name}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<Card key={resource.resourceId}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center min-w-0 flex-1 gap-3 overflow-hidden">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="min-w-0 max-w-full">
|
||||
<CardTitle className="text-lg font-bold text-foreground truncate group-hover:text-primary transition-colors">
|
||||
{
|
||||
resource.name
|
||||
}
|
||||
</CardTitle>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs break-words">
|
||||
{
|
||||
resource.name
|
||||
}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0">
|
||||
<ResourceInfo
|
||||
resource={resource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<button
|
||||
onClick={() =>
|
||||
handleOpenResource(
|
||||
resource
|
||||
)
|
||||
}
|
||||
className="text-sm text-muted-foreground font-medium text-left truncate flex-1"
|
||||
disabled={!resource.enabled}
|
||||
>
|
||||
{resource.domain.replace(
|
||||
/^https?:\/\//,
|
||||
""
|
||||
)}
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
resource.domain
|
||||
);
|
||||
toast({
|
||||
title: "Copied to clipboard",
|
||||
description:
|
||||
"Resource URL has been copied to your clipboard.",
|
||||
duration: 2000
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0">
|
||||
<ResourceInfo resource={resource} />
|
||||
<div className="p-6 pt-0 mt-auto">
|
||||
<Button
|
||||
onClick={() =>
|
||||
handleOpenResource(resource)
|
||||
}
|
||||
className="w-full h-9 transition-all group-hover:shadow-sm"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!resource.enabled}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5 mr-2" />
|
||||
Open Resource
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<button
|
||||
onClick={() =>
|
||||
handleOpenResource(resource)
|
||||
}
|
||||
className="text-sm text-muted-foreground font-medium text-left truncate flex-1"
|
||||
disabled={!resource.enabled}
|
||||
>
|
||||
{resource.domain.replace(
|
||||
/^https?:\/\//,
|
||||
""
|
||||
)}
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
resource.domain
|
||||
);
|
||||
toast({
|
||||
title: "Copied to clipboard",
|
||||
description:
|
||||
"Resource URL has been copied to your clipboard.",
|
||||
duration: 2000
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 pt-0 mt-auto">
|
||||
<Button
|
||||
onClick={() =>
|
||||
handleOpenResource(resource)
|
||||
}
|
||||
className="w-full h-9 transition-all group-hover:shadow-sm"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!resource.enabled}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5 mr-2" />
|
||||
Open Resource
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -790,7 +809,8 @@ export default function MemberResourcesPortal({
|
||||
Private Resources
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Internal network resources accessible via client
|
||||
Internal network resources accessible via
|
||||
client
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 auto-cols-fr mb-8">
|
||||
@@ -803,12 +823,16 @@ export default function MemberResourcesPortal({
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="min-w-0 max-w-full">
|
||||
<CardTitle className="text-lg font-bold text-foreground truncate group-hover:text-primary transition-colors">
|
||||
{siteResource.name}
|
||||
{
|
||||
siteResource.name
|
||||
}
|
||||
</CardTitle>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs break-words">
|
||||
{siteResource.name}
|
||||
{
|
||||
siteResource.name
|
||||
}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
@@ -818,39 +842,63 @@ export default function MemberResourcesPortal({
|
||||
<div className="flex-shrink-0">
|
||||
<InfoPopup>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="text-xs font-medium mb-1.5">Resource Details</div>
|
||||
<div className="text-xs font-medium mb-1.5">
|
||||
Resource Details
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Mode:</span>
|
||||
<span className="font-medium">
|
||||
Mode:
|
||||
</span>
|
||||
<span className="ml-2 text-muted-foreground capitalize">
|
||||
{siteResource.mode}
|
||||
{
|
||||
siteResource.mode
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
{siteResource.protocol && (
|
||||
<div>
|
||||
<span className="font-medium">Protocol:</span>
|
||||
<span className="font-medium">
|
||||
Protocol:
|
||||
</span>
|
||||
<span className="ml-2 text-muted-foreground uppercase">
|
||||
{siteResource.protocol}
|
||||
{
|
||||
siteResource.protocol
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="font-medium">Destination:</span>
|
||||
<span className="font-medium">
|
||||
Destination:
|
||||
</span>
|
||||
<span className="ml-2 text-muted-foreground">
|
||||
{siteResource.destination}
|
||||
{
|
||||
siteResource.destination
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
{siteResource.alias && (
|
||||
<div>
|
||||
<span className="font-medium">Alias:</span>
|
||||
<span className="font-medium">
|
||||
Alias:
|
||||
</span>
|
||||
<span className="ml-2 text-muted-foreground">
|
||||
{siteResource.alias}
|
||||
{
|
||||
siteResource.alias
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="font-medium">Status:</span>
|
||||
<span className={`ml-2 ${siteResource.enabled ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{siteResource.enabled ? 'Enabled' : 'Disabled'}
|
||||
<span className="font-medium">
|
||||
Status:
|
||||
</span>
|
||||
<span
|
||||
className={`ml-2 ${siteResource.enabled ? "text-green-600" : "text-red-600"}`}
|
||||
>
|
||||
{siteResource.enabled
|
||||
? "Enabled"
|
||||
: "Disabled"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -864,7 +912,9 @@ export default function MemberResourcesPortal({
|
||||
{/* Alias as primary */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="text-base font-semibold text-foreground text-left truncate flex-1">
|
||||
{siteResource.alias}
|
||||
{
|
||||
siteResource.alias
|
||||
}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -887,14 +937,18 @@ export default function MemberResourcesPortal({
|
||||
</div>
|
||||
{/* Destination as secondary */}
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{siteResource.destination}
|
||||
{
|
||||
siteResource.destination
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* Destination as primary when no alias */
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm text-muted-foreground font-medium text-left truncate flex-1">
|
||||
{siteResource.destination}
|
||||
{
|
||||
siteResource.destination
|
||||
}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
480
src/components/SiteResourcesOverview.tsx
Normal file
480
src/components/SiteResourcesOverview.tsx
Normal file
@@ -0,0 +1,480 @@
|
||||
"use client";
|
||||
|
||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { InfoPopup } from "@app/components/ui/info-popup";
|
||||
import { SettingsContainer } from "@app/components/Settings";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
||||
import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
|
||||
import type { ListResourcesResponse } from "@server/routers/resource";
|
||||
import type ResponseT from "@server/types/Response";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { isAxiosError } from "axios";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toUnicode } from "punycode";
|
||||
import { useMemo, useState, type ReactNode } from "react";
|
||||
|
||||
const INITIAL_PAGE_SIZE = 5;
|
||||
const LOAD_MORE_INCREMENT = 20;
|
||||
|
||||
type SiteResourceRow =
|
||||
ListAllSiteResourcesByOrgResponse["siteResources"][number];
|
||||
|
||||
type PublicResourceRow = ListResourcesResponse["resources"][number];
|
||||
|
||||
function isForbidden(e: unknown): boolean {
|
||||
return isAxiosError(e) && e.response?.status === 403;
|
||||
}
|
||||
|
||||
function isSafeUrlForLink(href: string): boolean {
|
||||
try {
|
||||
void new URL(href);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Meta text inside the left column (width comes from the column wrapper). */
|
||||
const OVERVIEW_META_CLASS = "w-full min-w-0 text-muted-foreground text-sm";
|
||||
|
||||
function publicProtocolLabel(r: PublicResourceRow): string {
|
||||
if (r.http) {
|
||||
return r.ssl ? "HTTPS" : "HTTP";
|
||||
}
|
||||
const p = (r.protocol || "").toLowerCase();
|
||||
if (p === "tcp") return "TCP";
|
||||
if (p === "udp") return "UDP";
|
||||
return (r.protocol || "—").toUpperCase();
|
||||
}
|
||||
|
||||
function PublicResourceMeta({ resource: r }: { resource: PublicResourceRow }) {
|
||||
return (
|
||||
<div className={OVERVIEW_META_CLASS}>
|
||||
<div className="truncate font-medium text-foreground">
|
||||
{publicProtocolLabel(r)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateResourceMeta({ row }: { row: SiteResourceRow }) {
|
||||
const t = useTranslations();
|
||||
const modeLabel: Record<SiteResourceRow["mode"], string> = {
|
||||
host: t("editInternalResourceDialogModeHost"),
|
||||
cidr: t("editInternalResourceDialogModeCidr"),
|
||||
http: t("editInternalResourceDialogModeHttp")
|
||||
};
|
||||
const dest = formatSiteResourceDestinationDisplay({
|
||||
mode: row.mode,
|
||||
destination: row.destination,
|
||||
httpHttpsPort: row.destinationPort ?? null,
|
||||
scheme: row.scheme
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className={OVERVIEW_META_CLASS}
|
||||
title={`${modeLabel[row.mode]}\n${dest}`}
|
||||
>
|
||||
<div className="truncate font-medium text-foreground">
|
||||
{modeLabel[row.mode]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PublicAccessMethod({ resource: r }: { resource: PublicResourceRow }) {
|
||||
const t = useTranslations();
|
||||
if (!r.http) {
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={r.proxyPort?.toString() ?? ""}
|
||||
isLink={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (!r.domainId) {
|
||||
return (
|
||||
<InfoPopup
|
||||
info={t("domainNotFoundDescription")}
|
||||
text={t("domainNotFound")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const fullUrl = `${r.ssl ? "https" : "http"}://${toUnicode(r.fullDomain || "")}`;
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={fullUrl}
|
||||
isLink={isSafeUrlForLink(fullUrl)}
|
||||
displayText={fullUrl}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateAccessMethod({ row }: { row: SiteResourceRow }) {
|
||||
if (row.mode === "http" && row.fullDomain) {
|
||||
const url = `${row.ssl ? "https" : "http"}://${toUnicode(row.fullDomain)}`;
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={url}
|
||||
isLink={isSafeUrlForLink(url)}
|
||||
displayText={url}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (row.mode === "host" && row.alias) {
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={row.alias}
|
||||
isLink={false}
|
||||
displayText={row.alias}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const fromAlias = row.alias?.trim();
|
||||
if (fromAlias) {
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={fromAlias}
|
||||
isLink={false}
|
||||
displayText={fromAlias}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const dest = formatSiteResourceDestinationDisplay({
|
||||
mode: row.mode,
|
||||
destination: row.destination,
|
||||
httpHttpsPort: row.destinationPort,
|
||||
scheme: row.scheme
|
||||
});
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={dest}
|
||||
isLink={isSafeUrlForLink(dest)}
|
||||
displayText={dest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type OverviewRow = {
|
||||
key: number;
|
||||
meta: ReactNode;
|
||||
name: string;
|
||||
access: ReactNode;
|
||||
editHref: string;
|
||||
};
|
||||
|
||||
type OverviewColumnProps = {
|
||||
title: string;
|
||||
description: string;
|
||||
viewAllHref: string;
|
||||
viewAllLabel: string;
|
||||
emptyLabel: string;
|
||||
isForbidden: boolean;
|
||||
isFetching: boolean;
|
||||
rows: OverviewRow[];
|
||||
canShowMore: boolean;
|
||||
onShowMore: () => void;
|
||||
};
|
||||
|
||||
function OverviewColumn({
|
||||
title,
|
||||
description,
|
||||
viewAllHref,
|
||||
viewAllLabel,
|
||||
emptyLabel,
|
||||
isForbidden,
|
||||
isFetching,
|
||||
rows,
|
||||
canShowMore,
|
||||
onShowMore
|
||||
}: OverviewColumnProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const header = (
|
||||
<div className="border-b px-5 py-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="text-lg space-y-0.5 pb-6">
|
||||
<h2 className="text-1xl font-bold tracking-tight flex items-center gap-2">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href={viewAllHref}
|
||||
className="shrink-0 text-muted-foreground text-sm hover:underline"
|
||||
>
|
||||
{viewAllLabel}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isForbidden) {
|
||||
return (
|
||||
<div className="min-w-0 overflow-hidden rounded-lg border h-full flex flex-col">
|
||||
{header}
|
||||
<p className="px-5 py-3 text-sm text-muted-foreground">
|
||||
{t("siteResourcesPermissionDenied")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-w-0 overflow-hidden rounded-lg border h-full flex flex-col">
|
||||
{header}
|
||||
{rows.length === 0 ? (
|
||||
<div className="flex flex-1 items-center justify-center px-5 py-3">
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
{emptyLabel}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative flex-1">
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-y-0 left-25 border-l border-border"
|
||||
/>
|
||||
<ul className="relative divide-y">
|
||||
{rows.map((row) => (
|
||||
<li key={row.key} className="flex">
|
||||
<div className="w-25 min-w-0 shrink-0 px-5 py-3">
|
||||
{row.meta}
|
||||
</div>
|
||||
<div className="min-w-0 min-h-0 flex-1 px-5 py-3">
|
||||
<div className="truncate text-sm font-medium">
|
||||
{row.name}
|
||||
</div>
|
||||
<div className="mt-1 min-w-0 break-words text-sm text-muted-foreground">
|
||||
{row.access}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center px-5 py-3">
|
||||
<Button
|
||||
asChild
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<Link href={row.editHref}>
|
||||
{t("edit")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{canShowMore ? (
|
||||
<div className="border-t px-5 py-3 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onShowMore}
|
||||
disabled={isFetching}
|
||||
className="text-sm hover:underline text-muted-foreground cursor-pointer"
|
||||
>
|
||||
{isFetching
|
||||
? t("loading")
|
||||
: t("siteResourcesShowMore")}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SiteResourcesOverviewProps = {
|
||||
siteId: number;
|
||||
initialPublicData: ListResourcesResponse | null;
|
||||
initialPrivateData: ListAllSiteResourcesByOrgResponse | null;
|
||||
initialPublicForbidden: boolean;
|
||||
initialPrivateForbidden: boolean;
|
||||
/** When not under `/[orgId]/...` routes, pass org id explicitly (e.g. credenza on sites list). */
|
||||
orgIdOverride?: string;
|
||||
};
|
||||
|
||||
export default function SiteResourcesOverview({
|
||||
siteId,
|
||||
initialPublicData,
|
||||
initialPrivateData,
|
||||
initialPublicForbidden,
|
||||
initialPrivateForbidden,
|
||||
orgIdOverride
|
||||
}: SiteResourcesOverviewProps) {
|
||||
const t = useTranslations();
|
||||
const params = useParams<{ orgId: string }>();
|
||||
const orgId = orgIdOverride ?? params.orgId;
|
||||
const { env } = useEnvContext();
|
||||
const api = useMemo(() => createApiClient({ env }), [env]);
|
||||
|
||||
const enabled = Boolean(orgId && siteId);
|
||||
|
||||
const [publicPageSize, setPublicPageSize] = useState(INITIAL_PAGE_SIZE);
|
||||
const [privatePageSize, setPrivatePageSize] = useState(INITIAL_PAGE_SIZE);
|
||||
|
||||
const publicQuery = useQuery({
|
||||
queryKey: [
|
||||
"siteResourcesOverview",
|
||||
"public",
|
||||
orgId,
|
||||
siteId,
|
||||
publicPageSize
|
||||
] as const,
|
||||
enabled: enabled && !initialPublicForbidden,
|
||||
initialData: initialPublicData ?? undefined,
|
||||
queryFn: async (): Promise<ListResourcesResponse> => {
|
||||
const sp = new URLSearchParams({
|
||||
page: "1",
|
||||
pageSize: String(publicPageSize),
|
||||
siteId: String(siteId)
|
||||
});
|
||||
const res = await api.get(
|
||||
`/org/${orgId}/resources?${sp.toString()}`
|
||||
);
|
||||
const envelope = res.data as ResponseT<ListResourcesResponse>;
|
||||
const payload = envelope.data;
|
||||
if (!payload) {
|
||||
throw new Error("No data");
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
});
|
||||
|
||||
const privateQuery = useQuery({
|
||||
queryKey: [
|
||||
"siteResourcesOverview",
|
||||
"private",
|
||||
orgId,
|
||||
siteId,
|
||||
privatePageSize
|
||||
] as const,
|
||||
enabled: enabled && !initialPrivateForbidden,
|
||||
initialData: initialPrivateData ?? undefined,
|
||||
queryFn: async (): Promise<ListAllSiteResourcesByOrgResponse> => {
|
||||
const sp = new URLSearchParams({
|
||||
page: "1",
|
||||
pageSize: String(privatePageSize),
|
||||
siteId: String(siteId)
|
||||
});
|
||||
const res = await api.get(
|
||||
`/org/${orgId}/site-resources?${sp.toString()}`
|
||||
);
|
||||
const envelope =
|
||||
res.data as ResponseT<ListAllSiteResourcesByOrgResponse>;
|
||||
const payload = envelope.data;
|
||||
if (!payload) {
|
||||
throw new Error("No data");
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
});
|
||||
|
||||
const publicList = publicQuery.data?.resources ?? [];
|
||||
const publicTotal = publicQuery.data?.pagination.total ?? 0;
|
||||
const privateList = privateQuery.data?.siteResources ?? [];
|
||||
const privateTotal = privateQuery.data?.pagination.total ?? 0;
|
||||
|
||||
const publicForbidden =
|
||||
initialPublicForbidden ||
|
||||
(publicQuery.isError && isForbidden(publicQuery.error));
|
||||
const privateForbidden =
|
||||
initialPrivateForbidden ||
|
||||
(privateQuery.isError && isForbidden(privateQuery.error));
|
||||
|
||||
const showEmptyPlaceholder =
|
||||
!publicForbidden &&
|
||||
!privateForbidden &&
|
||||
publicList.length === 0 &&
|
||||
privateList.length === 0;
|
||||
|
||||
const publicViewAllHref = `/${orgId}/settings/resources/proxy?siteId=${siteId}`;
|
||||
const privateViewAllHref = `/${orgId}/settings/resources/client?siteId=${siteId}`;
|
||||
|
||||
const publicRows = publicList.map((r) => ({
|
||||
key: r.resourceId,
|
||||
meta: <PublicResourceMeta resource={r} />,
|
||||
name: r.name,
|
||||
access: <PublicAccessMethod resource={r} />,
|
||||
editHref: `/${orgId}/settings/resources/proxy/${r.niceId}`
|
||||
}));
|
||||
|
||||
const privateRows = privateList.map((row) => {
|
||||
const qs = new URLSearchParams({
|
||||
siteId: String(siteId),
|
||||
query: row.niceId
|
||||
});
|
||||
return {
|
||||
key: row.siteResourceId,
|
||||
meta: <PrivateResourceMeta row={row} />,
|
||||
name: row.name,
|
||||
access: <PrivateAccessMethod row={row} />,
|
||||
editHref: `/${orgId}/settings/resources/client?${qs.toString()}`
|
||||
};
|
||||
});
|
||||
|
||||
if (showEmptyPlaceholder) {
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<p className="pt-2 text-sm text-muted-foreground">
|
||||
{t("siteResourcesNoneOnSite")}
|
||||
</p>
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
|
||||
/** Left column = whichever side has a greater total; ties default to public first. */
|
||||
const publicOnLeft = publicTotal >= privateTotal;
|
||||
|
||||
const publicColumn = (
|
||||
<OverviewColumn
|
||||
key="public"
|
||||
title={t("siteResourcesSectionPublic")}
|
||||
description={t("siteResourcesSectionPublicDescription")}
|
||||
viewAllHref={publicViewAllHref}
|
||||
viewAllLabel={t("siteResourcesViewAllPublic")}
|
||||
emptyLabel={t("siteResourcesEmptyPublic")}
|
||||
isForbidden={publicForbidden}
|
||||
isFetching={publicQuery.isFetching}
|
||||
rows={publicRows}
|
||||
canShowMore={publicList.length < publicTotal}
|
||||
onShowMore={() => setPublicPageSize((n) => n + LOAD_MORE_INCREMENT)}
|
||||
/>
|
||||
);
|
||||
|
||||
const privateColumn = (
|
||||
<OverviewColumn
|
||||
key="private"
|
||||
title={t("siteResourcesSectionPrivate")}
|
||||
description={t("siteResourcesSectionPrivateDescription")}
|
||||
viewAllHref={privateViewAllHref}
|
||||
viewAllLabel={t("siteResourcesViewAllPrivate")}
|
||||
emptyLabel={t("siteResourcesEmptyPrivate")}
|
||||
isForbidden={privateForbidden}
|
||||
isFetching={privateQuery.isFetching}
|
||||
rows={privateRows}
|
||||
canShowMore={privateList.length < privateTotal}
|
||||
onShowMore={() =>
|
||||
setPrivatePageSize((n) => n + LOAD_MORE_INCREMENT)
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{publicOnLeft
|
||||
? [publicColumn, privateColumn]
|
||||
: [privateColumn, publicColumn]}
|
||||
</div>
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
ArrowRight,
|
||||
ArrowUp10Icon,
|
||||
ArrowUpRight,
|
||||
ChevronDown,
|
||||
ChevronsUpDownIcon,
|
||||
MoreHorizontal
|
||||
} from "lucide-react";
|
||||
@@ -34,6 +35,16 @@ import { useState, useTransition, useEffect } from "react";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import z from "zod";
|
||||
import { ColumnFilterButton } from "./ColumnFilterButton";
|
||||
import SiteResourcesOverview from "@app/components/SiteResourcesOverview";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import {
|
||||
ControlledDataTable,
|
||||
type ExtendedColumnDef
|
||||
@@ -54,6 +65,7 @@ export type SiteRow = {
|
||||
exitNodeName?: string;
|
||||
exitNodeEndpoint?: string;
|
||||
remoteExitNodeId?: string;
|
||||
resourceCount: number;
|
||||
};
|
||||
|
||||
type SitesTableProps = {
|
||||
@@ -79,6 +91,8 @@ export default function SitesTable({
|
||||
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
|
||||
const [resourcesDialogSite, setResourcesDialogSite] =
|
||||
useState<SiteRow | null>(null);
|
||||
const [isRefreshing, startTransition] = useTransition();
|
||||
const [isNavigatingToAddPage, startNavigation] = useTransition();
|
||||
|
||||
@@ -293,6 +307,29 @@ export default function SitesTable({
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "resources",
|
||||
accessorKey: "resourceCount",
|
||||
friendlyName: t("resources"),
|
||||
header: () => <span className="p-3">{t("resources")}</span>,
|
||||
cell: ({ row }) => {
|
||||
const siteRow = row.original;
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setResourcesDialogSite(siteRow)}
|
||||
className="flex h-8 items-center gap-2 px-0 font-normal"
|
||||
>
|
||||
<span className="text-sm tabular-nums">
|
||||
{siteRow.resourceCount} {t("resources")}
|
||||
</span>
|
||||
<ChevronDown className="h-3 w-3 shrink-0" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
friendlyName: t("type"),
|
||||
@@ -503,6 +540,43 @@ export default function SitesTable({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Credenza
|
||||
open={Boolean(resourcesDialogSite)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setResourcesDialogSite(null);
|
||||
}}
|
||||
>
|
||||
<CredenzaContent className="md:max-w-7xl">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>{t("siteResourcesTab")}</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{t("siteResourcesDialogDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
{resourcesDialogSite != null && (
|
||||
<SiteResourcesOverview
|
||||
orgIdOverride={orgId}
|
||||
siteId={resourcesDialogSite.id}
|
||||
initialPublicData={null}
|
||||
initialPrivateData={null}
|
||||
initialPublicForbidden={false}
|
||||
initialPrivateForbidden={false}
|
||||
/>
|
||||
)}
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setResourcesDialogSite(null)}
|
||||
>
|
||||
{t("close")}
|
||||
</Button>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
|
||||
{selectedSite && (
|
||||
<ConfirmDeleteDialog
|
||||
open={isDeleteModalOpen}
|
||||
|
||||
Reference in New Issue
Block a user