@protobase/ui 0.19.10 → 0.19.11

package/dist/app/runtime/runtime-status.js

@@ -1,25 +1,49 @@
-import { formatDateTime } from "../../format/date.js";
+import { formatAgo, formatDateTime } from "../../format/date.js";
 import { isApiError } from "@protobase/client";
 //#region src/app/runtime/runtime-status.ts
 /** The top bar shows the update button only when there is an update and the endpoint wants it shown. */
 const showsUpdateButton = (status) => Boolean(status?.updateAvailable && status.indicator);
+/** How often the status is read again: rarely, and every few seconds while an update runs so its progress shows. */
+const refreshMs = (updating) => updating ? 5e3 : 18e5;
 const policyLabels = {
 	immediate: "Updates as soon as a release is out",
 	weekly: "Updates at a set time every week",
 	scheduled: "Updates at the time set for this release",
 	manual: "Updates only when asked to"
 };
-/** When the latest version will be applied on its own, in words. */
-const nextUpdateText = (status) => {
-	if (status.updating) return "Updating now";
+const stageLabels = {
+	job: "Preparing the update",
+	build: "Building"
+};
+const runningText = (status, now) => {
+	if (!status.updateStage) return "Updating now";
+	const label = stageLabels[status.updateStage];
+	if (!status.updateStartedAt) return label;
+	const seconds = Math.max(0, Math.floor((now - Date.parse(status.updateStartedAt)) / 1e3));
+	return `${label}, started ${formatAgo(seconds)}`;
+};
+/** How far the running update is, or when the latest version will be applied on its own, in words; `now` in ms. */
+const nextUpdateText = (status, now = Date.now()) => {
+	if (status.updating) return runningText(status, now);
 	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt))} UTC`;
 	return policyLabels[status.policy];
 };
-/** Why "Update now" failed, in words. */
+/** How the last update ended, in words, with the endpoint's message for the owner when it has one. */
+const lastUpdateText = (last) => {
+	const when = `${formatDateTime(Date.parse(last.finishedAt))} UTC`;
+	const headline = {
+		succeeded: `Updated to ${last.toVersion} on ${when}`,
+		unchanged: `The update to ${last.toVersion} on ${when} changed nothing`,
+		failed: `The update to ${last.toVersion} failed on ${when}`
+	}[last.outcome];
+	return last.message ? `${headline}: ${last.message}` : `${headline}.`;
+};
+/** Why "Update now" failed, in words: the endpoint's own message for a refusal, when it sends one. */
 const updateErrorText = (error) => {
+	if (isApiError(error) && error.status < 500 && error.problem.detail) return error.problem.detail;
 	if (isApiError(error) && error.status === 409) return "Already on the latest version, or an update is running.";
 	if (isApiError(error) && error.status === 403) return "Only an admin can update the runtime.";
 	return "The update could not be started. Try again later.";
 };
 //#endregion
-export { nextUpdateText, showsUpdateButton, updateErrorText };
+export { lastUpdateText, nextUpdateText, refreshMs, showsUpdateButton, updateErrorText };

package/dist/app/runtime/runtime-update-dialog.js

@@ -0,0 +1,66 @@
+import { Spinner } from "../../primitives/spinner.js";
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { lastUpdateText, nextUpdateText, updateErrorText } from "./runtime-status.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/runtime/runtime-update-dialog.tsx
+const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex justify-between gap-4 py-1",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: "font-medium tabular-nums",
+		children: value
+	})]
+});
+/**
+* The runtime update dialog: the versions, how far a running update is or when the policy applies the latest one, how
+* the last update ended (while none runs), and "Update now".
+*/
+const RuntimeUpdateDialog = ({ status, requesting, error, checkError, onUpdate, onClose }) => {
+	const last = status.updating ? void 0 : status.lastUpdate;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		title: "Runtime update",
+		description: status.updating ? /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), nextUpdateText(status)]
+		}) : nextUpdateText(status),
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Close"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: requesting,
+			disabled: status.updating || !status.updateAvailable,
+			onClick: onUpdate,
+			children: status.updating ? "Updating…" : "Update now"
+		})] }),
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "Current version",
+				value: status.version
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Latest version",
+				value: status.latest
+			}),
+			last && /* @__PURE__ */ jsx("p", {
+				className: last.outcome === "failed" ? "mt-3 text-danger-text" : "mt-3 text-muted-foreground",
+				children: lastUpdateText(last)
+			}),
+			error !== void 0 && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-3 text-danger-text",
+				children: updateErrorText(error)
+			}),
+			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-muted-foreground",
+				children: "The status could not be checked again; this is the last one read."
+			})
+		]
+	});
+};
+//#endregion
+export { RuntimeUpdateDialog };

package/dist/app/runtime/runtime-update.js

@@ -1,24 +1,14 @@
 import { Button } from "../../primitives/button.js";
-import { Dialog } from "../../primitives/dialog.js";
-import { nextUpdateText, showsUpdateButton, updateErrorText } from "./runtime-status.js";
+import { showsUpdateButton } from "./runtime-status.js";
+import { RuntimeUpdateDialog } from "./runtime-update-dialog.js";
 import { useRuntimeClient, useRuntimeStatus } from "./use-runtime-status.js";
 import { useState } from "react";
 import { ArrowUpCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/runtime/runtime-update.tsx
-const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex justify-between gap-4 py-1",
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground",
-		children: label
-	}), /* @__PURE__ */ jsx("span", {
-		className: "font-medium tabular-nums",
-		children: value
-	})]
-});
 /**
 * The top bar's runtime update button, shown while the endpoint reports an update and wants it shown, and the dialog
-* it opens: the versions, when the update policy applies the latest one, and "Update now". Below `md` only the icon shows.
+* it opens. On mobile only the icon shows.
 */
 const RuntimeUpdate = ({ client }) => {
 	const { status, update, requesting, error, checkError } = useRuntimeStatus(client);
@@ -35,39 +25,13 @@ const RuntimeUpdate = ({ client }) => {
 			className: "max-md:sr-only",
 			children: "Update"
 		})]
-	}), open && /* @__PURE__ */ jsxs(Dialog, {
-		title: "Runtime update",
-		description: nextUpdateText(status),
-		onClose: () => setOpen(false),
-		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-			onClick: () => setOpen(false),
-			children: "Close"
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "primary",
-			loading: requesting,
-			disabled: status.updating || !status.updateAvailable,
-			onClick: () => void update(),
-			children: status.updating ? "Updating…" : "Update now"
-		})] }),
-		children: [
-			/* @__PURE__ */ jsx(Row, {
-				label: "Current version",
-				value: status.version
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "Latest version",
-				value: status.latest
-			}),
-			error !== void 0 && /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "mt-3 text-danger-text",
-				children: updateErrorText(error)
-			}),
-			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
-				className: "mt-3 text-muted-foreground",
-				children: "The status could not be checked again; this is the last one read."
-			})
-		]
+	}), open && /* @__PURE__ */ jsx(RuntimeUpdateDialog, {
+		status,
+		requesting,
+		error,
+		checkError,
+		onUpdate: () => void update(),
+		onClose: () => setOpen(false)
 	})] });
 };
 const OwnRuntimeUpdate = ({ url }) => /* @__PURE__ */ jsx(RuntimeUpdate, { client: useRuntimeClient(url) });

package/dist/app/runtime/use-runtime-status.js

@@ -1,10 +1,8 @@
 import { useApiToken } from "../../auth/use-api-token.js";
+import { refreshMs } from "./runtime-status.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRuntimeClient } from "@protobase/client";
 //#region src/app/runtime/use-runtime-status.ts
-/** How often the status is read again: rarely, and more often while an update runs so the button goes away when it is done. */
-const refreshMs = 18e5;
-const updatingRefreshMs = 3e4;
 /** A client of the runtime endpoint at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
 const useRuntimeClient = (url) => {
 	const token = useApiToken();
@@ -17,7 +15,7 @@ const useRuntimeClient = (url) => {
 	}) : void 0, [url, ready]);
 };
 /**
-* The runtime's status, read on load and every half hour after, and `update` to apply the latest version now.
+* The runtime's status, read on load and every half hour after (every few seconds while an update runs), and `update` to apply the latest version now.
 * `status` keeps the last answer when a later read fails, which `checkError` then holds; `error` is why "Update now" failed.
 */
 const useRuntimeStatus = (client) => {
@@ -35,7 +33,7 @@ const useRuntimeStatus = (client) => {
 			setCheckError(void 0);
 		}, (reason) => active && setCheckError(reason));
 		read();
-		const timer = setInterval(() => void read(), updating ? updatingRefreshMs : refreshMs);
+		const timer = setInterval(() => void read(), refreshMs(updating));
 		return () => {
 			active = false;
 			clearInterval(timer);

package/dist/format/date.js

@@ -19,6 +19,12 @@ const time = new Intl.DateTimeFormat("en-GB", {
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
 const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+const formatAgo = (seconds) => {
+	if (seconds < 60) return `${seconds} s ago`;
+	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
+	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
+	return `${Math.floor(seconds / 86400)} d ago`;
+};
 new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 //#endregion
-export { formatDate, formatDateTime, formatDayShort };
+export { formatAgo, formatDate, formatDateTime, formatDayShort };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.10";
+var version = "0.19.11";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };