feat: 定时任务编辑入口全栈打通 + 修复ApprovalFlow编译错误 + 完成大文件拆分重构
- CronJobManager: 编辑按钮接通 onClick → openEdit(job)，弹出编辑对话框预填数据，
复用新建/编辑共用 Dialog（editingId 区分模式），标题/按钮文案动态切换，
保存时根据 editingId 调用 createJob 或 updateJob — 消除占位按钮
- ApprovalFlow: 修复 API 方法名不匹配导致 tsc -b 编译失败
(getInstances→getProcesses, getMyApprovals→getProcesses({status:'pending'}),
approveInstance→approveProcess, rejectInstance→rejectProcess)
+ 添加 ApprovalFlowManager 导出别名兼容 App.tsx 导入
- 合并已完成的大文件拆分重构: automation.go→automation_cron/script/playbook,
ldap.go→ldap_ou/ldap_users, server.go→cloud_accounts/domain/platform/region,
user.go→user_admin; 前端 Dashboard/K8s/Server/Approval/Monitor 子组件拆分
// Logan.Li
This commit is contained in:
attacker committed
1 parent
8be63ac168
commit
a7e2351ad2
37 files changed
+7374
-4891
No files matched your search
@@ -0,0 +1,252 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { alertApi } from '@/services/api';
|
||||
import { parseChannels, getChannelIcon, getChannelTypeLabel } from './alertShared';
|
||||
|
||||
const emptyRuleForm = {
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'metric',
|
||||
source: 'prometheus',
|
||||
expression: '',
|
||||
severity: 'warning',
|
||||
duration: 300,
|
||||
notify_channels: [] as string[],
|
||||
};
|
||||
|
||||
export function AlertRuleDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingRule,
|
||||
notifyChannels,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingRule: any;
|
||||
notifyChannels: any[];
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const [ruleForm, setRuleForm] = useState({ ...emptyRuleForm });
|
||||
const [ruleSaving, setRuleSaving] = useState(false);
|
||||
|
||||
// 打开时同步表单（编辑时填充，新建时重置）
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editingRule) {
|
||||
setRuleForm({
|
||||
name: editingRule.name || '',
|
||||
description: editingRule.description || '',
|
||||
type: editingRule.type || 'metric',
|
||||
source: editingRule.source || 'prometheus',
|
||||
expression: editingRule.expression || '',
|
||||
severity: editingRule.severity || 'warning',
|
||||
duration: editingRule.duration || 300,
|
||||
notify_channels: parseChannels(editingRule.notify_channels),
|
||||
});
|
||||
} else {
|
||||
setRuleForm({ ...emptyRuleForm });
|
||||
}
|
||||
}, [open, editingRule]);
|
||||
|
||||
const toggleNotifyChannel = (channel: string) => {
|
||||
setRuleForm((prev) => ({
|
||||
...prev,
|
||||
notify_channels: prev.notify_channels.includes(channel)
|
||||
? prev.notify_channels.filter((c) => c !== channel)
|
||||
: [...prev.notify_channels, channel],
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSaveRule = async () => {
|
||||
if (!ruleForm.name.trim() || !ruleForm.expression.trim()) return;
|
||||
setRuleSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
name: ruleForm.name.trim(),
|
||||
description: ruleForm.description.trim(),
|
||||
type: ruleForm.type,
|
||||
source: ruleForm.source,
|
||||
expression: ruleForm.expression.trim(),
|
||||
severity: ruleForm.severity,
|
||||
duration: Number(ruleForm.duration) || 0,
|
||||
notify_channels: ruleForm.notify_channels,
|
||||
};
|
||||
if (editingRule) {
|
||||
await alertApi.updateRule(editingRule.id, payload);
|
||||
} else {
|
||||
await alertApi.createRule(payload);
|
||||
}
|
||||
onOpenChange(false);
|
||||
onSaved();
|
||||
} catch (error) {
|
||||
console.error('Failed to save rule:', error);
|
||||
} finally {
|
||||
setRuleSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="bg-slate-900 border-slate-700 text-slate-100 max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100">
|
||||
{editingRule ? '编辑告警规则' : '新建告警规则'}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-500">
|
||||
{editingRule ? '修改告警规则的触发条件和通知方式' : '配置监控指标的告警触发条件'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">规则名称 <span className="text-red-400">*</span></Label>
|
||||
<Input
|
||||
value={ruleForm.name}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
|
||||
placeholder="如：CPU 使用率告警"
|
||||
className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">描述</Label>
|
||||
<Textarea
|
||||
value={ruleForm.description}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })}
|
||||
placeholder="规则说明"
|
||||
rows={2}
|
||||
className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">规则类型</Label>
|
||||
<select
|
||||
value={ruleForm.type}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, type: e.target.value })}
|
||||
className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
|
||||
>
|
||||
<option value="metric">指标监控</option>
|
||||
<option value="log">日志告警</option>
|
||||
<option value="event">事件告警</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">数据源</Label>
|
||||
<select
|
||||
value={ruleForm.source}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, source: e.target.value })}
|
||||
className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
|
||||
>
|
||||
<option value="prometheus">Prometheus</option>
|
||||
<option value="zabbix">Zabbix</option>
|
||||
<option value="custom">自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">触发表达式 <span className="text-red-400">*</span></Label>
|
||||
<Input
|
||||
value={ruleForm.expression}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, expression: e.target.value })}
|
||||
placeholder="如：cpu_usage > 80"
|
||||
className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-slate-600">PromQL 或指标表达式，例如 cpu_usage > 80</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">告警级别</Label>
|
||||
<select
|
||||
value={ruleForm.severity}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, severity: e.target.value })}
|
||||
className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
|
||||
>
|
||||
<option value="info">提示</option>
|
||||
<option value="warning">警告</option>
|
||||
<option value="critical">严重</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">持续时间（秒）</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={ruleForm.duration}
|
||||
onChange={(e) => setRuleForm({ ...ruleForm, duration: Number(e.target.value) })}
|
||||
className="bg-slate-800/50 border-slate-700 text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">通知渠道</Label>
|
||||
{notifyChannels.length === 0 ? (
|
||||
<div className="text-xs text-amber-400/80 bg-amber-500/5 border border-amber-500/20 rounded-md px-3 py-2">
|
||||
暂无已配置的通知渠道，请先在「通知渠道配置」中添加
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-3 pt-1">
|
||||
{notifyChannels.map((ch) => {
|
||||
const Icon = getChannelIcon(ch.type);
|
||||
const checked = ruleForm.notify_channels.includes(String(ch.id));
|
||||
return (
|
||||
<label
|
||||
key={ch.id}
|
||||
className="flex items-center gap-2 cursor-pointer select-none text-sm text-slate-300"
|
||||
>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleNotifyChannel(String(ch.id))}
|
||||
className="data-[state=checked]:bg-blue-600"
|
||||
/>
|
||||
<Icon className="h-4 w-4 text-slate-400" />
|
||||
<span>
|
||||
{ch.name}
|
||||
<span className="text-xs text-slate-500 ml-1">({getChannelTypeLabel(ch.type)})</span>
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-slate-700 text-slate-300 hover:bg-slate-800"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
disabled={!ruleForm.name.trim() || !ruleForm.expression.trim() || ruleSaving}
|
||||
onClick={handleSaveRule}
|
||||
>
|
||||
{ruleSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
{editingRule ? '保存修改' : '创建规则'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user