@rapidmx/web-client 0.19.0 → 0.21.0

package/README.md

@@ -357,7 +357,7 @@ Plugin pages import these directly from `@rapidmx/react-shared`, which the serve
 use:
 
 - `branding/useBranding.js`: `useBranding()`, for the branding and icon of pages outside a shell;
-- `auth/session.js`: `useRedirectIfUnauthenticated()`, already called by every shell;
+- `auth/session.js`: `useSessionRefresh()`, already called by every shell, which renews the sign-in before its hour is up;
 - `util/api.js`: `apiFetch()` and `ApiRequestError`, for calling the plugin's own API routes;
 - `mail/mailApi.js`: mailboxes and folders, such as `listMailboxes()` and `listFolders()`;
 - `components/buttons/Button.js`, `components/feedback/Alert.js` and `components/feedback/Skeleton.js`;

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

@@ -7,6 +7,7 @@ import type { DiagnosticsDiskMetrics, DiagnosticsMetrics } from "./diagnosticsAp
 import { formatBytes, formatCores, formatPercent, NO_VALUE, percentOf } from "./format.js";
 import { seriesOf } from "./metricsHistory.js";
 import MetricTile from "./MetricTile.js";
+import PressureTiles from "./PressureTiles.js";
 import UsageMeter from "./UsageMeter.js";
 
 const percentLabel = (value: number) => formatPercent(value);
@@ -91,6 +92,7 @@ export default function HostCard({ host, history }: HostCardProps) {
                         />
                         <MetricTile label="Load average" value={formatLoad(host.loadAverage)} detail="1, 5 and 15 minutes" />
                     </div>
+                    <PressureTiles host={host} history={history} />
                     <h3 className="mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted">Disks</h3>
                     {disks.length === 0 ? (
                         <p className="text-sm text-text-muted">No disks were reported.</p>

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

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { DiagnosticsMetrics, DiagnosticsPressure } from "./diagnosticsApi.js";
+import { formatBytes, formatPercent, percentOf } from "./format.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+
+/** From this share of the last 10 seconds spent stalled, pressure is called elevated ... */
+export const ELEVATED_PRESSURE_PERCENT = 10;
+
+/** ... and from this, high. Kernel documentation treats a few percent as ordinary and tens of percent as a machine that is struggling. */
+export const HIGH_PRESSURE_PERCENT = 30;
+
+export type PressureLevel = "Low" | "Elevated" | "High";
+
+/** Pressure in words, so that it is never only a number or a colour. */
+export function pressureLevel(percent: number): PressureLevel {
+    if (percent >= HIGH_PRESSURE_PERCENT) {
+        return "High";
+    }
+    return percent >= ELEVATED_PRESSURE_PERCENT ? "Elevated" : "Low";
+}
+
+type Host = NonNullable<DiagnosticsMetrics["host"]>;
+type Resource = keyof NonNullable<Host["pressure"]>;
+
+const RESOURCES: { key: Resource; label: string; waiting: string }[] = [
+    { key: "memory", label: "Memory pressure", waiting: "waiting for memory" },
+    { key: "io", label: "I/O pressure", waiting: "waiting for the disk" },
+    { key: "cpu", label: "CPU pressure", waiting: "waiting for a CPU" },
+];
+
+function PressureTile({ label, waiting, stall, history, resource }: { label: string; waiting: string; stall: DiagnosticsPressure; history: DiagnosticsMetrics[]; resource: Resource }) {
+    const level = pressureLevel(stall.some.avg10);
+    return (
+        <MetricTile
+            label={label}
+            value={formatPercent(stall.some.avg10)}
+            detail={`${level}: tasks ${waiting}, last 10 seconds`}
+            history={{
+                values: seriesOf(history, (sample) => sample.host?.pressure?.[resource]?.some.avg10),
+                max: 100,
+                format: formatPercent,
+            }}
+        >
+            <div className="mt-2 text-xs text-text-muted">
+                Last minute {formatPercent(stall.some.avg60)}, last 5 minutes {formatPercent(stall.some.avg300)}
+                {stall.full && ` · every task waiting: ${formatPercent(stall.full.avg10)}`}
+            </div>
+        </MetricTile>
+    );
+}
+
+export interface PressureTilesProps {
+    host: Host;
+    history: DiagnosticsMetrics[];
+}
+
+/**
+ * How stalled the node is (Linux pressure stall information: the share of recent time tasks spent waiting for memory, the disk or
+ * a CPU), and how much memory the hypervisor holds in the machine's balloon. Both explain a node that is slow while nothing on it
+ * uses much: a guest counts ballooned memory as used though no process holds it, and a machine short of memory stalls on the disk.
+ * Nothing is shown where the kernel gives no such figures.
+ */
+export default function PressureTiles({ host, history }: PressureTilesProps) {
+    const tiles = RESOURCES.filter(({ key }) => host.pressure?.[key]);
+    const balloon = host.balloon;
+    if (tiles.length === 0 && !balloon) {
+        return null;
+    }
+    const heldPercent = percentOf(balloon?.heldBytes, host.memoryTotalBytes);
+    return (
+        <>
+            <h3 className="mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted">Pressure</h3>
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+                {RESOURCES.map(({ key, label, waiting }) => {
+                    const stall = host.pressure?.[key];
+                    return stall && <PressureTile key={key} label={label} waiting={waiting} stall={stall} history={history} resource={key} />;
+                })}
+                {balloon && (
+                    <MetricTile
+                        label="Held by the hypervisor"
+                        value={formatBytes(balloon.heldBytes)}
+                        detail={`of ${formatBytes(host.memoryTotalBytes)}`}
+                        usage={
+                            heldPercent === undefined
+                                ? undefined
+                                : { percent: heldPercent, detail: `${formatBytes(balloon.heldBytes)} in the memory balloon`, flag: false }
+                        }
+                        history={{
+                            values: seriesOf(history, (sample) => sample.host?.balloon?.heldBytes),
+                            max: host.memoryTotalBytes,
+                            format: formatBytes,
+                        }}
+                    >
+                        <div className="mt-2 text-xs text-text-muted">
+                            Memory the hypervisor has taken back through the balloon. It counts as used above though no process holds it.{" "}
+                            {formatBytes(balloon.inflatedTotalBytes)} taken since the node booted.
+                        </div>
+                    </MetricTile>
+                )}
+            </div>
+        </>
+    );
+}

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

@@ -7,26 +7,40 @@ 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"];
+const HEADINGS = ["Volume", "Phase", "Storage class", "Allocated", "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);
+    // On the node's disk the filesystem's figures are the disk's, so only a measured directory says what the volume holds (an
+    // older server sent the disk's figures without saying so).
+    const own = pvc.sharesNodeDisk && pvc.measuredBy !== "directory" ? undefined : pvc.usedBytes;
+    const percent = percentOf(own, pvc.capacityBytes);
     if (percent === undefined) {
-        return <span className="text-text-muted">The server has no usage figures for this volume.</span>;
+        return (
+            <span className="text-text-muted">
+                {pvc.sharesNodeDisk
+                    ? "Shares the node\u2019s disk, and what the volume holds could not be measured."
+                    : "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}
+                detail={`${pvc.usedPartial ? "At least " : ""}${formatBytes(own)} of ${formatBytes(pvc.capacityBytes)} allocated`}
             />
+            {pvc.usedPartial && (
+                <p className="mt-1 text-xs text-text-muted">The volume is too large to measure completely, so this is a lower bound.</p>
+            )}
             {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>
+                <p className="mt-1 text-xs text-text-muted">
+                    Measured from the volume&rsquo;s directory. It shares the node&rsquo;s disk, which has {formatBytes(pvc.availableBytes)} free; the
+                    volume&rsquo;s allocation is not enforced.
+                </p>
             )}
         </div>
     );

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

@@ -124,9 +124,22 @@ export interface DiagnosticsHostMetrics {
     memoryTotalBytes: number;
     memoryUsedBytes: number;
     loadAverage: [number, number, number];
+    /**
+     * Memory the hypervisor holds in the machine's memory balloon. It counts in `memoryUsedBytes` (a guest sees ballooned memory
+     * as used) though no process holds it. Absent where no balloon has ever taken any.
+     */
+    balloon?: { heldBytes: number; inflatedTotalBytes: number };
+    /** How stalled the node is waiting for memory, disk and CPU (Linux pressure stall information). Absent without kernel support. */
+    pressure?: { memory?: DiagnosticsPressure; io?: DiagnosticsPressure; cpu?: DiagnosticsPressure };
     disks: DiagnosticsDiskMetrics[];
 }
 
+/** The share (0 to 100) of the last 10, 60 and 300 seconds that tasks were stalled. `some`: at least one waited. `full`: every one did. */
+export interface DiagnosticsPressure {
+    some: { avg10: number; avg60: number; avg300: number };
+    full?: { avg10: number; avg60: number; avg300: number };
+}
+
 /** From the metrics API (metrics-server): absent when it is not installed. */
 export interface DiagnosticsPodMetrics {
     name: string;
@@ -136,8 +149,11 @@ export interface DiagnosticsPodMetrics {
 }
 
 /**
- * `usedBytes`/`availableBytes` exist only for a volume the server pod mounts (`mountedByServer`). `sharesNodeDisk` means the
- * figures are the whole node filesystem's, and the volume's own size is not enforced.
+ * `usedBytes` (what the volume holds) exists only for a volume the server pod mounts (`mountedByServer`), and `measuredBy`
+ * says how it was found: from the volume's own filesystem, or - when the volume is a directory of the node's disk
+ * (`sharesNodeDisk`, such as k3s's local-path), where the filesystem is the whole disk - by measuring the directory.
+ * `capacityBytes` is the volume's allocation, which a volume that shares the node's disk does not enforce; `availableBytes` is
+ * what is left of the filesystem it is on.
  */
 export interface DiagnosticsPvcMetrics {
     name: string;
@@ -147,6 +163,9 @@ export interface DiagnosticsPvcMetrics {
     capacityBytes?: number;
     usedBytes?: number;
     availableBytes?: number;
+    measuredBy?: "filesystem" | "directory";
+    /** The directory could not be measured completely, so `usedBytes` is a lower bound. */
+    usedPartial?: boolean;
     mountedByServer: boolean;
     sharesNodeDisk?: boolean;
 }

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -27,7 +27,7 @@ import {
 } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
-import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -197,7 +197,7 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     const { branding, iconSrc } = useBranding();
     const footer = useBrandingHtml(branding?.footerHtml);
 
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    useSessionRefresh(userUid, authServerUrl);
 
     useEffect(() => {
         if (!userUid) {