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

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+# @juice-js/observability
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Juice Console pages for an Angular app built on `@juice-js/layout`: services, traces, dependencies, logs, metrics,
+resources, alerts and rules. The pages read only the Juice Observability API (the `Juice.Observability.Api` NuGet
+package, or the platform image).
+
+## Use
+
+```ts
+// app module or app config
+providers: [
+  provideHttpClient(withInterceptorsFromDi()),
+  provideJuiceObservability({ apiBase: '', basePath: '/observability' }),
+],
+
+// routes: mount the pages under basePath, behind your own sign-in guard
+{ path: 'observability', children: OBSERVABILITY_ROUTES.map(r => ({ ...r, canActivate: [AuthGuard] })) },
+
+// menu (juice-layout)
+MenuModule.forRoot([...yourMenus, ...observabilityMenus('/observability', 100)]),
+```
+
+```scss
+// styles.scss (the app's global styles, once): the pages' layout, in the Juice Console's teal theme, light and dark (.dark).
+@use '@juice-js/observability';
+
+// Optional: colours from your own Angular Material (M2) themes instead.
+:root { @include observability.colors($light-theme); }
+.dark { @include observability.colors($dark-theme); }     // under your dark-mode selector
+```
+
+The default colours sit under zero-specificity `:where()` selectors, so your `colors()` replaces them wherever it
+comes in the file. `colors($theme, $status: (), $series: null)` sets the `--jc-*` custom properties the pages, charts
+and dependency graph read:
+
+| From your theme | Used for |
+|---|---|
+| background, card, divider, text, secondary text | page, cards and tables, borders, text, labels |
+| primary | links, selection, the selected graph node or edge |
+| warn | unhealthy and critical, errors |
+
+A Material theme has no colour for healthy, degraded or offline, nor a categorical palette, so they have defaults
+(Material green, deep orange and greys; ten Material hues for services in a trace and lines in a chart). Set your own:
+
+```scss
+:root {
+  @include observability.colors($light-theme,
+    $status: (ok: #1b5e20, warn: #e65100, bad: #c62828, crit: #8e0000, off: #546e7a, none: #90a4ae),
+    $series: (#1565c0, #6a1b9a, #00838f, #ef6c00));
+}
+```
+
+The pages use the properties but don't style the page itself; give `body` your colours, for example
+`background: var(--jc-bg); color: var(--jc-text);`. A theme switch at runtime (a class change on `<html>` or `<body>`,
+like juice-layout's dark-mode toggle) repaints the charts and the graph.
+
+- `apiBase`: the API origin; empty when the API serves the app.
+- `basePath`: where the routes are mounted; every link between pages goes under it.
+- `auditLink` (optional): a link from a trace to its audit records, shown on the trace page as "Audit records ↗".
+  With `@juice-js/audit` mounted at `/audit`: `auditLink: id => ['/audit/traces', id]`. A string is an external URL.
+  Without it, the trace page shows no link.
+- The router needs `bindToComponentInputs: true`. The pages take their route and query parameters as inputs.
+- The host's bearer-token interceptor (`@juice-js/auth`) must cover `apiBase`. The token carries the `platform_tenant`
+  claim and a platform role (`viewer`, `operator` or `admin`).

package/fesm2022/juice-js-observability-alert.page-TKwqJT2d.mjs

@@ -0,0 +1,404 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { _ as ReasonPipe, a as problemText, d as KeyValueTable, l as ContextBar, m as AgoPipe, u as HealthBadge, x as apiResource } from "./juice-js-observability-telemetry-B5jMJYfn.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { DatePipe } from "@angular/common";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import * as i2 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i4 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i5 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i3 from "@angular/material/select";
+var AlertPage = class AlertPage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	comment = "";
+	sending = signal(false, ...ngDevMode ? [{ debugName: "sending" }] : /* istanbul ignore next */ []);
+	ackError = signal("", ...ngDevMode ? [{ debugName: "ackError" }] : /* istanbul ignore next */ []);
+	detail = apiResource({
+		params: () => this.id(),
+		stream: ({ params }) => this.api.alert(params)
+	});
+	error = computed(() => problemText(this.detail.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	investigate(environment, extra = {}) {
+		const alert = this.detail.value()?.alert;
+		const start = alert?.breachStartedAt ? new Date(alert.breachStartedAt).getTime() - 9e5 : null;
+		const end = alert?.resolvedAt ? new Date(alert.resolvedAt).getTime() + 3e5 : Date.now();
+		const window = start && end - start <= 864e5 ? {
+			from: new Date(start).toISOString(),
+			to: new Date(end).toISOString(),
+			range: null
+		} : {};
+		return this.ctx.keep({
+			env: environment,
+			...window,
+			...extra
+		});
+	}
+	acknowledge() {
+		this.sending.set(true);
+		this.ackError.set("");
+		this.api.acknowledge(this.id(), this.comment).subscribe({
+			next: () => {
+				this.sending.set(false);
+				this.detail.reload();
+			},
+			error: (e) => {
+				this.sending.set(false);
+				this.ackError.set(e.status === 403 ? "Acknowledging needs the operator or admin role." : problemText(e));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AlertPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: AlertPage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: { id: {
+			classPropertyName: "id",
+			publicName: "id",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <jc-context-bar>
+      <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Alerts</a><span class="jc-crumb-sep">›</span>
+      <h1>{{ detail.value()?.alert?.rule ?? '…' }}</h1>
+    </jc-context-bar>
+    @if (detail.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (detail.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (detail.value(); as d) {
+      <div class="jc-summary">
+        <span class="jc-badge" [class.jc-health-unhealthy]="d.alert.severity === 'Critical'" [class.jc-health-degraded]="d.alert.severity === 'Warning'">{{ d.alert.severity }}</span>
+        <strong>{{ d.alert.state }}</strong>
+        <span>{{ d.alert.subjectKey }}</span>
+        @if (d.alert.noData) { <span class="jc-muted">no data at the last evaluation: state kept</span> }
+        @if (d.alert.subjectType === 'service' && d.alert.subjectId) {
+          <a mat-flat-button [routerLink]="['services', d.alert.subjectId] | jcLink" [queryParams]="investigate(d.alert.environment)">Investigate</a>
+          <a mat-stroked-button [routerLink]="['services', d.alert.subjectId] | jcLink" [queryParams]="investigate(d.alert.environment, { tab: 'traces', status: 'error' })">Error traces</a>
+        }
+        @for (l of d.links; track l.url) { <a mat-button [href]="l.url" target="_blank" rel="noopener">{{ l.title }} ↗</a> }
+      </div>
+      <div class="jc-grid-2">
+        <section class="jc-card"><h2>Evidence</h2><jc-kv [values]="d.evidence" /></section>
+        <section class="jc-card">
+          <h2>Subject health</h2>
+          @for (h of d.subjectHealth; track h.subjectId + h.environment) {
+            <p><jc-health [state]="h.state" [stale]="h.stale" /> {{ h.environment }}</p>
+            <ul class="jc-reasons">@for (r of h.reasons; track r) { <li>{{ r | reason }}</li> }</ul>
+          } @empty { <p class="jc-muted">No health for this subject.</p> }
+        </section>
+      </div>
+      <section class="jc-card">
+        <h2>History</h2>
+        <table class="jc-table"><tbody>
+          @for (t of d.history; track t.at + t.to) {
+            <tr><td>{{ t.at | date: 'MMM d, HH:mm:ss' }}</td><td>{{ t.from ?? '—' }} → <strong>{{ t.to }}</strong></td><td>{{ t.reason | reason }}</td><td>{{ t.value ?? '—' }}</td></tr>
+          }
+        </tbody></table>
+      </section>
+      <section class="jc-card">
+        <h2>Acknowledgement</h2>
+        @if (d.alert.acknowledgedAt) {
+          <p>By <strong>{{ d.alert.acknowledgedBy }}</strong> {{ d.alert.acknowledgedAt | ago }}@if (d.acknowledgeComment) {: “{{ d.acknowledgeComment }}”}</p>
+        } @else if (d.alert.state !== 'Resolved') {
+          <form (ngSubmit)="acknowledge()" class="jc-filter-form">
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Comment</mat-label><input matInput name="comment" [(ngModel)]="comment" maxlength="1000"></mat-form-field>
+            <button mat-flat-button type="submit" [disabled]="sending()">Acknowledge</button>
+          </form>
+          @if (ackError()) { <p class="jc-error">{{ ackError() }}</p> }
+        } @else { <p class="jc-muted">Resolved without acknowledgement.</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: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i3.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i4.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i5.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: "component",
+				type: KeyValueTable,
+				selector: "jc-kv",
+				inputs: ["values", "empty"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			},
+			{
+				kind: "pipe",
+				type: AgoPipe,
+				name: "ago"
+			},
+			{
+				kind: "pipe",
+				type: ReasonPipe,
+				name: "reason"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AlertPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				DatePipe,
+				FormsModule,
+				MatButtonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				MatProgressBarModule,
+				ContextBar,
+				HealthBadge,
+				KeyValueTable,
+				AgoPipe,
+				ReasonPipe
+			],
+			template: `
+    <jc-context-bar>
+      <a [routerLink]="['alerts'] | jcLink" [queryParams]="ctx.keep()" class="jc-crumb">Alerts</a><span class="jc-crumb-sep">›</span>
+      <h1>{{ detail.value()?.alert?.rule ?? '…' }}</h1>
+    </jc-context-bar>
+    @if (detail.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (detail.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (detail.value(); as d) {
+      <div class="jc-summary">
+        <span class="jc-badge" [class.jc-health-unhealthy]="d.alert.severity === 'Critical'" [class.jc-health-degraded]="d.alert.severity === 'Warning'">{{ d.alert.severity }}</span>
+        <strong>{{ d.alert.state }}</strong>
+        <span>{{ d.alert.subjectKey }}</span>
+        @if (d.alert.noData) { <span class="jc-muted">no data at the last evaluation: state kept</span> }
+        @if (d.alert.subjectType === 'service' && d.alert.subjectId) {
+          <a mat-flat-button [routerLink]="['services', d.alert.subjectId] | jcLink" [queryParams]="investigate(d.alert.environment)">Investigate</a>
+          <a mat-stroked-button [routerLink]="['services', d.alert.subjectId] | jcLink" [queryParams]="investigate(d.alert.environment, { tab: 'traces', status: 'error' })">Error traces</a>
+        }
+        @for (l of d.links; track l.url) { <a mat-button [href]="l.url" target="_blank" rel="noopener">{{ l.title }} ↗</a> }
+      </div>
+      <div class="jc-grid-2">
+        <section class="jc-card"><h2>Evidence</h2><jc-kv [values]="d.evidence" /></section>
+        <section class="jc-card">
+          <h2>Subject health</h2>
+          @for (h of d.subjectHealth; track h.subjectId + h.environment) {
+            <p><jc-health [state]="h.state" [stale]="h.stale" /> {{ h.environment }}</p>
+            <ul class="jc-reasons">@for (r of h.reasons; track r) { <li>{{ r | reason }}</li> }</ul>
+          } @empty { <p class="jc-muted">No health for this subject.</p> }
+        </section>
+      </div>
+      <section class="jc-card">
+        <h2>History</h2>
+        <table class="jc-table"><tbody>
+          @for (t of d.history; track t.at + t.to) {
+            <tr><td>{{ t.at | date: 'MMM d, HH:mm:ss' }}</td><td>{{ t.from ?? '—' }} → <strong>{{ t.to }}</strong></td><td>{{ t.reason | reason }}</td><td>{{ t.value ?? '—' }}</td></tr>
+          }
+        </tbody></table>
+      </section>
+      <section class="jc-card">
+        <h2>Acknowledgement</h2>
+        @if (d.alert.acknowledgedAt) {
+          <p>By <strong>{{ d.alert.acknowledgedBy }}</strong> {{ d.alert.acknowledgedAt | ago }}@if (d.acknowledgeComment) {: “{{ d.acknowledgeComment }}”}</p>
+        } @else if (d.alert.state !== 'Resolved') {
+          <form (ngSubmit)="acknowledge()" class="jc-filter-form">
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Comment</mat-label><input matInput name="comment" [(ngModel)]="comment" maxlength="1000"></mat-form-field>
+            <button mat-flat-button type="submit" [disabled]="sending()">Acknowledge</button>
+          </form>
+          @if (ackError()) { <p class="jc-error">{{ ackError() }}</p> }
+        } @else { <p class="jc-muted">Resolved without acknowledgement.</p> }
+      </section>
+    }`
+		}]
+	}],
+	propDecorators: { id: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "id",
+			required: true
+		}]
+	}] }
+});
+export { AlertPage };
+
+//# sourceMappingURL=juice-js-observability-alert.page-TKwqJT2d.mjs.map

package/fesm2022/juice-js-observability-alert.page-TKwqJT2d.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-alert.page-TKwqJT2d.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/alert.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { DatePipe } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { RouterLink } from '@angular/router';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { AgoPipe, ReasonPipe } from '../shared/format';\nimport { ContextBar, HealthBadge, KeyValueTable } from '../shared/ui';\nimport { problemText } from '../shared/telemetry';\n\n/**\n * One alert (Console requirements §14): evidence, lifecycle history, the subject's health and reasons, the way into\n * the investigation, and acknowledgement for operators.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LinkPipe, RouterLink, DatePipe, FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatProgressBarModule,\n    ContextBar, HealthBadge, KeyValueTable, AgoPipe, ReasonPipe],\n  template: `\n    <jc-context-bar>\n      <a [routerLink]=\"['alerts'] | jcLink\" [queryParams]=\"ctx.keep()\" class=\"jc-crumb\">Alerts</a><span class=\"jc-crumb-sep\">›</span>\n      <h1>{{ detail.value()?.alert?.rule ?? '…' }}</h1>\n    </jc-context-bar>\n    @if (detail.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (detail.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n    @if (detail.value(); as d) {\n      <div class=\"jc-summary\">\n        <span class=\"jc-badge\" [class.jc-health-unhealthy]=\"d.alert.severity === 'Critical'\" [class.jc-health-degraded]=\"d.alert.severity === 'Warning'\">{{ d.alert.severity }}</span>\n        <strong>{{ d.alert.state }}</strong>\n        <span>{{ d.alert.subjectKey }}</span>\n        @if (d.alert.noData) { <span class=\"jc-muted\">no data at the last evaluation: state kept</span> }\n        @if (d.alert.subjectType === 'service' && d.alert.subjectId) {\n          <a mat-flat-button [routerLink]=\"['services', d.alert.subjectId] | jcLink\" [queryParams]=\"investigate(d.alert.environment)\">Investigate</a>\n          <a mat-stroked-button [routerLink]=\"['services', d.alert.subjectId] | jcLink\" [queryParams]=\"investigate(d.alert.environment, { tab: 'traces', status: 'error' })\">Error traces</a>\n        }\n        @for (l of d.links; track l.url) { <a mat-button [href]=\"l.url\" target=\"_blank\" rel=\"noopener\">{{ l.title }} ↗</a> }\n      </div>\n      <div class=\"jc-grid-2\">\n        <section class=\"jc-card\"><h2>Evidence</h2><jc-kv [values]=\"d.evidence\" /></section>\n        <section class=\"jc-card\">\n          <h2>Subject health</h2>\n          @for (h of d.subjectHealth; track h.subjectId + h.environment) {\n            <p><jc-health [state]=\"h.state\" [stale]=\"h.stale\" /> {{ h.environment }}</p>\n            <ul class=\"jc-reasons\">@for (r of h.reasons; track r) { <li>{{ r | reason }}</li> }</ul>\n          } @empty { <p class=\"jc-muted\">No health for this subject.</p> }\n        </section>\n      </div>\n      <section class=\"jc-card\">\n        <h2>History</h2>\n        <table class=\"jc-table\"><tbody>\n          @for (t of d.history; track t.at + t.to) {\n            <tr><td>{{ t.at | date: 'MMM d, HH:mm:ss' }}</td><td>{{ t.from ?? '—' }} → <strong>{{ t.to }}</strong></td><td>{{ t.reason | reason }}</td><td>{{ t.value ?? '—' }}</td></tr>\n          }\n        </tbody></table>\n      </section>\n      <section class=\"jc-card\">\n        <h2>Acknowledgement</h2>\n        @if (d.alert.acknowledgedAt) {\n          <p>By <strong>{{ d.alert.acknowledgedBy }}</strong> {{ d.alert.acknowledgedAt | ago }}@if (d.acknowledgeComment) {: “{{ d.acknowledgeComment }}”}</p>\n        } @else if (d.alert.state !== 'Resolved') {\n          <form (ngSubmit)=\"acknowledge()\" class=\"jc-filter-form\">\n            <mat-form-field subscriptSizing=\"dynamic\" class=\"jc-field-wide\"><mat-label>Comment</mat-label><input matInput name=\"comment\" [(ngModel)]=\"comment\" maxlength=\"1000\"></mat-form-field>\n            <button mat-flat-button type=\"submit\" [disabled]=\"sending()\">Acknowledge</button>\n          </form>\n          @if (ackError()) { <p class=\"jc-error\">{{ ackError() }}</p> }\n        } @else { <p class=\"jc-muted\">Resolved without acknowledgement.</p> }\n      </section>\n    }`,\n})\nexport class AlertPage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  readonly id = input.required<string>();\n  protected comment = '';\n  protected readonly sending = signal(false);\n  protected readonly ackError = signal('');\n\n  protected readonly detail = apiResource({ params: () => this.id(), stream: ({ params }) => this.api.alert(params) });\n  protected readonly error = computed(() => problemText(this.detail.error()));\n\n  /** The service page over the alert's environment, from shortly before the breach. */\n  investigate(environment: string | null, extra: Record<string, string> = {}) {\n    const alert = this.detail.value()?.alert;\n    const start = alert?.breachStartedAt ? new Date(alert.breachStartedAt).getTime() - 15 * 60_000 : null;\n    const end = alert?.resolvedAt ? new Date(alert.resolvedAt).getTime() + 5 * 60_000 : Date.now();\n    const window = start && end - start <= 24 * 3_600_000\n      ? { from: new Date(start).toISOString(), to: new Date(end).toISOString(), range: null } : {};\n    return this.ctx.keep({ env: environment, ...window, ...extra });\n  }\n\n  acknowledge() {\n    this.sending.set(true);\n    this.ackError.set('');\n    this.api.acknowledge(this.id(), this.comment).subscribe({\n      next: () => { this.sending.set(false); this.detail.reload(); },\n      error: e => {\n        this.sending.set(false);\n        this.ackError.set((e as { status?: number }).status === 403 ? 'Acknowledging needs the operator or admin role.' : problemText(e));\n      },\n    });\n  }\n}\n"],"mappings":"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"}