@juice-js/observability 1.0.1-alpha.15 → 1.0.1-alpha.17

package/fesm2022/{juice-js-observability-topology.page-B7aXWOYV.mjs.map → juice-js-observability-topology.page-aMWEXyMB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"juice-js-observability-topology.page-B7aXWOYV.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  private destroyed = false;\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      // Left the page while the graph library loaded: its container is detached (no size, so cytoscape's first layout\n      // throws), and a graph made now would outlive ngOnDestroy.\n      if (this.destroyed) return;\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.destroyed = true;\n    this.stopThemeWatch?.();\n    this.cy?.destroy();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"juice-js-observability-topology.page-aMWEXyMB.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  private destroyed = false;\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      // Left the page while the graph library loaded: its container is detached (no size, so cytoscape's first layout\n      // throws), and a graph made now would outlive ngOnDestroy.\n      if (this.destroyed) return;\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.destroyed = true;\n    this.stopThemeWatch?.();\n    this.cy?.destroy();\n  }\n}\n"],"mappings":"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"}

package/fesm2022/{juice-js-observability-trace.page-CkLNNnKf.mjs → juice-js-observability-trace.page-DUCWnZL5.mjs}

@@ -1,5 +1,5 @@
 import { ApiService, ContextService, LinkPipe, ObservabilityLinks } 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-B5jMJYfn.mjs";
+import { S as apiResource, b as plainTraceId, f as KeyValueTable, g as DurationPipe, m as themeColor, n as LogTable, o as problemText, t as InstanceMetric, u as ContextBar, x as preciseTime, y as formatDuration } from "./juice-js-observability-telemetry-BftWSOaQ.mjs";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
@@ -10,6 +10,34 @@ 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 MaxUsageInstances = 8;
+const UsageMarginMs = 12e4;
+const UsageMetrics = [
+	{
+		title: "CPU",
+		name: "dotnet.process.cpu.time",
+		level: false,
+		format: (v) => `${Math.round(v * 100)} % of a core`
+	},
+	{
+		title: "Memory",
+		name: "dotnet.process.memory.working_set",
+		level: false,
+		format: (v) => `${Math.round(v / 1048576)} MiB`
+	},
+	{
+		title: "GC pause",
+		name: "dotnet.gc.pause.time",
+		level: false,
+		format: (v) => `${Math.round(v * 1e4) / 10} ms/s`
+	},
+	{
+		title: "Thread pool queue",
+		name: "dotnet.thread_pool.queue.length",
+		level: true,
+		format: (v) => String(Math.round(v * 10) / 10)
+	}
+];
 var TracePage = class TracePage {
 	ctx = inject(ContextService);
 	api = inject(ApiService);
@@ -17,6 +45,7 @@ var TracePage = class TracePage {
 	links = inject(ObservabilityLinks);
 	traceId = input.required(...ngDevMode ? [{ debugName: "traceId" }] : /* istanbul ignore next */ []);
 	span = input(...ngDevMode ? [void 0, { debugName: "span" }] : /* istanbul ignore next */ []);
+	usage = input(...ngDevMode ? [void 0, { debugName: "usage" }] : /* istanbul ignore next */ []);
 	id = computed(() => plainTraceId(this.traceId()), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
 	trace = apiResource({
 		params: () => this.id(),
@@ -41,6 +70,24 @@ var TracePage = class TracePage {
 			...this.windowAround(s)
 		} : {};
 	}, ...ngDevMode ? [{ debugName: "spanLogQuery" }] : /* istanbul ignore next */ []);
+	showUsage = computed(() => this.usage() === "on", ...ngDevMode ? [{ debugName: "showUsage" }] : /* istanbul ignore next */ []);
+	allInstances = computed(() => {
+		const byId = /* @__PURE__ */ new Map();
+		for (const s of this.spans()) if (s.instanceId && !byId.has(s.instanceId)) byId.set(s.instanceId, {
+			id: s.instanceId,
+			name: s.instance ?? s.instanceId,
+			service: s.service
+		});
+		return [...byId.values()];
+	}, ...ngDevMode ? [{ debugName: "allInstances" }] : /* istanbul ignore next */ []);
+	instances = computed(() => this.allInstances().slice(0, MaxUsageInstances), ...ngDevMode ? [{ debugName: "instances" }] : /* istanbul ignore next */ []);
+	hiddenInstances = computed(() => this.allInstances().length - this.instances().length, ...ngDevMode ? [{ debugName: "hiddenInstances" }] : /* istanbul ignore next */ []);
+	usageWindow = computed(() => ({
+		from: (/* @__PURE__ */ new Date(this.start() - UsageMarginMs)).toISOString(),
+		to: new Date(this.start() + this.total() + UsageMarginMs).toISOString()
+	}), ...ngDevMode ? [{ debugName: "usageWindow" }] : /* istanbul ignore next */ []);
+	usageMarks = computed(() => [new Date(this.start()).toISOString(), new Date(this.start() + this.total()).toISOString()], ...ngDevMode ? [{ debugName: "usageMarks" }] : /* istanbul ignore next */ []);
+	usageMetrics = UsageMetrics;
 	rows = computed(() => {
 		const spans = this.spans();
 		const ids = new Set(spans.map((s) => s.spanId));
@@ -114,6 +161,13 @@ var TracePage = class TracePage {
 		if (!next.delete(spanId)) next.add(spanId);
 		this.collapsed.set(next);
 	}
+	toggleUsage() {
+		this.router.navigate([], {
+			queryParams: { usage: this.showUsage() ? null : "on" },
+			queryParamsHandling: "merge",
+			replaceUrl: true
+		});
+	}
 	select(spanId) {
 		this.router.navigate([], {
 			queryParams: { span: spanId },
@@ -162,6 +216,13 @@ var TracePage = class TracePage {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			usage: {
+				classPropertyName: "usage",
+				publicName: "usage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: { classAttribute: "jc-fill-page" },
@@ -184,6 +245,7 @@ var TracePage = class TracePage {
         @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>
+        <button mat-button [attr.aria-expanded]="showUsage()" (click)="toggleUsage()">Resource usage</button>
         @if (auditLink(); as link) {
           @if ('route' in link) { <a mat-button [routerLink]="link.route" data-testid="audit-link">Audit records ↗</a> }
           @else { <a mat-button [href]="link.href" target="_blank" rel="noopener" data-testid="audit-link">Audit records ↗</a> }
@@ -192,6 +254,24 @@ var TracePage = class TracePage {
       </div>
       <div class="jc-legend">@for (s of services(); track s) { <span><i [style.background]="color(s)"></i>{{ s }}</span> }</div>
 
+      @if (showUsage()) {
+        <section class="jc-card jc-trace-usage" aria-label="Resource usage">
+          @for (i of instances(); track i.id) {
+            <h3>{{ i.service }} · {{ i.name }}</h3>
+            <div class="jc-usage-charts">
+              @for (m of usageMetrics; track m.name) {
+                <jc-instance-metric [title]="m.title" [name]="m.name" [format]="m.format" [level]="m.level" [instanceId]="i.id"
+                  [from]="usageWindow().from" [to]="usageWindow().to" [marks]="usageMarks()" />
+              }
+            </div>
+          } @empty {
+            <p class="jc-muted">The spans of this trace name no known instance.</p>
+          }
+          @if (hiddenInstances() > 0) { <p class="jc-muted">And {{ hiddenInstances() }} more instances.</p> }
+          <p class="jc-muted jc-small">Dashed lines mark the trace. No data: the host does not collect the <code>System.Runtime</code> meter.</p>
+        </section>
+      }
+
       <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">
@@ -358,6 +438,21 @@ var TracePage = class TracePage {
 				selector: "jc-log-table",
 				inputs: ["query", "compact"]
 			},
+			{
+				kind: "component",
+				type: InstanceMetric,
+				selector: "jc-instance-metric",
+				inputs: [
+					"title",
+					"name",
+					"instanceId",
+					"from",
+					"to",
+					"marks",
+					"format",
+					"level"
+				]
+			},
 			{
 				kind: "pipe",
 				type: LinkPipe,
@@ -397,7 +492,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ContextBar,
 				KeyValueTable,
 				LogTable,
-				DurationPipe
+				DurationPipe,
+				InstanceMetric
 			],
 			template: `
     <jc-context-bar>
@@ -417,6 +513,7 @@ i0.ɵɵngDeclareClassMetadata({
         @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>
+        <button mat-button [attr.aria-expanded]="showUsage()" (click)="toggleUsage()">Resource usage</button>
         @if (auditLink(); as link) {
           @if ('route' in link) { <a mat-button [routerLink]="link.route" data-testid="audit-link">Audit records ↗</a> }
           @else { <a mat-button [href]="link.href" target="_blank" rel="noopener" data-testid="audit-link">Audit records ↗</a> }
@@ -425,6 +522,24 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
       <div class="jc-legend">@for (s of services(); track s) { <span><i [style.background]="color(s)"></i>{{ s }}</span> }</div>
 
+      @if (showUsage()) {
+        <section class="jc-card jc-trace-usage" aria-label="Resource usage">
+          @for (i of instances(); track i.id) {
+            <h3>{{ i.service }} · {{ i.name }}</h3>
+            <div class="jc-usage-charts">
+              @for (m of usageMetrics; track m.name) {
+                <jc-instance-metric [title]="m.title" [name]="m.name" [format]="m.format" [level]="m.level" [instanceId]="i.id"
+                  [from]="usageWindow().from" [to]="usageWindow().to" [marks]="usageMarks()" />
+              }
+            </div>
+          } @empty {
+            <p class="jc-muted">The spans of this trace name no known instance.</p>
+          }
+          @if (hiddenInstances() > 0) { <p class="jc-muted">And {{ hiddenInstances() }} more instances.</p> }
+          <p class="jc-muted jc-small">Dashed lines mark the trace. No data: the host does not collect the <code>System.Runtime</code> meter.</p>
+        </section>
+      }
+
       <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">
@@ -520,9 +635,17 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "span",
 				required: false
 			}]
+		}],
+		usage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "usage",
+				required: false
+			}]
 		}]
 	}
 });
 export { TracePage };
 
-//# sourceMappingURL=juice-js-observability-trace.page-CkLNNnKf.mjs.map
+//# sourceMappingURL=juice-js-observability-trace.page-DUCWnZL5.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-trace.page-DUCWnZL5.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/trace.page.ts"],"sourcesContent":["import { LinkPipe, ObservabilityLinks } 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 { InstanceMetric, 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\nconst MaxUsageInstances = 8;\nconst UsageMarginMs = 2 * 60_000;\n\n/**\n * .NET's built-in System.Runtime meter (.NET 9+). Counters arrive as a rate per second. The thread pool's queue length is\n * a level that .NET reports as a counter.\n */\nconst UsageMetrics = [\n  { title: 'CPU', name: 'dotnet.process.cpu.time', level: false, format: (v: number) => `${Math.round(v * 100)} % of a core` },\n  { title: 'Memory', name: 'dotnet.process.memory.working_set', level: false, format: (v: number) => `${Math.round(v / 1048576)} MiB` },\n  { title: 'GC pause', name: 'dotnet.gc.pause.time', level: false, format: (v: number) => `${Math.round(v * 10000) / 10} ms/s` },\n  { title: 'Thread pool queue', name: 'dotnet.thread_pool.queue.length', level: true, format: (v: number) => String(Math.round(v * 10) / 10) },\n];\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, InstanceMetric],\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        <button mat-button [attr.aria-expanded]=\"showUsage()\" (click)=\"toggleUsage()\">Resource usage</button>\n        @if (auditLink(); as link) {\n          @if ('route' in link) { <a mat-button [routerLink]=\"link.route\" data-testid=\"audit-link\">Audit records ↗</a> }\n          @else { <a mat-button [href]=\"link.href\" target=\"_blank\" rel=\"noopener\" data-testid=\"audit-link\">Audit records ↗</a> }\n        }\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      @if (showUsage()) {\n        <section class=\"jc-card jc-trace-usage\" aria-label=\"Resource usage\">\n          @for (i of instances(); track i.id) {\n            <h3>{{ i.service }} · {{ i.name }}</h3>\n            <div class=\"jc-usage-charts\">\n              @for (m of usageMetrics; track m.name) {\n                <jc-instance-metric [title]=\"m.title\" [name]=\"m.name\" [format]=\"m.format\" [level]=\"m.level\" [instanceId]=\"i.id\"\n                  [from]=\"usageWindow().from\" [to]=\"usageWindow().to\" [marks]=\"usageMarks()\" />\n              }\n            </div>\n          } @empty {\n            <p class=\"jc-muted\">The spans of this trace name no known instance.</p>\n          }\n          @if (hiddenInstances() > 0) { <p class=\"jc-muted\">And {{ hiddenInstances() }} more instances.</p> }\n          <p class=\"jc-muted jc-small\">Dashed lines mark the trace. No data: the host does not collect the <code>System.Runtime</code> meter.</p>\n        </section>\n      }\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  private readonly links = inject(ObservabilityLinks);\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  /** 'on' shows the resource usage strip; in the URL so a shared link keeps it. */\n  readonly usage = 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  /** The host's audit records of this trace (`auditLink`): the requests it served and the data they changed. */\n  protected readonly auditLink = computed(() => this.links.audit(this.id()));\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  protected readonly showUsage = computed(() => this.usage() === 'on');\n  /** The instances that served this trace, in the order they joined it. */\n  private readonly allInstances = computed(() => {\n    const byId = new Map<string, { id: string; name: string; service: string }>();\n    for (const s of this.spans()) {\n      if (s.instanceId && !byId.has(s.instanceId)) byId.set(s.instanceId, { id: s.instanceId, name: s.instance ?? s.instanceId, service: s.service });\n    }\n    return [...byId.values()];\n  });\n  protected readonly instances = computed(() => this.allInstances().slice(0, MaxUsageInstances));\n  protected readonly hiddenInstances = computed(() => this.allInstances().length - this.instances().length);\n  /** Metrics are exported every few seconds, so a short trace needs a margin to have any points beside it. */\n  protected readonly usageWindow = computed(() => ({\n    from: new Date(this.start() - UsageMarginMs).toISOString(),\n    to: new Date(this.start() + this.total() + UsageMarginMs).toISOString(),\n  }));\n  protected readonly usageMarks = computed(() => [new Date(this.start()).toISOString(), new Date(this.start() + this.total()).toISOString()]);\n  protected readonly usageMetrics = UsageMetrics;\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  toggleUsage() {\n    void this.router.navigate([], { queryParams: { usage: this.showUsage() ? null : 'on' }, queryParamsHandling: 'merge', replaceUrl: true });\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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"}

package/fesm2022/{juice-js-observability-traces.page-DgvNixIc.mjs → juice-js-observability-traces.page-DXSDdeTH.mjs}

@@ -1,5 +1,5 @@
 import { ApiService, ContextService } from "./juice-js-observability.mjs";
-import { i as TraceTable, l as ContextBar, x as apiResource } from "./juice-js-observability-telemetry-B5jMJYfn.mjs";
+import { S as apiResource, a as TraceTable, u as ContextBar } from "./juice-js-observability-telemetry-BftWSOaQ.mjs";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
 import { map } from "rxjs";
@@ -517,4 +517,4 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { TracesPage };
 
-//# sourceMappingURL=juice-js-observability-traces.page-DgvNixIc.mjs.map
+//# sourceMappingURL=juice-js-observability-traces.page-DXSDdeTH.mjs.map

package/fesm2022/{juice-js-observability-traces.page-DgvNixIc.mjs.map → juice-js-observability-traces.page-DXSDdeTH.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"juice-js-observability-traces.page-DgvNixIc.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/traces.page.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { Router } from '@angular/router';\nimport { map } from 'rxjs';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { ContextBar } from '../shared/ui';\nimport { TraceTable } from '../shared/telemetry';\n\n/**\n * Trace search (Console requirements §5): narrow from a service and time window to one trace by operation, status,\n * duration, instance, resource, dependency, trace or span id, and span attributes such as `http.route=/orders` or\n * `messaging.destination.name=orders`. Every filter is a URL parameter, so a search is a shareable link.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatSelectModule, ContextBar, TraceTable],\n  template: `\n    <jc-context-bar><h1>Traces</h1></jc-context-bar>\n    <form class=\"jc-filter-form\" (ngSubmit)=\"apply(f.value)\" #f=\"ngForm\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>Service</mat-label>\n        <mat-select name=\"service\" [ngModel]=\"service() ?? ''\">\n          <mat-option value=\"\">Any</mat-option>\n          @for (s of services.value() ?? []; track s.id) { <mat-option [value]=\"s.id\">{{ s.key }}</mat-option> }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Operation</mat-label><input matInput name=\"op\" [ngModel]=\"op() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-sm\">\n        <mat-label>Status</mat-label>\n        <mat-select name=\"status\" [ngModel]=\"status() ?? ''\">\n          <mat-option value=\"\">Any</mat-option><mat-option value=\"error\">Error</mat-option><mat-option value=\"ok\">No error</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-md\"><mat-label>Min duration (ms)</mat-label><input matInput type=\"number\" min=\"0\" name=\"min\" [ngModel]=\"min() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-md\"><mat-label>Max duration (ms)</mat-label><input matInput type=\"number\" min=\"0\" name=\"max\" [ngModel]=\"max() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Trace ID</mat-label><input matInput name=\"trace\" [ngModel]=\"trace() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Span ID</mat-label><input matInput name=\"spanId\" [ngModel]=\"spanId() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-wide\">\n        <mat-label>Attributes</mat-label>\n        <input matInput name=\"attr\" [ngModel]=\"attributes().join(', ')\" placeholder=\"http.route=/orders, messaging.destination.name=orders\">\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\">Search</button>\n      <button mat-button type=\"button\" (click)=\"clear()\">Clear</button>\n    </form>\n    @if (instance() || resource() || dependency()) {\n      <p class=\"jc-muted\">Also filtered by {{ scopeText() }}.\n        <a href=\"\" (click)=\"$event.preventDefault(); apply({ instance: null, resource: null, dependency: null })\">Remove</a></p>\n    }\n    <jc-trace-table [query]=\"query()\" [limit]=\"100\" />`,\n})\nexport class TracesPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  private readonly router = inject(Router);\n\n  readonly service = input<string>();\n  readonly op = input<string>();\n  readonly status = input<string>();\n  readonly min = input<string>();\n  readonly max = input<string>();\n  readonly trace = input<string>();\n  readonly spanId = input<string>();\n  readonly attr = input<string | string[]>();\n  readonly instance = input<string>();\n  readonly resource = input<string>();\n  readonly dependency = input<string>();\n\n  protected readonly services = apiResource({ stream: () => this.api.resources('service').pipe(map(p => p.items)) });\n  protected readonly scopeText = computed(() =>\n    [this.instance() && 'an instance', this.resource() && 'a resource', this.dependency() && 'a dependency'].filter(x => !!x).join(', '));\n  protected readonly attributes = computed(() => {\n    const a = this.attr();\n    return a === undefined ? [] : Array.isArray(a) ? a : [a];\n  });\n  protected readonly query = computed(() => ({\n    serviceId: this.service(), operation: this.op(), status: this.status(), minDurationMs: this.min(), maxDurationMs: this.max(),\n    traceId: this.trace(), spanId: this.spanId(), attribute: this.attributes(), instanceId: this.instance(),\n    resourceId: this.resource(), dependencyId: this.dependency(),\n  }));\n\n  apply(value: Record<string, unknown>) {\n    const queryParams: Record<string, unknown> = {};\n    for (const [key, v] of Object.entries(value)) queryParams[key] = v === '' || v === undefined ? null : v;\n    if (typeof value['attr'] === 'string') {\n      queryParams['attr'] = (value['attr'] as string).split(',').map(a => a.trim()).filter(Boolean);\n    }\n    void this.router.navigate([], { queryParams, queryParamsHandling: 'merge' });\n  }\n\n  clear() {\n    void this.router.navigate([], { queryParams: this.ctx.keep() });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"juice-js-observability-traces.page-DXSDdeTH.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/traces.page.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { Router } from '@angular/router';\nimport { map } from 'rxjs';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { ContextBar } from '../shared/ui';\nimport { TraceTable } from '../shared/telemetry';\n\n/**\n * Trace search (Console requirements §5): narrow from a service and time window to one trace by operation, status,\n * duration, instance, resource, dependency, trace or span id, and span attributes such as `http.route=/orders` or\n * `messaging.destination.name=orders`. Every filter is a URL parameter, so a search is a shareable link.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatSelectModule, ContextBar, TraceTable],\n  template: `\n    <jc-context-bar><h1>Traces</h1></jc-context-bar>\n    <form class=\"jc-filter-form\" (ngSubmit)=\"apply(f.value)\" #f=\"ngForm\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>Service</mat-label>\n        <mat-select name=\"service\" [ngModel]=\"service() ?? ''\">\n          <mat-option value=\"\">Any</mat-option>\n          @for (s of services.value() ?? []; track s.id) { <mat-option [value]=\"s.id\">{{ s.key }}</mat-option> }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Operation</mat-label><input matInput name=\"op\" [ngModel]=\"op() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-sm\">\n        <mat-label>Status</mat-label>\n        <mat-select name=\"status\" [ngModel]=\"status() ?? ''\">\n          <mat-option value=\"\">Any</mat-option><mat-option value=\"error\">Error</mat-option><mat-option value=\"ok\">No error</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-md\"><mat-label>Min duration (ms)</mat-label><input matInput type=\"number\" min=\"0\" name=\"min\" [ngModel]=\"min() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-md\"><mat-label>Max duration (ms)</mat-label><input matInput type=\"number\" min=\"0\" name=\"max\" [ngModel]=\"max() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Trace ID</mat-label><input matInput name=\"trace\" [ngModel]=\"trace() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\"><mat-label>Span ID</mat-label><input matInput name=\"spanId\" [ngModel]=\"spanId() ?? ''\"></mat-form-field>\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-wide\">\n        <mat-label>Attributes</mat-label>\n        <input matInput name=\"attr\" [ngModel]=\"attributes().join(', ')\" placeholder=\"http.route=/orders, messaging.destination.name=orders\">\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\">Search</button>\n      <button mat-button type=\"button\" (click)=\"clear()\">Clear</button>\n    </form>\n    @if (instance() || resource() || dependency()) {\n      <p class=\"jc-muted\">Also filtered by {{ scopeText() }}.\n        <a href=\"\" (click)=\"$event.preventDefault(); apply({ instance: null, resource: null, dependency: null })\">Remove</a></p>\n    }\n    <jc-trace-table [query]=\"query()\" [limit]=\"100\" />`,\n})\nexport class TracesPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  private readonly router = inject(Router);\n\n  readonly service = input<string>();\n  readonly op = input<string>();\n  readonly status = input<string>();\n  readonly min = input<string>();\n  readonly max = input<string>();\n  readonly trace = input<string>();\n  readonly spanId = input<string>();\n  readonly attr = input<string | string[]>();\n  readonly instance = input<string>();\n  readonly resource = input<string>();\n  readonly dependency = input<string>();\n\n  protected readonly services = apiResource({ stream: () => this.api.resources('service').pipe(map(p => p.items)) });\n  protected readonly scopeText = computed(() =>\n    [this.instance() && 'an instance', this.resource() && 'a resource', this.dependency() && 'a dependency'].filter(x => !!x).join(', '));\n  protected readonly attributes = computed(() => {\n    const a = this.attr();\n    return a === undefined ? [] : Array.isArray(a) ? a : [a];\n  });\n  protected readonly query = computed(() => ({\n    serviceId: this.service(), operation: this.op(), status: this.status(), minDurationMs: this.min(), maxDurationMs: this.max(),\n    traceId: this.trace(), spanId: this.spanId(), attribute: this.attributes(), instanceId: this.instance(),\n    resourceId: this.resource(), dependencyId: this.dependency(),\n  }));\n\n  apply(value: Record<string, unknown>) {\n    const queryParams: Record<string, unknown> = {};\n    for (const [key, v] of Object.entries(value)) queryParams[key] = v === '' || v === undefined ? null : v;\n    if (typeof value['attr'] === 'string') {\n      queryParams['attr'] = (value['attr'] as string).split(',').map(a => a.trim()).filter(Boolean);\n    }\n    void this.router.navigate([], { queryParams, queryParamsHandling: 'merge' });\n  }\n\n  clear() {\n    void this.router.navigate([], { queryParams: this.ctx.keep() });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,IAAa,aAAb,MAAa,WAAU;CACF,MAAM,OAAO,cAAc;CAC7B,MAAM,OAAO,UAAU;CACvB,SAAS,OAAO,MAAM;CAE9B,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,KAAK,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,KAAA,CAAA,+BAAA,CAAA,CAAA;CACpB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,OAAO,MAA0B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,aAAa,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAElB,WAAW,YAAY,EAAE,cAAc,KAAK,IAAI,UAAU,SAAS,CAAC,CAAC,KAAK,KAAI,MAAK,EAAE,KAAK,CAAC,EAAC,CAAE;CAC9F,YAAY,eAC7B;EAAC,KAAK,SAAQ,KAAM;EAAe,KAAK,SAAQ,KAAM;EAAc,KAAK,WAAU,KAAM;CAAc,CAAC,CAAC,QAAO,MAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACpH,aAAa,eAAc;EAC5C,MAAM,IAAI,KAAK,KAAI;EACnB,OAAO,MAAM,SAAY,CAAA,IAAK,MAAM,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC;CACzD,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACiB,QAAQ,gBAAgB;EACzC,WAAW,KAAK,QAAO;EAAI,WAAW,KAAK,GAAE;EAAI,QAAQ,KAAK,OAAM;EAAI,eAAe,KAAK,IAAG;EAAI,eAAe,KAAK,IAAG;EAC1H,SAAS,KAAK,MAAK;EAAI,QAAQ,KAAK,OAAM;EAAI,WAAW,KAAK,WAAU;EAAI,YAAY,KAAK,SAAQ;EACrG,YAAY,KAAK,SAAQ;EAAI,cAAc,KAAK,WAAU;CAC3D,IAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEH,MAAM,OAA8B;EAClC,MAAM,cAAuC,CAAA;EAC7C,KAAK,MAAM,CAAC,KAAK,MAAM,OAAO,QAAQ,KAAK,GAAG,YAAY,OAAO,MAAM,MAAM,MAAM,SAAY,OAAO;EACtG,IAAI,OAAO,MAAM,YAAY,UAC3B,YAAY,UAAW,MAAM,OAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,KAAI,MAAK,EAAE,KAAI,CAAE,CAAC,CAAC,OAAO,OAAO;EAE9F,AAAK,KAAK,OAAO,SAAS,CAAA,GAAI;GAAE;GAAa,qBAAqB;EAAO,CAAE;CAC7E;CAEA,QAAK;EACH,AAAK,KAAK,OAAO,SAAS,CAAA,GAAI,EAAE,aAAa,KAAK,IAAI,KAAI,EAAE,CAAE;CAChE;CAzCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,IAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAlCX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgC2C,UAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MAjC3C;GAAW;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA,CAAA,KAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,eAAA;IAAA,UAAA,CAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA,CAAA,eAAA;IAAA,SAAA,CAAA,UAAA;IAAA,UAAA,CAAA,QAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAe;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA,CAAA,WAAA;IAAA,UAAA,CAAA,aAAA,WAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAkB;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,UAAA,CAAA,cAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAc;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,UAAA,CAAA,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAe;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,UAAA,CAAA,WAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,mBAAA;IAAA,UAAA,CAAA,WAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAU,UAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAU,UAAA;IAAA,QAAA,CAAA,SAAA,OAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAmCxG,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EArCtB,MAAA;EAAU,MAAA,CAAA;GACT,iBAAiB,wBAAwB;GACzC,SAAS;IAAC;IAAa;IAAiB;IAAoB;IAAgB;IAAiB;IAAY;GAAU;GACnH,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCX,CAAA"}

package/fesm2022/juice-js-observability.mjs

@@ -323,19 +323,19 @@ function page(path, title, load) {
 	};
 }
 const OBSERVABILITY_ROUTES = [
-	page("", "Overview", () => import("./juice-js-observability-overview.page-Cod7-cIy.mjs").then((m) => m.OverviewPage)),
-	page("services", "Services", () => import("./juice-js-observability-services.page-BtG8zyiI.mjs").then((m) => m.ServicesPage)),
-	page("services/:id", "Service", () => import("./juice-js-observability-service.page-_yK0kVYS.mjs").then((m) => m.ServicePage)),
-	page("traces", "Traces", () => import("./juice-js-observability-traces.page-DgvNixIc.mjs").then((m) => m.TracesPage)),
-	page("traces/:traceId", "Trace", () => import("./juice-js-observability-trace.page-CkLNNnKf.mjs").then((m) => m.TracePage)),
-	page("topology", "Dependencies", () => import("./juice-js-observability-topology.page-B7aXWOYV.mjs").then((m) => m.TopologyPage)),
-	page("logs", "Logs", () => import("./juice-js-observability-logs.page-CZNbTl2Q.mjs").then((m) => m.LogsPage)),
-	page("metrics", "Metrics", () => import("./juice-js-observability-metrics.page-DoVED9MT.mjs").then((m) => m.MetricsPage)),
-	page("resources", "Resources", () => import("./juice-js-observability-resources.page-KadGxEAh.mjs").then((m) => m.ResourcesPage)),
-	page("resources/:id", "Resource", () => import("./juice-js-observability-resource.page-C8RhUipF.mjs").then((m) => m.ResourcePage)),
-	page("alerts", "Alerts", () => import("./juice-js-observability-alerts.page-B-2uS9wr.mjs").then((m) => m.AlertsPage)),
-	page("alerts/:id", "Alert", () => import("./juice-js-observability-alert.page-TKwqJT2d.mjs").then((m) => m.AlertPage)),
-	page("rules", "Rules", () => import("./juice-js-observability-rules.page-DKWvNpu9.mjs").then((m) => m.RulesPage))
+	page("", "Overview", () => import("./juice-js-observability-overview.page-DXZl_fUh.mjs").then((m) => m.OverviewPage)),
+	page("services", "Services", () => import("./juice-js-observability-services.page-B1huLe_a.mjs").then((m) => m.ServicesPage)),
+	page("services/:id", "Service", () => import("./juice-js-observability-service.page-Dt8bN2Ry.mjs").then((m) => m.ServicePage)),
+	page("traces", "Traces", () => import("./juice-js-observability-traces.page-DXSDdeTH.mjs").then((m) => m.TracesPage)),
+	page("traces/:traceId", "Trace", () => import("./juice-js-observability-trace.page-DUCWnZL5.mjs").then((m) => m.TracePage)),
+	page("topology", "Dependencies", () => import("./juice-js-observability-topology.page-aMWEXyMB.mjs").then((m) => m.TopologyPage)),
+	page("logs", "Logs", () => import("./juice-js-observability-logs.page-i76xbJLH.mjs").then((m) => m.LogsPage)),
+	page("metrics", "Metrics", () => import("./juice-js-observability-metrics.page-Cq5S0yGJ.mjs").then((m) => m.MetricsPage)),
+	page("resources", "Resources", () => import("./juice-js-observability-resources.page-CukW8vVc.mjs").then((m) => m.ResourcesPage)),
+	page("resources/:id", "Resource", () => import("./juice-js-observability-resource.page-CauDE6kK.mjs").then((m) => m.ResourcePage)),
+	page("alerts", "Alerts", () => import("./juice-js-observability-alerts.page-DUXXBanH.mjs").then((m) => m.AlertsPage)),
+	page("alerts/:id", "Alert", () => import("./juice-js-observability-alert.page-nEy5Gc6j.mjs").then((m) => m.AlertPage)),
+	page("rules", "Rules", () => import("./juice-js-observability-rules.page-Crb07uWm.mjs").then((m) => m.RulesPage))
 ];
 function observabilityMenus(basePath = "/", order = 1) {
 	const base = normalizeBasePath(basePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juice-js/observability",
-  "version": "1.0.1-alpha.15",
+  "version": "1.0.1-alpha.17",
   "description": "Juice Observability pages (services, traces, topology, logs, metrics, resources, alerts, rules) for an Angular app on juice-layout",
   "author": "jack@creatorflow.io",
   "license": "MIT",

package/styles/_observability.scss

@@ -183,6 +183,8 @@
   // The trace page fills the window and scrolls inside its panes (waterfall, span), never the whole page as well.
   mat-sidenav-content > .jc-fill-page { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
   .jc-fill-page > .jc-trace { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
+  .jc-fill-page > .jc-trace-usage { flex: none; max-height: 40%; overflow: auto; margin-bottom: 12px; }
+  .jc-usage-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
   .jc-fill-page > .jc-trace > .jc-waterfall, .jc-fill-page > .jc-trace > .jc-span-detail { overflow: auto; max-height: none; position: static; }
   .jc-fill-page .jc-wf-head { position: sticky; top: 0; z-index: 1; background: var(--jc-surface); }
   .jc-span-facts { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }

package/types/juice-js-observability.d.ts

@@ -239,6 +239,7 @@ export interface Span {
     spanId: string;
   }[];
   target: SpanTarget | null;
+  instanceId: string | null;
 }
 export interface Trace {
   traceId: string;