@skyhook-io/k8s-ui 1.8.11 → 1.8.12

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { ResourceIssuesSection } from './ResourceIssuesSection'
+import { ResourceIssuesSection, sameResource } from './ResourceIssuesSection'
+import { IssueRow } from './IssuesView'
 import type { Issue } from './types'
 
 const issue: Issue = {
@@ -37,4 +38,35 @@ describe('ResourceIssuesSection', () => {
     expect(html).not.toContain('Context')
     expect(html).not.toContain('Blocked pods')
   })
+
+  it('shows the Subject deep-link by default', () => {
+    const html = renderToString(<IssueRow issue={issue} open onToggle={() => {}} onResourceClick={() => {}} />)
+    expect(html).toContain('Subject')
+  })
+
+  it('suppresses the Subject deep-link when the issue subject is the embedding resource', () => {
+    // apiKind (plural) must still resolve to the same identity as the wire kind.
+    const html = renderToString(<IssueRow issue={issue} open onToggle={() => {}} onResourceClick={() => {}} hideSubject />)
+    expect(html).not.toContain('Subject')
+  })
+})
+
+describe('sameResource', () => {
+  const subject = { kind: 'PersistentVolumeClaim', namespace: 'demo', name: 'data' }
+
+  it('matches across singular kind vs plural API name', () => {
+    expect(sameResource(subject, { kind: 'persistentvolumeclaims', namespace: 'demo', name: 'data' })).toBe(true)
+  })
+
+  it('treats a missing namespace as empty', () => {
+    expect(sameResource({ kind: 'Node', name: 'n1' }, { kind: 'nodes', namespace: '', name: 'n1' })).toBe(true)
+  })
+
+  it('does not match a different name', () => {
+    expect(sameResource(subject, { kind: 'persistentvolumeclaims', namespace: 'demo', name: 'other' })).toBe(false)
+  })
+
+  it('does not match a different kind', () => {
+    expect(sameResource(subject, { kind: 'configmaps', namespace: 'demo', name: 'data' })).toBe(false)
+  })
 })

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,15 +1,22 @@
 import { useMemo, useState } from 'react'
 import { AlertTriangle } from 'lucide-react'
+import { kindToPlural } from '../../utils/navigation'
 import { IssueRow } from './IssuesView'
-import { compareIssues, type Issue, type IssueResourceRef } from './types'
+import { compareIssues, subjectRef, type Issue, type IssueResourceRef } from './types'
 
 export function ResourceIssuesSection({
   issues,
   onResourceClick,
+  subjectResource,
 }: {
   issues: Issue[] | undefined
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
+  /** The resource this section is embedded under. When an issue's subject IS
+   *  this resource, its redundant "Subject" deep-link is suppressed — the drawer
+   *  header already names it. Omit (e.g. the standalone fleet queue) to always
+   *  show the subject. */
+  subjectResource?: IssueResourceRef
 }) {
   const sorted = useMemo(() => [...(issues ?? [])].sort(compareIssues), [issues])
   const [openId, setOpenId] = useState<string | null>(null)
@@ -32,6 +39,7 @@ export function ResourceIssuesSection({
               open={openId === key}
               onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
               onResourceClick={onResourceClick}
+              hideSubject={subjectResource ? sameResource(subjectRef(issue), subjectResource) : false}
             />
           )
         })}
@@ -40,6 +48,18 @@ export function ResourceIssuesSection({
   )
 }
 
+// Identity match tolerant of singular/plural + casing on kind (the subject ref
+// carries the wire kind, the host typically passes the plural API name) — group
+// is deliberately ignored: a per-resource issue feed is already scoped to one
+// resource, and kind+namespace+name uniquely identifies it there.
+export function sameResource(a: IssueResourceRef, b: IssueResourceRef): boolean {
+  return (
+    a.name === b.name &&
+    (a.namespace ?? '') === (b.namespace ?? '') &&
+    kindToPlural(a.kind).toLowerCase() === kindToPlural(b.kind).toLowerCase()
+  )
+}
+
 function issueKey(issue: Issue): string {
   return `${issue.cluster_id ?? ''}:${issue.id}`
 }

package/src/components/issues/severity.ts

@@ -101,6 +101,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   gitops_operation_failed: 'GitOps operation failed',
   gitops_out_of_sync: 'GitOps out of sync',
   gitops_health_degraded: 'GitOps health degraded',
+  gitops_stale: 'GitOps comparisons stale',
   helm_release_failed: 'Helm release failed',
   webhook_backend_down: 'Webhook backend down',
   control_plane_not_ready: 'Control plane not ready',

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

@@ -1,6 +1,6 @@
 import { Cpu, Network, Cloud } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAWSMachineStatus, getAWSMachineInstanceType, getAWSMachineInstanceState, getAWSMachineInstanceID } from '../resource-utils-aws-capi'
 
@@ -16,6 +16,7 @@ export function AWSMachineRenderer({ data }: Props) {
 
   const machineStatus = getAWSMachineStatus(data)
   const isFailed = machineStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const instanceState = getAWSMachineInstanceState(data)
@@ -23,7 +24,7 @@ export function AWSMachineRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="AWS Machine Not Ready"

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

@@ -1,5 +1,5 @@
 import { Globe, Server } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAWSManagedClusterStatus, getAWSManagedClusterEndpoint, getAWSManagedClusterFailureDomains } from '../resource-utils-aws-capi'
 
@@ -11,13 +11,14 @@ export function AWSManagedClusterRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const clusterStatus = getAWSManagedClusterStatus(data)
   const isFailed = clusterStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const failureDomains = getAWSManagedClusterFailureDomains(data)
   const endpoint = getAWSManagedClusterEndpoint(data)
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Managed Cluster Not Ready"

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

@@ -1,5 +1,5 @@
 import { Globe, Network, Shield, Server, Package } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import {
   getAWSMCPStatus, getAWSMCPEKSClusterName, getAWSMCPRegion, getAWSMCPVersion,
@@ -18,6 +18,7 @@ export function AWSManagedControlPlaneRenderer({ data }: Props) {
 
   const mcpStatus = getAWSMCPStatus(data)
   const isFailed = mcpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const vpc = getAWSMCPVPC(data)
@@ -29,7 +30,7 @@ export function AWSManagedControlPlaneRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="EKS Control Plane Not Ready"

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

@@ -1,6 +1,6 @@
 import { Server, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAWSMMPStatus, getAWSMMPInstanceType, getAWSMMPCapacityType, getAWSMMPAMIType, getAWSMMPNodegroupName, getAWSMMPScaling } from '../resource-utils-aws-capi'
 import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
@@ -17,6 +17,7 @@ export function AWSManagedMachinePoolRenderer({ data }: Props) {
 
   const mmpStatus = getAWSMMPStatus(data)
   const isFailed = mmpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const scaling = getAWSMMPScaling(data)
@@ -26,7 +27,7 @@ export function AWSManagedMachinePoolRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Managed Machine Pool Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cloud } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAzureMachineStatus, getAzureMachineVMSize, getAzureMachineProviderID } from '../resource-utils-azure-capi'
 
@@ -13,12 +13,13 @@ export function AzureMachineRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const machineStatus = getAzureMachineStatus(data)
   const isFailed = machineStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const providerID = getAzureMachineProviderID(data)
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="Azure Machine Not Ready" message={readyCond?.message || 'AzureMachine is not ready.'} />
       )}
 

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

@@ -1,5 +1,5 @@
 import { Globe, Shield, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAzureMCPStatus, getAzureMCPLocation, getAzureMCPVersion, getAzureMCPResourceGroup, getAzureMCPSKUTier, getAzureMCPNetworkPlugin, getAzureMCPNetworkPolicy, getAzureMCPDNSPrefix, getAzureMCPUpgradeChannel, getAzureMCPPrivateCluster } from '../resource-utils-azure-capi'
 
@@ -13,13 +13,14 @@ export function AzureManagedControlPlaneRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const mcpStatus = getAzureMCPStatus(data)
   const isFailed = mcpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const apiAccess = spec.apiServerAccessProfile || {}
   const authorizedRanges = apiAccess.authorizedIPRanges || []
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="AKS Control Plane Not Ready" message={readyCond?.message || 'AzureManagedControlPlane is not ready.'} />
       )}
 

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

@@ -1,6 +1,6 @@
 import { Server, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAzureMMPStatus, getAzureMMPSKU, getAzureMMPMode, getAzureMMPOSDiskInfo, getAzureMMPScaling, getAzureMMPScaleSetPriority, getAzureMMPOSType } from '../resource-utils-azure-capi'
 import { CAPACITY_TYPE_BADGE, NODEPOOL_MODE_BADGE } from '../../../utils/badge-colors'
@@ -16,6 +16,7 @@ export function AzureManagedMachinePoolRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const mmpStatus = getAzureMMPStatus(data)
   const isFailed = mmpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const scaling = getAzureMMPScaling(data)
   const mode = getAzureMMPMode(data)
@@ -26,7 +27,7 @@ export function AzureManagedMachinePoolRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="AKS Node Pool Not Ready" message={readyCond?.message || 'AzureManagedMachinePool is not ready.'} />
       )}
 

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Server, Globe, Network, Layers, Download, CheckCircle, AlertCircle } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -18,6 +18,7 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '' }: Props) {
 
   const clusterStatus = getClusterStatus(data)
   const isFailed = clusterStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready' || c.type === 'Available')
 
   const phase = status.phase || 'Unknown'
@@ -102,7 +103,7 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '' }: Props) {
         />
       )}
 
-      {isFailed && (() => {
+      {isFailed && !operationalIssuesShown && (() => {
         const msg = readyCond?.message || `Cluster is in ${phase} state.`
         const items = parseCAPIConditionMessage(msg)
         return <AlertBanner variant="error" title="Cluster Not Ready" items={items || undefined} message={items ? undefined : msg} />

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

@@ -1,5 +1,5 @@
 import { Server, Shield, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -16,6 +16,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
 
   const kcpStatus = getKCPStatus(data)
   const isFailed = kcpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const clusterName = getMachineClusterName(data)
@@ -33,7 +34,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Control Plane Not Ready"

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

@@ -1,5 +1,5 @@
 import { Server, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -16,6 +16,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
 
   const mdStatus = getMachineDeploymentStatus(data)
   const isFailed = mdStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const phase = status.phase || 'Unknown'
@@ -40,7 +41,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
         />
       )}
 
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="MachineDeployment Not Ready"

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

@@ -1,5 +1,5 @@
 import { HeartPulse, Settings, Shield } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, LabelSelectorDisplay, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getMachineHealthCheckStatus, getMachineHealthCheckClusterName } from '../resource-utils-capi'
 
 interface Props {
@@ -14,6 +14,7 @@ export function CAPIMachineHealthCheckRenderer({ data }: Props) {
 
   const mhcStatus = getMachineHealthCheckStatus(data)
   const isFailed = mhcStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const clusterName = getMachineHealthCheckClusterName(data)
@@ -31,7 +32,7 @@ export function CAPIMachineHealthCheckRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="MachineHealthCheck Issue"

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

@@ -1,5 +1,5 @@
 import { Server, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -16,6 +16,7 @@ export function CAPIMachinePoolRenderer({ data, onNavigate }: Props) {
 
   const mpStatus = getMachinePoolStatus(data)
   const isFailed = mpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const clusterName = spec.clusterName || data.metadata?.labels?.['cluster.x-k8s.io/cluster-name'] || '-'
@@ -27,7 +28,7 @@ export function CAPIMachinePoolRenderer({ data, onNavigate }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="MachinePool Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cpu, Server, Network, Cloud } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -16,6 +16,7 @@ export function CAPIMachineRenderer({ data, onNavigate }: Props) {
 
   const machineStatus = getMachineStatus(data)
   const isFailed = machineStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   // Find the most informative False condition for the alert message
   const falseCond = conditions.find((c: any) =>
@@ -38,7 +39,7 @@ export function CAPIMachineRenderer({ data, onNavigate }: Props) {
 
   return (
     <>
-      {isFailed && (() => {
+      {isFailed && !operationalIssuesShown && (() => {
         const msg = falseCond?.message || readyCond?.message || `Machine is in ${phase} state.`
         const items = parseCAPIConditionMessage(msg)
         return <AlertBanner variant="error" title="Machine Not Ready" items={items || undefined} message={items ? undefined : msg} />

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

@@ -1,5 +1,5 @@
 import { Server, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+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'
@@ -16,6 +16,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
 
   const msStatus = getMachineSetStatus(data)
   const isFailed = msStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const clusterName = getMachineClusterName(data)
@@ -29,7 +30,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="MachineSet Not Ready"

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

@@ -1,6 +1,6 @@
 import { Shield, Clock, Globe, Key } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { pluralize } from '../../../utils/pluralize'
 
 interface CertificateRendererProps {
@@ -34,6 +34,7 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const isReady = readyCond?.status === 'True'
   const isNotReady = readyCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const notAfter = status.notAfter
   const notBefore = status.notBefore
@@ -69,7 +70,7 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
   return (
     <>
       {/* Problem detection alerts */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Certificate Not Ready"

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

@@ -1,6 +1,6 @@
 import { Shield, FileText, Info } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 
 interface CertificateRequestRendererProps {
   data: any
@@ -20,6 +20,7 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
 
   const isReady = readyCond?.status === 'True'
   const isNotReady = readyCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const isApproved = approvedCond?.status === 'True'
   const isDenied = deniedCond?.status === 'True'
 
@@ -28,7 +29,7 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
   return (
     <>
       {/* Problem detection alerts */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Certificate Request Not Ready"

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

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import { Layers, GitBranch, Box, ChevronRight, Pause } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { Tooltip } from '../../ui/Tooltip'
 import {
   getCrossplaneStatus,
@@ -78,6 +78,7 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: Com
   const boundXR = claim ? getBoundXRRef(data) : null
   const paused = isCrossplanePaused(data)
   const alertVariant = status.level === 'unhealthy' || status.level === 'alert' ? status.level : null
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
@@ -90,7 +91,7 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: Com
         />
       )}
 
-      {alertVariant && reason && (
+      {alertVariant && reason && !operationalIssuesShown && (
         <AlertBanner
           variant={alertVariant === 'unhealthy' ? 'error' : 'warning'}
           title={status.text}

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

@@ -1,5 +1,5 @@
 import { KeyRound, RefreshCw, CloudCog } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import {
   getExternalSecretStatus,
   getExternalSecretStore,
@@ -30,11 +30,12 @@ export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRende
   // Problem detection
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const isNotReady = readyCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Alert if not synced */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="ExternalSecret Not Synced"

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

@@ -1,5 +1,5 @@
 import { Cpu, Cloud } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getGCPMachineStatus, getGCPMachineInstanceType, getGCPMachineZone, getGCPMachineInstanceID } from '../resource-utils-gcp-capi'
 
@@ -13,11 +13,12 @@ export function GCPMachineRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const machineStatus = getGCPMachineStatus(data)
   const isFailed = machineStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="GCP Machine Not Ready" message={readyCond?.message || 'GCPMachine is not ready.'} />
       )}
 

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

@@ -1,5 +1,5 @@
 import { Globe, Shield, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getGCPMCPStatus, getGCPMCPClusterName, getGCPMCPProject, getGCPMCPLocation, getGCPMCPVersion, getGCPMCPReleaseChannel, getGCPMCPAutopilot, getGCPMCPEndpoint } from '../resource-utils-gcp-capi'
 
@@ -13,13 +13,14 @@ export function GCPManagedControlPlaneRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const mcpStatus = getGCPMCPStatus(data)
   const isFailed = mcpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const endpoint = getGCPMCPEndpoint(data)
   const masterAuth = spec.master_authorized_networks_config
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="GKE Control Plane Not Ready" message={readyCond?.message || 'GCPManagedControlPlane is not ready.'} />
       )}
 

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

@@ -1,5 +1,5 @@
 import { Server, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getGCPMMPStatus, getGCPMMPNodePoolName, getGCPMMPMachineType, getGCPMMPDiskInfo, getGCPMMPScaling, getGCPMMPImageType } from '../resource-utils-gcp-capi'
 
@@ -14,6 +14,7 @@ export function GCPManagedMachinePoolRenderer({ data }: Props) {
   const conditions = getCAPIConditions(data)
   const mmpStatus = getGCPMMPStatus(data)
   const isFailed = mmpStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const scaling = getGCPMMPScaling(data)
   const management = spec.management || {}
@@ -23,7 +24,7 @@ export function GCPManagedMachinePoolRenderer({ data }: Props) {
 
   return (
     <>
-      {isFailed && (
+      {isFailed && !operationalIssuesShown && (
         <AlertBanner variant="error" title="GKE Node Pool Not Ready" message={readyCond?.message || 'GCPManagedMachinePool is not ready.'} />
       )}