Operations Dashboard: Unified Visualization Platform with 17 Widget Types

“

Series: S6 Platform Engineering · Article 21 | Level: Advanced | Reading Time: 18 min

#TL;DR

The coomia-dip operations dashboard integrates 17 visualization widgets: stat counters, time series charts, distribution heatmaps, service topology, trace waterfall, log stream, alert timeline, resource utilization gauges, SLA dashboard, object operation stats, authorization distribution, masking operation stats, audit event stream, lineage topology graph, classification pie chart, compliance scorecard, and health status matrix. All widgets are built on Grafana, driven by Prometheus + Loki + Jaeger data sources. This article covers dashboard architecture, all 17 widget designs, data source configuration, and Dashboard-as-Code development.

#1. Dashboard Architecture

#1.1 System Architecture

Code

┌─────────────────────────────────────────────────┐
│                 Grafana Dashboard                │
│  ┌───────────────────────────────────────────┐  │
│  │     17 Widget Types                       │  │
│  └──────────────────┬────────────────────────┘  │
│  ┌──────────┬───────┼───────┬────────────────┐  │
│  │Prometheus│  Loki │ Jaeger│ Custom API     │  │
│  └──────────┴───────┴───────┴────────────────┘  │
└─────────────────────────────────────────────────┘

#1.2 Dashboard Organization

Dashboard	Widgets	Target Users
Platform Overview	W1-W4, W17	Operations
Service Health	W5-W8	SRE
Security & Compliance	W11-W16	Security team
Data Operations	W9-W10, W14	Data team

#W1: Stat Counter

Displays key metric instant values: active requests, total objects, online users, error rate.

JSON

{
  "type": "stat",
  "title": "Active Requests",
  "targets": [{"expr": "sum(onto_requests_active)"}],
  "fieldConfig": {
    "defaults": {
      "thresholds": {"steps": [
        {"color": "green", "value": 0},
        {"color": "yellow", "value": 500},
        {"color": "red", "value": 1000}
      ]}
    }
  }
}

#W2: Time Series Chart

Shows metrics trending over time: request rate, latency P50/P95/P99, throughput.

JSON

{
  "type": "timeseries",
  "title": "Request Rate by Service",
  "targets": [{"expr": "sum(rate(onto_requests_total[5m])) by (service)"}]
}

#W3: Distribution Heatmap

Visualizes latency distribution with color depth for quick anomaly pattern identification.

JSON

{
  "type": "heatmap",
  "title": "Request Latency Distribution",
  "targets": [{"expr": "sum(increase(onto_request_duration_bucket[5m])) by (le)"}]
}

#W4: Service Topology (Node Graph)

Displays inter-service call relationships and dependency topology with request volume and latency annotations.

#W5: Trace Waterfall

Shows single request execution timeline across services with span detail drill-down.

JSON

{
  "type": "traces",
  "title": "Request Trace Waterfall",
  "datasource": "jaeger",
  "targets": [{"query": "{service=\"ontology-service\"} | duration > 500ms"}]
}

#W6: Log Stream

Real-time platform log stream with level filtering and full-text search.

JSON

{
  "type": "logs",
  "datasource": "loki",
  "targets": [{"expr": "{service=~\"onto-.*\"} | json | level=\"ERROR\""}]
}

#W7: Alert Timeline

Displays alert firing and recovery timeline.

#W8: Resource Utilization Gauge

Gauge-style display of CPU, memory, and disk utilization with threshold coloring.

JSON

{
  "type": "gauge",
  "title": "CPU Utilization",
  "targets": [{"expr": "avg(rate(container_cpu_usage_seconds_total[5m])) * 100"}]
}

#W9: SLA Dashboard

Displays platform SLA compliance over configurable time periods (7d, 30d, 90d).

#W10: Object Operations Bar Chart

Shows CRUD operation distribution across object types.

JSON

{
  "type": "barchart",
  "title": "Object Operations by Type",
  "targets": [{"expr": "sum(increase(onto_objects_operations_total[24h])) by (object_type, operation)"}]
}

#W11: Authorization Distribution Pie Chart

Shows authorization evaluation result distribution (allow/deny/error).

#W12: Masking Operations Table

Summary table of masking operations by mode and object type.

#W13: Audit Event Stream

Audit event timeline with event type filtering. Critical events (policy changes, anomaly detection) overlaid as annotations.

#W14: Lineage Topology Graph

Data lineage relationships via Node Graph panel with upstream/downstream traversal.

#W15: Classification Distribution Pie Chart

Platform data asset distribution by classification level.

#W16: Compliance Scorecard

Compliance scores and gap counts per regulation using stat + table panels.

#W17: Health Status Matrix

Matrix view of all service health states for at-a-glance fault identification.

JSON

{
  "type": "statusmap",
  "title": "Service Health Matrix",
  "targets": [{"expr": "up{job=~\"onto-.*\"}"}]
}

#3. Data Source Configuration

YAML

apiVersion: 1
datasources:
  - name: Prometheus
    type: prometheus
    url: http://prometheus:9090
    isDefault: true
  - name: Loki
    type: loki
    url: http://loki:3100
  - name: Jaeger
    type: jaeger
    url: http://jaeger:16686
  - name: OntoAPI
    type: marcusolsson-json-datasource
    url: http://api-gateway:8080/api/v1/metrics

#4. Dashboard as Code

Python

class DashboardBuilder:
    def __init__(self, title: str, uid: str):
        self._dashboard = {
            "title": title, "uid": uid, "panels": [],
            "time": {"from": "now-6h", "to": "now"}, "refresh": "30s",
        }
        self._next_id = 1
        self._current_y = 0

    def add_row(self, title: str) -> "DashboardBuilder":
        self._dashboard["panels"].append({
            "type": "row", "title": title,
            "gridPos": {"h": 1, "w": 24, "x": 0, "y": self._current_y},
        })
        self._current_y += 1
        return self

    def add_stat(self, title, expr, **kwargs): ...
    def add_timeseries(self, title, expr, **kwargs): ...
    def build(self) -> dict:
        return self._dashboard

# Usage
overview = (
    DashboardBuilder("Platform Overview", "onto-overview")
    .add_row("Key Metrics")
    .add_stat("Active Requests", "sum(onto_requests_active)")
    .add_stat("Error Rate", "rate(onto_requests_total{status='error'}[5m])")
    .add_stat("P99 Latency", "histogram_quantile(0.99, onto_request_duration_bucket)")
    .add_row("Trends")
    .add_timeseries("Request Rate", "sum(rate(onto_requests_total[5m])) by (service)")
    .build()
)

#5. Testing

Python

class TestDashboard:
    def test_dashboard_json_valid(self):
        assert overview_dashboard["title"] == "Platform Overview"
        assert len(overview_dashboard["panels"]) > 0

    def test_all_queries_valid(self):
        for panel in overview_dashboard["panels"]:
            if "targets" in panel:
                for target in panel["targets"]:
                    result = prometheus_client.query(target["expr"])
                    assert result is not None

    def test_widget_count(self):
        all_panels = []
        for db in ALL_DASHBOARDS:
            all_panels.extend(p for p in db["panels"] if p["type"] != "row")
        widget_types = set(p["type"] for p in all_panels)
        assert len(widget_types) >= 17

#6. Production Best Practices

#6.1 Dashboard Design Principles

Information hierarchy: Most important metrics at the top
Consistent colors: Green/yellow/red for normal/warning/critical
Time alignment: All panels share unified time range
Interactive drill-down: Click to navigate to detailed views
Mobile-friendly: Key dashboards adapted for mobile

#6.2 Performance Optimization

Use recording rules for large time range queries
Limit display rows for real-time panels (logs, traces)
Use Grafana variables for panel reuse
Separate alert queries from dashboard queries

#7. Summary

The coomia-dip operations dashboard covers full observability needs from infrastructure monitoring to business compliance auditing through 17 visualization widgets. Key highlights:

17 widget types: Covering metrics, logs, traces, topology, compliance dimensions
Multi-datasource: Unified access to Prometheus + Loki + Jaeger + Custom API
Dashboard as Code: Version-controlled dashboard configuration
Role-based views: Dedicated dashboards for ops/SRE/security/data teams
Interactive: Cross-widget drill-down and correlated analysis

The next article will explore the coomia-dip API gateway design.

Operations Dashboard: Unified Visualization Platform with 17 Widget Types

#TL;DR

#1. Dashboard Architecture

#1.1 System Architecture

#1.2 Dashboard Organization

#2. 17 Widget Types in Detail

#W1: Stat Counter

#W2: Time Series Chart

#W3: Distribution Heatmap

#W4: Service Topology (Node Graph)

#W5: Trace Waterfall

#W6: Log Stream

#W7: Alert Timeline

#W8: Resource Utilization Gauge

#W9: SLA Dashboard

#W10: Object Operations Bar Chart

#W11: Authorization Distribution Pie Chart

#W12: Masking Operations Table

#W13: Audit Event Stream

#W14: Lineage Topology Graph

#W15: Classification Distribution Pie Chart

#W16: Compliance Scorecard

#W17: Health Status Matrix

#3. Data Source Configuration

#4. Dashboard as Code

#5. Testing

#6. Production Best Practices

#6.1 Dashboard Design Principles

#6.2 Performance Optimization

#7. Summary