@skyhook-io/k8s-ui 1.8.11 → 1.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.11",
+  "version": "1.8.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -92,15 +92,15 @@
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
-    "@xyflow/react": "^12.10.1",
+    "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.24.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.10",
     "yaml": "^2.9.0"
   }
 }

package/src/components/applications/ApplicationDetail.test.tsx

@@ -148,6 +148,33 @@ describe("ApplicationDetail shell", () => {
     expect(html).not.toContain('Application identity')
   })
 
+  it("renders the optional application cost view only when the host selects it", () => {
+    const withCostTab = renderDetail({
+      selectedView: "overview",
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      renderCostView: () => <div>Application cost body</div>,
+    });
+
+    expect(withCostTab).toContain("Cost");
+    expect(withCostTab).not.toContain("Application cost body");
+
+    const selectedCost = renderDetail({
+      selectedView: "overview",
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      renderCostView: () => <div>Application cost body</div>,
+      costViewSelected: true,
+      onSelectCostView: () => {},
+    });
+
+    expect(selectedCost).toContain("Cost");
+    expect(selectedCost).toContain("Application cost body");
+    expect(selectedCost).not.toContain("Source &amp; provenance");
+  });
+
   it("does not render a workload selector for a single-workload app", () => {
     const singleApp: AppRow = {
       ...app,
@@ -180,20 +207,112 @@ describe("ApplicationDetail shell", () => {
     expect(html).not.toContain("Application views");
   });
 
-  it("renders application incidents in History", () => {
+  it("renders one filtered application chronology with workload and source actions", () => {
     const html = renderDetail({
       selectedView: "history",
       onSelectView: () => {},
       selectedWorkloadKey: null,
       onSelectWorkload: () => {},
+      historyMode: 'local',
+      historyRange: 'all',
+      historyRangeOptions: [{ value: 'all', label: 'All observed' }],
+      onOpenTimeline: () => {},
+      historyItems: [
+        {
+          id: 'source-sync',
+          category: 'deployment',
+          title: 'Argo CD sync',
+          timestamp: '2026-07-13T10:00:00.000Z',
+          sourceRef: { type: 'gitops', tool: 'argocd', kind: 'Application', namespace: 'argocd', name: 'checkout' },
+        },
+        {
+          id: 'runtime-change',
+          category: 'change',
+          title: 'Deployment updated',
+          timestamp: '2026-07-13T09:00:00.000Z',
+          resource: { kind: 'Deployment', namespace: 'prod', name: 'checkout-api' },
+        },
+        {
+          id: 'problem',
+          category: 'problem',
+          title: 'BackOff',
+          timestamp: '2026-07-13T08:00:00.000Z',
+          resource: { kind: 'Pod', namespace: 'prod', name: 'checkout-api-abc12' },
+        },
+      ],
+      onOpenSource: () => {},
     });
 
-    expect(html).toContain("Current incidents");
-    expect(html).toContain("BackOff on Deployment/checkout-api");
-    expect(html).toContain("Deployment/checkout-api");
-    expect(html).toContain("Open workload");
+    expect(html).toContain("Application history");
+    expect(html).toContain("Deployments");
+    expect(html).toContain("Changes");
+    expect(html).toContain("Problems");
+    expect(html).toContain("Open full Timeline");
+    expect(html).toContain("Deployment");
+    expect(html).toContain("prod");
+    expect(html).toContain("checkout-api");
+    expect(html).toContain("View Argo CD application");
+    expect(html).toContain("events retained by this Radar instance");
+    expect(html).not.toContain("Current incidents");
   });
 
+  it('reports retained event limits separately from recording gaps', () => {
+    const html = renderDetail({
+      selectedView: 'history',
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      historyMode: 'retained',
+      historyRange: '7d',
+      historyRangeOptions: [{ value: '7d', label: '7 days' }],
+      historyRuntimeLimited: true,
+      historyItems: [{
+        id: 'runtime-change',
+        category: 'change',
+        title: 'Deployment updated',
+        timestamp: '2026-07-13T09:00:00.000Z',
+      }],
+    })
+
+    expect(html).toContain('Showing the 10,000 most recent events in these namespaces')
+    expect(html).not.toContain('Recording coverage is incomplete')
+  })
+
+  it('shows a single honest error state when runtime history fails without source history', () => {
+    const html = renderDetail({
+      selectedView: 'history',
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      historyRuntimeError: true,
+      historyItems: [],
+    })
+
+    expect(html).toContain('Application changes could not be loaded.')
+    expect(html).not.toContain('Deployment-source history is still shown.')
+    expect(html).not.toContain('No application history in this range.')
+  })
+
+  it('marks retained runtime rows as stale when a refresh fails', () => {
+    const html = renderDetail({
+      selectedView: 'history',
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      historyRuntimeError: true,
+      historyItems: [{
+        id: 'runtime-change',
+        category: 'change',
+        title: 'Deployment updated',
+        timestamp: '2026-07-13T09:00:00.000Z',
+      }],
+    })
+
+    expect(html).toContain('Application changes could not be refreshed.')
+    expect(html).toContain('Previously loaded changes may be stale.')
+    expect(html).toContain('Deployment updated')
+  })
+
   it("previews the latest retained deployment change in Overview", () => {
     const healthyApp: AppRow = { ...app, events: [] };
     const history: AppHistory = {
@@ -429,7 +548,7 @@ describe("ApplicationDetail shell", () => {
     expect(html).not.toContain('needs attention')
   })
 
-  it("does not link ambiguous event objects to a workload", () => {
+  it("uses the resource namespace when linking a history item to a workload", () => {
     const ambiguousApp: AppRow = {
       ...app,
       workloads: [
@@ -453,10 +572,19 @@ describe("ApplicationDetail shell", () => {
       onSelectView: () => {},
       selectedWorkloadKey: null,
       onSelectWorkload: () => {},
+      historyItems: [{
+        id: 'prod-change',
+        category: 'change',
+        title: 'Deployment updated',
+        timestamp: '2026-07-13T09:00:00.000Z',
+        resource: { kind: 'Deployment', namespace: 'prod', name: 'checkout-api' },
+      }],
     });
 
-    expect(html).toContain("Deployment/checkout-api");
-    expect(html).not.toContain("Open workload");
+    expect(html).toContain("Deployment");
+    expect(html).toContain("prod");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("canary/checkout-api");
   });
 
   it("shows batch activity and injected operational issues on the application overview", () => {