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

package/fesm2022/juice-js-observability-service.page-BrcID0Bs.mjs

@@ -0,0 +1,1255 @@
+import { ApiService, ContextService, LinkPipe, ObservabilityLinks } from "./juice-js-observability.mjs";
+import { S as apiResource, _ as PercentPipe, a as TraceTable, d as HealthBadge, g as DurationPipe, h as AgoPipe, i as ServiceStatsCharts, l as ConfidenceBadge, n as LogTable, o as problemText, r as MetricExplorer, u as ContextBar, v as ReasonPipe } from "./juice-js-observability-telemetry-BftWSOaQ.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, signal } from "@angular/core";
+import { Router, RouterLink } from "@angular/router";
+import * as i1$1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import * as i3 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i3$1 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i4 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i2 from "@angular/material/select";
+import * as i1 from "@angular/material/tabs";
+import { MatTabsModule } from "@angular/material/tabs";
+function planCapacity(m, i) {
+	if (!m.cpuSecondsPerUnit || m.cpuSecondsPerUnit <= 0) return null;
+	if (!(i.users > 0 && i.perAction > 0 && i.targetCpu > 0 && i.targetCpu <= 1 && i.coresPerInstance > 0 && i.thinkSeconds >= 0)) return null;
+	const response = (m.responseMs ?? 0) / 1e3;
+	if (i.thinkSeconds + response <= 0) return null;
+	const byCpu = (i.targetCpu * i.coresPerInstance - (m.idleCores ?? 0)) / m.cpuSecondsPerUnit;
+	if (byCpu <= 0) return null;
+	const limitedBy = consumerBusy(m) && m.peakMessagesPerSecond < byCpu ? "messages" : "cpu";
+	const carried = limitedBy === "messages" ? m.peakMessagesPerSecond : byCpu;
+	const perSecond = i.users * i.perAction / (i.thinkSeconds + response);
+	const instances = Math.max(1, Math.ceil(perSecond / carried));
+	const perInstance = perSecond / instances;
+	const memoryBytes = m.memoryModel === "fitted" ? m.idleMemoryBytes + m.memoryBytesPerInFlight * perInstance * response : m.peakMemoryBytes;
+	return {
+		perSecond,
+		instances,
+		cores: instances * (limitedBy === "messages" && m.peakCores !== null ? Math.min(i.coresPerInstance, Math.ceil(m.peakCores / i.targetCpu)) : i.coresPerInstance),
+		memoryBytes,
+		perInstance,
+		beyondMeasured: m.peakPerSecond > 0 ? perInstance / m.peakPerSecond : null,
+		limitedBy
+	};
+}
+const BUSY_CONSUMER = .9;
+function consumerBusy(m) {
+	return m.peakMessagesInFlight >= BUSY_CONSUMER && m.peakMessagesPerSecond > 0;
+}
+const NOTABLE_QUEUE = 10;
+const RISING_RESPONSE = 1.5;
+function bytes(value) {
+	if (value === null) return "—";
+	return value >= 1024 ** 3 ? `${(value / 1024 ** 3).toFixed(1)} GB` : `${Math.round(value / 1024 ** 2)} MB`;
+}
+function rate(value) {
+	return value >= 10 ? value.toFixed(0) : value.toFixed(2);
+}
+var ServiceCapacity = class ServiceCapacity {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	serviceId = input.required(...ngDevMode ? [{ debugName: "serviceId" }] : /* istanbul ignore next */ []);
+	environments = input([], ...ngDevMode ? [{ debugName: "environments" }] : /* istanbul ignore next */ []);
+	capacity = apiResource({
+		params: () => ({
+			id: this.serviceId(),
+			env: this.ctx.environment(),
+			range: this.ctx.range(),
+			abs: this.ctx.absolute()
+		}),
+		stream: ({ params }) => this.api.capacity({
+			serviceId: params.id,
+			environment: params.env,
+			...this.ctx.window()
+		})
+	});
+	users = signal(1e3, ...ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []);
+	thinkSeconds = signal(10, ...ngDevMode ? [{ debugName: "thinkSeconds" }] : /* istanbul ignore next */ []);
+	perAction = signal(1, ...ngDevMode ? [{ debugName: "perAction" }] : /* istanbul ignore next */ []);
+	targetCpu = signal(60, ...ngDevMode ? [{ debugName: "targetCpu" }] : /* istanbul ignore next */ []);
+	coresPerInstance = linkedSignal(() => this.capacity.value()?.coresPerInstance ?? 2, ...ngDevMode ? [{ debugName: "coresPerInstance" }] : /* istanbul ignore next */ []);
+	error = computed(() => problemText(this.capacity.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	mixedEnvironments = computed(() => !this.ctx.environment() && new Set(this.environments()).size > 1, ...ngDevMode ? [{ debugName: "mixedEnvironments" }] : /* istanbul ignore next */ []);
+	plan = computed(() => {
+		const m = this.capacity.value();
+		return m ? planCapacity(m, {
+			users: this.users(),
+			thinkSeconds: this.thinkSeconds(),
+			perAction: this.perAction(),
+			targetCpu: this.targetCpu() / 100,
+			coresPerInstance: this.coresPerInstance()
+		}) : null;
+	}, ...ngDevMode ? [{ debugName: "plan" }] : /* istanbul ignore next */ []);
+	busyConsumer = computed(() => {
+		const m = this.capacity.value();
+		return !!m && consumerBusy(m);
+	}, ...ngDevMode ? [{ debugName: "busyConsumer" }] : /* istanbul ignore next */ []);
+	responseRising = computed(() => {
+		const m = this.capacity.value();
+		return m?.responseLowLoadMs && m.responseHighLoadMs && m.responseHighLoadMs >= RISING_RESPONSE * m.responseLowLoadMs ? {
+			low: Math.round(m.responseLowLoadMs),
+			high: Math.round(m.responseHighLoadMs)
+		} : null;
+	}, ...ngDevMode ? [{ debugName: "responseRising" }] : /* istanbul ignore next */ []);
+	sourceNote = computed(() => this.capacity.value()?.requestSource === "metrics" ? "Requests are counted from the http.server.request.duration metric, messages from spans." : "Requests and messages are counted from spans, which undercount if traces are sampled. That makes the cost per request read high. Exporting http.server.request.duration fixes the request count.", ...ngDevMode ? [{ debugName: "sourceNote" }] : /* istanbul ignore next */ []);
+	notableQueue = NOTABLE_QUEUE;
+	memory = bytes;
+	perSecond = rate;
+	count = (value) => Math.round(value).toLocaleString("en-US");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ServiceCapacity,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ServiceCapacity,
+		isStandalone: true,
+		selector: "jc-service-capacity",
+		inputs: {
+			serviceId: {
+				classPropertyName: "serviceId",
+				publicName: "serviceId",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			environments: {
+				classPropertyName: "environments",
+				publicName: "environments",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (capacity.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (capacity.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (mixedEnvironments()) {
+      <p class="jc-notice">This service runs in more than one environment, and their hardware may differ. Choose an environment for an estimate that means something.</p>
+    }
+    @if (capacity.value(); as m) {
+      @if (m.samples === 0) {
+        <p class="jc-muted">No telemetry from this service in this window.</p>
+      } @else {
+        <section class="jc-card" aria-labelledby="jc-capacity-estimate">
+          <h3 id="jc-capacity-estimate">Estimate</h3>
+          <div class="jc-capacity-inputs">
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Concurrent users</mat-label>
+              <input matInput type="number" min="1" name="users" [ngModel]="users()" (ngModelChange)="users.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Seconds between actions</mat-label>
+              <input matInput type="number" min="0" name="thinkSeconds" [ngModel]="thinkSeconds()" (ngModelChange)="thinkSeconds.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Requests per action</mat-label>
+              <input matInput type="number" min="0" name="perAction" [ngModel]="perAction()" (ngModelChange)="perAction.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Target CPU use (%)</mat-label>
+              <input matInput type="number" min="1" max="100" name="targetCpu" [ngModel]="targetCpu()" (ngModelChange)="targetCpu.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Cores per instance</mat-label>
+              <input matInput type="number" min="1" name="coresPerInstance" [ngModel]="coresPerInstance()" (ngModelChange)="coresPerInstance.set($event)" /></mat-form-field>
+          </div>
+          @if (plan(); as p) {
+            <div class="jc-capacity-result" data-testid="capacity-plan">
+              <div><strong>{{ p.instances }}</strong><span class="jc-muted">instance{{ p.instances === 1 ? '' : 's' }}</span></div>
+              <div><strong>{{ p.cores }}</strong><span class="jc-muted">cores in total</span></div>
+              <div><strong>{{ memory(p.memoryBytes) }}</strong><span class="jc-muted">memory per instance{{ m.memoryModel === 'peak' ? ' (highest seen)' : '' }}</span></div>
+              <div><strong>{{ perSecond(p.perSecond) }}</strong><span class="jc-muted">requests and messages/s</span></div>
+            </div>
+            @if (p.beyondMeasured !== null && p.beyondMeasured > 1) {
+              <p class="jc-notice" data-testid="capacity-beyond">Each instance would carry {{ perSecond(p.perInstance) }}/s, {{ p.beyondMeasured.toFixed(1) }}× the highest measured ({{ perSecond(m.peakPerSecond) }}/s). This is an extrapolation, and only a load test can confirm it.</p>
+            }
+          } @else if (m.cpuModel === 'none') {
+            <p class="jc-notice">No CPU data, so no estimate. CPU needs two readings at least a minute apart: choose a longer window, or wait. If it stays empty, add <code>AddMeter("System.Runtime")</code> to the host's metrics (.NET 9+).</p>
+          } @else {
+            <p class="jc-notice">No estimate for these values. Check them: idle CPU alone may already exceed the target.</p>
+          }
+          <ul class="jc-capacity-notes">
+            @if (responseRising(); as r) {
+              <li class="jc-bad">Response time already rises with load: {{ r.low }} ms when quiet, {{ r.high }} ms when busy. Something may be near its limit, so the real capacity may be lower.</li>
+            }
+            @if (busyConsumer()) {
+              <li class="jc-bad" data-testid="capacity-busy-consumer">Message processing was busy nearly all the time, at about {{ perSecond(m.peakMessagesPerSecond) }} messages/s per instance. If it handles one message at a time, that is its limit whatever CPU says, and its queue may be growing. The estimate uses that rate, but a saturated consumer's rate can fall, so it may not hold. See which step takes the time in a trace.</li>
+            }
+            @if (m.outbox?.fallingBehind) {
+              <li class="jc-bad" data-testid="capacity-outbox-behind">Outbox delivery is falling behind: {{ count(m.outbox!.undelivered) }} messages created in this window weren't delivered. CPU and requests can look healthy while this grows, and the estimate doesn't include it. If another service delivers this outbox, this doesn't apply.</li>
+            }
+            @if (m.peakQueue !== null && m.peakQueue >= notableQueue) {
+              <li class="jc-bad">The thread pool queue reached {{ m.peakQueue }}: work was waiting for a thread.</li>
+            }
+            @if (m.cpuModel === 'average') {
+              <li data-testid="capacity-load-hint">Load didn't vary enough here to separate idle CPU from the cost of each request, so this is rough. A <a [routerLink]="['load-runs'] | jcLink" [queryParams]="ctx.keep()">load test</a> gives a better estimate.</li>
+            }
+            <li>Assumes cost grows in a straight line with load. A database, lock or connection limit can be reached long before CPU runs out.</li>
+            <li>Covers this service only, not its databases, brokers or the services it calls.</li>
+          </ul>
+        </section>
+
+        <section class="jc-card" aria-labelledby="jc-capacity-measured">
+          <h3 id="jc-capacity-measured">Measured in this window</h3>
+          <table class="jc-table jc-capacity-measured">
+            <tbody>
+              <tr><th>CPU per request or message</th>
+                <td>
+                  @if (m.cpuSecondsPerUnit !== null) { {{ (m.cpuSecondsPerUnit * 1000).toFixed(1) }} ms }
+                  @else { <span class="jc-muted">No CPU data yet</span> }
+                  @if (m.cpuModel === 'average') {
+                    <div class="jc-muted jc-small">Measured in the busiest samples and includes idle CPU, so it can read high. Load didn't vary enough, or CPU didn't follow it in a straight line, to separate the two.</div>
+                  }
+                </td></tr>
+              <tr><th>Idle CPU</th><td>@if (m.idleCores !== null) { {{ m.idleCores.toFixed(2) }} cores } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Idle memory</th><td>@if (m.idleMemoryBytes !== null) { {{ memory(m.idleMemoryBytes) }} } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Memory growth under load</th><td>@if (m.memoryBytesPerInFlight !== null) { {{ memory(m.memoryBytesPerInFlight) }} per request in flight } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Highest load, one instance</th><td>{{ perSecond(m.peakPerSecond) }} requests and messages/s</td></tr>
+              <tr><th>Highest use, one instance</th><td>
+                {{ m.peakCores !== null ? m.peakCores.toFixed(2) + ' cores' : 'CPU unknown' }} · {{ m.peakMemoryBytes !== null ? memory(m.peakMemoryBytes) : 'memory unknown' }}</td></tr>
+              <tr><th>Average response</th><td>{{ m.responseMs !== null ? m.responseMs.toFixed(0) + ' ms' : '—' }}</td></tr>
+              <tr><th>Measured on</th><td>
+                {{ m.instances }} instance{{ m.instances === 1 ? '' : 's' }}@if (m.coresPerInstance) {, {{ m.coresPerInstance }} cores each}@if (m.hosts.length) {, on {{ m.hosts.join(', ') }}}.
+                <div class="jc-muted jc-small">Figures from other hardware carry over only roughly.</div></td></tr>
+              <tr><th>Based on</th><td>
+                {{ m.samples }} samples of {{ m.stepSeconds }} s.
+                <div class="jc-muted jc-small">{{ sourceNote() }}</div>
+                @if (m.truncated) { <div class="jc-bad jc-small">Too many samples in this window, so only the newest were used. Choose a shorter one.</div> }</td></tr>
+            </tbody>
+          </table>
+        </section>
+
+        @if (m.outbox; as o) {
+          <section class="jc-card" aria-labelledby="jc-capacity-outbox" data-testid="capacity-outbox">
+            <h3 id="jc-capacity-outbox">Outbox delivery</h3>
+            <table class="jc-table jc-capacity-measured">
+              <tbody>
+                <tr><th>Messages created</th><td>{{ perSecond(o.createdPerSecond) }}/s</td></tr>
+                <tr><th>Messages delivered</th><td>{{ perSecond(o.deliveredPerSecond) }}/s</td></tr>
+                <tr><th>Created but not delivered</th><td [class.jc-bad]="o.fallingBehind">{{ count(o.undelivered) }} in this window
+                  <div class="jc-muted jc-small">Includes messages of rolled-back transactions, which are never delivered.</div></td></tr>
+                <tr><th>Time to delivery, p95</th><td [class.jc-bad]="o.fallingBehind">@if (o.recentDelaySeconds !== null) { {{ o.recentDelaySeconds.toFixed(1) }} s in the last 5 minutes } @else { <span class="jc-muted">Nothing delivered in the last 5 minutes</span> }</td></tr>
+              </tbody>
+            </table>
+          </section>
+        }
+      }
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1$1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NumberValueAccessor,
+				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.MinValidator,
+				selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",
+				inputs: ["min"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.MaxValidator,
+				selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",
+				inputs: ["max"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i3$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i4.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ServiceCapacity,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-service-capacity",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				MatFormFieldModule,
+				MatInputModule,
+				MatProgressBarModule,
+				RouterLink,
+				LinkPipe
+			],
+			template: `
+    @if (capacity.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (capacity.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (mixedEnvironments()) {
+      <p class="jc-notice">This service runs in more than one environment, and their hardware may differ. Choose an environment for an estimate that means something.</p>
+    }
+    @if (capacity.value(); as m) {
+      @if (m.samples === 0) {
+        <p class="jc-muted">No telemetry from this service in this window.</p>
+      } @else {
+        <section class="jc-card" aria-labelledby="jc-capacity-estimate">
+          <h3 id="jc-capacity-estimate">Estimate</h3>
+          <div class="jc-capacity-inputs">
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Concurrent users</mat-label>
+              <input matInput type="number" min="1" name="users" [ngModel]="users()" (ngModelChange)="users.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Seconds between actions</mat-label>
+              <input matInput type="number" min="0" name="thinkSeconds" [ngModel]="thinkSeconds()" (ngModelChange)="thinkSeconds.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Requests per action</mat-label>
+              <input matInput type="number" min="0" name="perAction" [ngModel]="perAction()" (ngModelChange)="perAction.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Target CPU use (%)</mat-label>
+              <input matInput type="number" min="1" max="100" name="targetCpu" [ngModel]="targetCpu()" (ngModelChange)="targetCpu.set($event)" /></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic"><mat-label>Cores per instance</mat-label>
+              <input matInput type="number" min="1" name="coresPerInstance" [ngModel]="coresPerInstance()" (ngModelChange)="coresPerInstance.set($event)" /></mat-form-field>
+          </div>
+          @if (plan(); as p) {
+            <div class="jc-capacity-result" data-testid="capacity-plan">
+              <div><strong>{{ p.instances }}</strong><span class="jc-muted">instance{{ p.instances === 1 ? '' : 's' }}</span></div>
+              <div><strong>{{ p.cores }}</strong><span class="jc-muted">cores in total</span></div>
+              <div><strong>{{ memory(p.memoryBytes) }}</strong><span class="jc-muted">memory per instance{{ m.memoryModel === 'peak' ? ' (highest seen)' : '' }}</span></div>
+              <div><strong>{{ perSecond(p.perSecond) }}</strong><span class="jc-muted">requests and messages/s</span></div>
+            </div>
+            @if (p.beyondMeasured !== null && p.beyondMeasured > 1) {
+              <p class="jc-notice" data-testid="capacity-beyond">Each instance would carry {{ perSecond(p.perInstance) }}/s, {{ p.beyondMeasured.toFixed(1) }}× the highest measured ({{ perSecond(m.peakPerSecond) }}/s). This is an extrapolation, and only a load test can confirm it.</p>
+            }
+          } @else if (m.cpuModel === 'none') {
+            <p class="jc-notice">No CPU data, so no estimate. CPU needs two readings at least a minute apart: choose a longer window, or wait. If it stays empty, add <code>AddMeter("System.Runtime")</code> to the host's metrics (.NET 9+).</p>
+          } @else {
+            <p class="jc-notice">No estimate for these values. Check them: idle CPU alone may already exceed the target.</p>
+          }
+          <ul class="jc-capacity-notes">
+            @if (responseRising(); as r) {
+              <li class="jc-bad">Response time already rises with load: {{ r.low }} ms when quiet, {{ r.high }} ms when busy. Something may be near its limit, so the real capacity may be lower.</li>
+            }
+            @if (busyConsumer()) {
+              <li class="jc-bad" data-testid="capacity-busy-consumer">Message processing was busy nearly all the time, at about {{ perSecond(m.peakMessagesPerSecond) }} messages/s per instance. If it handles one message at a time, that is its limit whatever CPU says, and its queue may be growing. The estimate uses that rate, but a saturated consumer's rate can fall, so it may not hold. See which step takes the time in a trace.</li>
+            }
+            @if (m.outbox?.fallingBehind) {
+              <li class="jc-bad" data-testid="capacity-outbox-behind">Outbox delivery is falling behind: {{ count(m.outbox!.undelivered) }} messages created in this window weren't delivered. CPU and requests can look healthy while this grows, and the estimate doesn't include it. If another service delivers this outbox, this doesn't apply.</li>
+            }
+            @if (m.peakQueue !== null && m.peakQueue >= notableQueue) {
+              <li class="jc-bad">The thread pool queue reached {{ m.peakQueue }}: work was waiting for a thread.</li>
+            }
+            @if (m.cpuModel === 'average') {
+              <li data-testid="capacity-load-hint">Load didn't vary enough here to separate idle CPU from the cost of each request, so this is rough. A <a [routerLink]="['load-runs'] | jcLink" [queryParams]="ctx.keep()">load test</a> gives a better estimate.</li>
+            }
+            <li>Assumes cost grows in a straight line with load. A database, lock or connection limit can be reached long before CPU runs out.</li>
+            <li>Covers this service only, not its databases, brokers or the services it calls.</li>
+          </ul>
+        </section>
+
+        <section class="jc-card" aria-labelledby="jc-capacity-measured">
+          <h3 id="jc-capacity-measured">Measured in this window</h3>
+          <table class="jc-table jc-capacity-measured">
+            <tbody>
+              <tr><th>CPU per request or message</th>
+                <td>
+                  @if (m.cpuSecondsPerUnit !== null) { {{ (m.cpuSecondsPerUnit * 1000).toFixed(1) }} ms }
+                  @else { <span class="jc-muted">No CPU data yet</span> }
+                  @if (m.cpuModel === 'average') {
+                    <div class="jc-muted jc-small">Measured in the busiest samples and includes idle CPU, so it can read high. Load didn't vary enough, or CPU didn't follow it in a straight line, to separate the two.</div>
+                  }
+                </td></tr>
+              <tr><th>Idle CPU</th><td>@if (m.idleCores !== null) { {{ m.idleCores.toFixed(2) }} cores } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Idle memory</th><td>@if (m.idleMemoryBytes !== null) { {{ memory(m.idleMemoryBytes) }} } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Memory growth under load</th><td>@if (m.memoryBytesPerInFlight !== null) { {{ memory(m.memoryBytesPerInFlight) }} per request in flight } @else { <span class="jc-muted">Not separated</span> }</td></tr>
+              <tr><th>Highest load, one instance</th><td>{{ perSecond(m.peakPerSecond) }} requests and messages/s</td></tr>
+              <tr><th>Highest use, one instance</th><td>
+                {{ m.peakCores !== null ? m.peakCores.toFixed(2) + ' cores' : 'CPU unknown' }} · {{ m.peakMemoryBytes !== null ? memory(m.peakMemoryBytes) : 'memory unknown' }}</td></tr>
+              <tr><th>Average response</th><td>{{ m.responseMs !== null ? m.responseMs.toFixed(0) + ' ms' : '—' }}</td></tr>
+              <tr><th>Measured on</th><td>
+                {{ m.instances }} instance{{ m.instances === 1 ? '' : 's' }}@if (m.coresPerInstance) {, {{ m.coresPerInstance }} cores each}@if (m.hosts.length) {, on {{ m.hosts.join(', ') }}}.
+                <div class="jc-muted jc-small">Figures from other hardware carry over only roughly.</div></td></tr>
+              <tr><th>Based on</th><td>
+                {{ m.samples }} samples of {{ m.stepSeconds }} s.
+                <div class="jc-muted jc-small">{{ sourceNote() }}</div>
+                @if (m.truncated) { <div class="jc-bad jc-small">Too many samples in this window, so only the newest were used. Choose a shorter one.</div> }</td></tr>
+            </tbody>
+          </table>
+        </section>
+
+        @if (m.outbox; as o) {
+          <section class="jc-card" aria-labelledby="jc-capacity-outbox" data-testid="capacity-outbox">
+            <h3 id="jc-capacity-outbox">Outbox delivery</h3>
+            <table class="jc-table jc-capacity-measured">
+              <tbody>
+                <tr><th>Messages created</th><td>{{ perSecond(o.createdPerSecond) }}/s</td></tr>
+                <tr><th>Messages delivered</th><td>{{ perSecond(o.deliveredPerSecond) }}/s</td></tr>
+                <tr><th>Created but not delivered</th><td [class.jc-bad]="o.fallingBehind">{{ count(o.undelivered) }} in this window
+                  <div class="jc-muted jc-small">Includes messages of rolled-back transactions, which are never delivered.</div></td></tr>
+                <tr><th>Time to delivery, p95</th><td [class.jc-bad]="o.fallingBehind">@if (o.recentDelaySeconds !== null) { {{ o.recentDelaySeconds.toFixed(1) }} s in the last 5 minutes } @else { <span class="jc-muted">Nothing delivered in the last 5 minutes</span> }</td></tr>
+              </tbody>
+            </table>
+          </section>
+        }
+      }
+    }`
+		}]
+	}],
+	propDecorators: {
+		serviceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "serviceId",
+				required: true
+			}]
+		}],
+		environments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "environments",
+				required: false
+			}]
+		}]
+	}
+});
+const TABS = [
+	"overview",
+	"operations",
+	"dependencies",
+	"traces",
+	"logs",
+	"metrics",
+	"capacity"
+];
+var ServicePage = class ServicePage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	router = inject(Router);
+	links = inject(ObservabilityLinks);
+	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	tab = input(...ngDevMode ? [void 0, { debugName: "tab" }] : /* istanbul ignore next */ []);
+	op = input(...ngDevMode ? [void 0, { debugName: "op" }] : /* istanbul ignore next */ []);
+	status = input(...ngDevMode ? [void 0, { debugName: "status" }] : /* istanbul ignore next */ []);
+	slow = input(...ngDevMode ? [void 0, { debugName: "slow" }] : /* istanbul ignore next */ []);
+	instance = input(...ngDevMode ? [void 0, { debugName: "instance" }] : /* istanbul ignore next */ []);
+	dependency = input(...ngDevMode ? [void 0, { debugName: "dependency" }] : /* istanbul ignore next */ []);
+	tabIndex = computed(() => Math.max(0, TABS.indexOf(this.tab() ?? "overview")), ...ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []);
+	operation = computed(() => this.op() ?? null, ...ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []);
+	instanceFilter = computed(() => this.instance() ?? null, ...ngDevMode ? [{ debugName: "instanceFilter" }] : /* istanbul ignore next */ []);
+	service = apiResource({
+		params: () => this.id(),
+		stream: ({ params }) => this.api.resource(params)
+	});
+	topology = apiResource({
+		params: () => this.ctx.environment(),
+		stream: ({ params }) => this.api.topology(params || null)
+	});
+	operations = apiResource({
+		params: () => ({
+			id: this.id(),
+			env: this.ctx.environment(),
+			range: this.ctx.range(),
+			abs: this.ctx.absolute(),
+			on: this.tabIndex() === 1
+		}),
+		stream: ({ params }) => this.api.operations({
+			serviceId: params.id,
+			environment: params.env,
+			...this.ctx.window(),
+			limit: 200
+		})
+	});
+	error = computed(() => problemText(this.service.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	health = computed(() => (this.service.value()?.health ?? []).filter((h) => h.subjectType === "service"), ...ngDevMode ? [{ debugName: "health" }] : /* istanbul ignore next */ []);
+	instances = computed(() => {
+		const env = this.ctx.environment();
+		return (this.service.value()?.instances ?? []).filter((i) => !env || i.environment === env);
+	}, ...ngDevMode ? [{ debugName: "instances" }] : /* istanbul ignore next */ []);
+	environments = computed(() => (this.service.value()?.instances ?? []).map((i) => i.environment), ...ngDevMode ? [{ debugName: "environments" }] : /* istanbul ignore next */ []);
+	nodes = computed(() => new Map((this.topology.value()?.nodes ?? []).map((n) => [n.id, n])), ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+	edgesWhere(match) {
+		const other = match === "source" ? "target" : "source";
+		return (this.topology.value()?.edges ?? []).filter((e) => e[match] === this.id()).map((edge) => {
+			const node = this.nodes().get(edge[other]);
+			return {
+				edge,
+				name: node?.displayName ?? edge[other],
+				type: node?.type ?? "",
+				link: this.links.to(node?.type === "service" ? "services" : "resources", edge[other])
+			};
+		});
+	}
+	downstream = computed(() => this.edgesWhere("source"), ...ngDevMode ? [{ debugName: "downstream" }] : /* istanbul ignore next */ []);
+	upstream = computed(() => this.edgesWhere("target"), ...ngDevMode ? [{ debugName: "upstream" }] : /* istanbul ignore next */ []);
+	dependencyOf(reason) {
+		const name = reason.match(/^(?:critical_)?dependency_(?:failed|unknown):(.+)$/)?.[1];
+		if (!name) return null;
+		const node = [...this.nodes().values()].find((n) => n.type === "service" && (n.displayName === name || name.endsWith(`/${n.displayName}`)));
+		return node ? { id: node.id } : null;
+	}
+	traceQuery = computed(() => ({
+		serviceId: this.id(),
+		operation: this.op(),
+		status: this.status(),
+		minDurationMs: this.slow(),
+		instanceId: this.instance(),
+		dependencyId: this.dependency()
+	}), ...ngDevMode ? [{ debugName: "traceQuery" }] : /* istanbul ignore next */ []);
+	traceFilters = computed(() => {
+		const filters = [];
+		if (this.op()) filters.push({
+			label: `operation: ${this.op()}`,
+			clear: { op: null }
+		});
+		if (this.status()) filters.push({
+			label: `status: ${this.status()}`,
+			clear: { status: null }
+		});
+		if (this.slow()) filters.push({
+			label: `slower than ${Math.round(Number(this.slow()))} ms`,
+			clear: { slow: null }
+		});
+		if (this.instance()) filters.push({
+			label: "one instance",
+			clear: { instance: null }
+		});
+		if (this.dependency()) filters.push({
+			label: "through one dependency",
+			clear: { dependency: null }
+		});
+		return filters;
+	}, ...ngDevMode ? [{ debugName: "traceFilters" }] : /* istanbul ignore next */ []);
+	openTab(index) {
+		this.router.navigate([], {
+			queryParams: { tab: TABS[index] },
+			queryParamsHandling: "merge"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ServicePage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ServicePage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tab: {
+				classPropertyName: "tab",
+				publicName: "tab",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			op: {
+				classPropertyName: "op",
+				publicName: "op",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			slow: {
+				classPropertyName: "slow",
+				publicName: "slow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			instance: {
+				classPropertyName: "instance",
+				publicName: "instance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dependency: {
+				classPropertyName: "dependency",
+				publicName: "dependency",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <jc-context-bar>
+      <a [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Services</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1>{{ service.value()?.key ?? '…' }}</h1>
+      @for (l of service.value()?.links ?? []; track l.url) { <a mat-button [href]="l.url" target="_blank" rel="noopener">{{ l.title }} ↗</a> }
+    </jc-context-bar>
+    @if (service.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (service.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    @if (service.value(); as s) {
+      <div class="jc-health-strip">
+        @for (h of health(); track h.environment) {
+          <div class="jc-card jc-health-card" [class.jc-selected]="h.environment === ctx.environment()">
+            <div class="jc-row"><strong>{{ h.environment ?? 'no environment' }}</strong><jc-health [state]="h.state" [stale]="h.stale" /></div>
+            <ul class="jc-reasons">
+              @for (r of h.reasons; track r) {
+                <li>
+                  @if (dependencyOf(r); as dep) {
+                    {{ r | reason }} — <a [routerLink]="['services', dep.id] | jcLink" [queryParams]="ctx.keep()">open</a>
+                  } @else { {{ r | reason }} }
+                </li>
+              }
+            </ul>
+            <div class="jc-muted jc-small">since {{ h.since | ago }} · evaluated {{ h.evaluatedAt | ago }}</div>
+            @if (h.environment && h.environment !== ctx.environment()) {
+              <button mat-button (click)="ctx.set({ env: h.environment })">Investigate {{ h.environment }}</button>
+            }
+          </div>
+        } @empty { <p class="jc-muted">No health evaluated yet: no data.</p> }
+      </div>
+
+      <mat-tab-group [selectedIndex]="tabIndex()" (selectedIndexChange)="openTab($event)" animationDuration="0ms" mat-stretch-tabs="false">
+        <mat-tab label="Overview">
+          @if (tabIndex() === 0) {
+            <jc-service-stats [query]="{ serviceId: id() }" />
+            <h3>Instances</h3>
+            <table class="jc-table">
+              <thead><tr><th>Instance</th><th>Environment</th><th>Health</th><th>Version</th><th>State</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (i of instances(); track i.id) {
+                  <tr>
+                    <td>{{ i.instanceKey }}@if (i.keySource !== 'Observed') { <span class="jc-muted jc-small" title="No service.instance.id: derived from host and process"> (derived)</span> }</td>
+                    <td>{{ i.environment }}</td>
+                    <td><jc-health [state]="i.health" /></td>
+                    <td>{{ i.serviceVersion ?? '—' }}</td>
+                    <td>{{ i.state }}</td>
+                    <td>{{ i.lastSeen | ago }}</td>
+                    <td class="jc-nowrap">
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', instance: i.id })">traces</a> ·
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'logs', instance: i.id })">logs</a>
+                      @if (i.hostResourceId) { · <a [routerLink]="['resources', i.hostResourceId] | jcLink" [queryParams]="ctx.keep()">host</a> }
+                    </td>
+                  </tr>
+                } @empty { <tr><td colspan="7" class="jc-muted">No instances.</td></tr> }
+              </tbody>
+            </table>
+          }
+        </mat-tab>
+
+        <mat-tab label="Operations">
+          @if (tabIndex() === 1) {
+            @if (operations.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+            <table class="jc-table">
+              <thead><tr><th>Operation</th><th>Kind</th><th>Requests</th><th title="Average over the selected time range. The chart shows each moment, so a burst reads higher there.">Avg/s</th><th>Errors</th><th>p50</th><th>p95</th><th>p99</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (o of operations.value()?.items ?? []; track o.name + o.kind) {
+                  <tr [class.jc-selected]="o.name === operation()">
+                    <td><a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'operations', op: o.name })">{{ o.name }}</a></td>
+                    <td>{{ o.kind }}</td>
+                    <td>{{ o.count }}</td>
+                    <td>{{ o.requestsPerSecond.toFixed(2) }}</td>
+                    <td [class.jc-bad]="o.errorRate >= 0.05">{{ o.errorRate | percent2 }}</td>
+                    <td>{{ o.p50Ms | duration }}</td><td>{{ o.p95Ms | duration }}</td><td>{{ o.p99Ms | duration }}</td>
+                    <td>{{ o.lastSeen | ago }}</td>
+                    <td class="jc-nowrap">
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', op: o.name, status: 'error' })">error traces</a> ·
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', op: o.name, slow: o.p95Ms })">slow traces</a>
+                    </td>
+                  </tr>
+                } @empty { <tr><td colspan="10" class="jc-muted">No operations in this window.</td></tr> }
+              </tbody>
+            </table>
+            @if (operation(); as op) {
+              <h3>{{ op }}</h3>
+              <jc-service-stats [query]="{ serviceId: id(), operation: op }" />
+            }
+          }
+        </mat-tab>
+
+        <mat-tab label="Dependencies">
+          @if (tabIndex() === 2) {
+            <h3>Calls and uses</h3>
+            <table class="jc-table">
+              <thead><tr><th>Target</th><th>Relation</th><th>Evidence</th><th>Spans seen</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (d of downstream(); track d.edge.id) {
+                  <tr>
+                    <td><a [routerLink]="d.link" [queryParams]="ctx.keep()">{{ d.name }}</a>&nbsp;<span class="jc-muted jc-small">{{ d.type }}</span></td>
+                    <td>{{ d.edge.relation }}</td>
+                    <td><jc-confidence [confidence]="d.edge.confidence" /></td>
+                    <td>{{ d.edge.spanCount }}</td>
+                    <td>{{ d.edge.lastSeen | ago }}</td>
+                    <td><a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: d.edge.id })">evidence</a> ·
+                        <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', dependency: d.edge.id })">traces</a></td>
+                  </tr>
+                } @empty { <tr><td colspan="6" class="jc-muted">No downstream dependencies seen.</td></tr> }
+              </tbody>
+            </table>
+            <h3>Called by</h3>
+            <table class="jc-table">
+              <tbody>
+                @for (d of upstream(); track d.edge.id) {
+                  <tr><td><a [routerLink]="d.link" [queryParams]="ctx.keep()">{{ d.name }}</a></td><td>{{ d.edge.relation }}</td>
+                      <td><jc-confidence [confidence]="d.edge.confidence" /></td><td>{{ d.edge.lastSeen | ago }}</td>
+                      <td><a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: d.edge.id })">evidence</a></td></tr>
+                } @empty { <tr><td class="jc-muted">No callers seen.</td></tr> }
+              </tbody>
+            </table>
+          }
+        </mat-tab>
+
+        <mat-tab label="Traces">
+          @if (tabIndex() === 3) {
+            <div class="jc-filters">
+              @for (f of traceFilters(); track f.label) { <span class="jc-chip">{{ f.label }} <a [routerLink]="[]" [queryParams]="f.clear" queryParamsHandling="merge" [attr.aria-label]="'Remove ' + f.label">×</a></span> }
+            </div>
+            <jc-trace-table [query]="traceQuery()" />
+          }
+        </mat-tab>
+
+        <mat-tab label="Logs">
+          @if (tabIndex() === 4) { <jc-log-table [query]="{ serviceId: id(), instanceId: instanceFilter() }" /> }
+        </mat-tab>
+
+        <mat-tab label="Metrics">
+          @if (tabIndex() === 5) { <jc-metric-explorer [scope]="{ serviceId: id(), instanceId: instanceFilter() }" /> }
+        </mat-tab>
+
+        <mat-tab label="Capacity">
+          @if (tabIndex() === 6) { <jc-service-capacity [serviceId]="id()" [environments]="environments()" /> }
+        </mat-tab>
+      </mat-tab-group>
+    }`,
+		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: MatTabsModule
+			},
+			{
+				kind: "component",
+				type: i1.MatTab,
+				selector: "mat-tab",
+				inputs: [
+					"disabled",
+					"label",
+					"aria-label",
+					"aria-labelledby",
+					"labelClass",
+					"bodyClass",
+					"id"
+				],
+				exportAs: ["matTab"]
+			},
+			{
+				kind: "component",
+				type: i1.MatTabGroup,
+				selector: "mat-tab-group",
+				inputs: [
+					"color",
+					"fitInkBarToContent",
+					"mat-stretch-tabs",
+					"mat-align-tabs",
+					"dynamicHeight",
+					"selectedIndex",
+					"headerPosition",
+					"animationDuration",
+					"contentTabIndex",
+					"disablePagination",
+					"disableRipple",
+					"preserveContent",
+					"backgroundColor",
+					"aria-label",
+					"aria-labelledby"
+				],
+				outputs: [
+					"selectedIndexChange",
+					"focusChange",
+					"animationDone",
+					"selectedTabChange"
+				],
+				exportAs: ["matTabGroup"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i4.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i3.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "component",
+				type: HealthBadge,
+				selector: "jc-health",
+				inputs: ["state", "stale"]
+			},
+			{
+				kind: "component",
+				type: ConfidenceBadge,
+				selector: "jc-confidence",
+				inputs: ["confidence"]
+			},
+			{
+				kind: "component",
+				type: TraceTable,
+				selector: "jc-trace-table",
+				inputs: ["query", "limit"]
+			},
+			{
+				kind: "component",
+				type: LogTable,
+				selector: "jc-log-table",
+				inputs: ["query", "compact"]
+			},
+			{
+				kind: "component",
+				type: MetricExplorer,
+				selector: "jc-metric-explorer",
+				inputs: ["scope", "initial"]
+			},
+			{
+				kind: "component",
+				type: ServiceStatsCharts,
+				selector: "jc-service-stats",
+				inputs: ["query"]
+			},
+			{
+				kind: "component",
+				type: ServiceCapacity,
+				selector: "jc-service-capacity",
+				inputs: ["serviceId", "environments"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: AgoPipe,
+				name: "ago"
+			},
+			{
+				kind: "pipe",
+				type: DurationPipe,
+				name: "duration"
+			},
+			{
+				kind: "pipe",
+				type: PercentPipe,
+				name: "percent2"
+			},
+			{
+				kind: "pipe",
+				type: ReasonPipe,
+				name: "reason"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ServicePage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				MatTabsModule,
+				MatProgressBarModule,
+				MatButtonModule,
+				ContextBar,
+				HealthBadge,
+				ConfidenceBadge,
+				TraceTable,
+				LogTable,
+				MetricExplorer,
+				ServiceStatsCharts,
+				ServiceCapacity,
+				AgoPipe,
+				DurationPipe,
+				PercentPipe,
+				ReasonPipe
+			],
+			template: `
+    <jc-context-bar>
+      <a [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Services</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1>{{ service.value()?.key ?? '…' }}</h1>
+      @for (l of service.value()?.links ?? []; track l.url) { <a mat-button [href]="l.url" target="_blank" rel="noopener">{{ l.title }} ↗</a> }
+    </jc-context-bar>
+    @if (service.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (service.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    @if (service.value(); as s) {
+      <div class="jc-health-strip">
+        @for (h of health(); track h.environment) {
+          <div class="jc-card jc-health-card" [class.jc-selected]="h.environment === ctx.environment()">
+            <div class="jc-row"><strong>{{ h.environment ?? 'no environment' }}</strong><jc-health [state]="h.state" [stale]="h.stale" /></div>
+            <ul class="jc-reasons">
+              @for (r of h.reasons; track r) {
+                <li>
+                  @if (dependencyOf(r); as dep) {
+                    {{ r | reason }} — <a [routerLink]="['services', dep.id] | jcLink" [queryParams]="ctx.keep()">open</a>
+                  } @else { {{ r | reason }} }
+                </li>
+              }
+            </ul>
+            <div class="jc-muted jc-small">since {{ h.since | ago }} · evaluated {{ h.evaluatedAt | ago }}</div>
+            @if (h.environment && h.environment !== ctx.environment()) {
+              <button mat-button (click)="ctx.set({ env: h.environment })">Investigate {{ h.environment }}</button>
+            }
+          </div>
+        } @empty { <p class="jc-muted">No health evaluated yet: no data.</p> }
+      </div>
+
+      <mat-tab-group [selectedIndex]="tabIndex()" (selectedIndexChange)="openTab($event)" animationDuration="0ms" mat-stretch-tabs="false">
+        <mat-tab label="Overview">
+          @if (tabIndex() === 0) {
+            <jc-service-stats [query]="{ serviceId: id() }" />
+            <h3>Instances</h3>
+            <table class="jc-table">
+              <thead><tr><th>Instance</th><th>Environment</th><th>Health</th><th>Version</th><th>State</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (i of instances(); track i.id) {
+                  <tr>
+                    <td>{{ i.instanceKey }}@if (i.keySource !== 'Observed') { <span class="jc-muted jc-small" title="No service.instance.id: derived from host and process"> (derived)</span> }</td>
+                    <td>{{ i.environment }}</td>
+                    <td><jc-health [state]="i.health" /></td>
+                    <td>{{ i.serviceVersion ?? '—' }}</td>
+                    <td>{{ i.state }}</td>
+                    <td>{{ i.lastSeen | ago }}</td>
+                    <td class="jc-nowrap">
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', instance: i.id })">traces</a> ·
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'logs', instance: i.id })">logs</a>
+                      @if (i.hostResourceId) { · <a [routerLink]="['resources', i.hostResourceId] | jcLink" [queryParams]="ctx.keep()">host</a> }
+                    </td>
+                  </tr>
+                } @empty { <tr><td colspan="7" class="jc-muted">No instances.</td></tr> }
+              </tbody>
+            </table>
+          }
+        </mat-tab>
+
+        <mat-tab label="Operations">
+          @if (tabIndex() === 1) {
+            @if (operations.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+            <table class="jc-table">
+              <thead><tr><th>Operation</th><th>Kind</th><th>Requests</th><th title="Average over the selected time range. The chart shows each moment, so a burst reads higher there.">Avg/s</th><th>Errors</th><th>p50</th><th>p95</th><th>p99</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (o of operations.value()?.items ?? []; track o.name + o.kind) {
+                  <tr [class.jc-selected]="o.name === operation()">
+                    <td><a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'operations', op: o.name })">{{ o.name }}</a></td>
+                    <td>{{ o.kind }}</td>
+                    <td>{{ o.count }}</td>
+                    <td>{{ o.requestsPerSecond.toFixed(2) }}</td>
+                    <td [class.jc-bad]="o.errorRate >= 0.05">{{ o.errorRate | percent2 }}</td>
+                    <td>{{ o.p50Ms | duration }}</td><td>{{ o.p95Ms | duration }}</td><td>{{ o.p99Ms | duration }}</td>
+                    <td>{{ o.lastSeen | ago }}</td>
+                    <td class="jc-nowrap">
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', op: o.name, status: 'error' })">error traces</a> ·
+                      <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', op: o.name, slow: o.p95Ms })">slow traces</a>
+                    </td>
+                  </tr>
+                } @empty { <tr><td colspan="10" class="jc-muted">No operations in this window.</td></tr> }
+              </tbody>
+            </table>
+            @if (operation(); as op) {
+              <h3>{{ op }}</h3>
+              <jc-service-stats [query]="{ serviceId: id(), operation: op }" />
+            }
+          }
+        </mat-tab>
+
+        <mat-tab label="Dependencies">
+          @if (tabIndex() === 2) {
+            <h3>Calls and uses</h3>
+            <table class="jc-table">
+              <thead><tr><th>Target</th><th>Relation</th><th>Evidence</th><th>Spans seen</th><th>Last seen</th><th></th></tr></thead>
+              <tbody>
+                @for (d of downstream(); track d.edge.id) {
+                  <tr>
+                    <td><a [routerLink]="d.link" [queryParams]="ctx.keep()">{{ d.name }}</a>&nbsp;<span class="jc-muted jc-small">{{ d.type }}</span></td>
+                    <td>{{ d.edge.relation }}</td>
+                    <td><jc-confidence [confidence]="d.edge.confidence" /></td>
+                    <td>{{ d.edge.spanCount }}</td>
+                    <td>{{ d.edge.lastSeen | ago }}</td>
+                    <td><a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: d.edge.id })">evidence</a> ·
+                        <a [routerLink]="[]" [queryParams]="ctx.keep({ tab: 'traces', dependency: d.edge.id })">traces</a></td>
+                  </tr>
+                } @empty { <tr><td colspan="6" class="jc-muted">No downstream dependencies seen.</td></tr> }
+              </tbody>
+            </table>
+            <h3>Called by</h3>
+            <table class="jc-table">
+              <tbody>
+                @for (d of upstream(); track d.edge.id) {
+                  <tr><td><a [routerLink]="d.link" [queryParams]="ctx.keep()">{{ d.name }}</a></td><td>{{ d.edge.relation }}</td>
+                      <td><jc-confidence [confidence]="d.edge.confidence" /></td><td>{{ d.edge.lastSeen | ago }}</td>
+                      <td><a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: d.edge.id })">evidence</a></td></tr>
+                } @empty { <tr><td class="jc-muted">No callers seen.</td></tr> }
+              </tbody>
+            </table>
+          }
+        </mat-tab>
+
+        <mat-tab label="Traces">
+          @if (tabIndex() === 3) {
+            <div class="jc-filters">
+              @for (f of traceFilters(); track f.label) { <span class="jc-chip">{{ f.label }} <a [routerLink]="[]" [queryParams]="f.clear" queryParamsHandling="merge" [attr.aria-label]="'Remove ' + f.label">×</a></span> }
+            </div>
+            <jc-trace-table [query]="traceQuery()" />
+          }
+        </mat-tab>
+
+        <mat-tab label="Logs">
+          @if (tabIndex() === 4) { <jc-log-table [query]="{ serviceId: id(), instanceId: instanceFilter() }" /> }
+        </mat-tab>
+
+        <mat-tab label="Metrics">
+          @if (tabIndex() === 5) { <jc-metric-explorer [scope]="{ serviceId: id(), instanceId: instanceFilter() }" /> }
+        </mat-tab>
+
+        <mat-tab label="Capacity">
+          @if (tabIndex() === 6) { <jc-service-capacity [serviceId]="id()" [environments]="environments()" /> }
+        </mat-tab>
+      </mat-tab-group>
+    }`
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: true
+			}]
+		}],
+		tab: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tab",
+				required: false
+			}]
+		}],
+		op: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "op",
+				required: false
+			}]
+		}],
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		slow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slow",
+				required: false
+			}]
+		}],
+		instance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "instance",
+				required: false
+			}]
+		}],
+		dependency: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dependency",
+				required: false
+			}]
+		}]
+	}
+});
+export { ServicePage };
+
+//# sourceMappingURL=juice-js-observability-service.page-BrcID0Bs.mjs.map