@chisquare-tech/origine-ngx-apps-services 0.2.0 → 0.2.2

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

@@ -281,6 +281,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).
@@ -959,7 +965,7 @@ class ServiceConsoleTab {
         <span class="o-r"></span>
         @if (d().canManage) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
         @if (d().databases.length) {
-          <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db()" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
+          <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db() || d().databases[0]?.name" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
             @for (x of d().databases; track x.name) {<option [value]="x.name">{{ x.name }}</option>}
           </select>
         }
@@ -1022,7 +1028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <span class="o-r"></span>
         @if (d().canManage) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
         @if (d().databases.length) {
-          <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db()" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
+          <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db() || d().databases[0]?.name" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
             @for (x of d().databases; track x.name) {<option [value]="x.name">{{ x.name }}</option>}
           </select>
         }
@@ -1149,7 +1155,7 @@ class ServiceDumpsCard {
         this.go(this.api.deleteDump(this.projectKey(), this.d().id, x.id), () => this.done.emit('Dump deleted.'), 'The dump could not be deleted.');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceDumpsCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceDumpsCard, isStandalone: true, selector: "o-svc-dumps", inputs: { d: { classPropertyName: "d", publicName: "d", isSignal: true, isRequired: true, transformFunction: null }, projectKey: { classPropertyName: "projectKey", publicName: "projectKey", isSignal: true, isRequired: true, transformFunction: null }, dumps: { classPropertyName: "dumps", publicName: "dumps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done", failed: "failed" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceDumpsCard, isStandalone: true, selector: "o-svc-dumps", inputs: { d: { classPropertyName: "d", publicName: "d", isSignal: true, isRequired: true, transformFunction: null }, projectKey: { classPropertyName: "projectKey", publicName: "projectKey", isSignal: true, isRequired: true, transformFunction: null }, dumps: { classPropertyName: "dumps", publicName: "dumps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done", failed: "failed" }, host: { styleAttribute: "display:flex;flex-direction:column;gap:14px" }, ngImport: i0, template: `
     <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-fork-card">
       <b>Fork for staging</b>
       <span class="o-hint">Copy from the latest backup into a new instance. {{ d().name }} keeps running untouched.</span>
@@ -1200,6 +1206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     selector: 'o-svc-dumps',
                     imports: [FormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display:flex;flex-direction:column;gap:14px' },
                     template: `
     <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-fork-card">
       <b>Fork for staging</b>
@@ -1287,7 +1294,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);
@@ -1687,7 +1694,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);
@@ -1727,8 +1746,8 @@ class ServicePage {
                     if (d.window?.from && !this.pitr())
                         this.pitr.set(toLocalInput(new Date().toISOString()));
                 }
-                const settling = moving(d.state) || !!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);
+                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(), 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.'));
@@ -1742,9 +1761,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) {
@@ -2658,5 +2677,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