npm - @juice-js/observability - Versions diffs - 0.0.0-stage → 1.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/fesm2022/juice-js-observability-topology.page-CLz7J5pq.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"juice-js-observability-topology.page-CLz7J5pq.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/topology.page.ts"],"sourcesContent":["import { LinkPipe, ObservabilityLinks } from '../core/options';\nimport {\n ChangeDetectionStrategy, Component, ElementRef, OnDestroy, afterNextRender, computed, effect, inject, input, viewChild,\n} from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { Router, RouterLink } from '@angular/router';\nimport type { Core, StylesheetJson } from 'cytoscape';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { Topology } from '../core/models';\nimport { AgoPipe, DurationPipe, PercentPipe } from '../shared/format';\nimport { ConfidenceBadge, ContextBar, HealthBadge } from '../shared/ui';\nimport { problemText } from '../shared/telemetry';\nimport { onThemeChange, themeColor } from '../shared/theme';\n\n/** A service's health → its --jc-* colour from the app's theme (observability.colors). */\nconst HEALTH_TOKENS: Record<string, string> = {\n Healthy: 'ok', Degraded: 'warn', Unhealthy: 'bad', Critical: 'crit', Offline: 'off', Unknown: 'none',\n};\n\n/**\n * Dependency topology (Console requirements §9): services, databases and destinations; zoom, pan and selection.\n * Observed edges are solid, inferred ones dashed and labelled, so an inference never reads as a confirmed call. A\n * selected edge shows its evidence and representative traces; the selection is in the URL.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LinkPipe, RouterLink, MatButtonModule, MatIconModule, MatProgressBarModule, ContextBar, HealthBadge, ConfidenceBadge,\n AgoPipe, DurationPipe, PercentPipe],\n template: `\n <jc-context-bar><h1>Dependencies</h1></jc-context-bar>\n @if (topology.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n @if (topology.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n <div class=\"jc-topology\">\n <div class=\"jc-graph-wrap\">\n <div #graph class=\"jc-graph\" aria-label=\"Dependency graph\"></div>\n <div class=\"jc-graph-legend\">\n <span><i class=\"jc-line\"></i> observed</span><span><i class=\"jc-line jc-dashed\"></i> inferred</span>\n <span>■ service ◆ database ⬣ destination</span>\n <button mat-button (click)=\"fit()\">Fit</button>\n </div>\n @if (topology.value()?.truncated) { <p class=\"jc-muted\">Showing the most recent edges only.</p> }\n @if (topology.hasValue() && topology.value()!.nodes.length === 0) { <p class=\"jc-muted\">No dependencies seen{{ ctx.environment() ? ' in ' + ctx.environment() : '' }}.</p> }\n </div>\n\n <aside class=\"jc-card jc-side\">\n @if (selectedEdge(); as e) {\n <h2>{{ name(e.source) }} → {{ name(e.target) }}</h2>\n <p>{{ e.relation }} <jc-confidence [confidence]=\"e.confidence\" /></p>\n @if (e.confidence.toLowerCase() !== 'observed') {\n <p class=\"jc-muted jc-small\">Inferred from span attributes (for example db.system.name or messaging.destination.name), not a call\n seen between two instrumented services.</p>\n }\n @if (evidence.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n @if (evidence.value(); as ev) {\n <dl class=\"jc-facts\">\n <dt>Calls in window</dt><dd>{{ ev.count }}</dd>\n <dt>Error rate</dt><dd [class.jc-bad]=\"ev.errorRate >= 0.05\">{{ ev.count ? (ev.errorRate | percent2) : 'no data' }}</dd>\n <dt>p95</dt><dd>{{ ev.p95Ms | duration }}</dd>\n <dt>Last seen</dt><dd>{{ ev.lastSeen ?? e.lastSeen | ago }}</dd>\n </dl>\n <h3>Representative traces</h3>\n @for (t of ev.errorTraces; track t) { <div><a [routerLink]=\"['traces', t] | jcLink\" [queryParams]=\"ctx.keep()\" class=\"jc-mono\">{{ t.slice(0, 16) }}…</a> <span class=\"jc-badge jc-health-unhealthy\">error</span></div> }\n @for (t of ev.slowestTraces; track t) { <div><a [routerLink]=\"['traces', t] | jcLink\" [queryParams]=\"ctx.keep()\" class=\"jc-mono\">{{ t.slice(0, 16) }}…</a> <span class=\"jc-muted jc-small\">slow</span></div> }\n @if (!ev.errorTraces.length && !ev.slowestTraces.length) { <p class=\"jc-muted\">No calls in this window.</p> }\n <a mat-stroked-button [routerLink]=\"['traces'] | jcLink\" [queryParams]=\"ctx.keep({ dependency: e.id })\">All traces through this edge</a>\n }\n <p><a [routerLink]=\"link(e.source)\" [queryParams]=\"ctx.keep()\">Open {{ name(e.source) }}</a> ·\n <a [routerLink]=\"link(e.target)\" [queryParams]=\"ctx.keep()\">Open {{ name(e.target) }}</a></p>\n } @else if (selectedNode(); as n) {\n <h2>{{ n.displayName }}</h2>\n <p>{{ n.type }} <jc-health [state]=\"n.health\" /></p>\n <a mat-stroked-button [routerLink]=\"link(n.id)\" [queryParams]=\"ctx.keep()\">Open</a>\n } @else {\n <p class=\"jc-muted\">Select a node or an edge. Scroll to zoom, drag to pan.</p>\n }\n </aside>\n </div>`,\n})\nexport class TopologyPage implements OnDestroy {\n protected readonly ctx = inject(ContextService);\n private readonly api = inject(ApiService);\n private readonly router = inject(Router);\n private readonly links = inject(ObservabilityLinks);\n\n readonly edge = input<string>();\n readonly node = input<string>();\n\n private readonly graph = viewChild.required<ElementRef<HTMLDivElement>>('graph');\n private cy?: Core;\n private stopThemeWatch?: () => void;\n\n protected readonly topology = apiResource({ params: () => this.ctx.environment(), stream: ({ params }) => this.api.topology(params || null) });\n protected readonly error = computed(() => problemText(this.topology.error()));\n private readonly nodes = computed(() => new Map((this.topology.value()?.nodes ?? []).map(n => [n.id, n])));\n protected readonly selectedEdge = computed(() => this.topology.value()?.edges.find(e => e.id === this.edge()) ?? null);\n protected readonly selectedNode = computed(() => (this.node() ? this.nodes().get(this.node()!) : null) ?? null);\n protected readonly evidence = apiResource({\n // No edge selected: undefined params leave the resource idle.\n params: () => this.edge() ? { edge: this.edge()!, env: this.ctx.environment(), range: this.ctx.range(), abs: this.ctx.absolute() } : undefined,\n stream: ({ params }) => this.api.dependency(params.edge, { environment: params.env, ...this.ctx.window() }),\n });\n\n constructor() {\n afterNextRender(async () => {\n const cytoscape = (await import('cytoscape')).default;\n this.cy = cytoscape({\n container: this.graph().nativeElement,\n wheelSensitivity: 0.3,\n style: this.graphStyle(),\n });\n // The app switched theme (light/dark): restyle and recolour the nodes.\n this.stopThemeWatch = onThemeChange(() => {\n this.cy?.style(this.graphStyle());\n this.draw(this.topology.value());\n });\n this.cy.on('tap', 'edge', e => this.choose({ edge: e.target.id(), node: null }));\n this.cy.on('tap', 'node', e => this.choose({ node: e.target.id(), edge: null }));\n this.cy.on('tap', e => { if (e.target === this.cy) this.choose({ node: null, edge: null }); });\n this.draw(this.topology.value());\n });\n effect(() => this.draw(this.topology.value()));\n effect(() => {\n const id = this.edge() ?? this.node();\n this.cy?.elements().unselect();\n if (id) this.cy?.getElementById(id).select();\n });\n }\n\n private draw(topology: Topology | undefined) {\n if (!this.cy || !topology) return;\n this.cy.elements().remove();\n this.cy.add([\n ...topology.nodes.map(n => ({ data: {\n id: n.id, label: n.displayName, type: n.type,\n color: this.color(n.type === 'service' ? HEALTH_TOKENS[n.health ?? 'Unknown'] ?? 'none' : 'muted') } })),\n ...topology.edges.filter(e => this.nodes().has(e.source) && this.nodes().has(e.target)).map(e => ({ data: {\n id: e.id, source: e.source, target: e.target, confidence: e.confidence.toLowerCase(),\n label: e.confidence.toLowerCase() === 'inferred' ? `${e.relation} (inferred)` : e.relation } })),\n ]);\n this.cy.layout({ name: 'breadthfirst', directed: true, padding: 30, spacingFactor: 1.2 }).run();\n const id = this.edge() ?? this.node();\n if (id) this.cy.getElementById(id).select();\n }\n\n private color(token: string) { return themeColor(token, this.graph().nativeElement); }\n\n /** The graph's look, in the app's theme colours. */\n private graphStyle() {\n const [text, muted, line, surface, selected] = [this.color('text'), this.color('muted'), this.color('border'),\n this.color('surface'), this.color('accent')];\n return [\n { selector: 'node', style: {\n label: 'data(label)', 'font-size': 11, color: text, 'text-valign': 'bottom', 'text-margin-y': 4,\n 'background-color': 'data(color)', width: 26, height: 26, 'border-width': 2, 'border-color': surface } },\n { selector: 'node[type = \"database\"]', style: { shape: 'diamond' } },\n { selector: 'node[type = \"messaging-destination\"]', style: { shape: 'hexagon' } },\n { selector: 'node[type = \"service\"]', style: { shape: 'round-rectangle' } },\n { selector: 'edge', style: {\n width: 2, 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'line-color': muted,\n 'target-arrow-color': muted, label: 'data(label)', 'font-size': 9, color: muted, 'text-rotation': 'autorotate',\n 'text-background-color': surface, 'text-background-opacity': 0.8, 'text-background-padding': '1px' } },\n { selector: 'edge[confidence = \"inferred\"]', style: { 'line-style': 'dashed', 'line-color': line, 'target-arrow-color': line } },\n { selector: ':selected', style: { 'line-color': selected, 'target-arrow-color': selected, 'border-color': selected, 'border-width': 3 } },\n ] as StylesheetJson;\n }\n\n fit() { this.cy?.fit(undefined, 30); }\n\n private choose(selection: { edge?: string | null; node?: string | null }) {\n void this.router.navigate([], { queryParams: selection, queryParamsHandling: 'merge', replaceUrl: true });\n }\n\n name(id: string) { return this.nodes().get(id)?.displayName ?? id; }\n\n link(id: string) { return this.links.to(this.nodes().get(id)?.type === 'service' ? 'services' : 'resources', id); }\n\n ngOnDestroy() {\n this.stopThemeWatch?.();\n this.cy?.destroy();\n }\n}\n"],"mappings":"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"}

package/fesm2022/juice-js-observability-trace.page-DccvH1SV.mjs ADDED Viewed

@@ -0,0 +1,518 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { a as problemText, b as preciseTime, d as KeyValueTable, h as DurationPipe, l as ContextBar, p as themeColor, t as LogTable, v as formatDuration, x as apiResource, y as plainTraceId } from "./juice-js-observability-telemetry-D9EYxkdr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { Router, RouterLink } from "@angular/router";
+import { DatePipe } from "@angular/common";
+import * as i1 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i3 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i2 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+var TracePage = class TracePage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	router = inject(Router);
+	traceId = input.required(...ngDevMode ? [{ debugName: "traceId" }] : /* istanbul ignore next */ []);
+	span = input(...ngDevMode ? [void 0, { debugName: "span" }] : /* istanbul ignore next */ []);
+	id = computed(() => plainTraceId(this.traceId()), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	trace = apiResource({
+		params: () => this.id(),
+		stream: ({ params }) => this.api.trace(params)
+	});
+	error = computed(() => problemText(this.trace.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	collapsed = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	showErrorsOnly = signal(false, ...ngDevMode ? [{ debugName: "showErrorsOnly" }] : /* istanbul ignore next */ []);
+	selectedId = computed(() => this.span() ?? null, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+	spans = computed(() => this.trace.value()?.spans ?? [], ...ngDevMode ? [{ debugName: "spans" }] : /* istanbul ignore next */ []);
+	start = computed(() => Math.min(...this.spans().map((s) => preciseTime(s.startedAt))), ...ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []);
+	total = computed(() => Math.max(.001, Math.max(...this.spans().map((s) => preciseTime(s.startedAt) + s.durationMs)) - this.start()), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	root = computed(() => this.spans().find((s) => !s.parentSpanId) ?? this.spans()[0], ...ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []);
+	services = computed(() => [...new Set(this.spans().map((s) => s.service))], ...ngDevMode ? [{ debugName: "services" }] : /* istanbul ignore next */ []);
+	errors = computed(() => this.spans().filter((s) => s.status === "Error").length, ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.spans().find((s) => s.spanId === this.selectedId()) ?? null, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	spanLogQuery = computed(() => {
+		const s = this.selected();
+		return s ? {
+			spanId: s.spanId,
+			...this.windowAround(s)
+		} : {};
+	}, ...ngDevMode ? [{ debugName: "spanLogQuery" }] : /* istanbul ignore next */ []);
+	rows = computed(() => {
+		const spans = this.spans();
+		const ids = new Set(spans.map((s) => s.spanId));
+		const byParent = /* @__PURE__ */ new Map();
+		for (const s of spans) {
+			const parent = s.parentSpanId && ids.has(s.parentSpanId) ? s.parentSpanId : null;
+			byParent.set(parent, [...byParent.get(parent) ?? [], s]);
+		}
+		const slowest = new Set([...spans].sort((a, b) => b.durationMs - a.durationMs).slice(0, Math.max(1, Math.ceil(spans.length * .05))).map((s) => s.spanId));
+		const rows = [];
+		const walk = (parent, depth) => {
+			for (const s of (byParent.get(parent) ?? []).sort((a, b) => a.startedAt.localeCompare(b.startedAt))) {
+				rows.push({
+					span: s,
+					depth,
+					children: byParent.get(s.spanId)?.length ?? 0,
+					offset: 100 * (preciseTime(s.startedAt) - this.start()) / this.total(),
+					selfError: s.status === "Error",
+					slowest: slowest.has(s.spanId) && spans.length > 3
+				});
+				walk(s.spanId, depth + 1);
+			}
+		};
+		walk(null, 0);
+		return rows;
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	visible = computed(() => {
+		const rows = this.rows();
+		const parentOf = new Map(this.spans().map((s) => [s.spanId, s.parentSpanId]));
+		let keep = null;
+		if (this.showErrorsOnly()) {
+			keep = /* @__PURE__ */ new Set();
+			for (const r of rows.filter((r) => r.selfError)) for (let id = r.span.spanId; id; id = parentOf.get(id)) keep.add(id);
+		}
+		const out = [];
+		let hiddenBelow = null;
+		for (const r of rows) {
+			if (hiddenBelow !== null && r.depth > hiddenBelow) continue;
+			hiddenBelow = null;
+			if (keep && !keep.has(r.span.spanId)) continue;
+			out.push(r);
+			if (this.collapsed().has(r.span.spanId)) hiddenBelow = r.depth;
+		}
+		return out;
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => [
+		0,
+		25,
+		50,
+		75
+	].map((at) => ({
+		at,
+		label: formatDuration(this.total() * at / 100)
+	})), ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	seriesCount = Math.max(1, Number(themeColor("series-count")) || 1);
+	color(service) {
+		return `var(--jc-series-${this.services().indexOf(service) % this.seriesCount + 1})`;
+	}
+	width(span) {
+		return Math.max(.3, 100 * span.durationMs / this.total());
+	}
+	offsetMs(span) {
+		return preciseTime(span.startedAt) - this.start();
+	}
+	eventOffset(span, at) {
+		return preciseTime(at) - preciseTime(span.startedAt);
+	}
+	toggle(spanId, event) {
+		event.stopPropagation();
+		const next = new Set(this.collapsed());
+		if (!next.delete(spanId)) next.add(spanId);
+		this.collapsed.set(next);
+	}
+	select(spanId) {
+		this.router.navigate([], {
+			queryParams: { span: spanId },
+			queryParamsHandling: "merge",
+			replaceUrl: true
+		});
+	}
+	windowAround(span) {
+		const start = new Date(span.startedAt).getTime();
+		return {
+			from: (/* @__PURE__ */ new Date(start - 6e4)).toISOString(),
+			to: new Date(start + span.durationMs + 6e4).toISOString()
+		};
+	}
+	aroundSpan(span, extra) {
+		return {
+			...this.ctx.around(span.startedAt, span.durationMs),
+			...extra
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: TracePage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: TracePage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: {
+			traceId: {
+				classPropertyName: "traceId",
+				publicName: "traceId",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			span: {
+				classPropertyName: "span",
+				publicName: "span",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "jc-fill-page" },
+		ngImport: i0,
+		template: `
+    <jc-context-bar>
+      <a [routerLink]="['traces'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Traces</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1 class="jc-mono">{{ id() }}</h1>
+    </jc-context-bar>
+    @if (trace.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (trace.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (trace.value(); as t) {
+      <div class="jc-summary">
+        <span><strong>{{ root()?.service }}</strong> · {{ root()?.name }}</span>
+        <span>{{ start() | date: 'MMM d, HH:mm:ss.SSS' }}</span>
+        <span>{{ total() | duration }}</span>
+        <span>{{ t.spans.length }} spans · {{ services().length }} services</span>
+        @if (errors() > 0) { <span class="jc-badge jc-health-unhealthy">{{ errors() }} failed</span> }
+        <button mat-button (click)="showErrorsOnly.set(!showErrorsOnly())">{{ showErrorsOnly() ? 'Show all spans' : 'Error paths only' }}</button>
+        <a mat-button [routerLink]="['logs'] | jcLink" [queryParams]="ctx.keep({ trace: id() })">Logs of this trace</a>
+        @if (t.truncated) { <span class="jc-muted">Showing the first {{ t.spans.length }} spans.</span> }
+      </div>
+      <div class="jc-legend">@for (s of services(); track s) { <span><i [style.background]="color(s)"></i>{{ s }}</span> }</div>
+      <div class="jc-trace" [class.jc-with-detail]="selected()">
+        <div class="jc-waterfall" role="tree">
+          <div class="jc-wf-head"><span>Span</span><span class="jc-wf-scale">
+            @for (tick of ticks(); track tick.at) { <span [style.left.%]="tick.at">{{ tick.label }}</span> }</span></div>
+          @for (r of visible(); track r.span.spanId) {
+            <div class="jc-wf-row" role="treeitem" [class.jc-selected]="r.span.spanId === selectedId()"
+                 [class.jc-wf-error]="r.selfError" (click)="select(r.span.spanId)" tabindex="0" (keydown.enter)="select(r.span.spanId)">
+              <span class="jc-wf-name" [style.padding-left.px]="r.depth * 14">
+                @if (r.children > 0) {
+                  <button class="jc-wf-toggle" (click)="toggle(r.span.spanId, $event)" [attr.aria-label]="collapsed().has(r.span.spanId) ? 'Expand' : 'Collapse'">
+                    {{ collapsed().has(r.span.spanId) ? '▸' : '▾' }}</button>
+                } @else { <span class="jc-wf-toggle"></span> }
+                <i class="jc-dot" [style.background]="color(r.span.service)"></i>
+                <span class="jc-wf-service">{{ r.span.service }}</span>&nbsp;<span>{{ r.span.name }}</span>
+                @if (r.selfError) { <mat-icon class="jc-wf-icon jc-bad" title="Failed">error</mat-icon> }
+                @if (r.slowest) { <mat-icon class="jc-wf-icon" title="Among the slowest spans">schedule</mat-icon> }
+                @if (collapsed().has(r.span.spanId)) { <span class="jc-muted jc-small">+{{ r.children }}</span> }
+              </span>
+              <span class="jc-wf-track">
+                <span class="jc-wf-bar" [style.left.%]="r.offset" [style.width.%]="width(r.span)" [style.background]="color(r.span.service)"></span>
+                <span class="jc-wf-time" [style.left.%]="r.offset">{{ r.span.durationMs | duration }}</span>
+              </span>
+            </div>
+          }
+        </div>
+        @if (selected(); as s) {
+          <aside class="jc-card jc-span-detail">
+            <div class="jc-row"><h2>{{ s.name }}</h2><button mat-icon-button (click)="select(null)" aria-label="Close"><mat-icon>close</mat-icon></button></div>
+            <div class="jc-span-facts">
+              <span class="jc-badge" [class.jc-health-unhealthy]="s.status === 'Error'" [class.jc-health-healthy]="s.status === 'Ok'">{{ s.status }}</span>
+              <span>{{ s.kind }}</span><span>{{ s.durationMs | duration }}</span>
+              <span>at +{{ offsetMs(s) | duration }}</span>
+            </div>
+            @if (s.statusMessage) { <p class="jc-error">{{ s.statusMessage }}</p> }
+            <nav class="jc-actions">
+              @if (s.serviceId) { <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="ctx.keep()">Service {{ s.service }}</a> }
+              @if (s.target; as target) {
+                <a mat-stroked-button [routerLink]="(target.kind === 'service' ? ['services', target.id] : ['resources', target.id]) | jcLink" [queryParams]="ctx.keep()">
+                  {{ target.kind === 'service' ? 'Calls' : 'Uses' }} {{ target.name }}</a>
+              }
+              @if (s.serviceId) {
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="aroundSpan(s, { tab: 'metrics' })">Metrics around</a>
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="aroundSpan(s, { tab: 'logs' })">Service logs around</a>
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="ctx.keep({ tab: 'traces', op: s.name })">Other traces of {{ s.name }}</a>
+              }
+            </nav>
+            <h3>Logs of this span</h3>
+            <jc-log-table [query]="spanLogQuery()" [compact]="true" />
+            <h3>Span</h3>
+            <jc-kv [values]="{ 'service': s.service, 'environment': s.environment, 'instance': s.instance, 'host': s.host,
+              'trace id': id(), 'span id': s.spanId, 'parent span id': s.parentSpanId, 'started': s.startedAt,
+              'instrumentation scope': s.scope ? s.scope + (s.scopeVersion ? ' ' + s.scopeVersion : '') : null }" />
+            <h3>Attributes</h3>
+            <jc-kv [values]="s.attributes" empty="No attributes." />
+            @if (s.events.length) {
+              <h3>Events</h3>
+              @for (e of s.events; track $index) {
+                <div class="jc-event" [class.jc-wf-error]="e.name === 'exception'">
+                  <strong>{{ e.name }}</strong> <span class="jc-muted">+{{ eventOffset(s, e.at) | duration }}</span>
+                  <jc-kv [values]="e.attributes" empty="" />
+                </div>
+              }
+            }
+            @if (s.links.length) {
+              <h3>Links</h3>
+              @for (l of s.links; track l.spanId) {
+                <a [routerLink]="['traces', l.traceId] | jcLink" [queryParams]="ctx.keep({ span: l.spanId })" class="jc-mono">{{ l.traceId }} / {{ l.spanId }}</a>
+              }
+            }
+          </aside>
+        }
+      </div>
+    }`,
+		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: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i1.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: i1.MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatIconModule
+			},
+			{
+				kind: "component",
+				type: i2.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i3.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "component",
+				type: KeyValueTable,
+				selector: "jc-kv",
+				inputs: ["values", "empty"]
+			},
+			{
+				kind: "component",
+				type: LogTable,
+				selector: "jc-log-table",
+				inputs: ["query", "compact"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			},
+			{
+				kind: "pipe",
+				type: DurationPipe,
+				name: "duration"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TracePage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "jc-fill-page" },
+			imports: [
+				LinkPipe,
+				RouterLink,
+				DatePipe,
+				MatButtonModule,
+				MatIconModule,
+				MatProgressBarModule,
+				ContextBar,
+				KeyValueTable,
+				LogTable,
+				DurationPipe
+			],
+			template: `
+    <jc-context-bar>
+      <a [routerLink]="['traces'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Traces</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1 class="jc-mono">{{ id() }}</h1>
+    </jc-context-bar>
+    @if (trace.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (trace.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (trace.value(); as t) {
+      <div class="jc-summary">
+        <span><strong>{{ root()?.service }}</strong> · {{ root()?.name }}</span>
+        <span>{{ start() | date: 'MMM d, HH:mm:ss.SSS' }}</span>
+        <span>{{ total() | duration }}</span>
+        <span>{{ t.spans.length }} spans · {{ services().length }} services</span>
+        @if (errors() > 0) { <span class="jc-badge jc-health-unhealthy">{{ errors() }} failed</span> }
+        <button mat-button (click)="showErrorsOnly.set(!showErrorsOnly())">{{ showErrorsOnly() ? 'Show all spans' : 'Error paths only' }}</button>
+        <a mat-button [routerLink]="['logs'] | jcLink" [queryParams]="ctx.keep({ trace: id() })">Logs of this trace</a>
+        @if (t.truncated) { <span class="jc-muted">Showing the first {{ t.spans.length }} spans.</span> }
+      </div>
+      <div class="jc-legend">@for (s of services(); track s) { <span><i [style.background]="color(s)"></i>{{ s }}</span> }</div>
+      <div class="jc-trace" [class.jc-with-detail]="selected()">
+        <div class="jc-waterfall" role="tree">
+          <div class="jc-wf-head"><span>Span</span><span class="jc-wf-scale">
+            @for (tick of ticks(); track tick.at) { <span [style.left.%]="tick.at">{{ tick.label }}</span> }</span></div>
+          @for (r of visible(); track r.span.spanId) {
+            <div class="jc-wf-row" role="treeitem" [class.jc-selected]="r.span.spanId === selectedId()"
+                 [class.jc-wf-error]="r.selfError" (click)="select(r.span.spanId)" tabindex="0" (keydown.enter)="select(r.span.spanId)">
+              <span class="jc-wf-name" [style.padding-left.px]="r.depth * 14">
+                @if (r.children > 0) {
+                  <button class="jc-wf-toggle" (click)="toggle(r.span.spanId, $event)" [attr.aria-label]="collapsed().has(r.span.spanId) ? 'Expand' : 'Collapse'">
+                    {{ collapsed().has(r.span.spanId) ? '▸' : '▾' }}</button>
+                } @else { <span class="jc-wf-toggle"></span> }
+                <i class="jc-dot" [style.background]="color(r.span.service)"></i>
+                <span class="jc-wf-service">{{ r.span.service }}</span>&nbsp;<span>{{ r.span.name }}</span>
+                @if (r.selfError) { <mat-icon class="jc-wf-icon jc-bad" title="Failed">error</mat-icon> }
+                @if (r.slowest) { <mat-icon class="jc-wf-icon" title="Among the slowest spans">schedule</mat-icon> }
+                @if (collapsed().has(r.span.spanId)) { <span class="jc-muted jc-small">+{{ r.children }}</span> }
+              </span>
+              <span class="jc-wf-track">
+                <span class="jc-wf-bar" [style.left.%]="r.offset" [style.width.%]="width(r.span)" [style.background]="color(r.span.service)"></span>
+                <span class="jc-wf-time" [style.left.%]="r.offset">{{ r.span.durationMs | duration }}</span>
+              </span>
+            </div>
+          }
+        </div>
+        @if (selected(); as s) {
+          <aside class="jc-card jc-span-detail">
+            <div class="jc-row"><h2>{{ s.name }}</h2><button mat-icon-button (click)="select(null)" aria-label="Close"><mat-icon>close</mat-icon></button></div>
+            <div class="jc-span-facts">
+              <span class="jc-badge" [class.jc-health-unhealthy]="s.status === 'Error'" [class.jc-health-healthy]="s.status === 'Ok'">{{ s.status }}</span>
+              <span>{{ s.kind }}</span><span>{{ s.durationMs | duration }}</span>
+              <span>at +{{ offsetMs(s) | duration }}</span>
+            </div>
+            @if (s.statusMessage) { <p class="jc-error">{{ s.statusMessage }}</p> }
+            <nav class="jc-actions">
+              @if (s.serviceId) { <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="ctx.keep()">Service {{ s.service }}</a> }
+              @if (s.target; as target) {
+                <a mat-stroked-button [routerLink]="(target.kind === 'service' ? ['services', target.id] : ['resources', target.id]) | jcLink" [queryParams]="ctx.keep()">
+                  {{ target.kind === 'service' ? 'Calls' : 'Uses' }} {{ target.name }}</a>
+              }
+              @if (s.serviceId) {
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="aroundSpan(s, { tab: 'metrics' })">Metrics around</a>
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="aroundSpan(s, { tab: 'logs' })">Service logs around</a>
+                <a mat-stroked-button [routerLink]="['services', s.serviceId] | jcLink" [queryParams]="ctx.keep({ tab: 'traces', op: s.name })">Other traces of {{ s.name }}</a>
+              }
+            </nav>
+            <h3>Logs of this span</h3>
+            <jc-log-table [query]="spanLogQuery()" [compact]="true" />
+            <h3>Span</h3>
+            <jc-kv [values]="{ 'service': s.service, 'environment': s.environment, 'instance': s.instance, 'host': s.host,
+              'trace id': id(), 'span id': s.spanId, 'parent span id': s.parentSpanId, 'started': s.startedAt,
+              'instrumentation scope': s.scope ? s.scope + (s.scopeVersion ? ' ' + s.scopeVersion : '') : null }" />
+            <h3>Attributes</h3>
+            <jc-kv [values]="s.attributes" empty="No attributes." />
+            @if (s.events.length) {
+              <h3>Events</h3>
+              @for (e of s.events; track $index) {
+                <div class="jc-event" [class.jc-wf-error]="e.name === 'exception'">
+                  <strong>{{ e.name }}</strong> <span class="jc-muted">+{{ eventOffset(s, e.at) | duration }}</span>
+                  <jc-kv [values]="e.attributes" empty="" />
+                </div>
+              }
+            }
+            @if (s.links.length) {
+              <h3>Links</h3>
+              @for (l of s.links; track l.spanId) {
+                <a [routerLink]="['traces', l.traceId] | jcLink" [queryParams]="ctx.keep({ span: l.spanId })" class="jc-mono">{{ l.traceId }} / {{ l.spanId }}</a>
+              }
+            }
+          </aside>
+        }
+      </div>
+    }`
+		}]
+	}],
+	propDecorators: {
+		traceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "traceId",
+				required: true
+			}]
+		}],
+		span: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "span",
+				required: false
+			}]
+		}]
+	}
+});
+export { TracePage };
+//# sourceMappingURL=juice-js-observability-trace.page-DccvH1SV.mjs.map

package/fesm2022/juice-js-observability-trace.page-DccvH1SV.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"juice-js-observability-trace.page-DccvH1SV.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/trace.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { DatePipe } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { Router, RouterLink } from '@angular/router';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { Span } from '../core/models';\nimport { DurationPipe, formatDuration, plainTraceId, preciseTime } from '../shared/format';\nimport { ContextBar, KeyValueTable } from '../shared/ui';\nimport { LogTable, problemText } from '../shared/telemetry';\nimport { themeColor } from '../shared/theme';\n\ninterface Row { span: Span; depth: number; children: number; offset: number; selfError: boolean; slowest: boolean; }\n\n/** A stable colour per service, from a small palette that reads in both themes. */\n\n/**\n * A trace as a waterfall (Console requirements §6): the span hierarchy with timing relative to the trace start, so\n * parallel calls show side by side; errors and the slowest spans marked; subtrees collapsible. The selected span is\n * in the URL (`span`), with its details, its logs, and links to its service, its dependency, and the metrics and logs\n * around it (§7).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n // Fills the window; the waterfall and the span scroll on their own (styles.scss).\n host: { class: 'jc-fill-page' },\n imports: [LinkPipe, RouterLink, DatePipe, MatButtonModule, MatIconModule, MatProgressBarModule, ContextBar, KeyValueTable, LogTable, DurationPipe],\n template: `\n <jc-context-bar>\n <a [routerLink]=\"['traces'] | jcLink\" [queryParams]=\"ctx.keep()\" class=\"jc-crumb\">Traces</a>\n <span class=\"jc-crumb-sep\">›</span>\n <h1 class=\"jc-mono\">{{ id() }}</h1>\n </jc-context-bar>\n @if (trace.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n @if (trace.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n\n @if (trace.value(); as t) {\n <div class=\"jc-summary\">\n <span><strong>{{ root()?.service }}</strong> · {{ root()?.name }}</span>\n <span>{{ start() | date: 'MMM d, HH:mm:ss.SSS' }}</span>\n <span>{{ total() | duration }}</span>\n <span>{{ t.spans.length }} spans · {{ services().length }} services</span>\n @if (errors() > 0) { <span class=\"jc-badge jc-health-unhealthy\">{{ errors() }} failed</span> }\n <button mat-button (click)=\"showErrorsOnly.set(!showErrorsOnly())\">{{ showErrorsOnly() ? 'Show all spans' : 'Error paths only' }}</button>\n <a mat-button [routerLink]=\"['logs'] | jcLink\" [queryParams]=\"ctx.keep({ trace: id() })\">Logs of this trace</a>\n @if (t.truncated) { <span class=\"jc-muted\">Showing the first {{ t.spans.length }} spans.</span> }\n </div>\n <div class=\"jc-legend\">@for (s of services(); track s) { <span><i [style.background]=\"color(s)\"></i>{{ s }}</span> }</div>\n\n <div class=\"jc-trace\" [class.jc-with-detail]=\"selected()\">\n <div class=\"jc-waterfall\" role=\"tree\">\n <div class=\"jc-wf-head\"><span>Span</span><span class=\"jc-wf-scale\">\n @for (tick of ticks(); track tick.at) { <span [style.left.%]=\"tick.at\">{{ tick.label }}</span> }</span></div>\n @for (r of visible(); track r.span.spanId) {\n <div class=\"jc-wf-row\" role=\"treeitem\" [class.jc-selected]=\"r.span.spanId === selectedId()\"\n [class.jc-wf-error]=\"r.selfError\" (click)=\"select(r.span.spanId)\" tabindex=\"0\" (keydown.enter)=\"select(r.span.spanId)\">\n <span class=\"jc-wf-name\" [style.padding-left.px]=\"r.depth * 14\">\n @if (r.children > 0) {\n <button class=\"jc-wf-toggle\" (click)=\"toggle(r.span.spanId, $event)\" [attr.aria-label]=\"collapsed().has(r.span.spanId) ? 'Expand' : 'Collapse'\">\n {{ collapsed().has(r.span.spanId) ? '▸' : '▾' }}</button>\n } @else { <span class=\"jc-wf-toggle\"></span> }\n <i class=\"jc-dot\" [style.background]=\"color(r.span.service)\"></i>\n <span class=\"jc-wf-service\">{{ r.span.service }}</span> <span>{{ r.span.name }}</span>\n @if (r.selfError) { <mat-icon class=\"jc-wf-icon jc-bad\" title=\"Failed\">error</mat-icon> }\n @if (r.slowest) { <mat-icon class=\"jc-wf-icon\" title=\"Among the slowest spans\">schedule</mat-icon> }\n @if (collapsed().has(r.span.spanId)) { <span class=\"jc-muted jc-small\">+{{ r.children }}</span> }\n </span>\n <span class=\"jc-wf-track\">\n <span class=\"jc-wf-bar\" [style.left.%]=\"r.offset\" [style.width.%]=\"width(r.span)\" [style.background]=\"color(r.span.service)\"></span>\n <span class=\"jc-wf-time\" [style.left.%]=\"r.offset\">{{ r.span.durationMs | duration }}</span>\n </span>\n </div>\n }\n </div>\n\n @if (selected(); as s) {\n <aside class=\"jc-card jc-span-detail\">\n <div class=\"jc-row\"><h2>{{ s.name }}</h2><button mat-icon-button (click)=\"select(null)\" aria-label=\"Close\"><mat-icon>close</mat-icon></button></div>\n <div class=\"jc-span-facts\">\n <span class=\"jc-badge\" [class.jc-health-unhealthy]=\"s.status === 'Error'\" [class.jc-health-healthy]=\"s.status === 'Ok'\">{{ s.status }}</span>\n <span>{{ s.kind }}</span><span>{{ s.durationMs | duration }}</span>\n <span>at +{{ offsetMs(s) | duration }}</span>\n </div>\n @if (s.statusMessage) { <p class=\"jc-error\">{{ s.statusMessage }}</p> }\n\n <nav class=\"jc-actions\">\n @if (s.serviceId) { <a mat-stroked-button [routerLink]=\"['services', s.serviceId] | jcLink\" [queryParams]=\"ctx.keep()\">Service {{ s.service }}</a> }\n @if (s.target; as target) {\n <a mat-stroked-button [routerLink]=\"(target.kind === 'service' ? ['services', target.id] : ['resources', target.id]) | jcLink\" [queryParams]=\"ctx.keep()\">\n {{ target.kind === 'service' ? 'Calls' : 'Uses' }} {{ target.name }}</a>\n }\n @if (s.serviceId) {\n <a mat-stroked-button [routerLink]=\"['services', s.serviceId] | jcLink\" [queryParams]=\"aroundSpan(s, { tab: 'metrics' })\">Metrics around</a>\n <a mat-stroked-button [routerLink]=\"['services', s.serviceId] | jcLink\" [queryParams]=\"aroundSpan(s, { tab: 'logs' })\">Service logs around</a>\n <a mat-stroked-button [routerLink]=\"['services', s.serviceId] | jcLink\" [queryParams]=\"ctx.keep({ tab: 'traces', op: s.name })\">Other traces of {{ s.name }}</a>\n }\n </nav>\n\n <h3>Logs of this span</h3>\n <jc-log-table [query]=\"spanLogQuery()\" [compact]=\"true\" />\n\n <h3>Span</h3>\n <jc-kv [values]=\"{ 'service': s.service, 'environment': s.environment, 'instance': s.instance, 'host': s.host,\n 'trace id': id(), 'span id': s.spanId, 'parent span id': s.parentSpanId, 'started': s.startedAt,\n 'instrumentation scope': s.scope ? s.scope + (s.scopeVersion ? ' ' + s.scopeVersion : '') : null }\" />\n <h3>Attributes</h3>\n <jc-kv [values]=\"s.attributes\" empty=\"No attributes.\" />\n @if (s.events.length) {\n <h3>Events</h3>\n @for (e of s.events; track $index) {\n <div class=\"jc-event\" [class.jc-wf-error]=\"e.name === 'exception'\">\n <strong>{{ e.name }}</strong> <span class=\"jc-muted\">+{{ eventOffset(s, e.at) | duration }}</span>\n <jc-kv [values]=\"e.attributes\" empty=\"\" />\n </div>\n }\n }\n @if (s.links.length) {\n <h3>Links</h3>\n @for (l of s.links; track l.spanId) {\n <a [routerLink]=\"['traces', l.traceId] | jcLink\" [queryParams]=\"ctx.keep({ span: l.spanId })\" class=\"jc-mono\">{{ l.traceId }} / {{ l.spanId }}</a>\n }\n }\n </aside>\n }\n </div>\n }`,\n})\nexport class TracePage {\n protected readonly ctx = inject(ContextService);\n private readonly api = inject(ApiService);\n private readonly router = inject(Router);\n\n /** A trace id, or a W3C traceparent such as a Juice.Audit record before 10.4 holds; links from either open the trace. */\n readonly traceId = input.required<string>();\n readonly span = input<string>();\n\n protected readonly id = computed(() => plainTraceId(this.traceId()));\n protected readonly trace = apiResource({ params: () => this.id(), stream: ({ params }) => this.api.trace(params) });\n protected readonly error = computed(() => problemText(this.trace.error()));\n protected readonly collapsed = signal(new Set<string>());\n protected readonly showErrorsOnly = signal(false);\n protected readonly selectedId = computed(() => this.span() ?? null);\n\n private readonly spans = computed(() => this.trace.value()?.spans ?? []);\n // Sub-millisecond precision: spans of a fast in-process flow start microseconds apart.\n protected readonly start = computed(() => Math.min(...this.spans().map(s => preciseTime(s.startedAt))));\n protected readonly total = computed(() =>\n Math.max(0.001, Math.max(...this.spans().map(s => preciseTime(s.startedAt) + s.durationMs)) - this.start()));\n protected readonly root = computed(() => this.spans().find(s => !s.parentSpanId) ?? this.spans()[0]);\n protected readonly services = computed(() => [...new Set(this.spans().map(s => s.service))]);\n protected readonly errors = computed(() => this.spans().filter(s => s.status === 'Error').length);\n protected readonly selected = computed(() => this.spans().find(s => s.spanId === this.selectedId()) ?? null);\n protected readonly spanLogQuery = computed(() => {\n const s = this.selected();\n return s ? { spanId: s.spanId, ...this.windowAround(s) } : {};\n });\n\n /** Depth-first order with depth; spans whose parent is missing are roots. Children start-ordered. */\n private readonly rows = computed<Row[]>(() => {\n const spans = this.spans();\n const ids = new Set(spans.map(s => s.spanId));\n const byParent = new Map<string | null, Span[]>();\n for (const s of spans) {\n const parent = s.parentSpanId && ids.has(s.parentSpanId) ? s.parentSpanId : null;\n byParent.set(parent, [...(byParent.get(parent) ?? []), s]);\n }\n const slowest = new Set([...spans].sort((a, b) => b.durationMs - a.durationMs).slice(0, Math.max(1, Math.ceil(spans.length * 0.05))).map(s => s.spanId));\n const rows: Row[] = [];\n const walk = (parent: string | null, depth: number) => {\n for (const s of (byParent.get(parent) ?? []).sort((a, b) => a.startedAt.localeCompare(b.startedAt))) {\n rows.push({\n span: s, depth, children: byParent.get(s.spanId)?.length ?? 0,\n offset: 100 * (preciseTime(s.startedAt) - this.start()) / this.total(),\n selfError: s.status === 'Error', slowest: slowest.has(s.spanId) && spans.length > 3,\n });\n walk(s.spanId, depth + 1);\n }\n };\n walk(null, 0);\n return rows;\n });\n\n /** Hides collapsed subtrees; \"error paths only\" keeps failed spans and their ancestors. */\n protected readonly visible = computed(() => {\n const rows = this.rows();\n const parentOf = new Map(this.spans().map(s => [s.spanId, s.parentSpanId]));\n let keep: Set<string> | null = null;\n if (this.showErrorsOnly()) {\n keep = new Set<string>();\n for (const r of rows.filter(r => r.selfError)) {\n for (let id: string | null | undefined = r.span.spanId; id; id = parentOf.get(id)) keep.add(id);\n }\n }\n const out: Row[] = [];\n let hiddenBelow: number | null = null;\n for (const r of rows) {\n if (hiddenBelow !== null && r.depth > hiddenBelow) continue;\n hiddenBelow = null;\n if (keep && !keep.has(r.span.spanId)) continue;\n out.push(r);\n if (this.collapsed().has(r.span.spanId)) hiddenBelow = r.depth;\n }\n return out;\n });\n\n protected readonly ticks = computed(() => [0, 25, 50, 75].map(at => ({ at, label: formatDuration(this.total() * at / 100) })));\n\n /** The app's categorical colours (observability.colors $series), as CSS variables: a theme switch repaints them. */\n private readonly seriesCount = Math.max(1, Number(themeColor('series-count')) || 1);\n\n color(service: string) {\n return `var(--jc-series-${this.services().indexOf(service) % this.seriesCount + 1})`;\n }\n\n width(span: Span) {\n return Math.max(0.3, 100 * span.durationMs / this.total());\n }\n\n offsetMs(span: Span) {\n return preciseTime(span.startedAt) - this.start();\n }\n\n eventOffset(span: Span, at: string) {\n return preciseTime(at) - preciseTime(span.startedAt);\n }\n\n toggle(spanId: string, event: Event) {\n event.stopPropagation();\n const next = new Set(this.collapsed());\n if (!next.delete(spanId)) next.add(spanId);\n this.collapsed.set(next);\n }\n\n select(spanId: string | null) {\n void this.router.navigate([], { queryParams: { span: spanId }, queryParamsHandling: 'merge', replaceUrl: true });\n }\n\n private windowAround(span: Span) {\n const start = new Date(span.startedAt).getTime();\n return { from: new Date(start - 60_000).toISOString(), to: new Date(start + span.durationMs + 60_000).toISOString() };\n }\n\n /** The service page over a window around this span, so its metrics and logs line up with it. */\n aroundSpan(span: Span, extra: Record<string, string>) {\n return { ...this.ctx.around(span.startedAt, span.durationMs), ...extra };\n }\n}\n"],"mappings":"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"}