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

package/styles/_observability.scss

@@ -0,0 +1,220 @@
+// Juice Observability page styles. `@use` the module once, in the app's global styles, and the pages are styled:
+//
+//   @use '@juice-js/observability';                            // layout, and a default light and dark (.dark) theme
+//   :root { @include observability.colors($light-theme); }    // optional: colours from the app's own theme
+//   .dark { @include observability.colors($dark-theme); }     // again under the app's own dark-mode selector
+//
+// colors() writes the --jc-* custom properties the pages (and their charts and graph) read. Every value comes from the
+// theme: text, background, card and divider from its background and foreground palettes; links and selection from
+// primary; errors from warn. A theme has no slot for "healthy", "degraded" or a categorical palette, so pass those in
+// $status and $series; without them they use Material's green, amber and a mix of its palettes at the theme's lightness.
+//
+// Without colors(), the pages use the Juice Console's teal, amber and red theme. They sit under zero-specificity :where()
+// selectors, so the app's colors() wins whatever the order.
+@use '@angular/material' as mat;
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+@function _hue($palette, $light, $dark, $is-dark) {
+  @return mat.m2-get-color-from-palette($palette, if(sass($is-dark): $dark; else: $light));
+}
+
+@function _tint($color, $surface, $amount) {
+  @return color.mix($color, $surface, $amount);
+}
+
+/// The --jc-* colour properties from an Angular Material (M2) theme. Include it inside a selector: :root for the
+/// default theme, and the app's dark-mode selector (juice-layout: .dark) for the dark one.
+/// @param $theme  the app's theme, from mat.m2-define-light-theme or mat.m2-define-dark-theme
+/// @param $status optional overrides: (ok, warn, bad, crit, off, none) — each a colour; backgrounds are tinted from them
+/// @param $series optional list of colours for services in a trace and lines in a chart
+@mixin colors($theme, $status: (), $series: null) {
+  $config: mat.m2-get-color-config($theme);
+  $is-dark: map.get($config, is-dark);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $primary: map.get($config, primary);
+  $warn: map.get($config, warn);
+  $surface: map.get($background, card);
+  $tint: if(sass($is-dark): 22%; else: 14%);
+
+  $defaults: (
+    ok: _hue(mat.m2-define-palette(mat.$m2-green-palette), 800, 300, $is-dark),
+    warn: if(sass($is-dark): _hue(mat.m2-define-palette(mat.$m2-amber-palette), 300, 300, true); else: _hue(mat.m2-define-palette(mat.$m2-deep-orange-palette), 900, 900, false)),
+    bad: _hue($warn, 700, 300, $is-dark),
+    crit: _hue($warn, 900, 100, $is-dark),
+    off: map.get($foreground, secondary-text),
+    none: map.get($foreground, hint-text),
+  );
+  $status: map.merge($defaults, $status);
+
+  --jc-bg: #{map.get($background, background)};
+  --jc-surface: #{$surface};
+  --jc-border: #{map.get($foreground, divider)};
+  --jc-text: #{map.get($foreground, text)};
+  --jc-muted: #{map.get($foreground, secondary-text)};
+  --jc-accent: #{_hue($primary, 700, 200, $is-dark)};
+  --jc-select: #{_tint(_hue($primary, 500, 300, $is-dark), $surface, $tint)};
+  @each $name, $value in $status {
+    @if meta.type-of($value) == color and color.alpha($value) < 1 {
+      // Foreground palette entries are translucent: flatten them on the surface so the tint below is solid.
+      $value: color.mix(color.change($value, $alpha: 1), $surface, color.alpha($value) * 100%);
+    }
+    --jc-#{$name}: #{$value};
+    --jc-#{$name}-bg: #{_tint($value, $surface, $tint)};
+  }
+
+  $series: if(sass($series != null): $series; else: (
+    _hue(mat.m2-define-palette(mat.$m2-blue-palette), 600, 300, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-deep-purple-palette), 400, 200, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-teal-palette), 500, 200, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-amber-palette), 700, 300, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-pink-palette), 400, 200, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-green-palette), 600, 300, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-cyan-palette), 600, 300, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-purple-palette), 400, 200, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-light-green-palette), 700, 300, $is-dark),
+    _hue(mat.m2-define-palette(mat.$m2-deep-orange-palette), 500, 300, $is-dark),
+  ));
+  @for $i from 1 through list.length($series) {
+    --jc-series-#{$i}: #{list.nth($series, $i)};
+  }
+  --jc-series-count: #{list.length($series)};
+}
+
+/// The layout of the jc-* classes the pages use. No colours: they read the --jc-* properties set by colors().
+@mixin _layout() {
+  .jc-muted { color: var(--jc-muted); }
+  .jc-small { font-size: 12px; }
+  .jc-mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 13px; }
+  .jc-nowrap { white-space: nowrap; }
+  .jc-bad { color: var(--jc-bad); }
+  .jc-error { color: var(--jc-bad); }
+  // Under a paged list: how many rows are shown, and the button for the next page.
+  .jc-more { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
+  .jc-notice { padding: 8px 12px; border-left: 3px solid var(--jc-warn); background: var(--jc-warn-bg); font-size: 13px; }
+  .jc-spacer { flex: 1; }
+
+  .jc-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--jc-border); margin-bottom: 12px; }
+  .jc-crumb { color: var(--jc-muted); }
+  .jc-crumb-sep { color: var(--jc-muted); }
+  .jc-field-sm { width: 150px; }
+  .jc-field-md { width: 180px; }
+  .jc-field-wide { min-width: 320px; flex: 1; }
+  .jc-lookup { display: flex; align-items: center; gap: 4px; border: 1px solid var(--jc-border); border-radius: 6px; padding: 2px 8px; background: var(--jc-surface);
+    input { border: 0; outline: 0; background: transparent; color: inherit; width: 240px; font: inherit; padding: 6px 0; }
+    mat-icon { color: var(--jc-muted); font-size: 18px; height: 18px; width: 18px; } }
+  .jc-lookup-message { text-align: right; margin: -8px 0 8px; }
+
+  .jc-card { background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
+  .jc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .jc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
+  .jc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
+  .jc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
+  .jc-tile { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; strong { font-size: 24px; } }
+  .jc-list-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--jc-border); }
+  .jc-list-row:last-child { border-bottom: 0; }
+  .jc-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
+  .jc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
+  // The filters, the context bar and every other field the pages size label each field. An app theme denser than -1 hides a fill field's label (and
+  // these fields have no placeholder to fall back on), so keep them at -1 whatever the app's density.
+  .jc-context, .jc-filter-form, mat-form-field[class*='jc-field-'] { @include mat.form-field-density(-1); }
+  .jc-filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
+  .jc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
+  .jc-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--jc-border); border-radius: 14px; padding: 2px 10px; font-size: 13px; color: var(--jc-text); }
+  .jc-chip.jc-selected { background: var(--jc-select); border-color: var(--jc-accent); }
+
+  .jc-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--jc-none-bg); color: var(--jc-none); }
+  .jc-health-healthy { background: var(--jc-ok-bg); color: var(--jc-ok); }
+  .jc-health-degraded { background: var(--jc-warn-bg); color: var(--jc-warn); }
+  .jc-health-unhealthy { background: var(--jc-bad-bg); color: var(--jc-bad); }
+  .jc-health-critical { background: var(--jc-crit-bg); color: var(--jc-crit); }
+  .jc-health-offline { background: var(--jc-off-bg); color: var(--jc-off); }
+  .jc-health-unknown, .jc-health-none { background: var(--jc-none-bg); color: var(--jc-none); }
+  .jc-stale { font-weight: 400; }
+  .jc-observed { background: var(--jc-select); color: var(--jc-accent); }
+  .jc-inferred { background: transparent; color: var(--jc-muted); border: 1px dashed var(--jc-muted); }
+
+  .jc-table { width: 100%; border-collapse: collapse; background: var(--jc-surface); font-size: 13px; margin-bottom: 8px;
+    th { text-align: left; font-weight: 500; color: var(--jc-muted); padding: 6px 8px; border-bottom: 1px solid var(--jc-border); white-space: nowrap; }
+    td { padding: 6px 8px; border-bottom: 1px solid var(--jc-border); vertical-align: top; }
+    tr.jc-selected td { background: var(--jc-select); } }
+  .jc-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--jc-accent); opacity: .5; margin-right: 6px; max-width: 80px; vertical-align: middle; }
+  .jc-envs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
+  .jc-body { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; max-height: 8em; overflow: auto; }
+  .jc-kv { width: 100%; border-collapse: collapse; font-size: 12px;
+    th { text-align: left; color: var(--jc-muted); font-weight: 400; padding: 3px 8px 3px 0; vertical-align: top; width: 38%; word-break: break-all; }
+    td { padding: 3px 0; word-break: break-word; font-family: 'JetBrains Mono', Consolas, monospace; } }
+  .jc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; dt { color: var(--jc-muted); } dd { margin: 0; } }
+  .jc-reasons { margin: 6px 0; padding-left: 18px; font-size: 13px; }
+
+  .jc-health-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
+  .jc-health-card { min-width: 240px; flex: 1; max-width: 420px; }
+  .jc-health-card.jc-selected { border-color: var(--jc-accent); }
+
+  .jc-chart-title { font-size: 13px; color: var(--jc-muted); margin: 4px 0; }
+  .jc-chart { height: 180px; width: 100%; background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 6px; }
+  .jc-chart-empty { display: flex; align-items: center; justify-content: center; color: var(--jc-muted); font-size: 13px; }
+
+  // ─── Waterfall ───
+  .jc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-bottom: 6px; i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; } }
+  .jc-trace { display: grid; grid-template-columns: 1fr; gap: 12px; }
+  .jc-trace.jc-with-detail { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); }
+  .jc-waterfall { background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 8px; font-size: 12px; overflow: hidden; }
+  .jc-wf-head, .jc-wf-row { display: grid; grid-template-columns: minmax(260px, 40%) 1fr; align-items: center; }
+  .jc-wf-head { color: var(--jc-muted); border-bottom: 1px solid var(--jc-border); padding: 4px 8px; }
+  .jc-wf-scale { position: relative; height: 16px; span { position: absolute; transform: translateX(-2px); } }
+  .jc-wf-row { padding: 2px 8px; cursor: pointer; border-bottom: 1px solid transparent; }
+  .jc-wf-row:hover { background: var(--jc-select); }
+  .jc-wf-row.jc-selected { background: var(--jc-select); border-bottom-color: var(--jc-accent); }
+  .jc-wf-row.jc-wf-error .jc-wf-name { color: var(--jc-bad); }
+  .jc-wf-name { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .jc-wf-service { color: var(--jc-muted); }
+  .jc-wf-toggle { width: 16px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; font-size: 11px; }
+  .jc-wf-icon { font-size: 14px; height: 14px; width: 14px; }
+  .jc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
+  .jc-wf-track { position: relative; height: 18px; }
+  .jc-wf-bar { position: absolute; top: 4px; height: 10px; border-radius: 2px; opacity: .85; }
+  .jc-wf-error .jc-wf-bar { outline: 2px solid var(--jc-bad); }
+  .jc-wf-time { position: absolute; top: 2px; font-size: 10px; color: var(--jc-muted); transform: translateY(12px); }
+  .jc-span-detail { position: sticky; top: 8px; max-height: calc(100vh - 140px); overflow: auto; }
+  // 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 > .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; }
+  .jc-event { border-left: 3px solid var(--jc-border); padding-left: 8px; margin: 6px 0; }
+  .jc-event.jc-wf-error { border-left-color: var(--jc-bad); }
+
+  // ─── Topology ───
+  .jc-topology { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
+  .jc-graph { height: calc(100vh - 220px); min-height: 420px; background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 8px; }
+  .jc-graph-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--jc-muted); padding: 4px; }
+  .jc-line { display: inline-block; width: 24px; border-top: 2px solid var(--jc-muted); vertical-align: middle; }
+  .jc-line.jc-dashed { border-top-style: dashed; }
+  .jc-side { align-self: start; }
+
+  @media (max-width: 900px) {
+    .jc-trace.jc-with-detail, .jc-topology { grid-template-columns: 1fr; }
+    // Stacked panes: the page scrolls as a whole again.
+    mat-sidenav-content > .jc-fill-page { height: auto; display: block; overflow: visible; }
+    .jc-fill-page > .jc-trace > .jc-waterfall, .jc-fill-page > .jc-trace > .jc-span-detail { overflow: visible; }
+    .jc-field-wide { min-width: 0; }
+  }
+}
+
+// ─── Emitted once, on @use: the layout, and the default colours ───
+
+@include _layout();
+
+// The Juice Console's own theme: teal, amber and red.
+$_accent: mat.m2-define-palette(mat.$m2-amber-palette);
+$_warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+:where(:root) { @include colors(mat.m2-define-light-theme((color: (
+  primary: mat.m2-define-palette(mat.$m2-teal-palette, 700), accent: $_accent, warn: $_warn)))); }
+:where(.dark) { @include colors(mat.m2-define-dark-theme((color: (
+  primary: mat.m2-define-palette(mat.$m2-teal-palette, 300), accent: $_accent, warn: $_warn)))); }

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

@@ -0,0 +1,400 @@
+import * as i0 from "@angular/core";
+import { EnvironmentProviders, InjectionToken, PipeTransform } from "@angular/core";
+import { Observable } from "rxjs";
+import { Params, Routes } from "@angular/router";
+import { Menus } from "@juice-js/core";
+/** How the host app mounts Juice Observability. */
+export interface ObservabilityOptions {
+  /** The Juice API origin; empty when the API serves the app (same origin). */
+  apiBase: string;
+  /** Where the host mounts {@link OBSERVABILITY_ROUTES}: `/` for the whole app, or a path such as `/observability`. */
+  basePath: string;
+  /**
+   * A link to the audit records of a trace, shown on the trace page: for the Juice Audit pages mounted at `/audit`,
+   * `id => ['/audit/traces', id]`. A string is an external URL. Without it, no link.
+   */
+  auditLink?: ((traceId: string) => unknown[] | string | null) | null;
+}
+export declare const OBSERVABILITY_OPTIONS: InjectionToken<ObservabilityOptions>;
+/** Configures the pages: where the API is, where the host mounted the routes, and where a trace's audit records open. */
+export declare function provideJuiceObservability(options?: Partial<ObservabilityOptions>): EnvironmentProviders;
+/** `/observability/` → `/observability`; `` and `/` → `/`. */
+export declare function normalizeBasePath(basePath: string): string;
+/** Router links to the pages, under the host's mount path. */
+export declare class ObservabilityLinks {
+  private readonly options;
+  readonly base: string;
+  /** `to('services', id)` → `['/observability', 'services', id]`. */
+  to(...segments: unknown[]): unknown[];
+  /** The host's link to the audit records of a trace, if it gave one. */
+  audit(traceId: string | null | undefined): {
+    route: unknown[];
+  } | {
+    href: string;
+  } | null;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ObservabilityLinks, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/** `['services', id] | jcLink`: the same as {@link ObservabilityLinks.to} in a template. */
+export declare class LinkPipe implements PipeTransform {
+  private readonly links;
+  transform(segments: unknown[]): unknown[];
+  static ɵfac: i0.ɵɵFactoryDeclaration<LinkPipe, never>;
+  static ɵpipe: i0.ɵɵPipeDeclaration<LinkPipe, "jcLink", true>;
+}
+export interface Page<T> {
+  items: T[];
+  nextCursor: string | null;
+}
+export interface TelemetryPage<T> {
+  items: T[];
+  truncated: boolean;
+  nextCursor?: string | null;
+}
+export interface Tenant {
+  id: string;
+  key: string;
+  displayName: string;
+}
+export interface DeploymentEnvironment {
+  id: string;
+  key: string;
+  type: string;
+  firstSeen: string;
+  lastSeen: string;
+}
+export interface Application {
+  id: string;
+  key: string;
+  displayName: string;
+  services: number;
+  firstSeen: string;
+  lastSeen: string;
+}
+export interface ResourceSummary {
+  id: string;
+  type: string;
+  key: string;
+  displayName: string;
+  firstSeen: string;
+  lastSeen: string;
+}
+export type HealthState = 'Healthy' | 'Degraded' | 'Unhealthy' | 'Critical' | 'Offline' | 'Unknown';
+export interface Health {
+  subjectType: string;
+  subjectId: string;
+  subjectName: string;
+  environment: string | null;
+  state: HealthState;
+  reasons: string[];
+  policyVersion: string;
+  evaluatedAt: string;
+  evidenceFrom: string;
+  evidenceTo: string;
+  lastEvidenceAt: string | null;
+  since: string;
+  stale: boolean;
+}
+export interface Instance {
+  id: string;
+  environment: string;
+  instanceKey: string;
+  keySource: string;
+  serviceVersion: string | null;
+  state: string;
+  hostResourceId: string | null;
+  firstSeen: string;
+  lastSeen: string;
+  health: HealthState | null;
+}
+export interface IntegrationLink {
+  integration: string;
+  title: string;
+  url: string;
+}
+export interface ResourceDetail {
+  id: string;
+  type: string;
+  key: string;
+  displayName: string;
+  firstSeen: string;
+  lastSeen: string;
+  namespace: string | null;
+  name: string | null;
+  applicationId: string | null;
+  attributes: Record<string, string>;
+  instances: Instance[];
+  instancesTruncated: boolean;
+  health: Health[];
+  links: IntegrationLink[];
+}
+export interface TopologyNode {
+  id: string;
+  type: string;
+  displayName: string;
+  health: HealthState | null;
+}
+export interface TopologyEdge {
+  id: string;
+  source: string;
+  target: string;
+  relation: string;
+  confidence: string;
+  evidenceSource: string;
+  spanCount: number;
+  firstSeen: string;
+  lastSeen: string;
+}
+export interface Topology {
+  environment: string | null;
+  nodes: TopologyNode[];
+  edges: TopologyEdge[];
+  truncated: boolean;
+}
+export interface Alert {
+  id: string;
+  rule: string;
+  subjectKey: string;
+  subjectType: string;
+  subjectId: string | null;
+  environment: string | null;
+  severity: string;
+  state: string;
+  breachStartedAt: string | null;
+  firedAt: string | null;
+  resolvedAt: string | null;
+  lastEvaluatedAt: string;
+  lastValue: number | null;
+  noData: boolean;
+  acknowledgedAt: string | null;
+  acknowledgedBy: string | null;
+}
+export interface AlertTransition {
+  from: string | null;
+  to: string;
+  at: string;
+  value: number | null;
+  reason: string;
+}
+export interface AlertDetail {
+  alert: Alert;
+  evidence: Record<string, string>;
+  acknowledgeComment: string | null;
+  history: AlertTransition[];
+  subjectHealth: Health[];
+  links: IntegrationLink[];
+}
+export interface Rule {
+  key: string;
+  name: string;
+  template: string;
+  severity: string;
+  enabled: boolean;
+  definition: Record<string, unknown>;
+  loadedAt: string;
+}
+export interface TraceSummary {
+  traceId: string;
+  startedAt: string;
+  durationMs: number;
+  rootService: string;
+  rootOperation: string;
+  environment: string | null;
+  rootInstance: string | null;
+  rootHost: string | null;
+  spanCount: number;
+  errorCount: number;
+  services: string[];
+}
+export interface SpanEvent {
+  name: string;
+  at: string;
+  attributes: Record<string, string>;
+}
+export interface SpanTarget {
+  kind: 'service' | 'resource';
+  id: string;
+  name: string;
+}
+export interface Span {
+  spanId: string;
+  parentSpanId: string | null;
+  serviceId: string | null;
+  service: string;
+  environment: string | null;
+  instance: string | null;
+  host: string | null;
+  name: string;
+  kind: string;
+  startedAt: string;
+  durationMs: number;
+  status: string;
+  statusMessage: string | null;
+  scope: string | null;
+  scopeVersion: string | null;
+  attributes: Record<string, string>;
+  events: SpanEvent[];
+  links: {
+    traceId: string;
+    spanId: string;
+  }[];
+  target: SpanTarget | null;
+}
+export interface Trace {
+  traceId: string;
+  spans: Span[];
+  truncated: boolean;
+}
+export interface LogRecord {
+  timestamp: string;
+  severity: string;
+  severityNumber: number;
+  service: string;
+  environment: string | null;
+  instance: string | null;
+  body: string;
+  bodyTruncated: boolean;
+  traceId: string | null;
+  spanId: string | null;
+  attributes: Record<string, string>;
+}
+export interface Operation {
+  name: string;
+  kind: string;
+  count: number;
+  requestsPerSecond: number;
+  errorRate: number;
+  p50Ms: number;
+  p95Ms: number;
+  p99Ms: number;
+  lastSeen: string;
+}
+export interface MetricInfo {
+  name: string;
+  type: string;
+  unit: string;
+  description: string;
+}
+export interface Point {
+  at: string;
+  value: number | null;
+}
+export interface Series {
+  name: string;
+  type: string;
+  unit: string;
+  aggregation: string;
+  stepSeconds: number;
+  points: Point[];
+}
+export interface ServiceStatsPoint {
+  at: string;
+  requestsPerSecond: number;
+  messagesPerSecond: number;
+  errorRate: number;
+  p95Ms: number | null;
+}
+export interface ServiceStats {
+  stepSeconds: number;
+  points: ServiceStatsPoint[];
+}
+export interface DependencyEvidence {
+  dependencyId: string;
+  relation: string;
+  confidence: string;
+  count: number;
+  errorRate: number;
+  p95Ms: number | null;
+  lastSeen: string | null;
+  slowestTraces: string[];
+  errorTraces: string[];
+}
+export interface SearchHit {
+  kind: 'trace' | 'span' | 'service';
+  id: string;
+  title: string;
+  traceId: string | null;
+}
+export type Query = Record<string, string | number | boolean | string[] | null | undefined>;
+/**
+ * The Console's only backend: the Juice API (Console requirements §3). One deployment serves one tenant, the one the
+ * signed-in user's token names.
+ */
+export declare class ApiService {
+  private readonly http;
+  private readonly base;
+  /** The caller's tenant, fetched once. */
+  readonly tenant$: Observable<Tenant>;
+  private get;
+  /** Every page of a cursor-paged list (bounded: at most `maxPages` requests). */
+  private all;
+  environments(): Observable<Page<DeploymentEnvironment>>;
+  applications(): Observable<Page<Application>>;
+  resources(type?: string): Observable<Page<ResourceSummary>>;
+  resource(id: string): Observable<ResourceDetail>;
+  health(query: Query): Observable<Page<Health>>;
+  topology(environment?: string | null): Observable<Topology>;
+  rules(): Observable<Page<Rule>>;
+  /** One page of alerts, newest first; pass the previous page's `nextCursor` as `cursor` for the next. */
+  alerts(query: Query): Observable<Page<Alert>>;
+  /** Every alert matching the query (bounded, like the other complete lists). */
+  allAlerts(query: Query): Observable<Page<Alert>>;
+  alert(id: string): Observable<AlertDetail>;
+  acknowledge(id: string, comment: string): Observable<Alert>;
+  traces(query: Query): Observable<TelemetryPage<TraceSummary>>;
+  trace(traceId: string): Observable<Trace>;
+  logs(query: Query): Observable<TelemetryPage<LogRecord>>;
+  operations(query: Query): Observable<TelemetryPage<Operation>>;
+  metrics(query: Query): Observable<TelemetryPage<MetricInfo>>;
+  series(query: Query): Observable<Series>;
+  serviceStats(query: Query): Observable<ServiceStats>;
+  dependency(id: string, query: Query): Observable<DependencyEvidence>;
+  search(q: string): Observable<TelemetryPage<SearchHit>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ApiService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare const RANGES: Record<string, number>;
+/** Search ranges are at most 24 hours (the API's bound); series and operations take up to 7 days. */
+export declare const MAX_SEARCH_MS: number;
+/**
+ * The investigation context that follows the user between pages (Console requirements §17): environment and time
+ * range. It lives in the URL (`env`, and `range` or `from`/`to`), so every page is a deep link and the browser's back
+ * button restores it.
+ */
+export declare class ContextService {
+  private readonly router;
+  private readonly params;
+  readonly environment: import("@angular/core").Signal<string>;
+  readonly range: import("@angular/core").Signal<string>;
+  readonly absolute: import("@angular/core").Signal<{
+    from: string;
+    to: string;
+  } | null>;
+  /** The window as ISO strings, evaluated now for a relative range. */
+  window(maxMs?: number): {
+    from: string;
+    to: string;
+  };
+  /** Query parameters for a link: the context plus the target page's own. */
+  keep(extra?: Params): Params;
+  /** Changes the context on the current page, keeping its other parameters. */
+  set(change: {
+    env?: string | null;
+    range?: string | null;
+    from?: string | null;
+    to?: string | null;
+  }): void;
+  /** A time window centred on a moment, for "around this span" links. */
+  around(at: string, durationMs: number, paddingMs?: number): Params;
+  private leaf;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * The pages, investigation first (Console requirements §4): services, traces, topology, logs and metrics; alerts and
+ * rules after. Detail pages are deep links (§17) and carry the environment and time range in their query parameters.
+ * The host mounts them at its `basePath` (see {@link provideJuiceObservability}) and adds its own guards.
+ */
+export declare const OBSERVABILITY_ROUTES: Routes;
+/** The side menu entries (juice-layout), investigation pages first, linking under `basePath`. */
+export declare function observabilityMenus(basePath?: string, order?: number): Menus;