Chat now with support
Chat with Support

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

Configuring Table Columns

In the preceding steps you gave the table a name and you have set its size, but you have not populated the table. In other words, you need to define the columns for the table.

To configure table columns:
 
* 
NOTE: This procedure continues from “Configuring a Row-Oriented Table” on page 36.
1
Open the Configuration tab.
The table designer page appears in the Definitions pane.
2
On the Configuration tab, ensure that the Show Advanced Properties check box is clear. The advanced properties are less likely to be used when constructing a basic version of the component which is what we are about to do in this procedure.
Figure 4. Configuration tab, Show Advanced Properties
3
In the table, locate the Rows row. In the Value column, click Edit , and choose Query from the menu that appears.
The Edit - Rows dialog box appears.
4
In the Edit - Rows dialog box, in the Query box, click drop-down list button, and in the navigation tree that appears, choose My Queries > Active Hosts. This is the query we created in Configuring a Query .
5
Without changing any other values, click Set.
The table is now configured to retrieve its information from a query that returns a list of hosts. But we still have to define which property of a host will appear in a column. For that, we will have to choose the existing column and define its content.
6
In the Property column, expand the Columns node, and then the Column node that appears immediately below.
A Value node appears, along with an empty row with a Click to add button.
7
In the row containing the Value node, in the Value column, click Edit .
Figure 5. Value column, editing
8
From the menu that appears, choose Context.
The Edit - Value dialog box opens.
9
In the Edit - Value dialog box, in the Input Key box, click , and choose currentRow (Host) from the list that appears.
10
In the Path box, click , and choose Name - String from the list that appears.
As each row is rendered at runtime, the context key currentRow contains a pointer to the current object in the list of hosts. Any property of a host object that can be rendered as a string can be selected as a column entry.
11
Click Set.
The Edit - Value dialog box closes.
12
Click Save to save your changes to the view.
Figure 6. Saving changes to the view

At this point you could continue to add columns, thus building a table that presents the data you want to see presented for each host. We leave the table for now and add more columns later.

Building the Dashboard

So far we have a query and a table to present some of the data that the query returns. Now we need to configure a dashboard. This gives us a container in which to place the table and other views that we might want to add later on.

To build the dashboard:
1
In the Module Contents pane, click the drop-down list, select Views, and click Add .
The Add View dialog box appears.
2
In the Add View dialog box, ensure that the Create a Blank View tab is selected.
3
On the Create a Blank View tab, choose Layouts > Fixed Layout.
Figure 7. Choosing a fixed layout
Click OK.
The Definitions pane displays the view editor, which contains all the boxes that can be used to construct a view. The required fields are marked by an exclamation point icon at the right side of the field. In this case, only the Name field is required.
4
In the Definitions pane, on the General tab, in the Name box, type All Hosts.
5
Leave the ID box set to (auto).
6
Ensure that the Public and Deprecated check boxes are clear.
7
Set the Preferred Width and Preferred Height values. You can edit these values later when you have seen the table displayed, so you can choose any values you want. For now, set Preferred Width to 300 and Preferred Height to 150.
 
* 
NOTE: Do not leave preferred sizes at 0. Set a non-zero number instead, as is done here.
8
Leave the Refresh Interval box blank.
9
Leave the Priority box set to None.
10
Set the purpose of this view.
On the right of Purpose, click Edit (). In the dwell that appears, select Dashboard, and leave all the other check boxes cleared. Since this view is a dashboard container, its purpose needs to reflect that to be enable access to it later on.
Click Apply in the dwell to save this change and close the dwell.
11
Leave the Custom Purpose(s), Relevant Role(s) and Allowed Role(s) values unchanged.
12
Complete the Comments and Context Help boxes with any descriptive text, as required.
13
Click Save to save your work so far.
The Definitions pane switches from edit mode to view mode and it presents the work you have done so far.
 
* 
IMPORTANT: Become familiar with the correspondence between the changes you made while in edit mode and the way those changes are presented in the view mode. Subsequent procedures in this tutorial show the contents of the view mode, which you use to make the required changes in edit mode.
Figure 8. Definitions pane in view mode
14
Click Edit to continue modifying the dashboard.

Adding the Table to the Dashboard

By performing the steps in the preceding section you have created a dashboard and you have set its size, but as yet you have not added any components to it. It is just an empty container. First we will give the dashboard a title.

To do that you use the Configuration tab.

To configure the dashboard:
 
* 
NOTE: This procedure continues from Building the Dashboard .
1
Open the Configuration tab.
2
On the Configuration tab, locate the Title row, and in its Value column, click Edit .
3
In the menu that appears, choose Set to Binding > String Template.
The Edit - Title dialog box appears.
4
In the Edit - Title dialog box, in the Value box, type All Monitored Hosts, and click Set.
5
Open the Layout tab.
The layout editor appears in the Definitions pane.
6
On the Layout tab, click Add.
The Add View dialog box appears.
7
In the Add View dialog box, select Select existing view, and click Next.
The Add View dialog box refreshes.
8
In the View area, choose My Views > Monitored Hosts, and click Next.
The Add View dialog box refreshes.
9
Set the position and size of the table, indicate if you want scroll bars, and whether to show a title and a border. Check Show Title and Show Border and leave the other settings at their default values.
10
Click Finish. The Add View dialog box closes.
11
Click Save to save the changes to the view.
12
Observe the dashboard.
On the navigation panel, choose My Definitions > All Hosts.
The All Hosts dashboard appears in the display area. You see that All Monitored Hosts appears in the breadcrumb trail at the upper left of the view, and that the dashboard contains a table titled Monitored Hosts.
Figure 9. Accessing the newly built dashboard

Summary

In this tutorial you have constructed a query, used it to populate the rows of a table, and presented that table in a fixed-layout view component that we are calling a dashboard.

You have viewed the component by navigating to All Hosts in the Dashboards area under My Definitions.

When you build a dashboard page with a real purpose in mind, you want to present some useful information about each host, such as the state of applications running on it, and to see if there are any alarms. You also want to add your newly-constructed page to a place that already exists in the browser interface. Also, you may want to furnish a drilldown page that contains extra information about a particular host that you select from the table. To accomplish that, you need to understand how to use context inputs and flows. These topics are covered in the next tutorial.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating