@chisquare-tech/origine-ngx-apps-services 0.2.1 → 0.2.3

package/fesm2022/chisquare-tech-origine-ngx-apps-services.mjs

@@ -78,6 +78,10 @@ class ServicesApi {
     deleteBackup(project, id, name) {
         return this.api.delete(this.i(project, id, 'backup/' + enc(name)));
     }
+    /** A link to a RabbitMQ instance's management UI, for the caller only (read-only for Developers). */
+    management(project, id) {
+        return this.api.post(this.i(project, id, 'management'), {}).pipe(map((r) => data(r)));
+    }
     restore(project, id, body) {
         return this.api.post(this.i(project, id, 'restore'), body).pipe(map((r) => data(r)));
     }
@@ -281,6 +285,12 @@ const DAYS = [
     { id: 'sun', label: 'Sunday' }, { id: 'mon', label: 'Monday' }, { id: 'tue', label: 'Tuesday' }, { id: 'wed', label: 'Wednesday' },
     { id: 'thu', label: 'Thursday' }, { id: 'fri', label: 'Friday' }, { id: 'sat', label: 'Saturday' },
 ];
+/** While the browser tab is hidden, the page's polls slow to once a minute (the cell is read for each). */
+const HIDDEN_POLL_MS = 60_000;
+/** The delay before the next poll: `visibleMs` while the page is seen, once a minute while it is hidden. */
+function pollDelay(visibleMs) {
+    return typeof document !== 'undefined' && document.visibilityState === 'hidden' ? Math.max(visibleMs, HIDDEN_POLL_MS) : visibleMs;
+}
 
 // /{org}/{project}/services (prototype "services_list"): the project's instances with their state,
 // what they are attached to, their backups and price, and the organization's quota line (SVC-01, 26).
@@ -396,7 +406,7 @@ class ServicesListPage {
       </div>
       <div class="o-g2">
         <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'nats' }" data-testid="svc-new-nats"><span class="o-sq" style="background:var(--o-ok)"></span><div class="o-col" style="gap:2px"><b>NATS with JetStream</b><span class="o-faint o-sm">Streams, consumers, KV buckets · 3-node cluster</span></div><span class="o-r o-faint o-sm">Create →</span></a>
-        <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'rabbitmq' }" data-testid="svc-new-rabbitmq"><span class="o-sq" style="background:var(--o-run)"></span><div class="o-col" style="gap:2px"><b>RabbitMQ</b><span class="o-faint o-sm">Quorum queues · inspected in the console</span></div><span class="o-r o-faint o-sm">Create →</span></a>
+        <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'rabbitmq' }" data-testid="svc-new-rabbitmq"><span class="o-sq" style="background:var(--o-run)"></span><div class="o-col" style="gap:2px"><b>RabbitMQ</b><span class="o-faint o-sm">Quorum queues · management UI through the platform</span></div><span class="o-r o-faint o-sm">Create →</span></a>
       </div>
       <span class="o-faint o-sm">Lifecycle states: {{ lifecycle }}. Open-source engines only.</span>
     </div>
@@ -446,7 +456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       </div>
       <div class="o-g2">
         <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'nats' }" data-testid="svc-new-nats"><span class="o-sq" style="background:var(--o-ok)"></span><div class="o-col" style="gap:2px"><b>NATS with JetStream</b><span class="o-faint o-sm">Streams, consumers, KV buckets · 3-node cluster</span></div><span class="o-r o-faint o-sm">Create →</span></a>
-        <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'rabbitmq' }" data-testid="svc-new-rabbitmq"><span class="o-sq" style="background:var(--o-run)"></span><div class="o-col" style="gap:2px"><b>RabbitMQ</b><span class="o-faint o-sm">Quorum queues · inspected in the console</span></div><span class="o-r o-faint o-sm">Create →</span></a>
+        <a class="o-card o-cb o-flex" [routerLink]="host.link('services/new')" [queryParams]="{ engine: 'rabbitmq' }" data-testid="svc-new-rabbitmq"><span class="o-sq" style="background:var(--o-run)"></span><div class="o-col" style="gap:2px"><b>RabbitMQ</b><span class="o-faint o-sm">Quorum queues · management UI through the platform</span></div><span class="o-r o-faint o-sm">Create →</span></a>
       </div>
       <span class="o-faint o-sm">Lifecycle states: {{ lifecycle }}. Open-source engines only.</span>
     </div>
@@ -490,7 +500,9 @@ class ServicesNewPage {
                 return '3-node cluster';
             if (e?.ha === 'standby')
                 return e.id === 'mysql' ? 'Standby with automatic failover (3 nodes: MOCO runs 1, 3 or 5)' : 'Standby node with automatic failover';
-            return `${e?.name ?? 'This engine'} runs one node for now`;
+            if (e?.ha === 'replica')
+                return 'Replica with automatic failover (three Sentinels watch the primary)';
+            return `${e?.name ?? 'This engine'} runs one node`;
         }, ...(ngDevMode ? [{ debugName: "haLabel" }] : /* istanbul ignore next */ []));
         this.keep = signal(7, ...(ngDevMode ? [{ debugName: "keep" }] : /* istanbul ignore next */ []));
         this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
@@ -1288,7 +1300,7 @@ class ServiceLogsTab {
                 this.lines.set(l.lines ?? []);
                 this.note.set(l.message ?? '');
                 this.loaded.set(true);
-                this.timer = setTimeout(() => this.load(p, id, k), 10_000);
+                this.timer = setTimeout(() => this.load(p, id, k), pollDelay(10_000));
             },
             error: (e) => {
                 this.loaded.set(true);
@@ -1595,7 +1607,7 @@ class ServicePage {
         this.conn = computed(() => this.revealed()?.connection ?? this.d()?.connection ?? null, ...(ngDevMode ? [{ debugName: "conn" }] : /* istanbul ignore next */ []));
         this.snippetKeys = computed(() => {
             const s = this.conn()?.snippets ?? {};
-            return ['uri', 'psql', 'mysql', 'valkey-cli', 'nats', 'node', 'cli'].filter((k) => k in s);
+            return ['uri', 'psql', 'mysql', 'valkey-cli', 'sentinel', 'nats', 'node', 'cli'].filter((k) => k in s);
         }, ...(ngDevMode ? [{ debugName: "snippetKeys" }] : /* istanbul ignore next */ []));
         this.backups = computed(() => [...(this.d()?.backups ?? [])].sort((a, b) => (b.startedAt ?? '9').localeCompare(a.startedAt ?? '9')), ...(ngDevMode ? [{ debugName: "backups" }] : /* istanbul ignore next */ []));
         this.attEnvs = computed(() => {
@@ -1688,7 +1700,19 @@ class ServicePage {
                     this.api.logs(this.key(), d, 'slow', 20).pipe(catchError(() => of(null))).subscribe((l) => this.slowLines.set(l?.lines ?? []));
             });
         });
+        // Hidden, the polls slow to once a minute; seen again, the figures are read at once.
+        const seen = () => {
+            if (document.visibilityState !== 'visible' || !this.d())
+                return;
+            this.load();
+            if (this.tab() !== 'overview' && this.tab() !== 'metrics')
+                return;
+            clearTimeout(this.metricsTimer);
+            this.pollMetrics();
+        };
+        document.addEventListener('visibilitychange', seen);
         inject(DestroyRef).onDestroy(() => {
+            document.removeEventListener('visibilitychange', seen);
             params.unsubscribe();
             query.unsubscribe();
             clearTimeout(this.loadTimer);
@@ -1729,7 +1753,7 @@ class ServicePage {
                         this.pitr.set(toLocalInput(new Date().toISOString()));
                 }
                 const settling = moving(d.state) || d.readyNodes < d.nodes || (d.dumps ?? []).some((x) => x.phase !== 'completed' && x.phase !== 'failed') || !!this.openRotation() || d.attachments.some((a) => a.state === 'pending') || (d.backups ?? []).some((b) => b.phase === 'running' || b.phase === 'pending');
-                this.loadTimer = setTimeout(() => this.load(), settling ? 4000 : 30_000);
+                this.loadTimer = setTimeout(() => this.load(), pollDelay(settling ? 4000 : 30_000));
             },
             error: (e) => {
                 this.error.set(e?.status === 404 ? 'No such service in this project.' : apiMessage(e, 'The service could not be loaded.'));
@@ -1743,9 +1767,9 @@ class ServicePage {
         this.api.metrics(this.key(), d.id).subscribe({
             next: (m) => {
                 this.readings.update((rs) => [...rs, m].slice(-90));
-                this.metricsTimer = setTimeout(() => this.pollMetrics(), 10_000);
+                this.metricsTimer = setTimeout(() => this.pollMetrics(), pollDelay(10_000));
             },
-            error: () => (this.metricsTimer = setTimeout(() => this.pollMetrics(), 30_000)),
+            error: () => (this.metricsTimer = setTimeout(() => this.pollMetrics(), pollDelay(30_000))),
         });
     }
     setTab(t) {
@@ -1756,7 +1780,7 @@ class ServicePage {
         return `${cpu} / ${ram} / ${d.diskGb} GB`;
     }
     snippetLabel(k) {
-        return { uri: 'URI', node: 'Node', cli: 'origine CLI', nats: 'nats' }[k] ?? k;
+        return { uri: 'URI', node: 'Node', cli: 'origine CLI', nats: 'nats', sentinel: 'Sentinel' }[k] ?? k;
     }
     attState(a) {
         return a.state === 'live' ? 'Injected' : a.state === 'failed' ? 'Failed' : 'Redeploying…';
@@ -1885,13 +1909,14 @@ class ServicePage {
         return `${d.name}-restore-1`.slice(0, 40);
     }
     askRestore(d, b) {
-        this.dialog.set({ kind: 'restore', name: this.restoreName(d), point: '', backup: b.name });
+        const vols = d.engine === 'rabbitmq' && b.volumes?.phase === 'completed';
+        this.dialog.set({ kind: 'restore', name: this.restoreName(d), point: '', backup: b.name, volumes: vols, hasVolumes: vols });
     }
     askPitr(d) {
         this.dialog.set({ kind: 'restore', name: this.restoreName(d), point: this.pitr(), backup: '' });
     }
     restore(d, dl) {
-        const body = dl.point ? { pointInTime: fromLocalInput(dl.point), name: dl.name } : { backup: dl.backup, name: dl.name };
+        const body = dl.point ? { pointInTime: fromLocalInput(dl.point), name: dl.name } : { backup: dl.backup, name: dl.name, volumes: !!dl.volumes };
         this.busy.set(true);
         this.error.set('');
         this.api.restore(this.key(), d.id, body).subscribe({
@@ -1946,6 +1971,35 @@ class ServicePage {
     refresh() {
         this.load();
     }
+    /** Opens the instance's management UI in a new tab: a link for this person that expires. */
+    openManagement(d) {
+        const tab = window.open('', '_blank');
+        this.busy.set(true);
+        this.error.set('');
+        this.api.management(this.key(), d.id).subscribe({
+            next: (l) => {
+                this.busy.set(false);
+                if (tab) {
+                    tab.opener = null;
+                    tab.location.href = l.url;
+                }
+                else
+                    window.open(l.url, '_blank', 'noopener');
+                this.notice.set(`The management UI of ${d.name} opened in a new tab${l.mode === 'read' ? ', read-only for your role' : ''}. Its link works for you for 30 minutes.`);
+            },
+            error: (e) => {
+                this.busy.set(false);
+                tab?.close();
+                this.error.set(apiMessage(e, 'The management UI could not be opened.'));
+            },
+        });
+    }
+    snapshotLine(d) {
+        const v = d.volumeSnapshots;
+        if (v?.class)
+            return `Each backup also snapshots every node's volume (${v.class}): restores can bring the messages back.`;
+        return `Backups hold the definitions only: ${v?.message || 'this cell has no CSI snapshot class'}.`;
+    }
     snapshotName(d) {
         return d.engine === 'nats' ? 'stream snapshot' : d.engine === 'rabbitmq' ? 'definitions export' : 'RDB snapshot';
     }
@@ -2016,6 +2070,7 @@ class ServicePage {
           <div class="o-flex"><h1 class="o-t">{{ d.name }}</h1><span [class]="chip(d.state)" data-testid="svc-state">{{ d.state }}</span></div>
         </div>
         <div class="o-acts">
+          @if (d.management && !d.deletedAt) {<button type="button" class="o-btn" (click)="openManagement(d)" [disabled]="busy() || d.state !== 'Running' && d.state !== 'Updating' && d.state !== 'Degraded'" [title]="d.management === 'read' ? 'Read-only for your role' : 'As the instance administrator'" data-testid="svc-management">Open management UI@if (d.management === 'read') {<span class="o-faint o-xs"> · read-only</span>}</button>}
           @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
           @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
           <a class="o-btn" [routerLink]="host.link('dashboards')">Dashboard</a>
@@ -2171,7 +2226,7 @@ class ServicePage {
             @for (b of backups(); track b.name) {
               <div class="o-row" [attr.data-testid]="'svc-backup-' + b.name">
                 <span [class]="'o-dot ' + backupDot(b)"></span><span style="width:150px">{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint o-sm" style="width:80px">{{ backupNote(b) }}</span>
-                <span class="o-chip">{{ kind(b) }}</span><span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
+                <span class="o-chip">{{ kind(b) }}</span>@if (b.volumes) {<span [class]="'o-chip ' + (b.volumes.phase === 'completed' ? 'o-grn' : b.volumes.phase === 'failed' ? 'o-red' : 'o-blu')" [title]="b.volumes.error || b.volumes.snapshots + ' volume snapshot(s)'" data-testid="svc-backup-volumes">{{ b.volumes.phase === 'completed' ? '+ queue data' : b.volumes.phase === 'failed' ? 'queue data failed' : 'snapshotting' }}</span>}<span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
                 @if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
                 @if (b.kind === 'on-demand' && d.canManage && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
               </div>
@@ -2187,7 +2242,8 @@ class ServicePage {
                 <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!d.canManage || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
               </div>
             } @else {
-              <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span></div>
+              <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span>
+                @if (d.engine === 'rabbitmq') {<span class="o-hint" data-testid="svc-snapshot-support"><span [class]="'o-chip ' + (d.volumeSnapshots?.class ? 'o-grn' : '')">{{ d.volumeSnapshots?.class ? 'Queue data snapshots' : 'Definitions only' }}</span> {{ snapshotLine(d) }}</span>}</div>
             }
             <div class="o-card o-cb o-form">
               <b>Schedule</b>
@@ -2242,9 +2298,18 @@ class ServicePage {
                 <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
+              @case ('replica') {
+                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Second replica@if (d.sentinel; as sn) {<span class="o-faint o-sm o-mono"> · Sentinels {{ sn.hosts.length }} × :{{ sn.port }}, master {{ sn.master }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
+                  @if (d.canManage) {
+                    <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - 1)" [disabled]="busy() || d.replicas === 0">−</button>
+                    <button type="button" class="o-btn o-xs" (click)="topology(d, true, d.replicas + 1)" [disabled]="busy() || d.replicas + 1 > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
+                  }</div>
+                <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now · apps get REDIS_SENTINEL_URL beside REDIS_URL</div>
+              }
               @default {
-                <div class="o-row"><span style="flex:1">Replica with failover</span><b class="o-ph-tag o-later">Later</b></div>
-                <div class="o-cf">{{ d.engineName }} runs one node for now; daily snapshots keep its data.</div>
+                <div class="o-row"><span style="flex:1">One node</span></div>
+                <div class="o-cf">{{ d.engineName }} runs one node; daily snapshots keep its data.</div>
               }
             }
           </div>
@@ -2299,6 +2364,7 @@ class ServicePage {
               }
               @case ('restore') {
                 <span>{{ dl.point ? 'Restores ' + d.name + ' as it was at ' + whenLocal(dl.point) : 'Restores backup ' + dl.backup }} into a new instance with the same users and passwords. {{ d.name }} keeps running untouched; move its apps over afterwards if you want.</span>
+                @if (dl.hasVolumes) {<label class="o-flex o-sm"><input type="checkbox" [(ngModel)]="dl.volumes" data-testid="svc-restore-volumes" /> With the queue data (the backup's volume snapshots): messages, not only the definitions</label>}
                 <label class="o-fld"><span class="o-sm">New instance</span><input class="o-in o-mono" [(ngModel)]="dl.name" data-testid="svc-restore-name" autocomplete="off" /></label>
               }
               @case ('rotate') {
@@ -2339,6 +2405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           <div class="o-flex"><h1 class="o-t">{{ d.name }}</h1><span [class]="chip(d.state)" data-testid="svc-state">{{ d.state }}</span></div>
         </div>
         <div class="o-acts">
+          @if (d.management && !d.deletedAt) {<button type="button" class="o-btn" (click)="openManagement(d)" [disabled]="busy() || d.state !== 'Running' && d.state !== 'Updating' && d.state !== 'Degraded'" [title]="d.management === 'read' ? 'Read-only for your role' : 'As the instance administrator'" data-testid="svc-management">Open management UI@if (d.management === 'read') {<span class="o-faint o-xs"> · read-only</span>}</button>}
           @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
           @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
           <a class="o-btn" [routerLink]="host.link('dashboards')">Dashboard</a>
@@ -2494,7 +2561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             @for (b of backups(); track b.name) {
               <div class="o-row" [attr.data-testid]="'svc-backup-' + b.name">
                 <span [class]="'o-dot ' + backupDot(b)"></span><span style="width:150px">{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint o-sm" style="width:80px">{{ backupNote(b) }}</span>
-                <span class="o-chip">{{ kind(b) }}</span><span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
+                <span class="o-chip">{{ kind(b) }}</span>@if (b.volumes) {<span [class]="'o-chip ' + (b.volumes.phase === 'completed' ? 'o-grn' : b.volumes.phase === 'failed' ? 'o-red' : 'o-blu')" [title]="b.volumes.error || b.volumes.snapshots + ' volume snapshot(s)'" data-testid="svc-backup-volumes">{{ b.volumes.phase === 'completed' ? '+ queue data' : b.volumes.phase === 'failed' ? 'queue data failed' : 'snapshotting' }}</span>}<span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
                 @if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
                 @if (b.kind === 'on-demand' && d.canManage && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
               </div>
@@ -2510,7 +2577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!d.canManage || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
               </div>
             } @else {
-              <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span></div>
+              <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span>
+                @if (d.engine === 'rabbitmq') {<span class="o-hint" data-testid="svc-snapshot-support"><span [class]="'o-chip ' + (d.volumeSnapshots?.class ? 'o-grn' : '')">{{ d.volumeSnapshots?.class ? 'Queue data snapshots' : 'Definitions only' }}</span> {{ snapshotLine(d) }}</span>}</div>
             }
             <div class="o-card o-cb o-form">
               <b>Schedule</b>
@@ -2565,9 +2633,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
+              @case ('replica') {
+                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Second replica@if (d.sentinel; as sn) {<span class="o-faint o-sm o-mono"> · Sentinels {{ sn.hosts.length }} × :{{ sn.port }}, master {{ sn.master }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
+                  @if (d.canManage) {
+                    <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - 1)" [disabled]="busy() || d.replicas === 0">−</button>
+                    <button type="button" class="o-btn o-xs" (click)="topology(d, true, d.replicas + 1)" [disabled]="busy() || d.replicas + 1 > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
+                  }</div>
+                <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now · apps get REDIS_SENTINEL_URL beside REDIS_URL</div>
+              }
               @default {
-                <div class="o-row"><span style="flex:1">Replica with failover</span><b class="o-ph-tag o-later">Later</b></div>
-                <div class="o-cf">{{ d.engineName }} runs one node for now; daily snapshots keep its data.</div>
+                <div class="o-row"><span style="flex:1">One node</span></div>
+                <div class="o-cf">{{ d.engineName }} runs one node; daily snapshots keep its data.</div>
               }
             }
           </div>
@@ -2622,6 +2699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               }
               @case ('restore') {
                 <span>{{ dl.point ? 'Restores ' + d.name + ' as it was at ' + whenLocal(dl.point) : 'Restores backup ' + dl.backup }} into a new instance with the same users and passwords. {{ d.name }} keeps running untouched; move its apps over afterwards if you want.</span>
+                @if (dl.hasVolumes) {<label class="o-flex o-sm"><input type="checkbox" [(ngModel)]="dl.volumes" data-testid="svc-restore-volumes" /> With the queue data (the backup's volume snapshots): messages, not only the definitions</label>}
                 <label class="o-fld"><span class="o-sm">New instance</span><input class="o-in o-mono" [(ngModel)]="dl.name" data-testid="svc-restore-name" autocomplete="off" /></label>
               }
               @case ('rotate') {
@@ -2659,5 +2737,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DAYS, ENGINE_COLOUR, LIFECYCLE, PRESETS, ServiceConsoleTab, ServiceDumpsCard, ServiceLogsTab, ServiceMetricsTab, ServicePage, ServicesApi, ServicesHost, ServicesListPage, ServicesNewPage, apiMessage, backupKind, backupsLine, bytes, fromLocalInput, hhmm, hhmmss, money, moving, num, pct, presetChip, ratio, shortDate, spark, sparkPath, stateChip, stateDot, toLocalInput, utcHour, when };
+export { DAYS, ENGINE_COLOUR, HIDDEN_POLL_MS, LIFECYCLE, PRESETS, ServiceConsoleTab, ServiceDumpsCard, ServiceLogsTab, ServiceMetricsTab, ServicePage, ServicesApi, ServicesHost, ServicesListPage, ServicesNewPage, apiMessage, backupKind, backupsLine, bytes, fromLocalInput, hhmm, hhmmss, money, moving, num, pct, pollDelay, presetChip, ratio, shortDate, spark, sparkPath, stateChip, stateDot, toLocalInput, utcHour, when };
 //# sourceMappingURL=chisquare-tech-origine-ngx-apps-services.mjs.map