Chat now with support
Chat with Support

Foglight 5.9.1 - 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

Define a context input

1
With the Host Monitor view open for editing, open the Context tab.
2
Under Inputs, click Add Input .
A new row appears in the table.
3
In the new row, in the Key column, type host.
4
Leave the Name column unchanged.
You can set a name to be more descriptive than the key. This can be useful when configuring reports that require context inputs to be set. Using a descriptive name may help the developer understand the purpose of the context key.
5
Ensure the Usage column is set to Required.
6
Ensure the List column is set to False.
7
In the Data Type column, type Monitoring:Host.
 
* 
IMPORTANT: By default, the timeRange context key is also passed to the component.
8
Leave the Name column empty. Ignore the warning when saving the component.
Figure 5. Context Inputs
9
Click Save in the top-left corner to save your work so far.
 
* 
IMPORTANT: Ignore the warning when saving the component.

Define a flow

The following steps direct the rows of the table to a view called Host Monitor and pass the required context.

To configure the flow:
1
Open the Monitored Hosts view for editing.
2
Open the Flow tab.
3
In the table left-most column, click Single-row Selection.
This establishes a flow action for every row of the table.
The Edit - Row Selection dialog box opens.
4
In the Edit - Row Selection dialog box, clear the Leave Unspecified check box.
5
Set Flow Type to Next Page.
This sets the flow type to launch a new page when a row of the table is selected.
6
Click the button on the right of the View box, choose Host Monitor.
7
Set View to Host Monitor.
8
Under Context Mappings, in the Selected Row box, type host.
The target page has a required input of host. Here, you are specifying that the selected row pass this key. The Host Monitor view does not show up in the list of available choices unless its required input is satisfied.
9
In the Edit - Single-row Selection dialog box, click Save.
The Edit - Single-row Selection dialog box closes and the Single-row Selection entry appears as a node, containing two sub-nodes: On Missing Inputs and On View Not Found. You can set a fallback view to provide an alternate if the drilldown page is not available.
This component is your container for the Host Monitor view. You will add this and other components to your version of Host Monitor later.
10
Open the Configuration tab and select the Show Advanced Properties check box.
11
Under Selection Configuration, set Allow Reselection to true.
 
* 
IMPORTANT: If you do not set this property to true, the selection action does not happen because it is already selected by default and the drill-down action does not occur.
12
Open the Context tab and under Inputs, observe a newly added host entry.
13
Click Save in the top-left corner to save the changes made to Monitored Hosts.
If you test the page at this point after choosing values for the bindings, you see that by clicking on a row of Monitored Hosts, you drill down to the Host Monitor view. The breadcrumb history trail at the top right side of the page refreshes accordingly, showing All Monitored Hosts > Host Monitor.

Populate the dependent page

To add a view to Host Monitor:
1
With the Host Monitor view open for editing, open its Layout tab.
2
Click Add.
3
In the Add View dialog box that appears, choose Select existing view and click Next.
4
Ensure the Filter By: purpose and validity check boxes are selected.
5
Choose Hosts > Host > [chart] CPU Utilization
6
Expand Hosts > Host and choose [chart] CPU Utilization, and click Next.
We chose an existing page that displays useful data about a host rather than attempting to build such a complex page from scratch. Any page whose purpose is Page and accepts context inputs of timeRange and host can be used. A later tutorial demonstrates how such a page can be constructed.
7
The next page of the Add View dialog box appears. It allows you to set properties for the view.
8
Accept the default setting for the Width and Height properties by selecting these check boxes, along with Show Title and Show Border.
9
Click Finish to close the Add View dialog box.
10
Click Save in the top-left corner to save the changes made to the Host Monitor view.
11
View the result by going to the Dashboards > My Definitions > All Hosts.
12
Click a row of the table to drill down to the Host Monitor view.

The figure shows a sample result. The CPU utilization for the selected host is displayed. Each different row selection in the table launches a view that presents data coming from the selected host. The overall construction of the view is always the same, but the data presented in the view comes from the chosen host.

Figure 6. Newly created page

Summary

In this tutorial you have been shown how to use a context input and a flow to present a drilldown page in which the data depends on the context that was passed to the dependent page.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating