calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-07-30 17:25:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
miloschwartz
2026-07-29 17:27:22 -04:00
parent ef3f71e9b5 1882d4df88
commit 864a6a39cd
29 changed files with 1122 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[orgId]/settings/resources/private/page.tsx
+39
View File
@@ -6,6 +6,8 @@ import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { getCachedOrg } from "@app/lib/api/getCachedOrg";
import OrgProvider from "@app/providers/OrgProvider";
import { build } from "@server/build";
import type { GetBatchedCertificateResponse } from "@server/routers/certificates/types";
import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
import type { AxiosResponse } from "axios";
import type { Metadata } from "next";
@@ -99,6 +101,42 @@ export default async function ClientResourcesPage(
};
}
);
// Prefetched in one batched call so the table doesn't fire a separate
// certificate request per visible row once it mounts on the client.
const certDomains = Array.from(
new Set(
internalResourceRows
.filter(
(r) =>
r.mode === "http" &&
!r.alias &&
r.ssl &&
r.domainId &&
r.fullDomain
)
.map((r) => r.fullDomain as string)
)
);
let initialCertificates: GetBatchedCertificateResponse | undefined;
if (build !== "oss" && certDomains.length > 0) {
try {
const certSearchParams = new URLSearchParams(
certDomains.map((domain) => ["domains", domain])
);
const certRes = await internal.get<
AxiosResponse<GetBatchedCertificateResponse>
>(
`/org/${params.orgId}/batched-certificates?${certSearchParams.toString()}`,
await authCookieHeader()
);
initialCertificates = certRes.data.data;
} catch {
// leave undefined so each row falls back to fetching its own
}
}
return (
<>
<SettingsSectionTitle
@@ -117,6 +155,7 @@ export default async function ClientResourcesPage(
pageIndex: pagination.page - 1,
pageSize: pagination.pageSize
}}
initialCertificates={initialCertificates}
/>
</OrgProvider>
</>
src/app/[orgId]/settings/resources/public/page.tsx
+32 -24
View File
@@ -5,6 +5,8 @@ import PublicResourcesBanner from "@app/components/PublicResourcesBanner";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import OrgProvider from "@app/providers/OrgProvider";
import { build } from "@server/build";
import type { GetBatchedCertificateResponse } from "@server/routers/certificates/types";
import type { GetOrgResponse } from "@server/routers/org";
import type { ListResourcesResponse } from "@server/routers/resource";
import { GetSiteResponse } from "@server/routers/site/getSite";
@@ -60,29 +62,7 @@ export default async function ProxyResourcesPage(
searchParams.get("siteId") ?? undefined
);
let initialFilterSite: {
siteId: number;
name: string;
type: string;
} | null = null;
if (siteIdParam) {
try {
const siteRes = await internal.get(
`/site/${siteIdParam}`,
await authCookieHeader()
);
const s = (siteRes.data as ResponseT<GetSiteResponse>).data;
if (s && s.orgId === params.orgId) {
initialFilterSite = {
siteId: s.siteId,
name: s.name,
type: s.type
};
}
} catch {
// leave null
}
}
let org = null;
try {
@@ -140,6 +120,34 @@ export default async function ProxyResourcesPage(
health: (resource.health as ResourceRow["health"]) ?? undefined
};
});
// Prefetched in one batched call so the table doesn't fire a separate
// certificate request per visible row once it mounts on the client.
const certDomains = Array.from(
new Set(
resourceRows
.filter((r) => r.ssl && r.fullDomain)
.map((r) => r.fullDomain as string)
)
);
let initialCertificates: GetBatchedCertificateResponse | undefined;
if (build !== "oss" && certDomains.length > 0) {
try {
const certSearchParams = new URLSearchParams(
certDomains.map((domain) => ["domains", domain])
);
const certRes = await internal.get<
AxiosResponse<GetBatchedCertificateResponse>
>(
`/org/${params.orgId}/batched-certificates?${certSearchParams.toString()}`,
await authCookieHeader()
);
initialCertificates = certRes.data.data;
} catch {
// leave undefined so each row falls back to fetching its own
}
}
return (
<>
<SettingsSectionTitle
@@ -158,7 +166,7 @@ export default async function ProxyResourcesPage(
pageIndex: pagination.page - 1,
pageSize: pagination.pageSize
}}
initialFilterSite={initialFilterSite}
initialCertificates={initialCertificates}
/>
</OrgProvider>
</>
src/components/AuthPageSettings.tsx
-1
View File
@@ -412,7 +412,6 @@ function AuthPageSettings({
fullDomain={
loginPage.fullDomain
}
autoFetch={true}
showLabel={true}
polling={true}
/>
src/components/CertificateStatus.tsx
+3 -6
View File
@@ -5,6 +5,7 @@ import { FileBadge, RotateCw } from "lucide-react";
import { useCertificate } from "@app/hooks/useCertificate";
import type { GetCertificateResponse } from "@server/routers/certificates/types";
import { useTranslations } from "next-intl";
import { durationToMs } from "@app/lib/durationToMs";
export type CertificateStatusContentProps = {
cert: GetCertificateResponse | null;
@@ -32,8 +33,7 @@ export function CertificateStatusContent({
const labelClass =
"inline-flex shrink-0 items-center self-center text-sm font-medium leading-normal";
const valueClass =
"inline-flex items-center gap-2 text-sm leading-normal";
const valueClass = "inline-flex items-center gap-2 text-sm leading-normal";
const handleRefresh = async () => {
await refreshCert();
@@ -187,7 +187,6 @@ type CertificateStatusProps = {
orgId: string;
domainId: string;
fullDomain: string;
autoFetch?: boolean;
showLabel?: boolean;
className?: string;
onRefresh?: () => void;
@@ -199,18 +198,16 @@ export default function CertificateStatus({
orgId,
domainId,
fullDomain,
autoFetch = true,
showLabel = true,
className = "",
onRefresh,
polling = false,
pollingInterval = 5000
pollingInterval = durationToMs(5, "seconds")
}: CertificateStatusProps) {
const hook = useCertificate({
orgId,
domainId,
fullDomain,
autoFetch,
polling,
pollingInterval
});
src/components/HealthChecksTable.tsx
+26 -4
View File
@@ -1,6 +1,6 @@
"use client";
import UptimeMiniBar from "@app/components/UptimeMiniBar";
import { UptimeMiniBar } from "@app/components/UptimeMiniBar";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import HealthCheckCredenza, {
@@ -51,6 +51,8 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import { cn } from "@app/lib/cn";
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
import { orgQueries } from "@app/lib/queries";
import { useQuery } from "@tanstack/react-query";
type StandaloneHealthChecksTableProps = {
orgId: string;
@@ -81,6 +83,8 @@ function formatTarget(row: HealthCheckRow): string {
return `${scheme}://${host}${port}${path}`;
}
const HEALTH_CHECK_STATUS_HISTORY_DAYS = 30;
export default function HealthChecksTable({
orgId,
healthChecks,
@@ -157,6 +161,20 @@ export default function HealthChecksTable({
const rows = healthChecks;
const healthCheckIds = useMemo(
() => rows.map((r) => r.targetHealthCheckId),
[rows]
);
const statusHistoryQuery = useQuery({
...orgQueries.batchedHealthCheckStatusHistory({
orgId,
healthCheckIds,
days: HEALTH_CHECK_STATUS_HISTORY_DAYS
}),
enabled: healthCheckIds.length > 0
});
function refreshList() {
startRefresh(() => {
router.refresh();
@@ -547,9 +565,13 @@ export default function HealthChecksTable({
cell: ({ row }) => {
return (
<UptimeMiniBar
orgId={orgId}
healthCheckId={row.original.targetHealthCheckId}
days={30}
isLoading={statusHistoryQuery.isLoading}
data={
statusHistoryQuery.data?.[
row.original.targetHealthCheckId
]
}
days={HEALTH_CHECK_STATUS_HISTORY_DAYS}
/>
);
}
src/components/PrivateResourcesTable.tsx
+9 -2
View File
@@ -37,6 +37,7 @@ import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHr
import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
import { build } from "@server/build";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import type { GetBatchedCertificateResponse } from "@server/routers/certificates/types";
import { UpdateSiteResourceResponse } from "@server/routers/siteResource";
import type { PaginationState } from "@tanstack/react-table";
import { AxiosResponse } from "axios";
@@ -136,13 +137,16 @@ type ClientResourcesTableProps = {
orgId: string;
pagination: PaginationState;
rowCount: number;
/** Certificates prefetched on the server, keyed by full domain. */
initialCertificates?: GetBatchedCertificateResponse;
};
export default function PrivateResourcesTable({
internalResources,
orgId,
pagination,
rowCount
rowCount,
initialCertificates
}: ClientResourcesTableProps) {
const router = useRouter();
const {
@@ -432,6 +436,9 @@ export default function PrivateResourcesTable({
orgId={resourceRow.orgId}
domainId={domainId}
fullDomain={fullDomain}
initialCertValue={
initialCertificates?.[fullDomain]
}
/>
) : null}
<div className="">
@@ -585,7 +592,7 @@ export default function PrivateResourcesTable({
];
return cols;
}, [orgId, t, searchParams]);
}, [orgId, t, searchParams, initialCertificates]);
function handleFilterChange(
column: string,
src/components/PublicResourcesTable.tsx
+43 -24
View File
@@ -7,8 +7,7 @@ import {
ResourceSitesStatusCell,
type ResourceSiteRow
} from "@app/components/ResourceSitesStatusCell";
import { Selectedsite, SitesSelector } from "@app/components/site-selector";
import { Badge } from "@app/components/ui/badge";
import { Selectedsite } from "@app/components/site-selector";
import { Button } from "@app/components/ui/button";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
@@ -18,23 +17,19 @@ import {
DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu";
import { InfoPopup } from "@app/components/ui/info-popup";
import {
Popover,
PopoverContent,
PopoverTrigger
} from "@app/components/ui/popover";
import { Switch } from "@app/components/ui/switch";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useNavigationContext } from "@app/hooks/useNavigationContext";
import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
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 { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
import { orgQueries } from "@app/lib/queries";
import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
import { build } from "@server/build";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import { UpdateResourceResponse } from "@server/routers/resource";
import type { GetBatchedCertificateResponse } from "@server/routers/certificates/types";
import { useQuery } from "@tanstack/react-query";
import type { PaginationState } from "@tanstack/react-table";
import { AxiosResponse } from "axios";
import {
@@ -45,9 +40,7 @@ import {
ChevronDown,
ChevronsUpDownIcon,
Clock,
Funnel,
MoreHorizontal,
PlusIcon,
ShieldCheck,
ShieldOff,
XCircle
@@ -57,7 +50,6 @@ import Link from "next/link";
import { useRouter } from "next/navigation";
import {
startTransition,
useEffect,
useMemo,
useOptimistic,
useRef,
@@ -68,15 +60,11 @@ import {
import { useDebouncedCallback } from "use-debounce";
import z from "zod";
import { ColumnFilterButton } from "./ColumnFilterButton";
import { ControlledDataTable } from "./ui/controlled-data-table";
import UptimeMiniBar from "./UptimeMiniBar";
import { type SelectedLabel } from "./labels-selector";
import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
import { useLocalLabels } from "@app/hooks/useLocalLabels";
import { LabelsTableCell } from "./LabelsTableCell";
import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
import { refresh } from "next/cache";
import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
import { ControlledDataTable } from "./ui/controlled-data-table";
import { UptimeMiniBar } from "./UptimeMiniBar";
export type TargetHealth = {
targetId: number;
@@ -120,6 +108,8 @@ type ProxyResourcesTableProps = {
pagination: PaginationState;
rowCount: number;
initialFilterSite?: Selectedsite | null;
/** Certificates prefetched on the server, keyed by full domain. */
initialCertificates?: GetBatchedCertificateResponse;
};
const booleanSearchFilterSchema = z
@@ -127,12 +117,14 @@ const booleanSearchFilterSchema = z
.optional()
.catch(undefined);
const RESOURCE_STATUS_HISTORY_DAYS = 30;
export default function PublicResourcesTable({
resources,
orgId,
pagination,
rowCount,
initialFilterSite = null
initialCertificates
}: ProxyResourcesTableProps) {
const router = useRouter();
const {
@@ -150,11 +142,24 @@ export default function PublicResourcesTable({
const [selectedResource, setSelectedResource] =
useState<ResourceRow | null>();
const { isPaidUser } = usePaidStatus();
const [isRefreshing, startTransition] = useTransition();
const [isNavigatingToAddPage, startNavigation] = useTransition();
// Only http resources show an uptime bar, so don't ask for the others
const statusHistoryResourceIds = useMemo(
() => resources.filter((r) => r.mode === "http").map((r) => r.id),
[resources]
);
const statusHistoryQuery = useQuery({
...orgQueries.batchedResourceStatusHistory({
orgId,
resourceIds: statusHistoryResourceIds,
days: RESOURCE_STATUS_HISTORY_DAYS
}),
enabled: statusHistoryResourceIds.length > 0
});
const refreshData = () => {
startTransition(() => {
try {
@@ -407,7 +412,11 @@ export default function PublicResourcesTable({
return <span>-</span>;
}
return (
<UptimeMiniBar resourceId={resourceRow.id} days={30} />
<UptimeMiniBar
isLoading={statusHistoryQuery.isLoading}
data={statusHistoryQuery.data?.[resourceRow.id]}
days={RESOURCE_STATUS_HISTORY_DAYS}
/>
);
}
},
@@ -461,6 +470,9 @@ export default function PublicResourcesTable({
orgId={resourceRow.orgId}
domainId={domainId}
fullDomain={certHostname}
initialCertValue={
initialCertificates?.[certHostname]
}
/>
) : null}
<div className="">
@@ -625,7 +637,14 @@ export default function PublicResourcesTable({
];
return cols;
}, [orgId, t, searchParams]);
}, [
orgId,
t,
searchParams,
statusHistoryQuery.data,
statusHistoryQuery.isLoading,
initialCertificates
]);
function handleFilterChange(
column: string,
src/components/ResourceAccessCertIndicator.tsx
+11 -4
View File
@@ -7,6 +7,7 @@ import {
PopoverContent
} from "@app/components/ui/popover";
import { useCertificate } from "@app/hooks/useCertificate";
import type { GetCertificateResponse } from "@server/routers/certificates/types";
import { cn } from "@app/lib/cn";
import { FileBadge } from "lucide-react";
import { useTranslations } from "next-intl";
@@ -17,11 +18,13 @@ import {
useState,
type ReactNode
} from "react";
import { durationToMs } from "@app/lib/durationToMs";
type ResourceAccessCertIndicatorProps = {
orgId: string;
domainId: string;
fullDomain: string;
initialCertValue?: GetCertificateResponse | null;
};
function getStatusColor(status: string) {
@@ -43,7 +46,8 @@ function getStatusColor(status: string) {
export function ResourceAccessCertIndicator({
orgId,
domainId,
fullDomain
fullDomain,
initialCertValue
}: ResourceAccessCertIndicatorProps) {
const t = useTranslations();
const [open, setOpen] = useState(false);
@@ -53,16 +57,19 @@ export function ResourceAccessCertIndicator({
orgId,
domainId,
fullDomain,
autoFetch: true,
initialCertValue,
polling: open,
pollingInterval: 5000
pollingInterval: durationToMs(5, "seconds")
});
const { cert, certLoading, certError, refreshing, fetchCert } = certificate;
// `polling` only schedules on predefined intervals (1 second),
// so the first request would be a full interval away if open = true (which set polling = true).
// So we fetch immediately so the popover opens with fresh data.
useEffect(() => {
if (!open) return;
void fetchCert(false);
void fetchCert();
}, [open, fetchCert]);
const clearCloseTimer = useCallback(() => {
src/components/ResourceInfoBox.tsx
-1
View File
@@ -180,7 +180,6 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
orgId={resource.orgId}
domainId={resource.domainId!}
fullDomain={resource.fullDomain!}
autoFetch={true}
showLabel={false}
polling={true}
/>
src/components/SiteResourceInfoBox.tsx
-1
View File
@@ -182,7 +182,6 @@ export function SiteResourceInfoSections({
orgId={siteResource.orgId}
domainId={siteResource.domainId!}
fullDomain={siteResource.fullDomain!}
autoFetch={true}
showLabel={false}
polling={true}
/>
src/components/SitesTable.tsx
+29 -14
View File
@@ -1,7 +1,7 @@
"use client";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import UptimeMiniBar from "@app/components/UptimeMiniBar";
import { UptimeMiniBar } from "@app/components/UptimeMiniBar";
import {
Credenza,
@@ -52,12 +52,12 @@ import {
} from "./ui/controlled-data-table";
import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { durationToMs } from "@app/lib/durationToMs";
import { orgQueries, productUpdatesQueries } from "@app/lib/queries";
import { useQuery } from "@tanstack/react-query";
import semver from "semver";
import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
import { LabelsTableCell } from "./LabelsTableCell";
import { useQuery } from "@tanstack/react-query";
import { productUpdatesQueries } from "@app/lib/queries";
import semver from "semver";
export type SiteRow = {
id: number;
@@ -89,6 +89,8 @@ type SitesTableProps = {
rowCount: number;
};
const SITE_STATUS_HISTORY_DAYS = 30;
export default function SitesTable({
sites,
orgId,
@@ -112,7 +114,16 @@ export default function SitesTable({
const [isRefreshing, startTransition] = useTransition();
const [isNavigatingToAddPage, startNavigation] = useTransition();
const { isPaidUser } = usePaidStatus();
const siteIds = sites.map((s) => s.id);
const statusHistoryQuery = useQuery({
...orgQueries.batchedSiteStatusHistory({
orgId,
siteIds,
days: SITE_STATUS_HISTORY_DAYS
}),
enabled: siteIds.length > 0
});
const api = createApiClient(useEnvContext());
const t = useTranslations();
@@ -296,7 +307,14 @@ export default function SitesTable({
if (originalRow.type == "local") {
return <span>-</span>;
}
return <UptimeMiniBar siteId={originalRow.id} days={30} />;
const data = statusHistoryQuery.data?.[row.original.id];
return (
<UptimeMiniBar
isLoading={statusHistoryQuery.isLoading}
data={data}
days={SITE_STATUS_HISTORY_DAYS}
/>
);
}
},
{
@@ -359,14 +377,11 @@ export default function SitesTable({
cell: ({ row }) => {
const originalRow = row.original;
let updateAvailable = Boolean(
const updateAvailable = Boolean(
latestNewtVersion &&
originalRow.newtVersion &&
semver.valid(originalRow.newtVersion) &&
semver.lt(
originalRow.newtVersion,
latestNewtVersion
)
originalRow.newtVersion &&
semver.valid(originalRow.newtVersion) &&
semver.lt(originalRow.newtVersion, latestNewtVersion)
);
if (originalRow.type === "newt") {
src/components/UptimeMiniBar.tsx
+26 -19
View File
@@ -1,15 +1,14 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { orgQueries } from "@app/lib/queries";
import {
Tooltip,
TooltipContent,
TooltipTrigger
} from "@app/components/ui/tooltip";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient } from "@app/lib/api";
import { cn } from "@app/lib/cn";
import { orgQueries } from "@app/lib/queries";
import type { StatusHistoryResponse } from "@server/lib/statusHistory";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
function formatDuration(seconds: number): string {
@@ -46,21 +45,16 @@ type UptimeMiniBarProps = {
days?: number;
};
export default function UptimeMiniBar({
export default function UptimeMiniBarWrapper({
orgId,
siteId,
resourceId,
healthCheckId,
days = 30
}: UptimeMiniBarProps) {
const t = useTranslations();
const api = createApiClient(useEnvContext());
const siteQuery = useQuery({
...orgQueries.siteStatusHistory({ siteId: siteId ?? 0, days }),
enabled: siteId != null,
meta: { api },
staleTime: 5 * 60 * 1000
enabled: siteId != null
});
const hcQuery = useQuery({
@@ -69,16 +63,12 @@ export default function UptimeMiniBar({
healthCheckId: healthCheckId ?? 0,
days
}),
enabled: healthCheckId != null && siteId == null && resourceId == null,
meta: { api },
staleTime: 5 * 60 * 1000
enabled: healthCheckId != null && siteId == null && resourceId == null
});
const resourceQuery = useQuery({
...orgQueries.resourceStatusHistory({ resourceId, days }),
enabled: resourceId != null && siteId == null && healthCheckId == null,
meta: { api },
staleTime: 5 * 60 * 1000
enabled: resourceId != null && siteId == null && healthCheckId == null
});
const { data, isLoading } =
@@ -88,6 +78,22 @@ export default function UptimeMiniBar({
? resourceQuery
: hcQuery;
return <UptimeMiniBar data={data} isLoading={isLoading} days={days} />;
}
type UptimeMiniBarUIProps = {
data?: StatusHistoryResponse;
isLoading?: boolean;
days?: number;
};
export function UptimeMiniBar({
data,
isLoading,
days = 30
}: UptimeMiniBarUIProps) {
const t = useTranslations();
if (isLoading) {
return (
<div className="flex items-center gap-2">
@@ -138,7 +144,8 @@ export default function UptimeMiniBar({
{formatDate(day.date)}
</div>
<div className="text-xs text-primary-foreground/80">
{day.status === "no_data" || day.status === "unknown"
{day.status === "no_data" ||
day.status === "unknown"
? t("uptimeNoData")
: `${day.uptimePercent.toFixed(1)}% ${t("uptimeSuffix")}`}
</div>
@@ -159,4 +166,4 @@ export default function UptimeMiniBar({
</span>
</div>
);
}
}
src/hooks/useCertificate.ts
+80 -96
View File
@@ -1,18 +1,20 @@
"use client";
import { useState, useCallback, useEffect } from "react";
import { AxiosResponse } from "axios";
import { useCallback } from "react";
import { GetCertificateResponse } from "@server/routers/certificates/types";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { domainQueries } from "@app/lib/queries";
import { durationToMs } from "@app/lib/durationToMs";
type UseCertificateProps = {
orgId: string;
domainId: string;
fullDomain: string;
autoFetch?: boolean;
polling?: boolean;
pollingInterval?: number;
initialCertValue?: GetCertificateResponse | null;
};
type UseCertificateReturn = {
@@ -20,124 +22,106 @@ type UseCertificateReturn = {
certLoading: boolean;
certError: string | null;
refreshing: boolean;
fetchCert: (showLoading?: boolean) => Promise<void>;
fetchCert: () => Promise<void>;
refreshCert: () => Promise<void>;
clearCert: () => void;
// clearCert: () => void;
};
const POLL_JITTER_MS = durationToMs(1, "seconds");
/** A valid cert isn't going anywhere soon, so check on it far less often. */
const VALID_POLL_INTERVAL_MS = durationToMs(30, "seconds");
export function useCertificate({
orgId,
domainId,
fullDomain,
autoFetch = true,
initialCertValue,
polling = false,
pollingInterval = 5000
pollingInterval = durationToMs(5, "seconds")
}: UseCertificateProps): UseCertificateReturn {
const api = createApiClient(useEnvContext());
const queryClient = useQueryClient();
const [cert, setCert] = useState<GetCertificateResponse | null>(null);
const [certLoading, setCertLoading] = useState(false);
const [certError, setCertError] = useState<string | null>(null);
const [refreshing, setRefreshing] = useState(false);
const certQuery = domainQueries.getCertificate({
orgId,
domainId,
domain: fullDomain
});
const fetchCert = useCallback(
async (showLoading = true) => {
if (!orgId || !domainId || !fullDomain) return;
if (showLoading) {
setCertLoading(true);
}
try {
const res = await api.get<
AxiosResponse<GetCertificateResponse>
>(`/org/${orgId}/certificate/${domainId}/${fullDomain}`);
const certData = res.data.data;
if (certData) {
setCertError(null);
setCert(certData);
}
} catch (error: any) {
console.error("Failed to fetch certificate:", error);
setCertError("Failed");
} finally {
if (showLoading) {
setCertLoading(false);
}
}
const { data, isLoading, isError, refetch } = useQuery({
...certQuery,
enabled: Boolean(orgId && domainId && fullDomain),
refetchInterval: (query) => {
if (!polling) return false;
const interval =
query.state.data?.status === "valid"
? VALID_POLL_INTERVAL_MS
: pollingInterval;
// Add a small random offset to each tick. Without it, every row in
// a table would poll at the exact same instant, hitting the server
// in bursts instead of spreading the requests out.
// the requests will be jittered by less or more than 1s
const jitter = (Math.random() * 2 - 1) * POLL_JITTER_MS;
return Math.max(1000, interval + jitter);
},
[api, orgId, domainId, fullDomain]
);
// An explicit `null` is a real answer ("this domain has no certificate")
// and is seeded like any other, so a server-prefetched row doesn't
// refetch on mount. Only an omitted prop leaves the cache empty.
...(initialCertValue !== undefined && { initialData: initialCertValue })
});
const cert = data ?? null;
const restartCert = useMutation({
mutationFn: async (certId: number) => {
await api.post(`/org/${orgId}/certificate/${certId}/restart`, {});
},
onSuccess: () => {
// the backend flips the status asynchronously; reflect it optimistically
setTimeout(() => {
queryClient.setQueryData(certQuery.queryKey, (prev) =>
prev ? { ...prev, status: "pending" } : prev
);
}, 500);
},
onError: (error) => {
console.error("Failed to restart certificate:", error);
}
});
const fetchCert = useCallback(async () => {
await refetch();
}, [refetch]);
const { mutateAsync: restartCertAsync } = restartCert;
const refreshCert = useCallback(async () => {
if (!cert) return;
setRefreshing(true);
setCertError(null);
try {
await api.post(
`/org/${orgId}/certificate/${cert.certId}/restart`,
{}
);
// Update status to pending
setTimeout(() => {
setCert({ ...cert, status: "pending" });
}, 500);
} catch (error: any) {
console.error("Failed to restart certificate:", error);
setCertError("Failed to restart");
} finally {
setRefreshing(false);
await restartCertAsync(cert.certId);
} catch {
// surfaced through certError
}
}, [api, orgId, cert]);
}, [cert, restartCertAsync]);
const clearCert = useCallback(() => {
setCert(null);
setCertError(null);
}, []);
// const clearCert = useCallback(() => {
// queryClient.removeQueries({ queryKey: certQuery.queryKey });
// }, [queryClient, certQuery.queryKey]);
// Auto-fetch on mount if enabled
useEffect(() => {
if (autoFetch && orgId && domainId && fullDomain) {
fetchCert();
}
}, [autoFetch, orgId, domainId, fullDomain, fetchCert]);
useEffect(() => {
if (!polling || !orgId || !domainId || !fullDomain) return;
const POLL_JITTER_MS = 1000;
let cancelled = false;
let timeoutId: ReturnType<typeof setTimeout>;
const scheduleNext = () => {
const jitter = (Math.random() * 2 - 1) * POLL_JITTER_MS;
const delayMs = Math.max(
1000,
Math.round(pollingInterval + jitter)
);
timeoutId = setTimeout(() => {
if (cancelled) return;
void fetchCert(false);
scheduleNext();
}, delayMs);
};
scheduleNext();
return () => {
cancelled = true;
clearTimeout(timeoutId);
};
}, [polling, orgId, domainId, fullDomain, pollingInterval, fetchCert]);
let certError: string | null = null;
if (restartCert.isError) {
certError = "Failed to restart";
} else if (isError) {
certError = "Failed";
}
return {
cert,
certLoading,
certLoading: isLoading,
certError,
refreshing,
refreshing: restartCert.isPending,
fetchCert,
refreshCert,
clearCert
refreshCert
// clearCert
};
}
src/lib/queries.ts
+188 -2
View File
@@ -41,13 +41,16 @@ import {
keepPreviousData,
queryOptions
} from "@tanstack/react-query";
import type { AxiosResponse } from "axios";
import { isAxiosError, type AxiosResponse } from "axios";
import z, { meta } from "zod";
import { remote } from "./api";
import { durationToMs } from "./durationToMs";
import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
import { StatusHistoryResponse } from "@server/lib/statusHistory";
import {
StatusHistoryResponse,
type BatchedStatusHistoryResponse
} from "@server/lib/statusHistory";
import type { ListResourcePoliciesResponse } from "@server/routers/resource/types";
import type { GetResourcePolicyResponse } from "@server/routers/policy";
import type {
@@ -66,6 +69,7 @@ import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getRe
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
import type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
import type { GetCertificateResponse } from "@server/routers/certificates/types";
export type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
export { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
@@ -640,6 +644,143 @@ export const orgQueries = {
};
}
}),
batchedSiteStatusHistory: ({
siteIds,
orgId,
days = 90
}: {
orgId: string;
siteIds: number[];
days?: number;
}) =>
queryOptions({
queryKey: [
"ORG",
orgId,
"BATCHED_SITE_STATUS_HISTORY",
siteIds,
days
] as const,
queryFn: async ({ signal, meta }) => {
// Negated because getTimezoneOffset() returns UTC - local,
// while the API expects minutes to add to UTC to get local
const tzOffsetMinutes = -new Date().getTimezoneOffset();
const sp = new URLSearchParams([
["days", days.toString()],
["tzOffsetMinutes", tzOffsetMinutes.toString()],
...siteIds.map((id) => ["siteIds", id.toString()])
]);
const res = await meta!.api.get<
AxiosResponse<BatchedStatusHistoryResponse>
>(`/org/${orgId}/site-status-histories?${sp.toString()}`, {
signal
});
return res.data.data;
},
staleTime: durationToMs(5, "seconds")
}),
batchedHealthCheckStatusHistory: ({
healthCheckIds,
orgId,
days = 90
}: {
orgId: string;
healthCheckIds: number[];
days?: number;
}) =>
queryOptions({
queryKey: [
"ORG",
orgId,
"BATCHED_HEALTH_CHECK_STATUS_HISTORY",
healthCheckIds,
days
] as const,
queryFn: async ({ signal, meta }) => {
// Negated because getTimezoneOffset() returns UTC - local,
// while the API expects minutes to add to UTC to get local
const tzOffsetMinutes = -new Date().getTimezoneOffset();
const sp = new URLSearchParams([
["days", days.toString()],
["tzOffsetMinutes", tzOffsetMinutes.toString()],
...healthCheckIds.map((id) => [
"healthCheckIds",
id.toString()
])
]);
const res = await meta!.api.get<
AxiosResponse<BatchedStatusHistoryResponse>
>(
`/org/${orgId}/health-check-status-histories?${sp.toString()}`,
{ signal }
);
return res.data.data;
},
staleTime: durationToMs(5, "seconds")
}),
batchedDomainCertificates: ({
domains,
orgId
}: {
orgId: string;
domains: string[];
}) =>
queryOptions({
queryKey: ["ORG", orgId, "BATCHED_CERTIFICATES", domains] as const,
queryFn: async ({ signal, meta }) => {
// Negated because getTimezoneOffset() returns UTC - local,
// while the API expects minutes to add to UTC to get local
const sp = new URLSearchParams([
...domains.map((domain) => ["domains", domain.toString()])
]);
const res = await meta!.api.get<
AxiosResponse<BatchedStatusHistoryResponse>
>(`/org/${orgId}/batched-certificates?${sp.toString()}`, {
signal
});
return res.data.data;
},
staleTime: durationToMs(5, "seconds")
}),
batchedResourceStatusHistory: ({
resourceIds,
orgId,
days = 90
}: {
orgId: string;
resourceIds: number[];
days?: number;
}) =>
queryOptions({
queryKey: [
"ORG",
orgId,
"BATCHED_RESOURCE_STATUS_HISTORY",
resourceIds,
days
] as const,
queryFn: async ({ signal, meta }) => {
// Negated because getTimezoneOffset() returns UTC - local,
// while the API expects minutes to add to UTC to get local
const tzOffsetMinutes = -new Date().getTimezoneOffset();
const sp = new URLSearchParams([
["days", days.toString()],
["tzOffsetMinutes", tzOffsetMinutes.toString()],
...resourceIds.map((id) => ["resourceIds", id.toString()])
]);
const res = await meta!.api.get<
AxiosResponse<BatchedStatusHistoryResponse>
>(`/org/${orgId}/resource-status-histories?${sp.toString()}`, {
signal
});
return res.data.data;
},
staleTime: durationToMs(5, "seconds")
}),
siteStatusHistory: ({
siteId,
days = 90
@@ -649,6 +790,7 @@ export const orgQueries = {
}) =>
queryOptions({
queryKey: ["SITE_STATUS_HISTORY", siteId, days] as const,
staleTime: durationToMs(5, "seconds"),
queryFn: async ({ signal, meta }) => {
const tzOffsetMinutes = -new Date().getTimezoneOffset();
const res = await meta!.api.get<
@@ -670,6 +812,7 @@ export const orgQueries = {
}) =>
queryOptions({
queryKey: ["RESOURCE_STATUS_HISTORY", resourceId, days] as const,
staleTime: durationToMs(5, "seconds"),
queryFn: async ({ signal, meta }) => {
const tzOffsetMinutes = -new Date().getTimezoneOffset();
const res = await meta!.api.get<
@@ -692,6 +835,7 @@ export const orgQueries = {
days?: number;
}) =>
queryOptions({
staleTime: durationToMs(5, "seconds"),
queryKey: [
"HC_STATUS_HISTORY",
orgId,
@@ -1237,6 +1381,48 @@ export const approvalQueries = {
};
export const domainQueries = {
getCertificate: ({
orgId,
domainId,
domain
}: {
orgId: string;
domainId: string;
domain: string;
}) =>
queryOptions({
queryKey: [
"ORG",
orgId,
"DOMAIN",
domainId,
"CERTIFICATE",
domain
] as const,
queryFn: async ({ signal, meta }) => {
try {
const res = await meta!.api.get<
AxiosResponse<GetCertificateResponse | null>
>(`/org/${orgId}/certificate/${domainId}/${domain}`, {
signal
});
return res.data.data;
} catch (error) {
// the endpoint 404s when the domain has no certificate yet
if (isAxiosError(error) && error.response?.status === 404) {
return null;
}
throw error;
}
},
retry: (failureCount, error) =>
isAxiosError(error) &&
error.response != null &&
error.response.status < 500
? false
: failureCount < 2,
staleTime: durationToMs(1, "minutes")
}),
getDomain: ({ orgId, domainId }: { orgId: string; domainId: string }) =>
queryOptions({
queryKey: ["ORG", orgId, "DOMAIN", domainId] as const,