312 lines
14 KiB
TypeScript
312 lines
14 KiB
TypeScript
// 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 '@/services/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';
|
|
|
|
export function AgentAlerts() {
|
|
const confirm = useConfirm();
|
|
const [activeTab, setActiveTab] = useState('events');
|
|
const [alerts, setAlerts] = useState<any[]>([]);
|
|
const [rules, setRules] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [resolvedView, setResolvedView] = useState(false);
|
|
|
|
// 规则编辑弹窗
|
|
const [ruleOpen, setRuleOpen] = useState(false);
|
|
const [editingRule, setEditingRule] = useState<any>(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('加载告警数据失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [resolvedView]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
// ============ 告警事件 ============
|
|
const handleResolve = async (id: number) => {
|
|
const ok = await confirm({ title: '恢复告警', description: '确定将此告警标记为已恢复？', confirmText: '恢复' });
|
|
if (!ok) return;
|
|
try {
|
|
await agentApi.resolveAlert(id);
|
|
toast.success('告警已恢复');
|
|
loadData();
|
|
} catch (err: any) {
|
|
toast.error(err?.message || '操作失败');
|
|
}
|
|
};
|
|
|
|
// ============ 规则 CRUD ============
|
|
const openCreateRule = () => {
|
|
setEditingRule(null);
|
|
setRuleOpen(true);
|
|
};
|
|
|
|
const openEditRule = (rule: any) => {
|
|
setEditingRule(rule);
|
|
setRuleOpen(true);
|
|
};
|
|
|
|
const handleDeleteRule = async (id: number) => {
|
|
const ok = await confirm({ title: '删除规则', description: '确定删除此告警规则？', confirmText: '删除', variant: 'destructive' });
|
|
if (!ok) return;
|
|
try {
|
|
await agentApi.deleteRule(id);
|
|
toast.success('规则已删除');
|
|
loadData();
|
|
} catch (err: any) {
|
|
toast.error(err?.message || '删除失败');
|
|
}
|
|
};
|
|
|
|
const handleToggleRule = async (rule: any) => {
|
|
try {
|
|
await agentApi.updateRule(rule.id, { ...rule, enabled: !rule.enabled });
|
|
loadData();
|
|
} catch (err: any) {
|
|
toast.error(err?.message || '操作失败');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 页头 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-slate-100">Agent 告警</h2>
|
|
<p className="text-sm text-slate-400 mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700">
|
|
<RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
|
|
刷新
|
|
</Button>
|
|
</div>
|
|
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
<TabsList className="bg-slate-800 border border-slate-700">
|
|
<TabsTrigger value="events" className="data-[state=active]:bg-slate-700">告警事件</TabsTrigger>
|
|
<TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">告警规则</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' : 'bg-slate-800 border-slate-700 text-slate-300'}
|
|
>
|
|
未恢复
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={resolvedView ? 'default' : 'outline'}
|
|
onClick={() => setResolvedView(true)}
|
|
className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
|
|
>
|
|
已恢复
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<Card className="bg-slate-900 border-slate-800">
|
|
<CardContent className="flex items-center justify-center py-16">
|
|
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
|
|
<span className="ml-2 text-slate-400">加载中...</span>
|
|
</CardContent>
|
|
</Card>
|
|
) : alerts.length === 0 ? (
|
|
<Card className="bg-slate-900 border-slate-800">
|
|
<CardContent className="flex flex-col items-center justify-center py-16">
|
|
<CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
|
|
<p className="text-slate-400">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{alerts.map((alert) => (
|
|
<Card key={alert.id} className="bg-slate-900 border-slate-800 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-slate-800 flex items-center justify-center shrink-0">
|
|
<AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'text-red-400' : (alert.severity || 'warning') === 'warning' ? 'text-amber-400' : 'text-blue-400'}`} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{severityBadge(alert.severity)}
|
|
<span className="font-medium text-slate-100">{alert.rule_name || alert.name || alert.title || '告警'}</span>
|
|
</div>
|
|
<p className="text-sm text-slate-400 mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
|
|
<div className="flex items-center gap-4 mt-2 text-xs text-slate-500 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="text-slate-400">指标:</span> {getMetricLabel(alert.metric)}
|
|
</span>
|
|
{alert.value != null && (
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="text-slate-400">当前值:</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 bg-slate-800 border-slate-700 text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-400"
|
|
>
|
|
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
|
恢复
|
|
</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" />
|
|
新建规则
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<Card className="bg-slate-900 border-slate-800">
|
|
<CardContent className="flex items-center justify-center py-16">
|
|
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
|
|
<span className="ml-2 text-slate-400">加载中...</span>
|
|
</CardContent>
|
|
</Card>
|
|
) : rules.length === 0 ? (
|
|
<Card className="bg-slate-900 border-slate-800">
|
|
<CardContent className="flex flex-col items-center justify-center py-16">
|
|
<Bell className="h-10 w-10 text-slate-600 mb-3" />
|
|
<p className="text-slate-400">暂无告警规则</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" />
|
|
创建第一条规则
|
|
</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-slate-900 ${rule.enabled === false ? 'border-slate-800 opacity-60' : 'border-slate-800'} 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-slate-800 flex items-center justify-center shrink-0">
|
|
<MetricIcon className="h-4 w-4 text-blue-400" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-medium text-slate-100">{rule.name}</span>
|
|
{severityBadge(rule.severity)}
|
|
{rule.enabled === false && (
|
|
<Badge className="bg-slate-700 text-slate-400 border border-slate-600">已禁用</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 flex-wrap">
|
|
<span>{getMetricLabel(rule.metric)}</span>
|
|
{rule.metric !== 'offline' && (
|
|
<span className="text-slate-400">
|
|
{rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
|
|
</span>
|
|
)}
|
|
{rule.metric === 'port_down' && rule.port ? (
|
|
<span className="text-slate-400">端口 {rule.port}</span>
|
|
) : null}
|
|
{rule.duration ? <span className="text-slate-400">持续 {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 text-slate-400 hover:text-slate-100 hover:bg-slate-800" onClick={() => openEditRule(rule)}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800" 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;
|