Implement Monitoring Dashboards and Visualization - The Tracer

Implementation

Dashboards aggregate multiple metric queries into a single health view. Each panel runs a different query (request rate, error rate, latency) and visualises it as a graph, gauge, or number. Template variables make one dashboard reusable across services or environments.

Implement a node that manages monitoring dashboards:

// Create a dashboard with two panels
{ "type": "create_dashboard", "msg_id": 1,
  "name": "Service Overview",
  "panels": [
    {"id":1,"title":"Request Rate","type":"graph",
     "query":"rate(http_requests_total[5m])"},
    {"id":2,"title":"Error Rate","type":"gauge",
     "query":"rate(http_errors_total[5m])"}
  ] }
-> { "type": "dashboard_created", "in_reply_to": 1,
    "dashboard_id": "<uuid>", "panel_count": 2 }

// Query all panels for the last hour
{ "type": "query_dashboard", "msg_id": 2,
  "dashboard_id": "dash-123", "time_range": "1h" }
-> { "type": "dashboard_data", "in_reply_to": 2,
    "panels": [{"id": 1, "title": "Request Rate", "data_points": 60}] }

// Set auto-refresh to 30 seconds
{ "type": "refresh_dashboard", "msg_id": 3,
  "dashboard_id": "dash-123", "refresh_interval": "30s" }
-> { "type": "dashboard_refreshed", "in_reply_to": 3,
    "dashboard_id": "dash-123",
    "refresh_interval": "30s", "auto_refresh": true }

Sample Test Cases

Create dashboard with panelsTimeout: 5000ms

Input

{
  "src": "ui",
  "dest": "dashboards",
  "body": {
    "type": "create_dashboard",
    "msg_id": 1,
    "name": "Service Overview",
    "panels": [
      {
        "id": 1,
        "title": "Request Rate",
        "type": "graph",
        "query": "rate(http_requests_total[5m])"
      },
      {
        "id": 2,
        "title": "Error Rate",
        "type": "gauge",
        "query": "rate(http_errors_total[5m])"
      }
    ]
  }
}

Expected Output

{"type": "dashboard_created", "in_reply_to": 1, "dashboard_id": ".*", "panel_count": 2}

Query dashboard dataTimeout: 5000ms

Input

{
  "src": "viewer",
  "dest": "dashboards",
  "body": {
    "type": "query_dashboard",
    "msg_id": 1,
    "dashboard_id": "dash-123",
    "time_range": "1h"
  }
}

Expected Output

{"type": "dashboard_data", "in_reply_to": 1, "panels": [{"id": 1, "title": "Request Rate", "data_points": 60}]}

Hints

Hint 1▾

create_dashboard stores the panel list and returns a unique dashboard_id

Hint 2▾

query_dashboard runs each panel query for the time range and returns data_points

Hint 3▾

Template variable $service lets one dashboard show data for any service

Hint 4▾

refresh_dashboard configures auto-refresh; return auto_refresh: true to confirm

Hint 5▾

panel_count = number of panels provided in the panels array

Implementation

Sample Test Cases

Hints

Resources

Theoretical Hub

Key Concepts