“

系列：S6 平台工程 · 第 21 篇 | 难度：高级 | 阅读时间：18 分钟

运维仪表盘：17 种组件的统一可视化平台

#TL;DR

coomia-dip 运维仪表盘集成 17 种可视化组件——指标计数器、时间序列图、分布热力图、服务拓扑、请求追踪瀑布、日志流、告警时间线、资源利用率仪表、SLA 仪表盘、对象操作统计、权限评估分布、脱敏操作统计、审计事件流、血缘拓扑图、分类分布饼图、合规评分卡和健康状态矩阵。所有组件基于 Grafana 构建，通过 Prometheus + Loki + Jaeger 数据源驱动。本文从仪表盘架构、17 种组件设计、数据源配置到自定义面板开发，完整解析运维可视化方案。

#1. 仪表盘架构

#1.1 系统架构

Code

┌─────────────────────────────────────────────────┐
│                 Grafana Dashboard                │
│  ┌───────────────────────────────────────────┐  │
│  │     17 Widget Types (可视化组件)           │  │
│  └──────────────────┬────────────────────────┘  │
│                     │                           │
│  ┌──────────┬───────┼───────┬────────────────┐  │
│  │Prometheus│  Loki │ Jaeger│ Custom API     │  │
│  │(指标)    │(日志) │(追踪) │(Ontology)      │  │
│  └──────────┴───────┴───────┴────────────────┘  │
└─────────────────────────────────────────────────┘

#1.2 仪表盘组织

仪表盘	包含组件	目标用户
Platform Overview	W1-W4, W17	运维团队
Service Health	W5-W8	SRE
Security & Compliance	W11-W16	安全团队
Data Operations	W9-W10, W14	数据团队

#2. 17 种组件详解

#W1: 指标计数器（Stat Panel）

JSON

{
  "type": "stat",
  "title": "Active Requests",
  "targets": [{
    "expr": "sum(onto_requests_active)",
    "legendFormat": "Active"
  }],
  "fieldConfig": {
    "defaults": {
      "thresholds": {
        "steps": [
          {"color": "green", "value": 0},
          {"color": "yellow", "value": 500},
          {"color": "red", "value": 1000}
        ]
      }
    }
  }
}

显示关键指标的即时值：活跃请求数、对象总数、在线用户数、错误率。

#W2: 时间序列图（Time Series）

JSON

{
  "type": "timeseries",
  "title": "Request Rate by Service",
  "targets": [{
    "expr": "sum(rate(onto_requests_total[5m])) by (service)",
    "legendFormat": "{{service}}"
  }],
  "fieldConfig": {
    "defaults": {
      "custom": {
        "lineWidth": 2,
        "fillOpacity": 10,
        "drawStyle": "line"
      }
    }
  }
}

展示指标随时间变化趋势：请求率、延迟P50/P95/P99、吞吐量。

#W3: 分布热力图（Heatmap）

JSON

{
  "type": "heatmap",
  "title": "Request Latency Distribution",
  "targets": [{
    "expr": "sum(increase(onto_request_duration_bucket[5m])) by (le)",
    "format": "heatmap"
  }],
  "yAxis": {"logBase": 2}
}

以颜色深度展示延迟分布，快速识别延迟异常模式。

#W4: 服务拓扑（Node Graph）

JSON

{
  "type": "nodeGraph",
  "title": "Service Topology",
  "targets": [{
    "datasource": "jaeger",
    "query": "service dependencies"
  }]
}

展示服务间调用关系和依赖拓扑，标注请求量和延迟。

#W5: 请求追踪瀑布（Trace View）

JSON

{
  "type": "traces",
  "title": "Request Trace Waterfall",
  "datasource": "jaeger",
  "targets": [{
    "query": "{service=\"ontology-service\"} | duration > 500ms"
  }]
}

展示单个请求在各服务间的执行时间线，支持 Span 详情下钻。

#W6: 日志流（Log Panel）

JSON

{
  "type": "logs",
  "title": "Platform Logs",
  "datasource": "loki",
  "targets": [{
    "expr": "{service=~\"onto-.*\"} | json | level=\"ERROR\""
  }],
  "options": {
    "showTime": true,
    "sortOrder": "Descending",
    "enableLogDetails": true
  }
}

实时展示平台日志流，支持按级别过滤和全文搜索。

#W7: 告警时间线（Alert Timeline）

JSON

{
  "type": "alertlist",
  "title": "Active Alerts",
  "options": {
    "showOptions": "current",
    "maxItems": 20,
    "sortOrder": 3,
    "stateFilter": {
      "firing": true,
      "pending": true,
      "noData": false,
      "normal": false
    }
  }
}

展示告警触发和恢复的时间线。

#W8: 资源利用率仪表（Gauge）

JSON

{
  "type": "gauge",
  "title": "CPU Utilization by Service",
  "targets": [{
    "expr": "avg(rate(container_cpu_usage_seconds_total{namespace=\"onto-system\"}[5m])) by (pod) * 100"
  }],
  "fieldConfig": {
    "defaults": {
      "min": 0,
      "max": 100,
      "thresholds": {
        "steps": [
          {"color": "green", "value": 0},
          {"color": "yellow", "value": 70},
          {"color": "red", "value": 90}
        ]
      }
    }
  }
}

仪表盘样式展示 CPU、内存、磁盘利用率。

#W9: SLA 仪表盘（Stat + Bar Gauge）

JSON

{
  "type": "stat",
  "title": "Platform SLA - 30 Days",
  "targets": [{
    "expr": "(1 - sum(increase(onto_requests_total{status=\"error\"}[30d])) / sum(increase(onto_requests_total[30d]))) * 100"
  }],
  "fieldConfig": {
    "defaults": {
      "unit": "percent",
      "thresholds": {
        "steps": [
          {"color": "red", "value": 0},
          {"color": "yellow", "value": 99},
          {"color": "green", "value": 99.9}
        ]
      }
    }
  }
}

#W10: 对象操作统计（Bar Chart）

JSON

{
  "type": "barchart",
  "title": "Object Operations by Type",
  "targets": [{
    "expr": "sum(increase(onto_objects_operations_total[24h])) by (object_type, operation)",
    "legendFormat": "{{object_type}} - {{operation}}"
  }]
}

展示各对象类型的 CRUD 操作分布。

#W11: 权限评估分布（Pie Chart）

JSON

{
  "type": "piechart",
  "title": "Authorization Results",
  "targets": [{
    "expr": "sum(increase(onto_auth_evaluations_total[24h])) by (result)"
  }]
}

展示权限评估结果分布（允许/拒绝/错误）。

#W12: 脱敏操作统计（Table）

JSON

{
  "type": "table",
  "title": "Masking Operations Summary",
  "targets": [{
    "expr": "sum(increase(onto_masking_operations_total[24h])) by (mode, object_type)",
    "format": "table"
  }],
  "transformations": [{
    "id": "organize",
    "options": {
      "renameByName": {
        "mode": "Masking Mode",
        "object_type": "Object Type",
        "Value": "Operations"
      }
    }
  }]
}

#W13: 审计事件流（Annotation + Log）

展示审计事件的时间分布，支持按事件类型过滤。关键事件（如策略变更、异常检测）以注解形式叠加在时间序列图上。

#W14: 血缘拓扑图（Node Graph）

使用 Grafana Node Graph 面板展示数据血缘关系，支持上下游遍历。节点大小表示下游影响范围，边的粗细表示数据流量。

#W15: 分类分布饼图（Pie Chart）

JSON

{
  "type": "piechart",
  "title": "Data Classification Distribution",
  "targets": [{
    "expr": "count(onto_field_classification_level) by (level)"
  }]
}

展示平台数据资产按分类等级的分布。

#W16: 合规评分卡（Stat + Table）

展示各法规的合规评分和差距数量。合规评分使用 Stat 面板，差距详情使用 Table 面板。

#W17: 健康状态矩阵（Status Map）

JSON

{
  "type": "statusmap",
  "title": "Service Health Matrix",
  "targets": [{
    "expr": "up{job=~\"onto-.*\"}"
  }],
  "options": {
    "color": {
      "mode": "value",
      "value": {
        "0": "red",
        "1": "green"
      }
    }
  }
}

矩阵视图展示所有服务的健康状态，一眼识别故障服务。

#3. 数据源配置

#3.1 Grafana Provisioning

YAML

# grafana/provisioning/datasources.yml
apiVersion: 1
datasources:
  - name: Prometheus
    type: prometheus
    url: http://prometheus:9090
    isDefault: true

  - name: Loki
    type: loki
    url: http://loki:3100

  - name: Jaeger
    type: jaeger
    url: http://jaeger:16686

  - name: OntoAPI
    type: marcusolsson-json-datasource
    url: http://api-gateway:8080/api/v1/metrics
    jsonData:
      httpHeaderName1: Authorization
    secureJsonData:
      httpHeaderValue1: "Bearer ${GRAFANA_API_TOKEN}"

#4. 仪表盘即代码

#4.1 Dashboard as Code

Python

class DashboardBuilder:
    """仪表盘构建器 - Dashboard as Code"""

    def __init__(self, title: str, uid: str):
        self._dashboard = {
            "title": title,
            "uid": uid,
            "panels": [],
            "time": {"from": "now-6h", "to": "now"},
            "refresh": "30s",
        }
        self._next_id = 1
        self._current_y = 0

    def add_row(self, title: str) -> "DashboardBuilder":
        self._dashboard["panels"].append({
            "type": "row",
            "title": title,
            "gridPos": {"h": 1, "w": 24, "x": 0, "y": self._current_y},
        })
        self._current_y += 1
        return self

    def add_stat(self, title: str, expr: str, **kwargs) -> "DashboardBuilder":
        self._add_panel("stat", title, expr, w=6, h=4, **kwargs)
        return self

    def add_timeseries(self, title: str, expr: str, **kwargs) -> "DashboardBuilder":
        self._add_panel("timeseries", title, expr, w=12, h=8, **kwargs)
        return self

    def build(self) -> dict:
        return self._dashboard

# 使用示例
overview_dashboard = (
    DashboardBuilder("Platform Overview", "onto-overview")
    .add_row("Key Metrics")
    .add_stat("Active Requests", "sum(onto_requests_active)")
    .add_stat("Error Rate", "rate(onto_requests_total{status='error'}[5m])")
    .add_stat("P99 Latency", "histogram_quantile(0.99, onto_request_duration_bucket)")
    .add_stat("Active Users", "count(onto_active_sessions)")
    .add_row("Request Trends")
    .add_timeseries("Request Rate", "sum(rate(onto_requests_total[5m])) by (service)")
    .add_timeseries("Latency Distribution", "histogram_quantile(0.95, onto_request_duration_bucket)")
    .build()
)

#5. 测试策略

Python

class TestDashboard:
    def test_dashboard_json_valid(self):
        dashboard = overview_dashboard
        assert dashboard["title"] == "Platform Overview"
        assert len(dashboard["panels"]) > 0

    def test_all_queries_valid(self):
        for panel in overview_dashboard["panels"]:
            if "targets" in panel:
                for target in panel["targets"]:
                    # 验证 PromQL 查询语法
                    result = prometheus_client.query(target["expr"])
                    assert result is not None

    def test_widget_count(self):
        all_panels = []
        for dashboard in ALL_DASHBOARDS:
            all_panels.extend(p for p in dashboard["panels"] if p["type"] != "row")
        # 验证 17 种组件类型都有使用
        widget_types = set(p["type"] for p in all_panels)
        assert len(widget_types) >= 17

#6. 生产最佳实践

#6.1 仪表盘设计原则

信息层级：最重要的指标放在最上方
颜色一致：绿/黄/红代表正常/警告/异常
时间对齐：所有面板使用统一的时间范围
交互联动：点击可下钻到详细视图
移动友好：关键仪表盘适配移动端

#6.2 性能优化

大时间范围查询使用 recording rules 预聚合
实时面板（日志流、追踪）限制展示条数
使用 Grafana 变量实现面板复用
告警查询与仪表盘查询分离

#7. 总结

coomia-dip 的运维仪表盘通过 17 种可视化组件，覆盖了从基础设施监控到业务合规审计的全方位可观测需求。关键设计亮点：

17 种组件：覆盖指标、日志、追踪、拓扑、合规等多维度
多数据源：Prometheus + Loki + Jaeger + Custom API 统一接入
Dashboard as Code：仪表盘配置代码化，版本可控
分角色视图：运维/SRE/安全/数据团队各有专属仪表盘
交互联动：组件间可下钻和关联分析

下一篇将探讨 coomia-dip 的 API 网关设计。