querysub 0.548.0 → 0.549.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.548.0",
+  "version": "0.549.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -71,7 +71,7 @@
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
     "peggy": "^5.0.6",
-    "sliftutils": "^1.7.34",
+    "sliftutils": "^1.7.35",
     "socket-function": "^1.2.26",
     "terser": "^5.31.0",
     "typenode": "^6.6.1",

package/src/deployManager/components/RouteConfigView.tsx

@@ -27,7 +27,6 @@ const FUTURE_COLOR = { h: 45, s: 80, l: 85 };
 // Windows are days or hours wide, so the countdown only has to be roughly right
 const TIME_REFRESH_INTERVAL = 60 * 1000;
 const WATCH_POLL_INTERVAL = 60 * 1000;
-const WATCH_ERROR_LIMIT = 500;
 const WATCH_ACTIVE_COLOR = { h: 195, s: 60, l: 85 };
 const WINDOW_HEADER_SIZE = 13;
 const BUCKET_TITLE_SIZE = 15;
@@ -239,28 +238,28 @@ function getServerUrl(source: Source): string | undefined {
 }
 
 async function refreshWatch(key: string): Promise<void> {
-    let watch = liveWatchData().watches[key];
-    if (!watch) return;
-    let { serverUrl, bucketName } = watch;
-    Querysub.localCommit(() => {
+    // Reads outside a synchronized context have to go through localRead, and the plain values are pulled out here so nothing proxied escapes into the async work
+    let target = Querysub.localRead(() => {
+        let watch = liveWatchData().watches[key];
+        if (!watch) return undefined;
+        return { serverUrl: watch.serverUrl, bucketName: watch.bucketName };
+    });
+    if (!target) return;
+    let { serverUrl, bucketName } = target;
+    Querysub.commit(() => {
         let current = liveWatchData().watches[key];
         if (current) current.loading = true;
     });
-    let result: RemoteConfig | undefined;
+    let live = await getServerActiveBucket({ url: serverUrl, account: STORAGE_ACCOUNT, bucketName });
+    // "Not loaded here" comes back as a string - it's a normal result, not an error
     let error: string | undefined;
-    try {
-        let live = await getServerActiveBucket({ url: serverUrl, account: STORAGE_ACCOUNT, bucketName });
-        // The server reports "not loaded here" as a string rather than throwing
-        if (typeof live === "string") {
-            error = live;
-        } else {
-            result = live.routing;
-        }
-    } catch (e) {
-        error = String((e as Error).stack ?? e).slice(0, WATCH_ERROR_LIMIT);
-        console.error(`Reading the live config of ${bucketName} on ${serverUrl} failed:`, (e as Error).stack ?? e);
+    let result: RemoteConfig | undefined;
+    if (typeof live === "string") {
+        error = live;
+    } else {
+        result = live.routing;
     }
-    Querysub.localCommit(() => {
+    Querysub.commit(() => {
         let current = liveWatchData().watches[key];
         // The watch may have been removed while the call was in flight
         if (!current) return;
@@ -277,8 +276,8 @@ function isWatched(serverUrl: string, bucketName: string): boolean {
 
 function toggleWatch(serverUrl: string, bucketName: string): void {
     let key = getWatchKey(serverUrl, bucketName);
-    let existed = !!liveWatchData().watches[key];
-    Querysub.localCommit(() => {
+    let existed = Querysub.localRead(() => !!liveWatchData().watches[key]);
+    Querysub.commit(() => {
         if (existed) {
             delete liveWatchData().watches[key];
             return;
@@ -290,13 +289,15 @@ function toggleWatch(serverUrl: string, bucketName: string): void {
 }
 
 function refreshAllWatches(): void {
-    for (let key of Object.keys(liveWatchData().watches)) {
+    // Fired from a timer, so the key list has to be read through localRead
+    let keys = Querysub.localRead(() => Object.keys(liveWatchData().watches));
+    for (let key of keys) {
         void refreshWatch(key);
     }
 }
 
 function clearWatches(): void {
-    Querysub.localCommit(() => {
+    Querysub.commit(() => {
         for (let key of Object.keys(liveWatchData().watches)) {
             delete liveWatchData().watches[key];
         }
@@ -347,7 +348,7 @@ function getSourceTags(source: Source): { icon: string; text: string }[] {
 /** Watching a source pins that server's own live view of the bucket to the top of the page, so disagreements between servers are visible directly. */
 class WatchButton extends qreact.Component<{ source: Source; bucketName: string }> {
     render() {
-        let serverUrl = getServerUrl(this.props.source);
+        const serverUrl = getServerUrl(this.props.source);
         // Only storage servers have a live in-memory state to read
         if (!serverUrl) return undefined;
         let watching = isWatched(serverUrl, this.props.bucketName);

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -701,7 +701,7 @@ export class ServiceDetailPage extends qreact.Component {
                             Cancel Scheduled Deploy
                         </button>
                         <button
-                            className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                            className={css.pad2(12, 8).button.bord2(45, 80, 35).hsl(45, 85, 82)}
                             disabled={this.state.isDeploying}
                             title="Changes the scheduled deploy to go live immediately"
                             onClick={() => {
@@ -818,8 +818,9 @@ export class ServiceDetailPage extends qreact.Component {
                     </span>}
                     <div className={css.hbox(8)}>
                         <button
-                            className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                            className={css.pad2(12, 8).button.bord2(45, 80, 35).hsl(45, 85, 82)}
                             disabled={this.state.isDeploying}
+                            title="Deploys immediately; the old instances keep running for their configured overlap before shutting down"
                             onClick={() => {
                                 this.confirmForceDeployNow(makeDeployConfig(Date.now()));
                             }}>

package/src/deployManager/components/StoragePage.tsx

@@ -11,7 +11,8 @@ import type { ArchivesConfig } from "sliftutils/storage/IArchives";
 import { UsageBar, getUsageThresholds } from "../../library-components/UsageBar";
 import { getSyncedController } from "../../library-components/SyncedController";
 import { assertIsManagementUser } from "../../diagnostics/managementPages";
-import { getEffectiveServiceConfigs, getLiveServiceParameters, getMachineTargets, applyCommandTemplate, ServiceParameters, DEFAULT_OVERLAP_TIME } from "../machineSchema";
+import { getLiveServiceParameters, getMachineTargets, applyCommandTemplate, ServiceParameters, ServiceConfig, MachineServiceController, DEFAULT_OVERLAP_TIME } from "../machineSchema";
+import { isDefined } from "../../misc";
 import { STORAGE_ACCOUNT } from "../../-a-archives/archives2";
 import { Table } from "../../5-diagnostics/Table";
 import { RouteConfigView } from "./RouteConfigView";
@@ -20,18 +21,24 @@ module.hotreload = true;
 
 const STORAGE_COMMAND_PREFIX = "yarn storageserve";
 const URL_ARG_REGEX = /--url\s+(\S+)/g;
-const ERROR_TEXT_LIMIT = 500;
 
-export type StorageServerBuckets = {
+/** The release a storage service is in the middle of. Read straight from the service configs, so it resolves without contacting any storage server - which is exactly when it matters most, since a deploy is the usual reason the servers don't answer. */
+export type StorageService = {
     serviceKey: string;
     serviceTitle: string;
-    /** The release the service is in the middle of, so the page can warn that these servers are about to move (or just did) */
     releaseTime?: number;
     overlapTime: number;
     hasOldParameters: boolean;
+};
+
+export type StorageServer = StorageService & {
     url: string;
+};
+
+export type StorageServerBuckets = StorageServer & {
+    /** Still waiting on this server's own endpoint - each server loads independently */
+    loading?: boolean;
     buckets?: ServerBucketInfo[];
-    error?: string;
 };
 
 function getStorageUrls(parameters: ServiceParameters): string[] {
@@ -46,35 +53,43 @@ function getStorageUrls(parameters: ServiceParameters): string[] {
     return urls;
 }
 
-class StoragePageControllerBase {
-    public async getStorageBuckets(): Promise<StorageServerBuckets[]> {
-        let configs = await getEffectiveServiceConfigs();
-        type ServiceForUrl = Omit<StorageServerBuckets, "url" | "buckets" | "error">;
-        let serviceByUrl = new Map<string, ServiceForUrl>();
-        for (let config of configs) {
-            let allParameters = [getLiveServiceParameters(config), config.parameters, config.oldParameters];
-            for (let parameters of allParameters) {
-                if (!parameters) continue;
-                for (let url of getStorageUrls(parameters)) {
-                    if (serviceByUrl.has(url)) continue;
-                    serviceByUrl.set(url, {
-                        serviceKey: parameters.key,
-                        serviceTitle: config.info.title,
-                        releaseTime: config.parameters.releaseTime,
-                        // The overlap always comes from the newest parameters, even though it governs how long the old instances outlive the release
-                        overlapTime: config.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME,
-                        hasOldParameters: !!config.oldParameters,
-                    });
-                }
+/** The storage servers a set of service configs runs, worked out on the client - it already has the configs, so asking the server to re-derive them would just make the whole page wait on one uncacheable call. */
+export function getStorageServers(configs: ServiceConfig[]): StorageServer[] {
+    let serviceByUrl = new Map<string, StorageServer>();
+    for (let config of configs) {
+        let allParameters = [getLiveServiceParameters(config), config.parameters, config.oldParameters];
+        for (let parameters of allParameters) {
+            if (!parameters) continue;
+            for (let url of getStorageUrls(parameters)) {
+                if (serviceByUrl.has(url)) continue;
+                serviceByUrl.set(url, {
+                    url,
+                    serviceKey: parameters.key,
+                    serviceTitle: config.info.title,
+                    releaseTime: config.parameters.releaseTime,
+                    // The overlap always comes from the newest parameters, even though it governs how long the old instances outlive the release
+                    overlapTime: config.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME,
+                    hasOldParameters: !!config.oldParameters,
+                });
             }
         }
-        return await Promise.all([...serviceByUrl].map(async ([url, service]) => {
-            try {
-                return { ...service, url, buckets: await listServerBuckets({ url, account: STORAGE_ACCOUNT }) };
-            } catch (e) {
-                return { ...service, url, error: String((e as Error).stack ?? e).slice(0, ERROR_TEXT_LIMIT) };
-            }
-        }));
+    }
+    return [...serviceByUrl.values()];
+}
+
+export function getStorageServices(servers: StorageServer[]): StorageService[] {
+    let byKey = new Map<string, StorageService>();
+    for (let server of servers) {
+        if (byKey.has(server.serviceKey)) continue;
+        byKey.set(server.serviceKey, server);
+    }
+    return [...byKey.values()];
+}
+
+class StoragePageControllerBase {
+    /** Purely a forwarder - browsers can't authenticate to a storage server themselves. One call per server, so each caches and refreshes on its own. */
+    public async getServerBuckets(url: string): Promise<ServerBucketInfo[]> {
+        return await listServerBuckets({ url, account: STORAGE_ACCOUNT });
     }
 }
 
@@ -82,7 +97,7 @@ export const StoragePageController = SocketFunction.register(
     "StoragePageController-4f1c93ab-77e2-4d15-9a30-1c6b8f5d2e04",
     new StoragePageControllerBase(),
     () => ({
-        getStorageBuckets: {},
+        getServerBuckets: {},
     }),
     () => ({
         hooks: [assertIsManagementUser],
@@ -149,8 +164,8 @@ function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
             syncing: undefined,
             error: "",
         };
-        if (server.error) {
-            rows.push({ ...baseRow, error: server.error });
+        if (server.loading) {
+            rows.push({ ...baseRow, bucket: "Loading..." });
             continue;
         }
         let buckets = [...server.buckets || []];
@@ -191,30 +206,6 @@ class ActivateBucketButton extends qreact.Component<{ serverUrl: string; bucketN
         activating: false,
         error: "",
     };
-    private async activate() {
-        this.state.activating = true;
-        this.state.error = "";
-        try {
-            let result = await activateServerBucket({
-                url: this.props.serverUrl,
-                account: STORAGE_ACCOUNT,
-                bucketName: this.props.bucketName,
-            });
-            // The server reports a refusal as a string instead of throwing
-            if (typeof result === "string") {
-                this.state.error = result;
-                console.error(`Activating bucket ${this.props.bucketName} on ${this.props.serverUrl} was refused: ${result}`);
-                return;
-            }
-            console.log(`Activated bucket ${this.props.bucketName} on ${this.props.serverUrl}`);
-            StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
-        } catch (e) {
-            this.state.error = String((e as Error).stack ?? e).slice(0, ERROR_TEXT_LIMIT);
-            console.error(`Activating bucket ${this.props.bucketName} on ${this.props.serverUrl} failed:`, (e as Error).stack ?? e);
-        } finally {
-            this.state.activating = false;
-        }
-    }
     render() {
         return <div className={css.hbox(6).wrap}>
             <div className={css.whiteSpace("nowrap")}>{INACTIVE_STATE}</div>
@@ -222,7 +213,29 @@ class ActivateBucketButton extends qreact.Component<{ serverUrl: string; bucketN
                 className={css.pad2(6, 1).button.bord2(0, 0, 20).hsl(0, 0, 100).whiteSpace("nowrap")}
                 disabled={this.state.activating}
                 onClick={() => {
-                    void this.activate();
+                    // Props and state are synchronized, so everything the async work needs is copied into plain locals HERE, in the tracked part
+                    let serverUrl = this.props.serverUrl;
+                    let bucketName = this.props.bucketName;
+                    this.state.activating = true;
+                    this.state.error = "";
+                    Querysub.onCommitFinished(async () => {
+                        let result = await activateServerBucket({ url: serverUrl, account: STORAGE_ACCOUNT, bucketName });
+                        // A refusal comes back as a string - it's a normal result, not an error
+                        let refusal = typeof result === "string" && result || "";
+                        if (refusal) {
+                            console.log(`Activating bucket ${bucketName} on ${serverUrl} was refused: ${refusal}`);
+                        } else {
+                            console.log(`Activated bucket ${bucketName} on ${serverUrl}`);
+                        }
+                        Querysub.commit(() => {
+                            this.state.activating = false;
+                            this.state.error = refusal;
+                            // Only this server's buckets changed
+                            if (!refusal) {
+                                StorageSynced(SocketFunction.browserNodeId()).getServerBuckets.reset(serverUrl);
+                            }
+                        });
+                    });
                 }}
             >
                 {this.state.activating && "Activating..." || "Activate"}
@@ -315,43 +328,71 @@ class IndexSourcesCell extends qreact.Component<{ sources: ArchivesConfig["index
     }
 }
 
-const DEPLOY_PENDING_COLOR = { h: 35, s: 80, l: 45 };
-const DEPLOY_OVERLAP_COLOR = { h: 280, s: 60, l: 45 };
+const DEPLOY_PENDING_HUE = { h: 35, s: 80 };
+const DEPLOY_OVERLAP_HUE = { h: 280, s: 60 };
 const DEPLOY_NOTICE_FONT_SIZE = 14;
+const DEPLOY_NOTICE_TEXT_LIGHTNESS = 30;
+const DEPLOY_NOTICE_BORDER_LIGHTNESS = 55;
+const DEPLOY_NOTICE_BACKGROUND_LIGHTNESS = 94;
+
+class DeployNotice extends qreact.Component<{
+    hue: { h: number; s: number };
+    icon: string;
+    title: string;
+    detail: string;
+    tooltip: string;
+}> {
+    render() {
+        let { hue, icon, title, detail, tooltip } = this.props;
+        return <div
+            className={
+                css.hbox(8).pad2(12, 8).fontSize(DEPLOY_NOTICE_FONT_SIZE).alignItems("center")
+                    .hsl(hue.h, hue.s, DEPLOY_NOTICE_BACKGROUND_LIGHTNESS)
+                    .bord2(hue.h, hue.s, DEPLOY_NOTICE_BORDER_LIGHTNESS)
+                    .colorhsl(hue.h, hue.s, DEPLOY_NOTICE_TEXT_LIGHTNESS)
+            }
+            title={tooltip}
+        >
+            <div className={css.fontSize(DEPLOY_NOTICE_FONT_SIZE + 4)}>{icon}</div>
+            <div className={css.vbox(2)}>
+                <div className={css.boldStyle}>{title}</div>
+                <div className={css.fontSize(DEPLOY_NOTICE_FONT_SIZE - 2)}>{detail}</div>
+            </div>
+        </div>;
+    }
+}
 
 /** The services behind these storage servers may be mid-release, which moves (or duplicates) the servers the page just read from. */
-class DeployNotices extends qreact.Component<{ servers: StorageServerBuckets[] }> {
+class DeployNotices extends qreact.Component<{ services: StorageService[] }> {
     render() {
         let now = Querysub.nowDelayed(timeInSecond);
-        let byService = new Map<string, StorageServerBuckets>();
-        for (let server of this.props.servers) {
-            if (byService.has(server.serviceKey)) continue;
-            byService.set(server.serviceKey, server);
-        }
         let notices: preact.ComponentChild[] = [];
-        for (let [serviceKey, service] of byService) {
+        for (let service of this.props.services) {
+            let serviceKey = service.serviceKey;
             let releaseTime = service.releaseTime || 0;
             // The old instances run out their overlap purely on time - we don't verify they're actually still up
             if (!releaseTime || !service.hasOldParameters) continue;
             let killTime = releaseTime + service.overlapTime;
             if (now < releaseTime) {
-                notices.push(<div
+                notices.push(<DeployNotice
                     key={serviceKey + "pending"}
-                    className={css.pad2(10, 6).fontSize(DEPLOY_NOTICE_FONT_SIZE).boldStyle.colorhsl(DEPLOY_PENDING_COLOR.h, DEPLOY_PENDING_COLOR.s, DEPLOY_PENDING_COLOR.l).bord2(DEPLOY_PENDING_COLOR.h, DEPLOY_PENDING_COLOR.s, DEPLOY_PENDING_COLOR.l + 35)}
-                    title={`Deploys at ${formatDateTimeDetailed(releaseTime)}`}
-                >
-                    🕐 {service.serviceTitle} ({serviceKey}) deploys in {formatTime(releaseTime - now)}
-                </div>);
+                    hue={DEPLOY_PENDING_HUE}
+                    icon="🕐"
+                    title={`Deploys in ${formatTime(releaseTime - now)}`}
+                    detail={`${service.serviceTitle} (${serviceKey})`}
+                    tooltip={`Deploys at ${formatDateTimeDetailed(releaseTime)}`}
+                />);
                 continue;
             }
             if (now < killTime) {
-                notices.push(<div
+                notices.push(<DeployNotice
                     key={serviceKey + "overlap"}
-                    className={css.pad2(10, 6).fontSize(DEPLOY_NOTICE_FONT_SIZE).boldStyle.colorhsl(DEPLOY_OVERLAP_COLOR.h, DEPLOY_OVERLAP_COLOR.s, DEPLOY_OVERLAP_COLOR.l).bord2(DEPLOY_OVERLAP_COLOR.h, DEPLOY_OVERLAP_COLOR.s, DEPLOY_OVERLAP_COLOR.l + 35)}
-                    title={`Old instances shut down at ${formatDateTimeDetailed(killTime)}`}
-                >
-                    🔀 {service.serviceTitle} ({serviceKey}) still has an old version running for {formatTime(killTime - now)}
-                </div>);
+                    hue={DEPLOY_OVERLAP_HUE}
+                    icon="🔀"
+                    title={`Old version still running for ${formatTime(killTime - now)}`}
+                    detail={`${service.serviceTitle} (${serviceKey})`}
+                    tooltip={`Old instances shut down at ${formatDateTimeDetailed(killTime)}`}
+                />);
             }
         }
         if (!notices.length) return undefined;
@@ -361,28 +402,29 @@ class DeployNotices extends qreact.Component<{ servers: StorageServerBuckets[] }
 
 async function resetWriteStats(servers: StorageServerBuckets[]): Promise<void> {
     await Promise.all(servers.map(async server => {
-        if (server.error) return;
-        try {
-            let { clearedBuckets } = await clearServerWriteStats({ url: server.url, account: STORAGE_ACCOUNT });
-            console.log(`Cleared write stats for ${clearedBuckets} buckets on ${server.url}`);
-        } catch (e) {
-            console.error(`Clearing write stats on ${server.url} failed:`, (e as Error).stack ?? e);
-        }
+        if (server.loading) return;
+        let { clearedBuckets } = await clearServerWriteStats({ url: server.url, account: STORAGE_ACCOUNT });
+        console.log(`Cleared write stats for ${clearedBuckets} buckets on ${server.url}`);
     }));
-    StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
+    Querysub.commit(() => {
+        StorageSynced(SocketFunction.browserNodeId()).getServerBuckets.resetAll();
+    });
 }
 
 export class StoragePage extends qreact.Component {
     render() {
-        const servers = StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets();
-        if (!servers) return <div>Loading storage servers...</div>;
-        if (!servers.length) {
-            return <div className={css.vbox(16)}>
-                <h2>Storage</h2>
-                <div>No services with a command starting with {JSON.stringify(STORAGE_COMMAND_PREFIX)} were found.</div>
-            </div>;
-        }
-        return <div className={css.vbox(16)}>
+        const controller = StorageSynced(SocketFunction.browserNodeId());
+        const machineController = MachineServiceController(SocketFunction.browserNodeId());
+        const serviceList = machineController.getServiceList();
+        // The configs are already synchronized to the client, so the deploy state needs no round trip at all
+        const configs = (serviceList || []).map(serviceId => machineController.getServiceConfig(serviceId)).filter(isDefined);
+        const storageServers = getStorageServers(configs);
+        const servers: StorageServerBuckets[] = storageServers.map(server => {
+            let buckets = controller.getServerBuckets(server.url);
+            if (!buckets) return { ...server, loading: true };
+            return { ...server, buckets };
+        });
+        const header = <>
             <div className={css.hbox(12)}>
                 <h2 className={css.flexGrow(1)}>Storage</h2>
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
@@ -393,12 +435,27 @@ export class StoragePage extends qreact.Component {
                 </button>
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
                     onClick={() => {
-                        StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
+                        controller.getServerBuckets.resetAll();
                     }}>
                     Refresh
                 </button>
             </div>
-            <DeployNotices servers={servers} />
+            <DeployNotices services={getStorageServices(storageServers)} />
+        </>;
+        if (!serviceList) {
+            return <div className={css.vbox(16)}>
+                {header}
+                <div>Loading services...</div>
+            </div>;
+        }
+        if (!servers.length) {
+            return <div className={css.vbox(16)}>
+                {header}
+                <div>No services with a command starting with {JSON.stringify(STORAGE_COMMAND_PREFIX)} were found.</div>
+            </div>;
+        }
+        return <div className={css.vbox(16)}>
+            {header}
             <Table
                 rows={getBucketRows(servers)}
                 columns={{

package/src/deployManager/components/deployButtons.tsx

@@ -85,7 +85,7 @@ export class UpdateButtons extends qreact.Component<{
                     : "All services release immediately. Their old instances keep running for their configured overlap before shutting down."}</div>
                 <div className={css.hbox(10)}>
                     <button
-                        className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                        className={css.pad2(12, 8).button + (noOverlap && css.bord2(0, 90, 30).hsl(0, 85, 65).colorhsl(0, 0, 100).fontWeight("bold") || css.bord2(45, 80, 35).hsl(45, 85, 82))}
                         onClick={() => {
                             modal && modal.close();
                             this.deployAll(outdatedServices, latestRef, noOverlap ? "nowNoOverlap" : "now");
@@ -174,7 +174,7 @@ export class UpdateButtons extends qreact.Component<{
                     </div>)}
                 </button>
                 <button
-                    className={buttonStyle.hsl(0, 70, 90)}
+                    className={buttonStyle.hsl(45, 85, 82)}
                     disabled={this.state.isDeploying}
                     title="Deploys immediately; the old instances keep running for their configured overlap before shutting down"
                     onClick={() => {