snapshot: AnsibleManager拆分前快照

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

No files matched your search

+42
View File
@@ -251,6 +251,48 @@ func (h *AlertHandler) DeleteRule(c *gin.Context) {
})
}
// BatchDeleteRules 批量删除告警规则 // Logan.Li
// @Summary 批量删除告警规则
// @Description 批量删除指定告警规则
// @Tags 告警
// @Accept json
// @Produce json
// @Security Bearer
// @Param request body models.IDsRequest true "删除请求"
// @Success 200 {object} models.Response
// @Router /alerts/rules/batch-delete [delete]
func (h *AlertHandler) BatchDeleteRules(c *gin.Context) {
var req models.IDsRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, models.Response{
Code: 400,
Message: "请求参数错误",
})
return
}
if len(req.IDs) == 0 {
c.JSON(http.StatusBadRequest, models.Response{
Code: 400,
Message: "请选择要删除的规则",
})
return
}
if err := h.db.Delete(&models.AlertRule{}, req.IDs).Error; err != nil {
c.JSON(http.StatusInternalServerError, models.Response{
Code: 500,
Message: "删除失败",
})
return
}
c.JSON(http.StatusOK, models.Response{
Code: 200,
Message: "删除成功",
})
}
// ToggleRule 切换告警规则状态
// @Summary 切换告警规则状态
// @Description 启用或禁用告警规则
+18
View File
@@ -115,6 +115,24 @@ func (h *AnsibleHandler) DeletePlaybook(c *gin.Context) {
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "已删除"})
}
// BatchDeletePlaybooks 批量删除 Playbook // Logan.Li
func (h *AnsibleHandler) BatchDeletePlaybooks(c *gin.Context) {
var req models.IDsRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "请求参数错误"})
return
}
if len(req.IDs) == 0 {
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "ids 不能为空"})
return
}
if err := h.db.Delete(&models.AnsiblePlaybook{}, req.IDs).Error; err != nil {
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "删除失败"})
return
}
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "已删除"})
}
// ==================== Job ====================
func (h *AnsibleHandler) ListJobs(c *gin.Context) {
@@ -210,6 +210,40 @@ func (h *AutomationHandler) DeleteCronJob(c *gin.Context) {
})
}
// BatchDeleteCronJobs 批量删除定时任务
// @Summary 批量删除定时任务
// @Description 批量删除定时任务
// @Tags 自动化运维
// @Accept json
// @Produce json
// @Security Bearer
// @Param request body models.IDsRequest true "删除请求"
// @Success 200 {object} models.Response
// @Router /cron-jobs/batch-delete [delete]
func (h *AutomationHandler) BatchDeleteCronJobs(c *gin.Context) {
var req models.IDsRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, models.Response{
Code: 400,
Message: "请求参数错误",
})
return
}
if err := h.db.Delete(&models.CronJob{}, req.IDs).Error; err != nil {
c.JSON(http.StatusInternalServerError, models.Response{
Code: 500,
Message: "删除失败",
})
return
}
c.JSON(http.StatusOK, models.Response{
Code: 200,
Message: "删除成功",
})
}
// ToggleCronJob 切换定时任务状态
// @Summary 切换定时任务状态
// @Description 启用或禁用定时任务
@@ -205,6 +205,40 @@ func (h *AutomationHandler) DeleteScript(c *gin.Context) {
})
}
// BatchDeleteScripts 批量删除脚本
// @Summary 批量删除脚本
// @Description 批量删除脚本
// @Tags 自动化运维
// @Accept json
// @Produce json
// @Security Bearer
// @Param request body models.IDsRequest true "删除请求"
// @Success 200 {object} models.Response
// @Router /scripts/batch-delete [post]
func (h *AutomationHandler) BatchDeleteScripts(c *gin.Context) {
var req models.IDsRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, models.Response{
Code: 400,
Message: "请求参数错误",
})
return
}
if err := h.db.Delete(&models.Script{}, req.IDs).Error; err != nil {
c.JSON(http.StatusInternalServerError, models.Response{
Code: 500,
Message: "删除失败",
})
return
}
c.JSON(http.StatusOK, models.Response{
Code: 200,
Message: "删除成功",
})
}
// ExecuteScript 执行脚本
// @Summary 执行脚本
// @Description 在目标服务器上执行脚本
@@ -125,3 +125,27 @@ func (h *RegionHandler) DeleteRegion(c *gin.Context) {
}
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "删除成功"})
}
// BatchDeleteRegions 批量删除区域 // Logan.Li
// @Summary 批量删除区域
// @Description 批量删除区域
// @Tags 云区域
// @Accept json
// @Produce json
// @Security Bearer
// @Param request body models.IDsRequest true "删除请求"
// @Success 200 {object} models.Response
// @Router /regions/batch-delete [delete]
func (h *RegionHandler) BatchDeleteRegions(c *gin.Context) {
var req models.IDsRequest
if err := c.ShouldBindJSON(&req); err != nil {
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "请求参数错误"})
return
}
if err := h.db.Delete(&models.Region{}, req.IDs).Error; err != nil {
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "删除失败"})
return
}
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "删除成功"})
}
+5
View File
@@ -150,6 +150,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
regions.GET("", regionHandler.ListRegions)
regions.POST("", regionHandler.CreateRegion)
regions.PUT("/:id", regionHandler.UpdateRegion)
regions.DELETE("/batch-delete", regionHandler.BatchDeleteRegions) // Logan.Li
regions.DELETE("/:id", regionHandler.DeleteRegion)
}
@@ -207,6 +208,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
alerts.GET("/rules", alertHandler.ListRules)
alerts.POST("/rules", alertHandler.CreateRule)
alerts.PUT("/rules/:id", alertHandler.UpdateRule)
alerts.DELETE("/rules/batch-delete", alertHandler.BatchDeleteRules)
alerts.DELETE("/rules/:id", alertHandler.DeleteRule)
alerts.POST("/rules/:id/toggle", alertHandler.ToggleRule)
alerts.POST("/:id/ack", alertHandler.AcknowledgeAlert)
@@ -249,6 +251,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
cronJobs.POST("", automationHandler.CreateCronJob)
cronJobs.GET("/:id", automationHandler.GetCronJob)
cronJobs.PUT("/:id", automationHandler.UpdateCronJob)
cronJobs.DELETE("/batch-delete", automationHandler.BatchDeleteCronJobs)
cronJobs.DELETE("/:id", automationHandler.DeleteCronJob)
cronJobs.POST("/:id/toggle", automationHandler.ToggleCronJob)
cronJobs.POST("/:id/execute", automationHandler.ExecuteCronJob)
@@ -260,6 +263,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
scripts.POST("", automationHandler.CreateScript)
scripts.GET("/:id", automationHandler.GetScript)
scripts.PUT("/:id", automationHandler.UpdateScript)
scripts.POST("/batch-delete", automationHandler.BatchDeleteScripts)
scripts.DELETE("/:id", automationHandler.DeleteScript)
scripts.POST("/:id/execute", automationHandler.ExecuteScript)
}
@@ -286,6 +290,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
ansible.GET("/playbooks/:id", ansibleHandler.GetPlaybook)
ansible.PUT("/playbooks/:id", ansibleHandler.UpdatePlaybook)
ansible.DELETE("/playbooks/:id", ansibleHandler.DeletePlaybook)
ansible.DELETE("/playbooks/batch-delete", ansibleHandler.BatchDeletePlaybooks)
ansible.POST("/playbooks/:id/execute", ansibleHandler.ExecutePlaybook)
ansible.GET("/jobs", ansibleHandler.ListJobs)
@@ -17,6 +17,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { ansibleApi, taskExecutionApi } from '@/services/api';
@@ -116,6 +117,7 @@ const AnsibleManager: React.FC = () => {
const [searchQuery, setSearchQuery] = useState('');
const [categoryFilter, setCategoryFilter] = useState<string>('all');
const [activeTab, setActiveTab] = useState('playbooks');
const [selectedIds, setSelectedIds] = useState<number[]>([]);
// 弹窗状态
const [editorOpen, setEditorOpen] = useState(false); // 新建/编辑
@@ -251,6 +253,41 @@ const AnsibleManager: React.FC = () => {
}
};
// ---- 批量选择 / 删除 ---- // Logan.Li
const toggleSelect = (id: number) => {
setSelectedIds((prev) =>
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
);
};
const toggleSelectAll = () => {
if (selectedIds.length === filteredPlaybooks.length && filteredPlaybooks.length > 0) {
setSelectedIds([]);
} else {
setSelectedIds(filteredPlaybooks.map((pb) => pb.id));
}
};
const handleBatchDelete = async () => {
if (selectedIds.length === 0) return;
const ok = await _confirm({
title: '批量删除 Playbook',
description: `确定删除选中的 ${selectedIds.length} 个 Playbook 吗?此操作不可恢复。`,
confirmText: '批量删除',
variant: 'destructive',
});
if (!ok) return;
try {
await ansibleApi.batchDeletePlaybooks(selectedIds);
toast.success(`已删除 ${selectedIds.length} 个 Playbook`);
setSelectedIds([]);
fetchPlaybooks();
} catch (error) {
toast.error('批量删除失败');
}
};
// ---- 执行 ----
const handleExecute = async (pb: Playbook) => {
@@ -419,6 +456,36 @@ const AnsibleManager: React.FC = () => {
</div>
</div>
{/* 批量操作栏 */}
{filteredPlaybooks.length > 0 && (
<div className="flex items-center justify-between gap-2 rounded-lg border bg-muted/40 px-4 py-2">
<div className="flex items-center gap-3">
<Checkbox
checked={
selectedIds.length === filteredPlaybooks.length && filteredPlaybooks.length > 0
}
onCheckedChange={toggleSelectAll}
/>
<span className="text-sm text-muted-foreground">
{selectedIds.length > 0
? `已选择 ${selectedIds.length} / ${filteredPlaybooks.length} 项`
: `共 ${filteredPlaybooks.length} 项`}
</span>
</div>
{selectedIds.length > 0 && (
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={() => setSelectedIds([])}>
取消选择
</Button>
<Button variant="destructive" size="sm" onClick={handleBatchDelete}>
<Trash2 className="w-4 h-4 mr-2" />
批量删除
</Button>
</div>
)}
</div>
)}
{/* Playbook 卡片列表 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{loading ? (
@@ -434,6 +501,11 @@ const AnsibleManager: React.FC = () => {
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<Checkbox
checked={selectedIds.includes(playbook.id)}
onCheckedChange={() => toggleSelect(playbook.id)}
className="shrink-0"
/>
<FileCode className="w-5 h-5 text-blue-500 shrink-0" />
<CardTitle className="text-base truncate">{playbook.name}</CardTitle>
</div>
@@ -3,6 +3,7 @@ import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import {
Dialog,
DialogContent,
@@ -59,6 +60,8 @@ export function CronJobManager() {
const [executionsLoading, setExecutionsLoading] = useState(false);
const [expandedExec, setExpandedExec] = useState<number | null>(null);
const [executingId, setExecutingId] = useState<number | null>(null);
// 批量选择(批量删除) // Logan.Li
const [selectedIds, setSelectedIds] = useState<number[]>([]);
// editingId === null 表示新建模式;非 null 表示编辑已有任务 // Logan.Li
const [editingId, setEditingId] = useState<number | null>(null);
const [formJob, setFormJob] = useState({
@@ -250,6 +253,42 @@ export function CronJobManager() {
}
};
// 批量选择相关 // Logan.Li
const toggleSelect = (id: number) => {
setSelectedIds((prev) =>
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
);
};
const toggleSelectAll = () => {
if (selectedIds.length === filteredJobs.length && filteredJobs.length > 0) {
setSelectedIds([]);
} else {
setSelectedIds(filteredJobs.map((j) => j.id));
}
};
// 批量删除任务(带确认框) // 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 cronJobApi.batchDelete(selectedIds);
toast.success(`已删除 ${selectedIds.length} 个任务`);
setSelectedIds([]);
refreshData();
} catch (error) {
console.error('Failed to batch delete jobs:', error);
toast.error('批量删除失败');
}
};
return (
<div className="space-y-6">
{/* Header */}
@@ -318,16 +357,44 @@ export function CronJobManager() {
</div>
{/* Filters */}
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
<Input
placeholder="搜索任务..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/>
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex items-center gap-3 flex-wrap">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
<Input
placeholder="搜索任务..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/>
</div>
{filteredJobs.length > 0 && (
<label className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)] cursor-pointer select-none">
<Checkbox
checked={
selectedIds.length === filteredJobs.length && filteredJobs.length > 0
}
onCheckedChange={toggleSelectAll}
className="border-[var(--dg-border)]"
/>
全选
</label>
)}
</div>
{selectedIds.length > 0 && (
<div className="flex items-center gap-2">
<span className="text-sm text-[var(--dg-text-secondary)]">已选择 {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>
)}
</div>
{initialLoading ? (
@@ -346,7 +413,14 @@ export function CronJobManager() {
{filteredJobs.map((job) => (
<Card key={job.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="flex items-start justify-between gap-3">
<div className="flex items-center pt-1">
<Checkbox
checked={selectedIds.includes(job.id)}
onCheckedChange={() => toggleSelect(job.id)}
className="border-[var(--dg-border)]"
/>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 flex-wrap">
<h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
@@ -14,6 +14,7 @@ import {
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Checkbox } from '@/components/ui/checkbox';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
@@ -100,6 +101,7 @@ export function ScriptManager() {
const [searchQuery, setSearchQuery] = useState('');
const [typeFilter, setTypeFilter] = useState<string>('all');
const [activeTab, setActiveTab] = useState('scripts');
const [selectedIds, setSelectedIds] = useState<number[]>([]);
// 弹窗状态
const [editorOpen, setEditorOpen] = useState(false); // 新建/编辑
@@ -306,6 +308,41 @@ export function ScriptManager() {
return matchSearch && matchType;
});
// ---- 批量选择 / 批量删除 ----
const toggleSelect = (id: number) => {
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
};
const toggleSelectAll = () => {
setSelectedIds(prev =>
prev.length === filteredScripts.length && filteredScripts.length > 0
? []
: filteredScripts.map(sc => sc.id)
);
};
const handleBatchDelete = async () => {
if (selectedIds.length === 0) return;
const ok = await _confirm({
title: '批量删除脚本',
description: `确定删除选中的 ${selectedIds.length} 个脚本吗?此操作不可恢复。`,
confirmText: '批量删除',
variant: 'destructive',
});
if (!ok) return;
try {
await scriptApi.batchDelete(selectedIds);
toast.success(`已删除 ${selectedIds.length} 个脚本`);
setSelectedIds([]);
fetchScripts();
} catch (error) {
toast.error('批量删除失败');
}
};
const allSelected = filteredScripts.length > 0 && selectedIds.length === filteredScripts.length;
const runningCount = executions.filter(e => e.status === 'running').length;
const todaySuccess = executions.filter(e =>
e.status === 'success' && new Date(e.created_at).toDateString() === new Date().toDateString()
@@ -415,6 +452,36 @@ export function ScriptManager() {
</div>
</div>
{/* 批量操作栏 */}
{selectedIds.length > 0 && (
<div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
<div className="flex items-center gap-3">
<Checkbox
checked={allSelected}
onCheckedChange={toggleSelectAll}
className="border-[var(--dg-border)]"
/>
<span className="text-sm text-[var(--dg-text-secondary)]">
已选择 {selectedIds.length} 项 / 共 {filteredScripts.length} 项
</span>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => setSelectedIds([])}>
取消选择
</Button>
<Button
variant="outline"
size="sm"
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
onClick={handleBatchDelete}
>
<Trash2 className="w-4 h-4 mr-2" />
批量删除
</Button>
</div>
</div>
)}
{/* 脚本卡片列表 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{loading ? (
@@ -432,6 +499,11 @@ export function ScriptManager() {
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<Checkbox
checked={selectedIds.includes(sc.id)}
onCheckedChange={() => toggleSelect(sc.id)}
className="border-[var(--dg-border)]"
/>
<FileCode className="w-5 h-5 text-purple-500 shrink-0" />
<CardTitle className="text-base truncate">{sc.name}</CardTitle>
</div>
+95 -21
View File
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import {
Table,
TableBody,
@@ -36,6 +37,8 @@ import {
Loader2,
} from 'lucide-react';
import { regionApi } from '@/services/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
const providerNames: Record<string, string> = {
aws: 'AWS',
@@ -54,10 +57,12 @@ const providerColors: Record<string, string> = {
};
export function RegionManager() {
const confirm = useConfirm();
const [regions, setRegions] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [selectedProvider, setSelectedProvider] = useState('all');
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [dialogOpen, setDialogOpen] = useState(false);
const [editingItem, setEditingItem] = useState<any>(null);
const [submitting, setSubmitting] = useState(false);
@@ -88,6 +93,19 @@ export function RegionManager() {
return matchSearch && matchProvider;
});
// 全选 / 单选 // Logan.Li
const allSelected = filtered.length > 0 && filtered.every(r => selectedIds.includes(r.id));
const toggleSelectAll = () => {
if (allSelected) {
setSelectedIds([]);
} else {
setSelectedIds(filtered.map(r => r.id));
}
};
const toggleSelect = (id: number) => {
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
};
const openCreate = () => {
setEditingItem(null);
setFormData({ name: '', code: '', provider: 'aliyun', location: '', status: 'active', endpoint: '' });
@@ -120,13 +138,46 @@ export function RegionManager() {
}
};
const [deleteId, setDeleteId] = useState<number | null>(null);
const handleDelete = (id: number) => setDeleteId(id);
const confirmDelete = async () => {
if (deleteId === null) return;
await regionApi.delete(deleteId);
setDeleteId(null);
loadData();
// 单条删除 // Logan.Li
const handleDelete = async (id: number) => {
const region = regions.find(r => r.id === id);
const ok = await confirm({
title: '删除区域',
description: `确定删除「${region?.name || id}」吗?此操作不可撤销。`,
confirmText: '删除',
variant: 'destructive',
});
if (!ok) return;
try {
await regionApi.delete(id);
toast.success('区域已删除');
setSelectedIds(prev => prev.filter(i => i !== id));
loadData();
} catch (e) {
console.error('删除区域失败:', e);
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 regionApi.batchDelete(selectedIds);
toast.success(`已删除 ${selectedIds.length} 个区域`);
setSelectedIds([]);
loadData();
} catch (e) {
console.error('批量删除失败:', e);
toast.error('批量删除失败');
}
};
return (
@@ -161,6 +212,29 @@ export function RegionManager() {
</Button>
</div>
{/* 批量操作栏 // Logan.Li */}
{selectedIds.length > 0 && (
<div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700">
<span className="text-sm text-slate-300">
已选择 <span className="font-semibold text-slate-100">{selectedIds.length}</span> 个区域
</span>
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-slate-400 hover:text-slate-200">
取消选择
</Button>
<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-1.5" />
批量删除
</Button>
</div>
</div>
)}
{/* Table */}
{loading ? (
<div className="flex justify-center py-20">
@@ -176,6 +250,13 @@ export function RegionManager() {
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="w-10">
<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>
@@ -188,6 +269,13 @@ export function RegionManager() {
<TableBody>
{filtered.map((r) => (
<TableRow key={r.id} className="border-slate-800/50 group">
<TableCell>
<Checkbox
checked={selectedIds.includes(r.id)}
onCheckedChange={() => toggleSelect(r.id)}
className="border-slate-600"
/>
</TableCell>
<TableCell className="font-medium text-slate-200">{r.name}</TableCell>
<TableCell className="font-mono text-sm text-slate-400">{r.code}</TableCell>
<TableCell>
@@ -308,20 +396,6 @@ export function RegionManager() {
</DialogFooter>
</DialogContent>
</Dialog>
{/* 删除确认 */}
<Dialog open={deleteId !== null} onOpenChange={(v) => !v && setDeleteId(null)}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>确认删除</DialogTitle>
</DialogHeader>
<p className="text-sm text-slate-400">确定删除此区域?此操作不可撤销。</p>
<DialogFooter>
<Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
<Button variant="destructive" onClick={confirmDelete}>删除</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}
+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>
+17
View File
@@ -191,6 +191,9 @@ export const alertApi = {
deleteRule: async (id: number | string) => {
return http.delete(`/alerts/rules/${id}`);
},
batchDeleteRules: async (ids: number[]) => {
return http.delete('/alerts/rules/batch-delete', { ids });
},
toggleRule: async (id: number | string) => {
return http.post(`/alerts/rules/${id}/toggle`);
},
@@ -285,6 +288,9 @@ export const cronJobApi = {
executeJob: async (id: number | string) => {
return http.post(`/cron-jobs/${id}/execute`);
},
batchDelete: async (ids: number[]) => {
return http.delete('/cron-jobs/batch-delete', { ids });
},
};
// ==================== 脚本 API ====================
@@ -304,6 +310,9 @@ export const scriptApi = {
deleteScript: async (id: number | string) => {
return http.delete(`/scripts/${id}`);
},
batchDelete: async (ids: number[]) => {
return http.post('/scripts/batch-delete', { ids });
},
executeScript: async (id: number | string) => {
return http.post(`/scripts/${id}/execute`);
},
@@ -488,6 +497,10 @@ export const regionApi = {
delete: async (id: number | string) => {
return http.delete(`/regions/${id}`);
},
// 批量删除 // Logan.Li
batchDelete: async (ids: number[]) => {
return http.delete('/regions/batch-delete', { ids });
},
};
// ==================== 资源模型 API ====================
@@ -580,6 +593,10 @@ export const ansibleApi = {
deletePlaybook: async (id: number | string) => {
return http.delete(`/ansible/playbooks/${id}`);
},
// 批量删除 Playbook // Logan.Li
batchDeletePlaybooks: async (ids: number[]) => {
return http.delete('/ansible/playbooks/batch-delete', { ids });
},
executePlaybook: async (id: number | string) => {
return http.post(`/ansible/playbooks/${id}/execute`);
},
+2 -2
View File
@@ -75,8 +75,8 @@ export const http = {
request<T>('POST', url, body),
put: <T = any>(url: string, body?: any) =>
request<T>('PUT', url, body),
delete: <T = any>(url: string) =>
request<T>('DELETE', url),
delete: <T = any>(url: string, body?: any) =>
request<T>('DELETE', url, body),
};
export default http;