98 lines
3.0 KiB
Plaintext
98 lines
3.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>告警邮件统计看板</title>
|
|
<script src="/static/js/echarts.min.js"></script>
|
|
<script src="/static/js/jquery.min.js"></script>
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{background:#f3f4f6;padding:20px;font-family:Microsoft Yahei}
|
|
.head{display:flex;gap:20px;margin-bottom:20px}
|
|
.card{background:#fff;padding:20px;border-radius:8px;width:24%;box-shadow:0 1px 3px #ddd}
|
|
.chart-box{display:flex;gap:20px;margin-bottom:20px}
|
|
.chart{width:50%;height:360px;background:#fff;padding:15px;border-radius:8px}
|
|
table{width:100%;background:#fff;border-radius:8px;padding:15px;border-collapse:collapse}
|
|
th,td{border:1px solid #eee;padding:10px;text-align:center}
|
|
th{background:#2f3542;color:#fff}
|
|
.type1{color:#e74c3c;font-weight:bold}
|
|
.type2{color:#27ae60;font-weight:bold}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>当日告警邮件统计看板</h1>
|
|
<div class="head">
|
|
<div class="card">
|
|
<h3>今日触发告警总数</h3>
|
|
<p id="fire" style="font-size:32px;color:red">0</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>今日恢复告警总数</h3>
|
|
<p id="resolve" style="font-size:32px;color:green">0</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>涉及故障实例数</h3>
|
|
<p id="instance" style="font-size:32px;color:#2980b9">0</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-box">
|
|
<div class="chart" id="chart1"></div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>告警名称</th>
|
|
<th>实例</th>
|
|
<th>级别</th>
|
|
<th>故障开始</th>
|
|
<th>恢复时间</th>
|
|
<th>邮件接收时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-body"></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
// 改成你自己的服务器IP端口
|
|
const api = "http://10.150.117.190:8080/api";
|
|
// 1、顶部统计卡片
|
|
$.getJSON(api+"?act=day_total",res=>{
|
|
$("#fire").text(res.fire_count);
|
|
$("#resolve").text(res.resolve_count);
|
|
$("#instance").text(res.instance_num);
|
|
})
|
|
// 2、TOP告警柱状图
|
|
$.getJSON(api+"?act=top_alert",list=>{
|
|
let chart = echarts.init(document.getElementById("chart1"));
|
|
let name = [],cnt=[];
|
|
list.forEach(item=>{name.push(item.alert_name);cnt.push(item.cnt)})
|
|
chart.setOption({
|
|
title:{text:"今日告警次数TOP10"},
|
|
xAxis:{type:"category",data:name,axisLabel:{rotate:30}},
|
|
yAxis:{type:"value"},
|
|
series:[{type:"bar",data:cnt,color:"#3498db"}]
|
|
})
|
|
})
|
|
// 3、告警明细表格
|
|
$.getJSON(api+"?act=log_list",list=>{
|
|
let html = "";
|
|
list.forEach(row=>{
|
|
let typeText = row.alert_type == 1 ? "<span class='type1'>触发</span>" : "<span class='type2'>恢复</span>";
|
|
html += `<tr>
|
|
<td>${typeText}</td>
|
|
<td>${row.alert_name}</td>
|
|
<td>${row.instance}</td>
|
|
<td>${row.severity}</td>
|
|
<td>${row.starts_at || '-'}</td>
|
|
<td>${row.ends_at || '-'}</td>
|
|
<td>${row.receive_time}</td>
|
|
</tr>`
|
|
})
|
|
$("#table-body").html(html);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|