admin/aler_dashboard_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
admin
2026-07-09 16:31:30 +08:00
commit 0bb2eb4c36
132 changed files with 61222 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panel.php.1.0
+206
View File
@@ -0,0 +1,206 @@
<?php
session_start();
// 复用登录校验，和api统一
if(empty($_SESSION['user_id'])){
header("Location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>告警接口可视化控制面板</title>
<style>
*{box-sizing: border-box;margin:0;padding:0;font-family:Microsoft Yahei}
body{background:#f5f7fa;padding:20px}
.container{max-width:1400px;margin:0 auto}
h1{color:#333;margin-bottom:24px;font-size:22px}
.card{background:#fff;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid #e4e7ed}
.card h3{margin-bottom:12px;color:#409eff;font-size:16px}
.row{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
input{padding:8px 10px;border:1px solid #dcdfe6;border-radius:4px;width:260px}
button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;color:#fff;background:#409eff}
button.warn{background:#e6a23c}
button.danger{background:#f56c6c}
button.success{background:#67c23a}
#result{margin-top:20px;padding:16px;background:#1e1e1e;color:#fff;border-radius:6px;white-space:pre-wrap;min-height:200px;font-family:Consolas}
.tip{font-size:12px;color:#999}
</style>
</head>
<body>
<div class="container">
<h1>告警系统 - 接口可视化操作面板</h1>
<!-- 1 临时清理单实例告警 clear_single_instance -->
<div class="card">
<h3>1. 临时隐藏单实例告警 clear_single_instance</h3>
<div class="row">
<label>rule_name：</label>
<input id="c_rule" placeholder="例 Port_Down">
<label>instance：</label>
<input id="c_ins" placeholder="例 10.150.10.82:389">
<button onclick="req('clear_single_instance','c_rule','c_ins')">执行清理</button>
</div>
<div class="tip">仅插入恢复日志，下次故障自动重新展示；instance冒号不用手动编码，JS自动处理</div>
</div>
<!-- 2 永久屏蔽单实例 offline_single_instance -->
<div class="card">
<h3>2. 永久屏蔽单实例 offline_single_instance</h3>
<div class="row">
<label>rule_name：</label>
<input id="off_rule" placeholder="例 Port_Down">
<label>instance：</label>
<input id="off_ins" placeholder="例 10.150.10.82:389">
<button class="danger" onclick="req('offline_single_instance','off_rule','off_ins')">永久屏蔽</button>
</div>
<div class="tip">修改monitor_rule状态0，不恢复永远不告警</div>
</div>
<!-- 3 恢复单实例 restore_single_instance -->
<div class="card">
<h3>3. 恢复单实例 restore_single_instance</h3>
<div class="row">
<label>rule_name：</label>
<input id="res_rule" placeholder="例 Port_Down">
<label>instance：</label>
<input id="res_ins" placeholder="例 10.150.10.82:389">
<button class="success" onclick="req('restore_single_instance','res_rule','res_ins')">恢复实例告警</button>
</div>
<div class="tip">放开单实例永久屏蔽状态</div>
</div>
<!-- 4 整条规则下线 clear_offline_rule -->
<div class="card">
<h3>4. 整条规则全部下线 clear_offline_rule</h3>
<div class="row">
<label>rule_name：</label>
<input id="cr_rule" placeholder="例 Host_Ping_Offline">
<button class="danger" onclick="reqSingle('clear_offline_rule','cr_rule')">下线整条规则</button>
</div>
</div>
<!-- 5 恢复整条规则 restore_rule -->
<div class="card">
<h3>5. 恢复整条规则 restore_rule</h3>
<div class="row">
<label>rule_name：</label>
<input id="rr_rule" placeholder="例 Host_Ping_Offline">
<button class="success" onclick="reqSingle('restore_rule','rr_rule')">恢复整条规则</button>
</div>
</div>
<!-- 6 删除单实例全部日志 delete_single_instance_log -->
<div class="card">
<h3>6. 删除单实例所有告警日志 delete_single_instance_log</h3>
<div class="row">
<label>rule_name：</label>
<input id="del_rule" placeholder="例 Port_Down">
<label>instance：</label>
<input id="del_ins" placeholder="例 10.150.10.82:389">
<button class="warn" onclick="req('delete_single_instance_log','del_rule','del_ins')">清空日志</button>
</div>
</div>
<!-- 7 同步Prometheus实时告警 sync_prom_alerts -->
<div class="card">
<h3>7. 手动同步Prometheus告警（清除脏恢复记录）</h3>
<div class="row">
<button onclick="simpleReq('sync_prom_alerts')">立即同步校准数据库</button>
</div>
<div class="tip">自动删除故障中残留的手动恢复记录，修复前端不显示告警bug</div>
</div>
<!-- 8 数据查询接口 -->
<div class="card">
<h3>8. 数据查询接口（查看面板原始数据）</h3>
<div class="row">
<button onclick="simpleReq('day_total')">今日统计 day_total</button>
<button onclick="simpleReq('top_alert')">告警TOP10 top_alert</button>
<button onclick="simpleReq('log_list')">今日明细 log_list</button>
<button onclick="simpleReq('active_firing')">当前未恢复 active_firing</button>
</div>
</div>
<!-- 导出CSV报表 -->
<div class="card">
<h3>9. 导出今日告警CSV报表</h3>
<div class="row">
<button onclick="exportCsv()">下载报表 export_csv</button>
</div>
</div>
<!-- 结果输出区域 -->
<div class="card">
<h3>接口返回结果(JSON)</h3>
<div id="result">等待操作...</div>
</div>
</div>
<script>
// 关键修改：接口路径固定为 /api/index.php
const apiUrl = "/api/index.php";
const resultDom = document.getElementById("result");
// 双参数接口 act + rule_name + instance
function req(act, ruleId, insId){
const rule = document.getElementById(ruleId).value.trim();
const ins = document.getElementById(insId).value.trim();
if(!rule || !ins){
resultDom.innerText = "错误：rule_name 和 instance 不能为空";
return;
}
const params = new URLSearchParams();
params.append("act", act);
params.append("rule_name", rule);
params.append("instance", ins);
fetch(`${apiUrl}?${params.toString()}`)
.then(r=>r.json())
.then(json=>{
resultDom.innerText = JSON.stringify(json,null,2);
})
.catch(e=>{
resultDom.innerText = "请求异常："+e;
})
}
// 单参数接口 act + rule_name
function reqSingle(act, ruleId){
const rule = document.getElementById(ruleId).value.trim();
if(!rule){
resultDom.innerText = "错误：rule_name 不能为空";
return;
}
const params = new URLSearchParams();
params.append("act", act);
params.append("rule_name", rule);
fetch(`${apiUrl}?${params.toString()}`)
.then(r=>r.json())
.then(json=>{
resultDom.innerText = JSON.stringify(json,null,2);
})
.catch(e=>{
resultDom.innerText = "请求异常："+e;
})
}
// 无参数接口（sync、day_total、active_firing等）
function simpleReq(act){
fetch(`${apiUrl}?act=${act}`)
.then(r=>r.json())
.then(json=>{
resultDom.innerText = JSON.stringify(json,null,2);
})
.catch(e=>{
resultDom.innerText = "请求异常："+e;
})
}
// 导出CSV（新窗口直接下载）
function exportCsv(){
window.open(`${apiUrl}?act=export_csv`,"_blank");
}
</script>
</body>
</html>