@rapidmx/web-client 0.19.0 → 0.21.0

package/apps/shared/components/admin/settings/pluginPreferences.ts

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Whether the Plugins page offers prerelease versions (`1.0.0-beta.2`) of plugins - for an update, in the version lists
+ * and in a plugin search. Stored in `localStorage`, so it is a preference of this browser, not a setting the server
+ * keeps: it only decides what the administrator is shown, since an administrator can already install any published
+ * version by name. Off unless it was turned on.
+ *
+ * A read that finds nothing, or a `localStorage` that throws (private-browsing/storage-blocked contexts), is off, and a
+ * write that fails is swallowed, so a blocked store only means the choice doesn't survive a reload.
+ */
+const STORAGE_KEY = "rapidmx:plugins-allow-prerelease";
+
+export function getAllowPrerelease(): boolean {
+    try {
+        return localStorage.getItem(STORAGE_KEY) === "true";
+    } catch {
+        return false;
+    }
+}
+
+export function setAllowPrerelease(allow: boolean): void {
+    try {
+        if (allow) {
+            localStorage.setItem(STORAGE_KEY, "true");
+        } else {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+    } catch {
+        // Not persisted; the choice still applies until the page is reloaded.
+    }
+}

package/apps/shared/components/escrow/layout/EscrowShell.tsx

@@ -7,7 +7,7 @@ import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react"
 import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
-import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
 import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
@@ -54,7 +54,7 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
     const [error, setError] = useState<string | null>(null);
     const [iconSrc, setIconSrc] = useState(DEFAULT_ICON_SRC);
 
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    useSessionRefresh(userUid, authServerUrl);
 
     // Only the icon is taken from branding here. The escrow console deliberately skips `useBranding()`, which
     // would inject the custom stylesheet, and never renders the admin-configured header/footer HTML - this

package/apps/shared/components/layout/AppShell.tsx

@@ -13,7 +13,7 @@ import {
     HiOutlineUsers,
 } from "react-icons/hi2";
 import { useRouter } from "@rapidrest/react/client";
-import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
 import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
@@ -202,7 +202,9 @@ export function AppChrome({
     // A meeting reminder pops up on whichever page they are - see the hook.
     useCalendarReminders({ userUid, enabled: inFrame });
 
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // A refused refresh means the sign-in has ended: open compose windows save what they hold (the access token still works for a while) and the
+    // browser goes to sign-in. Not while viewing as another user - the refresh cookie is the admin's own, and refreshing would end the impersonation.
+    useSessionRefresh(userUid, authServerUrl, { paused: impersonating, beforeRedirect: () => flushComposeDrafts(LOGOUT_TIMEOUT_MS) });
     // Any request this app makes that the server answers with a 401 - the session ended - raises one "Your session expired" pop-up with a
     // Sign in action (see `notifySessionExpired()`), whichever request noticed first, a background refresh included.
     useEffect(() => {

package/apps/shared/components/mail/ConversationList.tsx

@@ -14,9 +14,18 @@ import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass,
 import SwipeRow from "./SwipeRow.js";
 import InviteRowChip from "./invite/InviteRowChip.js";
 
+/** A conversation row of the list. `mailboxUid` is set only by a view that merges several mailboxes ("All Mailboxes"), whose rows are
+ * each from a different one; a list of one mailbox's own leaves it out and every row is that mailbox's. */
+export type ListedConversation = ConversationSummary & { mailboxUid?: string };
+
+/** What tells a row apart from the others: the same conversation id in two mailboxes (a message sent to both) is two rows. */
+export function conversationRowKey(conversation: ListedConversation): string {
+    return conversation.mailboxUid ? `${conversation.mailboxUid}\u0000${conversation.conversationId}` : conversation.conversationId;
+}
+
 export interface ConversationListProps {
-    conversations: ConversationSummary[];
-    /** The mailbox the conversations were listed from - `listConversationMessages()` is mailbox-scoped. */
+    conversations: ListedConversation[];
+    /** The mailbox the conversations were listed from - `listConversationMessages()` is mailbox-scoped. A row that names its own mailbox uses that. */
     mailboxUid: string;
     /** The message currently open in the reading pane, so the row standing for it can be marked. */
     selectedUid: string | null;
@@ -25,7 +34,7 @@ export interface ConversationListProps {
      * stands for, or the conversation's own `latestMessageUid` for a parent row. The conversation goes
      * with the uid because the pane shows the whole thread, not just that message.
      */
-    onOpenMessage: (conversation: ConversationSummary, uid: string) => void;
+    onOpenMessage: (conversation: ListedConversation, uid: string) => void;
     /** Newer copies of messages this list already fetched - the reading pane marks the message it opens as
      * read, which this list would otherwise keep showing as unread until the thread is collapsed and
      * expanded again. */
@@ -98,8 +107,8 @@ export default function ConversationList({
         setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
     }
 
-    function toggle(conversation: ConversationSummary) {
-        const id = conversation.conversationId;
+    function toggle(conversation: ListedConversation) {
+        const id = conversationRowKey(conversation);
         setExpanded((prev) => {
             const next = new Set(prev);
             if (next.has(id)) {
@@ -118,7 +127,7 @@ export default function ConversationList({
             delete next[id];
             return next;
         });
-        listConversationMessages(mailboxUid, id)
+        listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId)
             .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
             .catch((err) =>
                 setErrorsById((prev) => ({
@@ -143,15 +152,15 @@ export default function ConversationList({
         // `overflow-x-clip`: the panels a swiped row drags along stand outside its edges (see `SwipeRow`).
         <ul className={swipe?.enabled ? "overflow-x-clip" : undefined}>
             {conversations.map((conversation) => {
-                const id = conversation.conversationId;
+                const id = conversationRowKey(conversation);
                 const isExpanded = expanded.has(id);
                 const unread = conversation.unreadCount > 0;
                 const loaded = messagesById[id];
                 // `listConversationMessages()` answers oldest first; the rows read in whichever sense the
                 // list itself is arranged in. Copied before reversing - the fetched array is cached.
                 const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
-                const panelId = `conversation-messages-${id}`;
-                const ticked = selectedConversationIds?.has(id) ?? false;
+                const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
+                const ticked = selectedConversationIds?.has(conversation.conversationId) ?? false;
                 return (
                     <li key={id}>
                         <SwipeRow

package/apps/shared/components/mail/compose/ComposeWindow.tsx

@@ -69,6 +69,10 @@ export interface ComposeWindowProps {
     /** How long (ms) after the last edit the draft is autosaved. Defaults to `DEFAULT_AUTOSAVE_DELAY_MS`;
      * only overridden by tests. */
     autosaveDelayMs?: number;
+    /** The longest (ms) an unsaved edit waits before the draft is saved even though typing hasn't paused - so a
+     * message written without a 2-second break is still saved regularly. Defaults to `DEFAULT_AUTOSAVE_MAX_WAIT_MS`
+     * and is never shorter than `autosaveDelayMs`; only overridden by tests. */
+    autosaveMaxWaitMs?: number;
     /** Backoff (ms) between automatic retries of a failed mailbox/encryption-policy load, one entry per retry.
      * Defaults to `DEFAULT_CRYPTO_RETRY_DELAYS_MS`; only overridden by tests. */
     cryptoRetryDelaysMs?: number[];
@@ -76,6 +80,8 @@ export interface ComposeWindowProps {
 
 /** Debounce between the last edit and the draft autosave. */
 export const DEFAULT_AUTOSAVE_DELAY_MS = 2000;
+/** The longest an edit stays unsaved while the user keeps typing (the debounce above restarts on every keystroke, so it alone never fires then). */
+export const DEFAULT_AUTOSAVE_MAX_WAIT_MS = 30_000;
 
 /** Automatic, silent retries of a failed mailbox/encryption-policy (or recipient key) load, one entry per retry - a flapping gateway is waited out
  * in the background, without a word to the user. */
@@ -192,6 +198,7 @@ export default function ComposeWindow({
     userUid,
     trusted,
     autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS,
+    autosaveMaxWaitMs = DEFAULT_AUTOSAVE_MAX_WAIT_MS,
     cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS,
 }: ComposeWindowProps) {
     const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized, quotePending, late, resume } = session;
@@ -296,6 +303,8 @@ export default function ComposeWindow({
     const lastSavedRef = useRef<string | null>(null);
     /** An edit is waiting on the autosave debounce - flushed if the window unmounts first. */
     const pendingSaveRef = useRef(false);
+    /** Fires the save when an edit has waited `autosaveMaxWaitMs` without the debounce ever getting a pause to fire in. */
+    const maxWaitTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
     /** Send was pressed and is being validated/handed over: a second press (a double click, the shortcut held or repeated) does nothing. */
     const submittingRef = useRef(false);
     /** Attachment/inline-image uploads on the wire, and who is waiting for them to finish (Send pressed meanwhile). */
@@ -885,6 +894,8 @@ export default function ComposeWindow({
         const target = latestRef.current.draft!;
         const previous = saveInFlightRef.current;
         pendingSaveRef.current = false;
+        clearTimeout(maxWaitTimerRef.current);
+        maxWaitTimerRef.current = undefined;
         setSaveStatus("saving");
         const outcome = (async (): Promise<{ message?: Message; skipped?: boolean }> => {
             const before = await previous;
@@ -1164,8 +1175,20 @@ export default function ComposeWindow({
             lastSavedRef.current !== `${draft.uid}:${contentKey}`;
         pendingSaveRef.current = due;
         if (!due) {
+            clearTimeout(maxWaitTimerRef.current);
+            maxWaitTimerRef.current = undefined;
             return;
         }
+        // The debounce below restarts on every edit, so steady typing never lets it fire: this timer, started by the first unsaved edit and stopped
+        // by the save that follows, is what saves such a message at a regular interval.
+        if (maxWaitTimerRef.current === undefined) {
+            maxWaitTimerRef.current = setTimeout(() => {
+                maxWaitTimerRef.current = undefined;
+                if (pendingSaveRef.current && !finishedRef.current) {
+                    void saveDraftNow();
+                }
+            }, Math.max(autosaveMaxWaitMs, autosaveDelayMs));
+        }
         const timer = setTimeout(() => void saveDraftNow(), autosaveDelayMs);
         return () => clearTimeout(timer);
     }, [draft, contentReady, autosaveSuppressed, hasUserContent, contentKey]);
@@ -1174,6 +1197,7 @@ export default function ComposeWindow({
     // right away rather than losing it.
     useEffect(
         () => () => {
+            clearTimeout(maxWaitTimerRef.current);
             if (pendingSaveRef.current && !finishedRef.current) {
                 void saveDraftNow();
             }

package/apps/shared/components/mail/listPreferences.ts

@@ -155,11 +155,11 @@ function compareConversations(a: ConversationSummary, b: ConversationSummary, so
  * order that would mean nothing. Ties break newest first whichever direction is in force, so two rows the
  * key can't tell apart still read in a stable, familiar order.
  */
-export function sortConversations(
-    conversations: ConversationSummary[],
+export function sortConversations<T extends ConversationSummary>(
+    conversations: T[],
     sortBy: MessageListSort,
     sortOrder: MessageSortOrder,
-): ConversationSummary[] {
+): T[] {
     if (!CONVERSATION_SORTS.includes(sortBy)) {
         return conversations;
     }

package/apps/www/index.tsx

@@ -68,7 +68,7 @@ import { setReadStateMany } from "../shared/mail/messageReadState.js";
 import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
-import ConversationList from "../shared/components/mail/ConversationList.js";
+import ConversationList, { ListedConversation, conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import type { ConversationThreadHead } from "../shared/components/mail/ConversationThreadPane.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
 import InviteRowChip from "../shared/components/mail/invite/InviteRowChip.js";
@@ -462,7 +462,7 @@ function appendUnseenRows<T>(shown: T[], more: T[], idOf: (row: T) => string, ca
 }
 
 const messageUid = (message: Message) => message.uid;
-const conversationKey = (conversation: ConversationSummary) => conversation.conversationId;
+const conversationKey = conversationRowKey;
 
 /** Flattens and sorts a per-mailbox fetch into one merged, newest-first list - the aggregate ("All
  * Inboxes" etc.) equivalent of `mergeSearchResults()` above, but simpler: an aggregated message has no
@@ -507,6 +507,30 @@ async function fetchAggregateMessages(
     return mergeInboxMessages(perMailbox);
 }
 
+/**
+ * The conversation-list counterpart of `fetchAggregateMessages()`: one `listConversations()` per accessible mailbox that has a folder of
+ * `type`, each scoped to *that folder* (so "All Inboxes" groups only Inbox mail - not the Sent Items copy of a reply, which a mailbox-wide
+ * grouping pulls in) and each row tagged with its mailbox, then merged newest activity first. Same first-page-only scope, and the same
+ * rule that a mailbox that has no such folder or fails to answer contributes nothing rather than blanking the rest.
+ */
+async function fetchAggregateConversations(
+    mailboxFolders: MailboxFolders[],
+    type: AggregateFolderType,
+    params: ConversationListParams,
+): Promise<ListedConversation[]> {
+    const perMailbox = await Promise.all(
+        mailboxFolders.map(async ({ mailbox, folders }): Promise<ListedConversation[]> => {
+            const folder = folders.find((f) => f.type === type);
+            if (!folder) {
+                return [];
+            }
+            const rows = await listConversations(mailbox.uid, { ...params, folderUid: folder.uid, page: 0 }).catch(() => [] as ConversationSummary[]);
+            return rows.map((row) => ({ ...row, mailboxUid: mailbox.uid }));
+        }),
+    );
+    return perMailbox.flat().sort((a, b) => Date.parse(b.latestDate) - Date.parse(a.latestDate));
+}
+
 /** One conversation's part of a set of search results. */
 interface ResultGroup {
     /** The conversation's id - a message that belongs to no thread is its own conversation. */
@@ -547,7 +571,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
     const navigate = useNavigate();
     const { requestUnlock } = useUnlockPrompt();
     const [messages, setMessages] = useState<Message[]>([]);
-    const [conversations, setConversations] = useState<ConversationSummary[]>([]);
+    const [conversations, setConversations] = useState<ListedConversation[]>([]);
     const [loading, setLoading] = useState(true);
     // Once a list is on screen and the browser has nothing better to do, fetch the code a click on a message (the reading pane)
     // or on Compose/Reply (the compose window, with its editor) would otherwise wait for.
@@ -1054,12 +1078,28 @@ function InboxContent({ userUid }: { userUid?: string }) {
             return;
         }
 
+        if (asConversations && aggregateFolderType) {
+            // Grouped per mailbox, inside that mailbox's folder of this type, and merged - first pages only, like the message listing.
+            setLoading(true);
+            setError(null);
+            setHasMore(false);
+            void fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0))
+                .then((results) => {
+                    if (isCurrentRun()) {
+                        setConversations(results);
+                    }
+                })
+                .finally(() => {
+                    if (isCurrentRun()) {
+                        setLoading(false);
+                    }
+                });
+            return invalidate;
+        }
+
         if (asConversations) {
-            // Conversations stay single-mailbox (not aggregated across mailboxes in this pass) - in
-            // aggregate mode this falls back to `activeMailboxUid`, the same mailbox unlock/labels use
-            // (always set - `MailShell` only renders this component once at least one mailbox exists).
-            // They're scoped to the selected folder (`folderUid`, absent only in aggregate mode), so the
-            // conversation list matches the folder the sidebar has selected rather than the whole mailbox.
+            // A single mailbox's own folder (`folderUid`), so the conversation list matches the folder the sidebar has selected rather
+            // than the whole mailbox.
             if (snapshot) {
                 setConversations(snapshot.conversations);
                 listedOffsetRef.current = snapshot.conversations.length;
@@ -1431,7 +1471,13 @@ function InboxContent({ userUid }: { userUid?: string }) {
         const isCurrent = () => searchRunIdRef.current === listRun && liveRunRef.current === myRun;
         void (async () => {
             try {
-                if (asConversations) {
+                if (asConversations && aggregateFolderType) {
+                    // No paging here either: the fresh merged first pages are the list.
+                    const fresh = await fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0));
+                    if (isCurrent()) {
+                        setConversations(fresh);
+                    }
+                } else if (asConversations) {
                     const fresh = await listConversations(activeMailboxUid, conversationParams(0));
                     if (!isCurrent()) {
                         return;
@@ -2267,7 +2313,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
 
     /** Opens a conversation in the reading pane, positioned at one of its messages: the one a child row
      * stands for, or the latest for a parent row. The thread pane loads the thread itself. */
-    function handleOpenConversation(conversation: ConversationSummary, uid: string) {
+    function handleOpenConversation(conversation: ListedConversation, uid: string) {
         if (selectMode) {
             // Same rule as `handleSelect()` for a message row: while selecting, a row's own button ticks
             // the row rather than opening it.
@@ -2281,7 +2327,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
         }
         removedAnchorRef.current = null;
         setSelectedUid(uid);
-        setOpenThread({ conversation, uid, mailboxUid: activeMailboxUid });
+        setOpenThread({ conversation, uid, mailboxUid: conversation.mailboxUid ?? activeMailboxUid });
     }
 
     // ---- Keyboard shortcuts (see `shared/keyboard`). Each is registered only while this view can do it, and calls what the toolbar and
@@ -2320,7 +2366,11 @@ function InboxContent({ userUid }: { userUid?: string }) {
     /** The index of the selected row: the open message's, or the open conversation's; -1 with nothing selected. */
     function selectedRowIndex(): number {
         if (inConversations) {
-            return openThread ? listedConversations.findIndex((c) => c.conversationId === openThread.conversation.conversationId) : -1;
+            return openThread
+                ? listedConversations.findIndex(
+                      (c) => c.conversationId === openThread.conversation.conversationId && (!c.mailboxUid || c.mailboxUid === openThread.mailboxUid),
+                  )
+                : -1;
         }
         return messages.findIndex((m) => m.uid === selectedUid);
     }

package/dist/apps/shared/components/admin/diagnostics/HostCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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) => formatPercent(value);
 /** `1.23, 0.98, 0.5`, or a dash for a load average the server left out. */
@@ -29,5 +30,5 @@ export default function HostCard({ host, history }) {
                                     values: seriesOf(history, (sample) => percentOf(sample.host?.memoryUsedBytes, sample.host?.memoryTotalBytes)),
                                     max: 100,
                                     format: percentLabel,
-                                } }), _jsx(MetricTile, { label: "Load average", value: formatLoad(host.loadAverage), detail: "1, 5 and 15 minutes" })] }), _jsx("h3", { className: "mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted", children: "Disks" }), disks.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No disks were reported." })) : (_jsx("ul", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: disks.map((disk) => (_jsx(DiskRow, { disk: disk }, disk.path))) }))] }))] }));
+                                } }), _jsx(MetricTile, { label: "Load average", value: formatLoad(host.loadAverage), detail: "1, 5 and 15 minutes" })] }), _jsx(PressureTiles, { host: host, history: history }), _jsx("h3", { className: "mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted", children: "Disks" }), disks.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No disks were reported." })) : (_jsx("ul", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: disks.map((disk) => (_jsx(DiskRow, { disk: disk }, disk.path))) }))] }))] }));
 }

package/dist/apps/shared/components/admin/diagnostics/PressureTiles.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+/** From this share of the last 10 seconds spent stalled, pressure is called elevated ... */
+export declare 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 declare 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 declare function pressureLevel(percent: number): PressureLevel;
+type Host = NonNullable<DiagnosticsMetrics["host"]>;
+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): React.JSX.Element | null;
+export {};

package/dist/apps/shared/components/admin/diagnostics/PressureTiles.js

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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;
+/** Pressure in words, so that it is never only a number or a colour. */
+export function pressureLevel(percent) {
+    if (percent >= HIGH_PRESSURE_PERCENT) {
+        return "High";
+    }
+    return percent >= ELEVATED_PRESSURE_PERCENT ? "Elevated" : "Low";
+}
+const RESOURCES = [
+    { 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 }) {
+    const level = pressureLevel(stall.some.avg10);
+    return (_jsx(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,
+        }, children: _jsxs("div", { className: "mt-2 text-xs text-text-muted", children: ["Last minute ", formatPercent(stall.some.avg60), ", last 5 minutes ", formatPercent(stall.some.avg300), stall.full && ` · every task waiting: ${formatPercent(stall.full.avg10)}`] }) }));
+}
+/**
+ * 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 }) {
+    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 (_jsxs(_Fragment, { children: [_jsx("h3", { className: "mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted", children: "Pressure" }), _jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4", children: [RESOURCES.map(({ key, label, waiting }) => {
+                        const stall = host.pressure?.[key];
+                        return stall && _jsx(PressureTile, { label: label, waiting: waiting, stall: stall, history: history, resource: key }, key);
+                    }), balloon && (_jsx(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,
+                        }, children: _jsxs("div", { className: "mt-2 text-xs text-text-muted", children: ["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."] }) }))] })] }));
+}

package/dist/apps/shared/components/admin/diagnostics/PvcTable.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 }) {
     if (!pvc.mountedByServer) {
         return _jsx("span", { className: "text-text-muted", children: "Usage not available: not mounted in the server pod." });
     }
-    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 _jsx("span", { className: "text-text-muted", children: "The server has no usage figures for this volume." });
+        return (_jsx("span", { className: "text-text-muted", children: 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." }));
     }
-    return (_jsxs("div", { children: [_jsx(UsageMeter, { label: `Usage of volume ${pvc.name}`, percent: percent, detail: `${formatBytes(pvc.usedBytes)} of ${formatBytes(pvc.capacityBytes)}`, flag: !pvc.sharesNodeDisk }), pvc.sharesNodeDisk && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Shares the node\u2019s disk; the volume\u2019s size is not enforced." }))] }));
+    return (_jsxs("div", { children: [_jsx(UsageMeter, { label: `Usage of volume ${pvc.name}`, percent: percent, detail: `${pvc.usedPartial ? "At least " : ""}${formatBytes(own)} of ${formatBytes(pvc.capacityBytes)} allocated` }), pvc.usedPartial && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "The volume is too large to measure completely, so this is a lower bound." })), pvc.sharesNodeDisk && (_jsxs("p", { className: "mt-1 text-xs text-text-muted", children: ["Measured from the volume\u2019s directory. It shares the node\u2019s disk, which has ", formatBytes(pvc.availableBytes), " free; the volume\u2019s allocation is not enforced."] }))] }));
 }
 /** The install's persistent volume claims, with a usage bar for the ones the server can measure. */
 export default function PvcTable({ pvcs }) {

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

@@ -107,8 +107,35 @@ 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;
@@ -117,8 +144,11 @@ export interface DiagnosticsPodMetrics {
     memoryUsedBytes?: number;
 }
 /**
- * `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;
@@ -128,6 +158,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/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -9,7 +9,7 @@ import { useRouter } from "@rapidrest/react/client";
 import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineCpuChip, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, HiOutlineBars3, } 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";
@@ -118,7 +118,7 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     // console. `useBranding()` is still what injects the custom stylesheet and supplies the rail's icon.
     const { branding, iconSrc } = useBranding();
     const footer = useBrandingHtml(branding?.footerHtml);
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    useSessionRefresh(userUid, authServerUrl);
     useEffect(() => {
         if (!userUid) {
             return;