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

package/fesm2022/juice-js-observability-metrics.page-DR6qZtfl.mjs

@@ -0,0 +1,267 @@
+import { ApiService, ContextService } from "./juice-js-observability.mjs";
+import { l as ContextBar, n as MetricExplorer, x as apiResource } from "./juice-js-observability-telemetry-D9EYxkdr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { map } from "rxjs";
+import { Router } from "@angular/router";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i2 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+var MetricsPage = class MetricsPage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	router = inject(Router);
+	service = input(...ngDevMode ? [void 0, { debugName: "service" }] : /* istanbul ignore next */ []);
+	resource = input(...ngDevMode ? [void 0, { debugName: "resource" }] : /* istanbul ignore next */ []);
+	metric = input(...ngDevMode ? [void 0, { debugName: "metric" }] : /* istanbul ignore next */ []);
+	services = apiResource({ stream: () => this.api.resources("service").pipe(map((p) => p.items)) });
+	hosts = apiResource({ stream: () => this.api.resources("host").pipe(map((p) => p.items)) });
+	query = computed(() => ({
+		serviceId: this.service(),
+		resourceId: this.resource()
+	}), ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	scope(change) {
+		this.router.navigate([], {
+			queryParams: change,
+			queryParamsHandling: "merge"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: MetricsPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: MetricsPage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: {
+			service: {
+				classPropertyName: "service",
+				publicName: "service",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resource: {
+				classPropertyName: "resource",
+				publicName: "resource",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			metric: {
+				classPropertyName: "metric",
+				publicName: "metric",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <jc-context-bar><h1>Metrics</h1></jc-context-bar>
+    <div class="jc-filter-form">
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Service</mat-label>
+        <mat-select [ngModel]="service() ?? ''" (ngModelChange)="scope({ service: $event || null, resource: null })">
+          <mat-option value="">Any</mat-option>
+          @for (s of services.value() ?? []; track s.id) { <mat-option [value]="s.id">{{ s.key }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Host</mat-label>
+        <mat-select [ngModel]="resource() ?? ''" (ngModelChange)="scope({ resource: $event || null, service: null })">
+          <mat-option value="">Any</mat-option>
+          @for (h of hosts.value() ?? []; track h.id) { <mat-option [value]="h.id">{{ h.displayName }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <jc-metric-explorer [scope]="query()" [initial]="metric() ?? null" />`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i2.MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "component",
+				type: i2.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "component",
+				type: MetricExplorer,
+				selector: "jc-metric-explorer",
+				inputs: ["scope", "initial"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MetricsPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				MatFormFieldModule,
+				MatSelectModule,
+				ContextBar,
+				MetricExplorer
+			],
+			template: `
+    <jc-context-bar><h1>Metrics</h1></jc-context-bar>
+    <div class="jc-filter-form">
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Service</mat-label>
+        <mat-select [ngModel]="service() ?? ''" (ngModelChange)="scope({ service: $event || null, resource: null })">
+          <mat-option value="">Any</mat-option>
+          @for (s of services.value() ?? []; track s.id) { <mat-option [value]="s.id">{{ s.key }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Host</mat-label>
+        <mat-select [ngModel]="resource() ?? ''" (ngModelChange)="scope({ resource: $event || null, service: null })">
+          <mat-option value="">Any</mat-option>
+          @for (h of hosts.value() ?? []; track h.id) { <mat-option [value]="h.id">{{ h.displayName }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <jc-metric-explorer [scope]="query()" [initial]="metric() ?? null" />`
+		}]
+	}],
+	propDecorators: {
+		service: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "service",
+				required: false
+			}]
+		}],
+		resource: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resource",
+				required: false
+			}]
+		}],
+		metric: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "metric",
+				required: false
+			}]
+		}]
+	}
+});
+export { MetricsPage };
+
+//# sourceMappingURL=juice-js-observability-metrics.page-DR6qZtfl.mjs.map

package/fesm2022/juice-js-observability-metrics.page-DR6qZtfl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-metrics.page-DR6qZtfl.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/metrics.page.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { FormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\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 { MetricExplorer } from '../shared/telemetry';\n\n/** Metrics of a service or a host (Console requirements §7): pick a scope, then a metric. */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FormsModule, MatFormFieldModule, MatSelectModule, ContextBar, MetricExplorer],\n  template: `\n    <jc-context-bar><h1>Metrics</h1></jc-context-bar>\n    <div class=\"jc-filter-form\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>Service</mat-label>\n        <mat-select [ngModel]=\"service() ?? ''\" (ngModelChange)=\"scope({ service: $event || null, resource: null })\">\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\">\n        <mat-label>Host</mat-label>\n        <mat-select [ngModel]=\"resource() ?? ''\" (ngModelChange)=\"scope({ resource: $event || null, service: null })\">\n          <mat-option value=\"\">Any</mat-option>\n          @for (h of hosts.value() ?? []; track h.id) { <mat-option [value]=\"h.id\">{{ h.displayName }}</mat-option> }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <jc-metric-explorer [scope]=\"query()\" [initial]=\"metric() ?? null\" />`,\n})\nexport class MetricsPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  private readonly router = inject(Router);\n  readonly service = input<string>();\n  readonly resource = input<string>();\n  readonly metric = input<string>();\n\n  protected readonly services = apiResource({ stream: () => this.api.resources('service').pipe(map(p => p.items)) });\n  protected readonly hosts = apiResource({ stream: () => this.api.resources('host').pipe(map(p => p.items)) });\n  protected readonly query = computed(() => ({ serviceId: this.service(), resourceId: this.resource() }));\n\n  scope(change: Record<string, string | null>) {\n    void this.router.navigate([], { queryParams: change, queryParamsHandling: 'merge' });\n  }\n}\n"],"mappings":"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"}

package/fesm2022/juice-js-observability-overview.page-DU0GxSXQ.mjs

@@ -0,0 +1,243 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { _ as ReasonPipe, a as problemText, l as ContextBar, m as AgoPipe, u as HealthBadge, x as apiResource } from "./juice-js-observability-telemetry-D9EYxkdr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core";
+import { map } from "rxjs";
+import { RouterLink } from "@angular/router";
+import * as i1 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+const ORDER = [
+	"Critical",
+	"Unhealthy",
+	"Degraded",
+	"Offline",
+	"Unknown",
+	"Healthy"
+];
+const SHOWN = 10;
+var OverviewPage = class OverviewPage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	order = ORDER;
+	shown = SHOWN;
+	reasonPipe = new ReasonPipe();
+	reason = (r) => this.reasonPipe.transform(r);
+	health = apiResource({
+		params: () => this.ctx.environment(),
+		stream: ({ params }) => this.api.health({
+			subjectType: "service",
+			environment: params
+		}).pipe(map((p) => p.items))
+	});
+	alerts = apiResource({ stream: () => this.api.allAlerts({ state: "firing" }).pipe(map((p) => p.items)) });
+	error = computed(() => problemText(this.health.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	firing = computed(() => [...this.alerts.value() ?? []].sort((a, b) => Number(b.severity === "Critical") - Number(a.severity === "Critical") || (b.firedAt ?? "").localeCompare(a.firedAt ?? "")), ...ngDevMode ? [{ debugName: "firing" }] : /* istanbul ignore next */ []);
+	firingShown = computed(() => this.firing().slice(0, SHOWN), ...ngDevMode ? [{ debugName: "firingShown" }] : /* istanbul ignore next */ []);
+	criticalCount = computed(() => this.firing().filter((a) => a.severity === "Critical").length, ...ngDevMode ? [{ debugName: "criticalCount" }] : /* istanbul ignore next */ []);
+	counts = computed(() => {
+		const counts = {};
+		for (const h of this.health.value() ?? []) counts[h.state] = (counts[h.state] ?? 0) + 1;
+		return counts;
+	}, ...ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []);
+	attention = computed(() => (this.health.value() ?? []).filter((h) => h.state !== "Healthy").sort((a, b) => ORDER.indexOf(a.state) - ORDER.indexOf(b.state)), ...ngDevMode ? [{ debugName: "attention" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: OverviewPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: OverviewPage,
+		isStandalone: true,
+		selector: "ng-component",
+		ngImport: i0,
+		template: `
+    <jc-context-bar><h1>Overview</h1></jc-context-bar>
+    @if (health.isLoading() || alerts.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (health.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    <div class="jc-tiles">
+      @for (s of order; track s) {
+        <a class="jc-card jc-tile" [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep({ state: s })">
+          <jc-health [state]="s" /><strong>{{ counts()[s] ?? 0 }}</strong><span class="jc-muted">services</span>
+        </a>
+      }
+    </div>
+
+    <section class="jc-card">
+      <div class="jc-row">
+        <h2>Firing alerts @if (firing().length) { <span class="jc-muted">({{ firing().length }}@if (criticalCount()) { · {{ criticalCount() }} critical})</span> }</h2>
+        @if (firing().length) { <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep({ state: 'firing' })">All firing alerts</a> }
+      </div>
+      @for (a of firingShown(); track a.id) {
+        <div class="jc-list-row">
+          <span class="jc-badge" [class.jc-health-unhealthy]="a.severity === 'Critical'" [class.jc-health-degraded]="a.severity !== 'Critical'">{{ a.severity }}</span>
+          <a [routerLink]="['alerts', a.id] | jcLink" [queryParams]="ctx.keep()">{{ a.rule }}</a>
+          <span>{{ a.subjectKey }}</span>
+          <span class="jc-muted">fired {{ a.firedAt | ago }}@if (a.acknowledgedBy) { · acknowledged by {{ a.acknowledgedBy }} }</span>
+        </div>
+      } @empty { <p class="jc-muted">Nothing firing.</p> }
+      @if (firing().length > shown) {
+        <p class="jc-more"><span class="jc-muted">Critical first, then the newest; {{ firing().length - shown }} more.</span>
+          <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep({ state: 'firing' })">See all {{ firing().length }}</a></p>
+      }
+    </section>
+
+    <section class="jc-card">
+      <h2>Services needing attention @if (attention().length) { <span class="jc-muted">({{ attention().length }})</span> }</h2>
+      @for (h of attention().slice(0, shown); track h.subjectId + h.environment) {
+        <div class="jc-list-row">
+          <jc-health [state]="h.state" [stale]="h.stale" />
+          <a [routerLink]="['services', h.subjectId] | jcLink" [queryParams]="ctx.keep({ env: h.environment })">{{ h.subjectName }}</a>
+          <span class="jc-muted">{{ h.environment }}</span>
+          <span>{{ h.reasons.slice(0, 3).map(reason).join(' · ') }}</span>
+          <span class="jc-muted">since {{ h.since | ago }}</span>
+        </div>
+      } @empty { <p class="jc-muted">Every evaluated service is healthy.</p> }
+      @if (attention().length > shown) {
+        <p class="jc-more"><span class="jc-muted">The worst first; {{ attention().length - shown }} more. The counts above open each state's list:</span>
+          @for (s of order; track s) { @if (s !== 'Healthy' && counts()[s]) {
+            <a [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep({ state: s })">{{ counts()[s] }} {{ s.toLowerCase() }}</a>
+          } }</p>
+      }
+    </section>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "component",
+				type: HealthBadge,
+				selector: "jc-health",
+				inputs: ["state", "stale"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: AgoPipe,
+				name: "ago"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: OverviewPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				MatProgressBarModule,
+				ContextBar,
+				HealthBadge,
+				AgoPipe
+			],
+			template: `
+    <jc-context-bar><h1>Overview</h1></jc-context-bar>
+    @if (health.isLoading() || alerts.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (health.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    <div class="jc-tiles">
+      @for (s of order; track s) {
+        <a class="jc-card jc-tile" [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep({ state: s })">
+          <jc-health [state]="s" /><strong>{{ counts()[s] ?? 0 }}</strong><span class="jc-muted">services</span>
+        </a>
+      }
+    </div>
+
+    <section class="jc-card">
+      <div class="jc-row">
+        <h2>Firing alerts @if (firing().length) { <span class="jc-muted">({{ firing().length }}@if (criticalCount()) { · {{ criticalCount() }} critical})</span> }</h2>
+        @if (firing().length) { <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep({ state: 'firing' })">All firing alerts</a> }
+      </div>
+      @for (a of firingShown(); track a.id) {
+        <div class="jc-list-row">
+          <span class="jc-badge" [class.jc-health-unhealthy]="a.severity === 'Critical'" [class.jc-health-degraded]="a.severity !== 'Critical'">{{ a.severity }}</span>
+          <a [routerLink]="['alerts', a.id] | jcLink" [queryParams]="ctx.keep()">{{ a.rule }}</a>
+          <span>{{ a.subjectKey }}</span>
+          <span class="jc-muted">fired {{ a.firedAt | ago }}@if (a.acknowledgedBy) { · acknowledged by {{ a.acknowledgedBy }} }</span>
+        </div>
+      } @empty { <p class="jc-muted">Nothing firing.</p> }
+      @if (firing().length > shown) {
+        <p class="jc-more"><span class="jc-muted">Critical first, then the newest; {{ firing().length - shown }} more.</span>
+          <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep({ state: 'firing' })">See all {{ firing().length }}</a></p>
+      }
+    </section>
+
+    <section class="jc-card">
+      <h2>Services needing attention @if (attention().length) { <span class="jc-muted">({{ attention().length }})</span> }</h2>
+      @for (h of attention().slice(0, shown); track h.subjectId + h.environment) {
+        <div class="jc-list-row">
+          <jc-health [state]="h.state" [stale]="h.stale" />
+          <a [routerLink]="['services', h.subjectId] | jcLink" [queryParams]="ctx.keep({ env: h.environment })">{{ h.subjectName }}</a>
+          <span class="jc-muted">{{ h.environment }}</span>
+          <span>{{ h.reasons.slice(0, 3).map(reason).join(' · ') }}</span>
+          <span class="jc-muted">since {{ h.since | ago }}</span>
+        </div>
+      } @empty { <p class="jc-muted">Every evaluated service is healthy.</p> }
+      @if (attention().length > shown) {
+        <p class="jc-more"><span class="jc-muted">The worst first; {{ attention().length - shown }} more. The counts above open each state's list:</span>
+          @for (s of order; track s) { @if (s !== 'Healthy' && counts()[s]) {
+            <a [routerLink]="['services'] | jcLink" [queryParams]="ctx.keep({ state: s })">{{ counts()[s] }} {{ s.toLowerCase() }}</a>
+          } }</p>
+      }
+    </section>`
+		}]
+	}]
+});
+export { OverviewPage };
+
+//# sourceMappingURL=juice-js-observability-overview.page-DU0GxSXQ.mjs.map

package/fesm2022/juice-js-observability-overview.page-DU0GxSXQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-overview.page-DU0GxSXQ.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/overview.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { RouterLink } from '@angular/router';\nimport { map } from 'rxjs';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { HealthState } from '../core/models';\nimport { AgoPipe, ReasonPipe } from '../shared/format';\nimport { ContextBar, HealthBadge } from '../shared/ui';\nimport { problemText } from '../shared/telemetry';\n\nconst ORDER: HealthState[] = ['Critical', 'Unhealthy', 'Degraded', 'Offline', 'Unknown', 'Healthy'];\n\n/** How many rows each list shows: the overview orients, the alerts and services pages list everything. */\nconst SHOWN = 10;\n\n/**\n * Where an investigation starts (Console requirements §4, §21 step 1): what is firing and which services are not\n * healthy, each one click from its service page. Orientation, not a dashboard.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LinkPipe, RouterLink, MatProgressBarModule, ContextBar, HealthBadge, AgoPipe],\n  template: `\n    <jc-context-bar><h1>Overview</h1></jc-context-bar>\n    @if (health.isLoading() || alerts.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (health.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n\n    <div class=\"jc-tiles\">\n      @for (s of order; track s) {\n        <a class=\"jc-card jc-tile\" [routerLink]=\"['services'] | jcLink\" [queryParams]=\"ctx.keep({ state: s })\">\n          <jc-health [state]=\"s\" /><strong>{{ counts()[s] ?? 0 }}</strong><span class=\"jc-muted\">services</span>\n        </a>\n      }\n    </div>\n\n    <section class=\"jc-card\">\n      <div class=\"jc-row\">\n        <h2>Firing alerts @if (firing().length) { <span class=\"jc-muted\">({{ firing().length }}@if (criticalCount()) { · {{ criticalCount() }} critical})</span> }</h2>\n        @if (firing().length) { <a [routerLink]=\"['alerts'] | jcLink\" [queryParams]=\"ctx.keep({ state: 'firing' })\">All firing alerts</a> }\n      </div>\n      @for (a of firingShown(); track a.id) {\n        <div class=\"jc-list-row\">\n          <span class=\"jc-badge\" [class.jc-health-unhealthy]=\"a.severity === 'Critical'\" [class.jc-health-degraded]=\"a.severity !== 'Critical'\">{{ a.severity }}</span>\n          <a [routerLink]=\"['alerts', a.id] | jcLink\" [queryParams]=\"ctx.keep()\">{{ a.rule }}</a>\n          <span>{{ a.subjectKey }}</span>\n          <span class=\"jc-muted\">fired {{ a.firedAt | ago }}@if (a.acknowledgedBy) { · acknowledged by {{ a.acknowledgedBy }} }</span>\n        </div>\n      } @empty { <p class=\"jc-muted\">Nothing firing.</p> }\n      @if (firing().length > shown) {\n        <p class=\"jc-more\"><span class=\"jc-muted\">Critical first, then the newest; {{ firing().length - shown }} more.</span>\n          <a [routerLink]=\"['alerts'] | jcLink\" [queryParams]=\"ctx.keep({ state: 'firing' })\">See all {{ firing().length }}</a></p>\n      }\n    </section>\n\n    <section class=\"jc-card\">\n      <h2>Services needing attention @if (attention().length) { <span class=\"jc-muted\">({{ attention().length }})</span> }</h2>\n      @for (h of attention().slice(0, shown); track h.subjectId + h.environment) {\n        <div class=\"jc-list-row\">\n          <jc-health [state]=\"h.state\" [stale]=\"h.stale\" />\n          <a [routerLink]=\"['services', h.subjectId] | jcLink\" [queryParams]=\"ctx.keep({ env: h.environment })\">{{ h.subjectName }}</a>\n          <span class=\"jc-muted\">{{ h.environment }}</span>\n          <span>{{ h.reasons.slice(0, 3).map(reason).join(' · ') }}</span>\n          <span class=\"jc-muted\">since {{ h.since | ago }}</span>\n        </div>\n      } @empty { <p class=\"jc-muted\">Every evaluated service is healthy.</p> }\n      @if (attention().length > shown) {\n        <p class=\"jc-more\"><span class=\"jc-muted\">The worst first; {{ attention().length - shown }} more. The counts above open each state's list:</span>\n          @for (s of order; track s) { @if (s !== 'Healthy' && counts()[s]) {\n            <a [routerLink]=\"['services'] | jcLink\" [queryParams]=\"ctx.keep({ state: s })\">{{ counts()[s] }} {{ s.toLowerCase() }}</a>\n          } }</p>\n      }\n    </section>`,\n})\nexport class OverviewPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  protected readonly order = ORDER;\n  protected readonly shown = SHOWN;\n  private readonly reasonPipe = new ReasonPipe();\n  protected readonly reason = (r: string) => this.reasonPipe.transform(r);\n\n  protected readonly health = apiResource({\n    params: () => this.ctx.environment(),\n    stream: ({ params }) => this.api.health({ subjectType: 'service', environment: params }).pipe(map(p => p.items)),\n  });\n  protected readonly alerts = apiResource({ stream: () => this.api.allAlerts({ state: 'firing' }).pipe(map(p => p.items)) });\n  protected readonly error = computed(() => problemText(this.health.error()));\n  /** Critical first, then the newest. */\n  protected readonly firing = computed(() => [...(this.alerts.value() ?? [])].sort((a, b) =>\n    Number(b.severity === 'Critical') - Number(a.severity === 'Critical')\n    || (b.firedAt ?? '').localeCompare(a.firedAt ?? '')));\n  protected readonly firingShown = computed(() => this.firing().slice(0, SHOWN));\n  protected readonly criticalCount = computed(() => this.firing().filter(a => a.severity === 'Critical').length);\n  protected readonly counts = computed(() => {\n    const counts: Partial<Record<HealthState, number>> = {};\n    for (const h of this.health.value() ?? []) counts[h.state] = (counts[h.state] ?? 0) + 1;\n    return counts;\n  });\n  protected readonly attention = computed(() => (this.health.value() ?? [])\n    .filter(h => h.state !== 'Healthy')\n    .sort((a, b) => ORDER.indexOf(a.state) - ORDER.indexOf(b.state)));\n}\n"],"mappings":"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"}