Dashboards

Dashboards provide a centralized view of your monitoring data, allowing you to track service health, identify trends, and quickly respond to incidents. Create custom views tailored to your team’s needs and operational workflows.

Dashboard Overview

Purpose and Benefits

Operational Visibility:

• Real-time status overview across all services
• Historical trends and performance metrics
• Quick identification of problematic services
• Team-specific views for focused monitoring

Business Value:

• SLA compliance tracking and reporting
• Performance trend analysis for capacity planning
• Incident impact assessment and communication
• Executive summaries of system health

Team Collaboration:

• Shared visibility across teams and stakeholders
• Customizable views for different roles and responsibilities
• Embedded dashboards in team workflows
• Public status pages for external communication

Dashboard Types

Overview Dashboards:

• High-level system health across all services
• Critical service status and key metrics
• Recent incidents and resolution status
• Executive summary views

Team Dashboards:

• Service-specific monitoring for team ownership
• Performance metrics relevant to team goals
• Alert status and escalation information
• Team-specific SLA tracking

Environment Dashboards:

• Production vs staging vs development status
• Environment-specific performance comparisons
• Deployment impact tracking
• Cross-environment dependency monitoring

Service Dashboards:

• Deep-dive monitoring for specific applications
• Performance trends and capacity metrics
• Error rates and response time analysis
• User experience and business impact metrics

Creating Dashboards

Getting Started

Dashboard Creation Process:

1. Define Purpose: Identify the audience and use case
2. Select Data Sources: Choose relevant monitors and metrics
3. Design Layout: Organize widgets for optimal information flow
4. Configure Widgets: Set up visualizations and time ranges
5. Apply Filters: Focus on relevant services and environments
6. Share and Iterate: Get feedback and refine based on usage

Basic Dashboard Setup

Create New Dashboard:

// Via Web Interface
1. Navigate to Dashboards → Create New
2. Enter dashboard name and description
3. Select team/organization access level
4. Choose initial template or start blank

Dashboard Configuration:

dashboard:
    name: "Production Services Overview"
    description: "Real-time status of critical production services"
    layout: "grid"
    refresh_interval: "30s"
    time_range: "24h"
    access:
        teams: ["backend", "frontend", "infrastructure"]
        visibility: "organization"

Widget Types

Status Overview Widgets:

• Monitor Grid: Grid view of monitor statuses with color coding
• Status Summary: Count of monitors by state (Up/Down/Unknown)
• Alert Feed: Real-time list of recent alerts and incidents
• Uptime Percentage: Current uptime metrics for selected monitors

Performance Widgets:

• Response Time Chart: Time series of response times
• Uptime Chart: Historical uptime trends over time
• Error Rate Chart: Error percentage and trend analysis
• Latency Distribution: Response time percentiles and histograms

Business Widgets:

• SLA Compliance: Current and historical SLA achievement
• Incident Impact: Business impact of recent incidents
• Service Dependencies: Visual map of service relationships
• Cost Analysis: Monitoring costs and resource utilization

Widget Configuration

Monitor Grid Widget:

widget:
    type: "monitor_grid"
    title: "Production Services"
    filters:
        tags:
            environment: "production"
            criticality: ["critical", "high"]
    layout:
        columns: 4
        show_labels: true
        show_response_times: true
    color_scheme: "traffic_light"

Response Time Chart:

widget:
    type: "response_time_chart"
    title: "API Performance Trends"
    time_range: "7d"
    monitors:
        - "API Gateway Health"
        - "User Service Health"
        - "Payment Service Health"
    metrics:
        - "avg_response_time"
        - "95th_percentile"
    display:
        line_style: "smooth"
        show_anomalies: true

Uptime Summary:

widget:
    type: "uptime_summary"
    title: "Service Availability"
    time_range: "30d"
    grouping: "service"
    filters:
        tags:
            environment: "production"
    thresholds:
        excellent: 99.95
        good: 99.9
        warning: 99.0

Advanced Features

Filter and Grouping

Dynamic Filters:

// Apply filters to entire dashboard
filters: {
  environment: ["production", "staging"],
  team: "backend",
  criticality: "high",
  time_range: "last_24h"
}

// Widget-specific filters
widget_filters: {
  exclude_paused: true,
  status: ["UP", "DOWN"],
  response_time_threshold: 1000
}

Grouping Options:

• By Service: Group monitors by service or application
• By Team: Organize by team ownership
• By Environment: Separate production, staging, development
• By Criticality: Group by business impact level
• By Location: Geographic or data center grouping

Time Range Controls

Predefined Ranges:

• Last 1 hour
• Last 4 hours
• Last 24 hours
• Last 7 days
• Last 30 days
• Custom range selection

Auto-Refresh:

refresh_settings:
    interval: "30s" # Refresh every 30 seconds
    pause_on_interaction: true
    show_last_updated: true

Alerting Integration

Dashboard Alerts:

dashboard_alerts:
    - name: "Multiple Services Down"
      condition: "down_count > 3"
      severity: "critical"
      channels: ["slack-ops", "pagerduty"]

    - name: "Performance Degradation"
      condition: "avg_response_time > 2000"
      duration: "5m"
      channels: ["slack-performance"]

Team Collaboration

Sharing and Access Control

Access Levels:

• View Only: Can view dashboard but not edit
• Editor: Can modify widgets and layout
• Admin: Full access including sharing settings
• Public: Read-only access without authentication

Sharing Options:

sharing:
    organization: "all_members"
    teams: ["backend", "frontend"]
    individuals: ["[email protected]"]
    public_url: "https://status.company.com/dashboard/public"
    embed_code: "<iframe src='...'/>"

Embedded Dashboards

Embed in Applications:

<!-- Embed dashboard in internal tools -->
<iframe src="https://app.9n9s.com/embed/dashboard/dash_abc123" width="100%" height="600" frameborder="0"> </iframe>

Slack Integration:

// Scheduled dashboard reports in Slack
/9n9s dashboard summary production daily #ops-channel
/9n9s dashboard alerts critical immediate #incidents

Email Reports:

email_reports:
    - name: "Weekly SLA Report"
      dashboard: "Production Overview"
      schedule: "0 9 * * MON"
      recipients: ["[email protected]"]
      format: "pdf"

Dashboard Templates

Pre-built Templates

Production Services Template:

template:
    name: "Production Services"
    description: "Standard production monitoring dashboard"
    widgets:
        - type: "status_overview"
          position: [0, 0, 4, 2]
        - type: "response_time_chart"
          position: [4, 0, 8, 4]
        - type: "uptime_summary"
          position: [0, 2, 4, 2]
        - type: "incident_feed"
          position: [0, 4, 12, 3]

Team Dashboard Template:

template:
    name: "Team Dashboard"
    description: "Team-specific monitoring view"
    variables:
        - name: "team_name"
          type: "string"
          required: true
        - name: "environment"
          type: "select"
          options: ["production", "staging", "development"]
    widgets:
        - type: "monitor_grid"
          filters:
              team: "{{team_name}}"
              environment: "{{environment}}"

Custom Templates

Create Template:

# Save existing dashboard as template
dashboard_template:
    name: "API Service Template"
    description: "Standard API monitoring layout"
    source_dashboard: "dash_abc123"
    variables:
        - service_name
        - api_base_url
        - sla_target

Apply Template:

// Create dashboard from template
const newDashboard = createDashboardFromTemplate({
    template: "API Service Template",
    variables: {
        service_name: "User Authentication API",
        api_base_url: "https://auth.example.com",
        sla_target: 99.9,
    },
});

Mobile and Responsive Design

Mobile Optimization

Responsive Layout:

• Automatic widget resizing for mobile screens
• Touch-friendly controls and navigation
• Optimized data loading for mobile connections
• Simplified layouts for small screens

Mobile App Features:

• Push notifications for critical alerts
• Offline viewing of cached dashboard data
• Quick actions for acknowledging alerts
• Voice notifications for hands-free monitoring

Multi-Screen Support

Large Display Optimization:

display_modes:
    tv_mode:
        font_size: "large"
        hide_controls: true
        auto_cycle: true
        cycle_interval: "30s"

    wall_display:
        layout: "single_column"
        widget_spacing: "large"
        high_contrast: true

API and Automation

Dashboard API

Create Dashboard:

curl -X POST https://api.9n9s.com/v1/dashboards \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "API Performance Dashboard",
    "description": "Real-time API monitoring",
    "widgets": [...]
  }'

Update Dashboard:

curl -X PATCH https://api.9n9s.com/v1/dashboards/dash_abc123 \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "widgets": [...updated_widgets]
  }'

Export Dashboard:

curl -H "Authorization: Bearer $API_KEY" \
  https://api.9n9s.com/v1/dashboards/dash_abc123/export \
  > dashboard_backup.json

Automated Dashboard Management

Infrastructure as Code:

dashboards.yml

dashboards:
    - name: "Production Overview"
      template: "production_services"
      filters:
          environment: "production"
          criticality: ["critical", "high"]

    - name: "Team Backend"
      template: "team_dashboard"
      variables:
          team: "backend"
          environment: "production"

Deployment:

# Deploy dashboard configuration
9n9s-cli dashboards apply --file dashboards.yml

# Backup existing dashboards
9n9s-cli dashboards export --output dashboards_backup.yml

Best Practices

Design Principles

Information Hierarchy:

• Most critical information at the top
• Use visual hierarchy to guide attention
• Group related metrics together
• Minimize cognitive load with clear organization

Color and Visual Design:

• Use consistent color schemes across dashboards
• Reserve red for critical alerts and failures
• Use green for healthy/successful states
• Apply neutral colors for normal operations

Performance Optimization:

• Limit number of widgets per dashboard
• Use appropriate time ranges for data queries
• Cache expensive computations when possible
• Optimize refresh intervals based on usage patterns

Dashboard Organization

Naming Conventions:

[Environment] - [Team/Service] - [Purpose]
Examples:
- "Prod - API Services - Overview"
- "Staging - Frontend - Performance"
- "All - Security - Compliance"

Folder Structure:

├── Production Dashboards
│   ├── Critical Services
│   ├── Performance Monitoring
│   └── SLA Tracking
├── Team Dashboards
│   ├── Backend Team
│   ├── Frontend Team
│   └── Infrastructure Team
└── Executive Dashboards
    ├── Business Metrics
    └── Executive Summary

Maintenance

Regular Review:

• Monthly dashboard effectiveness review
• Quarterly cleanup of unused dashboards
• Annual review of dashboard strategy
• Continuous optimization based on user feedback

Documentation:

• Document dashboard purpose and intended audience
• Maintain README for complex dashboard configurations
• Document widget calculations and data sources
• Keep access control documentation current

Troubleshooting

Common Issues

Slow Loading Dashboards:

• Reduce number of widgets or time range
• Optimize database queries for custom metrics
• Check network connectivity and API response times
• Consider caching for frequently accessed data

Missing or Incorrect Data:

• Verify monitor filters and tag configurations
• Check data source availability and permissions
• Validate time range settings and timezone configuration
• Review widget configuration for correct metric selection

Access Issues:

• Verify user permissions and team membership
• Check dashboard sharing settings
• Validate organization access controls
• Review API key permissions for embedded dashboards

Performance Optimization

Dashboard Performance:

performance_settings:
    max_widgets: 12
    max_time_range: "30d"
    cache_duration: "5m"
    batch_requests: true
    lazy_loading: true

Query Optimization:

-- Optimize dashboard queries
SELECT monitor_id, status, response_time
FROM monitor_checks
WHERE timestamp > NOW() - INTERVAL '24 hours'
  AND monitor_id IN (SELECT id FROM monitors WHERE tags @> '{"environment": "production"}')
ORDER BY timestamp DESC
LIMIT 1000;

Next Steps

• Create your first dashboard
• Learn about dashboard widgets
• Set up team collaboration
• Configure dashboard alerts
• Explore public status pages