@juice-js/observability 0.0.0-stage → 1.0.0-alpha.5

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

@@ -0,0 +1,726 @@
+import { ApiService, ContextService, LinkPipe, ObservabilityLinks } from "./juice-js-observability.mjs";
+import { _ as ReasonPipe, a as problemText, c as ConfidenceBadge, g as PercentPipe, h as DurationPipe, i as TraceTable, l as ContextBar, m as AgoPipe, n as MetricExplorer, r as ServiceStatsCharts, t as LogTable, u as HealthBadge, x as apiResource } from "./juice-js-observability-telemetry-D9EYxkdr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { Router, RouterLink } from "@angular/router";
+import * as i3 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i2 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i1 from "@angular/material/tabs";
+import { MatTabsModule } from "@angular/material/tabs";
+const TABS = [
+	"overview",
+	"operations",
+	"dependencies",
+	"traces",
+	"logs",
+	"metrics"
+];
+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 */ []);
+	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>Per second</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-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: i2.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: "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,
+				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>Per second</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-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-Qc6FYChB.mjs.map