attacker
55f216cfbb
使用 i18n.t() 全局方式（避免 hook 定位问题）: - 288 目标文件中 135 个成功转换 - 2228 处中文替换为 i18n.t() 调用 - 1006 个新翻译 key 添加到 zh-CN.json + en-US.json - 词典总量: 3554 keys (22 namespaces) - tsc 零错误 + Vite 构建成功 - 6 个含代码示例/数据字符串的文件安全回退
314 lines
14 KiB
TypeScript
314 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 '@/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.agentalertstsx.s7ffaa448'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [resolvedView]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
// ============ 告警事件 ============
|
|
const handleResolve = async (id: number) => {
|
|
const ok = await confirm({ title: i18n.t('agent.agentalertstsx.sd56d01fa'), description: i18n.t('agent.agentalertstsx.s99f0fb65'), confirmText: i18n.t('kubernetes.deployment.resume') });
|
|
if (!ok) return;
|
|
try {
|
|
await agentApi.resolveAlert(id);
|
|
toast.success(i18n.t('agent.agentalertstsx.s0e23522e'));
|
|
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('monitor.alertrulestabts.sd301558d'), confirmText: i18n.t('kubernetes.storage.delete2'), variant: 'destructive' });
|
|
if (!ok) return;
|
|
try {
|
|
await agentApi.deleteRule(id);
|
|
toast.success(i18n.t('agent.agentalertstsx.s8b2798c4'));
|
|
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)]">Agent 告警</h2>
|
|
<p className="text-sm dg-text-secondary mt-0.5"> {i18n.t('agent.agentalertstsx.s03a08cd6')} </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' : ''}`} />
|
|
刷新
|
|
</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.eventspagetsx.s0e5b83cc')} </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)]'}
|
|
>
|
|
未恢复
|
|
</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)]'}
|
|
>
|
|
已恢复
|
|
</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.agentalertstsx.se459f480') : i18n.t('agent.agentalertstsx.s778455b9')}</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.agentalertstsx.sddab4a17')}</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.agentalertstsx.sbfdcf242')} </span> {getMetricLabel(alert.metric)}
|
|
</span>
|
|
{alert.value != null && (
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="dg-text-secondary"> {i18n.t('agent.agentalertstsx.s2d13763b')} </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" />
|
|
恢复
|
|
</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="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" />
|
|
创建第一条规则
|
|
</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">端口 {rule.port}</span>
|
|
) : null}
|
|
{rule.duration ? <span className="dg-text-secondary">持续 {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;
|