mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-07 04:47:08 +00:00
show cert status in public reosurces table
This commit is contained in:
miloschwartz
@@ -1,10 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CheckCircle2, Clock, Loader2, RotateCw, XCircle } from "lucide-react";
|
||||
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";
|
||||
|
||||
export type CertificateStatusContentProps = {
|
||||
cert: GetCertificateResponse | null;
|
||||
certLoading: boolean;
|
||||
certError: string | null;
|
||||
refreshing: boolean;
|
||||
refreshCert: () => Promise<void>;
|
||||
showLabel?: boolean;
|
||||
className?: string;
|
||||
onRefresh?: () => void;
|
||||
};
|
||||
|
||||
/** Presentation-only certificate row (shared hook state possible via props). */
|
||||
export function CertificateStatusContent({
|
||||
cert,
|
||||
certLoading,
|
||||
certError,
|
||||
refreshing,
|
||||
refreshCert,
|
||||
showLabel = true,
|
||||
className = "",
|
||||
onRefresh
|
||||
}: CertificateStatusContentProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const labelClass =
|
||||
"inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
|
||||
const valueClass = "inline-flex items-center gap-2 text-sm leading-none";
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await refreshCert();
|
||||
onRefresh?.();
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "valid":
|
||||
return "text-green-500";
|
||||
case "pending":
|
||||
case "requested":
|
||||
return "text-yellow-500";
|
||||
case "expired":
|
||||
case "failed":
|
||||
return "text-red-500";
|
||||
default:
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
};
|
||||
|
||||
const shouldShowRefreshButton = (status: string, updatedAt: number) => {
|
||||
return (
|
||||
status === "failed" ||
|
||||
status === "expired" ||
|
||||
(status === "requested" &&
|
||||
updatedAt &&
|
||||
new Date(updatedAt * 1000).getTime() <
|
||||
Date.now() - 5 * 60 * 1000)
|
||||
);
|
||||
};
|
||||
|
||||
if (certLoading) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className={labelClass}>
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className={valueClass}>
|
||||
<FileBadge
|
||||
className="h-4 w-4 shrink-0 animate-pulse text-muted-foreground"
|
||||
aria-hidden
|
||||
/>
|
||||
{t("loading")}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (certError) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className={labelClass}>
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className={valueClass}>
|
||||
<FileBadge
|
||||
className="h-4 w-4 shrink-0 text-red-500"
|
||||
aria-hidden
|
||||
/>
|
||||
{certError}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!cert) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className={labelClass}>
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className={valueClass}>
|
||||
<FileBadge
|
||||
className="h-4 w-4 shrink-0 text-muted-foreground"
|
||||
aria-hidden
|
||||
/>
|
||||
{t("none", { defaultValue: "None" })}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isPending = cert.status === "pending";
|
||||
const disableRestartButton = cert.domainType === "wildcard";
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className={labelClass}>{t("certificateStatus")}:</span>
|
||||
)}
|
||||
{isPending && !disableRestartButton ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center"
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
title={t("restartCertificate", {
|
||||
defaultValue: "Restart Certificate"
|
||||
})}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 leading-none">
|
||||
<FileBadge
|
||||
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
|
||||
aria-hidden
|
||||
/>
|
||||
{cert.status.charAt(0).toUpperCase() +
|
||||
cert.status.slice(1)}
|
||||
<RotateCw
|
||||
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</Button>
|
||||
) : (
|
||||
<span className={valueClass}>
|
||||
<FileBadge
|
||||
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
|
||||
aria-hidden
|
||||
/>
|
||||
{cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
|
||||
{shouldShowRefreshButton(cert.status, cert.updatedAt) &&
|
||||
!disableRestartButton ? (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0"
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
title={t("restartCertificate", {
|
||||
defaultValue: "Restart Certificate"
|
||||
})}
|
||||
>
|
||||
<RotateCw
|
||||
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</Button>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type CertificateStatusProps = {
|
||||
orgId: string;
|
||||
domainId: string;
|
||||
@@ -28,174 +205,25 @@ export default function CertificateStatus({
|
||||
polling = false,
|
||||
pollingInterval = 5000
|
||||
}: CertificateStatusProps) {
|
||||
const t = useTranslations();
|
||||
const { cert, certLoading, certError, refreshing, refreshCert } =
|
||||
useCertificate({
|
||||
orgId,
|
||||
domainId,
|
||||
fullDomain,
|
||||
autoFetch,
|
||||
polling,
|
||||
pollingInterval
|
||||
});
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await refreshCert();
|
||||
onRefresh?.();
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "valid":
|
||||
return "text-green-500";
|
||||
case "pending":
|
||||
case "requested":
|
||||
return "text-yellow-500";
|
||||
case "expired":
|
||||
case "failed":
|
||||
return "text-red-500";
|
||||
default:
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "valid":
|
||||
return CheckCircle2;
|
||||
case "pending":
|
||||
case "requested":
|
||||
return Clock;
|
||||
case "expired":
|
||||
case "failed":
|
||||
return XCircle;
|
||||
default:
|
||||
return Clock;
|
||||
}
|
||||
};
|
||||
|
||||
const shouldShowRefreshButton = (status: string, updatedAt: number) => {
|
||||
return (
|
||||
status === "failed" ||
|
||||
status === "expired" ||
|
||||
(status === "requested" &&
|
||||
updatedAt &&
|
||||
new Date(updatedAt * 1000).getTime() <
|
||||
Date.now() - 5 * 60 * 1000)
|
||||
);
|
||||
};
|
||||
|
||||
if (certLoading) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className="text-sm font-medium">
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1.5 text-sm">
|
||||
<Loader2
|
||||
className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground"
|
||||
aria-hidden
|
||||
/>
|
||||
{t("loading")}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (certError) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className="text-sm font-medium">
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1.5 text-sm">
|
||||
<XCircle className="h-4 w-4 shrink-0 text-red-500" />
|
||||
{certError}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!cert) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className="text-sm font-medium">
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1.5 text-sm">
|
||||
<Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
{t("none", { defaultValue: "None" })}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isPending = cert.status === "pending";
|
||||
const disableRestartButton = cert.domainType === "wildcard";
|
||||
const StatusIcon = getStatusIcon(cert.status);
|
||||
const hook = useCertificate({
|
||||
orgId,
|
||||
domainId,
|
||||
fullDomain,
|
||||
autoFetch,
|
||||
polling,
|
||||
pollingInterval
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
{showLabel && (
|
||||
<span className="text-sm font-medium">
|
||||
{t("certificateStatus")}:
|
||||
</span>
|
||||
)}
|
||||
{isPending && !disableRestartButton ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-auto p-0 text-sm font-normal"
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
title={t("restartCertificate", {
|
||||
defaultValue: "Restart Certificate"
|
||||
})}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<StatusIcon
|
||||
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
|
||||
/>
|
||||
{cert.status.charAt(0).toUpperCase() +
|
||||
cert.status.slice(1)}
|
||||
<RotateCw
|
||||
className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-sm">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<StatusIcon
|
||||
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
|
||||
/>
|
||||
{cert.status.charAt(0).toUpperCase() +
|
||||
cert.status.slice(1)}
|
||||
{shouldShowRefreshButton(cert.status, cert.updatedAt) &&
|
||||
!disableRestartButton ? (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="p-0 w-3 h-auto align-middle"
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
title={t("restartCertificate", {
|
||||
defaultValue: "Restart Certificate"
|
||||
})}
|
||||
>
|
||||
<RotateCw
|
||||
className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</Button>
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<CertificateStatusContent
|
||||
cert={hook.cert}
|
||||
certLoading={hook.certLoading}
|
||||
certError={hook.certError}
|
||||
refreshing={hook.refreshing}
|
||||
refreshCert={hook.refreshCert}
|
||||
showLabel={showLabel}
|
||||
className={className}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@ import {
|
||||
ResourceSitesStatusCell,
|
||||
type ResourceSiteRow
|
||||
} from "@app/components/ResourceSitesStatusCell";
|
||||
import { PrivateResourceCertAccessIndicator } from "@app/components/PrivateResourceCertAccessIndicator";
|
||||
import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
|
||||
|
||||
export type InternalResourceSiteRow = ResourceSiteRow;
|
||||
|
||||
@@ -453,6 +453,13 @@ export default function ClientResourcesTable({
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{did ? (
|
||||
<ResourceAccessCertIndicator
|
||||
orgId={resourceRow.orgId}
|
||||
domainId={domainId}
|
||||
fullDomain={fullDomain}
|
||||
/>
|
||||
) : null}
|
||||
<div className="">
|
||||
<CopyToClipboard
|
||||
text={url}
|
||||
@@ -460,13 +467,6 @@ export default function ClientResourcesTable({
|
||||
displayText={url}
|
||||
/>
|
||||
</div>
|
||||
{did ? (
|
||||
<PrivateResourceCertAccessIndicator
|
||||
orgId={resourceRow.orgId}
|
||||
domainId={domainId}
|
||||
fullDomain={fullDomain}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -64,6 +64,7 @@ import z from "zod";
|
||||
import { ColumnFilterButton } from "./ColumnFilterButton";
|
||||
import { ControlledDataTable } from "./ui/controlled-data-table";
|
||||
import UptimeMiniBar from "./UptimeMiniBar";
|
||||
import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
|
||||
|
||||
export type TargetHealth = {
|
||||
targetId: number;
|
||||
@@ -86,6 +87,8 @@ export type ResourceRow = {
|
||||
proxyPort: number | null;
|
||||
enabled: boolean;
|
||||
domainId?: string;
|
||||
/** Hostname for certificate API (without scheme); distinct from `domain` URL shown in Access column */
|
||||
fullDomain?: string | null;
|
||||
ssl: boolean;
|
||||
targetHost?: string;
|
||||
targetPort?: number;
|
||||
@@ -266,7 +269,7 @@ export default function ProxyResourcesTable({
|
||||
<StatusIcon status={overallStatus} />
|
||||
<span className="text-sm">
|
||||
{overallStatus === "healthy" &&
|
||||
t("resourcesTableHealthy")}
|
||||
t("resourcesTableHealthy")}
|
||||
{overallStatus === "degraded" &&
|
||||
t("resourcesTableDegraded")}
|
||||
{overallStatus === "unhealthy" &&
|
||||
@@ -488,7 +491,12 @@ export default function ProxyResourcesTable({
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const resourceRow = row.original;
|
||||
return <TargetStatusCell targets={resourceRow.targets} healthStatus={resourceRow.health} />;
|
||||
return (
|
||||
<TargetStatusCell
|
||||
targets={resourceRow.targets}
|
||||
healthStatus={resourceRow.health}
|
||||
/>
|
||||
);
|
||||
},
|
||||
sortingFn: (rowA, rowB) => {
|
||||
const statusA = rowA.original.health;
|
||||
@@ -520,24 +528,51 @@ export default function ProxyResourcesTable({
|
||||
header: () => <span className="p-3">{t("access")}</span>,
|
||||
cell: ({ row }) => {
|
||||
const resourceRow = row.original;
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
{!resourceRow.http ? (
|
||||
|
||||
if (!resourceRow.http) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<CopyToClipboard
|
||||
text={resourceRow.proxyPort?.toString() || ""}
|
||||
isLink={false}
|
||||
/>
|
||||
) : !resourceRow.domainId ? (
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!resourceRow.domainId) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<InfoPopup
|
||||
info={t("domainNotFoundDescription")}
|
||||
text={t("domainNotFound")}
|
||||
/>
|
||||
) : (
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const domainId = resourceRow.domainId;
|
||||
const certHostname = resourceRow.fullDomain;
|
||||
const showHttpsCertIndicator =
|
||||
resourceRow.ssl &&
|
||||
certHostname != null &&
|
||||
certHostname !== "";
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{showHttpsCertIndicator ? (
|
||||
<ResourceAccessCertIndicator
|
||||
orgId={resourceRow.orgId}
|
||||
domainId={domainId}
|
||||
fullDomain={certHostname}
|
||||
/>
|
||||
) : null}
|
||||
<div className="">
|
||||
<CopyToClipboard
|
||||
text={resourceRow.domain}
|
||||
isLink={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import CertificateStatus from "@app/components/CertificateStatus";
|
||||
import { CertificateStatusContent } from "@app/components/CertificateStatus";
|
||||
import {
|
||||
Popover,
|
||||
PopoverAnchor,
|
||||
@@ -8,11 +8,17 @@ import {
|
||||
} from "@app/components/ui/popover";
|
||||
import { useCertificate } from "@app/hooks/useCertificate";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { CheckCircle2, Clock, XCircle } from "lucide-react";
|
||||
import { FileBadge } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode
|
||||
} from "react";
|
||||
|
||||
type PrivateResourceCertAccessIndicatorProps = {
|
||||
type ResourceAccessCertIndicatorProps = {
|
||||
orgId: string;
|
||||
domainId: string;
|
||||
fullDomain: string;
|
||||
@@ -33,37 +39,32 @@ function getStatusColor(status: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusIcon(status: string) {
|
||||
switch (status) {
|
||||
case "valid":
|
||||
return CheckCircle2;
|
||||
case "pending":
|
||||
case "requested":
|
||||
return Clock;
|
||||
case "expired":
|
||||
case "failed":
|
||||
return XCircle;
|
||||
default:
|
||||
return Clock;
|
||||
}
|
||||
}
|
||||
|
||||
export function PrivateResourceCertAccessIndicator({
|
||||
/** Compact cert icon + hover popover with full certificate status (shared by proxy and client resource tables). */
|
||||
export function ResourceAccessCertIndicator({
|
||||
orgId,
|
||||
domainId,
|
||||
fullDomain
|
||||
}: PrivateResourceCertAccessIndicatorProps) {
|
||||
}: ResourceAccessCertIndicatorProps) {
|
||||
const t = useTranslations();
|
||||
const [open, setOpen] = useState(false);
|
||||
const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const { cert, certLoading, certError } = useCertificate({
|
||||
const certificate = useCertificate({
|
||||
orgId,
|
||||
domainId,
|
||||
fullDomain,
|
||||
autoFetch: true
|
||||
autoFetch: true,
|
||||
polling: open,
|
||||
pollingInterval: 5000
|
||||
});
|
||||
|
||||
const { cert, certLoading, certError, refreshing, fetchCert } = certificate;
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
void fetchCert(false);
|
||||
}, [open, fetchCert]);
|
||||
|
||||
const clearCloseTimer = useCallback(() => {
|
||||
if (closeTimerRef.current != null) {
|
||||
clearTimeout(closeTimerRef.current);
|
||||
@@ -85,24 +86,46 @@ export function PrivateResourceCertAccessIndicator({
|
||||
return () => clearCloseTimer();
|
||||
}, [clearCloseTimer]);
|
||||
|
||||
let triggerBody: ReactNode;
|
||||
if (certLoading) {
|
||||
return (
|
||||
triggerBody = (
|
||||
<div
|
||||
className="h-4 w-4 shrink-0 rounded-[2px] bg-muted animate-pulse"
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 rounded-[2px] animate-pulse",
|
||||
"bg-neutral-200 dark:bg-neutral-700"
|
||||
)}
|
||||
aria-busy="true"
|
||||
aria-label={t("loading")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let TriggerIcon = Clock;
|
||||
let triggerIconClass = "text-muted-foreground";
|
||||
if (certError) {
|
||||
TriggerIcon = XCircle;
|
||||
triggerIconClass = "text-red-500";
|
||||
} else if (refreshing) {
|
||||
triggerBody = (
|
||||
<FileBadge
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 animate-spin",
|
||||
cert ? getStatusColor(cert.status) : "text-muted-foreground"
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
} else if (certError) {
|
||||
triggerBody = (
|
||||
<FileBadge className="h-4 w-4 shrink-0 text-red-500" aria-hidden />
|
||||
);
|
||||
} else if (cert) {
|
||||
TriggerIcon = getStatusIcon(cert.status);
|
||||
triggerIconClass = getStatusColor(cert.status);
|
||||
triggerBody = (
|
||||
<FileBadge
|
||||
className={cn("h-4 w-4", getStatusColor(cert.status))}
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
triggerBody = (
|
||||
<FileBadge
|
||||
className="h-4 w-4 shrink-0 text-muted-foreground"
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -125,10 +148,7 @@ export function PrivateResourceCertAccessIndicator({
|
||||
aria-haspopup="dialog"
|
||||
aria-label={t("certificateStatus")}
|
||||
>
|
||||
<TriggerIcon
|
||||
className={cn("h-4 w-4", triggerIconClass)}
|
||||
aria-hidden
|
||||
/>
|
||||
{triggerBody}
|
||||
</button>
|
||||
</PopoverAnchor>
|
||||
<PopoverContent
|
||||
@@ -140,13 +160,19 @@ export function PrivateResourceCertAccessIndicator({
|
||||
onMouseLeave={scheduleClose}
|
||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<CertificateStatus
|
||||
orgId={orgId}
|
||||
domainId={domainId}
|
||||
fullDomain={fullDomain}
|
||||
autoFetch
|
||||
showLabel
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<CertificateStatusContent
|
||||
cert={certificate.cert}
|
||||
certLoading={certificate.certLoading}
|
||||
certError={certificate.certError}
|
||||
refreshing={certificate.refreshing}
|
||||
refreshCert={certificate.refreshCert}
|
||||
showLabel
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("certificateStatusAutoRefreshHint")}
|
||||
</p>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
Reference in New Issue
Block a user