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

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

@@ -1,726 +0,0 @@
-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 } 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 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-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 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-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-Dt8bN2Ry.mjs.map