移动端 Dashboard

欢迎回到第 12 章的学习。在上一节，我们学习了 Dashboard 分享和协作。现在我们要学习移动端 Dashboard，这是移动监控的重要功能。

本节将学习：响应式设计、移动端优化、以及关键指标展示。

响应式设计

响应式设计的作用是什么？ 使 Dashboard 能够适配不同屏幕尺寸，在移动设备上正常显示。

响应式设计原则包括哪些呢？

第一个：弹性布局。 使用弹性布局适配不同屏幕。

第二个：响应式图表。 图表根据屏幕尺寸自动调整大小。

第三个：触摸优化。 优化触摸交互，支持手势操作。

第四个：字体大小。 调整字体大小以适应移动设备。

Grafana 响应式配置：

{
  "dashboard": {
    "panels": [
      {
        "gridPos": {
          "h": 8,
          "w": 12,
          "x": 0,
          "y": 0
        },
        "responsive": "auto"
      }
    ]
  }
}

移动端优化

移动端优化的作用是什么？ 优化 Dashboard 在移动设备上的显示和交互体验。

移动端优化包括哪些呢？

第一个：简化布局。 简化 Dashboard 布局，突出关键指标。

第二个：减少面板数量。 减少面板数量，避免信息过载。

第三个：优化图表。 优化图表显示，使用适合移动设备的图表类型。

第四个：快速加载。 优化 Dashboard 加载速度，减少数据获取时间。

移动端优化建议：

• 使用单列布局
• 使用大号字体
• 使用简洁的图表类型（如 Stat、Gauge）
• 减少数据查询时间范围
• 使用数据缓存

关键指标展示

关键指标展示的作用是什么？ 在移动设备上展示最关键 indicators，快速了解系统状态。

关键指标包括哪些呢？

第一个：服务可用性。 服务的可用性状态。

第二个：错误率。 当前的错误率。

第三个：响应时间。 当前的响应时间。

第四个：告警状态。 当前活跃的告警。

关键指标面板设计：

{
  "panels": [
    {
      "title": "Service availability",
      "type": "stat",
      "targets": [
        {
          "expr": "avg(up{job=\"order-service\"}) * 100"
        }
      ],
      "thresholds": [
        {
          "value": 99,
          "colorMode": "critical"
        }
      ]
    },
    {
      "title": "error rate",
      "type": "stat",
      "targets": [
        {
          "expr": "sum(rate(http_requests_total{status=~\"5..\"}[5m])) / sum(rate(http_requests_total[5m])) * 100"
        }
      ]
    }
  ]
}

本节小结

在本节中，我们学习了移动端 Dashboard：

第一个是响应式设计。 使 Dashboard 能够适配不同屏幕尺寸，在移动设备上正常显示。

第二个是移动端优化。 优化 Dashboard 在移动设备上的显示和交互体验。

第三个是关键指标展示。 在移动设备上展示最关键的指标，快速了解系统状态。

移动端 Dashboard 设计流程： 响应式设计 → 移动端优化 → 关键指标展示 → 测试验证 → 持续优化。

这就是移动端 Dashboard。通过移动端 Dashboard，我们可以随时随地监控系统状态。

恭喜你完成了第 12 章的学习！在下一章，我们将学习故障排查（Troubleshooting）实战。学习如何进行故障排查。