Ops-dashboard/app/systemd/_components/systemd-units-list.tsx

'use client'

import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { parseSystemctlStatus, type UnitStatus, type ActiveState } from '@/lib/parse-systemd'

interface UnitEntry {
  unit: string
  status: UnitStatus | null
  error: string | null
}

async function fetchUnitStatus(unit: string): Promise<UnitStatus> {
  const res = await fetch('/api/agent/exec', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ command_key: 'systemctl_status', args: [unit] }),
  })

  if (!res.ok) {
    const text = await res.text()
    throw new Error(`agent ${res.status}: ${text}`)
  }

  const reader = res.body?.getReader()
  if (!reader) throw new Error('no response body')

  const decoder = new TextDecoder()
  let buffer = ''
  let output = ''

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    buffer += decoder.decode(value, { stream: true })
    const lines = buffer.split('\n')
    buffer = lines.pop() ?? ''

    for (const line of lines) {
      if (line.startsWith('data:')) {
        try {
          const parsed = JSON.parse(line.slice(5).trim()) as { data?: string }
          if (parsed.data !== undefined) output += parsed.data
        } catch {
          // ignore malformed
        }
      }
    }
  }

  return parseSystemctlStatus(output, unit)
}

const badgeClass: Record<ActiveState, string> = {
  active: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
  inactive: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
  failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
  activating: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
  deactivating: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
  unknown: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
}

const dotClass: Record<ActiveState, string> = {
  active: 'bg-green-500 dark:bg-green-400',
  inactive: 'bg-zinc-400 dark:bg-zinc-500',
  failed: 'bg-red-500 dark:bg-red-400',
  activating: 'bg-amber-500 dark:bg-amber-400',
  deactivating: 'bg-amber-500 dark:bg-amber-400',
  unknown: 'bg-zinc-400 dark:bg-zinc-500',
}

function StatusBadge({ status }: { status: UnitStatus }) {
  const label = status.subState
    ? `${status.activeState} (${status.subState})`
    : status.activeState
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${badgeClass[status.activeState]}`}
    >
      <span className={`size-1.5 rounded-full ${dotClass[status.activeState]}`} />
      {label}
    </span>
  )
}

type Props = {
  initialUnits: UnitEntry[]
}

export default function SystemdUnitsList({ initialUnits }: Props) {
  const [units, setUnits] = useState<UnitEntry[]>(initialUnits)
  const [refreshing, setRefreshing] = useState(false)
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())

  const refresh = useCallback(async () => {
    setRefreshing(true)
    try {
      const updated = await Promise.all(
        initialUnits.map(async (entry) => {
          try {
            const status = await fetchUnitStatus(entry.unit)
            return { ...entry, status, error: null }
          } catch (err) {
            return { ...entry, status: null, error: err instanceof Error ? err.message : 'failed' }
          }
        }),
      )
      setUnits(updated)
      setLastUpdated(new Date())
    } finally {
      setRefreshing(false)
    }
  }, [initialUnits])

  useEffect(() => {
    const id = setInterval(refresh, 10000)
    return () => clearInterval(id)
  }, [refresh])

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">
            {units.length} unit{units.length !== 1 ? 's' : ''}
          </span>
          {refreshing && (
            <span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
          )}
        </div>
        <span className="text-xs text-muted-foreground">
          updated {lastUpdated.toLocaleTimeString()}
        </span>
      </div>

      <div className="overflow-x-auto rounded-lg border border-border">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border bg-muted/50">
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Unit</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Description</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
            </tr>
          </thead>
          <tbody>
            {units.map((entry) => (
              <tr
                key={entry.unit}
                className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
              >
                <td className="px-4 py-3 font-mono text-xs">
                  <Link
                    href={`/systemd/${encodeURIComponent(entry.unit)}`}
                    className="font-medium text-foreground hover:underline"
                  >
                    {entry.unit}
                  </Link>
                </td>
                <td className="px-4 py-3 text-xs text-muted-foreground">
                  {entry.status?.description ?? '—'}
                </td>
                <td className="px-4 py-3">
                  {entry.error ? (
                    <span className="text-xs text-destructive">{entry.error}</span>
                  ) : entry.status ? (
                    <StatusBadge status={entry.status} />
                  ) : (
                    <span className="text-xs text-muted-foreground">—</span>
                  )}
                </td>
                <td className="px-4 py-3 text-xs text-muted-foreground">
                  {entry.status?.uptime || '—'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}