@rapidmx/web-client 0.17.2 → 0.18.0

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

@@ -0,0 +1,70 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+import { formatBytes, formatCores, formatPercent, percentOf } from "./format.js";
+import { formatLoad } from "./HostCard.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+
+export interface ProcessCardProps {
+    process: DiagnosticsMetrics["process"] | undefined;
+    history: DiagnosticsMetrics[];
+}
+
+/** The server's own Node.js process: its CPU, memory, and the memory and load its container sees. Shown with or without Kubernetes. */
+export default function ProcessCard({ process, history }: ProcessCardProps) {
+    const heapPercent = percentOf(process?.heapUsedBytes, process?.heapTotalBytes);
+    const systemUsed =
+        process?.systemMemoryTotalBytes !== undefined && process.systemMemoryFreeBytes !== undefined
+            ? process.systemMemoryTotalBytes - process.systemMemoryFreeBytes
+            : undefined;
+    const systemPercent = percentOf(systemUsed, process?.systemMemoryTotalBytes);
+    return (
+        <section aria-labelledby="diagnostics-process-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-process-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                This server process
+            </h2>
+            {!process ? (
+                <p className="text-sm text-text-muted">The server did not report its own figures.</p>
+            ) : (
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+                    <MetricTile
+                        label="Process CPU"
+                        value={formatPercent(process.cpuPercent)}
+                        detail={`${formatCores(process.cpuCount)} available`}
+                        history={{ values: seriesOf(history, (sample) => sample.process?.cpuPercent), format: formatPercent }}
+                    />
+                    <MetricTile
+                        label="Process memory (RSS)"
+                        value={formatBytes(process.rssBytes)}
+                        history={{ values: seriesOf(history, (sample) => sample.process?.rssBytes), format: formatBytes }}
+                    />
+                    <MetricTile
+                        label="Heap"
+                        value={formatBytes(process.heapUsedBytes)}
+                        detail={`of ${formatBytes(process.heapTotalBytes)} allocated`}
+                        usage={
+                            heapPercent === undefined
+                                ? undefined
+                                : { percent: heapPercent, detail: `${formatBytes(process.heapUsedBytes)} of ${formatBytes(process.heapTotalBytes)}`, flag: false }
+                        }
+                    />
+                    <MetricTile label="Load average" value={formatLoad(process.loadAverage)} detail="1, 5 and 15 minutes" />
+                    <MetricTile
+                        label="Memory visible to the container"
+                        value={formatBytes(systemUsed)}
+                        detail={`of ${formatBytes(process.systemMemoryTotalBytes)}`}
+                        usage={
+                            systemPercent === undefined
+                                ? undefined
+                                : { percent: systemPercent, detail: `${formatBytes(systemUsed)} of ${formatBytes(process.systemMemoryTotalBytes)}` }
+                        }
+                    />
+                </div>
+            )}
+        </section>
+    );
+}

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

@@ -0,0 +1,79 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { DiagnosticsPvcMetrics } from "./diagnosticsApi.js";
+import { formatBytes, NO_VALUE, percentOf } from "./format.js";
+import UsageMeter from "./UsageMeter.js";
+
+const HEADINGS = ["Volume", "Phase", "Storage class", "Size", "Usage"];
+
+function Usage({ pvc }: { pvc: DiagnosticsPvcMetrics }) {
+    if (!pvc.mountedByServer) {
+        return <span className="text-text-muted">Usage not available: not mounted in the server pod.</span>;
+    }
+    const percent = percentOf(pvc.usedBytes, pvc.capacityBytes);
+    if (percent === undefined) {
+        return <span className="text-text-muted">The server has no usage figures for this volume.</span>;
+    }
+    return (
+        <div>
+            <UsageMeter
+                label={`Usage of volume ${pvc.name}`}
+                percent={percent}
+                detail={`${formatBytes(pvc.usedBytes)} of ${formatBytes(pvc.capacityBytes)}`}
+                flag={!pvc.sharesNodeDisk}
+            />
+            {pvc.sharesNodeDisk && (
+                <p className="mt-1 text-xs text-text-muted">Shares the node&rsquo;s disk; the volume&rsquo;s size is not enforced.</p>
+            )}
+        </div>
+    );
+}
+
+/** The install's persistent volume claims, with a usage bar for the ones the server can measure. */
+export default function PvcTable({ pvcs }: { pvcs: DiagnosticsPvcMetrics[] }) {
+    return (
+        <section aria-labelledby="diagnostics-pvc-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-pvc-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                Persistent volumes
+            </h2>
+            {pvcs.length === 0 ? (
+                <p className="text-sm text-text-muted">This install has no persistent volume claims.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {HEADINGS.map((heading) => (
+                                    <th
+                                        key={heading}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {heading}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {pvcs.map((pvc) => (
+                                <tr key={pvc.name} className="align-top">
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">{pvc.name}</td>
+                                    <td className="py-2 px-2.5 border-b border-border">{pvc.phase}</td>
+                                    <td className="py-2 px-2.5 border-b border-border">{pvc.storageClass ?? NO_VALUE}</td>
+                                    <td className="py-2 px-2.5 border-b border-border tabular-nums">
+                                        {formatBytes(pvc.capacityBytes ?? pvc.requestedBytes)}
+                                    </td>
+                                    <td className="py-2 px-2.5 border-b border-border min-w-56">
+                                        <Usage pvc={pvc} />
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </section>
+    );
+}

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

@@ -0,0 +1,110 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import type { DiagnosticsRuntime } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+import Badge from "./Badge.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { formatDateTime, NO_VALUE } from "./format.js";
+
+/** What a distribution's id is called on screen. */
+const DISTRIBUTIONS: Record<string, string> = {
+    k3s: "k3s",
+    rke2: "RKE2",
+    eks: "Amazon EKS",
+    gke: "Google GKE",
+    aks: "Azure AKS",
+    kubernetes: "Kubernetes",
+};
+
+const NODE_HEADINGS = ["Node", "Internal IP", "Pods of this install"];
+
+function Fact({ term, children }: { term: string; children: React.ReactNode }) {
+    return (
+        <div>
+            <dt className="text-xs uppercase tracking-wide text-text-muted">{term}</dt>
+            <dd className="break-words">{children}</dd>
+        </div>
+    );
+}
+
+function RuntimeDetails({ runtime }: { runtime: DiagnosticsRuntime }) {
+    const version = runtime.version;
+    const nodes = runtime.nodes ?? [];
+    return (
+        <>
+            <section aria-labelledby="diagnostics-kubernetes-heading" className="rounded-md border border-border bg-surface p-4">
+                <h2 id="diagnostics-kubernetes-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                    Kubernetes
+                </h2>
+                <dl className="grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2 lg:grid-cols-3">
+                    <Fact term="Version">
+                        <span className="font-mono">{version?.gitVersion ?? NO_VALUE}</span>
+                    </Fact>
+                    <Fact term="Distribution">
+                        {version ? <Badge tone="info">{DISTRIBUTIONS[version.distribution] ?? version.distribution}</Badge> : NO_VALUE}
+                    </Fact>
+                    <Fact term="Platform">{version?.platform ?? NO_VALUE}</Fact>
+                    <Fact term="Namespace">
+                        <span className="font-mono">{runtime.namespace ?? NO_VALUE}</span>
+                    </Fact>
+                    <Fact term="Go version">{version?.goVersion ?? NO_VALUE}</Fact>
+                    <Fact term="Built">{formatDateTime(version?.buildDate)}</Fact>
+                </dl>
+            </section>
+            <section aria-labelledby="diagnostics-nodes-heading" className="rounded-md border border-border bg-surface p-4">
+                <h2 id="diagnostics-nodes-heading" className="text-base font-bold uppercase tracking-wide mb-1">
+                    Nodes
+                </h2>
+                <p className="mb-3 text-xs text-text-muted">
+                    The nodes that run this install&rsquo;s pods. The server can only see its own namespace, so nothing about the nodes
+                    themselves is listed here.
+                </p>
+                {nodes.length === 0 ? (
+                    <p className="text-sm text-text-muted">No node is running any of this install&rsquo;s pods.</p>
+                ) : (
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm border-collapse">
+                            <thead>
+                                <tr>
+                                    {NODE_HEADINGS.map((heading) => (
+                                        <th
+                                            key={heading}
+                                            className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                        >
+                                            {heading}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {nodes.map((node) => (
+                                    <tr key={node.name}>
+                                        <td className="py-2 px-2.5 border-b border-border font-mono break-all">{node.name}</td>
+                                        <td className="py-2 px-2.5 border-b border-border font-mono">{node.internalIP ?? NO_VALUE}</td>
+                                        <td className="py-2 px-2.5 border-b border-border tabular-nums">{node.podCount}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </section>
+        </>
+    );
+}
+
+/** The Runtime tab: the Kubernetes version and the nodes the install's pods run on. */
+export default function RuntimePanel({ runtime }: { runtime: DiagnosticsResource<DiagnosticsRuntime> }) {
+    const { data, error, loading } = runtime;
+    return (
+        <div className="space-y-6">
+            {error && <Alert>{error}</Alert>}
+            {!data && loading && <p className="text-sm text-text-muted">Loading&hellip;</p>}
+            {data && (data.available ? <RuntimeDetails runtime={data} /> : <KubernetesNotice reason={data.reason} />)}
+        </div>
+    );
+}

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

@@ -0,0 +1,37 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { DiagnosticsVersions } from "./diagnosticsApi.js";
+import { formatDateTime, formatUptime, NO_VALUE } from "./format.js";
+
+/** The server process: Node.js, the deployed package, the machine and how long it has been up. */
+export default function ServerVersionCard({ server }: { server: DiagnosticsVersions["server"] }) {
+    const rows: [string, string][] = [
+        ["Node.js", server.nodeVersion || NO_VALUE],
+        ["V8", server.v8Version || NO_VALUE],
+        ["Package", server.packageName ? `${server.packageName} ${server.packageVersion ?? ""}`.trim() : NO_VALUE],
+        ["Environment", server.nodeEnv || NO_VALUE],
+        ["Platform", [server.platform, server.arch].filter(Boolean).join(" / ") || NO_VALUE],
+        ["Host name", server.hostname || NO_VALUE],
+        ["Process ID", server.pid === undefined ? NO_VALUE : String(server.pid)],
+        ["Started", formatDateTime(server.startedAt)],
+        ["Up for", formatUptime(server.uptimeSeconds)],
+    ];
+    return (
+        <section aria-labelledby="diagnostics-server-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-server-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                Server
+            </h2>
+            <dl className="grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2 lg:grid-cols-3">
+                {rows.map(([term, description]) => (
+                    <div key={term}>
+                        <dt className="text-xs uppercase tracking-wide text-text-muted">{term}</dt>
+                        <dd className="break-words">{description}</dd>
+                    </div>
+                ))}
+            </dl>
+        </section>
+    );
+}

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

@@ -0,0 +1,79 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { METRICS_HISTORY_SIZE } from "./metricsHistory.js";
+
+const WIDTH = 240;
+const HEIGHT = 48;
+/** Keeps a line at the very top or bottom of the plot from being clipped by its own 2px stroke. */
+const PADDING = 2;
+
+/**
+ * Where each value is drawn, as `[x, y]` in the plot's own coordinates. The x-axis always has room for a full
+ * history (`METRICS_HISTORY_SIZE` samples), with the newest sample at the right edge, so a line that has just started
+ * grows in from the right rather than being stretched across the plot. The y-axis runs from zero to `max` (the highest
+ * value when it is not given), so the shape is never a lie about how much the value moves.
+ */
+export function sparklinePoints(values: number[], max?: number): [number, number][] {
+    const top = max !== undefined && max > 0 ? max : Math.max(...values, 0) || 1;
+    const step = WIDTH / (METRICS_HISTORY_SIZE - 1);
+    return values.map((value, index) => {
+        const x = WIDTH - (values.length - 1 - index) * step;
+        const y = HEIGHT - PADDING - (Math.min(Math.max(value, 0), top) / top) * (HEIGHT - 2 * PADDING);
+        return [x, y];
+    });
+}
+
+export interface SparklineProps {
+    values: number[];
+    /** What is drawn, for the text alternative (`CPU used`). */
+    label: string;
+    /** The value the plot's top stands for. Defaults to the highest value seen. */
+    max?: number;
+    /** Writes a value for the text alternative. */
+    format: (value: number) => string;
+}
+
+/**
+ * A line with a wash of the same colour under it, over the last few minutes of a value. It carries no numbers itself: the
+ * value beside it does, and the text alternative says the latest, lowest and highest.
+ */
+export default function Sparkline({ values, label, max, format }: SparklineProps) {
+    const points = sparklinePoints(values, max);
+    let description = `${label}: collecting samples`;
+    if (values.length > 1) {
+        description = `${label}: latest ${format(values[values.length - 1])}, lowest ${format(Math.min(...values))}, highest ${format(Math.max(...values))} over the last ${values.length} samples`;
+    }
+    const line = points.map(([x, y], index) => `${index === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
+    return (
+        <svg
+            role="img"
+            aria-label={description}
+            viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+            preserveAspectRatio="none"
+            className="block h-12 w-full"
+        >
+            <title>{description}</title>
+            <line x1="0" y1={HEIGHT - 0.5} x2={WIDTH} y2={HEIGHT - 0.5} className="stroke-border" strokeWidth="1" vectorEffect="non-scaling-stroke" />
+            {points.length > 1 && (
+                <>
+                    <path
+                        d={`${line} L${points[points.length - 1][0].toFixed(1)} ${HEIGHT} L${points[0][0].toFixed(1)} ${HEIGHT} Z`}
+                        className="fill-primary/10"
+                    />
+                    <path
+                        d={line}
+                        fill="none"
+                        className="stroke-primary"
+                        strokeWidth="2"
+                        strokeLinejoin="round"
+                        strokeLinecap="round"
+                        vectorEffect="non-scaling-stroke"
+                    />
+                </>
+            )}
+        </svg>
+    );
+}

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

@@ -0,0 +1,81 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlinePause, HiOutlinePlay } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { formatDateTime } from "./format.js";
+import HostCard from "./HostCard.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { METRICS_POLL_INTERVAL_MS } from "./metricsHistory.js";
+import NamespaceCard from "./NamespaceCard.js";
+import ProcessCard from "./ProcessCard.js";
+import PvcTable from "./PvcTable.js";
+import type { MetricsPolling } from "./useMetricsPolling.js";
+
+/** The System tab: live resource use, refreshed every few seconds, with the last few minutes drawn as sparklines. */
+export default function SystemPanel({ polling }: { polling: MetricsPolling }) {
+    const { history, error, loading, paused, setPaused } = polling;
+    const latest = history[history.length - 1];
+    const kubernetes = latest?.kubernetes;
+    const errors = kubernetes?.errors ?? [];
+    let status = `Updates every ${METRICS_POLL_INTERVAL_MS / 1000} seconds while this page is visible.`;
+    if (paused) {
+        status = "Updates are paused.";
+    } else if (loading) {
+        status = "Loading…";
+    }
+    return (
+        <div className="space-y-6">
+            <div className="flex flex-wrap items-center gap-3">
+                <Button
+                    type="button"
+                    variant="secondary"
+                    className="!w-auto"
+                    aria-pressed={paused}
+                    onClick={() => setPaused(!paused)}
+                >
+                    {paused ? (
+                        <>
+                            <HiOutlinePlay size={16} aria-hidden="true" className="mr-1 inline" />
+                            Resume
+                        </>
+                    ) : (
+                        <>
+                            <HiOutlinePause size={16} aria-hidden="true" className="mr-1 inline" />
+                            Pause
+                        </>
+                    )}
+                </Button>
+                <p role="status" className="text-xs text-text-muted">
+                    {status}
+                    {latest && ` Last sample ${formatDateTime(latest.collectedAt)}.`}
+                </p>
+            </div>
+            {error && <Alert>{error}</Alert>}
+            {latest && (
+                <>
+                    <HostCard host={latest.host} history={history} />
+                    <ProcessCard process={latest.process} history={history} />
+                    {!kubernetes?.available ? (
+                        <KubernetesNotice reason={kubernetes?.reason} />
+                    ) : (
+                        <>
+                            {errors.length > 0 && (
+                                <Alert>
+                                    {errors.map((message) => (
+                                        <div key={message}>{message}</div>
+                                    ))}
+                                </Alert>
+                            )}
+                            <NamespaceCard namespace={kubernetes.namespace} history={history} />
+                            <PvcTable pvcs={kubernetes.pvcs ?? []} />
+                        </>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,73 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineExclamationCircle, HiOutlineExclamationTriangle } from "react-icons/hi2";
+import { formatPercent } from "./format.js";
+
+/** Above this share of its capacity, a resource is called high. */
+export const HIGH_USAGE_PERCENT = 80;
+
+/** Above this share of its capacity, a resource is called critical. */
+export const CRITICAL_USAGE_PERCENT = 90;
+
+export type UsageSeverity = "normal" | "high" | "critical";
+
+export function usageSeverity(percent: number): UsageSeverity {
+    if (percent > CRITICAL_USAGE_PERCENT) {
+        return "critical";
+    }
+    return percent > HIGH_USAGE_PERCENT ? "high" : "normal";
+}
+
+/** The fill of the bar for each severity: the ordinary accent, then the warning and danger colours. */
+const FILL: Record<UsageSeverity, string> = { normal: "bg-primary", high: "bg-warning", critical: "bg-danger" };
+
+export interface UsageMeterProps {
+    /** What the bar measures (`Data volume usage`), for its text alternative. */
+    label: string;
+    /** How much of the capacity is used, 0 to 100 (a value outside is clamped for the bar, and written as it is). */
+    percent: number;
+    /** The amounts the percentage comes from (`3.2 GiB of 8 GiB`). */
+    detail: string;
+    /**
+     * Whether a high value is flagged (default). Off for a figure that is not the fullness of something of its own, such as a
+     * volume that shares the node's disk, where "nearly full" would be a false alarm.
+     */
+    flag?: boolean;
+}
+
+/**
+ * A bar showing how full something is. The amounts and the percentage are always written beside it, and a bar over
+ * `HIGH_USAGE_PERCENT` or `CRITICAL_USAGE_PERCENT` is also worded (High, Critical) with an icon, so the state is never
+ * only a colour.
+ */
+export default function UsageMeter({ label, percent, detail, flag = true }: UsageMeterProps) {
+    const severity = flag ? usageSeverity(percent) : "normal";
+    const width = Math.min(Math.max(percent, 0), 100);
+    return (
+        <div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+                <span className="tabular-nums">{detail}</span>
+                <span className="flex items-center gap-1 tabular-nums">
+                    {severity === "high" && <HiOutlineExclamationTriangle size={16} aria-hidden="true" className="text-warning" />}
+                    {severity === "critical" && <HiOutlineExclamationCircle size={16} aria-hidden="true" className="text-danger" />}
+                    {formatPercent(percent)}
+                    {severity !== "normal" && <span className="font-medium">{severity === "high" ? "High" : "Critical"}</span>}
+                </span>
+            </div>
+            <div
+                role="meter"
+                aria-label={label}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={Math.round(width)}
+                aria-valuetext={`${detail}, ${formatPercent(percent)}${severity === "normal" ? "" : `, ${severity}`}`}
+                className="mt-1 h-2 overflow-hidden rounded-pill border border-border bg-surface-alt"
+            >
+                <div className={`h-full rounded-pill ${FILL[severity]}`} style={{ width: `${width}%` }} />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import type { DiagnosticsVersions } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+import ComponentsTable from "./ComponentsTable.js";
+import InstalledPlugins, { InstalledPluginsData } from "./InstalledPlugins.js";
+import PackagesTable from "./PackagesTable.js";
+import ServerVersionCard from "./ServerVersionCard.js";
+
+export interface VersionsPanelProps {
+    versions: DiagnosticsResource<DiagnosticsVersions>;
+    plugins: DiagnosticsResource<InstalledPluginsData>;
+}
+
+/** The Versions tab: the server, its packages, the installed plugins and the install's other containers. */
+export default function VersionsPanel({ versions, plugins }: VersionsPanelProps) {
+    const { data, error, loading } = versions;
+    return (
+        <div className="space-y-6">
+            {error && <Alert>{error}</Alert>}
+            {!data && loading && <p className="text-sm text-text-muted">Loading&hellip;</p>}
+            {data && (
+                <>
+                    <ServerVersionCard server={data.server} />
+                    <ComponentsTable components={data.components ?? []} kubernetes={data.kubernetes ?? { available: false }} />
+                    <InstalledPlugins data={plugins.data} error={plugins.error} loading={plugins.loading} />
+                    <PackagesTable packages={data.packages ?? []} />
+                </>
+            )}
+        </div>
+    );
+}