@skyhook-io/k8s-ui 1.18.1 → 1.19.0

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

@@ -1,9 +1,11 @@
 import { useState } from 'react'
-import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers } from 'lucide-react'
+import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { getGenericResourceStatus } from '../generic-status'
+import { getCrossplanePauseState, getCrossplaneIndependentStatus, getCrossplaneConditionTone } from '../resource-utils-crossplane'
+import { CrossplanePauseNotice } from './CrossplanePauseContext'
 import type { HealthLevel } from '../resource-utils'
 
 interface GenericRendererProps {
@@ -16,6 +18,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
   const conditions = status.conditions
 
   // Determine health status from conditions or status fields
+  const acknowledgedPause = getCrossplanePauseState(data) === 'acknowledged'
   const healthStatus = getHealthStatus(data)
 
   // Extract important fields from spec and status
@@ -32,6 +35,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
 
   return (
     <>
+      {acknowledgedPause && <CrossplanePauseNotice data={data} />}
       {/* Health Status Banner (if determinable) */}
       {healthStatus && (
         <div className={clsx(
@@ -90,7 +94,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
 
       {/* Conditions (common in CRDs) */}
       {conditions && Array.isArray(conditions) && conditions.length > 0 && (
-        <GenericConditionsSection conditions={conditions} />
+        <GenericConditionsSection conditions={conditions} resource={data} />
       )}
 
       {/* Nested Status Objects */}
@@ -154,8 +158,9 @@ const BANNER_TYPE: Record<HealthLevel, HealthType> = {
 }
 
 function getHealthStatus(resource: any): HealthStatusResult | null {
-  const derived = getGenericResourceStatus(resource)
-  if (!derived) return null
+  const acknowledgedPause = getCrossplanePauseState(resource) === 'acknowledged'
+  const derived = acknowledgedPause ? getCrossplaneIndependentStatus(resource) : getGenericResourceStatus(resource)
+  if (!derived || (acknowledgedPause && derived.tone === 'healthy')) return null
   return { type: BANNER_TYPE[derived.tone], label: derived.text, message: derived.reason }
 }
 
@@ -323,11 +328,11 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
 // CONDITIONS SECTION
 // ============================================================================
 
-function GenericConditionsSection({ conditions }: { conditions: any[] }) {
+function GenericConditionsSection({ conditions, resource }: { conditions: any[]; resource: any }) {
   // Sort conditions: problematic first, then alphabetically
   const sortedConditions = [...conditions].sort((a, b) => {
-    const aProblematic = a.status === 'False' || (a.status === 'True' && ['Degraded', 'Warning'].includes(a.type))
-    const bProblematic = b.status === 'False' || (b.status === 'True' && ['Degraded', 'Warning'].includes(b.type))
+    const aProblematic = getCrossplaneConditionTone(resource, a) !== 'neutral' && (a.status === 'False' || (a.status === 'True' && ['Degraded', 'Warning'].includes(a.type)))
+    const bProblematic = getCrossplaneConditionTone(resource, b) !== 'neutral' && (b.status === 'False' || (b.status === 'True' && ['Degraded', 'Warning'].includes(b.type)))
     if (aProblematic && !bProblematic) return -1
     if (!aProblematic && bProblematic) return 1
     return (a.type || '').localeCompare(b.type || '')
@@ -335,13 +340,14 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
 
   // Check for any problems
   const hasProblems = sortedConditions.some(c =>
-    c.status === 'False' || (c.status === 'True' && ['Degraded', 'Warning'].includes(c.type))
+    getCrossplaneConditionTone(resource, c) !== 'neutral' && (c.status === 'False' || (c.status === 'True' && ['Degraded', 'Warning'].includes(c.type)))
   )
 
   return (
     <Section title={`Conditions (${conditions.length})`} defaultExpanded={hasProblems || conditions.length <= 5}>
       <div className="space-y-2">
         {sortedConditions.map((cond: any, index: number) => {
+          const isNeutral = getCrossplaneConditionTone(resource, cond) === 'neutral'
           const isTrue = cond.status === 'True'
           const isFalse = cond.status === 'False'
           const isWarningType = ['Degraded', 'Warning', 'ScalingLimited'].includes(cond.type)
@@ -349,7 +355,8 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
 
           // Determine icon color based on condition semantics
           let iconColor = 'text-yellow-400'
-          if (isTrue && isPositiveType) iconColor = 'text-green-400'
+          if (isNeutral) iconColor = 'text-theme-text-tertiary'
+          else if (isTrue && isPositiveType) iconColor = 'text-green-400'
           else if (isTrue && isWarningType) iconColor = 'text-yellow-400'
           else if (isTrue) iconColor = 'text-green-400'
           else if (isFalse && isPositiveType) iconColor = 'text-red-400'
@@ -358,7 +365,8 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
           return (
             <div key={`${cond.type}-${index}`} className="flex items-start gap-2 text-sm">
               <span className={clsx('w-5 h-5 rounded-full flex items-center justify-center shrink-0 mt-0.5', iconColor)}>
-                {isTrue && isPositiveType ? <CheckCircle className="w-4 h-4" /> :
+                {isNeutral ? <Minus className="w-4 h-4" /> :
+                 isTrue && isPositiveType ? <CheckCircle className="w-4 h-4" /> :
                  isTrue && isWarningType ? <AlertTriangle className="w-4 h-4" /> :
                  isTrue ? <CheckCircle className="w-4 h-4" /> :
                  isFalse && isPositiveType ? <XCircle className="w-4 h-4" /> :
@@ -370,7 +378,7 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
                   <span className="text-theme-text-primary font-medium">{cond.type}</span>
                   <span className={clsx(
                     'badge-sm',
-                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
+                    isTrue || isNeutral ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
                   )}>
                     {cond.status}
                   </span>

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

@@ -1,4 +1,4 @@
-import { Box, Settings, Cloud, ScrollText, Pause, Layers } from 'lucide-react'
+import { Box, Settings, Cloud, ScrollText, Layers } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { CodeViewer } from '../../ui/CodeViewer'
 import {
@@ -8,9 +8,10 @@ import {
   getExternalName,
   getManagementPolicies,
   getDeletionPolicy,
-  isCrossplanePaused,
+  getCrossplaneConditionTone,
   getComposingXRRef,
 } from '../resource-utils-crossplane'
+import { CrossplanePauseNotice } from './CrossplanePauseContext'
 import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface ManagedResourceRendererProps {
@@ -34,7 +35,6 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
   const deletionPolicy = getDeletionPolicy(data)
   const apiGroup = extractApiGroup(data?.apiVersion)
   const namespace = data?.metadata?.namespace || ''
-  const paused = isCrossplanePaused(data)
   const composingXR = getComposingXRRef(data)
 
   const forProvider = data?.spec?.forProvider
@@ -45,14 +45,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
 
   return (
     <>
-      {paused && (
-        <AlertBanner
-          variant="warning"
-          icon={Pause}
-          title="Reconciliation paused"
-          message="The crossplane.io/paused annotation is set. The provider will not reconcile this resource until the annotation is removed."
-        />
-      )}
+      <CrossplanePauseNotice data={data} />
 
       {alertVariant && statusReason && !operationalIssuesShown && (
         <AlertBanner
@@ -126,7 +119,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
         </Section>
       )}
 
-      <ConditionsSection conditions={data?.status?.conditions} />
+      <ConditionsSection conditions={data?.status?.conditions} getConditionTone={condition => getCrossplaneConditionTone(data, condition)} />
     </>
   )
 }

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

@@ -0,0 +1,73 @@
+import { useMemo, useState } from 'react'
+import { Badge } from '../../ui/Badge'
+import { healthToSeverity } from '../../../utils/badge-colors'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { getCollectorPipelines, getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from '../resource-utils-opentelemetry'
+
+export function OpenTelemetryCollectorRenderer({ data }: { data: any }) {
+  const state = getOpenTelemetryCollectorStatus(data)
+  const preview = useMemo(() => getCollectorPipelines(data), [data])
+  const [showAll, setShowAll] = useState(false)
+  const ready = data.status?.conditions?.find((c: any) => c.type === 'Ready')
+  const components = (names: string[], separator = ', ') => names.slice(0, 10).map(name => `${name}${preview.connectors.includes(name) ? ' (connector)' : ''}`).join(separator) + (names.length > 10 ? `; ${names.length - 10} more in YAML` : '') || 'None'
+  return <>
+    <Section title="Collector" defaultExpanded>
+      <PropertyList>
+        <Property label="Reconciliation" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        <Property label="Mode" value={data.spec?.mode} />
+        <Property label="Management" value={data.spec?.managementState} />
+        <Property label={data.spec?.mode === 'daemonset' ? 'Reported ready / scheduled Pods' : 'Reported ready / observed Pods'} value={data.status?.scale?.statusReplicas} />
+        <Property label="Version" value={data.status?.version} />
+        {data.status?.image && <Property label="Image" value={<span className="break-all">{data.status.image}</span>} />}
+      </PropertyList>
+      <p className="mt-2 text-xs text-theme-text-tertiary">Reconciled means the operator applied its configuration. Pod counts are its last reported snapshot. Inspect owned workloads for current readiness; neither proves telemetry delivery.</p>
+      {state.text === 'Status stale' && <p className="mt-2 text-sm text-theme-text-secondary">The reported reconciliation describes an earlier configuration generation.</p>}
+      {ready?.message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{ready.message}</p>}
+    </Section>
+    <Section title={preview.error ? 'Configured Pipelines' : `Configured Pipelines (${preview.pipelines.length})`} defaultExpanded>
+      {preview.error ? <p className="text-sm text-theme-text-secondary">{preview.error}</p> : preview.pipelines.length === 0 ? <p className="text-sm text-theme-text-tertiary">No pipelines are declared in this configuration.</p> : <>
+        <div className="space-y-3">
+          {(showAll ? preview.pipelines : preview.pipelines.slice(0, 5)).map(pipeline => <div key={pipeline.name} className="card-inner min-w-0 break-words">
+            <div className="mb-2 text-sm font-medium text-theme-text-primary">{pipeline.name}</div>
+            <PropertyList>
+              <Property label="Receivers" value={components(pipeline.receivers)} />
+              <Property label="Processors" value={components(pipeline.processors, ' → ')} />
+              <Property label="Exporters" value={components(pipeline.exporters)} />
+            </PropertyList>
+          </div>)}
+        </div>
+        {preview.pipelines.length > 5 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowAll(!showAll)}>{showAll ? 'Show fewer pipelines' : `Show all ${preview.pipelines.length} pipelines`}</button>}
+        <p className="mt-2 text-xs text-theme-text-tertiary">Declared component names, not observed data flow. Connectors pass data between pipelines within the collector.</p>
+      </>}
+    </Section>
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={condition => ['Status stale', 'Unmanaged'].includes(state.text) ? 'unknown' : condition.type === 'Ready' && condition.status === 'False' ? condition.reason === 'StatusUpdateFailed' ? 'unknown' : 'fail' : 'neutral'} />
+  </>
+}
+
+export function OpenTelemetryInstrumentationRenderer({ data }: { data: any }) {
+  const spec = data.spec ?? {}
+  const state = getOpenTelemetryInstrumentationStatus(data)
+  const blocked = Object.keys(data.status?.upgradeBlockedVersions ?? {})
+  const runtimeImages = ['java', 'nodejs', 'python', 'dotnet', 'go', 'apacheHttpd', 'nginx', 'php', 'ruby'].filter(language => spec[language]?.image)
+  return <>
+    <Section title="Auto-instrumentation Configuration" defaultExpanded>
+      <PropertyList>
+        <Property label="Configuration" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        {spec.exporter?.endpoint && <Property label="OTLP endpoint" value={<span className="break-all">{spec.exporter.endpoint}</span>} />}
+        <Property label="Propagators" value={spec.propagators?.join(', ')} />
+        <Property label="Sampler" value={spec.sampler?.type} />
+        <Property label="Sampler argument" value={spec.sampler?.argument} />
+        {blocked.length > 0 && <Property label="Blocked image upgrades" value={blocked.join(', ')} />}
+      </PropertyList>
+      <p className="mt-2 text-xs text-theme-text-tertiary">These settings configure injection into annotated workloads. This resource does not report which Pods were injected or whether telemetry reaches the endpoint.</p>
+      {blocked.length > 0 && <p className="mt-2 text-sm text-theme-text-secondary">The operator could not automatically upgrade the listed runtime images. Inspect status in YAML and the operator logs before choosing a supported image.</p>}
+    </Section>
+    {blocked.length > 0 && <Section title="Blocked Image Upgrades" defaultExpanded>
+      <PropertyList>{blocked.map(language => <Property key={language} label={language} value={<span className="whitespace-pre-wrap break-words">{String(data.status.upgradeBlockedVersions[language]).slice(0, 1000)}{String(data.status.upgradeBlockedVersions[language]).length > 1000 ? '… Inspect YAML for the full explanation.' : ''}</span>} />)}</PropertyList>
+    </Section>}
+    {/* Runtime image defaults are secondary to endpoint/sampler and upgrade failures. */}
+    {runtimeImages.length > 0 && <Section title="Runtime Images" defaultExpanded={false}><PropertyList>
+      {runtimeImages.map(language => <Property key={language} label={language} value={<span className="break-all">{spec[language].image}</span>} />)}
+    </PropertyList></Section>}
+  </>
+}

package/src/components/resources/renderers/crossplane-cells.tsx

@@ -21,7 +21,7 @@ import {
   getXRDKind,
 } from '../resource-utils-crossplane'
 
-function StatusBadge({ resource, getStatus }: { resource: any; getStatus: (r: any) => { text: string; color: string } }) {
+export function CrossplaneStatusCell({ resource, getStatus = getCrossplaneStatus }: { resource: any; getStatus?: (r: any) => { text: string; color: string } }) {
   const status = getStatus(resource)
   const reason = getCrossplaneStatusReason(resource)
   const badge = (
@@ -35,7 +35,7 @@ function StatusBadge({ resource, getStatus }: { resource: any; getStatus: (r: an
 export function ManagedResourceCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getCrossplaneStatus} />
     case 'external': {
       const name = getExternalName(resource)
       if (!name) return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -60,7 +60,7 @@ export function ManagedResourceCell({ resource, column }: { resource: any; colum
 export function CompositeResourceCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getCrossplaneStatus} />
     case 'composition': {
       const ref = getCompositionRef(resource)
       if (!ref) return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -82,7 +82,7 @@ export function CompositeResourceCell({ resource, column }: { resource: any; col
 export function CrossplaneProviderCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getProviderStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getProviderStatus} />
     case 'package': {
       const pkg = getProviderPackage(resource)
       return (
@@ -108,7 +108,7 @@ export function CrossplaneProviderCell({ resource, column }: { resource: any; co
 export function CrossplaneProviderConfigCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getProviderConfigStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getProviderConfigStatus} />
     case 'credentials':
       return <span className="text-sm text-theme-text-secondary">{getProviderConfigCredentialsSource(resource)}</span>
     default:

package/src/components/resources/renderers/index.ts

@@ -192,3 +192,6 @@ export { RayServiceRenderer } from './RayServiceRenderer'
 export { RayClusterRenderer } from './RayClusterRenderer'
 
 export { RayJobRenderer } from './RayJobRenderer'
+
+export { OpenTelemetryCollectorRenderer, OpenTelemetryInstrumentationRenderer } from './OpenTelemetryRenderers'
+export { FlaggerCanaryRenderer, FlaggerMetricTemplateRenderer } from './FlaggerRenderers'

package/src/components/resources/resource-utils-crossplane.test.ts

@@ -675,3 +675,48 @@ describe('isCrossplanePaused', () => {
 
 // Pluralization moved to the shared kindToPlural in utils/navigation.ts
 // (discovery-aware, handles provider-defined irregular plurals).
+
+describe('Crossplane pause and independent status evidence', () => {
+  function paused(conditions: any[], annotation = 'true') {
+    return {
+      metadata: { generation: 9, annotations: { 'crossplane.io/paused': annotation } },
+      spec: { providerConfigRef: { name: 'default' } },
+      status: { conditions },
+    }
+  }
+  const pause = { type: 'Synced', status: 'False', reason: 'ReconcilePaused', message: 'pause observation', observedGeneration: 1 }
+
+  it('keeps acknowledged pause neutral with recorded availability despite generation changes', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, pause])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Ready (reported)', level: 'neutral' })
+    expect(getCrossplaneStatusReason(resource)).toBeNull()
+  })
+
+  it.each([undefined, 'Unknown'])('does not invent provisioning or readiness when acknowledged pause has Ready=%s', status => {
+    const resource = paused([...(status ? [{ type: 'Ready', status }] : []), pause])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Readiness unknown', level: 'neutral' })
+  })
+
+  it('preserves the independent Ready failure and its message over the pause observation', () => {
+    const resource = paused([pause, { type: 'Ready', status: 'False', reason: 'Unavailable', message: 'external API access denied' }])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Unavailable', level: 'unhealthy' })
+    expect(getCrossplaneStatusReason(resource)).toBe('external API access denied')
+  })
+
+  it('does not mask a reconcile error with requested pause', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, { ...pause, reason: 'ReconcileError', message: 'credentials rejected' }])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Out of sync', level: 'alert' })
+    expect(getCrossplaneStatusReason(resource)).toBe('credentials rejected')
+  })
+
+  it('keeps uncorroborated controller pause as an alert without inventing a failed resume', () => {
+    const resource = paused([pause], 'false')
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'ReconcilePaused', level: 'alert' })
+    expect(getCrossplaneStatusReason(resource)).toBe('pause observation')
+  })
+
+  it('preserves terminating over pause and recorded readiness', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, pause])
+    expect(getCrossplaneStatus({ ...resource, metadata: { ...resource.metadata, deletionTimestamp: '2026-10-26T08:00:00Z' } })).toMatchObject({ text: 'Terminating', level: 'degraded' })
+  })
+})

package/src/components/resources/resource-utils-crossplane.ts

@@ -7,6 +7,8 @@
 
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
+import { getGenericResourceStatus, type GenericStatus } from './generic-status'
+import type { ConditionTone } from '../ui/drawer-components'
 
 interface CrossplaneCondition {
   type: string
@@ -138,15 +140,37 @@ export function getDeletionPolicy(data: any): string | null {
   return data?.spec?.crossplane?.deletionPolicy ?? data?.spec?.deletionPolicy ?? null
 }
 
-/**
- * Crossplane convention: setting `crossplane.io/paused: "true"` on any MR/XR/Claim
- * stops the provider from reconciling it. Universal across every provider, so
- * surfacing it as a chip on every Crossplane resource is high-leverage.
- */
 export function isCrossplanePaused(data: any): boolean {
   return data?.metadata?.annotations?.['crossplane.io/paused'] === 'true'
 }
 
+export function isExpectedCrossplanePauseCondition(data: any, condition: CrossplaneCondition): boolean {
+  return isCrossplanePaused(data) && condition?.type === 'Synced'
+    && condition.status === 'False' && condition.reason === 'ReconcilePaused'
+}
+
+export function getCrossplanePauseState(data: any): 'requested' | 'acknowledged' | null {
+  if (!isCrossplanePaused(data)) return null
+  const conditions = data?.status?.conditions
+  return Array.isArray(conditions) && conditions.some((condition: CrossplaneCondition) => isExpectedCrossplanePauseCondition(data, condition))
+    ? 'acknowledged' : 'requested'
+}
+
+export function getCrossplaneIndependentStatus(data: any): GenericStatus | null {
+  if (getCrossplanePauseState(data) !== 'acknowledged') return getGenericResourceStatus(data)
+  return getGenericResourceStatus({
+    ...data,
+    status: {
+      ...data.status,
+      conditions: data.status.conditions.filter((condition: CrossplaneCondition) => !isExpectedCrossplanePauseCondition(data, condition)),
+    },
+  })
+}
+
+export function getCrossplaneConditionTone(data: any, condition: CrossplaneCondition): ConditionTone | undefined {
+  return isExpectedCrossplanePauseCondition(data, condition) ? 'neutral' : undefined
+}
+
 /**
  * Walk ownerReferences to find the parent Composite for a Managed Resource.
  * Crossplane sets exactly one ownerRef pointing at the composing XR. Returns
@@ -186,16 +210,24 @@ export function getCrossplaneStatus(data: any): StatusBadge {
   }
   const ready = findCondition(data, 'Ready')
   const synced = findCondition(data, 'Synced')
+  const independent = !isManagedResource(data) && !isComposite(data) && getCrossplanePauseState(data) === 'acknowledged'
+    ? getCrossplaneIndependentStatus(data) : null
+  if (independent && (independent.tone === 'unhealthy' || independent.tone === 'alert' || independent.tone === 'degraded')) {
+    return { text: independent.text, color: healthColors[independent.tone], level: independent.tone }
+  }
 
   if (!ready && !synced) {
     return { text: 'Pending', color: healthColors.neutral, level: 'neutral' }
   }
-  if (synced?.status === 'False') {
-    return { text: 'Out of sync', color: healthColors.alert, level: 'alert' }
+  if (synced?.status === 'False' && !isExpectedCrossplanePauseCondition(data, synced)) {
+    return { text: synced.reason === 'ReconcilePaused' ? 'ReconcilePaused' : 'Out of sync', color: healthColors.alert, level: 'alert' }
   }
   if (ready?.status === 'False') {
     return { text: ready.reason || 'Not ready', color: healthColors.unhealthy, level: 'unhealthy' }
   }
+  if (getCrossplanePauseState(data) === 'acknowledged') {
+    return { text: ready?.status === 'True' ? 'Ready (reported)' : 'Readiness unknown', color: healthColors.neutral, level: 'neutral' }
+  }
   if (ready?.status === 'True' && synced?.status === 'True') {
     return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
   }
@@ -211,8 +243,12 @@ export function getCrossplaneStatus(data: any): StatusBadge {
  * detail views.
  */
 export function getCrossplaneStatusReason(data: any): string | null {
+  const independent = !isManagedResource(data) && !isComposite(data) && getCrossplanePauseState(data) === 'acknowledged'
+    ? getCrossplaneIndependentStatus(data) : null
+  if (independent && (independent.tone === 'unhealthy' || independent.tone === 'alert' || independent.tone === 'degraded')) return independent.reason ?? null
   const ready = findCondition(data, 'Ready')
-  const synced = findCondition(data, 'Synced')
+  const reportedSynced = findCondition(data, 'Synced')
+  const synced = reportedSynced && !isExpectedCrossplanePauseCondition(data, reportedSynced) ? reportedSynced : undefined
   if (synced && synced.status !== 'True' && synced.message) return synced.message
   if (ready && ready.status !== 'True' && ready.message) return ready.message
   if (synced && synced.status !== 'True' && synced.reason) return synced.reason

package/src/components/resources/resource-utils-flagger.test.tsx

@@ -0,0 +1,82 @@
+import { issueTitle } from '../issues/severity'
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { renderToString } from 'react-dom/server'
+import { getFlaggerCanaryStatus, getFlaggerStrategy, getFlaggerTargetRef, getFlaggerAutoscalerRef, getFlaggerMetricTemplateRef } from './resource-utils-flagger'
+import { getGenericResourceStatus } from './generic-status'
+import { getCellFilterValue } from './resource-utils'
+import { ResourceRendererDispatch, getResourceStatus } from '../shared/ResourceRendererDispatch'
+
+const vectors = JSON.parse(readFileSync(new URL('../../../../../pkg/health/testdata/flagger.json', import.meta.url), 'utf8'))
+describe('Flagger recorded rollout state across surfaces', () => {
+  it('names the failed operation in Issues', () => {
+    expect(issueTitle({ category: 'operator_condition_fail', reason: 'FlaggerCanaryFailed' })).toBe('Canary rollout failed')
+  })
+  for (const vector of vectors) it(vector.name, () => {
+    expect(getFlaggerCanaryStatus(vector.object)).toMatchObject({ text: vector.text, level: vector.level })
+    expect(getGenericResourceStatus(vector.object)).toMatchObject({ text: vector.text, tone: vector.level })
+    expect(getResourceStatus('canaries', vector.object)).toMatchObject({ text: vector.text, level: vector.level })
+    expect(getCellFilterValue(vector.object, 'status', 'canaries')).toBe(vector.text)
+  })
+})
+
+describe('Flagger controller reference semantics', () => {
+  const resource = (spec: any) => ({ metadata: { namespace: 'application' }, spec })
+  it('resolves native targets with the controller factory, including the Knative Service collision', () => {
+    expect(getFlaggerTargetRef(resource({ targetRef: { kind: 'Deployment', apiVersion: 'foreign.example/v1', name: 'app' } }))).toMatchObject({ group: 'apps', name: 'app', namespace: 'application' })
+    expect(getFlaggerTargetRef(resource({ targetRef: { kind: 'Service', apiVersion: 'serving.knative.dev/v1', name: 'app' } }))).toMatchObject({ group: 'serving.knative.dev' })
+    expect(getFlaggerTargetRef(resource({ targetRef: { kind: 'Service', apiVersion: 'other.example/v1', name: 'app' } }))).toMatchObject({ group: '' })
+    expect(getFlaggerTargetRef(resource({ targetRef: { kind: 'FutureKind', name: 'app' } }))).toBeNull()
+  })
+  it('links exact supported scalers and always uses the typed MetricTemplate client', () => {
+    expect(getFlaggerAutoscalerRef(resource({ autoscalerRef: { kind: 'HorizontalPodAutoscaler', name: 'app' } }))).toMatchObject({ group: 'autoscaling', namespace: 'application' })
+    expect(getFlaggerAutoscalerRef(resource({ autoscalerRef: { kind: 'ScaledObject', name: 'app' } }))).toMatchObject({ group: 'keda.sh' })
+    expect(getFlaggerMetricTemplateRef(resource({}), { templateRef: { apiVersion: 'ignored.example/v1', kind: 'Ignored', name: 'latency', namespace: 'monitoring' } })).toMatchObject({ group: 'flagger.app', name: 'latency', namespace: 'monitoring' })
+    expect(getFlaggerMetricTemplateRef(resource({}), { templateRef: { name: 'latency' } })).toMatchObject({ namespace: 'application' })
+    expect(getFlaggerMetricTemplateRef(resource({}), { name: 'request-success-rate' })).toBeNull()
+  })
+  it('distinguishes strategies, including the actually served deprecated analysis field', () => {
+    expect(getFlaggerStrategy(resource({ analysis: { iterations: 3 } }))).toBe('Blue/green')
+    expect(getFlaggerStrategy(resource({ analysis: { iterations: 3, match: [{}] } }))).toBe('A/B testing')
+    expect(getFlaggerStrategy(resource({ canaryAnalysis: { iterations: 3, mirror: true } }))).toBe('Blue/green with mirroring')
+    expect(getFlaggerStrategy(resource({ analysis: { stepWeight: 10 } }))).toBe('Canary')
+  })
+})
+
+describe('Flagger drawer identity and useful states', () => {
+  function render(apiVersion: string, kind: string, spec = {}, status = {}) {
+    return renderToString(<ResourceRendererDispatch resource={{ kind: kind === 'Canary' ? 'canaries' : 'metrictemplates', namespace: 'test', name: 'test' }} data={{ apiVersion, kind, metadata: { name: 'test', namespace: 'test' }, spec, status }} onCopy={() => {}} copied={null} showCommonSections={false} />)
+  }
+  it('preserves zero reported weight, failure under suspension, and keeps built-in metrics distinct', () => {
+    const html = render('flagger.app/v1beta1', 'Canary', { suspend: true, analysis: { stepWeight: 10, metrics: [{ name: 'request-success-rate' }, { name: 'custom', query: 'sensitive-inline-query' }] } }, { phase: 'Failed', canaryWeight: 0 })
+    expect(html).toContain('0%')
+    expect(html).toContain('Failed')
+    expect(html).toContain('Built-in provider metric')
+    expect(html).toContain('Inline query')
+    expect(html).toContain('sensitive-inline-query')
+  })
+  it('does not show weight for blue/green or provider headers in native details', () => {
+    expect(render('flagger.app/v1beta1', 'Canary', { analysis: { iterations: 2 } }, { canaryWeight: 10 })).not.toContain('Reported canary weight')
+    expect(render('flagger.app/v1beta1', 'MetricTemplate', { provider: { type: 'prometheus', headers: { 'X-Key': 'private-value' } }, query: 'vector(1)' })).not.toContain('private-value')
+  })
+  it('shows the controller-default rollout hook when type is omitted', () => {
+    const html = render('flagger.app/v1beta1', 'Canary', { analysis: { webhooks: [{ name: 'load-test' }, { name: 'approve', type: 'confirm-rollout' }] } }, { phase: 'Waiting' })
+    expect(html).toContain('load-test')
+    expect(html).toContain('rollout')
+    expect(html).toContain('approve')
+    expect(html).toContain('confirm-rollout')
+  })
+  it('describes an active confirmation wait only while not suspended', () => {
+    const analysis = { webhooks: [{ name: 'approve', type: 'confirm-rollout' }] }
+    expect(render('flagger.app/v1beta1', 'Canary', { analysis }, { phase: 'Waiting' })).toContain('Flagger is waiting for a confirmation hook')
+    const suspended = render('flagger.app/v1beta1', 'Canary', { suspend: true, analysis }, { phase: 'Waiting' })
+    expect(suspended).not.toContain('Flagger is waiting for a confirmation hook')
+    expect(suspended).toContain('approve')
+    expect(suspended).toContain('Recorded phase')
+  })
+  for (const kind of ['Canary', 'MetricTemplate']) it(`keeps foreign ${kind} generic`, () => {
+    const html = render('other.example/v1', kind, { custom: 'generic-visible' })
+    expect(html).toContain('generic-visible')
+    expect(html).not.toContain(kind === 'Canary' ? 'Canary Rollout' : 'Metric Provider')
+  })
+})

package/src/components/resources/resource-utils-flagger.ts

@@ -0,0 +1,76 @@
+import { isApiGroup } from './resource-utils-cnpg'
+import type { ResourceRef } from '../../types'
+import { objectReferenceToResourceRef } from '../../utils/navigation'
+import type { StatusBadge } from './resource-utils'
+import { healthColors } from './resource-utils'
+
+export function getFlaggerCanaryStatus(data: any): StatusBadge {
+  const phase = data.status?.phase
+  let text = phase || 'Not reported'
+  let level: StatusBadge['level'] = 'unknown'
+  if (phase === 'Failed') level = 'unhealthy'
+  else if (!phase && data.spec?.suspend === true) { text = 'Suspend requested'; level = 'neutral' }
+  else if (phase === 'Succeeded') level = data.spec?.suspend === true ? 'neutral' : 'healthy'
+  else if (['Initializing', 'Initialized', 'Waiting', 'Progressing', 'WaitingPromotion', 'Promoting', 'Finalising', 'Terminating', 'Terminated'].includes(phase)) level = 'neutral'
+  return { text, level, color: healthColors[level] }
+}
+
+// Both fields exist in the served v1beta1 schema. The controller's GetAnalysis
+// explicitly prefers analysis and still accepts deprecated canaryAnalysis.
+export function getFlaggerAnalysis(data: any): any {
+  return data.spec?.analysis ?? data.spec?.canaryAnalysis ?? {}
+}
+
+export function getFlaggerStrategy(data: any): string {
+  const analysis = getFlaggerAnalysis(data)
+  if (analysis.iterations > 0) {
+    if (analysis.match?.length > 0) return 'A/B testing'
+    return analysis.mirror ? 'Blue/green with mirroring' : 'Blue/green'
+  }
+  return analysis.mirror ? 'Canary with mirroring' : 'Canary'
+}
+
+// Match the pinned controller factory: it chooses its native clients by kind,
+// not arbitrary targetRef.apiVersion (except the exact Knative Service case).
+export function getFlaggerTargetRef(data: any): ResourceRef | null {
+  const target = data.spec?.targetRef
+  if (!target?.name) return null
+  let apiVersion: string
+  if (target.kind === 'Deployment' || target.kind === 'DaemonSet') apiVersion = 'apps/v1'
+  else if (target.kind === 'Service') apiVersion = target.apiVersion === 'serving.knative.dev/v1' ? target.apiVersion : 'v1'
+  else return null
+  return objectReferenceToResourceRef({ ...target, apiVersion, namespace: data.metadata?.namespace })
+}
+
+export function getFlaggerAutoscalerRef(data: any): ResourceRef | null {
+  const scaler = data.spec?.autoscalerRef
+  const apiVersion = scaler?.kind === 'HorizontalPodAutoscaler' ? 'autoscaling/v2' : scaler?.kind === 'ScaledObject' ? 'keda.sh/v1alpha1' : null
+  return apiVersion ? objectReferenceToResourceRef({ ...scaler, apiVersion, namespace: data.metadata?.namespace }) : null
+}
+
+// scheduler_metrics.go reads only templateRef.name/namespace through its typed
+// MetricTemplate client. apiVersion/kind are ignored, so do not link elsewhere.
+export function getFlaggerMetricTemplateRef(data: any, metric: any): ResourceRef | null {
+  return metric.templateRef?.name ? objectReferenceToResourceRef({ apiVersion: 'flagger.app/v1beta1', kind: 'MetricTemplate', name: metric.templateRef.name, namespace: metric.templateRef.namespace || data.metadata?.namespace }) : null
+}
+
+export function getFlaggerColumnValue(data: any, column: string): string | undefined {
+  if (!isApiGroup(data?.apiVersion, 'flagger.app')) return undefined
+  if (data.kind === 'Canary') {
+    switch (column) {
+      case 'status': return getFlaggerCanaryStatus(data).text
+      case 'strategy': return getFlaggerStrategy(data)
+      case 'target': return data.spec?.targetRef?.name ? `${data.spec.targetRef.kind}/${data.spec.targetRef.name}` : ''
+      case 'canaryWeight': return getFlaggerAnalysis(data).iterations > 0 ? 'Not weighted' : data.status?.canaryWeight != null ? `${data.status.canaryWeight}%` : 'Not reported'
+      case 'suspended': return data.spec?.suspend === true ? 'Yes' : 'No'
+    }
+  }
+  if (data.kind === 'MetricTemplate') {
+    switch (column) {
+      case 'status': return 'Configured'
+      case 'provider': return data.spec?.provider?.type ?? ''
+      case 'address': return data.spec?.provider?.address ?? ''
+    }
+  }
+  return undefined
+}