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

package/fesm2022/juice-js-observability-resource.page-D6qpvo_f.mjs

@@ -0,0 +1,274 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { _ as ReasonPipe, a as problemText, c as ConfidenceBadge, d as KeyValueTable, i as TraceTable, l as ContextBar, m as AgoPipe, n as MetricExplorer, t as LogTable, u as HealthBadge, 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 { RouterLink } from "@angular/router";
+import * as i1 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+var ResourcePage = class ResourcePage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	resource = apiResource({
+		params: () => this.id(),
+		stream: ({ params }) => this.api.resource(params)
+	});
+	topology = apiResource({
+		params: () => this.ctx.environment(),
+		stream: ({ params }) => this.api.topology(params || null)
+	});
+	error = computed(() => problemText(this.resource.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	isInfrastructure = computed(() => [
+		"host",
+		"container",
+		"k8s-pod"
+	].includes(this.resource.value()?.type ?? ""), ...ngDevMode ? [{ debugName: "isInfrastructure" }] : /* istanbul ignore next */ []);
+	users = computed(() => (this.topology.value()?.edges ?? []).filter((e) => e.target === this.id()), ...ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []);
+	reasonPipe = new ReasonPipe();
+	reason = (r) => this.reasonPipe.transform(r);
+	name(id) {
+		return this.topology.value()?.nodes.find((n) => n.id === id)?.displayName ?? id;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ResourcePage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ResourcePage,
+		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]="['resources'] | jcLink" [queryParams]="ctx.keep({ type: resource.value()?.type })" class="jc-crumb">Resources</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1>{{ resource.value()?.displayName ?? '…' }}</h1>
+      <span class="jc-muted">{{ resource.value()?.type }}</span>
+    </jc-context-bar>
+    @if (resource.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (resource.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (resource.value(); as r) {
+      <div class="jc-grid-2">
+        <section class="jc-card">
+          <h2>Identity</h2>
+          <jc-kv [values]="{ key: r.key, 'first seen': r.firstSeen, 'last seen': r.lastSeen }" />
+          <jc-kv [values]="r.attributes" empty="" />
+          @for (h of r.health; track h.subjectId) {
+            <p><jc-health [state]="h.state" [stale]="h.stale" /> {{ h.reasons.map(reason).join(' · ') }}</p>
+          }
+        </section>
+        <section class="jc-card">
+          @if (isInfrastructure()) {
+            <h2>Instances running here</h2>
+            @for (i of r.instances; track i.id) {
+              <div class="jc-list-row"><jc-health [state]="i.health" /><span>{{ i.instanceKey }}</span>
+                <span class="jc-muted">{{ i.environment }}</span><span class="jc-muted">{{ i.lastSeen | ago }}</span></div>
+            } @empty { <p class="jc-muted">No service instances seen on it.</p> }
+          } @else {
+            <h2>Used by</h2>
+            @for (e of users(); track e.id) {
+              <div class="jc-list-row"><a [routerLink]="['services', e.source] | jcLink" [queryParams]="ctx.keep()">{{ name(e.source) }}</a>
+                <span>{{ e.relation }}</span><jc-confidence [confidence]="e.confidence" />
+                <a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: e.id })">evidence</a></div>
+            } @empty { <p class="jc-muted">No users seen{{ ctx.environment() ? ' in ' + ctx.environment() : '' }}.</p> }
+          }
+        </section>
+      </div>
+      @if (isInfrastructure()) {
+        <h2>Metrics</h2>
+        <jc-metric-explorer [scope]="{ resourceId: id() }" />
+        <h2>Logs</h2>
+        <jc-log-table [query]="{ resourceId: id() }" />
+      } @else {
+        <h2>Traces that reach it</h2>
+        <jc-trace-table [query]="{ resourceId: id() }" />
+      }
+    }`,
+		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: "component",
+				type: ConfidenceBadge,
+				selector: "jc-confidence",
+				inputs: ["confidence"]
+			},
+			{
+				kind: "component",
+				type: KeyValueTable,
+				selector: "jc-kv",
+				inputs: ["values", "empty"]
+			},
+			{
+				kind: "component",
+				type: TraceTable,
+				selector: "jc-trace-table",
+				inputs: ["query", "limit"]
+			},
+			{
+				kind: "component",
+				type: LogTable,
+				selector: "jc-log-table",
+				inputs: ["query", "compact"]
+			},
+			{
+				kind: "component",
+				type: MetricExplorer,
+				selector: "jc-metric-explorer",
+				inputs: ["scope", "initial"]
+			},
+			{
+				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: ResourcePage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				MatProgressBarModule,
+				ContextBar,
+				HealthBadge,
+				ConfidenceBadge,
+				KeyValueTable,
+				TraceTable,
+				LogTable,
+				MetricExplorer,
+				AgoPipe
+			],
+			template: `
+    <jc-context-bar>
+      <a [routerLink]="['resources'] | jcLink" [queryParams]="ctx.keep({ type: resource.value()?.type })" class="jc-crumb">Resources</a>
+      <span class="jc-crumb-sep">›</span>
+      <h1>{{ resource.value()?.displayName ?? '…' }}</h1>
+      <span class="jc-muted">{{ resource.value()?.type }}</span>
+    </jc-context-bar>
+    @if (resource.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (resource.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (resource.value(); as r) {
+      <div class="jc-grid-2">
+        <section class="jc-card">
+          <h2>Identity</h2>
+          <jc-kv [values]="{ key: r.key, 'first seen': r.firstSeen, 'last seen': r.lastSeen }" />
+          <jc-kv [values]="r.attributes" empty="" />
+          @for (h of r.health; track h.subjectId) {
+            <p><jc-health [state]="h.state" [stale]="h.stale" /> {{ h.reasons.map(reason).join(' · ') }}</p>
+          }
+        </section>
+        <section class="jc-card">
+          @if (isInfrastructure()) {
+            <h2>Instances running here</h2>
+            @for (i of r.instances; track i.id) {
+              <div class="jc-list-row"><jc-health [state]="i.health" /><span>{{ i.instanceKey }}</span>
+                <span class="jc-muted">{{ i.environment }}</span><span class="jc-muted">{{ i.lastSeen | ago }}</span></div>
+            } @empty { <p class="jc-muted">No service instances seen on it.</p> }
+          } @else {
+            <h2>Used by</h2>
+            @for (e of users(); track e.id) {
+              <div class="jc-list-row"><a [routerLink]="['services', e.source] | jcLink" [queryParams]="ctx.keep()">{{ name(e.source) }}</a>
+                <span>{{ e.relation }}</span><jc-confidence [confidence]="e.confidence" />
+                <a [routerLink]="['topology'] | jcLink" [queryParams]="ctx.keep({ edge: e.id })">evidence</a></div>
+            } @empty { <p class="jc-muted">No users seen{{ ctx.environment() ? ' in ' + ctx.environment() : '' }}.</p> }
+          }
+        </section>
+      </div>
+      @if (isInfrastructure()) {
+        <h2>Metrics</h2>
+        <jc-metric-explorer [scope]="{ resourceId: id() }" />
+        <h2>Logs</h2>
+        <jc-log-table [query]="{ resourceId: id() }" />
+      } @else {
+        <h2>Traces that reach it</h2>
+        <jc-trace-table [query]="{ resourceId: id() }" />
+      }
+    }`
+		}]
+	}],
+	propDecorators: { id: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "id",
+			required: true
+		}]
+	}] }
+});
+export { ResourcePage };
+
+//# sourceMappingURL=juice-js-observability-resource.page-D6qpvo_f.mjs.map

package/fesm2022/juice-js-observability-resource.page-D6qpvo_f.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-resource.page-D6qpvo_f.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/resource.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { apiResource } from '../shared/resource';\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 { ConfidenceBadge, ContextBar, HealthBadge, KeyValueTable } from '../shared/ui';\nimport { LogTable, MetricExplorer, TraceTable, problemText } from '../shared/telemetry';\n\n/**\n * A host, container, pod, database or destination (Console requirements §11): what runs on it or who uses it, its\n * health, and its telemetry. A database or destination has traces (the calls to it) but no logs or metrics of its own.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LinkPipe, RouterLink, MatProgressBarModule, ContextBar, HealthBadge, ConfidenceBadge, KeyValueTable, TraceTable, LogTable,\n    MetricExplorer, AgoPipe],\n  template: `\n    <jc-context-bar>\n      <a [routerLink]=\"['resources'] | jcLink\" [queryParams]=\"ctx.keep({ type: resource.value()?.type })\" class=\"jc-crumb\">Resources</a>\n      <span class=\"jc-crumb-sep\">›</span>\n      <h1>{{ resource.value()?.displayName ?? '…' }}</h1>\n      <span class=\"jc-muted\">{{ resource.value()?.type }}</span>\n    </jc-context-bar>\n    @if (resource.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (resource.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n    @if (resource.value(); as r) {\n      <div class=\"jc-grid-2\">\n        <section class=\"jc-card\">\n          <h2>Identity</h2>\n          <jc-kv [values]=\"{ key: r.key, 'first seen': r.firstSeen, 'last seen': r.lastSeen }\" />\n          <jc-kv [values]=\"r.attributes\" empty=\"\" />\n          @for (h of r.health; track h.subjectId) {\n            <p><jc-health [state]=\"h.state\" [stale]=\"h.stale\" /> {{ h.reasons.map(reason).join(' · ') }}</p>\n          }\n        </section>\n        <section class=\"jc-card\">\n          @if (isInfrastructure()) {\n            <h2>Instances running here</h2>\n            @for (i of r.instances; track i.id) {\n              <div class=\"jc-list-row\"><jc-health [state]=\"i.health\" /><span>{{ i.instanceKey }}</span>\n                <span class=\"jc-muted\">{{ i.environment }}</span><span class=\"jc-muted\">{{ i.lastSeen | ago }}</span></div>\n            } @empty { <p class=\"jc-muted\">No service instances seen on it.</p> }\n          } @else {\n            <h2>Used by</h2>\n            @for (e of users(); track e.id) {\n              <div class=\"jc-list-row\"><a [routerLink]=\"['services', e.source] | jcLink\" [queryParams]=\"ctx.keep()\">{{ name(e.source) }}</a>\n                <span>{{ e.relation }}</span><jc-confidence [confidence]=\"e.confidence\" />\n                <a [routerLink]=\"['topology'] | jcLink\" [queryParams]=\"ctx.keep({ edge: e.id })\">evidence</a></div>\n            } @empty { <p class=\"jc-muted\">No users seen{{ ctx.environment() ? ' in ' + ctx.environment() : '' }}.</p> }\n          }\n        </section>\n      </div>\n      @if (isInfrastructure()) {\n        <h2>Metrics</h2>\n        <jc-metric-explorer [scope]=\"{ resourceId: id() }\" />\n        <h2>Logs</h2>\n        <jc-log-table [query]=\"{ resourceId: id() }\" />\n      } @else {\n        <h2>Traces that reach it</h2>\n        <jc-trace-table [query]=\"{ resourceId: id() }\" />\n      }\n    }`,\n})\nexport class ResourcePage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  readonly id = input.required<string>();\n\n  protected readonly resource = apiResource({ params: () => this.id(), stream: ({ params }) => this.api.resource(params) });\n  protected readonly topology = apiResource({ params: () => this.ctx.environment(), stream: ({ params }) => this.api.topology(params || null) });\n  protected readonly error = computed(() => problemText(this.resource.error()));\n  protected readonly isInfrastructure = computed(() => ['host', 'container', 'k8s-pod'].includes(this.resource.value()?.type ?? ''));\n  protected readonly users = computed(() => (this.topology.value()?.edges ?? []).filter(e => e.target === this.id()));\n  private readonly reasonPipe = new ReasonPipe();\n  protected readonly reason = (r: string) => this.reasonPipe.transform(r);\n\n  name(id: string) { return this.topology.value()?.nodes.find(n => n.id === id)?.displayName ?? id; }\n}\n"],"mappings":"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"}

package/fesm2022/juice-js-observability-resources.page-CR7-DFsh.mjs

@@ -0,0 +1,209 @@
+import { ApiService, ContextService, LinkPipe } from "./juice-js-observability.mjs";
+import { a as problemText, l as ContextBar, m as AgoPipe, s as screenPages, x as apiResource } from "./juice-js-observability-telemetry-D9EYxkdr.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import * as i2 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i1 from "@angular/material/paginator";
+import { MatPaginatorModule } from "@angular/material/paginator";
+const TYPES = [
+	"host",
+	"container",
+	"k8s-pod",
+	"database",
+	"messaging-destination"
+];
+var ResourcesPage = class ResourcesPage {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	types = TYPES;
+	type = input(...ngDevMode ? [void 0, { debugName: "type" }] : /* istanbul ignore next */ []);
+	filter = signal("", ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+	resources = apiResource({
+		params: () => this.type() ?? "host",
+		stream: ({ params }) => this.api.resources(params)
+	});
+	error = computed(() => problemText(this.resources.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	capped = computed(() => (this.resources.value()?.nextCursor ?? null) !== null, ...ngDevMode ? [{ debugName: "capped" }] : /* istanbul ignore next */ []);
+	rows = computed(() => (this.resources.value()?.items ?? []).filter((r) => !this.filter() || `${r.displayName} ${r.key}`.toLowerCase().includes(this.filter().toLowerCase())), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	pages = screenPages(this.rows);
+	onSearch(query) {
+		this.filter.set(query);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ResourcesPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ResourcesPage,
+		isStandalone: true,
+		selector: "ng-component",
+		inputs: { type: {
+			classPropertyName: "type",
+			publicName: "type",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <jc-context-bar><h1>Resources</h1>
+      @for (t of types; track t) {
+        <a class="jc-chip" [class.jc-selected]="t === (type() ?? 'host')" [routerLink]="['resources'] | jcLink" [queryParams]="ctx.keep({ type: t })">{{ t }}</a>
+      }
+    </jc-context-bar>
+    @if (resources.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (resources.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (capped()) { <p class="jc-notice">Showing the first 5,000 only. Narrow the list with the search box or a filter.</p> }
+    <table class="jc-table">
+      <thead><tr><th>Name</th><th>Key</th><th>First seen</th><th>Last seen</th></tr></thead>
+      <tbody>
+        @for (r of pages.visible(); track r.id) {
+          <tr><td><a [routerLink]="['resources', r.id] | jcLink" [queryParams]="ctx.keep()">{{ r.displayName }}</a></td>
+              <td class="jc-mono jc-small">{{ r.key }}</td><td>{{ r.firstSeen | ago }}</td><td>{{ r.lastSeen | ago }}</td></tr>
+        } @empty { <tr><td colspan="4" class="jc-muted">None seen.</td></tr> }
+      </tbody>
+    </table>
+    @if (pages.needed()) {
+      <mat-paginator [length]="rows().length" [pageSize]="pages.size()" [pageIndex]="pages.index()" [pageSizeOptions]="pages.sizes"
+                     (page)="pages.change($event)" aria-label="Pages" />
+    }`,
+		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: MatPaginatorModule
+			},
+			{
+				kind: "component",
+				type: i1.MatPaginator,
+				selector: "mat-paginator",
+				inputs: [
+					"color",
+					"pageIndex",
+					"length",
+					"pageSize",
+					"pageSizeOptions",
+					"hidePageSize",
+					"showFirstLastButtons",
+					"selectConfig",
+					"disabled"
+				],
+				outputs: ["page"],
+				exportAs: ["matPaginator"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i2.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: ContextBar,
+				selector: "jc-context-bar"
+			},
+			{
+				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: ResourcesPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				MatPaginatorModule,
+				MatProgressBarModule,
+				ContextBar,
+				AgoPipe
+			],
+			template: `
+    <jc-context-bar><h1>Resources</h1>
+      @for (t of types; track t) {
+        <a class="jc-chip" [class.jc-selected]="t === (type() ?? 'host')" [routerLink]="['resources'] | jcLink" [queryParams]="ctx.keep({ type: t })">{{ t }}</a>
+      }
+    </jc-context-bar>
+    @if (resources.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (resources.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (capped()) { <p class="jc-notice">Showing the first 5,000 only. Narrow the list with the search box or a filter.</p> }
+    <table class="jc-table">
+      <thead><tr><th>Name</th><th>Key</th><th>First seen</th><th>Last seen</th></tr></thead>
+      <tbody>
+        @for (r of pages.visible(); track r.id) {
+          <tr><td><a [routerLink]="['resources', r.id] | jcLink" [queryParams]="ctx.keep()">{{ r.displayName }}</a></td>
+              <td class="jc-mono jc-small">{{ r.key }}</td><td>{{ r.firstSeen | ago }}</td><td>{{ r.lastSeen | ago }}</td></tr>
+        } @empty { <tr><td colspan="4" class="jc-muted">None seen.</td></tr> }
+      </tbody>
+    </table>
+    @if (pages.needed()) {
+      <mat-paginator [length]="rows().length" [pageSize]="pages.size()" [pageIndex]="pages.index()" [pageSizeOptions]="pages.sizes"
+                     (page)="pages.change($event)" aria-label="Pages" />
+    }`
+		}]
+	}],
+	propDecorators: { type: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "type",
+			required: false
+		}]
+	}] }
+});
+export { ResourcesPage };
+
+//# sourceMappingURL=juice-js-observability-resources.page-CR7-DFsh.mjs.map

package/fesm2022/juice-js-observability-resources.page-CR7-DFsh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"juice-js-observability-resources.page-CR7-DFsh.mjs","names":[],"sources":["../../../../projects/juice-js/observability/src/lib/pages/resources.page.ts"],"sourcesContent":["import { LinkPipe } from '../core/options';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { apiResource } from '../shared/resource';\nimport { MatPaginatorModule } from '@angular/material/paginator';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { RouterLink } from '@angular/router';\nimport { SearchablePage } from '@juice-js/layout';\nimport { ApiService } from '../core/api.service';\nimport { ContextService } from '../core/context.service';\nimport { AgoPipe } from '../shared/format';\nimport { ContextBar } from '../shared/ui';\nimport { problemText } from '../shared/telemetry';\nimport { screenPages } from '../shared/paging';\n\nconst TYPES = ['host', 'container', 'k8s-pod', 'database', 'messaging-destination'];\n\n/**\n * Where services run and what they use (Console requirements §11): hosts, containers, pods, databases and\n * destinations, as discovery reconciled them. Never deleted automatically; renames come only from configured aliases.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LinkPipe, RouterLink, MatPaginatorModule, MatProgressBarModule, ContextBar, AgoPipe],\n  template: `\n    <jc-context-bar><h1>Resources</h1>\n      @for (t of types; track t) {\n        <a class=\"jc-chip\" [class.jc-selected]=\"t === (type() ?? 'host')\" [routerLink]=\"['resources'] | jcLink\" [queryParams]=\"ctx.keep({ type: t })\">{{ t }}</a>\n      }\n    </jc-context-bar>\n    @if (resources.isLoading()) { <mat-progress-bar mode=\"indeterminate\" /> }\n    @if (resources.error()) { <p class=\"jc-error\">{{ error() }}</p> }\n    @if (capped()) { <p class=\"jc-notice\">Showing the first 5,000 only. Narrow the list with the search box or a filter.</p> }\n    <table class=\"jc-table\">\n      <thead><tr><th>Name</th><th>Key</th><th>First seen</th><th>Last seen</th></tr></thead>\n      <tbody>\n        @for (r of pages.visible(); track r.id) {\n          <tr><td><a [routerLink]=\"['resources', r.id] | jcLink\" [queryParams]=\"ctx.keep()\">{{ r.displayName }}</a></td>\n              <td class=\"jc-mono jc-small\">{{ r.key }}</td><td>{{ r.firstSeen | ago }}</td><td>{{ r.lastSeen | ago }}</td></tr>\n        } @empty { <tr><td colspan=\"4\" class=\"jc-muted\">None seen.</td></tr> }\n      </tbody>\n    </table>\n    @if (pages.needed()) {\n      <mat-paginator [length]=\"rows().length\" [pageSize]=\"pages.size()\" [pageIndex]=\"pages.index()\" [pageSizeOptions]=\"pages.sizes\"\n                     (page)=\"pages.change($event)\" aria-label=\"Pages\" />\n    }`,\n})\nexport class ResourcesPage implements SearchablePage {\n  protected readonly ctx = inject(ContextService);\n  private readonly api = inject(ApiService);\n  protected readonly types = TYPES;\n  readonly type = input<string>();\n  private readonly filter = signal('');\n\n  protected readonly resources = apiResource({\n    params: () => this.type() ?? 'host',\n    stream: ({ params }) => this.api.resources(params),\n  });\n  protected readonly error = computed(() => problemText(this.resources.error()));\n  protected readonly capped = computed(() => (this.resources.value()?.nextCursor ?? null) !== null);\n  protected readonly rows = computed(() => (this.resources.value()?.items ?? [])\n    .filter(r => !this.filter() || `${r.displayName} ${r.key}`.toLowerCase().includes(this.filter().toLowerCase())));\n\n  protected readonly pages = screenPages(this.rows);\n\n  onSearch(query: string) { this.filter.set(query); }\n}\n"],"mappings":"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"}