529 lines
18 KiB
TypeScript
529 lines
18 KiB
TypeScript
|
import {
|
|||
|
|
AlertTriangle,
|
|||
|
|
CheckCircle,
|
|||
|
|
XCircle,
|
|||
|
|
Clock,
|
|||
|
|
MessageSquare,
|
|||
|
|
RefreshCw,
|
|||
|
|
Filter,
|
|||
|
|
Info,
|
|||
|
|
AlertOctagon,
|
|||
|
|
Bell,
|
|||
|
|
ChevronRight,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import React, { useEffect, useState, useCallback } from "react";
|
|||
|
|
import { Button } from "../ui/button";
|
|||
|
|
import { Badge } from "../ui/badge";
|
|||
|
|
import { Input } from "../ui/input";
|
|||
|
|
import {
|
|||
|
|
Select,
|
|||
|
|
SelectContent,
|
|||
|
|
SelectItem,
|
|||
|
|
SelectTrigger,
|
|||
|
|
SelectValue,
|
|||
|
|
} from "../ui/select";
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogFooter,
|
|||
|
|
} from "../ui/dialog";
|
|||
|
|
import { Label } from "../ui/label";
|
|||
|
|
import { Textarea } from "../ui/textarea";
|
|||
|
|
import {
|
|||
|
|
inspectionAlertApi,
|
|||
|
|
type AlertRecord,
|
|||
|
|
type AlertLevel,
|
|||
|
|
type AlertRecordStatus,
|
|||
|
|
type AlertStats,
|
|||
|
|
} from "../../infrastructure/inspection/inspectionApi";
|
|||
|
|
import { toast } from "../ui/toast";
|
|||
|
|
|
|||
|
|
const LEVEL_COLORS: Record<AlertLevel, { bg: string; text: string; border: string; dot: string }> = {
|
|||
|
|
critical: {
|
|||
|
|
bg: "bg-red-500/10",
|
|||
|
|
text: "text-red-500",
|
|||
|
|
border: "border-red-500/30",
|
|||
|
|
dot: "bg-red-500",
|
|||
|
|
},
|
|||
|
|
warning: {
|
|||
|
|
bg: "bg-orange-500/10",
|
|||
|
|
text: "text-orange-500",
|
|||
|
|
border: "border-orange-500/30",
|
|||
|
|
dot: "bg-orange-500",
|
|||
|
|
},
|
|||
|
|
info: {
|
|||
|
|
bg: "bg-blue-500/10",
|
|||
|
|
text: "text-blue-500",
|
|||
|
|
border: "border-blue-500/30",
|
|||
|
|
dot: "bg-blue-500",
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const LEVEL_LABELS: Record<AlertLevel, string> = {
|
|||
|
|
critical: "严重",
|
|||
|
|
warning: "警告",
|
|||
|
|
info: "提示",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const STATUS_LABELS: Record<AlertRecordStatus, string> = {
|
|||
|
|
active: "待处理",
|
|||
|
|
acknowledged: "已确认",
|
|||
|
|
resolved: "已恢复",
|
|||
|
|
closed: "已关闭",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const STATUS_COLORS: Record<AlertRecordStatus, string> = {
|
|||
|
|
active: "text-red-500",
|
|||
|
|
acknowledged: "text-orange-500",
|
|||
|
|
resolved: "text-green-500",
|
|||
|
|
closed: "text-muted-foreground",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function AlertCenterPage() {
|
|||
|
|
const [alerts, setAlerts] = useState<AlertRecord[]>([]);
|
|||
|
|
const [stats, setStats] = useState<AlertStats | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [selectedAlert, setSelectedAlert] = useState<AlertRecord | null>(null);
|
|||
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|||
|
|
const [noteDialogOpen, setNoteDialogOpen] = useState(false);
|
|||
|
|
const [noteText, setNoteText] = useState("");
|
|||
|
|
|
|||
|
|
// 筛选
|
|||
|
|
const [filterLevel, setFilterLevel] = useState<string>("all");
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<string>("all");
|
|||
|
|
const [searchText, setSearchText] = useState("");
|
|||
|
|
const [activeTab, setActiveTab] = useState<"active" | "all">("active");
|
|||
|
|
|
|||
|
|
const loadData = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const [statsData, alertsData] = await Promise.all([
|
|||
|
|
inspectionAlertApi.getStats(),
|
|||
|
|
activeTab === "active"
|
|||
|
|
? inspectionAlertApi.getActive()
|
|||
|
|
: inspectionAlertApi.list({ limit: 200 }),
|
|||
|
|
]);
|
|||
|
|
setStats(statsData);
|
|||
|
|
setAlerts(alertsData);
|
|||
|
|
} catch (e: any) {
|
|||
|
|
console.error("[AlertCenter] 加载失败:", e);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [activeTab]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadData();
|
|||
|
|
}, [loadData]);
|
|||
|
|
|
|||
|
|
// 筛选后的数据
|
|||
|
|
const filteredAlerts = (alerts ?? []).filter((a) => {
|
|||
|
|
if (filterLevel !== "all" && a.level !== filterLevel) return false;
|
|||
|
|
if (filterStatus !== "all" && a.status !== filterStatus) return false;
|
|||
|
|
if (searchText) {
|
|||
|
|
const s = searchText.toLowerCase();
|
|||
|
|
if (
|
|||
|
|
!a.device_name.toLowerCase().includes(s) &&
|
|||
|
|
!a.rule_name.toLowerCase().includes(s) &&
|
|||
|
|
!a.message.toLowerCase().includes(s)
|
|||
|
|
)
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleViewDetail = (alert: AlertRecord) => {
|
|||
|
|
setSelectedAlert(alert);
|
|||
|
|
setDetailOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAcknowledge = async () => {
|
|||
|
|
if (!selectedAlert) return;
|
|||
|
|
try {
|
|||
|
|
await inspectionAlertApi.acknowledge(selectedAlert.id, "operator");
|
|||
|
|
toast.success("已确认告警");
|
|||
|
|
setDetailOpen(false);
|
|||
|
|
loadData();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
toast.error("操作失败");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResolve = async () => {
|
|||
|
|
if (!selectedAlert) return;
|
|||
|
|
try {
|
|||
|
|
await inspectionAlertApi.resolve(selectedAlert.id, "manual", "operator");
|
|||
|
|
toast.success("已恢复告警");
|
|||
|
|
setDetailOpen(false);
|
|||
|
|
loadData();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
toast.error("操作失败");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClose = () => {
|
|||
|
|
if (!selectedAlert) return;
|
|||
|
|
setNoteText("");
|
|||
|
|
setNoteDialogOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCloseConfirm = async () => {
|
|||
|
|
if (!selectedAlert) return;
|
|||
|
|
try {
|
|||
|
|
await inspectionAlertApi.close(selectedAlert.id, noteText);
|
|||
|
|
toast.success("已关闭告警");
|
|||
|
|
setNoteDialogOpen(false);
|
|||
|
|
setDetailOpen(false);
|
|||
|
|
loadData();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
toast.error("操作失败");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatTime = (ts: number) => {
|
|||
|
|
return new Date(ts).toLocaleString();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTimeAgo = (ts: number) => {
|
|||
|
|
const diff = Date.now() - ts;
|
|||
|
|
const mins = Math.floor(diff / 60000);
|
|||
|
|
if (mins < 1) return "刚刚";
|
|||
|
|
if (mins < 60) return `${mins} 分钟前`;
|
|||
|
|
const hours = Math.floor(mins / 60);
|
|||
|
|
if (hours < 24) return `${hours} 小时前`;
|
|||
|
|
const days = Math.floor(hours / 24);
|
|||
|
|
return `${days} 天前`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="h-full flex flex-col">
|
|||
|
|
{/* 顶部统计 */}
|
|||
|
|
<div className="px-6 py-4 border-b border-border/60">
|
|||
|
|
<div className="flex items-center justify-between mb-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-9 h-9 rounded-lg bg-red-500/10 flex items-center justify-center">
|
|||
|
|
<Bell size={18} className="text-red-500" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-lg font-semibold">告警中心</h2>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
监控设备巡检产生的告警
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Button variant="outline" size="sm" onClick={loadData}>
|
|||
|
|
<RefreshCw size={14} className="mr-2" />
|
|||
|
|
刷新
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 统计卡片 */}
|
|||
|
|
<div className="grid grid-cols-4 gap-3">
|
|||
|
|
<div className="p-3 rounded-lg border border-red-500/30 bg-red-500/5">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<AlertOctagon size={16} className="text-red-500" />
|
|||
|
|
<span className="text-sm text-muted-foreground">严重告警</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-2xl font-bold text-red-500 mt-1">
|
|||
|
|
{stats?.active_critical ?? 0}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 rounded-lg border border-orange-500/30 bg-orange-500/5">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<AlertTriangle size={16} className="text-orange-500" />
|
|||
|
|
<span className="text-sm text-muted-foreground">警告</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-2xl font-bold text-orange-500 mt-1">
|
|||
|
|
{stats?.active_warning ?? 0}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 rounded-lg border border-blue-500/30 bg-blue-500/5">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Info size={16} className="text-blue-500" />
|
|||
|
|
<span className="text-sm text-muted-foreground">提示</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-2xl font-bold text-blue-500 mt-1">
|
|||
|
|
{stats?.active_info ?? 0}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-3 rounded-lg border border-green-500/30 bg-green-500/5">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<CheckCircle size={16} className="text-green-500" />
|
|||
|
|
<span className="text-sm text-muted-foreground">已恢复</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-2xl font-bold text-green-500 mt-1">
|
|||
|
|
{stats?.resolved ?? 0}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 筛选栏 */}
|
|||
|
|
<div className="flex items-center gap-3 px-6 py-3 border-b border-border/60">
|
|||
|
|
<div className="flex bg-secondary/50 rounded-md p-0.5">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setActiveTab("active")}
|
|||
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
|
|||
|
|
activeTab === "active"
|
|||
|
|
? "bg-background shadow-sm font-medium"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
待处理
|
|||
|
|
{stats && stats.active > 0 && (
|
|||
|
|
<Badge className="ml-2" variant="secondary">
|
|||
|
|
{stats.active}
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setActiveTab("all")}
|
|||
|
|
className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
|
|||
|
|
activeTab === "all"
|
|||
|
|
? "bg-background shadow-sm font-medium"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
全部
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex-1" />
|
|||
|
|
|
|||
|
|
<Select value={filterLevel} onValueChange={setFilterLevel}>
|
|||
|
|
<SelectTrigger className="w-32">
|
|||
|
|
<SelectValue placeholder="级别" />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="all">全部级别</SelectItem>
|
|||
|
|
<SelectItem value="critical">严重</SelectItem>
|
|||
|
|
<SelectItem value="warning">警告</SelectItem>
|
|||
|
|
<SelectItem value="info">提示</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
|
|||
|
|
{activeTab === "all" && (
|
|||
|
|
<Select value={filterStatus} onValueChange={setFilterStatus}>
|
|||
|
|
<SelectTrigger className="w-32">
|
|||
|
|
<SelectValue placeholder="状态" />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="all">全部状态</SelectItem>
|
|||
|
|
<SelectItem value="active">待处理</SelectItem>
|
|||
|
|
<SelectItem value="acknowledged">已确认</SelectItem>
|
|||
|
|
<SelectItem value="resolved">已恢复</SelectItem>
|
|||
|
|
<SelectItem value="closed">已关闭</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Input
|
|||
|
|
placeholder="搜索设备/规则..."
|
|||
|
|
value={searchText}
|
|||
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|||
|
|
className="w-48"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 告警列表 */}
|
|||
|
|
<div className="flex-1 overflow-auto">
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="text-center text-muted-foreground py-12">加载中...</div>
|
|||
|
|
) : filteredAlerts.length === 0 ? (
|
|||
|
|
<div className="text-center text-muted-foreground py-16">
|
|||
|
|
<CheckCircle size={40} className="mx-auto mb-3 text-green-500 opacity-40" />
|
|||
|
|
<p className="text-sm">暂无告警记录</p>
|
|||
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|||
|
|
{activeTab === "active" ? "所有设备运行正常" : "还没有产生过告警"}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="divide-y divide-border/60">
|
|||
|
|
{filteredAlerts.map((alert) => {
|
|||
|
|
const colors = LEVEL_COLORS[alert.level];
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={alert.id}
|
|||
|
|
onClick={() => handleViewDetail(alert)}
|
|||
|
|
className="flex items-center gap-4 px-6 py-3 hover:bg-accent/30 cursor-pointer transition-colors"
|
|||
|
|
>
|
|||
|
|
{/* 级别指示点 */}
|
|||
|
|
<div className={`w-2 h-2 rounded-full ${colors.dot}`} />
|
|||
|
|
|
|||
|
|
{/* 主要内容 */}
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|||
|
|
<span className="font-medium truncate">{alert.device_name}</span>
|
|||
|
|
<Badge
|
|||
|
|
variant="outline"
|
|||
|
|
className={`${colors.bg} ${colors.text} ${colors.border} border`}
|
|||
|
|
>
|
|||
|
|
{LEVEL_LABELS[alert.level]}
|
|||
|
|
</Badge>
|
|||
|
|
<span className={`text-xs ${STATUS_COLORS[alert.status]}`}>
|
|||
|
|
{STATUS_LABELS[alert.status]}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm text-muted-foreground truncate">
|
|||
|
|
{alert.rule_name} — {alert.message}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 时间 */}
|
|||
|
|
<div className="text-right shrink-0">
|
|||
|
|
<div className="text-sm text-muted-foreground">
|
|||
|
|
{getTimeAgo(alert.triggered_at)}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-muted-foreground/60">
|
|||
|
|
{formatTime(alert.triggered_at)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ChevronRight size={16} className="text-muted-foreground shrink-0" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 详情弹窗 */}
|
|||
|
|
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
|||
|
|
<DialogContent className="max-w-lg">
|
|||
|
|
{selectedAlert && (
|
|||
|
|
<>
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle className="flex items-center gap-2">
|
|||
|
|
<div
|
|||
|
|
className={`w-2 h-2 rounded-full ${LEVEL_COLORS[selectedAlert.level].dot}`}
|
|||
|
|
/>
|
|||
|
|
告警详情
|
|||
|
|
</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
<div className="space-y-4 py-2">
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">设备名称</div>
|
|||
|
|
<div className="text-sm font-medium">{selectedAlert.device_name}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">告警级别</div>
|
|||
|
|
<Badge
|
|||
|
|
variant="outline"
|
|||
|
|
className={`${LEVEL_COLORS[selectedAlert.level].bg} ${
|
|||
|
|
LEVEL_COLORS[selectedAlert.level].text
|
|||
|
|
} ${LEVEL_COLORS[selectedAlert.level].border} border`}
|
|||
|
|
>
|
|||
|
|
{LEVEL_LABELS[selectedAlert.level]}
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">规则名称</div>
|
|||
|
|
<div className="text-sm">{selectedAlert.rule_name}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">告警消息</div>
|
|||
|
|
<div className="text-sm p-2 bg-secondary/30 rounded-md">
|
|||
|
|
{selectedAlert.message}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">当前值</div>
|
|||
|
|
<div className="text-sm font-mono">{selectedAlert.metric_value}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">阈值</div>
|
|||
|
|
<div className="text-sm font-mono">{selectedAlert.threshold}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">触发时间</div>
|
|||
|
|
<div className="text-sm">{formatTime(selectedAlert.triggered_at)}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">当前状态</div>
|
|||
|
|
<div className={`text-sm font-medium ${STATUS_COLORS[selectedAlert.status]}`}>
|
|||
|
|
{STATUS_LABELS[selectedAlert.status]}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{selectedAlert.note && (
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs text-muted-foreground mb-1">备注</div>
|
|||
|
|
<div className="text-sm text-muted-foreground">{selectedAlert.note}</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<DialogFooter className="flex justify-between">
|
|||
|
|
<Button variant="outline" onClick={() => setDetailOpen(false)}>
|
|||
|
|
关闭
|
|||
|
|
</Button>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
{selectedAlert.status === "active" && (
|
|||
|
|
<Button variant="outline" onClick={handleAcknowledge}>
|
|||
|
|
<MessageSquare size={14} className="mr-2" />
|
|||
|
|
确认
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{(selectedAlert.status === "active" ||
|
|||
|
|
selectedAlert.status === "acknowledged") && (
|
|||
|
|
<Button variant="outline" onClick={handleResolve}>
|
|||
|
|
<CheckCircle size={14} className="mr-2" />
|
|||
|
|
恢复
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{selectedAlert.status !== "closed" && (
|
|||
|
|
<Button variant="destructive" onClick={handleClose}>
|
|||
|
|
<XCircle size={14} className="mr-2" />
|
|||
|
|
关闭
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
|
|||
|
|
{/* 关闭备注弹窗 */}
|
|||
|
|
<Dialog open={noteDialogOpen} onOpenChange={setNoteDialogOpen}>
|
|||
|
|
<DialogContent className="max-w-md">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>关闭告警</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
<div className="space-y-3 py-2">
|
|||
|
|
<Label>关闭原因（可选）</Label>
|
|||
|
|
<Textarea
|
|||
|
|
placeholder="请输入关闭原因或处理备注..."
|
|||
|
|
value={noteText}
|
|||
|
|
onChange={(e) => setNoteText(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<DialogFooter>
|
|||
|
|
<Button variant="outline" onClick={() => setNoteDialogOpen(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="destructive" onClick={handleCloseConfirm}>
|
|||
|
|
确认关闭
|
|||
|
|
</Button>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default AlertCenterPage;
|