@skyhook-io/k8s-ui 1.8.11 → 1.8.13

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/ResourcesView.tsx

@@ -33,7 +33,7 @@ import { ResourceBar } from '../ui/ResourceBar'
 import type { SelectedResource, APIResource } from '../../types'
 import { isForbiddenError } from '../../types/fetch-error'
 import type { NavigateToResource } from '../../utils/navigation'
-import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
+import { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute } from '../../utils/api-resources'
 import {
   getPodStatus,
   getPodRestarts,
@@ -129,6 +129,7 @@ import {
   getCellFilterValue,
   parseColumnFilters,
   serializeColumnFilters,
+  parseColumnFilterExcludes,
   podMatchesProblemCategory,
   SEVERITY_DOT_COLOR,
 } from './resource-utils'
@@ -2036,13 +2037,9 @@ function getInitialKindFromURL(
   }
   const group = new URLSearchParams(search).get('apiGroup') || ''
   if (kind) {
-    // Find matching resource from CORE_RESOURCES or use as-is
-    // Only match core resources when no apiGroup is specified (avoids collisions like KNative Service)
-    if (!group) {
-      const coreMatch = CORE_RESOURCES.find(r => r.kind === kind || r.name === kind)
-      if (coreMatch) {
-        return { name: coreMatch.name, kind: coreMatch.kind, group: coreMatch.group }
-      }
+    const coreMatch = findAPIResourceForRoute(undefined, kind, group)
+    if (coreMatch) {
+      return { name: coreMatch.name, kind: coreMatch.kind, group: coreMatch.group }
     }
     return { name: kind, kind: kind, group }
   }
@@ -2100,11 +2097,14 @@ export function deriveSidebarResourceCounts(
 function getInitialFiltersFromURL() {
   const params = new URLSearchParams(window.location.search)
   // Parse generic column filters
-  const columnFilters = parseColumnFilters(params.get('filters'))
+  const filtersParam = params.get('filters')
+  const columnFilters = parseColumnFilters(filtersParam)
+  const columnFilterExcludes = parseColumnFilterExcludes(filtersParam)
   const result = {
     search: params.get('search') || '',
     regex: params.get('regex') === 'true',
     columnFilters,
+    columnFilterExcludes,
     problemFilters: params.get('problems')?.split(',').filter(Boolean) || [],
     showInactive: params.get('showInactive') === 'true',
     labelSelector: params.get('labels') || '', // e.g., "app=caretta,version=v1"
@@ -2188,6 +2188,7 @@ export function ResourcesView({
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
   // Filter state
   const [columnFilters, setColumnFilters] = useState<Record<string, string[]>>(initialFilters.columnFilters)
+  const [columnFilterExcludes, setColumnFilterExcludes] = useState<Record<string, boolean>>(initialFilters.columnFilterExcludes)
   const [problemFilters, setProblemFilters] = useState<string[]>(initialFilters.problemFilters)
   const [openColumnFilter, setOpenColumnFilter] = useState<string | null>(null)
   const [columnFilterSearch, setColumnFilterSearch] = useState('')
@@ -2237,6 +2238,25 @@ export function ResourcesView({
       delete next[key]
       return next
     })
+    setColumnFilterExcludes(prev => {
+      if (!prev[key]) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+  }, [])
+
+  const setColumnFilterMode = useCallback((key: string, exclude: boolean) => {
+    setColumnFilterExcludes(prev => {
+      if (Boolean(prev[key]) === exclude) return prev
+      const next = { ...prev }
+      if (exclude) {
+        next[key] = true
+      } else {
+        delete next[key]
+      }
+      return next
+    })
   }, [])
 
   const toggleColumnFilterValue = useCallback((key: string, value: string) => {
@@ -2248,6 +2268,14 @@ export function ResourcesView({
         const updated = current.filter(v => v !== value)
         if (updated.length === 0) {
           delete next[key]
+          // The operator is meaningless with no selected values — drop it so a
+          // stale exclude flag doesn't linger in state or re-arm on reselect.
+          setColumnFilterExcludes(inv => {
+            if (!inv[key]) return inv
+            const nextInv = { ...inv }
+            delete nextInv[key]
+            return nextInv
+          })
         } else {
           next[key] = updated
         }
@@ -2550,6 +2578,12 @@ export function ResourcesView({
       delete next[key]
       return next
     })
+    setColumnFilterExcludes(prev => {
+      if (!(key in prev)) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
     if (sortColumn === key) {
       setSortColumn(null)
       setSortDirection(null)
@@ -2944,6 +2978,12 @@ export function ResourcesView({
       setColumnFilters(newFilters.columnFilters)
     }
 
+    // Update column filter operators (include/exclude) if changed
+    const excludeKeys = (m: Record<string, boolean>) => Object.keys(m).filter(k => m[k]).sort().join(',')
+    if (excludeKeys(newFilters.columnFilterExcludes) !== excludeKeys(columnFilterExcludes)) {
+      setColumnFilterExcludes(newFilters.columnFilterExcludes)
+    }
+
     // Reset the flag after a tick to allow normal URL updates
     requestAnimationFrame(() => {
       isSyncingFromURL.current = false
@@ -2969,6 +3009,7 @@ export function ResourcesView({
     search: string,
     regex: boolean,
     colFilters: Record<string, string[]>,
+    colExcludes: Record<string, boolean>,
     problems: string[],
     showInactive: boolean,
     resourceNs?: string,
@@ -2995,8 +3036,13 @@ export function ResourcesView({
     } else {
       params.delete('regex')
     }
-    // Write column filters as `filters` param; remove legacy `status` param
-    const filtersStr = serializeColumnFilters(colFilters)
+    // Write column filters as `filters` param; the exclude operator is folded
+    // into each column entry, so it can never drift from the values it negates.
+    // Guard against a stale exclude flag on a column with no active values.
+    const activeExcludes = Object.fromEntries(
+      Object.entries(colExcludes).filter(([k, on]) => on && (colFilters[k]?.length ?? 0) > 0)
+    )
+    const filtersStr = serializeColumnFilters(colFilters, activeExcludes)
     if (filtersStr) {
       params.set('filters', filtersStr)
     } else {
@@ -3058,6 +3104,7 @@ export function ResourcesView({
     setSearchTerm('')
     setRegexMode(false)
     setColumnFilters({})
+    setColumnFilterExcludes({})
     setProblemFilters([])
     setLabelSelector('')
     setOwnerKind('')
@@ -3124,8 +3171,8 @@ export function ResourcesView({
     shouldPushHistory.current = false
     prevSelectedResourceRef.current = current
 
-    updateURL(selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
-  }, [selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
+    updateURL(selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
+  }, [selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
 
   // Handle resource click from URL on mount
   useEffect(() => {
@@ -3425,6 +3472,7 @@ export function ResourcesView({
     setOpenColumnFilter(null)
     if (!isSyncingFromURL.current) {
       setColumnFilters({})
+      setColumnFilterExcludes({})
     }
     setProblemFilters([])
   }, [selectedKind.name])
@@ -3598,7 +3646,8 @@ export function ResourcesView({
         activeColFilters.every(([col, vals]) => {
           const extra = extraColumnsByKey.get(col)
           const cellVal = extra?.getFilterValue ? extra.getFilterValue(r) : getCellFilterValue(r, col, kindLower)
-          return vals.includes(cellVal)
+          const match = vals.includes(cellVal)
+          return columnFilterExcludes[col] ? !match : match
         })
       )
     }
@@ -3741,7 +3790,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
+  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -4693,7 +4742,7 @@ export function ResourcesView({
                         className="flex items-center gap-1 px-2 py-1 text-xs selection selection-text rounded-md hover:selection-strong transition-colors"
                       >
                         <ListFilter className="w-3 h-3" />
-                        <span>{key}: {vals.join(', ')}</span>
+                        <span>{key}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
                         <X className="w-3 h-3" />
                       </button>
                     ))}
@@ -4831,7 +4880,14 @@ export function ResourcesView({
                                 )}
                               >
                                 <ListFilter className="w-3 h-3" />
-                                {hasActiveFilter && <span className="text-[10px] leading-none font-semibold">{activeFilterValues.length}</span>}
+                                {hasActiveFilter && (
+                                  <span
+                                    className="text-[10px] leading-none font-semibold"
+                                    aria-label={`${activeFilterValues.length} ${columnFilterExcludes[col.key] ? 'excluded' : 'included'} value${activeFilterValues.length === 1 ? '' : 's'}`}
+                                  >
+                                    {columnFilterExcludes[col.key] ? `≠ ${activeFilterValues.length}` : activeFilterValues.length}
+                                  </span>
+                                )}
                               </button>
                               {hasActiveFilter && (
                                 <button
@@ -4865,6 +4921,34 @@ export function ResourcesView({
                               )}
                               onClick={(e) => e.stopPropagation()}
                             >
+                              <div className="flex items-center gap-1 p-1.5 border-b border-theme-border" role="group" aria-label={`${col.label} filter mode`}>
+                                <button
+                                  onClick={() => setColumnFilterMode(col.key, false)}
+                                  aria-pressed={!columnFilterExcludes[col.key]}
+                                  className={clsx(
+                                    'flex-1 px-2 py-1 text-xs rounded transition-colors',
+                                    !columnFilterExcludes[col.key]
+                                      ? 'selection-strong selection-text'
+                                      : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                                  )}
+                                  title="Show rows matching the selected values"
+                                >
+                                  Include
+                                </button>
+                                <button
+                                  onClick={() => setColumnFilterMode(col.key, true)}
+                                  aria-pressed={Boolean(columnFilterExcludes[col.key])}
+                                  className={clsx(
+                                    'flex-1 px-2 py-1 text-xs rounded transition-colors',
+                                    columnFilterExcludes[col.key]
+                                      ? 'selection-strong selection-text'
+                                      : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                                  )}
+                                  title="Show rows that do NOT match the selected values"
+                                >
+                                  Exclude
+                                </button>
+                              </div>
                               {values.length > 5 ? (
                                 <div className="flex items-center gap-2 p-2 border-b border-theme-border">
                                   <div className="relative flex-1">
@@ -5922,11 +6006,17 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
           <button
             onClick={(e) => {
               e.stopPropagation()
-              // Merge node filter into existing column filters via URL
+              // Merge node filter into existing column filters via URL,
+              // preserving any exclude operators already set on other columns.
               const params = new URLSearchParams(window.location.search)
               const existing = parseColumnFilters(params.get('filters'))
+              const existingExcludes = parseColumnFilterExcludes(params.get('filters'))
               existing['node'] = [nodeVal]
-              params.set('filters', serializeColumnFilters(existing))
+              // Clicking a node means "show pods on this node", so force the
+              // node column back to include mode even if it was previously
+              // set to exclude — otherwise the shortcut would hide those pods.
+              delete existingExcludes['node']
+              params.set('filters', serializeColumnFilters(existing, existingExcludes))
               navigate?.(`/resources/pods?${params.toString()}`)
             }}
             className="text-sm text-blue-400 hover:text-blue-300 hover:underline truncate block text-left"

package/src/components/resources/column-filter-serialization.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { parseColumnFilters, serializeColumnFilters } from './resource-utils'
+import {
+  parseColumnFilters,
+  serializeColumnFilters,
+  parseColumnFilterExcludes,
+} from './resource-utils'
 
 describe('column filter serialization round-trip', () => {
   it('round-trips built-in keys', () => {
@@ -23,4 +27,78 @@ describe('column filter serialization round-trip', () => {
   it('parses legacy unencoded built-in keys', () => {
     expect(parseColumnFilters('status:Running')).toEqual({ status: ['Running'] })
   })
+
+  it('treats a two-part filter as implicit include (no excludes)', () => {
+    expect(parseColumnFilterExcludes('status:Running')).toEqual({})
+  })
+})
+
+describe('column filter include/exclude operator', () => {
+  it('serializes excluded columns with the explicit exclude operator', () => {
+    const filters = { status: ['Running', 'Completed'], namespace: ['default'] }
+    const excludes = { status: true }
+    expect(serializeColumnFilters(filters, excludes)).toBe(
+      'status:exclude:Running,Completed|namespace:default'
+    )
+  })
+
+  it('round-trips values through an excluded column', () => {
+    const filters = { status: ['Running', 'Completed'] }
+    const serialized = serializeColumnFilters(filters, { status: true })
+    expect(parseColumnFilters(serialized)).toEqual(filters)
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ status: true })
+  })
+
+  it('parses the explicit include operator as non-excluded', () => {
+    expect(parseColumnFilters('namespace:include:default')).toEqual({ namespace: ['default'] })
+    expect(parseColumnFilterExcludes('namespace:include:default')).toEqual({})
+  })
+
+  it('keeps a value literally named "exclude" in the two-part form', () => {
+    expect(parseColumnFilters('reason:exclude')).toEqual({ reason: ['exclude'] })
+    expect(parseColumnFilterExcludes('reason:exclude')).toEqual({})
+  })
+
+  it('handles a value literally named "exclude" under the exclude operator', () => {
+    const serialized = serializeColumnFilters({ reason: ['exclude'] }, { reason: true })
+    expect(serialized).toBe('reason:exclude:exclude')
+    expect(parseColumnFilters(serialized)).toEqual({ reason: ['exclude'] })
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ reason: true })
+  })
+
+  it('does not emit an operator for an excluded column with no values', () => {
+    expect(serializeColumnFilters({ status: [] }, { status: true })).toBe('')
+    expect(parseColumnFilterExcludes('')).toEqual({})
+  })
+
+  it('preserves the exclude operator for custom-column keys', () => {
+    const filters = { 'label:tier': ['control-plane'] }
+    const serialized = serializeColumnFilters(filters, { 'label:tier': true })
+    expect(serialized).toBe('label%3Atier:exclude:control-plane')
+    expect(parseColumnFilters(serialized)).toEqual(filters)
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ 'label:tier': true })
+  })
+
+  it('returns empty structures for empty/absent params', () => {
+    expect(parseColumnFilters('')).toEqual({})
+    expect(parseColumnFilters(null)).toEqual({})
+    expect(parseColumnFilterExcludes(null)).toEqual({})
+    expect(serializeColumnFilters({})).toBe('')
+  })
+
+  it('ignores prototype-polluting keys from a crafted param', () => {
+    const parsed = parseColumnFilters('__proto__:Running|constructor:x|status:Running')
+    expect(parsed).toEqual({ status: ['Running'] })
+    expect(Object.prototype.hasOwnProperty.call(parsed, '__proto__')).toBe(false)
+    expect(({} as Record<string, unknown>).polluted).toBeUndefined()
+    expect(parseColumnFilterExcludes('__proto__:exclude:Running')).toEqual({})
+  })
+
+  it('lets the last segment win the mode when a column repeats', () => {
+    expect(parseColumnFilters('status:exclude:Running|status:Completed')).toEqual({ status: ['Completed'] })
+    expect(parseColumnFilterExcludes('status:exclude:Running|status:Completed')).toEqual({})
+
+    expect(parseColumnFilters('status:Running|status:exclude:Completed')).toEqual({ status: ['Completed'] })
+    expect(parseColumnFilterExcludes('status:Running|status:exclude:Completed')).toEqual({ status: true })
+  })
 })

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