@skyhook-io/radar-app 1.13.3 → 1.13.5

package/src/components/resources/PodFilePreview.test.tsx

@@ -0,0 +1,131 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { curateError, detectLanguage } from './PodFilePreview'
+
+// Every backend error code becomes a curated screen. What matters here is
+// that each code carries the right action affordances (Download vs Retry)
+// and never leaks a raw stderr line as the primary description.
+
+describe('curateError — action affordances per code', () => {
+  it('offers Download for file_too_large and names the actual size', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'file_too_large',
+      message: 'File is 12582912 bytes; preview is limited to 1048576 bytes.',
+      size: 12 * 1024 * 1024,
+    })
+    expect(shape.actions).toEqual({ download: true, retry: false })
+    expect(shape.description).toMatch(/MiB|MB/i)
+    // The raw byte-count message must not be the primary description.
+    expect(shape.description).not.toContain('12582912')
+  })
+
+  it('offers Download for binary_file and names the detected mime type', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'binary_file',
+      message: 'server-side detail',
+      mimeType: 'application/x-executable',
+    })
+    expect(shape.actions).toEqual({ download: true, retry: false })
+    expect(shape.description).toContain('application/x-executable')
+    expect(shape.description).not.toContain('server-side detail')
+  })
+
+  it('offers Retry for not_found — the file may have been rotated', () => {
+    const shape = curateError({ ok: false, code: 'not_found', message: 'x' })
+    expect(shape.actions.retry).toBe(true)
+    expect(shape.actions.download).toBe(false)
+  })
+
+  it('offers neither Download nor Retry for permission_denied', () => {
+    const shape = curateError({ ok: false, code: 'permission_denied', message: 'x' })
+    expect(shape.actions).toEqual({ download: false, retry: false })
+  })
+
+  it('offers neither for no_shell — the container cannot be read this way', () => {
+    const shape = curateError({ ok: false, code: 'no_shell', message: 'x' })
+    expect(shape.actions).toEqual({ download: false, retry: false })
+    expect(shape.description).toMatch(/distroless|scratch|no shell/i)
+  })
+
+  it('offers Retry for network_error and reveals details for diagnostics', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'network_error',
+      message: 'Failed to fetch',
+    })
+    expect(shape.actions.retry).toBe(true)
+    expect(shape.details).toBe('Failed to fetch')
+  })
+
+  it('falls unknown/read_failed to a generic curated line with both actions', () => {
+    const shape = curateError({ ok: false, code: 'read_failed', message: 'stderr blob' })
+    expect(shape.actions).toEqual({ download: true, retry: true })
+    // The raw stderr belongs behind the details disclosure, not in the headline.
+    expect(shape.description).not.toContain('stderr blob')
+    expect(shape.details).toBe('stderr blob')
+  })
+})
+
+// The primary description is what an operator reads first. It must never be
+// the raw server message on any curated code — that was the maintainer's
+// specific concern ("curated error message rather than only dumping raw error").
+describe('curateError — no raw messages in primary text', () => {
+  const rawStderr = 'sh: /etc/shadow: Permission denied — some raw text'
+  it.each([
+    'file_too_large',
+    'binary_file',
+    'not_a_regular_file',
+    'not_found',
+    'permission_denied',
+    'no_shell',
+    'container_missing_tools',
+    'read_failed',
+  ] as const)('%s does not leak the raw server message into the title or description', (code) => {
+    const shape = curateError({ ok: false, code, message: rawStderr })
+    expect(shape.title).not.toContain(rawStderr)
+    expect(shape.description).not.toContain(rawStderr)
+  })
+})
+
+describe('detectLanguage', () => {
+  it.each([
+    ['nginx.conf', 'ini'],
+    ['deployment.yaml', 'yaml'],
+    ['deployment.yml', 'yaml'],
+    ['schema.json', 'yaml'],
+    ['Dockerfile', 'dockerfile'],
+    ['index.html', 'html'],
+    ['README.md', 'markdown'],
+    ['app.log', 'plaintext'],
+    ['unknown', 'plaintext'],
+    ['UPPERCASE.YAML', 'yaml'],
+  ])('%s → %s', (name, want) => {
+    expect(detectLanguage(name)).toBe(want)
+  })
+})
+
+// The empty state and the loading state each render distinct content so an
+// operator can tell them apart. These are the two states most likely to look
+// like a bug if they collide.
+describe('curated states are distinguishable', () => {
+  it('an empty file description is not confusable with a failure', () => {
+    const shape = curateError({ ok: false, code: 'read_failed', message: '' })
+    // The empty-file state is rendered separately (PreviewEmptyState) and does
+    // NOT come through curateError — a read_failed with an empty message must
+    // therefore never say "empty" in its curated description.
+    expect(shape.description.toLowerCase()).not.toContain('empty')
+  })
+})
+
+// Static markup smoke: the module imports at all and the exported pure helpers
+// stay tree-shakeable / server-renderable. If curateError were to reach for
+// browser-only globals this would trip.
+describe('curated shapes render on the server', () => {
+  it('renders a title node without throwing in a server context', () => {
+    const shape = curateError({ ok: false, code: 'binary_file', message: 'x', mimeType: 'application/octet-stream' })
+    const html = renderToStaticMarkup(<span>{shape.title}</span>)
+    expect(html).toContain('Binary')
+  })
+})

package/src/components/resources/PodFilePreview.tsx

@@ -0,0 +1,394 @@
+import { useEffect, useState } from 'react'
+import Editor from '@monaco-editor/react'
+import { AlertTriangle, Download, FileText, RotateCw } from 'lucide-react'
+import { PaneLoader, ensureMonacoRuntime } from '@skyhook-io/k8s-ui'
+import { formatBytes } from '../../utils/format'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+
+// A curated inline viewer for text files inside a pod container, rendered in
+// place of the file listing by PodFilesystemModal — never as its own dialog.
+// Deliberately read-only for v1. Every error path is a named `code` from the
+// backend so this file switches on intent, not on stderr wording.
+
+// Mirrors podFilePreviewByteCap on the server. The listing already knows each
+// file's size, so a file over the cap is marked unopenable up front instead
+// of being clicked into a rejection.
+export const PREVIEW_BYTE_CAP = 1 << 20
+
+// Wire-side codes. Kept in sync with internal/server/copy.go.
+export type PreviewErrorCode =
+  | 'file_too_large'
+  | 'binary_file'
+  | 'not_a_regular_file'
+  | 'not_found'
+  | 'permission_denied'
+  | 'no_shell'
+  | 'container_missing_tools'
+  | 'read_failed'
+
+type PreviewSuccess = {
+  ok: true
+  content: string
+  size: number
+  mimeType: string
+  encoding: string
+  empty: boolean
+}
+
+export type PreviewError = {
+  ok: false
+  code: PreviewErrorCode | 'network_error'
+  message: string
+  size?: number
+  mimeType?: string
+}
+
+type PreviewResult = PreviewSuccess | PreviewError
+
+async function fetchPodFilePreview(
+  namespace: string,
+  podName: string,
+  container: string,
+  filePath: string,
+  signal: AbortSignal,
+): Promise<PreviewResult> {
+  const params = new URLSearchParams()
+  params.set('container', container)
+  params.set('path', filePath)
+
+  let response: Response
+  try {
+    response = await fetch(apiUrl(`/pods/${namespace}/${podName}/file?${params.toString()}`), {
+      credentials: getCredentialsMode(),
+      headers: getAuthHeaders(),
+      signal,
+    })
+  } catch (err) {
+    if ((err as { name?: string })?.name === 'AbortError') throw err
+    return {
+      ok: false,
+      code: 'network_error',
+      message: err instanceof Error ? err.message : 'Network request failed',
+    }
+  }
+
+  const raw = await response.text()
+  let body: Record<string, unknown>
+  try {
+    body = raw ? (JSON.parse(raw) as Record<string, unknown>) : {}
+  } catch {
+    return {
+      ok: false,
+      code: 'network_error',
+      message: `Unexpected non-JSON response (HTTP ${response.status}).`,
+    }
+  }
+
+  if (!response.ok) {
+    return {
+      ok: false,
+      code: (body.code as PreviewErrorCode) || 'read_failed',
+      message: (body.error as string) || `HTTP ${response.status}`,
+      size: typeof body.size === 'number' ? body.size : undefined,
+      mimeType: typeof body.mimeType === 'string' ? body.mimeType : undefined,
+    }
+  }
+
+  return {
+    ok: true,
+    content: (body.content as string) ?? '',
+    size: (body.size as number) ?? 0,
+    mimeType: (body.mimeType as string) ?? 'text/plain',
+    encoding: (body.encoding as string) ?? 'utf-8',
+    empty: body.code === 'empty_file',
+  }
+}
+
+// Map a filename to a Monaco language id. Only ids whose tokenizer the shared
+// runtime registers (see monacoRuntime.ts) — anything else falls to plaintext.
+// JSON goes to the YAML tokenizer: YAML 1.2 is a superset of JSON, and the
+// JSON language would need a validation worker the runtime does not ship.
+export function detectLanguage(fileName: string): string {
+  const lower = fileName.toLowerCase()
+  if (lower.endsWith('.json')) return 'yaml'
+  if (lower.endsWith('.yaml') || lower.endsWith('.yml')) return 'yaml'
+  if (lower.endsWith('.xml')) return 'xml'
+  if (lower.endsWith('.html') || lower.endsWith('.htm')) return 'html'
+  if (lower.endsWith('.css')) return 'css'
+  if (lower.endsWith('.js') || lower.endsWith('.mjs')) return 'javascript'
+  if (lower.endsWith('.ts')) return 'typescript'
+  if (lower.endsWith('.py')) return 'python'
+  if (lower.endsWith('.sh') || lower.endsWith('.bash')) return 'shell'
+  if (lower.endsWith('.md') || lower.endsWith('.markdown')) return 'markdown'
+  if (lower === 'dockerfile' || lower.endsWith('.dockerfile')) return 'dockerfile'
+  if (lower.endsWith('.toml')) return 'ini'
+  if (lower.endsWith('.ini') || lower.endsWith('.conf') || lower.endsWith('.cfg')) return 'ini'
+  return 'plaintext'
+}
+
+function useMonacoTheme() {
+  const [dark, setDark] = useState(() =>
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark'),
+  )
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const observer = new MutationObserver(() => {
+      setDark(document.documentElement.classList.contains('dark'))
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+  return dark ? 'vs-dark' : 'vs'
+}
+
+interface PodFilePreviewProps {
+  namespace: string
+  podName: string
+  container: string
+  filePath: string
+  fileName: string
+  onDownload: () => void
+}
+
+export function PodFilePreview({
+  namespace,
+  podName,
+  container,
+  filePath,
+  fileName,
+  onDownload,
+}: PodFilePreviewProps) {
+  const [result, setResult] = useState<PreviewResult | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [reloadCount, setReloadCount] = useState(0)
+  const [runtime, setRuntime] = useState<'loading' | 'ready' | 'error'>('loading')
+  const theme = useMonacoTheme()
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true)
+    setResult(null)
+    fetchPodFilePreview(namespace, podName, container, filePath, controller.signal)
+      .then((r) => setResult(r))
+      .catch((err) => {
+        if ((err as { name?: string })?.name === 'AbortError') return
+        setResult({
+          ok: false,
+          code: 'network_error',
+          message: err instanceof Error ? err.message : 'Request failed',
+        })
+      })
+      .finally(() => setLoading(false))
+    return () => controller.abort()
+  }, [namespace, podName, container, filePath, reloadCount])
+
+  useEffect(() => {
+    let active = true
+    ensureMonacoRuntime()
+      .then(() => active && setRuntime('ready'))
+      .catch(() => active && setRuntime('error'))
+    return () => {
+      active = false
+    }
+  }, [])
+
+  if (loading) return <PaneLoader label="Reading file…" className="flex-1" />
+  if (!result) return null
+
+  if (!result.ok) {
+    return (
+      <PreviewErrorState
+        result={result}
+        onDownload={onDownload}
+        onRetry={() => setReloadCount((n) => n + 1)}
+      />
+    )
+  }
+
+  if (result.empty) return <PreviewEmptyState fileName={fileName} />
+
+  if (runtime === 'loading') return <PaneLoader label="Loading editor…" className="flex-1" />
+
+  if (runtime === 'error') {
+    return (
+      <pre className="flex-1 min-h-0 overflow-auto p-4 font-mono text-xs text-theme-text-primary whitespace-pre">
+        {result.content}
+      </pre>
+    )
+  }
+
+  return (
+    <div className="flex-1 min-h-0">
+      <Editor
+        value={result.content}
+        language={detectLanguage(fileName)}
+        theme={theme}
+        options={{
+          readOnly: true,
+          domReadOnly: true,
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          fontSize: 12,
+          lineNumbers: 'on',
+          wordWrap: 'off',
+          renderWhitespace: 'selection',
+        }}
+        loading={<PaneLoader label="Loading editor…" className="h-full" />}
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// Curated error / empty states
+// ============================================================================
+
+function PreviewEmptyState({ fileName }: { fileName: string }) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
+      <FileText className="w-10 h-10 text-theme-text-tertiary mb-3" />
+      <div className="text-base font-medium text-theme-text-primary">{fileName} is empty</div>
+      <div className="text-sm text-theme-text-secondary mt-1">
+        This file has no content.
+      </div>
+    </div>
+  )
+}
+
+function PreviewErrorState({
+  result,
+  onDownload,
+  onRetry,
+}: {
+  result: PreviewError
+  onDownload: () => void
+  onRetry: () => void
+}) {
+  const shape = curateError(result)
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-center p-8 max-w-2xl mx-auto">
+      <AlertTriangle className={`w-10 h-10 mb-3 ${shape.severity === 'warning' ? 'text-amber-400' : 'text-red-400'}`} />
+      <div className="text-base font-medium text-theme-text-primary">{shape.title}</div>
+      <div className="text-sm text-theme-text-secondary mt-2 leading-relaxed">
+        {shape.description}
+      </div>
+
+      <div className="flex items-center gap-2 mt-6">
+        {shape.actions.download && (
+          <button
+            onClick={onDownload}
+            className="flex items-center gap-2 px-3 py-1.5 rounded btn-brand text-sm"
+          >
+            <Download className="w-3.5 h-3.5" />
+            Download
+          </button>
+        )}
+        {shape.actions.retry && (
+          <button
+            onClick={onRetry}
+            className="flex items-center gap-2 px-3 py-1.5 rounded border border-theme-border hover:bg-theme-elevated text-sm text-theme-text-primary"
+          >
+            <RotateCw className="w-3.5 h-3.5" />
+            Retry
+          </button>
+        )}
+      </div>
+
+      {shape.details && (
+        <details className="mt-4 text-xs text-theme-text-tertiary">
+          <summary className="cursor-pointer hover:text-theme-text-secondary">Technical details</summary>
+          <div className="mt-2 font-mono whitespace-pre-wrap text-left bg-theme-elevated/40 p-3 rounded max-w-xl">
+            {shape.details}
+          </div>
+        </details>
+      )}
+    </div>
+  )
+}
+
+export interface CuratedShape {
+  title: string
+  description: string
+  severity: 'warning' | 'error'
+  actions: { download: boolean; retry: boolean }
+  details?: string
+}
+
+export function curateError(result: PreviewError): CuratedShape {
+  const size = result.size ? formatBytes(result.size) : ''
+
+  switch (result.code) {
+    case 'file_too_large':
+      return {
+        title: 'File too large to preview',
+        description: size
+          ? `This file is ${size} — larger than the 1 MiB preview limit. Download to view the full contents.`
+          : 'This file is larger than the 1 MiB preview limit. Download to view.',
+        severity: 'warning',
+        actions: { download: true, retry: false },
+      }
+    case 'binary_file':
+      return {
+        title: 'Binary file — cannot preview',
+        description: result.mimeType
+          ? `This file appears to be binary (detected type: ${result.mimeType}). Download it to view or open with an appropriate application.`
+          : 'This file is not valid text and cannot be shown inline. Download to view.',
+        severity: 'warning',
+        actions: { download: true, retry: false },
+      }
+    case 'not_a_regular_file':
+      return {
+        title: 'Not a regular file',
+        description: 'This entry is a directory, device, or pipe — Radar cannot preview its contents.',
+        severity: 'warning',
+        actions: { download: false, retry: false },
+      }
+    case 'not_found':
+      return {
+        title: 'File not found',
+        description: 'The file no longer exists in the container. It may have been rotated or deleted since the listing.',
+        severity: 'warning',
+        actions: { download: false, retry: true },
+      }
+    case 'permission_denied':
+      return {
+        title: 'Permission denied',
+        description: 'The container user cannot read this file. Try switching to a different container, or run Radar with an identity that has broader access.',
+        severity: 'warning',
+        actions: { download: false, retry: false },
+      }
+    case 'no_shell':
+      return {
+        title: 'Preview not available',
+        description: 'This container has no shell (likely distroless or scratch-based), so its filesystem cannot be read this way. Download is unavailable for the same reason.',
+        severity: 'warning',
+        actions: { download: false, retry: false },
+      }
+    case 'container_missing_tools':
+      return {
+        title: 'Container tools missing',
+        description: 'This container lacks the tools Radar needs to read files (tar and cat). Download may still work in a fallback mode.',
+        severity: 'warning',
+        actions: { download: true, retry: false },
+      }
+    case 'network_error':
+      return {
+        title: 'Network error',
+        description: 'Radar could not reach the cluster. Check your connection and try again.',
+        severity: 'error',
+        actions: { download: false, retry: true },
+        details: result.message,
+      }
+    case 'read_failed':
+    default:
+      return {
+        title: 'Could not read the file',
+        description: 'Radar reached the container but could not read the file. This may be transient — try again, or download instead.',
+        severity: 'error',
+        actions: { download: true, retry: true },
+        details: result.message,
+      }
+  }
+}
+