Display Modes Guide

Explore all the visual options available in the Minimal Status Panel and learn when to use each mode for maximum impact.

🎨 Display Mode Overview

The Minimal Status Panel offers 3 display modes and 3 display levels for a total of 9 different visual combinations. Each is optimized for specific use cases and screen sizes.

📊 Display Modes

List Mode

Best for: Detailed monitoring, smaller service counts (5-15 services)

Traditional vertical layout that provides maximum information density while maintaining readability.

Characteristics:

Use cases:

Grid Mode

Best for: Overview dashboards, medium service counts (10-30 services)

Responsive card-based layout that adapts to screen size while showing comprehensive information.

Characteristics:

Use cases:

Compact Mode

Best for: Status walls, large service counts (30+ services), space-constrained displays

Minimal colored dots that provide maximum service density with minimal screen real estate.

Characteristics:

Use cases:

🔍 Display Levels

Ultra-Minimal Level

Shows only the essential information: service name and current status.

What’s included:

Perfect for:

Minimal Level

Balanced view with essential monitoring information and visual status history.

What’s included:

Perfect for:

Full Level

Complete monitoring view with detailed statistics and comprehensive information.

What’s included:

Perfect for:

🎯 Combination Examples

1. List + Ultra-Minimal

List Ultra-Minimal Example

Configuration:

{
  "displayMode": "list",
  "displayLevel": "ultra-minimal",
  "showLabels": true,
  "maxItems": 20
}

Best for:

2. List + Minimal

List Minimal Example

Configuration:

{
  "displayMode": "list",
  "displayLevel": "minimal",
  "showLabels": true,
  "showUrls": true,
  "maxItems": 15
}

Best for:

3. List + Full

List Full Example

Configuration:

{
  "displayMode": "list",
  "displayLevel": "full",
  "showLabels": true,
  "showUrls": true,
  "showLastCheck": true,
  "showResponseTime": true,
  "maxItems": 10
}

Best for:

4. Grid + Minimal

Perfect for responsive dashboards

Visual: Imagine the minimal cards arranged in a responsive grid (2-4 columns depending on screen size)

Configuration:

{
  "displayMode": "grid",
  "displayLevel": "minimal",
  "showLabels": true,
  "maxItems": 20
}

Best for:

5. Grid + Full

Comprehensive information in card format

Visual: Full information cards arranged in a responsive grid

Configuration:

{
  "displayMode": "grid",
  "displayLevel": "full",
  "showLabels": true,
  "showUrls": false,
  "maxItems": 12
}

Best for:

6. Compact + Any Level

Maximum density status indicators

Visual: Small colored status dots arranged horizontally with optional tooltips

Configuration:

{
  "displayMode": "compact",
  "displayLevel": "ultra-minimal",
  "showLabels": false,
  "maxItems": 50
}

Best for:

🎨 Visual Design Elements

Status Colors

Heartbeat Bar

Interactive 50-point timeline showing service health over time:

Typography

📱 Responsive Behavior

Grid Mode Breakpoints

List Mode

Compact Mode

🎯 Choosing the Right Mode

Consider Your Audience

Technical Teams

Executives/Management

Public/Customers

Consider Your Screen

Desktop Monitors

Laptops

Tablets

Mobile Phones

Large Displays/TV Screens

Consider Your Data Volume

Few Services (1-10)

Medium Count (10-30)

Many Services (30+)

💡 Pro Tips

  1. Test different modes with your actual data to see what works best
  2. Use consistent modes across related dashboards for user familiarity
  3. Consider your refresh rate: More detailed modes may need longer refresh intervals
  4. Match the mode to the purpose: Detailed for troubleshooting, overview for monitoring
  5. Think about your users: What information do they need most?

🔧 Customization Tips

Color Customization

The plugin respects Grafana’s theme colors, but you can customize through:

Font Adjustments

Spacing and Layout

Ready to implement these modes? Head to the Configuration Guide for detailed setup instructions!