aiops/frontend/src/components/agent/AgentAlerts.tsx

// Agent 告警主组件：告警事件 Tab + 告警规则 Tab + 规则编辑弹窗 // Logan.Li
import { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { agentApi } from '@/api';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  AlertTriangle,
  CheckCircle,
  Plus,
  Pencil,
  Trash2,
  Loader2,
  RefreshCw,
  Bell,
  Cpu,
  Clock,
} from 'lucide-react';
import {
  METRIC_OPTIONS,
  getMetricLabel,
  asList,
  severityBadge,
} from './agentAlertHelper';
import { AgentRuleDialog } from './AgentRuleDialog';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

export function AgentAlerts() {
  const confirm = useConfirm();
  const [activeTab, setActiveTab] = useState('events');
  const [alerts, setAlerts] = useState<JsonData[]>([]);
  const [rules, setRules] = useState<JsonData[]>([]);
  const [loading, setLoading] = useState(true);
  const [resolvedView, setResolvedView] = useState(false);

  // 规则编辑弹窗
  const [ruleOpen, setRuleOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<JsonData>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [alertsRes, rulesRes] = await Promise.all([
        agentApi.listAlerts({ resolved: String(resolvedView) }),
        agentApi.listRules(),
      ]);
      setAlerts(asList(alertsRes));
      setRules(asList(rulesRes));
    } catch (err) {
      console.error(err);
      toast.error(i18n.t('agent.alerts.loadFailed'));
    } finally {
      setLoading(false);
    }
  }, [resolvedView]);

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

  // ============ 告警事件 ============
  const handleResolve = async (id: number) => {
    const ok = await confirm({ title: i18n.t('agent.alerts.resolveAlert'), description: i18n.t('agent.alerts.resolveConfirm'), confirmText: i18n.t('kubernetes.deployment.resume') });
    if (!ok) return;
    try {
      await agentApi.resolveAlert(id);
      toast.success(i18n.t('agent.alerts.resolved'));
      loadData();
    } catch (err) {
      toast.error(err?.message || i18n.t('cloud.operationFailed'));
    }
  };

  // ============ 规则 CRUD ============
  const openCreateRule = () => {
    setEditingRule(null);
    setRuleOpen(true);
  };

  const openEditRule = (rule: JsonData) => {
    setEditingRule(rule);
    setRuleOpen(true);
  };

  const handleDeleteRule = async (id: number) => {
    const ok = await confirm({ title: i18n.t('monitor.deleteRule'), description: i18n.t('agent.alerts.deleteRule'), confirmText: i18n.t('kubernetes.storage.delete2'), variant: 'destructive' });
    if (!ok) return;
    try {
      await agentApi.deleteRule(id);
      toast.success(i18n.t('agent.alerts.resolved'));
      loadData();
    } catch (err) {
      toast.error(err?.message || i18n.t('kubernetes.msg.deleteFailed2'));
    }
  };

  const handleToggleRule = async (rule: JsonData) => {
    try {
      await agentApi.updateRule(rule.id, { ...rule, enabled: !rule.enabled });
      loadData();
    } catch (err) {
      toast.error(err?.message || i18n.t('cloud.operationFailed'));
    }
  };

  return (
    <div className="space-y-4">
      {/* 页头 */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">{i18n.t('agent.alerts.title')}</h2>
          <p className="text-sm dg-text-secondary mt-0.5"> {i18n.t('agent.alerts.thresholdTriggered')} </p>
        </div>
        <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
          <RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
          {i18n.t('common.refresh')}
        </Button>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
          <TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]"> {i18n.t('kubernetes.eventsPage.alertEvents')} </TabsTrigger>
          <TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]"> {i18n.t('monitor.alertRules')} </TabsTrigger>
        </TabsList>

        {/* ========== 告警事件 ========== */}
        <TabsContent value="events" className="mt-4 space-y-3">
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              variant={resolvedView ? 'outline' : 'default'}
              onClick={() => setResolvedView(false)}
              className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
            >
              {i18n.t('agent.alerts.unresolved')}
            </Button>
            <Button
              size="sm"
              variant={resolvedView ? 'default' : 'outline'}
              onClick={() => setResolvedView(true)}
              className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
            >
              {i18n.t('agent.alerts.resolved')}
            </Button>
          </div>

          {loading ? (
            <Card className="dg-card">
              <CardContent className="flex items-center justify-center py-16">
                <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
                <span className="ml-2 dg-text-secondary"> {i18n.t('monitor.logPanel.logResults.loading')} </span>
              </CardContent>
            </Card>
          ) : alerts.length === 0 ? (
            <Card className="dg-card">
              <CardContent className="flex flex-col items-center justify-center py-16">
                <CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
                <p className="dg-text-secondary">{resolvedView ? i18n.t('agent.alerts.noResolved') : i18n.t('agent.alerts.noActive')}</p>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-2">
              {alerts.map((alert) => (
                <Card key={alert.id} className="dg-card py-4">
                  <CardContent>
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex items-start gap-3 min-w-0 flex-1">
                        <div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
                          <AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'dg-text-red' : (alert.severity || 'warning') === 'warning' ? 'dg-text-yellow' : 'dg-text-blue'}`} />
                        </div>
                        <div className="min-w-0">
                          <div className="flex items-center gap-2 flex-wrap">
                            {severityBadge(alert.severity)}
                            <span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || i18n.t('monitor.hostDashboard.alert')}</span>
                          </div>
                          <p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || i18n.t('agent.alerts.thresholdTriggered')}</p>
                          <div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap">
                            <span className="inline-flex items-center gap-1">
                              <Cpu className="h-3 w-3" />
                              {alert.hostname || '--'}
                            </span>
                            <span className="inline-flex items-center gap-1">
                              <span className="dg-text-secondary"> {i18n.t('agent.agentAlerts.metric')} </span> {getMetricLabel(alert.metric)}
                            </span>
                            {alert.value != null && (
                              <span className="inline-flex items-center gap-1">
                                <span className="dg-text-secondary"> {i18n.t('agent.agentAlerts.currentValue')} </span> {alert.value}
                              </span>
                            )}
                            <span className="inline-flex items-center gap-1">
                              <Clock className="h-3 w-3" />
                              {alert.created_at || alert.triggered_at ? new Date(alert.created_at || alert.triggered_at).toLocaleString() : '--'}
                            </span>
                          </div>
                        </div>
                      </div>
                      {!resolvedView && (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleResolve(alert.id)}
                          className="shrink-0 h-8 dg-input dg-text-green hover:bg-emerald-500/10 hover:dg-text-green"
                        >
                          <CheckCircle className="h-3.5 w-3.5 mr-1" />
                          {i18n.t('agent.alerts.resolve')}
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>

        {/* ========== 告警规则 ========== */}
        <TabsContent value="rules" className="mt-4 space-y-3">
          <div className="flex justify-end">
            <Button size="sm" onClick={openCreateRule} className="bg-blue-600 hover:bg-blue-700 text-white">
              <Plus className="h-4 w-4 mr-1.5" />
              {i18n.t('agent.alerts.newRule')}
            </Button>
          </div>

          {loading ? (
            <Card className="dg-card">
              <CardContent className="flex items-center justify-center py-16">
                <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
                <span className="ml-2 dg-text-secondary"> {i18n.t('monitor.logPanel.logResults.loading')} </span>
              </CardContent>
            </Card>
          ) : rules.length === 0 ? (
            <Card className="dg-card">
              <CardContent className="flex flex-col items-center justify-center py-16">
                <Bell className="h-10 w-10 dg-text-muted mb-3" />
                <p className="dg-text-secondary"> {i18n.t('monitor.noRules')} </p>
                <Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
                  <Plus className="h-4 w-4 mr-1.5" />
                  {i18n.t('agent.alerts.createFirstRule')}
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-2">
              {rules.map((rule) => {
                const MetricIcon = METRIC_OPTIONS.find((m) => m.value === rule.metric)?.icon || Cpu;
                return (
                  <Card key={rule.id} className={`bg-[var(--dg-bg-secondary)] ${rule.enabled === false ? 'border-[var(--dg-border)] opacity-60' : 'border-[var(--dg-border)]'} py-4`}>
                    <CardContent>
                      <div className="flex items-center justify-between gap-3">
                        <div className="flex items-center gap-3 min-w-0 flex-1">
                          <div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
                            <MetricIcon className="h-4 w-4 dg-text-blue" />
                          </div>
                          <div className="min-w-0">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
                              {severityBadge(rule.severity)}
                              {rule.enabled === false && (
                                <Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]"> {i18n.t('aiops.llmDisabled')} </Badge>
                              )}
                            </div>
                            <div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap">
                              <span>{getMetricLabel(rule.metric)}</span>
                              {rule.metric !== 'offline' && (
                                <span className="dg-text-secondary">
                                  {rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
                                </span>
                              )}
                              {rule.metric === 'port_down' && rule.port ? (
                                <span className="dg-text-secondary">{i18n.t("common.port")} {rule.port}</span>
                              ) : null}
                              {rule.duration ? <span className="dg-text-secondary">{i18n.t("common.duration")} {rule.duration}s</span> : null}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-2 shrink-0">
                          <Switch checked={rule.enabled !== false} onCheckedChange={() => handleToggleRule(rule)} />
                          <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]" onClick={() => openEditRule(rule)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]" onClick={() => handleDeleteRule(rule.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </TabsContent>
      </Tabs>

      {/* ========== 规则编辑弹窗 ========== */}
      <AgentRuleDialog
        open={ruleOpen}
        onOpenChange={setRuleOpen}
        editingRule={editingRule}
        onSuccess={loadData}
      />
    </div>
  );
}

export default AgentAlerts;