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

refactor(observable): 拆分监控告警为独立页面

Browse Source 
- 侧边栏"监控/日志/告警"拆分为"监控"和"告警"两个导航项
- Monitor.vue 移除日志相关内容，保留 VictoriaMetrics 和 Zabbix 面板
- 新增 Alert.vue 告警页面，展示当前告警、告警通道、告警记录
- 路由新增 /alert 路径，meta.title 设为"告警"
This commit is contained in:
hezhaohui
2026-07-17 11:35:03 +08:00
parent 4d4d1a9d01
commit a9319e77b9
4 changed files with 99 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/monitor/Alert.vue
+85
View File
@@ -0,0 +1,85 @@
<template>
<div>
<div class="page-head">
<div>
<h1>告警</h1>
<p>夜莺（Nightingale）统一告警引擎 · qpass 推送</p>
</div>
</div>
<div class="cols-2-equal">
<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>
</div>
<div class="panel">
<div class="panel-head">
<h3>告警通道</h3>
<span class="meta">qpass</span>
</div>
<div class="panel-body">
<table>
<tbody>
<tr class="tr-hover">
<td>推送状态</td>
<td class="status-text ok">● 正常</td>
</tr>
<tr class="tr-hover">
<td>通道类型</td>
<td>企业微信 · 钉钉 · 短信</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>告警记录</h3>
<span class="meta">近 24h</span>
</div>
<div class="panel-body log-stream">
<div v-for="(alert, index) in alerts" :key="index" :class="['task-log-line', alert.class]">
<span class="t">{{ alert.time }}</span>{{ alert.message }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
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: '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>
</style>
frontend/src/views/monitor/Monitor.vue
+3 -23
View File
@@ -2,8 +2,8 @@
<div>
<div class="page-head">
<div>
<h1>监控 / 日志 / 告警</h1>
<p>VictoriaMetrics 指标 · Zabbix 硬件状态 · ELK 日志中心 · 夜莺（Nightingale）统一告警引擎对接 qpass</p>
<h1>监控</h1>
<p>VictoriaMetrics 指标 · Zabbix 硬件状态</p>
</div>
</div>
@@ -67,32 +67,12 @@
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>日志 + 统一告警</h3>
<span class="meta">Filebeat → Kafka → ES → Kibana · VM + Zabbix → qpass</span>
</div>
<div class="panel-body log-stream">
<div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
<span class="t">{{ log.time }}</span>{{ log.message }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const logs = ref([
{ time: '07:39:10', message: 'CMDB 采集器同步完成：xs291 · 华东-杭州下沙机房', class: '' },
{ time: '07:38:55', message: '[Zabbix] 告警：yzh-las-014 风扇转速低于阈值（FAN_6: 1920 RPM）', class: '' },
{ time: '07:38:02', message: '[VictoriaMetrics] 七机房抓取任务全部正常', class: 'ok' },
{ time: '07:35:41', message: '[ELK] sg-las-007 应用日志接入 Kafka topic：las-sg-app', class: '' },
{ time: '07:30:00', message: '[qpass] 告警已合并推送：1 条硬件告警 + 0 条业务告警', class: '' },
])
</script>
<style scoped>
/* .page-head, .cols-2-equal, .panel, table, .status-text, .log-stream, .task-log-line 已在 global.css 中定义 */
/* .page-head, .cols-2-equal, .panel, table, .status-text 已在 global.css 中定义 */
</style>