New Scalyr UI Dashboard Introduction

We have revamped Dashboards and added 

• Drag-and-drop resizing and moving
• New visualizations (donut chart, pie chart, big number), as well as a markdown widget for notes
• A new page that lists all dashboards and their contents
• Additional graphing controls

The enhanced dashboards include capabilities available directly from the UI as well as some advanced features and visualization that we temporarily only support via JSON configuration.

Viewing and Filtering All Dashboards

There's a new 'View All Dashboards' page to quickly find the dashboard you are looking for.

 

This new page lists the widget titles on each dashboard, and adds a search box to filter long lists of dashboards.

 

Resize and Move Dashboards via Drag-n-Drop

Customize dashboards to your liking. Resize a widget by grabbing its right or bottom edge, or bottom-right corner. Move it around by clicking on its title. An underlying grid helps keep things tidy.The layout for each widget will be added to the dashboard configuration and automatically saved. You can lock the layout to prevent accidental edits.

Dashboard Widget Resizing Advanced Options

Widget positions are saved in the new 'layout' JSON object.

layout: {  // all use grid units; a page is 60 units wide
  h: 30,
  w: 60,
  x: 0,
  y: 0
},

There’s a new lop-level “options” JSON object with the following fields:

options: {
  layout: {
    locked: 1, // Disable drag and drop layout default: 0(false)
    fixed: 1,  // Disables drag and drop and hides unlocking from menu
    columns: 1 | 2 | 3 | 4 | 5 // Reset default in the layout dialog
 }
}

The fixed: property is only available via editing the JSON file.

New Visualizations

We've added support for the following new values for the graphStyle property:

• Pie charts
• Donut Graphs
• Markdown widgets
• Big Numbers

Pie Charts

Pie charts support power queries with the following options captured in the example below:

{
  "graphStyle": "pie",
  "query": "action=* action!='checkFile' | group actionCount = count(action) by action | sort actionCount | limit 6",
  "title": "Bottom Actions"
}

Donut Graphs

Donut graphs support Power Queries with the following options captured in the example below:

{
  "graphStyle": "donut",
  "query": "action=* action!='checkFile' | group actionCount = count(action) by action | sort -actionCount | limit 12",
  "title": "Top Actions"
}

Big Numbers

Numbers support filter and Power Queries with the following options:

options: {
  suffix: string | undefined, // shown to right of the number, defaults to none
  color: hexValue | htmlColorName | undefined, // defaults to dashboard text color
  backgroundColor: hexValue | htmlColorName | undefined // defaults to dashboard bg color
format: AUTO | D | K | M | B, // Abbreviates big numbers:
  // If the incoming value is 10,000,000,000 (10 billion), these formats produce:
  // B - billion  => 10B
  // M - million  => 10,000M
  // K - thousand => 10,000,000K
  // AUTO (default) - examines the number and picks the best fit, so => 10B
  // If it's anything else, we just insert commas into the original value.
}

 

Here’s an example:

{
  "graphStyle": "number",
  "query": "$action = 'finish'| group actionCount = count(action) by action | sort -actionCount | limit 1",
  "title": "Successful Actions"
}

Markdown Widgets

Markdown widgets let you add notes and comments to your dashboards.

{
  "graphStyle": "markdown",
  "markdown": "This only covers WEB actions.\n\n* Any new actions should be added\n* Don't worry about nulls\n\n   Go here for serverless actions:  [Lambda Actions](http://elm-lang.org/examples/markdown)",
  "title": "Notes"
}

These visualizations are currently only available by editing the JSON configuration of the dashboard, but you will be able to add them via the UI in the future.

New Interval Options

The barWidth: property now takes a new “AUTO” value to automatically choose an appropriate bar width for any time range you view. When combined with the new numBar property it will standardize the number of bars to display regardless of the time range. 

numBars - Number, default is 24, maximum is 200.