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

package/fesm2022/juice-js-observability-trace.page-gBhMG2eQ.mjs

@@ -0,0 +1,530 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { _ as plainTraceId, a as problemText, d as KeyValueTable, g as formatDuration, l as ContextBar, p as DurationPipe, t as LogTable, v as preciseTime } from "./juice-js-observability-telemetry-VA4_3nzr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { rxResource } from "@angular/core/rxjs-interop";
+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";
+const PALETTE = [
+	"#3b82f6",
+	"#8b5cf6",
+	"#14b8a6",
+	"#f59e0b",
+	"#ec4899",
+	"#22c55e",
+	"#06b6d4",
+	"#a855f7",
+	"#84cc16",
+	"#f97316"
+];
+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 = rxResource({
+		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 */ []);
+	color(service) {
+		return PALETTE[this.services().indexOf(service) % PALETTE.length];
+	}
+	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-gBhMG2eQ.mjs.map

package/fesm2022/juice-js-observability-trace.page-gBhMG2eQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-trace.page-gBhMG2eQ.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 { rxResource } from '@angular/core/rxjs-interop';\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';\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. */\nconst PALETTE = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#ec4899', '#22c55e', '#06b6d4', '#a855f7', '#84cc16', '#f97316'];\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>&nbsp;<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 = rxResource({ 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  color(service: string) {\n    return PALETTE[this.services().indexOf(service) % PALETTE.length];\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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"}