Changing Widgets and Dashboards

Document created by Chris Sommerstad Employee on Jul 21, 2017Last modified by Trishala Kalal on Aug 14, 2017
Version 2Show Document
  • View in full screen mode

Dashboards can be added to test compositions or created independently (e.g. a standalone dashboard such as in mPulse or a results-based dashboard that is not tied to a test composition). The widgets in dashboards can be moved, printed, popped out, maximized, and edited (for example, by having their colors changed, or by data toggled using checkboxes.

Add or Remove Dashboards

Each composition can have one or more dashboards arranged in any of the given layouts. In the example on the right there are two dashboards, Performance and Error Analysis.

  • Additional dashboards can be added by clicking the Plus sign (+) to the right of the last added dashboard on the title bar. When you do so, the Dashboard wizard appears.
  • To remove a dashboard from a test composition, simply click its Close icon to the right of the dashboard name in Composition Editor > Play tab (or Results tab).

SOASTA provides a number of default System Dashboards, as well as a large selection of widgets categorized by type. In CloudTest, you can click the Plus (+) tab in the dashboard to add a dashboard to a test composition. For example, the CloudTest Monitor Dashboard or the mPulse Globe Dashboard.

See Creating a New Dashboard for step-by-step instructions on dashboard creation.

Move or Remove Widgets

  • To move a widget to a new location on a dashboard, select the title bar and hold the mouse down to drag the widget into its new position. When you do so, an icon representing this widget appears on the drag operation. This icon can be placed in the new widget location as desired.

See Combine and Correlate Charts for instructions on using drag-and-drop actions to combine like chart widgets.

  • To remove a widget from a custom dashboard, place the mouse cursor over the top right portion of the widget until the widget control appears.

Note: System dashboards are not editable. If you'd like to revise a system dashboard, you must first save it as a copy (or custom) dashboard.

Click the Delete (X) button on the widget title bar to remove a widget from a custom dasboard.

Edit Widget or Dashboard Options

 

Toggle the Dashboard Edit Mode button to edit settings for dashboards or for a selected widget.

When you do so, the Combined Edit Panel for widgets and dashboards appears in the lower portion of the dashboard workspace on the right.

Browse the General, Layout, Properties, and Filter tabs to view or change settings for the dashboard. Click to Apply any changes.

 

Viewing or Changing a Dashboard’s Settings

  1. Click the Toggle Dashboard Edit Mode button on the toolbar.

If no widgets were selected, the Edit Panel appears below with only the Dashboard node selected and the General tab showing. When dashboard is selected only dashboard-level settings are presented.

 

General Dashboard Options

  • Name – The dashboard name
  • Display on dashboard surface – check to display the name on the dashboard surface
  • Save Location – the repository location of this dashboard
  • Set as my default dashboard – Click this button to make the current dashboard the default one

Layout Dashboard Options

  • Layout type - select a column layout for the dashboard using the visual cues

Dashboard Properties

Custom dashboards include a platform-wide Theme selection option—either the default Light theme or Dark theme—which can be found in the Dashboard Edit Panel, Properties tab. These themes control the widget color for all dashboard widgets. Click Apply to finalize your selection to all widgets in the display. Provide an Image Name and use Choose File to select the image to upload. The Image Name will appear in the Background Image dropdown.

  • Background Color - select a color for the dashboard background
  • Background Image - specify a background image to use in this dashboard. Click Import if that image is not also already in the repository
  • Widget Padding - increase internal and external space around the widget border
  • Link Chart Timelines - chart timelines are linked across the dashboard by default, unchecking this will unlink them
  • Enable widget animations - turn chart animations associated with real-time deltas on or off
  • Hide widgets when not playing - conceal widgets when the test composition is not playing
  • Column widths - Set a column width in pixels
  • Import - Use the Import button to launch the select a new background image to import. When you do so, the New Image dialog box appears for you to choose the image file to import. Dashboard background images should be 72 pixels wide by 27 pixels tall. The Maximum file size is 5,120 bytes.

In the screenshot below, the Default Dashboard Texture image is applied to the Dashboard Dark Theme with 50% texture opacity selected.

Viewing or Changing a Widget’s Settings

  1. Toggle on the Widget Selection Panel.
  2. Click the widget whose settings you’d like to view or edit. The widget appears selected as indicated by the blue selection border and the Widget Type list scrolls to the selected widget.

  1. Toggle the Dashboard Edit Mode button to edit layout, color, and other settings for dashboards or for a selected widgets.

The Edit Panel appears below with the Widget selected on the left and its properties showing on the right. The Title field in the right panel and the blue border above agree.

General Widget Options

All widgets have the following fields:

  • Title—An editable text title
  • Show Title bar checkbox—Uncheck this box to hide display of the chart's title bar
  • Color—Select from among basic colors by clicking one to apply it to the widget's title bar
  • Custom color field—Enter a hexadecimal code for a custom color in the text field below Color
  • Height—Pick among radio buttons for Default, Custom (specified in pixels, and Use Remaining Space (stretches the widget to available space in the dashboard) options
  • Linked Dashboard—When a "linked dashboard" is selected, then a link is put into the title bar for that widget. Then, when the widget appears in the dashboard that link can be clicked to display the specified dashboard. This feature can be used to "drill down" by having the linked dashboard be related to the widget that had the link.  For example, one might place a link onto the Error chart widget in the Load Summary dashboard to quickly be able to bring up the Error Dashboard which contains Error Analysis, Errors by Type, etc.

Widgets with special settings display them in the Contained Widget(s) node. For example, the non-chart Fundamentals Widget’s (shown below) Includes such settings, which appear when Contained Widgets, Fundamentals is selected.

The Save As option (lower far right) allows the combined (or any) widget to be saved and used in other dashboards. Clicking Save As… launches the Create a New Widget Type dialog box. The saved widget will be shown in the same category as the "saved" widget.

 

For widget specific filtering instructions for dashboards and widgets, refer to Filtering Dashbaords and Widget.

Additional Chart Widget Options

For charts, General options also include the selection of a Theme for a widget. Selecting a theme selects the colors that will be used in the chart series. Selecting a radio button for a given theme makes the first color in that row the first color in the series. Click a color tile in any theme row to begin the series (of charts) with that color instead. The series will cycle through the remaining colors.

The selected color (e.g. yellow tile from the Spectrum) is assigned to the top-most subordinate chart that was listed first in the Widget(s) tree view and the Widget Order list (in the Edit Widget panel). The selection is the one that's "closest" to the user on the chart. Clicking the third tile in the Spectrum row will result in the chart colors shown on the right.

 

The default is for no vertical lines to display.

Checking the Show X axis grid lines checkbox turns on vertical grid lines for the widget.

Viewing or Changing Contained Widget Settings

If the widget is a combined or correlated widget the contained nodes are also shown. For example, the Bytes Sent and Received and Average Response Time are Contained widgets with grouped properties to set that include Chart Type and Show data point markers (off by default).

 

The Widget Order is shown on the right. For combined widgets, multiple subordinate widgets will be shown. Use the Detach the subordinate widget button (to the right of the widget’s name) to detach it from the combined chart and add it independently to the dashboard. Combined widgets use transparency. The topmost widget in order is closest to the user—while the bottom most gets the background color.

  1. With the Edit Widget Panel in view, select the Contained Widget(s) node to view settings at that level such as the order of widgets.
  1. To change widget order, select a widget and use the up or down arrows to move it.

 

  1. To remove a widget from a combined or correlated widget and return it to the dashboard as a separate widget, click the Detach contained widget button.

  1. To remove a widget from a combined or correlated widget and delete it from the dashboard use the delete button.
  1. To change which contained widget gets the left- or right-x-axis, use the Axis drop-down list.
  2. Click Apply to save any changes made here.
  3. Click Toggle Dashboard Edit Mode a second time to exit the panel.

 

 

Chart Axis: Primary/Secondary

The Axis and Primary/Secondary setting allows the Left y-axis and Right y-axis to be switched per subordinate chart.

Check the Show data point markers checkbox to show dots on line chart as a user preference.

 

 

Changing Chart Types

Select a widget name under the Contained Widget(s) node to set the following additional options:

Chart Type

The Chart Type drop-down offers: Line, Bar, Area, Scatter, and Pie options for each chart. Changing the type will change the presentation of its data to the given type. An Area chart is shown on the right.

 

The same information can be presented as a Bar chart (or any other available type).

Maximize, Restore, and Pop-Out a Widget

You can maximize and restore a widget to increase and restore its visual space on the dashboard. Click Maximize to use the full dashboard space, click Restore to return the widget to its default size on the dashboard.

 

You can pop-out a widget to view it in a separate window. To do so, place the mouse in the widget's upper right corner and press the Pop-Out button.

Attachments

    Outcomes