@skyhook-io/k8s-ui 1.7.2 → 1.7.4

package/src/components/resources/ResourcesView.tsx

@@ -1776,6 +1776,13 @@ interface ResourcesViewProps {
    * namespace+name only.
    */
   resolveRowCluster?: (resource: any) => { id: string; name: string } | undefined
+  /**
+   * Clears the global namespace selection (the header NamespaceSwitcher state).
+   * When wired, the "Clear filters" button also drops the active namespaces;
+   * otherwise it only resets the view-local filter state. Host-owned because
+   * the switcher lives outside this component and may persist server-side.
+   */
+  onClearNamespaces?: () => void
 }
 
 // Default selected kind
@@ -1922,6 +1929,7 @@ export function ResourcesView({
   onRowSelect,
   onCompareSubmit,
   resolveRowCluster,
+  onClearNamespaces,
 }: ResourcesViewProps) {
   const initialFilters = getInitialFiltersFromURL()
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, defaultKind, locationPathname, locationSearch))
@@ -2684,6 +2692,25 @@ export function ResourcesView({
     navigate({ pathname: newPath, search: queryStr }, { replace: !pushHistory })
   }, [navigate, basePath])
 
+  const clearAllFilters = useCallback(() => {
+    setSearchTerm('')
+    setColumnFilters({})
+    setProblemFilters([])
+    setLabelSelector('')
+    setOwnerKind('')
+    setOwnerName('')
+    setShowInactiveReplicaSets(false)
+    // Filter-only URL params. Path + kind + namespace + other cross-view
+    // params are out of scope here; the host's onClearNamespaces (and its
+    // own state→URL sync) owns namespace cleanup.
+    const params = new URLSearchParams(window.location.search)
+    for (const key of ['search', 'filters', 'problems', 'labels', 'ownerKind', 'ownerName', 'showInactive']) {
+      params.delete(key)
+    }
+    navigate({ pathname: window.location.pathname, search: params.toString() }, { replace: true })
+    onClearNamespaces?.()
+  }, [navigate, onClearNamespaces])
+
   // Update URL when any filter changes
   useEffect(() => {
     // Skip URL update if we're syncing FROM the URL (e.g., browser back button)
@@ -3505,6 +3532,17 @@ export function ResourcesView({
 
   // Check if any filters are active
   const hasOwnerFilter = ownerKind !== '' && ownerName !== ''
+  // Namespace contribution gated on a host-wired clearer: without it the
+  // Clear filters button can't drop the namespace, so showing it would be
+  // a no-op for that case.
+  const hasAnyFilter =
+    !!searchTerm ||
+    !!labelSelector ||
+    hasOwnerFilter ||
+    problemFilters.length > 0 ||
+    Object.values(columnFilters).some((vals) => vals.length > 0) ||
+    showInactiveReplicaSets ||
+    (!!onClearNamespaces && namespaces.length > 0)
 
 
   // Toggle problem filter
@@ -3799,6 +3837,19 @@ export function ResourcesView({
             </span>
           )}
 
+          {hasAnyFilter && (
+            <Tooltip content={!!onClearNamespaces && namespaces.length > 0 ? 'Reset all filters and the active namespace' : 'Reset all filters'}>
+              <button
+                type="button"
+                onClick={clearAllFilters}
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                <span>Clear filters</span>
+              </button>
+            </Tooltip>
+          )}
+
           {lastUpdated && <LastUpdatedLabel lastUpdated={lastUpdated} />}
           {/* Column picker */}
           <div className="relative" ref={columnPickerRef}>
@@ -3978,6 +4029,16 @@ export function ResourcesView({
                   </div>
                 )
               })()}
+              {hasAnyFilter && (
+                <button
+                  type="button"
+                  onClick={clearAllFilters}
+                  className="flex items-center gap-1.5 mt-3 px-3 py-1.5 text-sm rounded-md bg-theme-elevated hover:bg-theme-border text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+                >
+                  <RotateCcw className="w-3.5 h-3.5" />
+                  Clear filters
+                </button>
+              )}
             </div>
           ) : (
             <MetricsContext.Provider value={metricsLookup}>

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
+import { RBACErrorSection } from './RBACErrorSection'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
 
@@ -197,11 +198,7 @@ function NamespaceRBACSection({
     )
   }
   if (error) {
-    return (
-      <Section title="RBAC" icon={Shield}>
-        <div className="text-sm text-red-400">Could not load RBAC summary: {error.message}</div>
-      </Section>
-    )
+    return <RBACErrorSection title="RBAC" error={error} errorPrefix="Could not load RBAC summary" />
   }
   if (!rbacData) return null
 

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

@@ -10,6 +10,7 @@ import {
   rbacApiGroupBadgeClass,
 } from '../../../utils/rbac-badges'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
@@ -877,13 +878,11 @@ function PodPermissionsSection({
     )
   }
   if (error) {
-    return (
-      <Section title={title} icon={Shield}>
-        <div className="text-sm text-red-400">
-          Could not load permissions: {error.message}
-        </div>
-      </Section>
-    )
+    // Permissions is a bonus section here; when RBAC is simply not available
+    // (cluster-static) or forbidden, hide it rather than repeat a note on every
+    // Pod. Genuine faults still surface.
+    if (isRBACUnavailable(error)) return null
+    return <RBACErrorSection title={title} error={error} />
   }
   if (!rbacData) return null
 

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

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
+
+function err(message: string, status?: number): Error {
+  return Object.assign(new Error(message), status === undefined ? {} : { status })
+}
+
+describe('isRBACUnavailable', () => {
+  it('is true for the RBAC-cache 503 and any 403 (expected, non-actionable)', () => {
+    expect(isRBACUnavailable(err('RBAC cache not available', 503))).toBe(true)
+    expect(isRBACUnavailable(err('forbidden', 403))).toBe(true)
+  })
+
+  it('is false for genuine faults so they still surface', () => {
+    expect(isRBACUnavailable(err('Not connected to cluster', 503))).toBe(false)
+    expect(isRBACUnavailable(err('boom', 500))).toBe(false)
+    expect(isRBACUnavailable(err('Failed to fetch'))).toBe(false)
+  })
+})
+
+describe('RBACErrorSection', () => {
+  it('renders 503 (SA cannot read RBAC) as a calm note, not a red error', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('RBAC cache not available', 503)} />,
+    )
+    expect(html).toContain('RBAC visibility')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('renders a non-RBAC 503 (e.g. cluster disconnect) in red, not the calm RBAC note', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('Not connected to cluster', 503)} />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).not.toContain('RBAC visibility')
+  })
+
+  it('renders 403 (viewer lacks permission) as a calm note, not a red error', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('forbidden', 403)} />,
+    )
+    expect(html).toContain('permission to view RBAC bindings')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('renders genuine failures (500 / no status) in red with the prefix', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('boom', 500)} />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).toContain('Could not load permissions')
+    expect(html).toContain('boom')
+  })
+
+  it('honors a custom errorPrefix for genuine failures', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Bindings" error={err('boom')} errorPrefix="Could not load RBAC data" />,
+    )
+    expect(html).toContain('Could not load RBAC data')
+  })
+})

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

@@ -0,0 +1,72 @@
+import { Shield } from 'lucide-react'
+import type { ComponentType } from 'react'
+import { Section } from '../../ui/drawer-components'
+
+interface RBACErrorSectionProps {
+  title: string
+  error: Error
+  // Matches the icon of the section's success/loading state (Shield for most,
+  // Users for the Role bindings section) so the error state isn't jarring.
+  icon?: ComponentType<{ className?: string }>
+  // Prefix for the genuine-error line; copy differs slightly across renderers
+  // ("permissions" on Pod/Workload, "RBAC data" on ServiceAccount).
+  errorPrefix?: string
+}
+
+const errorStatus = (error: Error): number | undefined => (error as { status?: number }).status
+
+// 503 because Radar's SA can't read RBAC, so the informers never synced — a
+// cluster-static config state (same on every resource), not a failure. The message
+// check distinguishes it from a generic connectivity 503 ("Not connected to
+// cluster"), which is a real fault and must stay loud (red).
+const isRBACCacheUnavailable = (error: Error): boolean =>
+  errorStatus(error) === 503 && error.message.includes('RBAC cache')
+
+// 403 because the requesting user lacks list permission on bindings.
+const isRBACForbidden = (error: Error): boolean => errorStatus(error) === 403
+
+// True for the two expected, non-actionable RBAC states above. Surfaces that treat
+// the RBAC section as a bonus (Pod/Workload Permissions) hide it entirely for these.
+// Genuine faults — connectivity 503, 500, network errors — are deliberately NOT
+// included, so they still surface rather than being silently dropped.
+export function isRBACUnavailable(error: Error): boolean {
+  return isRBACForbidden(error) || isRBACCacheUnavailable(error)
+}
+
+// RBACErrorSection renders each expected state as a calm note (distinct copy per
+// state) and reserves the red treatment for genuine failures. It shares the two
+// sub-predicates with isRBACUnavailable so the "what counts as unavailable" rule
+// has a single source of truth and can't drift.
+export function RBACErrorSection({
+  title,
+  error,
+  icon = Shield,
+  errorPrefix = 'Could not load permissions',
+}: RBACErrorSectionProps) {
+  if (isRBACCacheUnavailable(error)) {
+    return (
+      <Section title={title} icon={icon}>
+        <div className="text-sm text-theme-text-tertiary">
+          RBAC visibility isn’t available — the identity Radar connects with can’t read
+          RBAC resources in this cluster.
+        </div>
+      </Section>
+    )
+  }
+  if (isRBACForbidden(error)) {
+    return (
+      <Section title={title} icon={icon}>
+        <div className="text-sm text-theme-text-tertiary">
+          You don’t have permission to view RBAC bindings here.
+        </div>
+      </Section>
+    )
+  }
+  return (
+    <Section title={title} icon={icon}>
+      <div className="text-sm text-red-400">
+        {errorPrefix}: {error.message}
+      </div>
+    </Section>
+  )
+}

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import type { RBACRoleResponse, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass, rbacVerbBadgeClass } from '../../../utils/rbac-badges'
+import { RBACErrorSection } from './RBACErrorSection'
 
 interface RoleRendererProps {
   data: any
@@ -216,13 +217,7 @@ function RoleBindingsSection({ rbacRoleData, loading, error, onNavigate }: RoleB
     )
   }
   if (error) {
-    return (
-      <Section title="Bindings" icon={Users}>
-        <div className="text-sm text-red-400">
-          Could not load bindings: {error.message}
-        </div>
-      </Section>
-    )
+    return <RBACErrorSection title="Bindings" error={error} icon={Users} errorPrefix="Could not load bindings" />
   }
   if (!rbacRoleData) return null
 

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

@@ -16,6 +16,7 @@ import {
   rbacKindBadgeClass,
 } from '../../../utils/rbac-badges'
 import { RBAC_BLAST_ESCALATION_VERBS } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection } from './RBACErrorSection'
 import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 
 interface ServiceAccountRendererProps {
@@ -194,13 +195,7 @@ function RBACSections({ rbacData, loading, error, onNavigate }: RBACSectionsProp
     )
   }
   if (error) {
-    return (
-      <Section title="Bindings" icon={Shield}>
-        <div className="text-sm text-red-400">
-          Could not load RBAC data: {error.message}
-        </div>
-      </Section>
-    )
+    return <RBACErrorSection title="Bindings" error={error} errorPrefix="Could not load RBAC data" />
   }
   if (!rbacData) return null
 

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

@@ -5,6 +5,7 @@ import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection,
 import { DialogPortal } from '../../ui/DialogPortal'
 import type { RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -379,11 +380,11 @@ function WorkloadPermissionsSection({
     )
   }
   if (error) {
-    return (
-      <Section title={title} icon={Shield}>
-        <div className="text-sm text-red-400">Could not load permissions: {error.message}</div>
-      </Section>
-    )
+    // Permissions is a bonus section here; when RBAC is simply not available
+    // (cluster-static) or forbidden, hide it rather than repeat a note on every
+    // workload. Genuine faults still surface.
+    if (isRBACUnavailable(error)) return null
+    return <RBACErrorSection title={title} error={error} />
   }
   if (!rbacData) return null
 

package/src/components/ui/ClusterName.tsx

@@ -91,10 +91,18 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
   const showFallback = !noBadge && !hasProvider && fallbackBadge != null
   const showRegion = parsed.region !== null && variant === 'stacked'
   const collapsed = parsed.raw !== parsed.clusterName
-  // Tooltip when there's something to disclose — either we collapsed the
-  // raw, or the displayed name is being middle-truncated to fit. Callers
-  // can opt out via `noTooltip` when the raw is already visible elsewhere.
-  const needsTooltip = !noTooltip && (collapsed || truncated)
+  // The styled <Tooltip> wrapper is gated ONLY on `collapsed` — a stable,
+  // string-derived fact. Truncation must NOT gate the wrapper: wrapping
+  // changes the layout box MiddleEllipsis measures, so a truncated↔untruncated
+  // flip oscillates through its ResizeObserver (the exact feedback its
+  // onTruncatedChange note warns against). For the truncation case we disclose
+  // the full name via MiddleEllipsis's native `title` instead — an attribute,
+  // not a layout change — so the measurement can't feed back.
+  const showRawTooltip = !noTooltip && collapsed
+  // Don't also set a native title when the raw is already shown via the
+  // wrapper (collapsed) — that would double up. Only the non-collapsed
+  // truncation path uses it; there raw === clusterName.
+  const truncationTitle = !noTooltip && !collapsed && truncated ? parsed.clusterName : undefined
 
   const body = (
     <span className={['inline-flex items-center gap-1.5 min-w-0', className ?? ''].join(' ')}>
@@ -102,7 +110,7 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
       {showFallback && fallbackBadge}
       {variant === 'stacked' ? (
         <span className="flex flex-col min-w-0 flex-1">
-          <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
+          <MiddleEllipsis text={parsed.clusterName} title={truncationTitle} onTruncatedChange={onTruncatedChange} />
           {showRegion && (
             <span className="text-[10px] text-theme-text-tertiary truncate">
               {parsed.provider} · {parsed.region}
@@ -110,12 +118,12 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
           )}
         </span>
       ) : (
-        <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
+        <MiddleEllipsis text={parsed.clusterName} title={truncationTitle} onTruncatedChange={onTruncatedChange} />
       )}
     </span>
   )
 
-  if (!needsTooltip) return body
+  if (!showRawTooltip) return body
 
   return (
     <Tooltip content={parsed.raw} delay={250}>

package/src/index.ts

@@ -40,6 +40,11 @@ export * from './components/topology'
 // Cluster audit (AuditCard, AuditAlerts, AuditFindingsTable)
 export * from './components/audit'
 
+// Checks remediation queue (ChecksView, shared types + severity vocabulary).
+// Host-agnostic: Hub feeds fleet-resolved data, OSS can feed a single-cluster
+// resolve.
+export * from './components/checks'
+
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 

package/src/utils/resource-icons.ts

@@ -145,7 +145,7 @@ const KIND_ICON_MAP: Record<string, LucideIcon> = {
   nodeclaim: Server,
   ec2nodeclass: Server,
   aksnodeclass: Server,
-  gcpnodeclass: Server,
+  gcenodeclass: Server,
 
   // KEDA
   scaledobject: Scaling,