@for (key of childKeys(); track key) {
}
@@ -18,4 +18,11 @@ import { RenderElementComponent } from '@cacheplane/render';
export class ContainerComponent {
readonly childKeys = input
([]);
readonly spec = input.required();
+ readonly direction = input<'row' | 'column'>('column');
+
+ readonly layoutClass = computed(() =>
+ this.direction() === 'row'
+ ? 'flex flex-row flex-wrap gap-3'
+ : 'flex flex-col gap-3'
+ );
}
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts
new file mode 100644
index 000000000..d6b8c92c0
--- /dev/null
+++ b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts
@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+import type { Spec } from '@json-render/core';
+import { RenderElementComponent } from '@cacheplane/render';
+
+@Component({
+ selector: 'app-dashboard-grid',
+ standalone: true,
+ imports: [RenderElementComponent],
+ template: `
+
+ @for (key of childKeys(); track key) {
+
+ }
+
+ `,
+})
+export class DashboardGridComponent {
+ readonly childKeys = input([]);
+ readonly spec = input.required();
+}
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.spec.ts b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.spec.ts
new file mode 100644
index 000000000..e43382127
--- /dev/null
+++ b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataGridComponent } from './data-grid.component';
+
+describe('DataGridComponent', () => {
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DataGridComponent],
+ }).compileComponents();
+ fixture = TestBed.createComponent(DataGridComponent);
+ });
+
+ it('renders skeleton rows when rows is null', () => {
+ fixture.componentRef.setInput('title', 'Churned');
+ fixture.componentRef.setInput('rows', null);
+ fixture.componentRef.setInput('columns', ['name', 'plan']);
+ fixture.detectChanges();
+ const el = fixture.nativeElement as HTMLElement;
+ const skeletonRows = el.querySelectorAll('.skeleton-row');
+ expect(skeletonRows.length).toBeGreaterThanOrEqual(3);
+ });
+
+ it('renders correct number of data rows', () => {
+ const rows = [
+ { name: 'Acme', plan: 'pro', mrr_lost: 450 },
+ { name: 'Widget', plan: 'starter', mrr_lost: 120 },
+ ];
+ fixture.componentRef.setInput('title', 'Churned');
+ fixture.componentRef.setInput('rows', rows);
+ fixture.componentRef.setInput('columns', ['name', 'plan', 'mrr_lost']);
+ fixture.detectChanges();
+ const tbody = fixture.nativeElement.querySelector('tbody');
+ expect(tbody.querySelectorAll('tr').length).toBe(2);
+ });
+
+ it('renders title-cased column headers', () => {
+ fixture.componentRef.setInput('title', 'Churned');
+ fixture.componentRef.setInput('rows', [{ name: 'Acme', mrr_lost: 450 }]);
+ fixture.componentRef.setInput('columns', ['name', 'mrr_lost']);
+ fixture.detectChanges();
+ const headers = fixture.nativeElement.querySelectorAll('th');
+ expect(headers[0].textContent.trim()).toBe('Name');
+ expect(headers[1].textContent.trim()).toBe('MRR Lost');
+ });
+
+ it('renders title', () => {
+ fixture.componentRef.setInput('title', 'Recently Churned');
+ fixture.componentRef.setInput('rows', []);
+ fixture.componentRef.setInput('columns', ['name']);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.textContent).toContain('Recently Churned');
+ });
+});
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts
new file mode 100644
index 000000000..af8222c9b
--- /dev/null
+++ b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts
@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+ selector: 'app-data-grid',
+ standalone: true,
+ template: `
+
+
{{ title() }}
+ @if (isSkeleton()) {
+ @for (i of skeletonRows; track i) {
+
+ }
+ } @else {
+
+
+
+ @for (col of formattedColumns(); track col.key) {
+ | {{ col.label }} |
+ }
+
+
+
+ @for (row of rows(); track $index) {
+
+ @for (col of formattedColumns(); track col.key) {
+ | {{ row[col.key] }} |
+ }
+
+ }
+
+
+ }
+
+
{{ title() }}
+ @if (isSkeleton()) {
+
+ } @else {
+
+ }
+
{{ label() }}
-
{{ value() }}
+ @if (isSkeleton()) {
+
+
+ } @else {
+
{{ formattedValue() }}
+ @if (delta()) {
+
{{ delta() }}
+ }
+ }
`,
+ styleUrls: ['./skeleton.css'],
})
export class StatCardComponent {
readonly label = input('');
- readonly value = input('');
+ readonly value = input(null);
+ readonly delta = input(null);
+
+ readonly isSkeleton = computed(() => this.value() == null);
+
+ readonly formattedValue = computed(() => {
+ const v = this.value();
+ if (v == null) return '';
+ if (typeof v === 'number') return v.toLocaleString();
+ return String(v);
+ });
+
+ readonly deltaColor = computed(() => {
+ const d = this.delta();
+ if (!d) return '';
+ if (d.startsWith('+')) return 'text-emerald-400';
+ if (d.startsWith('-')) return 'text-red-400';
+ return 'text-white/60';
+ });
}
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/weather-card.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/weather-card.component.ts
deleted file mode 100644
index 9114640ec..000000000
--- a/cockpit/chat/generative-ui/angular/src/app/views/weather-card.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input } from '@angular/core';
-
-@Component({
- selector: 'app-weather-card',
- standalone: true,
- template: `
-
-
-
{{ city() }}
- {{ weatherEmoji() }}
-
-
{{ temperature() }}°F
-
{{ condition() }}
-