@chisquare-tech/origine-ngx-apps-services 0.3.0 → 0.4.0

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component, input, output, Directive } from '@angular/core';
 import { ApiService } from '@thescaffold/ngx-core';
 import { map, forkJoin, of } from 'rxjs';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
@@ -86,6 +86,19 @@ class ServicesApi {
     management(project, id) {
         return this.api.post(this.i(project, id, 'management'), {}).pipe(map((r) => data(r)));
     }
+    /** A major version upgrade (V8-01): in place or into a new instance, now or in the maintenance window. */
+    upgrade(project, id, body) {
+        return this.api.post(this.i(project, id, 'upgrade'), body).pipe(map((r) => data(r)));
+    }
+    cancelUpgrade(project, id) {
+        return this.api.delete(this.i(project, id, 'upgrade')).pipe(map((r) => data(r)));
+    }
+    addExtension(project, id, database, name) {
+        return this.api.post(this.i(project, id, 'database/' + enc(database) + '/extension'), { name }).pipe(map((r) => data(r)));
+    }
+    removeExtension(project, id, database, name) {
+        return this.api.delete(this.i(project, id, 'database/' + enc(database) + '/extension/' + enc(name))).pipe(map((r) => data(r)));
+    }
     restore(project, id, body) {
         return this.api.post(this.i(project, id, 'restore'), body).pipe(map((r) => data(r)));
     }
@@ -1585,6 +1598,351 @@ function show(f) {
     return num(f.value);
 }
 
+/** Runs an action with a busy flag; errors go to failed. */
+class Card {
+    constructor() {
+        this.api = inject(ServicesApi);
+        this.d = input.required(...(ngDevMode ? [{ debugName: "d" }] : /* istanbul ignore next */ []));
+        this.projectKey = input.required(...(ngDevMode ? [{ debugName: "projectKey" }] : /* istanbul ignore next */ []));
+        this.done = output();
+        this.failed = output();
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.when = (s) => when(s);
+    }
+    may(id) {
+        return (this.d().caps ?? []).includes(id);
+    }
+    go(obs, ok, fail) {
+        this.busy.set(true);
+        obs.subscribe({
+            next: (v) => {
+                this.busy.set(false);
+                ok(v);
+            },
+            error: (e) => {
+                this.busy.set(false);
+                this.failed.emit(apiMessage(e, fail));
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: Card, isStandalone: true, inputs: { d: { classPropertyName: "d", publicName: "d", isSignal: true, isRequired: true, transformFunction: null }, projectKey: { classPropertyName: "projectKey", publicName: "projectKey", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { done: "done", failed: "failed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Card, decorators: [{
+            type: Directive
+        }], propDecorators: { d: [{ type: i0.Input, args: [{ isSignal: true, alias: "d", required: true }] }], projectKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectKey", required: true }] }], done: [{ type: i0.Output, args: ["done"] }], failed: [{ type: i0.Output, args: ["failed"] }] } });
+const UPGRADE_STATE = {
+    scheduled: 'Scheduled', 'backing-up': 'Taking the pre-upgrade backup', upgrading: 'Upgrading', testing: 'Building the new instance',
+    ready: 'Ready to swap', done: 'Done', failed: 'Failed', canceled: 'Canceled',
+};
+// Settings › Major version (V8-01, SVC-08): what the instance can be upgraded to and how (in
+// place, or into a new instance for testing), now or in the maintenance window with a week's
+// notice; the upgrade in progress, with its pre-upgrade backup (the way back); refusals with the reason.
+class ServiceUpgradeCard extends Card {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.host = inject(ServicesHost);
+        this.method = signal('in-place', ...(ngDevMode ? [{ debugName: "method" }] : /* istanbul ignore next */ []));
+        this.whenTo = signal('window', ...(ngDevMode ? [{ debugName: "whenTo" }] : /* istanbul ignore next */ []));
+    }
+    open(s) {
+        return !['done', 'failed', 'canceled'].includes(s);
+    }
+    stateLabel(s) {
+        return UPGRADE_STATE[s] ?? s;
+    }
+    chip(s) {
+        return s === 'done' || s === 'ready' ? 'o-grn' : s === 'failed' ? 'o-red' : s === 'canceled' || s === 'scheduled' ? 'o-amb' : 'o-blu';
+    }
+    start() {
+        const u = this.d().upgrade;
+        const m = u?.offer.methods.includes(this.method()) ? this.method() : (u?.offer.methods[0] ?? 'in-place');
+        this.go(this.api.upgrade(this.projectKey(), this.d().id, { version: u?.offer.to, method: m, when: this.whenTo() }), (x) => {
+            const c = x.upgrade?.current;
+            this.done.emit(c?.scheduled ? `Upgrade to ${c.to} scheduled for ${when(c.at)}; the people concerned are told now.` : `Upgrading to ${c?.to}: the pre-upgrade backup runs first.`);
+        }, 'The upgrade could not be started.');
+    }
+    cancel() {
+        this.go(this.api.cancelUpgrade(this.projectKey(), this.d().id), () => this.done.emit('Upgrade canceled.'), 'The upgrade could not be canceled.');
+    }
+    openTarget(name) {
+        this.router.navigate(this.host.link('services/' + name));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceUpgradeCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceUpgradeCard, isStandalone: true, selector: "o-svc-upgrade", usesInheritance: true, ngImport: i0, template: `
+    @let u = d().upgrade;
+    <div class="o-card" data-testid="svc-upgrade">
+      <div class="o-ch"><b>Major version</b><span class="o-r">{{ d().engineName }} {{ u?.running || d().version }}</span></div>
+      <div class="o-cb o-col" style="gap:8px">
+        @if (u?.current; as c) {
+          <div class="o-flex o-wrap" data-testid="svc-upgrade-current">
+            <span [class]="'o-chip ' + chip(c.state)">{{ stateLabel(c.state) }}</span>
+            <span class="o-sm">{{ c.from }} to {{ c.to }}, {{ c.method === 'new-instance' ? 'into a new instance' : 'in place' }}</span>
+            @if (c.state === 'scheduled') {<span class="o-faint o-sm">starts {{ when(c.at) }}</span>}
+            @if (open(c.state) && (c.state === 'scheduled' || c.state === 'backing-up') && may('services.instance.configure')) {
+              <button type="button" class="o-btn o-sm o-r" (click)="cancel()" [disabled]="busy()" data-testid="svc-upgrade-cancel">Cancel upgrade</button>
+            }
+            @if (c.state === 'ready' && c.targetName) {<button type="button" class="o-btn o-sm o-r" (click)="openTarget(c.targetName)">Open {{ c.targetName }}</button>}
+          </div>
+          @if (c.message) {<span class="o-hint">{{ c.message }}</span>}
+          @if (c.backupName && c.state !== 'canceled') {<span class="o-faint o-xs">Pre-upgrade backup: {{ c.backupName }}. To go back, restore it into a new instance on {{ c.from }}.</span>}
+        }
+        @if (!u?.current || !open(u!.current!.state)) {
+          @if (u?.offer?.refused) {
+            <span class="o-hint" data-testid="svc-upgrade-refused">{{ u!.offer.refused }}</span>
+          } @else if (u?.offer?.to) {
+            <span class="o-sm">Upgrade to <b>{{ d().engineName }} {{ u!.offer.to }}</b></span>
+            @for (n of u!.offer.notes; track n) {<span class="o-faint o-xs">{{ n }}</span>}
+            @if (may('services.instance.configure')) {
+              <div class="o-flex o-wrap">
+                <select class="o-in o-sm" style="width:auto" aria-label="How" [ngModel]="method()" (ngModelChange)="method.set($event)" data-testid="svc-upgrade-method">
+                  @for (m of u!.offer.methods; track m) {<option [value]="m">{{ m === 'new-instance' ? 'Into a new instance, for testing' : 'In place' }}</option>}
+                </select>
+                <select class="o-in o-sm" style="width:auto" aria-label="When" [ngModel]="whenTo()" (ngModelChange)="whenTo.set($event)" data-testid="svc-upgrade-when">
+                  <option value="window">In the maintenance window, with a week's notice</option>
+                  <option value="now">Now</option>
+                </select>
+                <button type="button" class="o-btn o-sm o-dark o-r" (click)="start()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-upgrade-go">Upgrade to {{ u!.offer.to }}</button>
+              </div>
+              <span class="o-faint o-xs">A backup is taken first and kept until you delete it.</span>
+            }
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceUpgradeCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-upgrade',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let u = d().upgrade;
+    <div class="o-card" data-testid="svc-upgrade">
+      <div class="o-ch"><b>Major version</b><span class="o-r">{{ d().engineName }} {{ u?.running || d().version }}</span></div>
+      <div class="o-cb o-col" style="gap:8px">
+        @if (u?.current; as c) {
+          <div class="o-flex o-wrap" data-testid="svc-upgrade-current">
+            <span [class]="'o-chip ' + chip(c.state)">{{ stateLabel(c.state) }}</span>
+            <span class="o-sm">{{ c.from }} to {{ c.to }}, {{ c.method === 'new-instance' ? 'into a new instance' : 'in place' }}</span>
+            @if (c.state === 'scheduled') {<span class="o-faint o-sm">starts {{ when(c.at) }}</span>}
+            @if (open(c.state) && (c.state === 'scheduled' || c.state === 'backing-up') && may('services.instance.configure')) {
+              <button type="button" class="o-btn o-sm o-r" (click)="cancel()" [disabled]="busy()" data-testid="svc-upgrade-cancel">Cancel upgrade</button>
+            }
+            @if (c.state === 'ready' && c.targetName) {<button type="button" class="o-btn o-sm o-r" (click)="openTarget(c.targetName)">Open {{ c.targetName }}</button>}
+          </div>
+          @if (c.message) {<span class="o-hint">{{ c.message }}</span>}
+          @if (c.backupName && c.state !== 'canceled') {<span class="o-faint o-xs">Pre-upgrade backup: {{ c.backupName }}. To go back, restore it into a new instance on {{ c.from }}.</span>}
+        }
+        @if (!u?.current || !open(u!.current!.state)) {
+          @if (u?.offer?.refused) {
+            <span class="o-hint" data-testid="svc-upgrade-refused">{{ u!.offer.refused }}</span>
+          } @else if (u?.offer?.to) {
+            <span class="o-sm">Upgrade to <b>{{ d().engineName }} {{ u!.offer.to }}</b></span>
+            @for (n of u!.offer.notes; track n) {<span class="o-faint o-xs">{{ n }}</span>}
+            @if (may('services.instance.configure')) {
+              <div class="o-flex o-wrap">
+                <select class="o-in o-sm" style="width:auto" aria-label="How" [ngModel]="method()" (ngModelChange)="method.set($event)" data-testid="svc-upgrade-method">
+                  @for (m of u!.offer.methods; track m) {<option [value]="m">{{ m === 'new-instance' ? 'Into a new instance, for testing' : 'In place' }}</option>}
+                </select>
+                <select class="o-in o-sm" style="width:auto" aria-label="When" [ngModel]="whenTo()" (ngModelChange)="whenTo.set($event)" data-testid="svc-upgrade-when">
+                  <option value="window">In the maintenance window, with a week's notice</option>
+                  <option value="now">Now</option>
+                </select>
+                <button type="button" class="o-btn o-sm o-dark o-r" (click)="start()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-upgrade-go">Upgrade to {{ u!.offer.to }}</button>
+              </div>
+              <span class="o-faint o-xs">A backup is taken first and kept until you delete it.</span>
+            }
+          }
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+// Backups › Copies in another region (V8-02, O10): opt-in, naming where the copies go; the
+// last copy; a restore from the copy into a new instance in that region.
+class ServiceCopiesCard extends Card {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.host = inject(ServicesHost);
+        this.target = signal('', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.backup = signal('', ...(ngDevMode ? [{ debugName: "backup" }] : /* istanbul ignore next */ []));
+        this.size = bytes;
+    }
+    regionName(id) {
+        return this.d().copy?.offered.find((r) => r.id === id)?.name ?? id;
+    }
+    /** Completed backups the last copy holds. */
+    copied() {
+        const through = this.d().copy?.last?.through;
+        if (!through)
+            return [];
+        return (this.d().backups ?? []).filter((b) => b.phase === 'completed' && b.stoppedAt && b.stoppedAt <= through);
+    }
+    set(region) {
+        const name = region ? this.regionName(region) : this.d().copy?.regionName;
+        this.go(this.api.update(this.projectKey(), this.d().id, { copyRegion: region }), () => {
+            this.target.set('');
+            this.done.emit(region ? `Backups of ${this.d().name} are now copied to ${name}.` : `Copies stopped; the copies in ${name} are deleted.`);
+        }, 'The copies could not be changed.');
+    }
+    restore() {
+        const b = this.backup() || this.copied().at(-1)?.name || '';
+        const c = this.d().copy;
+        if (!b || !c)
+            return;
+        this.go(this.api.restore(this.projectKey(), this.d().id, { backup: b, region: c.region }), (x) => this.router.navigate(this.host.link('services/' + x.name)), 'The restore could not be started.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceCopiesCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceCopiesCard, isStandalone: true, selector: "o-svc-copies", usesInheritance: true, ngImport: i0, template: `
+    @let c = d().copy;
+    @if (c) {
+      <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-copies">
+        <b>Copies in another region</b>
+        @if (c.region) {
+          <span class="o-sm">Backups are copied from {{ d().regionName || d().region }} to <b>{{ c.regionName }}</b>.</span>
+          @if (c.last; as l) {
+            <span class="o-faint o-xs" data-testid="svc-copies-last">{{ l.error ? 'Last copy failed: ' + l.error : 'Last copied ' + when(l.at) + ' · ' + l.objects + ' objects · ' + size(l.bytes) }}</span>
+          } @else {<span class="o-faint o-xs">The first copy is on its way.</span>}
+          <div class="o-flex o-wrap">
+            @if (may('services.data.import') && c.last?.through) {
+              <select class="o-in o-sm" style="width:auto" aria-label="Backup" [ngModel]="backup()" (ngModelChange)="backup.set($event)" data-testid="svc-copies-backup">
+                @for (b of copied(); track b.name) {<option [value]="b.name">{{ when(b.startedAt) }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm" (click)="restore()" [disabled]="busy() || !copied().length" data-testid="svc-copies-restore">Restore in {{ c.regionName }}</button>
+            }
+            @if (may('services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="set('')" [disabled]="busy()" data-testid="svc-copies-off">Stop copying</button>}
+          </div>
+          <span class="o-faint o-xs">Stopping deletes the copies in {{ c.regionName }}.</span>
+        } @else {
+          <span class="o-hint">Keep a copy of every backup in another region, to restore there if this region is lost. The copies leave {{ d().regionName || d().region }}.</span>
+          @if (may('services.instance.configure') && c.offered.length) {
+            <div class="o-flex o-wrap">
+              <select class="o-in o-sm" style="width:auto" aria-label="Copy to" [ngModel]="target()" (ngModelChange)="target.set($event)" data-testid="svc-copies-region">
+                <option value="">Choose a region</option>
+                @for (r of c.offered; track r.id) {<option [value]="r.id">{{ r.name }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm o-r" (click)="set(target())" [disabled]="busy() || !target()" data-testid="svc-copies-on">{{ target() ? 'Copy backups to ' + regionName(target()) : 'Copy backups' }}</button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceCopiesCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-copies',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let c = d().copy;
+    @if (c) {
+      <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-copies">
+        <b>Copies in another region</b>
+        @if (c.region) {
+          <span class="o-sm">Backups are copied from {{ d().regionName || d().region }} to <b>{{ c.regionName }}</b>.</span>
+          @if (c.last; as l) {
+            <span class="o-faint o-xs" data-testid="svc-copies-last">{{ l.error ? 'Last copy failed: ' + l.error : 'Last copied ' + when(l.at) + ' · ' + l.objects + ' objects · ' + size(l.bytes) }}</span>
+          } @else {<span class="o-faint o-xs">The first copy is on its way.</span>}
+          <div class="o-flex o-wrap">
+            @if (may('services.data.import') && c.last?.through) {
+              <select class="o-in o-sm" style="width:auto" aria-label="Backup" [ngModel]="backup()" (ngModelChange)="backup.set($event)" data-testid="svc-copies-backup">
+                @for (b of copied(); track b.name) {<option [value]="b.name">{{ when(b.startedAt) }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm" (click)="restore()" [disabled]="busy() || !copied().length" data-testid="svc-copies-restore">Restore in {{ c.regionName }}</button>
+            }
+            @if (may('services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="set('')" [disabled]="busy()" data-testid="svc-copies-off">Stop copying</button>}
+          </div>
+          <span class="o-faint o-xs">Stopping deletes the copies in {{ c.regionName }}.</span>
+        } @else {
+          <span class="o-hint">Keep a copy of every backup in another region, to restore there if this region is lost. The copies leave {{ d().regionName || d().region }}.</span>
+          @if (may('services.instance.configure') && c.offered.length) {
+            <div class="o-flex o-wrap">
+              <select class="o-in o-sm" style="width:auto" aria-label="Copy to" [ngModel]="target()" (ngModelChange)="target.set($event)" data-testid="svc-copies-region">
+                <option value="">Choose a region</option>
+                @for (r of c.offered; track r.id) {<option [value]="r.id">{{ r.name }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm o-r" (click)="set(target())" [disabled]="busy() || !target()" data-testid="svc-copies-on">{{ target() ? 'Copy backups to ' + regionName(target()) : 'Copy backups' }}</button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+// Settings › Storage (V8-04, D-30): the disk grows by itself near full, up to a limit, where the
+// volumes can grow in place.
+class ServiceStorageCard extends Card {
+    save(body) {
+        this.go(this.api.update(this.projectKey(), this.d().id, body), () => this.done.emit('Storage saved.'), 'Storage could not be saved.');
+    }
+    cap(ev) {
+        const v = Math.round(+ev.target.value);
+        if (!Number.isFinite(v))
+            return;
+        this.save({ autoGrowMaxGb: v === this.d().storage?.limitGb && !this.d().storage?.maxGb ? 0 : v });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStorageCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceStorageCard, isStandalone: true, selector: "o-svc-storage", usesInheritance: true, ngImport: i0, template: `
+    @let s = d().storage;
+    @if (s) {
+      <div class="o-card" data-testid="svc-storage">
+        <div class="o-ch"><b>Storage</b><span class="o-r">{{ d().diskGb }} GB</span></div>
+        <div class="o-cb o-col" style="gap:8px">
+          <label class="o-flex o-sm"><input type="checkbox" [ngModel]="s.autoGrow" (ngModelChange)="save({ autoGrow: $event })" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow" />Grow the disk automatically when it is {{ s.atPercent }}% full</label>
+          @if (s.autoGrow) {
+            <div class="o-flex o-wrap">
+              <span class="o-sm">Up to</span>
+              <input class="o-in o-sm" style="width:90px" type="number" [min]="d().diskGb" step="5" aria-label="Up to GB" [ngModel]="s.maxGb || s.limitGb" (change)="cap($event)" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow-max" />
+              <span class="o-sm">GB</span>
+              @if (s.grownAt) {<span class="o-faint o-xs o-r">last grew {{ when(s.grownAt) }}</span>}
+            </div>
+            <span class="o-faint o-xs">It grows by a quarter, at least 10 GB, without downtime; the people concerned are told each time.</span>
+          }
+          @if (s.expandable === false) {<span class="o-hint" data-testid="svc-autogrow-fixed">The volumes in this region cannot grow in place: you are told when the disk is nearly full. {{ s.message }}</span>}
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStorageCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-storage',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let s = d().storage;
+    @if (s) {
+      <div class="o-card" data-testid="svc-storage">
+        <div class="o-ch"><b>Storage</b><span class="o-r">{{ d().diskGb }} GB</span></div>
+        <div class="o-cb o-col" style="gap:8px">
+          <label class="o-flex o-sm"><input type="checkbox" [ngModel]="s.autoGrow" (ngModelChange)="save({ autoGrow: $event })" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow" />Grow the disk automatically when it is {{ s.atPercent }}% full</label>
+          @if (s.autoGrow) {
+            <div class="o-flex o-wrap">
+              <span class="o-sm">Up to</span>
+              <input class="o-in o-sm" style="width:90px" type="number" [min]="d().diskGb" step="5" aria-label="Up to GB" [ngModel]="s.maxGb || s.limitGb" (change)="cap($event)" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow-max" />
+              <span class="o-sm">GB</span>
+              @if (s.grownAt) {<span class="o-faint o-xs o-r">last grew {{ when(s.grownAt) }}</span>}
+            </div>
+            <span class="o-faint o-xs">It grows by a quarter, at least 10 GB, without downtime; the people concerned are told each time.</span>
+          }
+          @if (s.expandable === false) {<span class="o-hint" data-testid="svc-autogrow-fixed">The volumes in this region cannot grow in place: you are told when the disk is nearly full. {{ s.message }}</span>}
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
 const TABS = [
     { id: 'overview', label: 'Overview' }, { id: 'users', label: 'Databases and users' }, { id: 'backups', label: 'Backups' }, { id: 'metrics', label: 'Metrics' },
     { id: 'logs', label: 'Logs' }, { id: 'console', label: 'Console' }, { id: 'settings', label: 'Settings' },
@@ -1955,6 +2313,15 @@ class ServicePage {
     removeDb(d, name) {
         this.run(this.api.removeDatabase(this.key(), d.id, name), () => this.notice.set(`Database ${name} removed.`), 'The database could not be removed.');
     }
+    /** A Postgres extension from the allow-list (V8-04, D-30); what it needs comes with it. */
+    addExt(d, db, name) {
+        if (!name)
+            return;
+        this.run(this.api.addExtension(this.key(), d.id, db, name), () => this.notice.set(`${name} is being created in ${db}.`), 'The extension could not be created.');
+    }
+    dropExt(d, db, name) {
+        this.run(this.api.removeExtension(this.key(), d.id, db, name), () => this.notice.set(`${name} is dropped from ${db}.`), 'The extension could not be dropped.');
+    }
     addUser(d) {
         const name = this.userName().trim();
         if (!name)
@@ -2265,6 +2632,17 @@ class ServicePage {
             @for (db of d.databases; track db.name; let first = $first) {
               <div class="o-row"><span class="o-mono o-b5">{{ db.name }}</span><span class="o-faint o-sm">{{ first ? 'default' : '' }}</span><span class="o-r o-faint o-sm">{{ when(db.createdAt) }}</span>
                 @if (has(d, 'services.instance.configure') && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+              @if (engine()?.extensions?.length) {
+                <div class="o-row o-wrap" style="padding-left:24px" [attr.data-testid]="'svc-ext-' + db.name">
+                  @for (x of db.extensions ?? []; track x.name) {<span class="o-chip o-mono" [class.o-grn]="x.created" [title]="x.created ? 'Created' : 'Being created'">{{ x.name }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropExt(d, db.name, x.name)" [attr.aria-label]="'Drop ' + x.name" [disabled]="busy()">×</button>}</span>}
+                  @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                    <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Add an extension to ' + db.name" [ngModel]="''" (ngModelChange)="addExt(d, db.name, $event)" [disabled]="busy()" [attr.data-testid]="'svc-ext-add-' + db.name">
+                      <option value="">+ Extension</option>
+                      @for (e of engine()!.extensions!; track e.name) {<option [value]="e.name" [title]="e.description">{{ e.name }}</option>}
+                    </select>
+                  }
+                </div>
+              }
             } @empty {<div class="o-empty">{{ engine()?.databases ? 'No databases yet.' : d.engineName + ' has no logical databases: keys live in database 0.' }}</div>}
           </div>
           }
@@ -2330,6 +2708,7 @@ class ServicePage {
               </div>
             </div>
             <o-svc-dumps [d]="d" [projectKey]="key()" [dumps]="!!engine()?.dumps" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+            <o-svc-copies [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           </div>
         </div>
       }
@@ -2354,6 +2733,8 @@ class ServicePage {
               <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !has(d, 'services.instance.configure') || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
             </div>
           </div>
+          <o-svc-storage [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+          <o-svc-upgrade [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           <div class="o-card" data-testid="svc-ha">
             <div class="o-ch"><b>High availability</b><span class="o-r">{{ d.readyNodes }} of {{ d.nodes }} node{{ d.nodes === 1 ? '' : 's' }} ready</span></div>
             @switch (engine()?.ha) {
@@ -2460,13 +2841,13 @@ class ServicePage {
     } @else {
       <div class="o-page">@if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>} @else {<div class="o-empty">Loading…</div>}</div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ServiceMetricsTab, selector: "o-svc-metrics", inputs: ["readings", "slowLines", "engine", "projectKey", "service", "dashboard"] }, { kind: "component", type: ServiceLogsTab, selector: "o-svc-logs", inputs: ["projectKey", "id", "service", "environment", "debugLogs"] }, { kind: "component", type: ServiceConsoleTab, selector: "o-svc-console", inputs: ["d", "projectKey", "kind"] }, { kind: "component", type: ServiceDumpsCard, selector: "o-svc-dumps", inputs: ["d", "projectKey", "dumps"], outputs: ["done", "failed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ServiceMetricsTab, selector: "o-svc-metrics", inputs: ["readings", "slowLines", "engine", "projectKey", "service", "dashboard"] }, { kind: "component", type: ServiceLogsTab, selector: "o-svc-logs", inputs: ["projectKey", "id", "service", "environment", "debugLogs"] }, { kind: "component", type: ServiceConsoleTab, selector: "o-svc-console", inputs: ["d", "projectKey", "kind"] }, { kind: "component", type: ServiceDumpsCard, selector: "o-svc-dumps", inputs: ["d", "projectKey", "dumps"], outputs: ["done", "failed"] }, { kind: "component", type: ServiceUpgradeCard, selector: "o-svc-upgrade" }, { kind: "component", type: ServiceCopiesCard, selector: "o-svc-copies" }, { kind: "component", type: ServiceStorageCard, selector: "o-svc-storage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServicePage, decorators: [{
             type: Component,
             args: [{
                     selector: 'o-service',
-                    imports: [FormsModule, RouterLink, ServiceMetricsTab, ServiceLogsTab, ServiceConsoleTab, ServiceDumpsCard],
+                    imports: [FormsModule, RouterLink, ServiceMetricsTab, ServiceLogsTab, ServiceConsoleTab, ServiceDumpsCard, ServiceUpgradeCard, ServiceCopiesCard, ServiceStorageCard],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (d(); as d) {
@@ -2603,6 +2984,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             @for (db of d.databases; track db.name; let first = $first) {
               <div class="o-row"><span class="o-mono o-b5">{{ db.name }}</span><span class="o-faint o-sm">{{ first ? 'default' : '' }}</span><span class="o-r o-faint o-sm">{{ when(db.createdAt) }}</span>
                 @if (has(d, 'services.instance.configure') && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+              @if (engine()?.extensions?.length) {
+                <div class="o-row o-wrap" style="padding-left:24px" [attr.data-testid]="'svc-ext-' + db.name">
+                  @for (x of db.extensions ?? []; track x.name) {<span class="o-chip o-mono" [class.o-grn]="x.created" [title]="x.created ? 'Created' : 'Being created'">{{ x.name }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropExt(d, db.name, x.name)" [attr.aria-label]="'Drop ' + x.name" [disabled]="busy()">×</button>}</span>}
+                  @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                    <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Add an extension to ' + db.name" [ngModel]="''" (ngModelChange)="addExt(d, db.name, $event)" [disabled]="busy()" [attr.data-testid]="'svc-ext-add-' + db.name">
+                      <option value="">+ Extension</option>
+                      @for (e of engine()!.extensions!; track e.name) {<option [value]="e.name" [title]="e.description">{{ e.name }}</option>}
+                    </select>
+                  }
+                </div>
+              }
             } @empty {<div class="o-empty">{{ engine()?.databases ? 'No databases yet.' : d.engineName + ' has no logical databases: keys live in database 0.' }}</div>}
           </div>
           }
@@ -2668,6 +3060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               </div>
             </div>
             <o-svc-dumps [d]="d" [projectKey]="key()" [dumps]="!!engine()?.dumps" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+            <o-svc-copies [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           </div>
         </div>
       }
@@ -2692,6 +3085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !has(d, 'services.instance.configure') || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
             </div>
           </div>
+          <o-svc-storage [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+          <o-svc-upgrade [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           <div class="o-card" data-testid="svc-ha">
             <div class="o-ch"><b>High availability</b><span class="o-r">{{ d.readyNodes }} of {{ d.nodes }} node{{ d.nodes === 1 ? '' : 's' }} ready</span></div>
             @switch (engine()?.ha) {