@rapidmx/web-client 0.19.0 → 0.20.0

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/settings/BrandingForm.js

@@ -12,9 +12,9 @@ import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 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";
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 /** A header that uses both variables - the snippet the Branding page offers to copy. */
-export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
-    <span>{APP_TITLE}</span>
-    <span>{USER_MENU}</span>
+export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
+    <span>{APP_TITLE}</span>
+    <span>{USER_MENU}</span>
 </div>`;
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export function isSvgFile(file) {