@juice-js/observability 1.1.0-alpha.21 → 1.1.0-alpha.22

package/fesm2022/juice-js-observability-notifications.page-BDqb10C6.mjs

@@ -0,0 +1,725 @@
+import { ApiService } from "./juice-js-observability.mjs";
+import { S as apiResource, o as problemText, u as ContextBar } from "./juice-js-observability-telemetry-BftWSOaQ.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { forkJoin, map } from "rxjs";
+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 i5 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i6 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i4 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+import * as i3 from "@angular/material/checkbox";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+const list = (text) => text.split(",").map((s) => s.trim()).filter(Boolean);
+const NEW_CHANNEL = {
+	id: null,
+	key: "",
+	kind: "Slack",
+	url: "",
+	secretRef: "",
+	recipients: "",
+	ruleKeys: "",
+	environments: "",
+	minimumSeverity: "Info",
+	groupWindowSeconds: 0,
+	firing: true,
+	resolved: true,
+	enabled: true
+};
+const NEW_POLICY = {
+	editing: false,
+	key: "",
+	name: "",
+	ruleKeys: "",
+	environments: "",
+	minimumSeverity: "Critical",
+	stopOnAcknowledge: true,
+	enabled: true,
+	steps: ""
+};
+var NotificationsPage = class NotificationsPage {
+	api = inject(ApiService);
+	channel = signal(null, ...ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []);
+	policy = signal(null, ...ngDevMode ? [{ debugName: "policy" }] : /* istanbul ignore next */ []);
+	history = signal(null, ...ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	channelError = signal("", ...ngDevMode ? [{ debugName: "channelError" }] : /* istanbul ignore next */ []);
+	policyError = signal("", ...ngDevMode ? [{ debugName: "policyError" }] : /* istanbul ignore next */ []);
+	allowError = signal("", ...ngDevMode ? [{ debugName: "allowError" }] : /* istanbul ignore next */ []);
+	destination = "";
+	ports = "";
+	data = apiResource({ stream: () => forkJoin({
+		channels: this.api.channels().pipe(map((p) => p.items)),
+		policies: this.api.escalationPolicies().pipe(map((p) => p.items)),
+		allowlist: this.api.allowlist().pipe(map((p) => p.items))
+	}) });
+	error = computed(() => problemText(this.data.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	channels = computed(() => this.data.value()?.channels ?? [], ...ngDevMode ? [{ debugName: "channels" }] : /* istanbul ignore next */ []);
+	policies = computed(() => this.data.value()?.policies ?? [], ...ngDevMode ? [{ debugName: "policies" }] : /* istanbul ignore next */ []);
+	allowed = computed(() => this.data.value()?.allowlist ?? [], ...ngDevMode ? [{ debugName: "allowed" }] : /* istanbul ignore next */ []);
+	deliveries = apiResource({
+		params: () => this.history() ?? void 0,
+		stream: ({ params }) => this.api.deliveries(params)
+	});
+	deliveriesError = computed(() => problemText(this.deliveries.error()), ...ngDevMode ? [{ debugName: "deliveriesError" }] : /* istanbul ignore next */ []);
+	newChannel() {
+		this.channelError.set("");
+		return { ...NEW_CHANNEL };
+	}
+	newPolicy() {
+		this.policyError.set("");
+		return { ...NEW_POLICY };
+	}
+	editChannel(c) {
+		this.channelError.set("");
+		this.channel.set({
+			id: c.id,
+			key: c.key,
+			kind: c.kind,
+			url: "",
+			secretRef: c.secretRef ?? "",
+			recipients: (c.recipients ?? []).join(", "),
+			ruleKeys: c.ruleKeys.join(", "),
+			environments: c.environments.join(", "),
+			minimumSeverity: c.minimumSeverity,
+			groupWindowSeconds: c.groupWindowSeconds,
+			firing: c.events.includes("alert.firing"),
+			resolved: c.events.includes("alert.resolved"),
+			enabled: c.enabled
+		});
+	}
+	run(request, error, done) {
+		this.saving.set(true);
+		error("");
+		request.subscribe({
+			next: () => {
+				this.saving.set(false);
+				done();
+				this.data.reload();
+			},
+			error: (e) => {
+				this.saving.set(false);
+				error(e.status === 403 ? "This needs the admin role." : problemText(e));
+			}
+		});
+	}
+	saveChannel(f) {
+		const events = [f.firing ? "alert.firing" : "", f.resolved ? "alert.resolved" : ""].filter(Boolean);
+		const body = {
+			key: f.key,
+			kind: f.kind,
+			url: f.kind === "Webhook" && f.url.trim() ? f.url.trim() : void 0,
+			secretRef: f.kind === "Email" ? void 0 : f.secretRef.trim(),
+			recipients: f.kind === "Email" ? list(f.recipients) : void 0,
+			events,
+			ruleKeys: list(f.ruleKeys),
+			environments: list(f.environments).map((e) => e.toLowerCase()),
+			minimumSeverity: f.minimumSeverity,
+			groupWindowSeconds: f.groupWindowSeconds || 0,
+			enabled: f.enabled
+		};
+		this.run(f.id ? this.api.updateChannel(f.id, body) : this.api.createChannel(body), (m) => this.channelError.set(m), () => this.channel.set(null));
+	}
+	editPolicy(p) {
+		this.policyError.set("");
+		this.policy.set({
+			editing: true,
+			key: p.key,
+			name: p.name,
+			ruleKeys: p.ruleKeys.join(", "),
+			environments: p.environments.join(", "),
+			minimumSeverity: p.minimumSeverity,
+			stopOnAcknowledge: p.stopOnAcknowledge,
+			enabled: p.enabled,
+			steps: p.steps.map((s) => `${s.afterMinutes}: ${s.endpointKeys.join(", ")}`).join("\n")
+		});
+	}
+	parseSteps(text) {
+		return text.split("\n").map((l) => l.trim()).filter(Boolean).map((line) => {
+			const [minutes, ...rest] = line.split(":");
+			return {
+				afterMinutes: Number(minutes.trim()),
+				endpointKeys: list(rest.join(":"))
+			};
+		});
+	}
+	savePolicy(f) {
+		const body = {
+			key: f.key,
+			name: f.name,
+			enabled: f.enabled,
+			ruleKeys: list(f.ruleKeys),
+			environments: list(f.environments).map((e) => e.toLowerCase()),
+			minimumSeverity: f.minimumSeverity,
+			stopOnAcknowledge: f.stopOnAcknowledge,
+			steps: this.parseSteps(f.steps)
+		};
+		this.run(f.editing ? this.api.updateEscalationPolicy(f.key, body) : this.api.createEscalationPolicy(body), (m) => this.policyError.set(m), () => this.policy.set(null));
+	}
+	addAllowed() {
+		this.run(this.api.putAllowlist(this.destination.trim(), list(this.ports).map(Number)), (m) => this.allowError.set(m), () => {
+			this.destination = "";
+			this.ports = "";
+		});
+	}
+	removeAllowed(destination) {
+		this.run(this.api.removeAllowlist(destination), (m) => this.allowError.set(m), () => void 0);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: NotificationsPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: NotificationsPage,
+		isStandalone: true,
+		selector: "ng-component",
+		ngImport: i0,
+		template: `
+    <jc-context-bar><h1>Notifications</h1></jc-context-bar>
+    @if (data.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (data.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    <section class="jc-card">
+      <h2>Channels <button mat-button type="button" data-testid="channel-new" (click)="channel.set(newChannel())">New channel</button></h2>
+      @if (channel(); as f) {
+        <form class="jc-form" data-testid="channel-form" (ngSubmit)="saveChannel(f)">
+          @if (!f.id) {
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Key</mat-label><input matInput name="key" [(ngModel)]="f.key" required></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Kind</mat-label>
+              <mat-select name="kind" [(ngModel)]="f.kind"><mat-option value="Slack">Slack</mat-option><mat-option value="Teams">Teams</mat-option><mat-option value="Email">Email</mat-option><mat-option value="Webhook">Signed webhook</mat-option></mat-select>
+            </mat-form-field>
+          }
+          @if (f.kind === 'Webhook') { <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>{{ f.id ? 'New URL (keeps the current one if empty)' : 'URL' }}</mat-label><input matInput name="url" [(ngModel)]="f.url"></mat-form-field> }
+          @if (f.kind === 'Email') { <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Recipients, comma separated</mat-label><input matInput name="recipients" [(ngModel)]="f.recipients"></mat-form-field> }
+          @else {
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>{{ f.kind === 'Webhook' ? 'Signing secret reference' : 'Reference to the channel URL' }}</mat-label><input matInput name="secretRef" [(ngModel)]="f.secretRef" placeholder="env:JUICE_WEBHOOK_OPS"></mat-form-field>
+            <p class="jc-muted jc-small jc-form-actions">{{ f.kind === 'Webhook' ? 'The name of where the signing secret is, set on the host.' : 'A Slack or Teams URL is itself a credential, so it stays on the host: this is the name of where it is.' }} Not the secret itself.</p>
+          }
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these rules</mat-label><input matInput name="ruleKeys" [(ngModel)]="f.ruleKeys"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these environments</mat-label><input matInput name="environments" [(ngModel)]="f.environments"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Severity at least</mat-label>
+            <mat-select name="minimumSeverity" [(ngModel)]="f.minimumSeverity"><mat-option value="Info">Info</mat-option><mat-option value="Warning">Warning</mat-option><mat-option value="Critical">Critical</mat-option></mat-select>
+          </mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Group for (s)</mat-label><input matInput type="number" min="0" max="3600" name="group" [(ngModel)]="f.groupWindowSeconds"></mat-form-field>
+          <mat-checkbox name="firing" [(ngModel)]="f.firing">Firing</mat-checkbox>
+          <mat-checkbox name="resolved" [(ngModel)]="f.resolved">Resolved</mat-checkbox>
+          <mat-checkbox name="enabled" [(ngModel)]="f.enabled">Enabled</mat-checkbox>
+          <div class="jc-form-actions">
+            <button mat-flat-button type="submit" data-testid="channel-save" [disabled]="saving()">Save</button>
+            <button mat-button type="button" (click)="channel.set(null)">Cancel</button>
+            @if (channelError()) { <span class="jc-error" data-testid="channel-error">{{ channelError() }}</span> }
+          </div>
+        </form>
+      }
+      <table class="jc-table" data-testid="channels">
+        <thead><tr><th>Channel</th><th>Kind</th><th>Destination</th><th>Takes</th><th>Failed (24 h)</th><th>Waiting</th><th></th></tr></thead>
+        <tbody>
+          @for (c of channels(); track c.id) {
+            <tr [class.jc-muted]="!c.enabled">
+              <td><strong>{{ c.key }}</strong><div class="jc-muted jc-small">@if (!c.enabled) { disabled · }@if (c.managedBy === 'config') { from the webhooks file }</div></td>
+              <td>{{ c.kind }}</td>
+              <td>{{ c.destination }}</td>
+              <td class="jc-small">{{ c.minimumSeverity }} and above@if (c.environments.length) { · {{ c.environments.join(', ') }} }@if (c.ruleKeys.length) { · {{ c.ruleKeys.join(', ') }} }@if (c.groupWindowSeconds) { · grouped {{ c.groupWindowSeconds }} s }</td>
+              <td [class.jc-bad]="c.recentFailures > 0">{{ c.recentFailures }}</td>
+              <td>{{ c.waiting }}</td>
+              <td class="jc-row-actions">
+                <button mat-button type="button" [attr.data-testid]="'channel-history-' + c.key" (click)="history.set(history() === c.id ? null : c.id)">History</button>
+                @if (c.managedBy !== 'config') { <button mat-button type="button" [attr.data-testid]="'channel-edit-' + c.key" (click)="editChannel(c)">Change</button> }
+              </td>
+            </tr>
+          } @empty { <tr><td colspan="7" class="jc-muted">No channels: alerts fire, but nobody is told.</td></tr> }
+        </tbody>
+      </table>
+      @if (history()) {
+        <h3>Delivery history</h3>
+        @if (deliveries.error()) { <p class="jc-error">{{ deliveriesError() }}</p> }
+        <table class="jc-table" data-testid="channel-history">
+          <thead><tr><th>Created</th><th>Event</th><th>Status</th><th>Attempts</th><th>Last result</th></tr></thead>
+          <tbody>
+            @for (d of deliveries.value()?.items ?? []; track d.id) {
+              <tr>
+                <td class="jc-nowrap">{{ d.createdAt | date: 'MMM d, HH:mm:ss' }}</td>
+                <td>{{ d.event }}@if (d.escalationStep) { step {{ d.escalationStep }} }</td>
+                <td [class.jc-bad]="d.status === 'Failed'">{{ d.status }}</td>
+                <td>{{ d.attempts }}</td>
+                <td class="jc-small">{{ d.lastError ?? (d.lastStatusCode ? 'HTTP ' + d.lastStatusCode : '') }}</td>
+              </tr>
+            } @empty { <tr><td colspan="5" class="jc-muted">Nothing sent yet.</td></tr> }
+          </tbody>
+        </table>
+      }
+    </section>
+
+    <section class="jc-card">
+      <h2>Escalation <button mat-button type="button" data-testid="policy-new" (click)="policy.set(newPolicy())">New policy</button></h2>
+      @if (policy(); as f) {
+        <form class="jc-form" data-testid="policy-form" (ngSubmit)="savePolicy(f)">
+          @if (!f.editing) { <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Key</mat-label><input matInput name="key" [(ngModel)]="f.key" required></mat-form-field> }
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Name</mat-label><input matInput name="name" [(ngModel)]="f.name" required></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Steps, one a line</mat-label><textarea matInput name="steps" rows="3" [(ngModel)]="f.steps" placeholder="5: oncall-slack&#10;15: pager, lead-email"></textarea></mat-form-field>
+          <p class="jc-muted jc-small jc-form-actions">Minutes after firing, then the channels to tell if the alert is still open.</p>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these rules</mat-label><input matInput name="ruleKeys" [(ngModel)]="f.ruleKeys"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these environments</mat-label><input matInput name="environments" [(ngModel)]="f.environments"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Severity at least</mat-label>
+            <mat-select name="minimumSeverity" [(ngModel)]="f.minimumSeverity"><mat-option value="Info">Info</mat-option><mat-option value="Warning">Warning</mat-option><mat-option value="Critical">Critical</mat-option></mat-select>
+          </mat-form-field>
+          <mat-checkbox name="stop" [(ngModel)]="f.stopOnAcknowledge">Stop when acknowledged</mat-checkbox>
+          <mat-checkbox name="policyEnabled" [(ngModel)]="f.enabled">Enabled</mat-checkbox>
+          <div class="jc-form-actions">
+            <button mat-flat-button type="submit" data-testid="policy-save" [disabled]="saving()">Save</button>
+            <button mat-button type="button" (click)="policy.set(null)">Cancel</button>
+            @if (policyError()) { <span class="jc-error" data-testid="policy-error">{{ policyError() }}</span> }
+          </div>
+        </form>
+      }
+      <table class="jc-table" data-testid="policies">
+        <thead><tr><th>Policy</th><th>Steps</th><th>Applies to</th><th>Stops when</th><th></th></tr></thead>
+        <tbody>
+          @for (p of policies(); track p.id) {
+            <tr [class.jc-muted]="!p.enabled">
+              <td><strong>{{ p.name }}</strong><div class="jc-muted jc-small">{{ p.key }}@if (!p.enabled) { · disabled }</div></td>
+              <td class="jc-small">@for (s of p.steps; track s.afterMinutes) { <div>{{ s.afterMinutes }} min: {{ s.endpointKeys.join(', ') }}</div> }</td>
+              <td class="jc-small">{{ p.minimumSeverity }} and above@if (p.environments.length) { · {{ p.environments.join(', ') }} }@if (p.ruleKeys.length) { · {{ p.ruleKeys.join(', ') }} }</td>
+              <td class="jc-small">{{ p.stopOnAcknowledge ? 'Acknowledged or resolved' : 'Resolved' }}</td>
+              <td class="jc-row-actions"><button mat-button type="button" (click)="editPolicy(p)">Change</button></td>
+            </tr>
+          } @empty { <tr><td colspan="5" class="jc-muted">No policies: a firing alert notifies once.</td></tr> }
+        </tbody>
+      </table>
+    </section>
+
+    <section class="jc-card">
+      <h2>Private destinations</h2>
+      <p class="jc-muted jc-small">A channel may reach a private address only if it's listed here. Loopback, link-local and cloud metadata addresses are never reachable.</p>
+      <form class="jc-form" (ngSubmit)="addAllowed()">
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>CIDR or host name</mat-label><input matInput name="destination" data-testid="allow-destination" [(ngModel)]="destination"></mat-form-field>
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-md"><mat-label>Ports (443 if empty)</mat-label><input matInput name="ports" data-testid="allow-ports" [(ngModel)]="ports"></mat-form-field>
+        <button mat-stroked-button type="submit" data-testid="allow-add" [disabled]="saving()">Allow</button>
+        @if (allowError()) { <span class="jc-error" data-testid="allow-error">{{ allowError() }}</span> }
+      </form>
+      <table class="jc-table" data-testid="allowlist">
+        <tbody>
+          @for (a of allowed(); track a.destination) {
+            <tr>
+              <td><strong>{{ a.destination }}</strong> @if (a.managedBy === 'config') { <span class="jc-muted jc-small">from the webhooks file</span> }</td>
+              <td>{{ a.ports.length ? a.ports.join(', ') : '443' }}</td>
+              <td class="jc-row-actions">@if (a.managedBy !== 'config') { <button mat-button type="button" (click)="removeAllowed(a.destination)">Remove</button> }</td>
+            </tr>
+          } @empty { <tr><td class="jc-muted">None: channels reach public addresses only.</td></tr> }
+        </tbody>
+      </table>
+    </section>`,
+		isInline: true,
+		dependencies: [
+			{
+				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.NumberValueAccessor,
+				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
+			},
+			{
+				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.RequiredValidator,
+				selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+				inputs: ["required"]
+			},
+			{
+				kind: "directive",
+				type: i1.MinValidator,
+				selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",
+				inputs: ["min"]
+			},
+			{
+				kind: "directive",
+				type: i1.MaxValidator,
+				selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",
+				inputs: ["max"]
+			},
+			{
+				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: MatCheckboxModule
+			},
+			{
+				kind: "component",
+				type: i3.MatCheckbox,
+				selector: "mat-checkbox",
+				inputs: [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls",
+					"aria-owns",
+					"id",
+					"required",
+					"labelPosition",
+					"name",
+					"value",
+					"disableRipple",
+					"tabIndex",
+					"color",
+					"disabledInteractive",
+					"checked",
+					"disabled",
+					"indeterminate"
+				],
+				outputs: ["change", "indeterminateChange"],
+				exportAs: ["matCheckbox"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i4.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i4.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i5.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: i6.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i4.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: i4.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: NotificationsPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				DatePipe,
+				FormsModule,
+				MatButtonModule,
+				MatCheckboxModule,
+				MatFormFieldModule,
+				MatInputModule,
+				MatProgressBarModule,
+				MatSelectModule,
+				ContextBar
+			],
+			template: `
+    <jc-context-bar><h1>Notifications</h1></jc-context-bar>
+    @if (data.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (data.error()) { <p class="jc-error">{{ error() }}</p> }
+
+    <section class="jc-card">
+      <h2>Channels <button mat-button type="button" data-testid="channel-new" (click)="channel.set(newChannel())">New channel</button></h2>
+      @if (channel(); as f) {
+        <form class="jc-form" data-testid="channel-form" (ngSubmit)="saveChannel(f)">
+          @if (!f.id) {
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Key</mat-label><input matInput name="key" [(ngModel)]="f.key" required></mat-form-field>
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Kind</mat-label>
+              <mat-select name="kind" [(ngModel)]="f.kind"><mat-option value="Slack">Slack</mat-option><mat-option value="Teams">Teams</mat-option><mat-option value="Email">Email</mat-option><mat-option value="Webhook">Signed webhook</mat-option></mat-select>
+            </mat-form-field>
+          }
+          @if (f.kind === 'Webhook') { <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>{{ f.id ? 'New URL (keeps the current one if empty)' : 'URL' }}</mat-label><input matInput name="url" [(ngModel)]="f.url"></mat-form-field> }
+          @if (f.kind === 'Email') { <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Recipients, comma separated</mat-label><input matInput name="recipients" [(ngModel)]="f.recipients"></mat-form-field> }
+          @else {
+            <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>{{ f.kind === 'Webhook' ? 'Signing secret reference' : 'Reference to the channel URL' }}</mat-label><input matInput name="secretRef" [(ngModel)]="f.secretRef" placeholder="env:JUICE_WEBHOOK_OPS"></mat-form-field>
+            <p class="jc-muted jc-small jc-form-actions">{{ f.kind === 'Webhook' ? 'The name of where the signing secret is, set on the host.' : 'A Slack or Teams URL is itself a credential, so it stays on the host: this is the name of where it is.' }} Not the secret itself.</p>
+          }
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these rules</mat-label><input matInput name="ruleKeys" [(ngModel)]="f.ruleKeys"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these environments</mat-label><input matInput name="environments" [(ngModel)]="f.environments"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Severity at least</mat-label>
+            <mat-select name="minimumSeverity" [(ngModel)]="f.minimumSeverity"><mat-option value="Info">Info</mat-option><mat-option value="Warning">Warning</mat-option><mat-option value="Critical">Critical</mat-option></mat-select>
+          </mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Group for (s)</mat-label><input matInput type="number" min="0" max="3600" name="group" [(ngModel)]="f.groupWindowSeconds"></mat-form-field>
+          <mat-checkbox name="firing" [(ngModel)]="f.firing">Firing</mat-checkbox>
+          <mat-checkbox name="resolved" [(ngModel)]="f.resolved">Resolved</mat-checkbox>
+          <mat-checkbox name="enabled" [(ngModel)]="f.enabled">Enabled</mat-checkbox>
+          <div class="jc-form-actions">
+            <button mat-flat-button type="submit" data-testid="channel-save" [disabled]="saving()">Save</button>
+            <button mat-button type="button" (click)="channel.set(null)">Cancel</button>
+            @if (channelError()) { <span class="jc-error" data-testid="channel-error">{{ channelError() }}</span> }
+          </div>
+        </form>
+      }
+      <table class="jc-table" data-testid="channels">
+        <thead><tr><th>Channel</th><th>Kind</th><th>Destination</th><th>Takes</th><th>Failed (24 h)</th><th>Waiting</th><th></th></tr></thead>
+        <tbody>
+          @for (c of channels(); track c.id) {
+            <tr [class.jc-muted]="!c.enabled">
+              <td><strong>{{ c.key }}</strong><div class="jc-muted jc-small">@if (!c.enabled) { disabled · }@if (c.managedBy === 'config') { from the webhooks file }</div></td>
+              <td>{{ c.kind }}</td>
+              <td>{{ c.destination }}</td>
+              <td class="jc-small">{{ c.minimumSeverity }} and above@if (c.environments.length) { · {{ c.environments.join(', ') }} }@if (c.ruleKeys.length) { · {{ c.ruleKeys.join(', ') }} }@if (c.groupWindowSeconds) { · grouped {{ c.groupWindowSeconds }} s }</td>
+              <td [class.jc-bad]="c.recentFailures > 0">{{ c.recentFailures }}</td>
+              <td>{{ c.waiting }}</td>
+              <td class="jc-row-actions">
+                <button mat-button type="button" [attr.data-testid]="'channel-history-' + c.key" (click)="history.set(history() === c.id ? null : c.id)">History</button>
+                @if (c.managedBy !== 'config') { <button mat-button type="button" [attr.data-testid]="'channel-edit-' + c.key" (click)="editChannel(c)">Change</button> }
+              </td>
+            </tr>
+          } @empty { <tr><td colspan="7" class="jc-muted">No channels: alerts fire, but nobody is told.</td></tr> }
+        </tbody>
+      </table>
+      @if (history()) {
+        <h3>Delivery history</h3>
+        @if (deliveries.error()) { <p class="jc-error">{{ deliveriesError() }}</p> }
+        <table class="jc-table" data-testid="channel-history">
+          <thead><tr><th>Created</th><th>Event</th><th>Status</th><th>Attempts</th><th>Last result</th></tr></thead>
+          <tbody>
+            @for (d of deliveries.value()?.items ?? []; track d.id) {
+              <tr>
+                <td class="jc-nowrap">{{ d.createdAt | date: 'MMM d, HH:mm:ss' }}</td>
+                <td>{{ d.event }}@if (d.escalationStep) { step {{ d.escalationStep }} }</td>
+                <td [class.jc-bad]="d.status === 'Failed'">{{ d.status }}</td>
+                <td>{{ d.attempts }}</td>
+                <td class="jc-small">{{ d.lastError ?? (d.lastStatusCode ? 'HTTP ' + d.lastStatusCode : '') }}</td>
+              </tr>
+            } @empty { <tr><td colspan="5" class="jc-muted">Nothing sent yet.</td></tr> }
+          </tbody>
+        </table>
+      }
+    </section>
+
+    <section class="jc-card">
+      <h2>Escalation <button mat-button type="button" data-testid="policy-new" (click)="policy.set(newPolicy())">New policy</button></h2>
+      @if (policy(); as f) {
+        <form class="jc-form" data-testid="policy-form" (ngSubmit)="savePolicy(f)">
+          @if (!f.editing) { <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Key</mat-label><input matInput name="key" [(ngModel)]="f.key" required></mat-form-field> }
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Name</mat-label><input matInput name="name" [(ngModel)]="f.name" required></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>Steps, one a line</mat-label><textarea matInput name="steps" rows="3" [(ngModel)]="f.steps" placeholder="5: oncall-slack&#10;15: pager, lead-email"></textarea></mat-form-field>
+          <p class="jc-muted jc-small jc-form-actions">Minutes after firing, then the channels to tell if the alert is still open.</p>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these rules</mat-label><input matInput name="ruleKeys" [(ngModel)]="f.ruleKeys"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic"><mat-label>Only these environments</mat-label><input matInput name="environments" [(ngModel)]="f.environments"></mat-form-field>
+          <mat-form-field subscriptSizing="dynamic" class="jc-field-sm"><mat-label>Severity at least</mat-label>
+            <mat-select name="minimumSeverity" [(ngModel)]="f.minimumSeverity"><mat-option value="Info">Info</mat-option><mat-option value="Warning">Warning</mat-option><mat-option value="Critical">Critical</mat-option></mat-select>
+          </mat-form-field>
+          <mat-checkbox name="stop" [(ngModel)]="f.stopOnAcknowledge">Stop when acknowledged</mat-checkbox>
+          <mat-checkbox name="policyEnabled" [(ngModel)]="f.enabled">Enabled</mat-checkbox>
+          <div class="jc-form-actions">
+            <button mat-flat-button type="submit" data-testid="policy-save" [disabled]="saving()">Save</button>
+            <button mat-button type="button" (click)="policy.set(null)">Cancel</button>
+            @if (policyError()) { <span class="jc-error" data-testid="policy-error">{{ policyError() }}</span> }
+          </div>
+        </form>
+      }
+      <table class="jc-table" data-testid="policies">
+        <thead><tr><th>Policy</th><th>Steps</th><th>Applies to</th><th>Stops when</th><th></th></tr></thead>
+        <tbody>
+          @for (p of policies(); track p.id) {
+            <tr [class.jc-muted]="!p.enabled">
+              <td><strong>{{ p.name }}</strong><div class="jc-muted jc-small">{{ p.key }}@if (!p.enabled) { · disabled }</div></td>
+              <td class="jc-small">@for (s of p.steps; track s.afterMinutes) { <div>{{ s.afterMinutes }} min: {{ s.endpointKeys.join(', ') }}</div> }</td>
+              <td class="jc-small">{{ p.minimumSeverity }} and above@if (p.environments.length) { · {{ p.environments.join(', ') }} }@if (p.ruleKeys.length) { · {{ p.ruleKeys.join(', ') }} }</td>
+              <td class="jc-small">{{ p.stopOnAcknowledge ? 'Acknowledged or resolved' : 'Resolved' }}</td>
+              <td class="jc-row-actions"><button mat-button type="button" (click)="editPolicy(p)">Change</button></td>
+            </tr>
+          } @empty { <tr><td colspan="5" class="jc-muted">No policies: a firing alert notifies once.</td></tr> }
+        </tbody>
+      </table>
+    </section>
+
+    <section class="jc-card">
+      <h2>Private destinations</h2>
+      <p class="jc-muted jc-small">A channel may reach a private address only if it's listed here. Loopback, link-local and cloud metadata addresses are never reachable.</p>
+      <form class="jc-form" (ngSubmit)="addAllowed()">
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-wide"><mat-label>CIDR or host name</mat-label><input matInput name="destination" data-testid="allow-destination" [(ngModel)]="destination"></mat-form-field>
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-md"><mat-label>Ports (443 if empty)</mat-label><input matInput name="ports" data-testid="allow-ports" [(ngModel)]="ports"></mat-form-field>
+        <button mat-stroked-button type="submit" data-testid="allow-add" [disabled]="saving()">Allow</button>
+        @if (allowError()) { <span class="jc-error" data-testid="allow-error">{{ allowError() }}</span> }
+      </form>
+      <table class="jc-table" data-testid="allowlist">
+        <tbody>
+          @for (a of allowed(); track a.destination) {
+            <tr>
+              <td><strong>{{ a.destination }}</strong> @if (a.managedBy === 'config') { <span class="jc-muted jc-small">from the webhooks file</span> }</td>
+              <td>{{ a.ports.length ? a.ports.join(', ') : '443' }}</td>
+              <td class="jc-row-actions">@if (a.managedBy !== 'config') { <button mat-button type="button" (click)="removeAllowed(a.destination)">Remove</button> }</td>
+            </tr>
+          } @empty { <tr><td class="jc-muted">None: channels reach public addresses only.</td></tr> }
+        </tbody>
+      </table>
+    </section>`
+		}]
+	}]
+});
+export { NotificationsPage };
+
+//# sourceMappingURL=juice-js-observability-notifications.page-BDqb10C6.mjs.map