240 lines
9.5 KiB
TypeScript
240 lines
9.5 KiB
TypeScript
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 { Badge } from '@/components/ui/badge';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Settings, Trash2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { alertApi } from '@/api';
|
|
import { renderRuleChannels } from './alertShared';
|
|
import type { AlertChannel, AlertRuleRecord } from '@/types';
|
|
import i18n from '@/i18n';
|
|
|
|
const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li
|
|
|
|
export function AlertRulesTab({
|
|
rules,
|
|
notifyChannels,
|
|
onReload,
|
|
onEditRule,
|
|
}: {
|
|
rules: AlertRuleRecord[];
|
|
notifyChannels: AlertChannel[];
|
|
onReload: () => void;
|
|
onEditRule: ( rule: AlertRuleRecord) => void;
|
|
}) {
|
|
const confirm = useConfirm();
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
|
|
|
// 全选/取消全选 // Logan.Li
|
|
const toggleSelectAll = () => {
|
|
if (rules.length > 0 && selectedIds.length === rules.length) {
|
|
setSelectedIds([]);
|
|
} else {
|
|
setSelectedIds(rules.map((r) => r.id));
|
|
}
|
|
};
|
|
|
|
// 单行选择切换 // Logan.Li
|
|
const toggleSelect = (id: number) => {
|
|
setSelectedIds((prev) =>
|
|
prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
|
|
);
|
|
};
|
|
|
|
const handleDeleteRule = async ( id: number) => {
|
|
const ok = await confirm({
|
|
title: i18n.t('monitor.alertRulesTab.deleteRule'),
|
|
description: i18n.t('monitor.alertRulesTab.deleteConfirm'),
|
|
confirmText: i18n.t('kubernetes.storage.delete2'),
|
|
variant: 'destructive',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await alertApi.deleteRule(id);
|
|
toast.success(i18n.t('monitor.alertRulesTab.deleted'));
|
|
onReload();
|
|
} catch (error) {
|
|
console.error('Failed to delete rule:', error);
|
|
toast.error(i18n.t('kubernetes.msg.deleteFailed2'));
|
|
}
|
|
};
|
|
|
|
// 批量删除 // Logan.Li
|
|
const handleBatchDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
const ok = await confirm({
|
|
title: i18n.t('monitor.alertRulesTab.deleteRule'),
|
|
description: `确定删除选中的 ${selectedIds.length} 条告警规则吗？此操作不可撤销。`,
|
|
confirmText: i18n.t('system.terminalBatchDelete'),
|
|
variant: 'destructive',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await alertApi.batchDeleteRules(selectedIds);
|
|
toast.success(`已删除 ${selectedIds.length} 条告警规则`);
|
|
setSelectedIds([]);
|
|
onReload();
|
|
} catch (error) {
|
|
console.error('Failed to batch delete rules:', error);
|
|
toast.error(i18n.t('system.batchDeleteFailed'));
|
|
}
|
|
};
|
|
|
|
const handleToggleRule = async ( id: number) => {
|
|
try {
|
|
await alertApi.toggleRule(id);
|
|
onReload();
|
|
} catch (error) {
|
|
console.error('Failed to toggle rule:', error);
|
|
}
|
|
};
|
|
|
|
const allSelected = rules.length > 0 && selectedIds.length === rules.length;
|
|
|
|
return (
|
|
<div className="mt-4">
|
|
{/* 批量操作栏 // Logan.Li */}
|
|
{selectedIds.length > 0 && (
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="text-sm dg-text-secondary">已选择 {selectedIds.length} 项</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-red-500/30 dg-text-red hover:bg-red-500/10"
|
|
onClick={handleBatchDelete}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
批量删除
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Card className="dg-card">
|
|
<CardContent className="p-0">
|
|
<div className="border-t border-[var(--dg-border)]">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
onCheckedChange={toggleSelectAll}
|
|
className="border-[var(--dg-border-hover)]"
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('monitor.ruleName')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('monitor.dashboard.custom.datasource')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('monitor.alertrulestabts.s65939ccd')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('kubernetes.event.eventLevel')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('monitor.alertDuration')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('monitor.notificationChannel')} </TableHead>
|
|
<TableHead className="dg-text-secondary"> {i18n.t('system.terminalStatus')} </TableHead>
|
|
<TableHead className="dg-text-secondary text-right"> {i18n.t('system.auditAction')} </TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rules.length === 0 ? (
|
|
<TableRow className="border-[var(--dg-border)]">
|
|
<TableCell colSpan={COL_SPAN} className="text-center dg-text-muted py-12">
|
|
暂无告警规则
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
rules.map((rule) => (
|
|
<TableRow key={rule.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedIds.includes(rule.id)}
|
|
onCheckedChange={() => toggleSelect(rule.id)}
|
|
className="border-[var(--dg-border-hover)]"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div>
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
|
|
{rule.description && (
|
|
<p className="text-xs dg-text-muted">{rule.description}</p>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<code className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
|
|
{rule.source || '--'}
|
|
</code>
|
|
</TableCell>
|
|
<TableCell className="max-w-[180px]">
|
|
<code className="text-xs text-blue-300 block truncate" title={rule.expression}>
|
|
{rule.expression || '--'}
|
|
</code>
|
|
</TableCell>
|
|
<TableCell>
|
|
{rule.severity === 'critical' ? (
|
|
<Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
|
|
严重
|
|
</Badge>
|
|
) : rule.severity === 'warning' ? (
|
|
<Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
|
|
警告
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
|
|
提示
|
|
</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-sm text-[var(--dg-text-secondary)]">{(rule.duration || 0) / 60}分钟</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
{renderRuleChannels(rule, notifyChannels)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Switch
|
|
checked={!!rule.enabled}
|
|
className="data-[state=checked]:bg-blue-600"
|
|
onCheckedChange={() => handleToggleRule(rule.id)}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
|
|
onClick={() => onEditRule(rule)}
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 dg-text-secondary hover:dg-text-red"
|
|
onClick={() => handleDeleteRule(rule.id)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|