@skyhook-io/k8s-ui 1.8.11 → 1.8.13

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.'} />
       )}
 

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

@@ -1,5 +1,5 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
@@ -23,6 +23,10 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
   const unresolvedRefsParents = parentStatuses.filter((p: any) =>
     (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
   )
+  // The Operational Issues section (when the host shows it) already reports these
+  // Accepted/ResolvedRefs failures with richer cause + next-step context, so drop
+  // the renderer's own banners to avoid showing the same failure twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const firstParentConditions = parentStatuses.length > 0
     ? parentStatuses[0].conditions
@@ -47,7 +51,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
 
   return (
     <>
-      {notAcceptedParents.length > 0 && (
+      {notAcceptedParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Route Not Accepted"
@@ -61,7 +65,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
         />
       )}
 
-      {unresolvedRefsParents.length > 0 && (
+      {unresolvedRefsParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="warning"
           title="Unresolved References"

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

@@ -1,5 +1,5 @@
 import { Cpu } 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 { Badge } from '../../ui/Badge'
 
 interface GatewayClassRendererProps {
@@ -14,11 +14,12 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
   const acceptedCond = conditions.find((c: any) => c.type === 'Accepted')
   const isAccepted = acceptedCond?.status === 'True'
   const isNotAccepted = acceptedCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Problem detection alert */}
-      {isNotAccepted && (
+      {isNotAccepted && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="GatewayClass Not Accepted"

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

@@ -1,5 +1,5 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
@@ -23,6 +23,10 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
   const unresolvedRefsParents = parentStatuses.filter((p: any) =>
     (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
   )
+  // The Operational Issues section (when the host shows it) already reports these
+  // Accepted/ResolvedRefs failures with richer cause + next-step context, so drop
+  // the renderer's own banners to avoid showing the same failure twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const firstParentConditions = parentStatuses.length > 0
     ? parentStatuses[0].conditions
@@ -47,7 +51,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
 
   return (
     <>
-      {notAcceptedParents.length > 0 && (
+      {notAcceptedParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Route Not Accepted"
@@ -61,7 +65,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
         />
       )}
 
-      {unresolvedRefsParents.length > 0 && (
+      {unresolvedRefsParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="warning"
           title="Unresolved References"

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

@@ -1,5 +1,5 @@
 import { Server, HardDrive, Shield, Network, Tag, Image } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { getEC2NodeClassStatus } from '../resource-utils-karpenter'
 
 interface KarpenterEC2NodeClassRendererProps {
@@ -13,6 +13,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
 
   const nodeClassStatus = getEC2NodeClassStatus(data)
   const isNotReady = nodeClassStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const amiTerms = spec.amiSelectorTerms || []
@@ -28,7 +29,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
 
   return (
     <>
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="EC2NodeClass Not Ready"

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

@@ -1,6 +1,6 @@
 import { Server, Cpu, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
-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 { CAPACITY_TYPE_BADGE, BADGE_INACTIVE } from '../../../utils/badge-colors'
 import {
@@ -40,6 +40,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
 
   const claimStatus = getNodeClaimStatus(data)
   const isNotReady = claimStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const capacity = getNodeClaimCapacity(data)
   const requirements = getNodeClaimRequirements(data)
@@ -61,7 +62,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="NodeClaim Not Ready"

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

@@ -1,5 +1,5 @@
 import { Server, Settings, Shield, Cpu, Tag, BarChart3 } 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 {
   getNodePoolStatus,
@@ -31,6 +31,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
 
   const poolStatus = getNodePoolStatus(data)
   const isNotReady = poolStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const requirements = getNodePoolRequirements(data)
   const weight = getNodePoolWeight(data)
@@ -45,7 +46,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="NodePool Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cpu } 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 {
   getScaledJobStatus,
   getScaledJobTarget,
@@ -18,13 +18,14 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
 
   const jobStatus = getScaledJobStatus(data)
   const isNotReady = jobStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const triggers = getScaledJobTriggers(data)
 
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="ScaledJob Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cpu, 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 {
   getScaledObjectStatus,
@@ -39,6 +39,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
   const isPaused = soStatus.text === 'Paused'
   const isFallback = soStatus.text === 'Fallback'
   const isNotReady = soStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const fallbackCond = conditions.find((c: any) => c.type === 'Fallback')
@@ -53,7 +54,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
           message={fallbackCond?.message || 'KEDA is using fallback replicas because triggers are failing.'}
         />
       )}
-      {isNotReady && !isFallback && (
+      {isNotReady && !isFallback && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="ScaledObject Not Ready"

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

@@ -1,5 +1,5 @@
 import { Box, Settings, Cloud, ScrollText, Pause, Layers } 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 { CodeViewer } from '../../ui/CodeViewer'
 import {
   getCrossplaneStatus,
@@ -41,6 +41,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
   const atProvider = data?.status?.atProvider
 
   const alertVariant = status.level === 'unhealthy' || status.level === 'alert' ? status.level : null
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
@@ -53,7 +54,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
         />
       )}
 
-      {alertVariant && statusReason && (
+      {alertVariant && statusReason && !operationalIssuesShown && (
         <AlertBanner
           variant={alertVariant === 'unhealthy' ? 'error' : 'warning'}
           title={status.text}

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { HardDrive } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 
 interface PVCRendererProps {
   data: any
@@ -38,11 +38,12 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
   const selectedNode = annotations['volume.kubernetes.io/selected-node']
   const bindCompleted = annotations['pv.kubernetes.io/bind-completed']
   const hasProvisionerInfo = provisioner || selectedNode || bindCompleted
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Problem alerts */}
-      {isLost && (
+      {isLost && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Issues Detected"

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

@@ -1,6 +1,6 @@
 import { Lock, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 
 interface SealedSecretRendererProps {
   data: any
@@ -32,6 +32,7 @@ export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererP
   const syncedCond = conditions.find((c: any) => c.type === 'Synced')
   const isSynced = syncedCond?.status === 'True'
   const isNotSynced = syncedCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const hasTemplateMetadata =
     (templateLabels && Object.keys(templateLabels).length > 0) ||
@@ -40,7 +41,7 @@ export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererP
   return (
     <>
       {/* Problem detection alert */}
-      {isNotSynced && (
+      {isNotSynced && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Secret is not synced"