aiops/frontend/src/pages/terminal-audit/SessionCommandsPanel.tsx

// 终端审计 — 会话命令子面板 // Logan.Li

import { useMemo, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Search, RefreshCw } from 'lucide-react';
import { useSessionCommands } from '@/hooks/api';
import { formatSize } from './helpers';

export function SessionCommandsPanel() {
  const [keyword, setKeyword] = useState('');
  const [sessionIdInput, setSessionIdInput] = useState('');

  const queryParams = useMemo(
    () => ({
      page: 1,
      page_size: 200,
      ...(sessionIdInput ? { session_id: Number(sessionIdInput) } : {}),
    }),
    [sessionIdInput],
  );

  const { data: commands = [], isLoading, refetch } = useSessionCommands(queryParams);

  const filtered = commands.filter((c) => {
    const kw = keyword.toLowerCase();
    return (
      !kw ||
      (c.username || '').toLowerCase().includes(kw) ||
      (c.command || '').toLowerCase().includes(kw)
    );
  });

  return (
    <>
      <div className="flex items-center gap-3 flex-wrap">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
          <Input
            placeholder="搜索用户/命令..."
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
        <Input
          placeholder="会话 ID（可选）"
          value={sessionIdInput}
          onChange={(e) => setSessionIdInput(e.target.value)}
          className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
        />
        <Button
          variant="outline"
          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
          onClick={() => refetch()}
        >
          <RefreshCw className="h-4 w-4 mr-2" />
          刷新
        </Button>
      </div>

      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <div className="border-t border-slate-800">
            {isLoading ? (
              <div className="flex items-center justify-center py-16">
                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
              </div>
            ) : filtered.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
                <Search className="h-8 w-8 mb-3 opacity-40" />
                <p className="text-sm">暂无会话命令记录</p>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-slate-800 hover:bg-transparent">
                    <TableHead className="text-slate-400">时间</TableHead>
                    <TableHead className="text-slate-400">用户</TableHead>
                    <TableHead className="text-slate-400">命令</TableHead>
                    <TableHead className="text-slate-400">输出大小</TableHead>
                    <TableHead className="text-slate-400">关联会话</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filtered.map((c) => (
                    <TableRow key={c.id} className="border-slate-800 hover:bg-slate-800/50">
                      <TableCell>
                        <span className="text-sm text-slate-400">
                          {c.created_at ? new Date(c.created_at).toLocaleString() : '--'}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-200">{c.username || '--'}</span>
                      </TableCell>
                      <TableCell>
                        <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block">
                          {c.command || '--'}
                        </code>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-400">{formatSize(c.output_size)}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-xs text-slate-500">#{c.session_id}</span>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </CardContent>
      </Card>
    </>
  );
}