@skyhook-io/k8s-ui 1.17.1 → 1.18.0

package/src/components/resources/ResourcesView.kind-view.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act } from 'react'
+import { act, type ComponentProps } from 'react'
 import { createRoot } from 'react-dom/client'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ResourcesView } from './ResourcesView'
@@ -83,7 +83,7 @@ it('closes bulk dialogs when the same kind switches to a custom view and keeps t
   expect(document.querySelector('[role="dialog"]')).toBeNull()
   render(false)
   expect(host.textContent).not.toContain('1 selected')
-  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(host.querySelector<HTMLInputElement>('input[title="Select all"]')!.checked).toBe(false)
   expect(document.querySelector('[role="dialog"]')).toBeNull()
   act(() => host.querySelector<SVGElement>('button .lucide-git-compare')!.closest<HTMLButtonElement>('button')!.click())
   act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
@@ -147,3 +147,150 @@ it('skips hidden-table sort and filter aggregation for a loaded list, then resum
   expect(getSortValue).toHaveBeenCalled()
   expect(getFilterValue).toHaveBeenCalled()
 })
+
+const deployments: APIResource = { group: 'apps', version: 'v1', kind: 'Deployment', name: 'deployments', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+const widgets: APIResource = { group: 'example.com', version: 'v1', kind: 'Widget', name: 'widgets', namespaced: true, isCrd: true, verbs: ['get', 'list'] }
+const checkboxKey = 'radar-resource-checkboxes'
+const key = (value: string) => act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: value, bubbles: true })))
+const required = <T extends Element>(selector: string, parent: ParentNode = host): T => {
+  const element = parent.querySelector<T>(selector)
+  if (!element) throw new Error(`Missing element: ${selector}`)
+  return element
+}
+const clickButton = (label: string, parent: ParentNode = host) => {
+  const button = [...parent.querySelectorAll('button')].find(candidate => candidate.textContent?.trim() === label)
+  if (!button) throw new Error(`Missing button: ${label}`)
+  act(() => button.click())
+}
+const renderBulkTable = (initialKind = pods, bulkEnabled = true) => {
+  const selected = vi.fn()
+  const remove = vi.fn<NonNullable<ComponentProps<typeof ResourcesView>['onBulkDelete']>>()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const render = (kind = initialKind, items = [pod]) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods, deployments, widgets]}
+    resourceCounts={{ [kind.kind]: items.length }}
+    selectedKindQuery={{ isLoading: false, data: items, resourceName: kind.name, group: kind.group }}
+    locationPathname={`/resources/${kind.name}`}
+    locationSearch={kind.group ? `?apiGroup=${kind.group}` : ''}
+    onNavigate={() => {}}
+    onResourceClick={selected}
+    onBulkDelete={bulkEnabled ? remove : undefined}
+  /></KeyboardShortcutProvider>))
+  render()
+  return { selected, remove, render }
+}
+
+it.each([pods, deployments, widgets])('hides selection by default on $kind and enables it without an empty action bar', kind => {
+  renderBulkTable(kind)
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  act(() => required<HTMLButtonElement>('button[aria-label="Show selection checkboxes"]').click())
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('0 selected')
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('remembers both visibility choices across remounts without remembering selected rows', () => {
+  renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  expect(host.textContent).toContain('1 selected')
+  act(() => root.unmount()); host.remove()
+  renderBulkTable(deployments)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  key('b')
+  expect(localStorage.getItem(checkboxKey)).toBe('false')
+  act(() => root.unmount()); host.remove()
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('keeps keyboard activation for inspection while checkboxes select', () => {
+  const { selected } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  expect(selected).not.toHaveBeenCalled()
+  expect(host.textContent).toContain('1 selected')
+  key('j'); key('Enter')
+  expect(selected).toHaveBeenCalledTimes(1)
+  expect(host.textContent).toContain('1 selected')
+  key('Escape')
+  expect(host.textContent).not.toContain('1 selected')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  clickButton('Clear selection')
+  expect(host.textContent).not.toContain('1 selected')
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('temporarily hides checkboxes for compare and clears selection on kind changes', () => {
+  const { render } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  act(() => required<HTMLButtonElement>('button:has(.lucide-git-compare)').click())
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  key('Escape')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  render(deployments)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(host.textContent).not.toContain('1 selected')
+  render(widgets)
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('can show selection from compare without turning off the saved preference', () => {
+  localStorage.setItem(checkboxKey, 'true')
+  renderBulkTable()
+  act(() => required<HTMLButtonElement>('button:has(.lucide-git-compare)').click())
+  key('b')
+  expect(host.querySelector('[aria-label="Compare resources tray"]')).toBeNull()
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it('keeps delete confirmation and clears successful selection without hiding checkboxes', () => {
+  const { remove } = renderBulkTable()
+  key('b')
+  act(() => required<HTMLInputElement>('input[title="Select all"]').click())
+  clickButton('Delete')
+  const dialog = required<HTMLElement>('[role="dialog"]', document)
+  expect(dialog.textContent).toContain('Delete 1 Pod?')
+  expect(remove).not.toHaveBeenCalled()
+  clickButton('Delete 1 resource', dialog)
+  expect(remove).toHaveBeenCalledWith([{ kind: 'pods', group: '', namespace: 'test', name: 'example' }], expect.objectContaining({ force: false }))
+  act(() => remove.mock.calls[0]?.[1]?.onSuccess?.())
+  expect(host.textContent).not.toContain('1 selected')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})
+
+it.each(['false', 'garbage', 'null', '1'])('ignores invalid or disabled visibility value %s', value => {
+  localStorage.setItem(checkboxKey, value)
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('keeps toggling usable when browser storage is unavailable', () => {
+  vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('Storage unavailable') })
+  vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Storage unavailable') })
+  renderBulkTable()
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).not.toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+})
+
+it('does not offer selection without a bulk action callback even with saved visibility', () => {
+  localStorage.setItem(checkboxKey, 'true')
+  renderBulkTable(pods, false)
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(host.querySelector('button .lucide-list-checks')).toBeNull()
+  key('b')
+  expect(host.querySelector('input[title="Select all"]')).toBeNull()
+  expect(localStorage.getItem(checkboxKey)).toBe('true')
+})

package/src/components/resources/ResourcesView.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useMemo, useEffect, useCallback, useDeferredValue, useRef, useContext, useId } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useDebouncedValue } from '../../hooks/useDebouncedValue'
+import { Badge } from '../ui/Badge'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
 import { FetchResult } from '../ui/FetchResult'
 import { Input } from '../ui/Input'
+import { ColumnPickerList } from './ColumnPickerList'
+import { applyColumnOrder, sanitizeColumnOrder } from './column-order'
 import type { TopPodMetrics, TopNodeMetrics, ContainerResourceMetrics } from '../../types'
 import {
   Search,
@@ -161,6 +164,8 @@ import { isRolloutActivityVisible } from '../../utils/workload-rollout'
 import { FreshnessControl, type FreshnessConnection } from '../ui/FreshnessControl'
 import { Tooltip } from '../ui/Tooltip'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
+import type { Issue } from '../issues/types'
+import { issueTitle } from '../issues/severity'
 import { SEVERITY_TEXT_CLASS } from '../checks/severity'
 // CRD-specific cell components (extracted)
 import { GitRepositoryCell, OCIRepositoryCell, HelmRepositoryCell, KustomizationCell, FluxHelmReleaseCell, FluxAlertCell } from './renderers/flux-cells'
@@ -3255,6 +3260,7 @@ function filterHostExtras(
 
 // localStorage helpers for column settings
 const COLUMN_SETTINGS_PREFIX = 'radar-columns-'
+const CHECKBOX_VISIBILITY_KEY = 'radar-resource-checkboxes'
 
 // Storage identity for a kind's column settings. normalizeKindToPlural falls
 // through to the bare plural for anything outside the curated collision
@@ -3280,6 +3286,8 @@ interface ColumnSettings {
    *  load tell a column they hid from one that did not exist yet. Absent on
    *  blobs written before this field. */
   known?: string[]
+  /** Optional display order for movable columns, including hidden ones. */
+  order?: string[]
 }
 
 function loadColumnSettings(kind: string, group?: string): ColumnSettings | null {
@@ -3342,6 +3350,9 @@ interface ResourcesViewData {
   // cluster-scoped kind. An ExternalSecret names a store; only the store
   // knows which backend it reads from.
   storeProviders?: Record<string, string>
+  /** Current CronJob Issues keyed by "namespace/name", supplied by the host. */
+  operationalIssuesIncomplete?: boolean
+  operationalIssues?: Record<string, Issue>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3406,6 +3417,9 @@ interface ResourcesViewProps {
   // cluster-scoped kind. An ExternalSecret names a store; only the store
   // knows which backend it reads from.
   storeProviders?: Record<string, string>
+  /** Current CronJob Issues keyed by "namespace/name", supplied by the host. */
+  operationalIssuesIncomplete?: boolean
+  operationalIssues?: Record<string, Issue>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3692,6 +3706,8 @@ export function ResourcesView({
   certExpiryError,
   storeProviders,
   auditBadges,
+  operationalIssues,
+  operationalIssuesIncomplete,
   pinned = [],
   togglePin = () => {},
   isPinned = () => false,
@@ -3747,7 +3763,6 @@ export function ResourcesView({
   }, [selectedKind.name, selectedKind.group]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    setBulkMode(false)
     setCheckedResources(new Set())
     setShowBulkDeleteConfirm(false)
     setShowBulkRestartConfirm(false)
@@ -3808,6 +3823,7 @@ export function ResourcesView({
   // Column visibility and resize state
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(new Set())
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
+  const [columnOrder, setColumnOrder] = useState<string[] | null>(null)
   const [showColumnPicker, setShowColumnPicker] = useState(false)
   const [customColumns, setCustomColumns] = useState<CustomColumnDef[]>([])
   const [customColumnDraft, setCustomColumnDraft] = useState<CustomColumnDef>({ source: 'label', path: '' })
@@ -3820,10 +3836,10 @@ export function ResourcesView({
   const [ownerKind, setOwnerKind] = useState<string>(initialFilters.ownerKind)
   const [ownerName, setOwnerName] = useState<string>(initialFilters.ownerName)
 
-  // Multi-select state for bulk operations. Checkboxes only render while
-  // bulk mode is active — entered via the toolbar toggle — so mutating
-  // actions stay out of the way during normal browsing.
-  const [bulkMode, setBulkMode] = useState(false)
+  const [showCheckboxes, setShowCheckboxes] = useState(() => {
+    try { return localStorage.getItem(CHECKBOX_VISIBILITY_KEY) === 'true' }
+    catch { return false }
+  })
   const [checkedResources, setCheckedResources] = useState<Set<string>>(new Set())
   const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
   const [showBulkRestartConfirm, setShowBulkRestartConfirm] = useState(false)
@@ -3831,8 +3847,7 @@ export function ResourcesView({
   const [bulkForceDelete, setBulkForceDelete] = useState(false)
   const [bulkScaleReplicas, setBulkScaleReplicas] = useState(0)
 
-  const exitBulkMode = useCallback(() => {
-    setBulkMode(false)
+  const clearBulkSelection = useCallback(() => {
     setCheckedResources(new Set())
   }, [])
 
@@ -3949,13 +3964,16 @@ export function ResourcesView({
     [printerTable, builtPrinterColumns],
   )
 
-  const allColumns = useMemo(() => {
+  const definedColumns = useMemo(() => {
     const kindColumns = columnsForKindWithPrinter(selectedKind.name, selectedKind.group, builtPrinterColumns)
     if (!extraLeadingColumns?.length && !builtCustomColumns.length) return kindColumns
     const builtinKeys = new Set(kindColumns.map(c => c.key))
     const filteredExtras = filterHostExtras(extraLeadingColumns, builtinKeys, selectedKind.name)
     return [...filteredExtras, ...kindColumns, ...builtCustomColumns]
   }, [selectedKind.name, selectedKind.group, extraLeadingColumns, builtCustomColumns, builtPrinterColumns])
+  // Display order. Everything downstream reads this, so the picker, the header
+  // and the resize width snapshot (which maps <th> index to key) agree.
+  const allColumns = useMemo(() => applyColumnOrder(definedColumns, columnOrder), [definedColumns, columnOrder])
 
   // The offered key set, and a stable signature for it. allColumns is a new
   // identity on every printer-column refetch; depending on the array itself
@@ -4090,15 +4108,18 @@ export function ResourcesView({
         hadSavedColumnSettings.current = false
         setVisibleColumns(getDefaultVisibleColumns(effective))
         setColumnWidths({})
+        setColumnOrder(null)
       } else {
         setVisibleColumns(mergeSavedVisibleColumns(
           saved.visible, extraKeys, builtPrinterColumns, effective, savedKnown,
         ))
         setColumnWidths(saved.widths || {})
+        setColumnOrder(sanitizeColumnOrder(saved.order))
       }
     } else {
       setVisibleColumns(getDefaultVisibleColumns(effective))
       setColumnWidths({})
+      setColumnOrder(null)
     }
     // printerColumnsKey, not builtPrinterColumns: the built array is a new
     // identity on every refetch, and re-running this effect would reset the
@@ -4120,12 +4141,13 @@ export function ResourcesView({
       widths: columnWidths,
       custom: customColumns,
       known: Array.from(knownColumnKeys.current),
+      order: columnOrder ?? undefined,
     })
     // A persisted blob blocks GPU auto-show from here on — same rule in-session
     // as across sessions, so a later data refresh can't override user choices.
     hadSavedColumnSettings.current = true
     // allColumnKeysSig, not allColumnKeys: see the memo above.
-  }, [visibleColumns, columnWidths, customColumns, selectedKind.name, selectedKind.group, allColumnKeysSig, tableActive])
+  }, [visibleColumns, columnWidths, customColumns, columnOrder, selectedKind.name, selectedKind.group, allColumnKeysSig, tableActive])
 
   // Close column picker on outside click or Escape
   useEffect(() => {
@@ -4233,6 +4255,7 @@ export function ResourcesView({
     const customKeys = new Set(builtCustomColumns.map(c => c.key))
     setVisibleColumns(getDefaultVisibleColumns(allColumns.filter(c => !customKeys.has(c.key))))
     setColumnWidths({})
+    setColumnOrder(null)
     setSortColumn(null)
     setSortDirection(null)
     saveSavedSort(selectedKind.name, selectedKind.group, null)
@@ -4552,14 +4575,11 @@ export function ResourcesView({
     {
       id: 'resources-bulk-select',
       keys: 'b',
-      description: 'Toggle bulk select',
+      description: 'Show or hide selection checkboxes',
       category: 'Table',
       scope: 'resources',
       handler: () => {
-        if (bulkMode) { exitBulkMode(); return }
-        if (!canBulkSelect) return
-        exitCompareMode()
-        setBulkMode(true)
+        if (canBulkSelect) toggleCheckboxVisibility()
       },
     },
     {
@@ -4574,7 +4594,7 @@ export function ResourcesView({
         if (showProblemsDropdown) { setShowProblemsDropdown(false); return }
         if (showLabelsDropdown) { setShowLabelsDropdown(false); return }
         if (compareMode) { exitCompareMode(); return }
-        if (bulkMode) { exitBulkMode(); return }
+        if (checkedResources.size > 0) { clearBulkSelection(); return }
         if (highlightedIndex >= 0) setHighlightedIndex(-1)
         else searchInputRef.current?.blur()
       },
@@ -5292,6 +5312,15 @@ export function ResourcesView({
     saveSavedSort(selectedKind.name, selectedKind.group, newColumn && newDirection ? { column: newColumn, direction: newDirection } : null)
   }, [sortColumn, sortDirection, canSortBy, selectedKind.name, selectedKind.group])
 
+  const getDisplayFilterValue = useCallback((resource: { metadata?: { namespace?: string; name?: string } }, column: string, kind: string): string => {
+    if (column === 'status' && selectedKind.group === 'batch' && kind === 'cronjobs') {
+      const issue = operationalIssues?.[`${resource.metadata?.namespace ?? ''}/${resource.metadata?.name ?? ''}`]
+      if (issue) return issueTitle(issue)
+      if (operationalIssuesIncomplete) return 'Unknown'
+    }
+    return getCellFilterValue(resource, column, kind)
+  }, [operationalIssues, operationalIssuesIncomplete, selectedKind.group])
+
   // Get sortable value from a resource for a given column
   const getSortValue = useCallback((resource: any, column: string, kind?: string): string | number => {
     const meta = resource.metadata || {}
@@ -5320,7 +5349,7 @@ export function ResourcesView({
         if (hasCuratedColumns(selectedKind.name, selectedKind.group) && status.phase) {
           return status.phase
         }
-        return getCellFilterValue(resource, 'status', kindLower)
+        return getDisplayFilterValue(resource, 'status', kindLower)
       case 'servers':
         // Numeric so 10 does not sort before 9.
         if (kindLower === 'istiogateways') return getIstioGatewayServerCount(resource)
@@ -5410,7 +5439,7 @@ export function ResourcesView({
       default:
         return ''
     }
-  }, [metricsLookup, selectedKind.name, selectedKind.group])
+  }, [metricsLookup, selectedKind.name, selectedKind.group, getDisplayFilterValue])
 
   // Helper to check if a pod matches problem filters
   const podMatchesProblemFilter = useCallback((pod: any, filters: string[]): boolean => {
@@ -5467,7 +5496,7 @@ export function ResourcesView({
       result = result.filter((r: any) =>
         activeColFilters.every(([col, vals]) => {
           const extra = extraColumnsByKey.get(col)
-          const cellVal = extra?.getFilterValue ? extra.getFilterValue(r) : getCellFilterValue(r, col, cellFilterKind)
+          const cellVal = extra?.getFilterValue ? extra.getFilterValue(r) : getDisplayFilterValue(r, col, cellFilterKind)
           const match = vals.includes(cellVal)
           return columnFilterExcludes[col] ? !match : match
         })
@@ -5621,7 +5650,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [tableActive, resources, deferredSearchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, effectiveSortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
+  }, [tableActive, resources, deferredSearchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, effectiveSortColumn, sortDirection, getSortValue, getDisplayFilterValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -5746,16 +5775,25 @@ export function ResourcesView({
     setCheckedResources(allVisibleChecked ? new Set() : new Set(filteredResources.map(getResourceKey)))
   }, [allVisibleChecked, filteredResources, getResourceKey])
 
-  const isCheckboxMode = canBulkSelect && bulkMode
+  const toggleCheckboxVisibility = useCallback(() => {
+    const next = compareMode || !showCheckboxes
+    exitCompareMode()
+    clearBulkSelection()
+    setShowCheckboxes(next)
+    try { localStorage.setItem(CHECKBOX_VISIBILITY_KEY, String(next)) }
+    catch { /* Keep the choice for this session when storage is unavailable. */ }
+  }, [compareMode, showCheckboxes, exitCompareMode, clearBulkSelection])
+
+  const isCheckboxMode = canBulkSelect && !compareMode && showCheckboxes
+  const showBulkBar = isCheckboxMode && checkedItems.length > 0
 
   // Stable row handlers so the memoized ResourceRowCells skips re-rendering
   // rows whose data didn't change on a refetch (React Query's structural
   // sharing keeps unchanged resources referentially identical).
   const handleRowClick = useCallback((resource: any, isSelected: boolean) => {
     if (compareMode) toggleComparePick(resource)
-    else if (isCheckboxMode) toggleChecked(resource)
     else selectResource(resource, isSelected)
-  }, [compareMode, isCheckboxMode, toggleComparePick, toggleChecked, selectResource])
+  }, [compareMode, toggleComparePick, selectResource])
   const handleRowMouseEnter = useCallback(() => setHighlightedIndex(-1), [])
 
   // Filter columns by visibility
@@ -5847,7 +5885,7 @@ export function ResourcesView({
       // Count distinct values for this column
       const valueCounts: Record<string, number> = {}
       for (const r of resources) {
-        const val = extra?.getFilterValue ? extra.getFilterValue(r) : getCellFilterValue(r, col.key, cellFilterKind)
+        const val = extra?.getFilterValue ? extra.getFilterValue(r) : getDisplayFilterValue(r, col.key, cellFilterKind)
         if (val) {
           valueCounts[val] = (valueCounts[val] || 0) + 1
         }
@@ -5930,7 +5968,7 @@ export function ResourcesView({
 
     if (filterableColumns.length === 0 && !problems && labelValues.length === 0) return null
     return { columns: filterableColumns, problems, labels: labelValues }
-  }, [tableActive, resources, selectedKind.name, selectedKind.group, allColumns])
+  }, [tableActive, resources, selectedKind.name, selectedKind.group, allColumns, getDisplayFilterValue])
 
   // Map filterable columns by key for O(1) lookup in header rendering
   const filterableColumnMap = useMemo(() => {
@@ -6005,9 +6043,11 @@ export function ResourcesView({
     certExpiry,
     certExpiryError,
     auditBadges,
+    operationalIssues,
+    operationalIssuesIncomplete,
     onOpenLogs,
     onOpenWorkloadLogs,
-  }), [onNavigate, certExpiry, certExpiryError, auditBadges, onOpenLogs, onOpenWorkloadLogs])
+  }), [onNavigate, certExpiry, certExpiryError, auditBadges, operationalIssues, operationalIssuesIncomplete, onOpenLogs, onOpenWorkloadLogs])
 
   return (
     <ResourcesViewDataContext.Provider value={resourcesViewDataContextValue}>
@@ -6316,41 +6356,14 @@ export function ResourcesView({
                 {/* Column list scrolls; the add-column footer stays pinned so
                     its input isn't pushed below the fold on kinds with many columns. */}
                 <div className="overflow-y-auto flex-1 min-h-0">
-                {allColumns.map(col => {
-                  const isCustom = customColumnKeySet.has(col.key)
-                  return (
-                    <div
-                      key={col.key}
-                      className="group flex items-center gap-2 px-3 py-1.5 hover:bg-theme-elevated"
-                    >
-                      <label className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={visibleColumns.has(col.key)}
-                          onChange={() => toggleColumnVisibility(col.key)}
-                          disabled={col.key === 'name'}
-                          className="rounded border-theme-border"
-                        />
-                        <span className={clsx(
-                          'text-sm truncate',
-                          col.key === 'name' ? 'text-theme-text-tertiary' : 'text-theme-text-primary'
-                        )} title={col.tooltip || col.label}>
-                          {col.label}
-                        </span>
-                      </label>
-                      {isCustom && (
-                        <button
-                          type="button"
-                          onClick={() => removeCustomColumn(col.key)}
-                          className="shrink-0 p-0.5 text-theme-text-tertiary hover:text-red-500 opacity-0 group-hover:opacity-100 focus:opacity-100"
-                          title="Remove column"
-                        >
-                          <X className="w-3.5 h-3.5" />
-                        </button>
-                      )}
-                    </div>
-                  )
-                })}
+                <ColumnPickerList
+                  columns={allColumns}
+                  visibleColumns={visibleColumns}
+                  customColumnKeys={customColumnKeySet}
+                  onToggle={toggleColumnVisibility}
+                  onRemoveCustom={removeCustomColumn}
+                  onReorder={setColumnOrder}
+                />
                 </div>
                 {/* Add a label/annotation column */}
                 <div className="shrink-0 border-t border-theme-border pt-2 px-3 pb-1">
@@ -6420,7 +6433,7 @@ export function ResourcesView({
               <button
                 onClick={() => {
                   if (compareMode) { exitCompareMode(); return }
-                  exitBulkMode()
+                  clearBulkSelection()
                   setCompareMode(true)
                 }}
                 aria-pressed={compareMode}
@@ -6436,17 +6449,14 @@ export function ResourcesView({
             </Tooltip>
           )}
           {canBulkSelect && (
-            <Tooltip content={bulkMode ? 'Exit bulk select mode' : 'Select multiple resources'}>
+            <Tooltip content={isCheckboxMode ? 'Hide selection checkboxes' : 'Show selection checkboxes'}>
               <button
-                onClick={() => {
-                  if (bulkMode) { exitBulkMode(); return }
-                  exitCompareMode()
-                  setBulkMode(true)
-                }}
-                aria-pressed={bulkMode}
+                onClick={toggleCheckboxVisibility}
+                aria-label={isCheckboxMode ? 'Hide selection checkboxes' : 'Show selection checkboxes'}
+                aria-pressed={isCheckboxMode}
                 className={clsx(
                   'p-2 rounded-lg transition-colors',
-                  bulkMode
+                  isCheckboxMode
                     ? 'bg-skyhook-500/15 text-skyhook-300 border border-skyhook-400/50'
                     : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated',
                 )}
@@ -6466,7 +6476,7 @@ export function ResourcesView({
         </div>
 
         {/* Bulk actions bar */}
-        {isCheckboxMode && (
+        {showBulkBar && (
           <div className="flex items-center gap-3 px-4 py-2 bg-skyhook-500/10 border-b border-skyhook-400/20 shrink-0">
             <span className="text-sm font-medium text-theme-text-primary">
               {checkedItems.length} selected
@@ -6506,10 +6516,10 @@ export function ResourcesView({
             )}
             <button
               type="button"
-              onClick={exitBulkMode}
+              onClick={clearBulkSelection}
               className="px-3 py-1.5 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors"
             >
-              Cancel
+              Clear selection
             </button>
           </div>
         )}
@@ -6948,7 +6958,7 @@ export function ResourcesView({
         onBulkDelete?.(checkedBulkItems, {
           force: bulkForceDelete,
           onSuccess: () => {
-            exitBulkMode()
+            clearBulkSelection()
             setShowBulkDeleteConfirm(false)
             setBulkForceDelete(false)
           },
@@ -6978,7 +6988,7 @@ export function ResourcesView({
       onConfirm={() => {
         onBulkRestart?.(checkedBulkItems, {
           onSuccess: () => {
-            exitBulkMode()
+            clearBulkSelection()
             setShowBulkRestartConfirm(false)
           },
         })
@@ -6997,7 +7007,7 @@ export function ResourcesView({
       onConfirm={() => {
         onBulkScale?.(checkedBulkItems, bulkScaleReplicas, {
           onSuccess: () => {
-            exitBulkMode()
+            clearBulkSelection()
             setShowBulkScaleDialog(false)
           },
         })
@@ -8629,6 +8639,7 @@ function JobCell({ resource, column }: { resource: any; column: string }) {
 }
 
 function CronJobCell({ resource, column }: { resource: any; column: string }) {
+  const { operationalIssues, operationalIssuesIncomplete } = useContext(ResourcesViewDataContext)
   switch (column) {
     case 'schedule': {
       const { cron, readable } = getCronJobSchedule(resource)
@@ -8640,6 +8651,13 @@ function CronJobCell({ resource, column }: { resource: any; column: string }) {
       )
     }
     case 'status': {
+      const issue = operationalIssues?.[`${resource.metadata?.namespace ?? ''}/${resource.metadata?.name ?? ''}`]
+      if (issue) {
+        return <Tooltip content={issue.message}><Badge severity={issue.severity === 'critical' ? 'error' : 'warning'}>{issueTitle(issue)}</Badge></Tooltip>
+      }
+      if (operationalIssuesIncomplete) {
+        return <Tooltip content="The issue list is incomplete. This CronJob's status could not be checked."><Badge severity="neutral">Unknown</Badge></Tooltip>
+      }
       const status = getCronJobStatus(resource)
       return (
         <span className={clsx('badge', status.color)}>