@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/resources/curated-column-ownership.test.ts

@@ -108,8 +108,8 @@ describe('curated column ownership', () => {
   // Brace-counting, not parsing: assert the extraction actually saw the whole
   // table, or a silently-missed key would let the guard above pass vacuously.
   it('extracted every curated key', () => {
-    expect(CURATED.length).toBe(239)
-    expect(OWNED.size).toBe(201)
+    expect(CURATED.length).toBe(240)
+    expect(OWNED.size).toBe(202)
     expect(CURATED).toContain('pods')
     expect(CURATED).toContain('crossplanemanagedresources')
     expect([...OWNED]).toContain('awsmanagedcontrolplanes')
@@ -166,7 +166,7 @@ describe('every declaration resolves', () => {
     .map(m => [m[1], m[2].split(',').map(g => g.trim().replace(/'/g, ''))] as const)
 
   it('covers the whole ownership table', () => {
-    expect(DECLARED.length).toBe(201)
+    expect(DECLARED.length).toBe(202)
   })
 
   it.each(DECLARED)('%s is curated under each group it claims', (key, groups) => {

package/src/components/resources/renderers/AnalysisRunRenderer.tsx

@@ -1,7 +1,7 @@
 import { Activity, BarChart3, Server } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { Badge, type BadgeSeverity } from '../../ui/Badge'
-import { formatAge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface AnalysisRunRendererProps {
   data: any
@@ -60,8 +60,8 @@ export function AnalysisRunRenderer({ data, onNavigate }: AnalysisRunRendererPro
           <Property label="Phase" value={<Badge severity={phaseSeverity(phase)}>{phase}</Badge>} />
           {labels['rollout-type'] && <Property label="Triggered as" value={labels['rollout-type']} />}
           {labels['step-index'] && <Property label="Canary step" value={labels['step-index']} />}
-          <Property label="Started" value={status.startedAt ? formatAge(status.startedAt) : undefined} />
-          <Property label="Completed" value={status.completedAt ? formatAge(status.completedAt) : undefined} />
+          <Property label="Started" value={status.startedAt ? <TimeValue timestamp={status.startedAt} /> : undefined} />
+          <Property label="Completed" value={status.completedAt ? <TimeValue timestamp={status.completedAt} /> : undefined} />
           <Property label="Message" value={status.message} />
           {ownerRollout && (
             <Property

package/src/components/resources/renderers/ArgoApplicationRenderer.tsx

@@ -1,7 +1,6 @@
 import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import {
   argoStatusToGitOpsStatus,
@@ -11,6 +10,8 @@ import {
 } from '../../../types/gitops'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 import { buildRepoBrowseUrl, buildPathBrowseUrl } from '../../../utils/git-provider-urls'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 const REPO_LINK_CLASS = 'text-blue-400 hover:text-blue-300 hover:underline break-all'
 
@@ -297,10 +298,10 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <Property label="Message" value={operationState.message} />
             )}
             {operationState.startedAt && (
-              <Property label="Started" value={formatAge(operationState.startedAt)} />
+              <Property label="Started" value={<TimeValue timestamp={operationState.startedAt} />} />
             )}
             {operationState.finishedAt && (
-              <Property label="Finished" value={formatAge(operationState.finishedAt)} />
+              <Property label="Finished" value={<TimeValue timestamp={operationState.finishedAt} />} />
             )}
             {operationState.retryCount != null && (
               <Property
@@ -402,7 +403,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                     </span>
                     {entry.deployedAt && (
                       <span className="text-xs text-theme-text-tertiary">
-                        {formatAge(entry.deployedAt)}
+                        {formatRelativeAgeTime(entry.deployedAt)}
                       </span>
                     )}
                   </div>
@@ -425,7 +426,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <Property label="Current Revision" value={status.sync.revision} />
             )}
             {status.reconciledAt && (
-              <Property label="Last Reconciled" value={formatAge(status.reconciledAt)} />
+              <Property label="Last Reconciled" value={<TimeValue timestamp={status.reconciledAt} />} />
             )}
           </PropertyList>
         </Section>

package/src/components/resources/renderers/AutoscalingReferences.test.tsx

@@ -0,0 +1,286 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
+import { expect, it, vi } from "vitest";
+import { HPARenderer } from "./HPARenderer";
+import { VPARenderer } from "./VPARenderer";
+import { KedaScaledObjectRenderer } from "./KedaScaledObjectRenderer";
+import {
+  initNavigationMap,
+  resetNavigationMap,
+} from "../../../utils/navigation";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it.each(["HPA", "VPA"])(
+  "retains a %s custom scale target API group",
+  async (kind) => {
+    initNavigationMap([
+      {
+        group: "custom.example.io",
+        version: "v1",
+        kind: "Deployment",
+        name: "deployments",
+        namespaced: true,
+        isCrd: true,
+        verbs: ["get"],
+      },
+    ]);
+    const element = document.createElement("div");
+    const root = createRoot(element);
+    const onNavigate = vi.fn();
+    const target = {
+      apiVersion: "custom.example.io/v1",
+      kind: "Deployment",
+      name: "same-name",
+    };
+    const data = {
+      metadata: { namespace: "team" },
+      spec: kind === "HPA" ? { scaleTargetRef: target } : { targetRef: target },
+    };
+    try {
+      await act(async () =>
+        root.render(
+          kind === "HPA" ? (
+            <HPARenderer data={data} onNavigate={onNavigate} />
+          ) : (
+            <VPARenderer data={data} onNavigate={onNavigate} />
+          ),
+        ),
+      );
+      const button = [...element.querySelectorAll("button")].find(
+        (b) => b.textContent === "Deployment/same-name",
+      );
+      expect(button).toBeDefined();
+      expect([...element.querySelectorAll("button")].filter(b => b.textContent?.startsWith("Deployment/same-name"))).toHaveLength(1);
+      await act(async () => button!.click());
+      expect(onNavigate).toHaveBeenCalledWith({
+        kind: "Deployment",
+        namespace: "team",
+        name: "same-name",
+        group: "custom.example.io",
+      });
+    } finally {
+      await act(async () => root.unmount());
+      resetNavigationMap();
+    }
+  },
+);
+
+it.each(["v1", "", undefined])("keeps Object metric resources separate from the scale target and measures its own Namespace (apiVersion %s)", async (namespaceAPIVersion) => {
+  const element = document.createElement("div");
+  const root = createRoot(element);
+  const onNavigate = vi.fn();
+  const data = {
+    metadata: { namespace: "team" },
+    spec: {
+      scaleTargetRef: {
+        apiVersion: "apps/v1",
+        kind: "Deployment",
+        name: "workload",
+      },
+      metrics: [
+        {
+          type: "Object",
+          object: {
+            metric: { name: "requests" },
+            describedObject: {
+              apiVersion: "networking.k8s.io/v1",
+              kind: "Ingress",
+              name: "frontend",
+            },
+          },
+        },
+        {
+          type: "Object",
+          object: {
+            metric: { name: "queue" },
+            describedObject: {
+              apiVersion: "custom.example.io/v1",
+              kind: "Widget",
+              name: "input",
+            },
+          },
+        },
+        {
+          type: "Object",
+          object: {
+            metric: { name: "namespace-metric" },
+            describedObject: {
+              apiVersion: namespaceAPIVersion,
+              kind: "Namespace",
+              name: "cannot-escape",
+            },
+          },
+        },
+      ],
+    },
+  };
+  try {
+    await act(async () =>
+      root.render(<HPARenderer data={data} onNavigate={onNavigate} />),
+    );
+    for (const [label, expected] of [
+      [
+        "Ingress/frontend",
+        { kind: "Ingress", group: "networking.k8s.io", namespace: "team", name: "frontend" },
+      ],
+      [
+        "Widget/input",
+        {
+          kind: "Widget",
+          group: "custom.example.io",
+          namespace: "team",
+          name: "input",
+        },
+      ],
+      [
+        "Namespace/team",
+        { kind: "Namespace", group: "", namespace: "", name: "team" },
+      ],
+    ] as const) {
+      const button = [...element.querySelectorAll("button")].find(
+        (b) => b.textContent === label,
+      );
+      expect(button).toBeDefined();
+      await act(async () => button!.click());
+      expect(onNavigate).toHaveBeenLastCalledWith(expected);
+    }
+    expect(element.textContent).toContain("Object metric sources");
+    expect(element.textContent).toContain("This HPA's namespace");
+    expect(element.textContent).not.toContain("Namespace/cannot-escape");
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
+
+it.each(["HPA", "VPA"])("does not infer missing %s target identity", (kind) => {
+  const target = { name: "ambiguous" };
+  const data = {
+    metadata: { namespace: "team" },
+    spec: kind === "HPA" ? { scaleTargetRef: target } : { targetRef: target },
+  };
+  const html = renderToStaticMarkup(
+    kind === "HPA" ? (
+      <HPARenderer data={data} onNavigate={() => {}} />
+    ) : (
+      <VPARenderer data={data} onNavigate={() => {}} />
+    ),
+  );
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  expect(
+    [...doc.querySelectorAll("button")].some((b) =>
+      b.textContent?.includes("ambiguous"),
+    ),
+  ).toBe(false);
+  expect(html).not.toContain("Deployment/ambiguous");
+});
+
+it.each([
+  [
+    { name: "worker" },
+    { kind: "Deployment", group: "apps", namespace: "team", name: "worker" },
+  ],
+  [
+    { name: "worker", apiVersion: "", kind: "" },
+    { kind: "Deployment", group: "apps", namespace: "team", name: "worker" },
+  ],
+  [
+    { apiVersion: "custom.example.io/v1", kind: "Deployment", name: "worker" },
+    {
+      kind: "Deployment",
+      group: "custom.example.io",
+      namespace: "team",
+      name: "worker",
+    },
+  ],
+])(
+  "preserves KEDA documented defaults and explicit custom API identity",
+  async (target, expected) => {
+    const element = document.createElement("div");
+    const root = createRoot(element);
+    const onNavigate = vi.fn();
+    try {
+      await act(async () =>
+        root.render(
+          <KedaScaledObjectRenderer
+            data={{
+              metadata: { namespace: "team" },
+              spec: { scaleTargetRef: target },
+            }}
+            onNavigate={onNavigate}
+          />,
+        ),
+      );
+      const button = [...element.querySelectorAll("button")].find(
+        (b) => b.textContent === "Deployment/worker",
+      );
+      expect(button).toBeDefined();
+      await act(async () => button!.click());
+      expect(onNavigate).toHaveBeenCalledWith(expected);
+    } finally {
+      await act(async () => root.unmount());
+    }
+  },
+);
+
+it.each([
+  ["Deployment", "apps"], ["StatefulSet", "apps"], ["DaemonSet", "apps"], ["ReplicaSet", "apps"],
+  ["Job", "batch"], ["CronJob", "batch"], ["ReplicationController", ""],
+])("keeps versionless VPA %s target navigation", async (kind, group) => {
+  const element = document.createElement("div");
+  const root = createRoot(element);
+  const onNavigate = vi.fn();
+  try {
+    await act(async () => root.render(<VPARenderer data={{ metadata: { namespace: "team" }, spec: { targetRef: { kind, name: "workload" } } }} onNavigate={onNavigate} />));
+    const link = [...element.querySelectorAll("button")].find(button => button.textContent === `${kind}/workload`);
+    expect(link).toBeDefined();
+    await act(async () => link!.click());
+    expect(onNavigate).toHaveBeenLastCalledWith({ kind, group, namespace: "team", name: "workload" });
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
+
+it("pairs each diagnosis metric card with its declared Object source once", async () => {
+  const element = document.createElement("div");
+  const root = createRoot(element);
+  const onNavigate = vi.fn();
+  const objects = [
+    { metric: { name: "requests" }, describedObject: { apiVersion: "v1", kind: "Endpoints", name: "input" } },
+    { metric: { name: "requests" }, describedObject: { apiVersion: "custom.example.io/v1", kind: "Endpoints", name: "input" } },
+    { metric: { name: "queue_depth" }, describedObject: { kind: "Namespace", name: "ignored" } },
+  ];
+  try {
+    await act(async () => root.render(<HPARenderer
+      data={{ metadata: { namespace: "team" }, spec: { metrics: objects.map(object => ({ type: "Object", object })) } }}
+      hpaDiagnosis={{ state: "stabilized", summary: "Stabilized", target: {}, bounds: { min: 1, max: 3, current: 2, desired: 2 }, metrics: [
+        { type: "Object", name: "Endpoints/input/requests", current: "10", status: "ok" },
+        { type: "Object", name: "Endpoints (custom.example.io)/input/requests", current: "20", status: "ok" },
+        { type: "Object", name: "Namespace/team/queue_depth", current: "7", status: "ok" },
+        { type: "Object", name: "Service/stale/requests", current: "3", status: "status_only" },
+      ] }} onNavigate={onNavigate} />));
+    expect(element.textContent).not.toContain("Object metric sources");
+    expect(element.textContent).not.toContain("ignored");
+    const endpoints = [...element.querySelectorAll("button")].filter(button => button.textContent === "Endpoints/input");
+    expect(endpoints).toHaveLength(2);
+    await act(async () => endpoints[0].click());
+    expect(onNavigate).toHaveBeenLastCalledWith({ kind: "Endpoints", group: "", namespace: "team", name: "input" });
+    await act(async () => endpoints[1].click());
+    expect(onNavigate).toHaveBeenLastCalledWith({ kind: "Endpoints", group: "custom.example.io", namespace: "team", name: "input" });
+    const namespace = [...element.querySelectorAll("button")].find(button => button.textContent === "Namespace/team");
+    expect(namespace).toBeDefined();
+    await act(async () => namespace!.click());
+    expect(onNavigate).toHaveBeenLastCalledWith({ kind: "Namespace", group: "", namespace: "", name: "team" });
+    expect([...element.querySelectorAll("button")].some(button => button.textContent === "Service/stale")).toBe(false);
+    for (const value of ["Current 10", "Current 20", "Current 7"]) expect(element.textContent).toContain(value);
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
+
+it("shows the documented default Target API for KEDA", () => {
+  const html = renderToStaticMarkup(<KedaScaledObjectRenderer data={{ metadata: { namespace: "team" }, spec: { scaleTargetRef: { name: "worker" } } }} />);
+  expect(html).toContain("Target API");
+  expect(html).toContain("apps/v1");
+});

package/src/components/resources/renderers/CAPIClusterRenderer.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { Server, Globe, Network, Layers, Download, CheckCircle, AlertCircle } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getClusterStatus, getClusterClass, getClusterVersion, getClusterEndpoint, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -27,6 +27,7 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '', canConnect
   const className = getClusterClass(data)
   const version = getClusterVersion(data)
   const topology = spec.topology || {}
+  const classNamespace = (topology.classRef?.name ? topology.classRef.namespace : topology.classNamespace) || data.metadata?.namespace || ''
 
   // v1beta2 replica fields
   const cpReady = status.controlPlane?.readyReplicas ?? status.controlPlane?.replicas
@@ -119,7 +120,7 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '', canConnect
           {className !== '-' && <Property label="Cluster Class" value={className} />}
           {endpoint !== '-' && <Property label="Control Plane Endpoint" value={endpoint} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>
@@ -201,10 +202,10 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '', canConnect
       </Section>
 
       {/* Topology (ClusterClass-based) */}
-      {topology.class && (
+      {className !== '-' && (
         <Section title="Topology" icon={Layers}>
           <PropertyList>
-            <Property label="Class" value={topology.class} />
+            <Property label="Class" value={<ResourceLink name={className} kind="clusterclasses" group="cluster.x-k8s.io" namespace={classNamespace} onNavigate={onNavigate} />} />
             {topology.version && <Property label="Version" value={topology.version} />}
             {topology.controlPlane?.replicas != null && (
               <Property label="CP Replicas" value={String(topology.controlPlane.replicas)} />

package/src/components/resources/renderers/CAPIExactReferenceNavigation.test.tsx

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { CAPIClusterRenderer } from './CAPIClusterRenderer'
+
+async function rendered(element: ReactNode, check: (container: HTMLDivElement) => Promise<void> | void) {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+ const container = document.createElement('div')
+ const root = createRoot(container)
+ try { await act(async () => root.render(element)); await check(container) }
+ finally { await act(async () => root.unmount()); Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false }) }
+}
+async function click(container: HTMLDivElement, text: string) {
+ const button = [...container.querySelectorAll('button')].find(button => button.textContent === text)
+ expect(button, `missing link ${text}`).toBeDefined()
+ await act(async () => button!.click())
+}
+
+describe('exact reference navigation', () => {
+ it('uses the v1beta2 ClusterClass reference namespace',async()=>{
+  const navigate=vi.fn()
+  await rendered(<CAPIClusterRenderer data={{metadata:{namespace:'app'},spec:{topology:{classRef:{name:'standard',namespace:'classes'}}}}} onNavigate={navigate}/>,async container=>{
+   await click(container,'standard');expect(navigate).toHaveBeenCalledWith({kind:'clusterclasses',group:'cluster.x-k8s.io',namespace:'classes',name:'standard'})
+  })
+ })
+})

package/src/components/resources/renderers/CAPIKubeadmControlPlaneRenderer.tsx

@@ -1,8 +1,8 @@
 import { Server, Shield, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getKCPStatus, getKCPVersion, getKCPInitialized, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -50,7 +50,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
           <Property label="Initialized" value={initialized ? 'Yes' : 'No'} />
           {updateStrategy && <Property label="Update Strategy" value={updateStrategy} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CAPIMachineDeploymentRenderer.tsx

@@ -1,8 +1,8 @@
 import { Server, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getMachineDeploymentStatus, getMachineDeploymentVersion, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -56,7 +56,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
           <Property label="Cluster" value={clusterName} />
           <Property label="Version" value={version} />
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CAPIMachinePoolRenderer.tsx

@@ -1,8 +1,8 @@
 import { Server, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getMachinePoolStatus } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -44,7 +44,7 @@ export function CAPIMachinePoolRenderer({ data, onNavigate }: Props) {
             <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
           )}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CAPIMachineRenderer.tsx

@@ -1,8 +1,8 @@
 import { Cpu, Server, Network, Cloud } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getMachineStatus, getMachineRole, getMachineClusterName, getMachineNodeRef, getMachineVersion, getMachineProviderID, parseProviderID, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -59,7 +59,7 @@ export function CAPIMachineRenderer({ data, onNavigate }: Props) {
           {infraProvider && <Property label="Provider" value={infraProvider} />}
           {spec.failureDomain && <Property label="Failure Domain" value={spec.failureDomain} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CAPIMachineSetRenderer.tsx

@@ -1,8 +1,8 @@
 import { Server, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getMachineSetStatus, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -46,7 +46,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
             <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
           )}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CNPGBackupRenderer.test.tsx

@@ -27,3 +27,26 @@ describe('CNPGBackupRenderer — spec.target is instance selection, not a restor
     expect(html(backup())).not.toContain('Backup Target')
   })
 })
+
+
+describe('CNPGBackupRenderer plugin destination', () => {
+  it.each([undefined, { barmanObjectName: 'ignored-store', serverName: 'ignored-server' }, { serverName: 'ignored-server' }])('explains the Cluster destination and ignored parameters: %j', (parameters) => {
+    const out = renderToString(<CNPGBackupRenderer data={backup({ spec: { method: 'plugin', pluginConfiguration: { name: 'barman-cloud.cloudnative-pg.io', parameters } } })} onNavigate={() => {}} />)
+    expect(out).toContain('From the Cluster')
+    expect(out).toContain('barman-cloud plugin')
+    expect(out).not.toContain('Object Store')
+    expect(out).not.toContain('ignored-store')
+    expect(out).not.toContain('ignored-server')
+    expect(out.match(/<button[^>]*>(?:pg|ignored-store|ignored-server)<\/button>/g)).toHaveLength(1)
+    expect(out.includes('Ignored by the barman-cloud plugin')).toBe(!!parameters)
+  })
+
+  it('does not assert a third-party parameter is an ObjectStore destination', () => {
+    const out = html(backup({ spec: { method: 'plugin', pluginConfiguration: { name: 'other.example.com', parameters: { barmanObjectName: 'custom-store' } } } }))
+    expect(out).toContain('other.example.com')
+    expect(out).toContain('Unknown: Radar does not model this plugin')
+    expect(out).not.toContain('custom-store')
+    expect(out).not.toContain('Object Store')
+    expect(out).not.toContain('Ignored by')
+  })
+})

package/src/components/resources/renderers/CNPGBackupRenderer.tsx

@@ -12,7 +12,7 @@ import {
   getCNPGBackupServerName,
   getCNPGBackupError,
   getCNPGBackupTarget,
-  CNPG_BARMAN_OBJECTSTORE_GROUP,
+  CNPG_BARMAN_PLUGIN_NAME,
 } from '../resource-utils-cnpg'
 
 interface CNPGBackupRendererProps {
@@ -51,24 +51,16 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
         <PropertyList>
           <Property label="Phase" value={phase} />
           <Property label="Method" value={getCNPGBackupMethod(data)} />
-          {/* A plugin-taken backup lands in an ObjectStore rather than in the
-              Cluster's own barmanObjectStore, so naming the plugin is what
-              tells an operator where to go looking. */}
           {backupPlugin && <Property label="Plugin" value={backupPlugin.name} />}
-          {backupPlugin?.parameters?.barmanObjectName && (
+          {backupPlugin && (
             <Property
-              label="Object Store"
-              value={
-                <ResourceLink
-                  name={backupPlugin.parameters.barmanObjectName}
-                  kind="objectstores"
-                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
-                  namespace={data.metadata?.namespace || ''}
-                  onNavigate={onNavigate}
-                />
-              }
+              label="Destination"
+              value={backupPlugin.name === CNPG_BARMAN_PLUGIN_NAME ? "From the Cluster's barman-cloud plugin" : 'Unknown: Radar does not model this plugin’s destination'}
             />
           )}
+          {backupPlugin?.name === CNPG_BARMAN_PLUGIN_NAME && backupPlugin.parameters && Object.keys(backupPlugin.parameters).length > 0 && (
+            <Property label="Plugin parameters" value="Ignored by the barman-cloud plugin; the destination comes from the Cluster" />
+          )}
           <Property label="Duration" value={getCNPGBackupDuration(data)} />
           <Property label="Backup Name" value={getCNPGBackupName(data)} />
           {data.status?.instanceID?.podName && (
@@ -102,10 +94,7 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
             }
             return clusterName
           })()} />
-          {/* Destination and server name are in-tree barmanObjectStore fields.
-              Under the plugin method they are never populated because both live
-              on the ObjectStore, and rendering them as "-" reads as "not
-              configured" rather than "recorded elsewhere". */}
+          {/* Plugin backups do not report the in-tree destination fields. */}
           {!backupPlugin && (
             <>
               <Property label="Destination" value={getCNPGBackupDestinationPath(data)} />