rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: AnsibleManager拆分前快照

Browse Source
This commit is contained in:
attacker committed 2026-06-15 10:01:24 +08:00
1 parent 16205fdb2b
commit e6d9f364e5
13 files changed
+660 -103
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/monitor/AlertRulesTab.tsx
+161 -70
View File
@@ -1,8 +1,10 @@
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,
@@ -12,9 +14,12 @@ import {
TableRow,
} from '@/components/ui/table';
import { Settings, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
import { alertApi } from '@/services/api';
import { renderRuleChannels } from './alertShared';
const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li
export function AlertRulesTab({
rules,
notifyChannels,
@@ -26,15 +31,61 @@ export function AlertRulesTab({
onReload: () => void;
onEditRule: (rule: any) => void;
}) {
const _confirm = useConfirm();
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; }
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('批量删除失败');
}
};
@@ -47,14 +98,39 @@ export function AlertRulesTab({
}
};
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>
@@ -66,76 +142,91 @@ export function AlertRulesTab({
</TableRow>
</TableHeader>
<TableBody>
{rules.map((rule) => (
<TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
<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>
<code className="text-xs text-blue-300">
{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>
{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>
<code className="text-xs text-blue-300">
{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>