@juice-js/observability 1.1.0-alpha.18 → 1.1.0-alpha.21

package/README.md

@@ -59,8 +59,10 @@ like juice-layout's dark-mode toggle) repaints the charts and the graph.
 - `auditLink` (optional): a link from a trace to its audit records, shown on the trace page as "Audit records ↗".
   With `@juice-js/audit` mounted at `/audit`: `auditLink: id => ['/audit/traces', id]`. A string is an external URL.
   Without it, the trace page shows no link.
-- The trace page's resource usage reads .NET's `System.Runtime` meter (.NET 9+): add `AddMeter("System.Runtime")` to the
-  host's `WithMetrics`.
+- The trace page's resource usage and a service's Capacity tab read .NET's `System.Runtime` meter (.NET 9+): add
+  `AddMeter("System.Runtime")` to the host's `WithMetrics`. If traces are sampled, also add `AddAspNetCoreInstrumentation()`
+  there: the Capacity tab then counts requests from `http.server.request.duration`, not from spans, which undercount.
+- The Load runs page reads windows a load test marks through the API: see "Load test runs" in the platform's README.
 - The router needs `bindToComponentInputs: true`. The pages take their route and query parameters as inputs.
 - The host's bearer-token interceptor (`@juice-js/auth`) must cover `apiBase`. The token carries the `platform_tenant`
   claim and a platform role (`viewer`, `operator` or `admin`).

package/fesm2022/juice-js-observability-load-runs.page-C2rk2bz9.mjs

@@ -0,0 +1,349 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { S as apiResource, o as problemText, u as ContextBar } from "./juice-js-observability-telemetry-BftWSOaQ.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { forkJoin, of } from "rxjs";
+import { Router, RouterLink } from "@angular/router";
+import * as i1 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+const MAX_COMPARED = 4;
+function perSecond(value) {
+	return value >= 10 ? value.toFixed(0) : value.toFixed(2);
+}
+function limitText(limit) {
+	const at = `from ${perSecond(limit.perSecond)}/s`;
+	switch (limit.reason) {
+		case "latency": return `Latency ${at}: p95 ${limit.value.toFixed(0)} ms, ${limit.baseline?.toFixed(0)} ms when quiet`;
+		case "consumer-busy": return `Message handling busy ${at}: ${(limit.value * 100).toFixed(0)}% of the time`;
+		case "queue": return `Thread pool queue ${at}: ${limit.value.toFixed(0)} waiting`;
+		case "errors": return `Errors ${at}: ${(limit.value * 100).toFixed(1)}%`;
+		case "backlog": return `Outbox backlog ${at}: ${limit.value.toFixed(0)} undelivered`;
+		default: return `${limit.reason} ${at}`;
+	}
+}
+var LoadRunsPage = class LoadRunsPage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	router = inject(Router);
+	compare = input(...ngDevMode ? [void 0, { debugName: "compare" }] : /* istanbul ignore next */ []);
+	maxCompared = MAX_COMPARED;
+	selected = computed(() => (this.compare() ?? "").split(",").filter(Boolean).slice(0, MAX_COMPARED), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	runs = apiResource({
+		params: () => this.ctx.environment(),
+		stream: ({ params }) => this.api.loadRuns({ environment: params })
+	});
+	results = apiResource({
+		params: () => ({ ids: this.selected() }),
+		stream: ({ params }) => params.ids.length ? forkJoin(params.ids.map((id) => this.api.loadRunResults(id))) : of([])
+	});
+	error = computed(() => problemText(this.runs.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	resultsError = computed(() => problemText(this.results.error()), ...ngDevMode ? [{ debugName: "resultsError" }] : /* istanbul ignore next */ []);
+	serviceNames = computed(() => {
+		const services = (this.results.value() ?? []).flatMap((c) => c.services);
+		const limited = new Set(services.filter((s) => s.limit).map((s) => s.name));
+		return [...new Set(services.map((s) => s.name))].sort((a, b) => Number(limited.has(b)) - Number(limited.has(a)) || a.localeCompare(b));
+	}, ...ngDevMode ? [{ debugName: "serviceNames" }] : /* istanbul ignore next */ []);
+	limit = limitText;
+	rate = perSecond;
+	service(results, name) {
+		return results.services.find((s) => s.name === name) ?? null;
+	}
+	time(at) {
+		return new Date(at).toLocaleString();
+	}
+	length(run) {
+		const seconds = Math.round((new Date(run.endedAt).getTime() - new Date(run.startedAt).getTime()) / 1e3);
+		return seconds >= 120 ? `${Math.round(seconds / 60)} min` : `${seconds} s`;
+	}
+	window(run) {
+		return this.ctx.keep({
+			from: run.startedAt,
+			to: run.endedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+			range: null,
+			env: run.environment ?? (this.ctx.environment() || null)
+		});
+	}
+	toggle(id) {
+		const current = this.selected();
+		const next = current.includes(id) ? current.filter((c) => c !== id) : [...current, id];
+		this.router.navigate([], {
+			queryParams: { compare: next.join(",") || null },
+			queryParamsHandling: "merge",
+			replaceUrl: true
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LoadRunsPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LoadRunsPage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: { compare: {
+			classPropertyName: "compare",
+			publicName: "compare",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <jc-context-bar><h1>Load runs</h1></jc-context-bar>
+    @if (runs.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (runs.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (runs.value(); as page) {
+      @if (page.items.length === 0) {
+        <p class="jc-muted">No load runs yet. A load test marks its start and end with <code>POST /load-runs</code> and <code>POST /load-runs/{{ '{' }}id{{ '}' }}/end</code>; see the README.</p>
+      } @else {
+        <table class="jc-table" data-testid="load-runs">
+          <thead><tr><th>Compare</th><th>Run</th><th>Environment</th><th>Started</th><th>Length</th><th>By</th></tr></thead>
+          <tbody>
+            @for (r of page.items; track r.id) {
+              <tr>
+                <td><input type="checkbox" [attr.aria-label]="'Compare ' + r.name" [checked]="selected().includes(r.id)"
+                  [disabled]="!selected().includes(r.id) && selected().length >= maxCompared" (change)="toggle(r.id)" /></td>
+                <td><strong>{{ r.name }}</strong></td>
+                <td>{{ r.environment ?? 'all' }}</td>
+                <td>{{ time(r.startedAt) }}</td>
+                <td>@if (r.endedAt) { {{ length(r) }} } @else { <span class="jc-muted">not ended</span> }</td>
+                <td>{{ r.startedBy }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+    }
+
+    @if (results.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (results.error()) { <p class="jc-error">{{ resultsError() }}</p> }
+    @if (results.value(); as compared) {
+      @if (compared.length) {
+        <section class="jc-card" aria-labelledby="jc-load-compare" data-testid="load-compare">
+          <h3 id="jc-load-compare">{{ compared.length === 1 ? 'Results' : 'Comparison' }}</h3>
+          @if (serviceNames().length === 0) { <p class="jc-muted">No telemetry in these windows yet. Only whole time steps count, so a short run may show nothing.</p> }
+          @else {
+            <table class="jc-table">
+              <thead><tr><th>Service</th>@for (c of compared; track c.run.id) { <th>{{ c.run.name }}</th> }</tr></thead>
+              <tbody>
+                @for (name of serviceNames(); track name) {
+                  <tr>
+                    <th>{{ name }}</th>
+                    @for (c of compared; track c.run.id) {
+                      <td>
+                        @if (service(c, name); as s) {
+                          <div>Peak {{ rate(s.peakPerSecond) }}/s · p95 {{ s.p95AtPeakMs !== null ? s.p95AtPeakMs.toFixed(0) + ' ms' : '—' }} · errors {{ (s.errorRateAtPeak * 100).toFixed(1) }}%</div>
+                          @if (s.limit; as l) { <div class="jc-bad" data-testid="load-limit">{{ limit(l) }}</div> }
+                          @else { <div class="jc-muted">No limit reached</div> }
+                          @if (s.serviceId) { <a class="jc-small" [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="window(c.run)">Open the window</a> }
+                        } @else { <span class="jc-muted">No traffic</span> }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+            @for (c of compared; track c.run.id) {
+              @for (s of c.services; track s.name) {
+                <details class="jc-load-steps">
+                  <summary>{{ c.run.name }}: {{ s.name }}, each {{ c.stepSeconds }} s</summary>
+                  <table class="jc-table">
+                    <thead><tr><th>Time</th><th>Load/s</th><th>p95</th><th>Errors</th><th>Thread pool queue</th><th>Consumer busy</th><th>Outbox backlog</th></tr></thead>
+                    <tbody>
+                      @for (p of s.points; track p.at) {
+                        <tr [class.jc-bad]="s.limit?.at === p.at">
+                          <td>{{ time(p.at) }}</td>
+                          <td>{{ rate(p.perSecond) }}</td>
+                          <td>{{ p.p95Ms !== null ? p.p95Ms.toFixed(0) + ' ms' : '—' }}</td>
+                          <td>{{ (p.errorRate * 100).toFixed(1) }}%</td>
+                          <td>{{ p.queue ?? '—' }}</td>
+                          <td>{{ (p.consumerBusy * 100).toFixed(0) }}%</td>
+                          <td>{{ p.backlog }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </details>
+              }
+            }
+            <ul class="jc-capacity-notes">
+              <li>Counted from spans, which undercount if traces are sampled. A message's wait in its queue isn't in its span: look at how busy the consumer was.</li>
+              <li>The outbox backlog includes messages of rolled-back transactions. Figures from other hardware carry over only roughly.</li>
+            </ul>
+          }
+        </section>
+      }
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LoadRunsPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				MatProgressBarModule,
+				ContextBar
+			],
+			template: `
+    <jc-context-bar><h1>Load runs</h1></jc-context-bar>
+    @if (runs.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (runs.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (runs.value(); as page) {
+      @if (page.items.length === 0) {
+        <p class="jc-muted">No load runs yet. A load test marks its start and end with <code>POST /load-runs</code> and <code>POST /load-runs/{{ '{' }}id{{ '}' }}/end</code>; see the README.</p>
+      } @else {
+        <table class="jc-table" data-testid="load-runs">
+          <thead><tr><th>Compare</th><th>Run</th><th>Environment</th><th>Started</th><th>Length</th><th>By</th></tr></thead>
+          <tbody>
+            @for (r of page.items; track r.id) {
+              <tr>
+                <td><input type="checkbox" [attr.aria-label]="'Compare ' + r.name" [checked]="selected().includes(r.id)"
+                  [disabled]="!selected().includes(r.id) && selected().length >= maxCompared" (change)="toggle(r.id)" /></td>
+                <td><strong>{{ r.name }}</strong></td>
+                <td>{{ r.environment ?? 'all' }}</td>
+                <td>{{ time(r.startedAt) }}</td>
+                <td>@if (r.endedAt) { {{ length(r) }} } @else { <span class="jc-muted">not ended</span> }</td>
+                <td>{{ r.startedBy }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+    }
+
+    @if (results.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (results.error()) { <p class="jc-error">{{ resultsError() }}</p> }
+    @if (results.value(); as compared) {
+      @if (compared.length) {
+        <section class="jc-card" aria-labelledby="jc-load-compare" data-testid="load-compare">
+          <h3 id="jc-load-compare">{{ compared.length === 1 ? 'Results' : 'Comparison' }}</h3>
+          @if (serviceNames().length === 0) { <p class="jc-muted">No telemetry in these windows yet. Only whole time steps count, so a short run may show nothing.</p> }
+          @else {
+            <table class="jc-table">
+              <thead><tr><th>Service</th>@for (c of compared; track c.run.id) { <th>{{ c.run.name }}</th> }</tr></thead>
+              <tbody>
+                @for (name of serviceNames(); track name) {
+                  <tr>
+                    <th>{{ name }}</th>
+                    @for (c of compared; track c.run.id) {
+                      <td>
+                        @if (service(c, name); as s) {
+                          <div>Peak {{ rate(s.peakPerSecond) }}/s · p95 {{ s.p95AtPeakMs !== null ? s.p95AtPeakMs.toFixed(0) + ' ms' : '—' }} · errors {{ (s.errorRateAtPeak * 100).toFixed(1) }}%</div>
+                          @if (s.limit; as l) { <div class="jc-bad" data-testid="load-limit">{{ limit(l) }}</div> }
+                          @else { <div class="jc-muted">No limit reached</div> }
+                          @if (s.serviceId) { <a class="jc-small" [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="window(c.run)">Open the window</a> }
+                        } @else { <span class="jc-muted">No traffic</span> }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+            @for (c of compared; track c.run.id) {
+              @for (s of c.services; track s.name) {
+                <details class="jc-load-steps">
+                  <summary>{{ c.run.name }}: {{ s.name }}, each {{ c.stepSeconds }} s</summary>
+                  <table class="jc-table">
+                    <thead><tr><th>Time</th><th>Load/s</th><th>p95</th><th>Errors</th><th>Thread pool queue</th><th>Consumer busy</th><th>Outbox backlog</th></tr></thead>
+                    <tbody>
+                      @for (p of s.points; track p.at) {
+                        <tr [class.jc-bad]="s.limit?.at === p.at">
+                          <td>{{ time(p.at) }}</td>
+                          <td>{{ rate(p.perSecond) }}</td>
+                          <td>{{ p.p95Ms !== null ? p.p95Ms.toFixed(0) + ' ms' : '—' }}</td>
+                          <td>{{ (p.errorRate * 100).toFixed(1) }}%</td>
+                          <td>{{ p.queue ?? '—' }}</td>
+                          <td>{{ (p.consumerBusy * 100).toFixed(0) }}%</td>
+                          <td>{{ p.backlog }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </details>
+              }
+            }
+            <ul class="jc-capacity-notes">
+              <li>Counted from spans, which undercount if traces are sampled. A message's wait in its queue isn't in its span: look at how busy the consumer was.</li>
+              <li>The outbox backlog includes messages of rolled-back transactions. Figures from other hardware carry over only roughly.</li>
+            </ul>
+          }
+        </section>
+      }
+    }`
+		}]
+	}],
+	propDecorators: { compare: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "compare",
+			required: false
+		}]
+	}] }
+});
+export { LoadRunsPage };
+
+//# sourceMappingURL=juice-js-observability-load-runs.page-C2rk2bz9.mjs.map

package/fesm2022/juice-js-observability-load-runs.page-C2rk2bz9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-load-runs.page-C2rk2bz9.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/load-runs.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { Router, RouterLink } from '@angular/router';\nimport { forkJoin, of } from 'rxjs';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { LoadRun, LoadRunLimit, LoadRunResults, LoadRunService } from '../core/models';\nimport { apiResource } from '../shared/resource';\nimport { problemText } from '../shared/telemetry';\nimport { ContextBar } from '../shared/ui';\n\n/** Comparing more runs than this doesn't fit on a page. */\nconst MAX_COMPARED = 4;\n\nfunction perSecond(value: number): string { return value >= 10 ? value.toFixed(0) : value.toFixed(2); }\n\n/** Where a service started to struggle, in words. */\nexport function limitText(limit: LoadRunLimit): string {\n  const at = `from ${perSecond(limit.perSecond)}/s`;\n  switch (limit.reason) {\n    case 'latency': return `Latency ${at}: p95 ${limit.value.toFixed(0)} ms, ${limit.baseline?.toFixed(0)} ms when quiet`;\n    case 'consumer-busy': return `Message handling busy ${at}: ${(limit.value * 100).toFixed(0)}% of the time`;\n    case 'queue': return `Thread pool queue ${at}: ${limit.value.toFixed(0)} waiting`;\n    case 'errors': return `Errors ${at}: ${(limit.value * 100).toFixed(1)}%`;\n    case 'backlog': return `Outbox backlog ${at}: ${limit.value.toFixed(0)} undelivered`;\n    default: return `${limit.reason} ${at}`;\n  }\n}\n\n/**\n * Load test runs: each is the window a test marked through the API (the platform generates no load). Selected runs are compared per\n * service, with where each started to struggle, which everyday traffic can't show. The selection is in the URL.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LinkPipe, RouterLink, MatProgressBarModule, ContextBar],\n  template: `\n    <jc-context-bar><h1>Load runs</h1></jc-context-bar>\n    @if (runs.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (runs.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n    @if (runs.value(); as page) {\n      @if (page.items.length === 0) {\n        <p class=\"jc-muted\">No load runs yet. A load test marks its start and end with <code>POST /load-runs</code> and <code>POST /load-runs/{{ '{' }}id{{ '}' }}/end</code>; see the README.</p>\n      } @else {\n        <table class=\"jc-table\" data-testid=\"load-runs\">\n          <thead><tr><th>Compare</th><th>Run</th><th>Environment</th><th>Started</th><th>Length</th><th>By</th></tr></thead>\n          <tbody>\n            @for (r of page.items; track r.id) {\n              <tr>\n                <td><input type=\"checkbox\" [attr.aria-label]=\"'Compare ' + r.name\" [checked]=\"selected().includes(r.id)\"\n                  [disabled]=\"!selected().includes(r.id) && selected().length >= maxCompared\" (change)=\"toggle(r.id)\" /></td>\n                <td><strong>{{ r.name }}</strong></td>\n                <td>{{ r.environment ?? 'all' }}</td>\n                <td>{{ time(r.startedAt) }}</td>\n                <td>@if (r.endedAt) { {{ length(r) }} } @else { <span class=\"jc-muted\">not ended</span> }</td>\n                <td>{{ r.startedBy }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      }\n    }\n\n    @if (results.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (results.error()) { <p class=\"jc-error\">{{ resultsError() }}</p> }\n    @if (results.value(); as compared) {\n      @if (compared.length) {\n        <section class=\"jc-card\" aria-labelledby=\"jc-load-compare\" data-testid=\"load-compare\">\n          <h3 id=\"jc-load-compare\">{{ compared.length === 1 ? 'Results' : 'Comparison' }}</h3>\n          @if (serviceNames().length === 0) { <p class=\"jc-muted\">No telemetry in these windows yet. Only whole time steps count, so a short run may show nothing.</p> }\n          @else {\n            <table class=\"jc-table\">\n              <thead><tr><th>Service</th>@for (c of compared; track c.run.id) { <th>{{ c.run.name }}</th> }</tr></thead>\n              <tbody>\n                @for (name of serviceNames(); track name) {\n                  <tr>\n                    <th>{{ name }}</th>\n                    @for (c of compared; track c.run.id) {\n                      <td>\n                        @if (service(c, name); as s) {\n                          <div>Peak {{ rate(s.peakPerSecond) }}/s · p95 {{ s.p95AtPeakMs !== null ? s.p95AtPeakMs.toFixed(0) + ' ms' : '—' }} · errors {{ (s.errorRateAtPeak * 100).toFixed(1) }}%</div>\n                          @if (s.limit; as l) { <div class=\"jc-bad\" data-testid=\"load-limit\">{{ limit(l) }}</div> }\n                          @else { <div class=\"jc-muted\">No limit reached</div> }\n                          @if (s.serviceId) { <a class=\"jc-small\" [routerLink]=\"['services', s.serviceId] | jcLink\" [queryParams]=\"window(c.run)\">Open the window</a> }\n                        } @else { <span class=\"jc-muted\">No traffic</span> }\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n            @for (c of compared; track c.run.id) {\n              @for (s of c.services; track s.name) {\n                <details class=\"jc-load-steps\">\n                  <summary>{{ c.run.name }}: {{ s.name }}, each {{ c.stepSeconds }} s</summary>\n                  <table class=\"jc-table\">\n                    <thead><tr><th>Time</th><th>Load/s</th><th>p95</th><th>Errors</th><th>Thread pool queue</th><th>Consumer busy</th><th>Outbox backlog</th></tr></thead>\n                    <tbody>\n                      @for (p of s.points; track p.at) {\n                        <tr [class.jc-bad]=\"s.limit?.at === p.at\">\n                          <td>{{ time(p.at) }}</td>\n                          <td>{{ rate(p.perSecond) }}</td>\n                          <td>{{ p.p95Ms !== null ? p.p95Ms.toFixed(0) + ' ms' : '—' }}</td>\n                          <td>{{ (p.errorRate * 100).toFixed(1) }}%</td>\n                          <td>{{ p.queue ?? '—' }}</td>\n                          <td>{{ (p.consumerBusy * 100).toFixed(0) }}%</td>\n                          <td>{{ p.backlog }}</td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </details>\n              }\n            }\n            <ul class=\"jc-capacity-notes\">\n              <li>Counted from spans, which undercount if traces are sampled. A message's wait in its queue isn't in its span: look at how busy the consumer was.</li>\n              <li>The outbox backlog includes messages of rolled-back transactions. Figures from other hardware carry over only roughly.</li>\n            </ul>\n          }\n        </section>\n      }\n    }`,\n})\nexport class LoadRunsPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  private readonly router = inject(Router);\n\n  /** The selected run ids, comma separated. */\n  readonly compare = input<string>();\n\n  protected readonly maxCompared = MAX_COMPARED;\n  protected readonly selected = computed(() => (this.compare() ?? '').split(',').filter(Boolean).slice(0, MAX_COMPARED));\n  protected readonly runs = apiResource({ params: () => this.ctx.environment(), stream: ({ params }) => this.api.loadRuns({ environment: params }) });\n  protected readonly results = apiResource({\n    params: () => ({ ids: this.selected() }),\n    stream: ({ params }) => params.ids.length ? forkJoin(params.ids.map(id => this.api.loadRunResults(id))) : of<LoadRunResults[]>([]),\n  });\n  protected readonly error = computed(() => problemText(this.runs.error()));\n  protected readonly resultsError = computed(() => problemText(this.results.error()));\n  /** Services of all compared runs, those that reached a limit first. */\n  protected readonly serviceNames = computed(() => {\n    const services = (this.results.value() ?? []).flatMap(c => c.services);\n    const limited = new Set(services.filter(s => s.limit).map(s => s.name));\n    return [...new Set(services.map(s => s.name))].sort((a, b) => Number(limited.has(b)) - Number(limited.has(a)) || a.localeCompare(b));\n  });\n\n  protected readonly limit = limitText;\n  protected readonly rate = perSecond;\n\n  protected service(results: LoadRunResults, name: string): LoadRunService | null {\n    return results.services.find(s => s.name === name) ?? null;\n  }\n\n  protected time(at: string): string { return new Date(at).toLocaleString(); }\n\n  protected length(run: LoadRun): string {\n    const seconds = Math.round((new Date(run.endedAt!).getTime() - new Date(run.startedAt).getTime()) / 1000);\n    return seconds >= 120 ? `${Math.round(seconds / 60)} min` : `${seconds} s`;\n  }\n\n  /** A service's pages over exactly this run's window. */\n  protected window(run: LoadRun) {\n    return this.ctx.keep({ from: run.startedAt, to: run.endedAt ?? new Date().toISOString(), range: null, env: run.environment ?? (this.ctx.environment() || null) });\n  }\n\n  protected toggle(id: string) {\n    const current = this.selected();\n    const next = current.includes(id) ? current.filter(c => c !== id) : [...current, id];\n    void this.router.navigate([], { queryParams: { compare: next.join(',') || null }, queryParamsHandling: 'merge', replaceUrl: true });\n  }\n}\n"],"mappings":"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"}