Tutorial

84 vFoglight
Web Component Tutorial
Before Building the Dashboard:
Perform a deep copy of [chart] Disk I/O Utilization from the module Hosts > Host.
This gives you your own copy of the component, which you can edit any way you want.
Do this by navigating to Hosts > Host in the Module List pane and selecting the view in
the Module Contents Pane. When the component’s definition appears in the Definitions
pane, click Copy > Deep and select My Definitions in Select Target Module.
You will need to add this view to the grid, and by copying it now you will be able to
make changes to the copy without affecting the installed component.
Modify the Chart Properties
We’ll give the chart a title and ensure that the legend is enabled.
To edit the chart’s Header property:
1 Open your copy of [chart] Disk I/O Utilization for editing.
2 Select the General tab, remove the check mark from Public and set Priority to
None.
3 Select the Context tab and verify that host is an optional context input. You will
be passing a host object to the component in this tutorial.
4 Select the Configuration tab and ensure that Show Advanced Properties is
enabled.
5 Expand the Header node and click the Edit ( ) button for Text.
6 Choose String Template and type Disk I/O Utilization for {0} in the Va lu e field.
The Parameter {0} row appears in the lower part of the dialog.
7 Select the Edit ( ) button on the Parameter {0} row and choose Context
Selection.
The Edit - Parameter {0} dialog appears.
8 Click the browse button ( ) in the Input Key field and choose host.
9 Click Save in the Edit - Parameter {0} dialog.
10 Click Save in the Edit - Text dialog.
To edit the chart’s Legend property:
1 Expand the Legend node.