Logan.Li
d19a03d427
对齐 Vue 后台惯例： - src/api/ 域 API（原 services/api） - src/utils/request.ts HTTP 封装（原 services/http.ts） - src/utils/export.ts 客户端导出工具 - src/utils/index.ts 工具统一出口 全局导入改为 @/api 与 @/utils/request，tsc + build 通过。
238 lines
8.8 KiB
TypeScript
238 lines
8.8 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';
|
|
|
|
const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li
|
|
|
|
export function AlertRulesTab({
|
|
rules,
|
|
notifyChannels,
|
|
onReload,
|
|
onEditRule,
|
|
}: {
|
|
rules: any[];
|
|
notifyChannels: any[];
|
|
onReload: () => void;
|
|
onEditRule: ( rule: any) => 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: any) => {
|
|
const ok = await confirm({
|
|
title: '删除告警规则',
|
|
description: '确定删除此告警规则？',
|
|
confirmText: '删除',
|
|
variant: 'destructive',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await alertApi.deleteRule(id);
|
|
toast.success('告警规则已删除');
|
|
onReload();
|
|
} catch (error) {
|
|
console.error('Failed to delete rule:', error);
|
|
toast.error('删除失败');
|
|
}
|
|
};
|
|
|
|
// 批量删除 // Logan.Li
|
|
const handleBatchDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
const ok = await confirm({
|
|
title: '批量删除告警规则',
|
|
description: `确定删除选中的 ${selectedIds.length} 条告警规则吗？此操作不可撤销。`,
|
|
confirmText: '批量删除',
|
|
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('批量删除失败');
|
|
}
|
|
};
|
|
|
|
const handleToggleRule = async ( id: any) => {
|
|
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 text-slate-400">已选择 {selectedIds.length} 项</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
|
|
onClick={handleBatchDelete}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
批量删除
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<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="w-12">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
onCheckedChange={toggleSelectAll}
|
|
className="border-slate-600"
|
|
/>
|
|
</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">状态</TableHead>
|
|
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rules.length === 0 ? (
|
|
<TableRow className="border-slate-800">
|
|
<TableCell colSpan={COL_SPAN} className="text-center text-slate-500 py-12">
|
|
暂无告警规则
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
rules.map((rule) => (
|
|
<TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedIds.includes(rule.id)}
|
|
onCheckedChange={() => toggleSelect(rule.id)}
|
|
className="border-slate-600"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div>
|
|
<span className="text-sm font-medium text-slate-200">{rule.name}</span>
|
|
{rule.description && (
|
|
<p className="text-xs text-slate-500">{rule.description}</p>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<code className="text-xs text-slate-300 bg-slate-800 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 text-red-400 bg-red-500/10">
|
|
严重
|
|
</Badge>
|
|
) : rule.severity === 'warning' ? (
|
|
<Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
|
|
警告
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
|
|
提示
|
|
</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-sm text-slate-300">{(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 text-slate-400 hover:text-slate-100"
|
|
onClick={() => onEditRule(rule)}
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-slate-400 hover:text-red-400"
|
|
onClick={() => handleDeleteRule(rule.id)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|