aiops/frontend/src/components/kubernetes/EventsPage.tsx

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { RefreshCw, ChevronRight, Bell, AlertTriangle, Info } from 'lucide-react';
import { kubernetesApi } from '@/services/api';

export default function EventsPage() {
  const { clusterCode } = useParams<{ clusterCode: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [events, setEvents] = useState<any[]>([]);
  const [clusters, setClusters] = useState<any[]>([]);
  const [namespaces, setNamespaces] = useState<string[]>([]);
  const [selectedNs, setSelectedNs] = useState('all');
  const [filterType, setFilterType] = useState('all');
  const [activeCluster, setActiveCluster] = useState(clusterCode || '');

  useEffect(() => {
    kubernetesApi.getClusters().then((res: any) => {
      const list = res?.list || [];
      setClusters(list);
      if (!activeCluster && list.length > 0) {
        const code = list[0].code || String(list[0].id);
        setActiveCluster(code);
        navigate(`/kubernetes/${code}/events`, { replace: true });
      }
    }).catch(() => {});
  }, []);

  useEffect(() => {
    if (!activeCluster) return;
    kubernetesApi.getNamespaces(activeCluster).then((res: any) => {
      setNamespaces(Array.isArray(res) ? res : (res?.list || res?.data || []));
    }).catch(() => {});
  }, [activeCluster]);

  const loadEvents = useCallback(async () => {
    if (!activeCluster) return;
    setLoading(true);
    try {
      const ns = selectedNs === 'all' ? undefined : selectedNs;
      const ft = filterType === 'all' ? undefined : filterType;
      const res: any = await kubernetesApi.getEvents(activeCluster, ns, ft);
      setEvents(Array.isArray(res) ? res : (res?.list || []));
    } catch { setEvents([]); } finally { setLoading(false); }
  }, [activeCluster, selectedNs, filterType]);

  useEffect(() => { loadEvents(); }, [loadEvents]);

  const warningCount = useMemo(() => events.filter(e => e.type === 'Warning').length, [events]);
  const normalCount = useMemo(() => events.filter(e => e.type === 'Normal').length, [events]);

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm text-slate-500">
        <Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
        {activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
        <ChevronRight className="h-3 w-3" /><span className="text-slate-300">事件</span>
      </div>

      <div className="flex items-center justify-between flex-wrap gap-3">
        <h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><Bell className="h-5 w-5 text-yellow-400" />集群事件</h2>
        <div className="flex items-center gap-2">
          <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
            <SelectTrigger className="w-40 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
            <SelectContent className="bg-slate-800 border-slate-700">
              {clusters.map((c: any) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
            </SelectContent>
          </Select>
          <Select value={selectedNs} onValueChange={setSelectedNs}>
            <SelectTrigger className="w-32 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
            <SelectContent className="bg-slate-800 border-slate-700">
              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
              {namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
            </SelectContent>
          </Select>
          <Select value={filterType} onValueChange={setFilterType}>
            <SelectTrigger className="w-28 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有类型" /></SelectTrigger>
            <SelectContent className="bg-slate-800 border-slate-700">
              <SelectItem value="all" className="text-xs">所有类型</SelectItem>
              <SelectItem value="Warning" className="text-xs">⚠ Warning</SelectItem>
              <SelectItem value="Normal" className="text-xs">ℹ Normal</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadEvents} disabled={loading}>
            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-3">
        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">总数</p><p className="text-xl font-bold text-slate-200">{events.length}</p>
        </CardContent></Card>
        <Card className="bg-slate-900 border-red-900/30"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">Warning</p><p className="text-xl font-bold text-red-400">{warningCount}</p>
        </CardContent></Card>
        <Card className="bg-slate-900 border-emerald-900/30"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">Normal</p><p className="text-xl font-bold text-emerald-400">{normalCount}</p>
        </CardContent></Card>
      </div>

      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <Table>
            <TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
              <TableHead className="text-slate-400 w-16">类型</TableHead>
              <TableHead className="text-slate-400">原因</TableHead>
              <TableHead className="text-slate-400">对象</TableHead>
              <TableHead className="text-slate-400">消息</TableHead>
              <TableHead className="text-slate-400 w-12">次数</TableHead>
              <TableHead className="text-slate-400 w-36">最后时间</TableHead>
            </TableRow></TableHeader>
            <TableBody>
              {events.length === 0 ? (
                <TableRow><TableCell colSpan={6} className="text-center text-slate-500 py-8">暂无事件{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
              ) : events.map((e, i) => (
                <TableRow key={`${e.name}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
                  <TableCell>
                    {e.type === 'Warning' ? (
                      <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs"><AlertTriangle className="h-3 w-3 mr-1 inline" />Warning</Badge>
                    ) : (
                      <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-xs"><Info className="h-3 w-3 mr-1 inline" />Normal</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-slate-300">{e.reason || '-'}</TableCell>
                  <TableCell className="text-xs text-slate-500 font-mono">{e.object || '-'}</TableCell>
                  <TableCell className="text-xs text-slate-400 max-w-[350px] truncate" title={e.message}>{e.message || '-'}</TableCell>
                  <TableCell className="text-sm text-slate-400">{e.count || 1}</TableCell>
                  <TableCell className="text-xs text-slate-500">{e.last_time?.replace('T', ' ').substring(0, 19) || '-'}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}