aiops/frontend/src/components/server/ServerTableRow.tsx

// 服务器表格行 — 纯展示子组件（接收 props，不直接调 API） // Logan.Li
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { TableCell, TableRow } from '@/components/ui/table';
import { Cpu, Edit, MoreHorizontal, Server as ServerIcon, Terminal, Trash2 } from "lucide-react";
import { getStatusBadge, getTags, getUsageColor } from './serverHelpers';

interface ServerTableRowProps {
  server: any;
  selected: boolean;
  onToggleSelect: (id: string) => void;
  onOpenTerminal: (server: any) => void;
  onOpenEdit: (server: any) => void;
  onDelete: (id: string) => void;
  onInstallAgent: (server: any) => void;
}

export function ServerTableRow({
  server,
  selected,
  onToggleSelect,
  onOpenTerminal,
  onOpenEdit,
  onDelete,
  onInstallAgent,
}: ServerTableRowProps) {
  const cpuUsage = Number(server.cpu_usage || 0);
  const memoryUsage = Number(server.memory_usage || 0);
  const tags = getTags(server);
  const memGB = server.memory ? Math.round(server.memory / 1024) : 0;

  return (
    <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
      <TableCell>
        <Checkbox
          checked={selected}
          onCheckedChange={() => onToggleSelect(server.id)}
          className="border-[var(--dg-border)]"
        />
      </TableCell>
      <TableCell>
        <div className="flex items-center gap-2">
          <ServerIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
          <div>
            <p className="font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
            <p className="text-xs text-[var(--dg-text-muted)]">{server.os}</p>
          </div>
        </div>
      </TableCell>
      <TableCell>
        <code className="text-sm text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
          {server.ip}
        </code>
      </TableCell>
      <TableCell>
        {server.public_ip ? (
          <code className="text-sm text-[var(--dg-cyan)] bg-[var(--dg-cyan)]/10 px-2 py-0.5 rounded">
            {server.public_ip}
          </code>
        ) : (
          <span className="text-sm text-[var(--dg-text-muted)]">-</span>
        )}
      </TableCell>
      <TableCell>{getStatusBadge(server.status)}</TableCell>
      <TableCell>
        <div className="text-sm text-[var(--dg-text-secondary)]">
          <span className="text-[var(--dg-text-muted)]">{server.cpu}核</span>
          <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
          <span className="text-[var(--dg-text-muted)]">{memGB}GB</span>
          <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
          <span className="text-[var(--dg-text-muted)]">{server.disk}GB</span>
        </div>
      </TableCell>
      <TableCell>
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <span className="text-xs text-[var(--dg-text-muted)] w-8">CPU</span>
            <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
              <div
                className={cn('h-full rounded-full', getUsageColor(cpuUsage))}
                style={{ width: `${cpuUsage}%` }}
              />
            </div>
            <span className="text-xs text-[var(--dg-text-secondary)]">{cpuUsage.toFixed(1)}%</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-[var(--dg-text-muted)] w-8">内存</span>
            <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
              <div
                className={cn('h-full rounded-full', getUsageColor(memoryUsage))}
                style={{ width: `${memoryUsage}%` }}
              />
            </div>
            <span className="text-xs text-[var(--dg-text-secondary)]">{memoryUsage.toFixed(1)}%</span>
          </div>
        </div>
      </TableCell>
      <TableCell>
        <div className="flex flex-wrap gap-1">
          {tags.slice(0, 3).map((tag) => (
            <Badge
              key={tag}
              variant="outline"
              className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]/50"
            >
              {tag}
            </Badge>
          ))}
          {tags.length > 3 && (
            <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
              +{tags.length - 3}
            </Badge>
          )}
        </div>
      </TableCell>
      <TableCell className="text-right">
        <div className="flex items-center justify-end gap-1">
          <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" onClick={() => onOpenTerminal(server)}>
            <Terminal className="h-4 w-4" />
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">操作</DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              <DropdownMenuItem
                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
                onClick={() => onOpenEdit(server)}
              >
                <Edit className="h-4 w-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuItem
                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
                onClick={() => onOpenTerminal(server)}
              >
                <Terminal className="h-4 w-4 mr-2" />
                终端
              </DropdownMenuItem>
              <DropdownMenuItem
                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
                onClick={() => onInstallAgent(server)}
              >
                <Cpu className="h-4 w-4 mr-2" />
                安装Agent
              </DropdownMenuItem>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              <DropdownMenuItem
                className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
                onClick={() => onDelete(server.id)}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </TableCell>
    </TableRow>
  );
}