wonder/xinfra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(monitor): 将告警相关内容从监控看板移至告警信息页面

Browse Source 
- 监控看板移除 P0/P1 告警统计卡片
- 监控看板移除告警来源接入面板
- 告警信息页面添加告警来源接入面板（Zabbix / VictoriaMetrics / 夜莺）
- 告警信息页面添加 dc-* 样式
- 监控看板移除不需要的 dc-* 样式
This commit is contained in:
hezhaohui
2026-07-17 14:23:15 +08:00
parent 096a6a8857
commit 0cf622b8af
2 changed files with 343 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/monitor/Alert.vue
+175 -27
View File
@@ -3,39 +3,128 @@
<div class="page-head">
<div>
<h1>告警信息</h1>
<p>夜莺（Nightingale）统一告警引擎 · qpass 推送</p>
<p>夜莺（Nightingale）统一告警引擎对接 Zabbix + VictoriaMetrics · qpass 推送</p>
</div>
</div>
<div class="stat-row">
<div class="stat-card">
<div class="label">P0 / Disaster 告警</div>
<div class="value" style="color: var(--err)">1</div>
<div class="delta" style="color: var(--err)">来自 VictoriaMetrics</div>
</div>
<div class="stat-card">
<div class="label">P1 / High 告警</div>
<div class="value" style="color: var(--warn)">5</div>
<div class="delta warn">来自 Zabbix · 4 条 / VM · 1 条</div>
</div>
<div class="stat-card">
<div class="label">今日已推送</div>
<div class="value">5</div>
<div class="delta">qpass 统一告警通道</div>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>当前告警</h3>
<span class="meta">实时</span>
</div>
<div class="panel-body">
<table>
<tbody>
<tr class="tr-hover">
<td>硬件告警</td>
<td class="status-text warn">● 2 条</td>
</tr>
<tr class="tr-hover">
<td>业务告警</td>
<td class="status-text ok">● 0 条</td>
</tr>
<tr class="tr-hover">
<td>今日已推送</td>
<td class="mono strong">5</td>
</tr>
</tbody>
</table>
<div class="panel-head">
<h3>告警来源接入 · 夜莺统一告警</h3>
<span class="meta">Nightingale ← Zabbix / VictoriaMetrics</span>
</div>
<div class="panel-body" style="padding: 14px 16px">
<div class="dc-row dc-row-3" style="margin-bottom: 0">
<div class="dc-card dc-card-flat">
<div class="dc-name">Zabbix <span class="dc-role">物理机 / 硬件层</span></div>
<div class="dc-item">IPMI · 温度 · 电源 · 风扇</div>
<div class="dc-item">网络设备 · 存储健康度</div>
<div class="dc-item">事件级别：disaster / high / average</div>
</div>
<div class="dc-card dc-card-flat">
<div class="dc-name">VictoriaMetrics <span class="dc-role">虚机 / 容器 / 业务层</span></div>
<div class="dc-item">K8s / 容器 / 主机指标</div>
<div class="dc-item">基础服务可用性探活</div>
<div class="dc-item">告警级别：P0 / P1 / P2</div>
</div>
<div class="dc-card dc-card-flat">
<div class="dc-name">夜莺 Nightingale <span class="dc-role">统一告警引擎</span></div>
<div class="dc-item">按 P0/P1 或 disaster/high/average 过滤聚合</div>
<div class="dc-item">去重 · 收敛 · 分级推送</div>
<div class="dc-item">下游：qpass 统一告警通道</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>告警记录</h3>
<span class="meta">近 24h</span>
<h3>当前告警 · P0/P1（disaster / high / average）</h3>
<span class="meta">夜莺聚合 · 已去重</span>
</div>
<div class="panel-body">
<table>
<tr>
<th>级别</th>
<th>来源</th>
<th>原始级别</th>
<th>对象</th>
<th>告警内容</th>
<th>时间</th>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-p0">P0</span></td>
<td class="mono">VictoriaMetrics</td>
<td class="mono">disaster</td>
<td class="strong mono">sg-las-overseas-007</td>
<td>磁盘只读 / IO 错误，节点不可写</td>
<td class="mono">07:38:55</td>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-p1">P1</span></td>
<td class="mono">Zabbix</td>
<td class="mono">high</td>
<td class="strong mono">yzh-las-014</td>
<td>风扇转速低于阈值（FAN_6: 1920 RPM）</td>
<td class="mono">07:35:12</td>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-p1">P1</span></td>
<td class="mono">Zabbix</td>
<td class="mono">high</td>
<td class="strong mono">xs-bm-291</td>
<td>电源冗余丢失（PSU2 离线）</td>
<td class="mono">07:21:40</td>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-p1">P1</span></td>
<td class="mono">VictoriaMetrics</td>
<td class="mono">high</td>
<td class="strong mono">redis-ads-feature-cluster-02</td>
<td>慢查询比例超阈值（>5%，持续5分钟）</td>
<td class="mono">07:18:03</td>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-avg">average</span></td>
<td class="mono">Zabbix</td>
<td class="mono">average</td>
<td class="strong mono">overseas-dallas-idc</td>
<td>专线延迟抖动超基线（WireGuard ↔ AWS US）</td>
<td class="mono">07:10:22</td>
</tr>
<tr class="tr-hover">
<td><span class="tag sev-avg">average</span></td>
<td class="mono">Zabbix</td>
<td class="mono">average</td>
<td class="strong mono">jf-bm-118</td>
<td>CPU 温度接近阈值（76℃ / 80℃）</td>
<td class="mono">06:58:47</td>
</tr>
</table>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>告警推送记录</h3>
<span class="meta">近 24h · qpass</span>
</div>
<div class="panel-body log-stream">
<div v-for="(alert, index) in alerts" :key="index" :class="['task-log-line', alert.class]">
@@ -50,13 +139,72 @@
import { ref } from 'vue'
const alerts = ref([
{ time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值（FAN_6: 1920 RPM）', class: '' },
{ time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值（FAN_5: 1880 RPM）', class: '' },
{ time: '07:30:00', message: '[qpass] 告警已合并推送：1 条硬件告警 + 0 条业务告警', class: '' },
{ time: '07:38:55', message: '[qpass] P0 告警推送：sg-las-overseas-007 磁盘只读 / IO 错误', class: 'err' },
{ time: '07:35:12', message: '[qpass] P1 告警推送：yzh-las-014 风扇转速低于阈值（FAN_6: 1920 RPM）', class: '' },
{ time: '07:21:40', message: '[qpass] P1 告警推送：xs-bm-291 电源冗余丢失（PSU2 离线）', class: '' },
{ time: '07:18:03', message: '[qpass] P1 告警推送：redis-ads-feature-cluster-02 慢查询比例超阈值', class: '' },
{ time: '07:10:22', message: '[qpass] average 告警推送：overseas-dallas-idc 专线延迟抖动超基线', class: '' },
{ time: '06:58:47', message: '[qpass] average 告警推送：jf-bm-118 CPU 温度接近阈值（76℃ / 80℃）', class: '' },
{ time: '06:15:22', message: '[Nightingale] sg-las-007 CPU 使用率恢复（当前 42%）', class: 'ok' },
{ time: '05:48:10', message: '[Nightingale] sg-las-007 CPU 使用率超过 90% 持续 5 分钟', class: '' },
])
</script>
<style scoped>
.dc-row {
display: flex;
gap: 16px;
}
.dc-row-3 {
flex-wrap: wrap;
}
.dc-card {
flex: 1;
min-width: 200px;
padding: 16px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.dc-card-flat {
background: var(--bg);
}
.dc-name {
font-weight: 600;
margin-bottom: 8px;
}
.dc-role {
font-size: 12px;
color: var(--text-dim);
margin-left: 8px;
}
.dc-item {
font-size: 13px;
color: var(--text-dim);
line-height: 1.8;
}
.sev-p0 {
background: var(--err) !important;
color: #fff !important;
border-color: var(--err) !important;
}
.sev-p1 {
background: var(--warn) !important;
color: #000 !important;
border-color: var(--warn) !important;
}
.sev-avg {
background: var(--card-bg) !important;
color: var(--warn) !important;
border-color: var(--warn) !important;
}
</style>
frontend/src/views/monitor/Monitor.vue
+168 -43
View File
@@ -3,70 +3,195 @@
<div class="page-head">
<div>
<h1>监控看板</h1>
<p>VictoriaMetrics 指标 · Zabbix 硬件状态</p>
<p>物理机 / 虚机 / 基础服务状态汇总 · 夜莺（Nightingale）统一告警引擎对接 Zabbix + VictoriaMetrics · 最近更新于 18 秒前</p>
</div>
<button class="btn btn-ghost">⟳ 刷新</button>
</div>
<div class="stat-row">
<div class="stat-card">
<div class="label">物理机总数</div>
<div class="value">186</div>
<div class="delta">186 / 186 监控覆盖</div>
</div>
<div class="stat-card">
<div class="label">虚机总数（LAS）</div>
<div class="value">512</div>
<div class="delta up">↑ 14 本周新增</div>
</div>
<div class="stat-card">
<div class="label">基础组件实例</div>
<div class="value">214</div>
<div class="delta">MySQL 38 · Redis 92 · 其他 84</div>
</div>
</div>
<div class="cols-2-equal">
<div class="cols-2">
<div class="panel">
<div class="panel-head">
<h3>VictoriaMetrics · 指标概览</h3>
<span class="meta">K8s / 容器 / 业务指标</span>
<h3>物理机状态 · 按机房</h3>
<span class="meta">数据源：Zabbix</span>
</div>
<div class="panel-body">
<table>
<tbody>
<tr class="tr-hover">
<td>七机房采集节点数</td>
<td class="mono strong">128</td>
</tr>
<tr class="tr-hover">
<td>活跃时序数量</td>
<td class="mono strong">42.6M</td>
</tr>
<tr class="tr-hover">
<td>Prometheus 接口接入</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td>Grafana 仪表盘数</td>
<td class="mono strong">37</td>
</tr>
</tbody>
<tr>
<th>机房</th>
<th>总数</th>
<th>在线</th>
<th>健康率</th>
<th>状态</th>
</tr>
<tr class="tr-hover">
<td class="strong mono">YZH 机房</td>
<td class="mono">78</td>
<td class="mono">78</td>
<td>
<span class="bar-wrap"><span class="bar-fill" style="width: 98%"></span></span>
98%
</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">XS 机房</td>
<td class="mono">64</td>
<td class="mono">63</td>
<td>
<span class="bar-wrap"><span class="bar-fill warn" style="width: 91%"></span></span>
91%
</td>
<td class="status-text warn">● 1 条告警</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">JF 机房</td>
<td class="mono">22</td>
<td class="mono">22</td>
<td>
<span class="bar-wrap"><span class="bar-fill" style="width: 100%"></span></span>
100%
</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">海外 IDC（4）</td>
<td class="mono">22</td>
<td class="mono">21</td>
<td>
<span class="bar-wrap"><span class="bar-fill err" style="width: 86%"></span></span>
86%
</td>
<td class="status-text err">● 1 条严重</td>
</tr>
</table>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>Zabbix · 硬件健康</h3>
<span class="meta">IPMI / 温度 / 电源 / 风扇</span>
<h3>虚机状态 · LAS 资源池</h3>
<span class="meta">数据源：VictoriaMetrics</span>
</div>
<div class="panel-body">
<table>
<tbody>
<tr class="tr-hover">
<td>物理机监控覆盖</td>
<td class="mono strong">186 / 186</td>
</tr>
<tr class="tr-hover">
<td>当前告警</td>
<td class="status-text warn">● 2 条（风扇转速异常）</td>
</tr>
<tr class="tr-hover">
<td>网络设备健康</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td>存储健康度</td>
<td class="status-text ok">● 正常</td>
</tr>
</tbody>
<tr>
<th>业务线</th>
<th>虚机数</th>
<th>CPU 均值</th>
<th>状态</th>
</tr>
<tr class="tr-hover">
<td class="strong mono">Kodo</td>
<td class="mono">218</td>
<td>
<span class="bar-wrap"><span class="bar-fill" style="width: 64%"></span></span>
64%
</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">LAS</td>
<td class="mono">164</td>
<td>
<span class="bar-wrap"><span class="bar-fill warn" style="width: 82%"></span></span>
82%
</td>
<td class="status-text warn">● 1 条告警</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">灵矽</td>
<td class="mono">96</td>
<td>
<span class="bar-wrap"><span class="bar-fill" style="width: 57%"></span></span>
57%
</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong mono">共享池 / 未分配</td>
<td class="mono">34</td>
<td>
<span class="bar-wrap"><span class="bar-fill" style="width: 31%"></span></span>
31%
</td>
<td class="status-text ok">● 正常</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>基础服务状态汇总</h3>
<span class="meta">MySQL / Redis / 中间件 · 探活数据源：VictoriaMetrics</span>
</div>
<div class="panel-body">
<table>
<tr>
<th>服务类型</th>
<th>实例数</th>
<th>异常</th>
<th>可用率</th>
<th>状态</th>
</tr>
<tr class="tr-hover">
<td class="strong">MySQL</td>
<td class="mono">38</td>
<td class="mono">0</td>
<td class="mono">100%</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong">Redis（CacheCloud）</td>
<td class="mono">92</td>
<td class="mono">1</td>
<td class="mono">98.9%</td>
<td class="status-text warn">● 1 条告警</td>
</tr>
<tr class="tr-hover">
<td class="strong">PostgreSQL</td>
<td class="mono">12</td>
<td class="mono">0</td>
<td class="mono">100%</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong">openresty 网关</td>
<td class="mono">26</td>
<td class="mono">0</td>
<td class="mono">100%</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td class="strong">其他中间件</td>
<td class="mono">46</td>
<td class="mono">0</td>
<td class="mono">100%</td>
<td class="status-text ok">● 正常</td>
</tr>
</table>
</div>
</div>
</div>
</template>
@@ -74,5 +199,5 @@
</script>
<style scoped>
/* .page-head, .cols-2-equal, .panel, table, .status-text 已在 global.css 中定义 */
/* .page-head, .stat-row, .panel, .cols-2, .bar-wrap, .status-text, .tag 已在 global.css 中定义 */
</style>