aiops/frontend/src/components/monitor/AlertEventsTab.tsx

import { useState } from 'react';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Search, AlertTriangle, Bell, CheckCircle, Loader2 } from 'lucide-react';
import { alertApi } from '@/services/api';

export function AlertEventsTab({
  alerts,
  loading,
  onReload,
}: {
  alerts: any[];
  loading: boolean;
  onReload: () => void;
}) {
  const _confirm = useConfirm();
  const [searchQuery, setSearchQuery] = useState('');
  const [severityFilter, setSeverityFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const filteredEvents = alerts.filter((event) => {
    const matchesSearch =
      ((event.rule && event.rule.name) || event.message || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
      (event.target || '').toLowerCase().includes(searchQuery.toLowerCase());
    const matchesSeverity = severityFilter === 'all' || event.severity === severityFilter;
    const matchesStatus = statusFilter === 'all' || event.status === statusFilter;
    return matchesSearch && matchesSeverity && matchesStatus;
  });

  const getSeverityBadge = (severity: any) => {
    switch (severity) {
      case 'critical':
        return (
          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
            <AlertTriangle className="h-3 w-3 mr-1" />
            严重
          </Badge>
        );
      case 'warning':
        return (
          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
            <AlertTriangle className="h-3 w-3 mr-1" />
            警告
          </Badge>
        );
      case 'info':
        return (
          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
            <Bell className="h-3 w-3 mr-1" />
            提示
          </Badge>
        );
      default:
        return null;
    }
  };

  const getStatusBadge = (status: any) => {
    switch (status) {
      case 'firing':
        return (
          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10 animate-pulse">
            触发中
          </Badge>
        );
      case 'resolved':
        return (
          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
            已恢复
          </Badge>
        );
      default:
        return null;
    }
  };

  const handleAcknowledge = async (id: any) => {
    try {
      await alertApi.acknowledge(id);
      onReload();
    } catch (error) {
      console.error('Failed to acknowledge alert:', error);
    }
  };

  return (
    <div className="mt-4 space-y-4">
      {/* Filters */}
      <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={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
        <select
          value={severityFilter}
          onChange={(e) => setSeverityFilter(e.target.value)}
          className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
        >
          <option value="all">全部级别</option>
          <option value="critical">严重</option>
          <option value="warning">警告</option>
          <option value="info">提示</option>
        </select>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
        >
          <option value="all">全部状态</option>
          <option value="firing">触发中</option>
          <option value="resolved">已恢复</option>
        </select>
      </div>

      {/* Events Table */}
      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <div className="border-t border-slate-800">
            <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>
                  <TableHead className="text-slate-400">阈值</TableHead>
                  <TableHead className="text-slate-400">开始时间</TableHead>
                  <TableHead className="text-slate-400 text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow className="border-slate-800">
                    <TableCell colSpan={8} className="text-center text-slate-500 py-8">
                      <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
                      加载中...
                    </TableCell>
                  </TableRow>
                ) : filteredEvents.map((event) => (
                  <TableRow key={event.id} className="border-slate-800 hover:bg-slate-800/50">
                    <TableCell>{getSeverityBadge(event.severity)}</TableCell>
                    <TableCell>
                      <span className="text-sm font-medium text-slate-200">
                        {(event.rule && event.rule.name) || event.message}
                      </span>
                    </TableCell>
                    <TableCell>{getStatusBadge(event.status)}</TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-300">{event.target}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-300">{event.value}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-500">{event.threshold}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-400">
                        {event.created_at ? new Date(event.created_at).toLocaleString() : '--'}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-1">
                        {event.status === 'firing' && (
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 text-slate-400 hover:text-emerald-400"
                            onClick={() => handleAcknowledge(event.id)}
                          >
                            <CheckCircle className="h-4 w-4 mr-1" />
                            确认
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}