Dashboards

Working With Dashboards

Dashboard content is specific to the visualization framework being used to render the dashboard. Argus web services do not support rendering of metric data or dashboards.

Dashboard Structure

A dashboard includes the end date, ID, name, owner, metric, scope, shared, start date, and tags.

Component	Description
Id	ID of the Dashboard
Name	Dashboard name
Content	Content of the Dashboard
Owner	Dashboard Owner
Shared	Indicates if the dashboard is visible by other users
Description	Dashboard description

Create a Dashboard

To create a dashboard, click the Add button on the Dashboard List page. To view your new dashboard, enter your last name in the search box.

Modify a Dashboard

To modify an existing dashboard, search for the ID number, dashboard name, description, or last name of the owner in the search box.

Click the dashboard name that you want to modify.
Click the Edit tab.
Modify the dashboard and click Save.

Custom Tags

Dashboard templates can have an arbitrary number of HTML tags. You can use any HTML5 tags like divs, table, and list to provide specific functionality. Argus also supports Bootstrap CSS classes for styling.

Currently, Argus supports line charts, area charts, and tabular charts. We encourage users to add support for other charts to the Argus UI. Here's a list of tags available for dashboard content.

Tag	Description
<ag-dashboard/>	Defines the dashboard
<ag-date/>	Defines a date input control
<ag-text/>	Defines a text input control
<ag-submit/>	Defines a submit button that when clicked will re-render the dashboard
<ag-chart/>	Defines a chart of the dashboard
<ag-option/>	Options for a chart or a table
<ag-metric/>	Time-series displayed on a chart or table
<ag-flags/>	Defines annotations
<ag-status-indicator/>	Defines a go/nogo stoplight indicator
<ag-table/>	Defines a table of the dashboard

ag-dashboard

This tag is required and must encapsulate the entire dashboard markup.

<ag-dashboard>
   <!-- your dashboard content -->
</ag-dashboard>

ag-date

This tag provides an input control to capture time and date information that can be used to parameterize your dashboard.

name - The name of the variable to store the control value. This is the name that is used in the parameterized portions of your dashboard.
label - The descriptive label to be rendered alongside the control.
default - The default value to use. Can be a relative date such as '-7d' or a date time string such as '8/28/16 12:00 AM'.

<ag-date name='start' label='Updated Start Date' default='-7d'></ag-date>

ag-text

This tag provides an input control to capture arbitrary text data that can be used to parameterize your dashboard.

name - The name of the variable to store the control value. This is the name that will be used in the parameterized portions of you dashboard.
label - The descriptive label to be rendered alongside the control.
default - The default value to use.
id - The custom id for this element.
class - The custom CSS class for this element. (requires a <style></style> in your custom markup with your class name and style properties)
style - The custom CSS as 'inline' styles on the element.
size - The HTML attribute to set the width of the input element.

<!-- default markup -->
<ag-text name='host' label='Hostname' default='myhost.mycompany.com'></ag-text>

<!-- with all options -->
<ag-text id='someId' class='someClass' style='padding-top:1px;' size='45' name='host' label='Hostname' default='myhost.mycompany.com'></ag-text>

ag-submit

This tag provides a submit button that when clicked will re-render the dashboard using the current values of any input controls.

id - The custom id for this element.
class - The custom CSS class for this element. (requires a <style></style> in your custom markup with your class name and style properties)
style - The custom CSS as 'inline' styles on the element.

<!-- defaults markup -->
<ag-submit></ag-submit>

<!-- with all options -->
<ag-submit id='someId' class='someClass' style='background-color:green;'></ag-submit>

ag-chart

This control renders a chart containing data for all nested ag-option, ag-metric and ag-tag elements.

name - The identifier for the chart which must be unique from all other ag-chart elements.
type - The type of chart to render, which can be either 'line' or 'area'.
smallchart - If set to true, will render as a minimalistic spark line chart. DO NOT enclose value in quotes!

<ag-chart name='myChart'>
  <!-- One or more nested ag-option, ag-metric or ag-flags elements -->
</ag-chart>

<!-- with smallchart attribute -->
<ag-chart name='myChart' smallchart=true>
  <!-- One or more nested ag-option, ag-metric or ag-flags elements -->
</ag-chart>

ag-option

This control sets specific chart options to control chart rendering.

name - The dot delimited path identifier to the option for which the value is be set.
value - The value of the option being set.

List of additional options supported:

xAxis.title.text
yAxis.title.text

<ag-option name="xAxis.title.text" value="X-axis title"></ag-option>
<ag-option name="yAxis.title.text" value="Y-axis title"></ag-option>

yAxis.min
yAxis.max

<ag-option name="yAxis.min" value="0"></ag-option>
<ag-option name="yAxis.max" value="1250"></ag-option>

chart.width
chart.height

<ag-option name="chart.width" value="50%"></ag-option>
<ag-option name="chart.height" value="625"></ag-option>

NOTE: Don't use percentages as values for 'chart.height' because the CSS across browsers won't be consistent.

title.text
title.style.color

<ag-option name="title.text" value="Chart Title"></ag-option>
<ag-option name="title.style.color" value="#F00"></ag-option>

Used in an <ag-chart></ag-chart>

<ag-chart name='myChart'>
  <ag-option name='title.text' value='Chart Title'></ag-option>
  <!-- other ag-option, ag-metric or ag-flags elements -->
</ag-chart>

Used in an <ag-table></ag-table>

<ag-table name='myTable'>
  <ag-option name='title.text' value='Table Title'></ag-option>
  <!-- other ag-option or ag-metric elements -->
</ag-table>

ag-metric

This element specifies the metric query with which to populate the parent element with.

name - The identifier of the element which must be unique from other sibling ag-metric elements.
seriesname - Optional attribute that sets the series name. This name is applied to all series returned by the query so best to use it for queries that are known to return a single time series.
seriescolor - Optional attribute that sets the series color. This color is applied to all series returned by the query so best to use it for queries that are known to return a single time series. Can be a symbolic color name such as 'green', 'blue' or can be a hex RGB value such as '#EEDD11'.
CONTENT - The body content of the element specifies the metric query with which to populate the parent element with. This content can contain parameter placeholders of the form '$$'. Such placeholders will be replaced with the corresponding control values.

<ag-chart name='myChart'>
  <ag-metric name='myMetric'
    SUM($start$:$end$:myScope:myMetric:min)
  </ag-metric>
  <!-- additional ag-option, ag-metric, ag-flags elements -->
</ag-chart>

<ag-table name='myTable'>
  <ag-metric name='myMetric'
    SUM($start$:$end$:myScope:myMetric:min)
  </ag-metric>
  <!-- additional ag-option, ag-metric, ag-flags elements -->
</ag-table>

ag-flags

This element specifies the annotation query with which to populate the parent element with.

name - The identifier of the element which must be unique from other sibling ag-flags elements.
CONTENT - The body content of the element specifies the annotation query with which to populate the parent element with. This content can contain parameter placeholders of the form '$$'. Such placeholders will be replaced with the corresponding control values.

<ag-chart name='myChart'>
  <ag-flags name='myFlags'
    $start$:$end$:myScope:myMetric:myType:aUser
  </ag-flags>
  <!-- additional ag-option, ag-metric, ag-flags elements -->
</ag-chart>

ag-status-indicator

This element defines a stoplight indicator visual element that renders red, orange or green based on the most recent datapoint of the nested ag-metric element. For values above the 'hi' attribute, the component will render green. For values below the 'lo' attribute, the component will render red. For all other values, the component will render orange. Since only the most recent datapoint is considered, queries that return a single datapoint should be used. Downsampling is a common way to achieve this.

name - The identifier for the indicator element which must be unique from all other indicator identifiers.
hi - The value for which the element will show <color='green'>GREEN status if the most recent datapoint value of the nested ag-metric element is above this value.
lo - The value for which the element will show <color='red'>RED status if the most recent datapoint value of the nested ag-metric element is below this value.

The ag-status-indicator requires a parent element with ONE of the following:

use the css class 'rowIndicator', per the HTML example below
use hand-dandy Bootrap classes, e.g. 'col-md-4'
use a div with style='position:relative;'

Otherwise, your indicator will show at the top of the screen.

<!-- parent element required -->
<div class='rowIndicator'>  
  <ag-status-indicator name='myIndicator' hi='99.9' lo='99.0'>
    <!-- a nested ag-metric element -->
  </ag-status-indicator>
</div>

ag-table

This element renders a table containing data for all nested ag-option and ag-metric. You can set the title of the table using the "title.text" attribute in ag-option. The ag-table provides features including pagination, setting number of items shown per page, and filter by search text (datetime, dashboard Id or name, etc.)

Delete a Dashboard

You must be logged in as a user with appropriate permissions to delete a dashboard. Select the dashboard from the dashboard list, and click Delete.

Home
Getting Started
Contributing
Token-Based Authentication Release Notes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly