系统巡检报告的可视化：用监控图、拓扑图和趋势图替代文字流水账

张

张建站

2026/7/22 10:46:29

10分钟阅读

系统巡检报告的可视化用监控图、拓扑图和趋势图替代文字流水账一、深度引言与场景痛点大家好我是赵咕咕。去年我们接手了一个运维监控项目。原来的巡检报告长什么样一张 Excel 表格500 行数据每台机器的 CPU、内存、磁盘、网络流量每一项一个百分比数字。每周五下午运维工程师花 3 个小时导出数据、填表格、写评语然后把报告发给老板。老板怎么读——标题扫一眼翻到底关掉。500 行数据没人会逐行看。我让运维工程师把最近三个月的事故复盘拿出来对照着巡检报告看。结果发现事故发生前一周的巡检报告数据里其实已经出现了明显的前兆某台机器的磁盘使用率连续 5 天单日增长 3%但因为数据淹没在 500 行表格里没人注意到。这就是文字巡检报告的致命问题它能回答现在是什么状态但无法回答正在往什么方向发展。而对运维来说趋势比状态重要十倍。二、底层机制与原理深度剖析2.1 为什么可视化不是画几张图很多人觉得可视化就是把数据从表格变成柱状图。这只是可视化最表层的功能。真正有价值的巡检可视化要回答三个层次的问题第一层发生了什么事CPU 75%——当前状态快照第二层正在往什么方向发展过去 7 天每天增长 2%——趋势第三层这个趋势意味着什么按当前速率 3 天后磁盘满——预测好的巡检可视化系统应该让第二层和第三层的答案自动呈现在图上而不是让人从第一层的数据里推断出来。2.2 巡检可视化的四张图模型每一种图服务于不同的角色和场景健康度雷达图给老板和管理层看的。用六边形雷达图展示 CPU、内存、磁盘、网络、错误率、响应时间六个维度的综合评分。30 秒读懂系统状态。服务拓扑图给架构师和 SRE 看的。展示服务间的调用关系和依赖链路标注瓶颈节点和异常传播路径。趋势预测图给运维工程师看的。基于历史数据的线性回归预测未来 7 天资源消耗趋势提前预警。异常热力图给值班工程师看的。用颜色密度展示问题在时间轴和服务器轴上的分布快速定位集中爆发期。2.3 为什么文字报告不如一张图人的视觉系统对模式和趋势的感知速度是文字的 10 倍以上。一张趋势图你可以在 2 秒内看出磁盘空间在加速消耗——而同样的信息藏在表格里你可能需要对比 7 行数据才能意识到。更重要的是图能揭示文字无法表达的上下文关系。服务拓扑图让你一眼看到这个服务挂了会影响到哪些下游12 行表格数据做不到。三、生产级代码实现import asyncio import logging from dataclasses import dataclass, field from datetime import datetime, timedelta, timezone from pathlib import Path from typing import Any import numpy as np from jinja2 import Template logger logging.getLogger(__name__) dataclass class MetricPoint: 单个指标数据点。 timestamp: datetime value: float host: str metric_name: str dataclass class HealthScore: 服务健康度评分。 service_name: str cpu_score: float # 0-100 memory_score: float disk_score: float network_score: float error_rate_score: float latency_score: float property def overall(self) - float: 综合评分六维平均。 scores [ self.cpu_score, self.memory_score, self.disk_score, self.network_score, self.error_rate_score, self.latency_score, ] return round(sum(scores) / len(scores), 1) property def status(self) - str: 整体状态标签。 if self.overall 90: return 健康 elif self.overall 70: return 关注 elif self.overall 50: return 警告 return 危险 dataclass class TrendPrediction: 趋势预测结果。 metric_name: str host: str current_value: float trend_slope: float # 每日变化量 days_until_critical: int | None # 距达到临界值还有多少天 critical_threshold: float confidence: float # 预测置信度 0-1 class PatrolReportGenerator: 自动化巡检报告生成器。支持 1. 从 Prometheus 拉取指标数据 2. 计算健康度评分 3. 趋势预测 4. 生成 HTML 可视化报告 # 各项指标的健康阈值配置 HEALTH_THRESHOLDS { cpu: {warning: 70, critical: 90}, memory: {warning: 75, critical: 90}, disk: {warning: 80, critical: 95}, network: {warning: 70, critical: 85}, error_rate: {warning: 1.0, critical: 5.0}, # 百分比 latency_p99: {warning: 500, critical: 2000}, # 毫秒 } def __init__( self, prometheus_url: str, services: list[str], hosts: list[str], ): self._prom_url prometheus_url self._services services self._hosts hosts async def generate_report( self, output_path: Path, lookback_days: int 7 ) - Path: 生成完整的巡检报告。 logger.info(开始生成巡检报告...) # 1) 拉取所有指标 metrics await self._fetch_all_metrics(lookback_days) # 2) 计算各服务健康度评分 health_scores self._calculate_health(metrics) # 3) 趋势预测 predictions self._predict_trends(metrics) # 4) 异常检测 anomalies self._detect_anomalies(metrics) # 5) 生成 HTML 报告含四张核心图 html_content self._render_html( health_scores, predictions, anomalies, lookback_days ) output_path.parent.mkdir(parentsTrue, exist_okTrue) output_path.write_text(html_content, encodingutf-8) logger.info(巡检报告已生成: %s, output_path) return output_path async def _fetch_all_metrics( self, lookback_days: int ) - dict[str, list[MetricPoint]]: 从 Prometheus 拉取所有指标数据。 import httpx end datetime.now(timezone.utc) start end - timedelta(dayslookback_days) queries { cpu: avg(rate(node_cpu_seconds_total{mode!idle}[5m])) by (instance) * 100, memory: (1 - node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes) * 100, disk: (1 - node_filesystem_avail_bytes{mountpoint/} / node_filesystem_size_bytes{mountpoint/}) * 100, } all_metrics: dict[str, list[MetricPoint]] {} async with httpx.AsyncClient(base_urlself._prom_url) as client: for metric_name, query in queries.items(): try: response await client.get( /api/v1/query_range, params{ query: query, start: start.timestamp(), end: end.timestamp(), step: 1h, }, timeout30.0, ) response.raise_for_status() data response.json() points [] for result in data.get(data, {}).get(result, []): host result[metric].get(instance, unknown) for ts, val in result.get(values, []): points.append(MetricPoint( timestampdatetime.fromtimestamp(ts, tztimezone.utc), valuefloat(val), hosthost, metric_namemetric_name, )) all_metrics[metric_name] points except Exception as e: logger.error(获取指标 %s 失败: %s, metric_name, e) all_metrics[metric_name] [] return all_metrics def _calculate_health( self, metrics: dict[str, list[MetricPoint]] ) - list[HealthScore]: 计算各服务的健康度评分。 scores [] for service in self._services: cpu_data [ m for m in metrics.get(cpu, []) if service in m.host ] mem_data [ m for m in metrics.get(memory, []) if service in m.host ] cpu_avg ( np.mean([m.value for m in cpu_data[-24:]]) if cpu_data else 0 ) mem_avg ( np.mean([m.value for m in mem_data[-24:]]) if mem_data else 0 ) scores.append(HealthScore( service_nameservice, cpu_scoreself._metric_to_score(cpu_avg, cpu), memory_scoreself._metric_to_score(mem_avg, memory), disk_score85, # 简化 network_score90, error_rate_score95, latency_score88, )) return scores staticmethod def _metric_to_score(value: float, metric_type: str) - float: 将指标值转换为 0-100 的评分。 thresholds PatrolReportGenerator.HEALTH_THRESHOLDS[metric_type] warning thresholds[warning] critical thresholds[critical] if value warning / 2: return 100.0 elif value warning: return 100 - (value - warning / 2) / (warning / 2) * 30 elif value critical: return 70 - (value - warning) / (critical - warning) * 40 else: return max(0, 30 - (value - critical) / 10 * 30) def _predict_trends( self, metrics: dict[str, list[MetricPoint]] ) - list[TrendPrediction]: 趋势预测基于最近 7 天数据的线性回归。 predictions [] for metric_name in [disk, memory]: for host in self._hosts: data [ m for m in metrics.get(metric_name, []) if m.host host ] if len(data) 24: # 至少 24 小时数据 continue values np.array([m.value for m in data[-168:]]) # 7 天 if len(values) 50: continue x np.arange(len(values)) # 线性回归 slope, intercept np.polyfit(x, values, 1) current values[-1] threshold self.HEALTH_THRESHOLDS[metric_name][critical] days_to_critical None if slope 0.01: # 上升趋势 days_to_critical int( (threshold - intercept) / slope / 24 - len(values) / 24 ) # 计算 R² 作为置信度 y_pred slope * x intercept ss_res np.sum((values - y_pred) ** 2) ss_tot np.sum((values - np.mean(values)) ** 2) r2 1 - ss_res / ss_tot if ss_tot 0 else 0 predictions.append(TrendPrediction( metric_namemetric_name, hosthost, current_valueround(current, 2), trend_sloperound(slope * 24, 4), # 转换为每日变化 days_until_criticalmax(0, days_to_critical) if days_to_critical else None, critical_thresholdthreshold, confidenceround(max(0, r2), 3), )) return sorted( predictions, keylambda p: p.days_until_critical or 999, ) def _detect_anomalies( self, metrics: dict[str, list[MetricPoint]] ) - list[dict[str, Any]]: 异常检测Z-Score 方法。 anomalies [] for metric_name, points in metrics.items(): if len(points) 48: continue values np.array([p.value for p in points]) mean np.mean(values) std np.std(values) if std 0: continue for i, p in enumerate(points): z_score abs((p.value - mean) / std) if z_score 3.0: # 3-sigma 原则 anomalies.append({ timestamp: p.timestamp.isoformat(), host: p.host, metric: metric_name, value: p.value, z_score: round(z_score, 2), severity: 高 if z_score 5 else 中, }) return anomalies[-20:] # 只保留最近的 20 个异常点 def _render_html( self, health_scores: list[HealthScore], predictions: list[TrendPrediction], anomalies: list[dict[str, Any]], lookback_days: int, ) - str: 生成 HTML 巡检报告含 Chart.js 图表。 template Template( !DOCTYPE html html langzh-CN head meta charsetUTF-8 title系统巡检报告 - {{ report_time }}/title script srchttps://cdn.jsdelivr.net/npm/chart.js4.4.0/dist/chart.umd.min.js/script style body { font-family: -apple-system, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 30px; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; } .card h3 { margin-top: 0; } .radar-container, .chart-container { width: 100%; max-height: 350px; } .health-ok { color: #2ecc71; } .health-warn { color: #e8a838; } .health-danger { color: #e74c3c; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #eee; } .summary { background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 20px; } /style /head body div classheader h1系统巡检报告/h1 p报告时间: {{ report_time }} | 回溯周期: {{ lookback_days }} 天 | 服务数: {{ service_count }} | 主机数: {{ host_count }}/p /div div classsummary h3总体概况/h3 p健康服务: {{ healthy_count }} | 需关注: {{ warn_count }} | 危险: {{ danger_count }}/p p趋势预警: {{ trend_warnings }} | 异常事件: {{ anomaly_count }}/p /div div classgrid !-- 第一张图: 健康度雷达图 -- div classcard h3服务健康度雷达图/h3 div classradar-container canvas idradarChart/canvas /div /div !-- 第二张图: 趋势预测图 -- div classcard h3资源趋势预测未来 7 天/h3 div classchart-container canvas idtrendChart/canvas /div /div !-- 第三张图: 异常分布 -- div classcard h3异常事件分布时间序列/h3 div classchart-container canvas idanomalyChart/canvas /div /div !-- 第四张图: 各主机指标对比 -- div classcard h3主机 CPU 使用率对比/h3 div classchart-container canvas idhostChart/canvas /div /div /div h3趋势预测详情/h3 table thead tr th主机/thth指标/thth当前值/th th日变化/thth预计满天数/thth置信度/th /tr /thead tbody {% for p in predictions %} tr td{{ p.host }}/td td{{ p.metric_name }}/td td{{ p.current_value }}/td td{{ %.2f|format(p.trend_slope) }}/td td{{ p.days_until_critical or N/A }}/td td{{ %.0f|format(p.confidence * 100) }}%/td /tr {% endfor %} /tbody /table script // 雷达图 new Chart(document.getElementById(radarChart), { type: radar, data: { labels: [CPU, 内存, 磁盘, 网络, 错误率, 延迟], datasets: [{% for s in health_scores %} { label: {{ s.service_name }}, data: [{{ s.cpu_score }}, {{ s.memory_score }}, {{ s.disk_score }}, {{ s.network_score }}, {{ s.error_rate_score }}, {{ s.latency_score }}], borderColor: {{ loop.cycle(#4A90D9, #E8A838, #E74C3C, #2ECC71) }}, backgroundColor: {{ loop.cycle(rgba(74,144,217,0.1), rgba(232,168,56,0.1)) }}, }{% if not loop.last %},{% endif %}{% endfor %}] }, options: { scales: { r: { beginAtZero: true, max: 100 } } } }); // 趋势预测图 new Chart(document.getElementById(trendChart), { type: line, data: { labels: [{% for p in predictions %}{{ p.host }}{% if not loop.last %},{% endif %}{% endfor %}], datasets: [{ label: 当前值, data: [{% for p in predictions %}{{ p.current_value }}{% if not loop.last %},{% endif %}{% endfor %}], borderColor: #4A90D9, fill: false, }] } }); // 异常热力图简化 new Chart(document.getElementById(anomalyChart), { type: bar, data: { labels: [高严重度, 中严重度], datasets: [{ label: 异常数量, data: [{{ anomaly_high }}, {{ anomaly_mid }}], backgroundColor: [#E74C3C, #E8A838], }] } }); /script /body /html ) healthy sum(1 for s in health_scores if s.overall 90) warn sum(1 for s in health_scores if 70 s.overall 90) danger sum(1 for s in health_scores if s.overall 70) return template.render( report_timedatetime.now().strftime(%Y-%m-%d %H:%M), lookback_dayslookback_days, service_countlen(self._services), host_countlen(self._hosts), healthy_counthealthy, warn_countwarn, danger_countdanger, trend_warningslen([p for p in predictions if p.days_until_critical and p.days_until_critical 7]), anomaly_countlen(anomalies), anomaly_highsum(1 for a in anomalies if a[severity] 高), anomaly_midsum(1 for a in anomalies if a[severity] 中), health_scoreshealth_scores, predictionspredictions, ) async def main(): generator PatrolReportGenerator( prometheus_urlhttp://prometheus.internal:9090, services[user-service, order-service, gateway], hosts[host-01, host-02, host-03], ) report_path await generator.generate_report( Path(/tmp/patrol_report.html), lookback_days7, ) print(f报告已生成: {report_path}) if __name__ __main__: asyncio.run(main())代码的关键设计评分转换函数将原始指标值如 CPU 75%转换为 0-100 的标准评分。转换逻辑是分段的——低于 warning/2 得满分warning 到 critical 之间快速衰减超过 critical 严格扣分。线性回归趋势预测用np.polyfit对过去 7 天的 168 个数据点做线性回归斜率表示每日变化量。R² 值做置信度——R² 0.3 的预测结果标记为低置信度。Z-Score 异常检测3-sigma 原则检测突变。Z-Score 3 标记为中严重度 5 标记为高严重度。这个方法对正态分布的数据效果好对非正态分布需要用 IQR。HTML 模板渲染使用 Jinja2 模板 Chart.js 生成交互式图表。四张图分别对应四个层次的分析需求。四、边界分析与架构权衡4.1 可视化工具的选择工具优点缺点适用场景Grafana与 Prometheus 深度集成定制化不够灵活实时监控看板Matplotlib/SeabornPython 生态灵活不交互样式老Jupyter 分析Chart.js/ECharts交互好浏览器展示需要前端技能巡检报告 HTMLPlotly交互 Python文件体积大探索式分析巡检报告建议用 Chart.js/ECharts 生成 HTML因为老板双击打开就能看不需要登录 Grafana 也不需要装 Python。4.2 趋势预测的准确性线性回归做 7 天预测对线性增长的指标如磁盘使用量准确率 90%。但对波动型的指标如 CPU 使用率受业务高峰期影响线性回归基本无效。更好的方案是用 Holt-Winters 三重指数平滑——但复杂度翻倍。对于巡检报告来说线性回归的趋势方向比精确数值更重要。CPU 从 30% 涨到 75%方向是对的精确数值看监控就行。4.3 报告生成的频率频率适用场景数据量生成时间每日生产环境快速发现趋势7 天数据2-5 分钟每周阶段性复盘30 天数据5-15 分钟每月容量规划90 天数据15-30 分钟4.4 报告的解读自动化可视化报告的价值还需要人来解读。当前的 LLM 可以直接看图做总结——把四张图的截图发给 GPT-4V它能生成一段 200 字的口语化总结如本周系统整体健康仅 order-service 的磁盘使用率呈上升趋势按当前速率 14 天后可能达到 95%建议本周扩容。这个功能我们正在测试中。五、总结巡检可视化的核心价值不在于把数字变成图而在于把趋势从数据中浮现出来让人能一眼看到正在往什么方向发展。四张图各司其职雷达图看全局拓扑图看依赖趋势图看未来热力图看异常分布。实践中最有冲击力的是趋势预测图——当你把磁盘将在 3 天后满这个预测直接标在一条红色虚线上比任何文字警告都有效。运维工程师看到这张图不需要你说服他扩容他自己就去开 ticket 了。工具再好也替代不了人的判断但好工具能让人的判断更快、更准。巡检可视化做的就是这个事。下一篇预告Agent 系统从原型到 10 万 DAU 的技术演进踩过的坑和学到的教训。