@rapidmx/web-client 0.37.0 → 0.38.1

package/apps/shared/components/admin/diagnostics/InformationPanel.tsx

@@ -4,10 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import Alert from "../ActionAlert.js";
+import type { ConfigKeys } from "../../../../../lib/admin/configKeysApi.js";
 import type { DiagnosticsInformation, DiagnosticsVersions } from "./diagnosticsApi.js";
 import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
 import ComponentsTable from "./ComponentsTable.js";
 import InstalledPlugins, { InstalledPluginsData } from "./InstalledPlugins.js";
+import KeyringCard from "./KeyringCard.js";
 import PackagesTable from "./PackagesTable.js";
 import ServerVersionCard from "./ServerVersionCard.js";
 import SettingsTable from "./SettingsTable.js";
@@ -16,14 +18,17 @@ export interface InformationPanelProps {
     versions: DiagnosticsResource<DiagnosticsVersions>;
     plugins: DiagnosticsResource<InstalledPluginsData>;
     information: DiagnosticsResource<DiagnosticsInformation>;
+    /** `null` when the server has no keyring route. */
+    keyring: DiagnosticsResource<ConfigKeys | null>;
 }
 
 /**
- * The Information tab: the server, the install's other containers, the installed plugins, the server's environment variables and
- * configuration (secrets withheld by the server), and every installed package. The environment and configuration come from their
- * own request, so a server that predates them leaves the rest of the tab working and says so in their place.
+ * The Information tab: the server, the install's other containers (DNS publishing's among them), the installed plugins, the server's environment
+ * variables and configuration (secrets withheld by the server), what the Integrations pages saved as a source of its own, the configuration keyring and
+ * every installed package. The environment and configuration come from their own request, and so does the keyring, so a server that predates them
+ * leaves the rest of the tab working and says so in their place.
  */
-export default function InformationPanel({ versions, plugins, information }: InformationPanelProps) {
+export default function InformationPanel({ versions, plugins, information, keyring }: InformationPanelProps) {
     const { data, error, loading } = versions;
     return (
         <div className="space-y-6">
@@ -47,14 +52,26 @@ export default function InformationPanel({ versions, plugins, information }: Inf
                             <SettingsTable
                                 id="diagnostics-configuration"
                                 title="Configuration"
-                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Settings on the server's list of hidden settings, such as passwords, tokens and keys, are withheld by the server and never sent, and so are the credentials in URLs."
+                                description="The effective settings the server runs with: the environment, saved plugin settings, what the Integrations pages saved and defaults combined. Settings on the server's list of hidden settings, such as passwords, tokens and keys, are withheld by the server and never sent, and so are the credentials in URLs."
                                 settings={information.data.configuration ?? []}
                             />
+                            {information.data.integrations && (
+                                <SettingsTable
+                                    id="diagnostics-integrations"
+                                    title="Integrations"
+                                    description="Saved in the Integrations pages of the admin console and applied without a restart. Each of these overrides the deployment's own value of the same name above. A secret shows only that it is set."
+                                    settings={information.data.integrations}
+                                    secrets="set"
+                                    emptyText="Nothing is saved in the Integrations pages."
+                                />
+                            )}
                         </>
                     )}
-                    <PackagesTable packages={data.packages ?? []} />
                 </>
             )}
+            {/* Its own request, so it shows (or says why it can't) whether or not the versions could be read. */}
+            <KeyringCard keyring={keyring} />
+            {data && <PackagesTable packages={data.packages ?? []} />}
         </div>
     );
 }

package/apps/shared/components/admin/diagnostics/KeyringCard.tsx

@@ -0,0 +1,144 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import { ConfigKeyRotationPhase, ConfigKeys, getConfigKeys } from "../../../../../lib/admin/configKeysApi.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Alert from "../ActionAlert.js";
+import { activeKidOf, ageText, isRunning } from "../configEncryption/keyringParts.js";
+import Badge from "./Badge.js";
+import { formatDateTime, NO_VALUE } from "./format.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+
+/**
+ * Reads the configuration keyring's state with the configuration keys client: the same answer the Configuration Encryption page shows, so Diagnostics needs no
+ * route of its own. A server without the route (404) answers `null`, which the card words, so that it doesn't fail the page.
+ */
+export async function loadKeyring(): Promise<ConfigKeys | null> {
+    try {
+        return await getConfigKeys();
+    } catch (err) {
+        if (err instanceof ApiRequestError && err.status === 404) {
+            return null;
+        }
+        throw err;
+    }
+}
+
+/** Where a running rotation is, in words. */
+const PHASES: Record<ConfigKeyRotationPhase, string> = {
+    adding: "adding the new key",
+    activating: "waiting for the server copies to load the new key",
+    reencrypting: "re-encrypting the saved values",
+    retiring: "removing the old key",
+    done: "done",
+    failed: "failed",
+};
+
+const HEADINGS = ["Key ID", "Created", "Age", "Values encrypted", "State"];
+
+export interface KeyringCardProps {
+    keyring: DiagnosticsResource<ConfigKeys | null>;
+    /** The time the ages are counted to. Defaults to now. For a test. */
+    now?: number;
+}
+
+function Note({ role = "note", children }: { role?: "note" | "alert"; children: ReactNode }) {
+    return (
+        <div role={role} className="mt-3 rounded-sm bg-warning px-3.5 py-3 text-sm text-warning-contrast">
+            {children}
+        </div>
+    );
+}
+
+/**
+ * The configuration keyring (spec 5.6, 14): each key by its id, when it was made, its age and how many saved values it encrypts, which one encrypts now, and a
+ * rotation that is running or failed. Never any key material: the server doesn't send it. Managing the keys is the Configuration Encryption page's.
+ */
+export default function KeyringCard({ keyring, now = Date.now() }: KeyringCardProps) {
+    const { data, error, loading } = keyring;
+    return (
+        <section aria-labelledby="diagnostics-keyring-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-keyring-heading" className="mb-1 text-base font-bold uppercase tracking-wide">
+                Configuration keyring
+            </h2>
+            <p className="mb-3 text-xs text-text-muted">
+                The keys that encrypt the credentials, API keys and tokens saved in the console. Only each key&rsquo;s id, age and how many values it
+                encrypts are shown.
+            </p>
+            {error && <Alert>{error}</Alert>}
+            {!data && loading && <p className="text-sm text-text-muted">Loading&hellip;</p>}
+            {data === null && <p className="text-sm text-text-muted">This server doesn&rsquo;t offer configuration encryption yet.</p>}
+            {data && <Keys keys={data} now={now} />}
+        </section>
+    );
+}
+
+function Keys({ keys, now }: { keys: ConfigKeys; now: number }) {
+    const list = keys.keys ?? [];
+    const activeKid = activeKidOf({ ...keys, keys: list });
+    const rotation = keys.rotation;
+    const reencryption = keys.reencryption;
+    const unreadable = reencryption?.unreadable?.length ?? 0;
+    return (
+        <>
+            {list.length === 0 ? (
+                <p className="text-sm text-text-muted">The keyring holds no keys.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full border-collapse text-sm">
+                        <thead>
+                            <tr>
+                                {HEADINGS.map((heading) => (
+                                    <th key={heading} className="border-b border-border px-2.5 py-2 text-left text-xs uppercase tracking-wide text-text-muted">
+                                        {heading}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {list.map((key) => (
+                                <tr key={key.kid}>
+                                    <td className="break-all border-b border-border px-2.5 py-2 font-mono">{key.kid}</td>
+                                    <td className="border-b border-border px-2.5 py-2">{formatDateTime(key.createdAt)}</td>
+                                    <td className="border-b border-border px-2.5 py-2">{ageText(key.createdAt, now)}</td>
+                                    <td className="border-b border-border px-2.5 py-2 tabular-nums">{key.envelopes ?? "Not counted yet"}</td>
+                                    <td className="border-b border-border px-2.5 py-2">
+                                        {key.kid === activeKid ? (
+                                            <Badge tone="success">Active</Badge>
+                                        ) : isRunning(rotation) && key.kid === rotation.kid ? (
+                                            <Badge>Waiting to be activated</Badge>
+                                        ) : (
+                                            NO_VALUE
+                                        )}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+            <p className="mt-2 text-xs text-text-muted">
+                {keys.countedAt ? `Values were last counted ${formatDateTime(keys.countedAt)}.` : "Values have not been counted yet."}
+            </p>
+            {isRunning(rotation) && (
+                <Note>
+                    A key rotation is in progress: {PHASES[rotation.phase] ?? rotation.phase}. Follow it on the{" "}
+                    <a href="/admin/configuration-encryption" className="underline">
+                        Configuration Encryption
+                    </a>{" "}
+                    page.
+                </Note>
+            )}
+            {rotation?.phase === "failed" && <Note>The last key rotation failed: {rotation.lastError ?? "no reason was recorded."}</Note>}
+            {unreadable > 0 && (
+                <Note role="alert">
+                    {reencryption?.finishedAt ? `The re-encryption pass that finished ${formatDateTime(reencryption.finishedAt)}` : "The last re-encryption pass"} could not read{" "}
+                    {unreadable === 1 ? "1 saved value" : `${unreadable} saved values`} with the keys in this keyring. Restore the keyring they were saved with, or enter them again;
+                    only a later pass updates this, so a value entered again stays counted until then.
+                </Note>
+            )}
+        </>
+    );
+}

package/apps/shared/components/admin/diagnostics/SettingsTable.tsx

@@ -13,6 +13,12 @@ export const SETTINGS_PAGE_SIZE = 100;
 /** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
 export const HIDDEN_VALUE = "•••• (hidden)";
 
+/** What stands where a secret of the integrations layer is saved: whether it is set is all that is shown of it. */
+export const SET_VALUE = "•••• (set)";
+
+/** What stands where a saved secret could not be decrypted, so it is not in use. */
+export const UNREADABLE_VALUE = "Set, but can't be read: enter it again";
+
 const INPUT_CLASS =
     "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 
@@ -24,13 +30,17 @@ export interface SettingsTableProps {
     /** Also the prefix of the heading's element id. */
     id: string;
     settings: DiagnosticsSetting[];
+    /** What a `redacted` value is: `hidden` (default) where the server withholds it, `set` where it is a saved secret and the setting says only that it is set. */
+    secrets?: "hidden" | "set";
+    /** What an empty list says. Defaults to "Nothing is set." */
+    emptyText?: string;
 }
 
 /**
  * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
  * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
  */
-export default function SettingsTable({ title, description, id, settings }: SettingsTableProps) {
+export default function SettingsTable({ title, description, id, settings, secrets = "hidden", emptyText = "Nothing is set." }: SettingsTableProps) {
     const [query, setQuery] = useState("");
     const [limit, setLimit] = useState(SETTINGS_PAGE_SIZE);
 
@@ -39,7 +49,9 @@ export default function SettingsTable({ title, description, id, settings }: Sett
         return settings.filter((item) => needle === "" || `${item.name} ${item.redacted ? "" : (item.value ?? "")}`.toLowerCase().includes(needle));
     }, [settings, query]);
     const shown = matching.slice(0, limit);
-    const hiddenCount = settings.filter((item) => item.redacted).length;
+    const unreadableCount = settings.filter((item) => item.unreadable).length;
+    const hiddenCount = settings.filter((item) => item.redacted && !item.unreadable).length;
+    const hiddenText = secrets === "set" ? `${hiddenCount} ${hiddenCount === 1 ? "secret" : "secrets"} set` : `${hiddenCount} with a hidden value`;
 
     return (
         <section aria-labelledby={`${id}-heading`} className="rounded-md border border-border bg-surface p-4">
@@ -62,10 +74,11 @@ export default function SettingsTable({ title, description, id, settings }: Sett
             </div>
             <p role="status" className="mb-2 text-xs text-text-muted">
                 {(matching.length === settings.length ? `${settings.length} settings` : `${matching.length} of ${settings.length} settings match`) +
-                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "")}
+                    (hiddenCount > 0 ? `, ${hiddenText}` : "") +
+                    (unreadableCount > 0 ? `, ${unreadableCount} that can't be read` : "")}
             </p>
             {matching.length === 0 ? (
-                <p className="text-sm text-text-muted">{settings.length === 0 ? "Nothing is set." : "No settings match."}</p>
+                <p className="text-sm text-text-muted">{settings.length === 0 ? emptyText : "No settings match."}</p>
             ) : (
                 <div className="overflow-x-auto">
                     <table className="w-full text-sm border-collapse">
@@ -89,8 +102,10 @@ export default function SettingsTable({ title, description, id, settings }: Sett
                                         <CopyIconButton value={item.name} label={`Copy the name of ${item.name}`} />
                                     </td>
                                     <td className="py-2 px-2.5 border-b border-border font-mono break-all">
-                                        {item.redacted ? (
-                                            <span className="text-text-muted">{HIDDEN_VALUE}</span>
+                                        {item.unreadable ? (
+                                            <span className="text-danger">{UNREADABLE_VALUE}</span>
+                                        ) : item.redacted ? (
+                                            <span className="text-text-muted">{secrets === "set" ? SET_VALUE : HIDDEN_VALUE}</span>
                                         ) : (
                                             <>
                                                 {item.value}

package/apps/shared/components/admin/diagnostics/diagnosticsApi.ts

@@ -15,7 +15,10 @@ import { apiFetch } from "../../../../../lib/util/api.js";
  * machine figures are those of the node running the server, read from inside its own container.
  */
 
-/** The components of a RapidMX install that run beside the server itself, in the order the server lists them. */
+/**
+ * The components of a RapidMX install that run beside the server itself, in the order the server lists them. `dns-controller` (one pod) and
+ * `external-dns` (one pod per DNS provider config) are DNS publishing's and come after the eight others, only from a server that runs it.
+ */
 export type DiagnosticsComponentName =
     | "postfix"
     | "postfix-bridge"
@@ -24,7 +27,9 @@ export type DiagnosticsComponentName =
     | "redis"
     | "coturn"
     | "rspamd"
-    | "clamav";
+    | "clamav"
+    | "dns-controller"
+    | "external-dns";
 
 export interface DiagnosticsContainer {
     name: string;
@@ -70,7 +75,7 @@ export interface DiagnosticsVersions {
     };
     /** Sorted by name. */
     packages: { name: string; version: string; direct: boolean }[];
-    /** Always all eight, in the order of `DiagnosticsComponentName`. */
+    /** The eight others, in the order of `DiagnosticsComponentName`, and the two of DNS publishing when the server runs it. */
     components: DiagnosticsComponent[];
     kubernetes: { available: boolean; reason?: string };
 }
@@ -83,12 +88,19 @@ export interface DiagnosticsSetting {
     name: string;
     value?: string;
     redacted: boolean;
+    /** A saved secret the server holds but could not decrypt (a key missing from its keyring), so it is not in use: set with `redacted`, and the administrator enters it again. */
+    unreadable?: boolean;
 }
 
 /** The server's environment variables and effective configuration, each sorted by name. */
 export interface DiagnosticsInformation {
     environment: DiagnosticsSetting[];
     configuration: DiagnosticsSetting[];
+    /**
+     * The integrations config layer as a source of its own: what is saved on the console's Integrations pages and applied without a restart, a secret
+     * redacted. Left out by a server that predates it (nothing is shown), an empty list when nothing is saved there.
+     */
+    integrations?: DiagnosticsSetting[];
 }
 
 /** A node that runs some of this install's pods, derived from the pods: nothing else about the node is readable. */