proxy-manager: nginx proxy manager in officer

reads hosts and certificates against a live NPM 2.15.1. one grantable permission, with /_config owner-only — reading which hosts are healthy is worth sharing, an NPM admin login is not, and NPM has no read-only role. the quirk that shapes the whole plugin: NPM answers an unauthenticated read with 404, not 401, because its router only registers a resource once a token is present. so 'not signed in' and 'no such endpoint' are the same response, and a naive client tells you a feature is missing when your password is wrong. the client mints a fresh token and retries once, then reports a persistent 404 as likelyAuth. certificates sort by expiry rather than name, which is the only ordering that answers a question. no create/edit/delete and no cert issuance: NPM's own UI does those and a wrong proxy host takes a domain off the internet. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-25 08:38:15 +00:00
commit 5914e96cf3
12 changed files with 1155 additions and 0 deletions
@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RefreshCw, ShieldAlert, ShieldCheck } from "lucide-react";
+import { useClient } from "hooks/useClient";
+
+/**
+ * Certificates, ordered by how soon they expire.
+ *
+ * That ordering is the whole design. A certificate list sorted by name is a reference; sorted by expiry
+ * it answers the only question anybody has, which is whether something is about to break. The server
+ * computes `daysUntilExpiry` so the browser is not parsing dates and getting the timezone wrong.
+ */
+
+type Certificate = {
+  id: number;
+  provider: string;
+  nice_name: string;
+  domain_names: string[];
+  expires_on: string | null;
+  daysUntilExpiry: number | null;
+};
+
+/** Let's Encrypt renews at 30 days, so inside 14 something has actually gone wrong. */
+const WARN_DAYS = 30;
+const URGENT_DAYS = 14;
+
+export const CertificatesPanel = () => {
+  const client = useClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
+
+  const [certificates, setCertificates] = useState<Certificate[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setCertificates(await clientRef.current.get<Certificate[]>("/proxy-manager/certificates"));
+      setError(null);
+    } catch (caught) {
+      const body = (caught as { body?: { error?: string } })?.body;
+      setError(body?.error ?? "Could not load certificates.");
+      setCertificates(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (error) return <Centred>{error}</Centred>;
+  if (!certificates) return <Centred>Loading certificates…</Centred>;
+  if (certificates.length === 0) return <Centred>No certificates.</Centred>;
+
+  const expiring = certificates.filter((c) => c.daysUntilExpiry !== null && c.daysUntilExpiry < WARN_DAYS).length;
+
+  return (
+    <div className="flex size-full flex-col">
+      <header className="flex items-center justify-between border-b px-3 py-2">
+        <span className="text-sm font-medium">
+          {certificates.length} certificate{certificates.length === 1 ? "" : "s"}
+          {expiring > 0 ? <span className="ml-2 text-xs text-amber-500">{expiring} expiring</span> : null}
+        </span>
+        <button type="button" onClick={() => void load()} className="text-muted-foreground hover:text-foreground">
+          <RefreshCw className="size-4" />
+        </button>
+      </header>
+
+      <ul className="flex-1 overflow-auto">
+        {certificates.map((certificate) => {
+          const days = certificate.daysUntilExpiry;
+          const urgent = days !== null && days < URGENT_DAYS;
+          const warn = days !== null && days < WARN_DAYS;
+          return (
+            <li key={certificate.id} className="flex items-center gap-2 border-b px-3 py-2">
+              {warn ? (
+                <ShieldAlert className={`size-4 shrink-0 ${urgent ? "text-destructive" : "text-amber-500"}`} />
+              ) : (
+                <ShieldCheck className="size-4 shrink-0 text-emerald-500" />
+              )}
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm">{certificate.nice_name}</span>
+                <span className="block truncate text-xs text-muted-foreground">
+                  {certificate.domain_names.join(", ")}
+                </span>
+              </span>
+              <span className={`shrink-0 text-xs ${urgent ? "text-destructive" : warn ? "text-amber-500" : "text-muted-foreground"}`}>
+                {days === null ? certificate.provider : days < 0 ? `expired ${-days}d ago` : `${days}d`}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const Centred = ({ children }: { children: React.ReactNode }) => (
+  <div className="flex size-full items-center justify-center p-6 text-center text-sm text-muted-foreground">
+    {children}
+  </div>
+);