Grafana Stat Panels, Thresholds & SLA Visualization Prompt

You are a senior SRE who has built executive and operational dashboards using stat panels with thresholds — SLA compliance, error budget remaining, system health at a glance.

I will provide:
- The metric and SLA target
- Current panel
- Symptom (wrong colors, confusing layout, threshold off)

Your job:

1. **Stat panel basics**:
   - Big number display
   - One or more values
   - Thresholds for coloring
   - Optional sparkline
2. **For thresholds**:
   - Absolute or percentage
   - Multiple breakpoints (green/yellow/red)
   - Values BELOW threshold colored or ABOVE
3. **For SLA visualization**:
   - 99.9% → green
   - 99.5-99.9% → yellow (warning)
   - <99.5% → red
   - Show compliance window
4. **For error budget remaining**:
   - Compute: budget - consumed
   - Stat panel with thresholds
   - 100%-50% green, 50%-20% yellow, <20% red
5. **For multi-value stat**:
   - "All Values" mode shows each series
   - Useful for per-service SLA
6. **For sparkline**:
   - Tiny chart below the number
   - Shows trend
7. **For value mappings**:
   - Number → text ("OK", "DOWN")
   - Range → display
8. **For background color**:
   - Whole panel colored
   - Strong visual signal

Mark DESTRUCTIVE: thresholds not matching SLO definitions (misleading), removing thresholds without alert alternative, using percent units on already-percent metric.

---

Metric + SLA: [DESCRIBE]
Current panel: [DESCRIBE]
Symptom: [DESCRIBE]

Why this prompt works

Stat panels are widely used but often misconfigured. This prompt walks design.

How to use it

1. Match thresholds to SLO.
2. Use color accessibility.
3. Set correct unit.
4. Pair with detail panel.

Patterns

SLA stat with thresholds

{
  "type": "stat",
  "title": "API Availability (last 30d)",
  "targets": [{
    "expr": "avg_over_time((sum(rate(http_requests_total{code!~\"5..\"}[5m])) / sum(rate(http_requests_total[5m])))[30d:5m])"
  }],
  "fieldConfig": {
    "defaults": {
      "unit": "percentunit",                    // displays 0.999 as 99.9%
      "thresholds": {
        "mode": "absolute",
        "steps": [
          { "value": null, "color": "red" },
          { "value": 0.995, "color": "orange" },
          { "value": 0.999, "color": "green" }
        ]
      },
      "min": 0.99,
      "max": 1.0,
      "decimals": 3
    }
  },
  "options": {
    "colorMode": "background",
    "graphMode": "area"                          // sparkline
  }
}

Error budget remaining

{
  "type": "stat",
  "title": "Error Budget Remaining",
  "targets": [{
    "expr": "1 - (sum(increase(http_errors_total[30d])) / (0.001 * sum(increase(http_requests_total[30d]))))"
  }],
  "fieldConfig": {
    "defaults": {
      "unit": "percentunit",
      "thresholds": {
        "steps": [
          { "value": null, "color": "red" },
          { "value": 0.2, "color": "yellow" },
          { "value": 0.5, "color": "green" }
        ]
      }
    }
  }
}

Multi-service per-row stat

{
  "type": "stat",
  "title": "Per-Service Availability",
  "targets": [{
    "expr": "avg by (service)(rate(http_requests_total{code!~\"5..\"}[5m]) / rate(http_requests_total[5m]))"
  }],
  "options": {
    "reduceOptions": {
      "calcs": ["lastNotNull"],
      "values": true                              // show each value
    },
    "colorMode": "value"
  }
}

Value mapping (number to text)

{
  "fieldConfig": {
    "defaults": {
      "mappings": [
        { "type": "value", "options": { "0": { "text": "DOWN", "color": "red" } } },
        { "type": "value", "options": { "1": { "text": "UP", "color": "green" } } }
      ]
    }
  }
}

Accessibility-friendly colors

{
  "thresholds": {
    "steps": [
      { "value": null, "color": "#d62728" },     // red
      { "value": 0.9, "color": "#ff7f0e" },      // orange (not yellow)
      { "value": 0.99, "color": "#2ca02c" }      // green
    ]
  }
}

Common findings this catches

• 0.999 displayed as 99.9% → unit percentunit (decimal as percent).
• 99.9 displayed as 9990% → unit percent expects 99.9 raw.
• Thresholds in wrong direction → use mode: absolute carefully.
• Color-only signal → add value mapping or icon for accessibility.
• Many stats → busy → use bar gauge or simplify.
• Threshold doesn’t match SLO → derive from SLO.
• Min/max not set → autorange may look weird.

When to escalate

• SLA dashboard for executives — review with leadership.
• Threshold values tied to compliance — coordinate.
• Accessibility audit — UX team.