@skyhook-io/k8s-ui 1.17.0 → 1.18.0

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

@@ -0,0 +1,296 @@
+// @vitest-environment jsdom
+import { act, type ComponentProps } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ResourcesView } from './ResourcesView'
+import { KeyboardShortcutProvider } from '../../hooks/useKeyboardShortcuts'
+import type { APIResource } from '../../types'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+Element.prototype.scrollIntoView = vi.fn()
+const pods: APIResource = { group: '', version: 'v1', kind: 'Pod', name: 'pods', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+const pod = { apiVersion: 'v1', kind: 'Pod', metadata: { name: 'example', namespace: 'test', uid: 'pod-id' }, spec: { containers: [{ name: 'app', image: 'example' }] }, status: { phase: 'Running' } }
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+
+afterEach(() => { act(() => root?.unmount()); host?.remove(); vi.restoreAllMocks(); localStorage.clear() })
+
+describe('custom resource kind view', () => {
+  it('keeps sidebar navigation while disabling table keys and column settings, then restores the table on null', () => {
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+    const selected = vi.fn()
+    const storageRead = vi.spyOn(Storage.prototype, 'getItem')
+    const storageWrite = vi.spyOn(Storage.prototype, 'setItem')
+    const render = (custom: boolean | undefined) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+      namespaces={['test']}
+      apiResources={[pods]}
+      resourceCounts={{ Pod: 1 }}
+      selectedKindQuery={{ isLoading: false, data: [pod], resourceName: 'pods', group: '' }}
+      locationPathname="/resources/pods"
+      locationSearch=""
+      onNavigate={() => {}}
+      onResourceClick={selected}
+      renderKindView={kind => custom === undefined ? false : custom ? <div data-testid="kind-view">Custom {kind.kind}</div> : null}
+    /></KeyboardShortcutProvider>))
+    render(true)
+    expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+    expect(host.querySelectorAll('table')).toHaveLength(0)
+    expect(host.textContent).toContain('Workloads')
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(selected).not.toHaveBeenCalled()
+    expect(storageRead.mock.calls.some(([key]) => String(key).startsWith('radar-columns-'))).toBe(false)
+    expect(storageWrite.mock.calls.some(([key]) => String(key).startsWith('radar-columns-'))).toBe(false)
+    render(false)
+    expect(host.querySelector('[data-testid="kind-view"]')).toBeNull()
+    expect(host.querySelector('table')).not.toBeNull()
+    expect(storageRead.mock.calls.some(([key]) => key === 'radar-columns-pods')).toBe(true)
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'j', bubbles: true })))
+    act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(selected).toHaveBeenCalledWith(expect.objectContaining({ kind: 'pods', namespace: 'test', name: 'example' }))
+    render(undefined)
+    expect(host.querySelector('table')).not.toBeNull()
+  })
+})
+
+it('closes bulk dialogs when the same kind switches to a custom view and keeps the inspected resource', async () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const selected = vi.fn()
+  const remove = vi.fn()
+  const render = (custom: boolean) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods]}
+    resourceCounts={{ Pod: 1 }}
+    selectedKindQuery={{ isLoading: false, data: [pod], resourceName: 'pods', group: '' }}
+    selectedResource={{ kind: 'pods', group: '', namespace: 'test', name: 'example' }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    onResourceClick={selected}
+    onBulkDelete={remove}
+    renderKindView={() => custom ? <div data-testid="custom">Custom</div> : null}
+  /></KeyboardShortcutProvider>))
+  render(false)
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', bubbles: true })))
+  act(() => host.querySelector<HTMLInputElement>('input[title="Select all"]')!.click())
+  expect(host.textContent).toContain('1 selected')
+  act(() => [...host.querySelectorAll('button')].find(b => b.textContent?.trim() === 'Delete')!.click())
+  expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Delete 1 Pod?')
+  render(true)
+  await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)) })
+  expect(host.querySelector('[data-testid="custom"]')).not.toBeNull()
+  expect(document.querySelector('[role="dialog"]')).toBeNull()
+  render(false)
+  expect(host.textContent).not.toContain('1 selected')
+  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 })))
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+  expect(host.querySelector('[aria-label="Compare resources tray"]')?.textContent).toContain('example')
+  render(true)
+  render(false)
+  expect(host.querySelector('[aria-label="Compare resources tray"]')).toBeNull()
+  expect(remove).not.toHaveBeenCalled()
+  expect(selected).not.toHaveBeenCalled()
+})
+
+it('keeps sidebar kind shortcuts active while a custom view is shown', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const deployments: APIResource = { group: 'apps', version: 'v1', kind: 'Deployment', name: 'deployments', namespaced: true, isCrd: false, verbs: ['get', 'list'] }
+  act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods, deployments]}
+    resourceCounts={{ Pod: 1, Deployment: 1 }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    renderKindView={kind => <div data-testid="kind-view">Custom {kind.kind}</div>}
+  /></KeyboardShortcutProvider>))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: ']', bubbles: true })))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).not.toBe('Custom Pod')
+  act(() => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: '[', bubbles: true })))
+  expect(host.querySelector('[data-testid="kind-view"]')?.textContent).toBe('Custom Pod')
+})
+
+it('skips hidden-table sort and filter aggregation for a loaded list, then resumes them with the table', () => {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const getSortValue = vi.fn((resource: typeof pod) => resource.metadata.name)
+  const getFilterValue = vi.fn((resource: typeof pod) => resource.metadata.name)
+  const extraColumns = [{ key: 'fixture-rank', label: 'Fixture rank', render: () => null, getSortValue, getFilterValue }]
+  const list = [pod, { ...pod, metadata: { ...pod.metadata, name: 'another', uid: 'another-id' } }]
+  localStorage.setItem('radar-sort-pods', JSON.stringify({ column: 'fixture-rank', direction: 'asc' }))
+  const render = (custom: boolean, data = list) => act(() => root.render(<KeyboardShortcutProvider><ResourcesView
+    namespaces={['test']}
+    apiResources={[pods]}
+    resourceCounts={{ Pod: data.length }}
+    selectedKindQuery={{ isLoading: false, data, resourceName: 'pods', group: '' }}
+    locationPathname="/resources/pods"
+    locationSearch=""
+    onNavigate={() => {}}
+    extraLeadingColumns={extraColumns}
+    renderKindView={() => custom ? <div data-testid="kind-view">Custom</div> : null}
+  /></KeyboardShortcutProvider>))
+  render(true)
+  expect(getSortValue).not.toHaveBeenCalled()
+  expect(getFilterValue).not.toHaveBeenCalled()
+  render(false)
+  expect(getSortValue).toHaveBeenCalled()
+  expect(getFilterValue).toHaveBeenCalled()
+  getSortValue.mockClear(); getFilterValue.mockClear()
+  render(true, [...list])
+  expect(getSortValue).not.toHaveBeenCalled()
+  expect(getFilterValue).not.toHaveBeenCalled()
+  render(false)
+  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.per-container.test.ts

@@ -1,6 +1,7 @@
+import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import type { ContainerResourceMetrics } from '../../types'
-import { podAggregate, readContainer } from './ResourcesView'
+import { buildContainerResourceTooltip, podAggregate, readContainer } from './ResourcesView'
 
 // Build a CPU-only container fixture; memory fields default to 0.
 function cpu(name: string, usage: number, request: number, limit: number): ContainerResourceMetrics {
@@ -109,3 +110,57 @@ describe('podAggregate', () => {
     expect(result.denom).toBe(384) // summed memory limit
   })
 })
+
+describe('podAggregate with pod-level resources', () => {
+  it("treats a pod-level limit as the ceiling even when containers set none", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+    const result = podAggregate(containers, 'cpu', { request: 500, limit: 1000 })
+    expect(result.mode).toBe('limit')
+    expect(result.denom).toBe(1000)
+    expect(result.markerPct).toBeCloseTo(50)
+  })
+
+  it("uses the pod-level limit over a partial container sum", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 200)]
+    const result = podAggregate(containers, 'cpu', { limit: 1000 })
+    expect(result.mode).toBe('limit')
+    expect(result.denom).toBe(1000)
+    expect(result.markerPct).toBeUndefined()
+  })
+
+  it("uses the container limits when they are tighter than the pod limit", () => {
+    const single = podAggregate([cpu('app', 450, 100, 500)], 'cpu', { request: 800, limit: 1000 })
+    expect(single.mode).toBe('limit')
+    expect(single.denom).toBe(500)
+    const both = podAggregate([cpu('app', 200, 0, 300), cpu('sidecar', 50, 0, 300)], 'cpu', { limit: 1000 })
+    expect(both.denom).toBe(600)
+  })
+
+  it("uses a pod-level request as the yardstick when nothing is limited", () => {
+    const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+    const result = podAggregate(containers, 'cpu', { request: 800 })
+    expect(result.mode).toBe('request')
+    expect(result.denom).toBe(800)
+  })
+})
+
+describe('buildContainerResourceTooltip with a pod-level budget', () => {
+  const fmt = (n: number) => `${n}m`
+  const containers = [cpu('app', 300, 0, 0), cpu('sidecar', 100, 0, 0)]
+
+  it('shows the shared pod budget instead of calling covered containers unlimited', () => {
+    const html = renderToStaticMarkup(
+      buildContainerResourceTooltip('CPU', containers, 'cpu', fmt, undefined, { usage: 400, limit: 1000, request: 500 }),
+    )
+    expect(html).not.toContain('no limit')
+    expect(html).toContain('pod limit')
+    expect(html).toContain('Pod (shared)')
+    expect(html).toContain('400m · 40% · 1000m limit · req 500m')
+  })
+
+  it('keeps "no limit" when there is no pod-level budget', () => {
+    const html = renderToStaticMarkup(buildContainerResourceTooltip('CPU', containers, 'cpu', fmt))
+    expect(html).toContain('no limit')
+    expect(html).not.toContain('Pod (shared)')
+  })
+})