Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Visualizations

The default Stylus webapp provides a few builtin visualizations to get you up and running quickly.

Overview

Visualizations are configured in your config.yaml file under the ui.visualizations section. Each visualization has a type, title, description, and type-specific configuration options.

Configuration

ui:
  visualizations:
    - title: "Service Status"
      description: "Overview of all monitored services"
      type: "table"
    - title: "Network Diagram"
      description: "Visual representation of network topology"
      type: "svg"
      url: "/network.svg"
    - title: "Infrastructure Dashboard"
      description: "Interactive infrastructure overview"
      type: "iframe"
      url: "/dashboard.html"
      inject: true

Visualization Types

Row Visualization

The row visualization allows you to split a visualization into multiple columns with configurable widths. Each column can contain any other visualization type.

Configuration:

- title: "My Rows"
  description: "Row description"
  type: "row"
  columns:
    - type: "table"
      width: 1
    - type: "stack"
      width: 2
      stacks:
        - title: "Rack 1"
          rows:
            - id: "router"
              size: "small"
              layout: 3x1 4x2
    - type: "svg"
      width: 1
      url: "/network.svg"

The width parameter for each column determines how much of the available space the column should take up.

Table Visualization

The table visualization displays monitor status in a structured table format with status indicators and clickable rows for log viewing.

Configuration:

- title: "Service Status"
  description: "Overview of all monitored services"
  type: "table"

Stack Visualization

The stack visualization displays monitor status like a rack of servers.

Configuration:

- title: "Rack Status"
  description: "Rack of servers with status indicators"
  type: "stack"
  stacks:
    - title: "Rack 1"
      rows:
        - id: "group"
          size: "small"
          # Two 1x2 groups, two column-wise 2x2 groups (4 + 8 = 12 ports total)
          layout: 2x1x2 ~2x2x2
          # Order the status indicators by index as [6, 1, 2, 3, 4, 5, 10, 9, 8, 7, 20, 21]
          order: 6 1-5 10-7 20-21

The size parameter controls the size of the status indicators.

The layout parameter controls the layout of the status indicators. A single number indicates a 1-high group (ie: W), two numbers are WxH, three number is NxWxH, where N repeats the WxH group. A layout group prefixed with ~ indicates that the group is laid out column-wise rather than row-wise.

The order parameter controls the order of the status indicators. It is a space-separated list of ranges and single numbers. Ranges are inclusive, and support reverse order.

Each group is laid out in order from left to right on each row, unless the group is prefixed with ~, in which case it is laid out top-to-bottom on each column. Each port is taken from the next item in the order list.

SVG Visualization

The SVG visualization loads an SVG file and applies dynamic styling based on monitor status. This works well with network diagrams, flowcharts, and other vector graphics.

The SVG is loaded from the static/ directory, and is automatically updated when the status changes.

Configuration:

- title: "Network Diagram"
  description: "Visual representation of network topology"
  type: "svg"
  url: "/network.svg"

The SVG visualization automatically applies your configured CSS rules to the SVG content. The recommended method is setting data-monitor-id attributes on the SVG elements, and applying fill: CSS rules.

See the CSS Configuration section for more details.

Iframe Visualization

The iframe visualization embeds external HTML content with optional style injection, allowing you to create custom visualizations that fit into the existing pages. See Custom Monitor Pages for more details.

Configuration:

- title: "Infrastructure Dashboard"
  description: "Interactive infrastructure overview"
  type: "iframe"
  url: "/dashboard.html"
  inject: true

When inject: true is set, the monitor CSS is automatically injected into the iframe, applying to the content within.

Isoflow Visualization

The Isoflow visualization provides interactive diagrams with dynamic data updates.

Configuration:

- title: "Service Flow"
  description: "Interactive service dependency diagram"
  type: "isoflow"
  config: "service-flow"

Isoflow visualizations require initial data to be placed in config.d/{config-name}.json. The data is automatically updated with status information when available.

Fullscreen Mode

All visualizations support fullscreen mode for detailed viewing. Click the fullscreen button (⛶) in the top-right corner of any visualization card.

Examples

Simple Status Dashboard

A table and SVG diagram.

ui:
  visualizations:
    - title: "Service Status"
      description: "Overview of all monitored services"
      type: "table"
    - title: "Network Topology"
      description: "Network diagram with status colors"
      type: "svg"
      url: "/network.svg"

A table, iframe, and Isoflow diagram.

ui:
  visualizations:
    - title: "Service Status"
      description: "Quick overview of all services"
      type: "table"
    - title: "Infrastructure Diagram"
      description: "D3.js infrastructure visualization"
      type: "iframe"
      url: "/infrastructure.html"
      inject: true
    - title: "Service Dependencies"
      description: "Interactive dependency flow"
      type: "isoflow"
      config: "dependencies"

A row visualization with multiple columns.

ui:
  visualizations:
    - title: "Dashboard"
      description: "Multi-column dashboard layout"
      type: "row"
      columns:
        - type: "table"
          width: 1
        - type: "stack"
          width: 2
          stacks:
            - title: "Rack 1"
              rows:
                - id: "router"
                  size: "small"
                  layout: 3x1 4x2
        - type: "svg"
          width: 1
          url: "/network.svg"

Advanced Usage

Custom Visualization Development

For complex visualizations, you can create custom HTML/JavaScript applications and embed them using the iframe visualization type. This allows for complex interactive dashboards, real-time data visualization, and integration with external monitoring systems.

See the Custom Monitor Pages section for more details.