Chat now with support
Chat with Support

Foglight 5.9.8 - Web Component Tutorial

Using the Web Component Tutorial Tutorial 1: Drag and Drop Tutorial 2: Creating a Dashboard Tutorial 3: Adding a Drilldown Page Tutorial 4: Adding Views Tutorial 5: Using a Grid Tutorial 6: Reports Tutorial 7: Creating a Form Tutorial 8: Renderers Tutorial 9: Adding Questions and Answers Tutorial 10: Sending Messages to Other Users

Additional activities

After completing this tutorial, consider performing the following activities:

•
Investigate what effect changing the time range has on the CPU Memory Utilization Chart: T3 and possibly Alarm Table for Host T3 views.
•
Change the height of the Alarm Table for Host T3 view by opening the Host Details T3 view for editing, opening its Layout tab, double-clicking the Alarm Table for Host T3 area, and setting the Height property to Automatic. When you chose Automatic, you rely on the layout algorithm to adjust the height to a reasonable size, but you can override that by forcing the component to have a specified height.
•
The Alarm Table for Host T3 view can have more entries than the height of the component allows. Add scrollbars to the view and observe the change.

Tutorial 5: Using a Grid

This tutorial illustrates some of the more advanced properties of the Grid component. As well, the tutorial outlines how to perform a deep copy of an existing view and how to place a component on the navigation panel.

•
Building the Dashboard
•
Summary
Before building the dashboard

Before you get started, obtain a deep copy of the [chart] Disk I/O Utilization view. Deep copying gives you your own copy of the component and any of its referenced components, which you can edit any way you want. You need to add this view to the grid, and by copying it first you can make changes to the copied version without affecting the installed component.

To deep copy the [chart] Disk I/O Utilization view.
1
On the navigation panel, choose Dashboards > Configuration > Definitions.
2
In the Definitions area that appears, in the Module List pane, choose Hosts > Host.
3
In the Module Contents pane, in the drop-down list, ensure that Views is selected.
4
Locate and click the row containing the [chart] Disk I/O Utilization view.
The view settings appear in the Definition/Edit pane.
5
In the Definition/Edit pane, click Copy, and choose Deep from the list that appears.
6
In the Copy dialog box that appears, click My Definitions, and click OK.

Deep copy the [chart] Disk I/O Utilization view from Hosts > Host.

Modify chart properties

To start off, give the newly copied chart a title and ensure that the legend is enabled.

To edit the chart’s Header property:
1
In the Module List pane, click My Definitions.
2
Open your copy of the [chart] Disk I/O Utilization view for editing.
3
On the General tab, clear the Public check box, and set the Priority to None.
4
Open the Context tab and ensure the Usage column of the host entry is set to Required. Like in the previous tutorials, you pass a host object to the component in this tutorial.
5
Configure the timeRange context key to use the following settings:
•
Set Usage: Required
•
List: False
•
Data Type: Common:Time Range
6
Open the Configuration tab and ensure that Show Advanced Properties is selected.
7
Locate and expand the Header node.
8
In the Text sub-node, in the Value column, click Edit (), and choose String Template from the list that appears.
9
In the Edit - Text dialog box that appears, in the Value box, type Disk I/O Utilization for {0}.
10
In the Parameter {0} row that appears in the table below, in the Value column, click Edit (), and choose Context from the list that appears.
 
* 
IMPORTANT: Only System modules automatically have an associated resource bundle, so localization of the header string is not at issue here. For details on localization and resource bundles, see the Web Component Guide.
11
In the Edit - Text dialog box that appears, click the Input Key box, and choose host (Host) from the list that appears.
12
Click the Path box, and choose Name - String from the list that appears.
13
Click Set to close the Edit - Parameter {0} dialog box, then in the Edit - Text dialog box, click Set to close it.
To edit the chart’s Legend property:
1
On the Configuration tab, locate and expand the Legend node.
2
In the Visible sub-node, in the Value column, click Edit (), and in the Edit - Visible dialog box that appears, ensure the Boolean value check box is selected.
3
Click Set to close the dialog box.
4
On the view editor, click Save.

These are the only changes you need to make to the chart after copying it from Hosts > Host.

Using a list as a chooser

One purpose of this tutorial is to help you investigate the layout properties of the Grid component. Once more, we choose the familiar example of a host. Rather than limiting you to a single host, we use a Drop-Down List to pick any host in your monitored system. Alternatively, we can build a top-level dashboard that lists all hosts (like in Tutorial 2), and then configure a drill down page as a grid displaying host information. This tutorial, however, shows you how to update a top-level page by making a choice within the page and then having all the other views update themselves.

In this example, selecting a host in the drop-down list reloads the page and uses the selected host to set the context values. This is a simple but effective way to use one page to look at the properties of a number of different hosts.

Choosing the views

Because we are interested in Grid properties, we do not need to take the time to build all the views that we want to place in the cells of the Grid component. Instead, we will pre-built views and investigate what shape they take after adding them to the Grid cells.

The views that we will choose are:

•
A Row-Oriented Table for choosing hosts. We build this table in the tutorial.
•
Agents Running On A Given Host from Hosts > Host Analysis.
•
CPU Memory Utilization Chart T3 from the module containing the tutorial views.
•
Alarm List with Filter from the Alarms.
•
[chart] Disk I/O Utilization from the user module My Definitions for Tutorial 5.

For the Customizer, we make use of the Host Browser view from Hosts > Host, inserting it as the Customizer for this page.

Building the Dashboard

We begin by constructing the Grid component’s shell. After that, we lay out the contained views. After adding all of the required views, you can experiment with various layout settings to see how they affect the grid’s appearance.

To configure the General page of the dashboard:
1
In the Module List pane, ensure that My Definitions is selected.
2
In the Module Contents pane, ensure that Views is selected in the drop-down, and then click Add .
3
In the Add View dialog box that appears, on the Create a Blank View tab, choose Layouts > Grid, and click OK.
Figure 1. Add View
4
The view appears open for editing in the Definitions pane, with the General tab open.
5
Configure the settings on the General tab using the following values.
Figure 2. Dashboard settings
6
Click Save to save your work so far, and then click Edit to continue editing this dashboard.

Set a context

Define a Context to instruct the component accept a Host object as context input and supply the component with actual host-related data. You configure this dashboard to permit the choice of a different host and then update itself.

To set the context:
1
Open the Context tab.
2
On the Context tab, under Inputs, click Add Input to add a new row to the table.
3
Configure the newly added context key using the following settings:
•
Key: host
•
Name: Leave unchanged
•
Usage: Optional
 
* 
NOTE: This dashboard does not have a required Host input. You will set an initial value in the context in a following step.

The host context key is necessary because you use it to supply the host name and state to the dashboard title. By setting a default value, you supply the dashboard with an initial host value. Without it, the view might show errors until a host is selected and an update action is triggered.

•
List: False
•
Data Type: Monitoring:Host
4
Click Save.
To supply an initial host value:
1
Copy the Active Hosts query from Tutorial 4.
a
With My Definitions selected in the Module List pane, in the Module Contents pane, click the dropdown list and select Queries.
b
In the Module Contents pane, click Add .
c
In the Add Query dialog box that appears, open the Copy an Existing Query tab, choose Dashboard Development > Support > Tutorials > Tutorial 4 > Active Hosts, and click OK.
2
Continue editing the Hosts T4 view, and open the Context tab.
3
On the Context tab, under Inputs, in the host row, in the Fallback Value column, click Edit , and choose Query from the list that appears.
4
In the Edit - Context Input Entry “host” dialog box that appears, click the Query box, and choose My Queries > Active Hosts from the list that appears.
5
Select the Return First Object in List check box.
6
Set the On Null value in the table below.
Null values occur when a query fails to return any objects at all. In this case, you are setting a null value in case the query fails to return any objects of the Host type.
In the table, in the On Null row, in the Value column, click Edit , and choose String Template from the list that appears.
In the Edit - On Null dialog box that appears, in the Value box, type No hosts found, and click Set to close the dialog box.
Ensure that your settings match the following values:
Figure 3. Context input settings
7
Click Set.
Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating