Grafana 可视化与仪表盘设计：从数据到洞察

OLAP = Overview（概览） → List（列表） → Afferent（关联） → Particulars（详情）

第一层：Overview — 全局健康
  ├── 4 大黄金信号：流量、延迟、错误、饱和度
  ├── 用 Stat/Gauge 展示核心 KPI
  └── 时间范围：1h / 6h

第二层：List — 受影响的服务列表
  ├── 按错误率/延迟排序的服务表格
  ├── 红色 = 异常，黄色 = 警告
  └── 可点击跳转到详情页面

第三层：Afferent — 关联上下文
  ├── Metrics + Logs + Traces 叠加
  ├── Annotation 标记部署/告警事件
  └── 时间范围缩小到相关窗口

第四层：Particulars — 下钻详情
  ├── 单个服务的全维度指标
  ├── 该服务的日志面板
  └── 该服务的追踪面板

Dashboard 从上到下的信息密度递减：

┌─────────────────────────────────────────────┐
│ Row 1: KPI 关键指标（最大字号）                │
│   [99.9%] [45ms] [0.01%]  ┌──────────────┐│
│   成功率  P99延迟  错误率   │   状态灯     ││
│                           │ ●●●●○        ││
├─────────────────────────────────────────────┤
│ Row 2: 趋势图（Time Series）                  │
│   ┌────────────────────────────────────┐    │
│   │ QPS / Error Rate / Latency over time│   │
│   └────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│ Row 3: 分布与热力图                          │
│   ┌────────────┐  ┌────────────────┐        │
│   │ Top N 表格 │  │ Latency Heatmap│        │
│   └────────────┘  └────────────────┘        │
├─────────────────────────────────────────────┤
│ Row 4: 日志/追踪（按需展开）                  │
│   ┌────────────────────────────────────┐    │
│   │ Error Log Stream / Trace List      │    │
│   └────────────────────────────────────┘    │
└─────────────────────────────────────────────┘

# Query 变量：获取所有 namespace
Query: label_values(kube_namespace_labels, namespace)

# 级联变量：选择 namespace 后，只显示该 ns 的 pod
Query: label_values(kube_pod_container_info{namespace=~"$namespace"}, pod)

-- MySQL 慢查询面板（变量化）
SELECT
  query,
  COUNT(*) as count,
  AVG(query_time) as avg_time,
  MAX(query_time) as max_time
FROM mysql_slow_log
WHERE $__timeFilter(ts)
  AND db = '$database'  -- 变量
GROUP BY query
ORDER BY avg_time DESC
LIMIT $top_n           -- 变量

{
  "type": "timeseries",
  "title": "Request Rate",
  "targets": [{
    "expr": "sum by (job) (rate(http_requests_total[5m]))",
    "legendFormat": "{{ job }}"
  }],
  "fieldConfig": {
    "defaults": {
      "unit": "reqps",
      "custom": {
        "drawStyle": "line",
        "lineInterpolation": "linear",
        "fillOpacity": 10,
        "pointSize": 0
      },
      "thresholds": {
        "steps": [
          { "color": "green", "value": null },
          { "color": "yellow", "value": 1000 },
          { "color": "red", "value": 5000 }
        ]
      }
    }
  }
}

{
  "type": "heatmap",
  "title": "Request Latency Distribution",
  "targets": [{
    "expr": "sum by (le) (rate(http_request_duration_seconds_bucket[5m]))",
    "format": "heatmap",
    "legendFormat": "{{ le }}"
  }],
  "heatmap": {
    "yAxis": {
      "unit": "s",
      "logBase": 2
    },
    "color": {
      "scheme": "YlOrRd"
    }
  }
}

# 数据源：从 Prometheus Alertmanager 或自定义 API
# Dashboard → Settings → Annotations

# 示例：标注所有部署事件
Query: ALERTS{alertname="DeploymentEvent"}

# 显示效果：
# 在时间序列图上以竖线标记部署时间点
# 鼠标悬停显示："v1.2.3 deployed by ci@14:32"

# provisioning/alerting/alert-rules.yaml
apiVersion: 1
groups:
  - orgId: 1
    name: service-health
    folder: Production
    interval: 60s
    rules:
      - uid: high-error-rate
        title: High Error Rate
        condition: C
        data:
          - refId: A
            relativeTimeRange: { from: 300, to: 0 }
            datasourceUid: prometheus
            model:
              expr: sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m]))
          - refId: B
            relativeTimeRange: { from: 0, to: 0 }
            datasourceUid: __expr__
            model:
              type: threshold
              expression: A
              conditions: [{ evaluator: { type: gt, params: [0.05] } }]
          - refId: C
            datasourceUid: __expr__
            model:
              type: math
              expression: $B
        noDataState: NoData
        execErrState: Error
        for: 5m
        annotations:
          summary: "High error rate detected"
        labels:
          severity: critical

# grafana.ini
[security]
# 禁止匿名访问
allow_embedding = false
cookie_secure = true
cookie_samesite = strict

[auth]
# SSO 集成
disable_login_form = false
oauth_auto_login = true

[auth.generic_oauth]
enabled = true
name = SSO
allow_sign_up = true
client_id = ${GF_AUTH_GENERIC_OAUTH_CLIENT_ID}
client_secret = ${GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET}
scopes = openid profile email
token_url = https://auth.example.com/oauth/token
api_url = https://auth.example.com/oauth/userinfo