KPI Dashboard 设计

欢迎回到第 14 章的学习。在上一节，我们学习了从 Logs 到 KPI。现在我们要学习 KPI Dashboard 设计。

本节将学习：KPI 面板设计、目标线设置、趋势可视化、以及对比分析。

KPI 面板设计

KPI Dashboard 设计的作用是什么？ 设计清晰的 KPI Dashboard，直观展示关键绩效指标。

KPI 面板设计的原则包括哪些呢？

第一个：突出关键指标。 将最重要的 KPI 放在显眼位置。

第二个：清晰的视觉层次。 使用颜色、大小、位置建立视觉层次。

第三个：简洁明了。 避免信息过载，保持简洁。

第四个：易于理解。 使用清晰的标签和单位。

KPI 面板类型：

目标线设置

目标线设置的作用是什么？ 设置目标线，直观展示 KPI 与目标的差距。

如何设置目标线？ 在 Grafana 中：

• 添加目标线：Thresholds
• 设置目标值：目标 KPI 值
• 设置警告值：警告阈值
• 设置危险值：危险阈值

目标线配置示例：

{
  "thresholds": {
    "mode": "absolute",
    "steps": [
      {
        "value": null,
        "color": "green"
      },
      {
        "value": 200,
        "color": "yellow"
      },
      {
        "value": 500,
        "color": "red"
      }
    ]
  },
  "fieldConfig": {
    "defaults": {
      "unit": "ms",
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {
            "value": null,
            "color": "green"
          },
          {
            "value": 200,
            "color": "yellow"
          },
          {
            "value": 500,
            "color": "red"
          }
        ]
      }
    }
  }
}

趋势可视化

趋势可视化的作用是什么？ 可视化 KPI 趋势，展示变化过程。

如何进行趋势可视化？ 使用图表类型：

• 时间序列图：展示时间趋势
• 柱状图：展示分类对比
• 饼图：展示比例分布
• 热力图：展示时间分布

趋势可视化示例：

{
  "panels": [
    {
      "title": "P95 Delay trends",
      "type": "timeseries",
      "targets": [
        {
          "expr": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "ms",
          "color": {
            "mode": "palette-classic"
          }
        }
      }
    },
    {
      "title": "Error rate trend",
      "type": "timeseries",
      "targets": [
        {
          "expr": "sum(rate(http_requests_total{status=~\"5..\"}[5m])) / sum(rate(http_requests_total[5m]))"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "percent",
          "color": {
            "mode": "palette-classic"
          }
        }
      }
    }
  ]
}

对比分析

对比分析的作用是什么？ 对比不同维度的 KPI，发现问题和机会。

如何进行对比分析？ 建立对比维度：

• 时间对比：同比、环比
• 服务对比：不同服务的 KPI
• 环境对比：开发、测试、生产环境
• 目标对比：实际值 vs 目标值

对比分析示例：

{
  "panels": [
    {
      "title": "Service comparison：P95 postponements",
      "type": "bargauge",
      "targets": [
        {
          "expr": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le, service))",
          "legendFormat": "{{service}}"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "ms",
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "value": null,
                "color": "green"
              },
              {
                "value": 200,
                "color": "yellow"
              },
              {
                "value": 500,
                "color": "red"
              }
            ]
          }
        }
      }
    },
    {
      "title": "Time comparison: error rate",
      "type": "timeseries",
      "targets": [
        {
          "expr": "sum(rate(http_requests_total{status=~\"5..\"}[5m])) / sum(rate(http_requests_total[5m]))",
          "legendFormat": "current"
        },
        {
          "expr": "sum(rate(http_requests_total{status=~\"5..\"}[5m] offset 1d)) / sum(rate(http_requests_total[5m] offset 1d))",
          "legendFormat": "yesterday"
        }
      ]
    }
  ]
}

本节小结

在本节中，我们学习了 KPI Dashboard 设计：

第一个是 KPI 面板设计。 突出关键指标、清晰的视觉层次、简洁明了、易于理解。

第二个是目标线设置。 设置目标线，直观展示 KPI 与目标的差距。

第三个是趋势可视化。 可视化 KPI 趋势，展示变化过程。

第四个是对比分析。 对比不同维度的 KPI，发现问题和机会。

KPI Dashboard 设计流程： 选择 KPI → 设计面板 → 设置目标线 → 可视化趋势 → 对比分析 → 优化改进。

这就是 KPI Dashboard 设计。通过 KPI Dashboard 设计，我们能够直观展示关键绩效指标。

在下一节，我们将学习 KPI 告警配置。学习如何配置 KPI 告警。