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

Changing the name of the Hosts column

To change the name of the hosts column:
1
Open the Monitored Hosts view for editing.
2
On the Configuration tab, click the Show Advanced Properties box.
3
In the expanded list of properties, expand the Column node whose Value property is set to <currentRow>/name, and in its Header row, in the Value column, click Edit.
4
In the list that appears, choose Set to Value > String, and in the Edit - Header dialog box that appears, type Host Name in the String value box.
5
Click Set.
6
Save the changes to the view.
 
* 
TIP: Since you set Show Title on this component in Host Monitor, a default title (the component’s name) appears above the component in the layout. You can set a different title by editing the Title property on the Configuration tab.

Tutorial 4: Adding Views

In Tutorial 2 you created a top level dashboard that contained a table of host names. In Tutorial 3, you created a dependent page that contained a pre-built view. In Tutorial 4, you add views that you create, and learn about four additional components: chart, button, drop-down list, and customizer.

•
Designing the Page
•
Preliminary Setup
•
Defining the Alarms Query
•
Configuring a Table of Alarms
•
Configuring a Chart Component
•
Configuring a Chart Component
•
Configuring a Label with an Action
•
Configuring the Drilldown Page
•
Configuring a Drop-Down List
•
Flowing Monitored Hosts to Host Details T3
•
Adding a Customizer
•
Adding Nested Views
•
Summary
Objectives of Tutorial 4

The objectives of this tutorial are to place components on a drilldown page whose content depends on the particular choice made in the parent page, and also to introduce three new components for you to work with.

The tasks you will complete are:

•
Add a drilldown Grid page that presents information about the chosen host.
This first exercise is similar to the one from Tutorial 3, but in this case you populate the drilldown page with components that you configure rather than simply choosing a pre-built view.
•
Add a Row-Oriented Table of alarms for the chosen host.
The first column of the Row-Oriented Table will show the severity of the alarm and the second column will present an informative message about the alarm.
•
Add a chart component that you build yourself that shows CPU utilization.
The two most common views in any UI design are likely to be tables and charts. You already learned about tables. This exercise introduces you to using a chart as a visualization component.
Charts that display information that depends on the context in which they are launched are an essential UI component.
•
Add a Drop-Down List.
Frequently, a user can look at a page that displays information about one host and then decides to look at another host. This exercise shows you how to place a chooser on the page that allows viewing a different host.
•
Add a Label that provides an active link back to the parent page.
That is what the history trail (breadcrumbs) at the top of the page is for, but since this is a tutorial, you see how to define a flow on a label that brings the user back to the top page. In a more elaborate design, the label can be used to open a page that is not in the breadcrumb trail.
•
Add a Customizer to the page.
This exercise introduces you to another linking mechanism, the Customizer.
•
Add two nested views.
A view that will never be used in any other container should be created as a nested view. This makes it clear to any other developer that the view is not meant to be used elsewhere.
 
* 
NOTE: While investigating Time Range settings is not an objective of this tutorial, ensure that the default timeRange context key is set to its default value for all the components in this exercise: Key: timeRange, Usage: Required, Data Type: Time Range.The timeRange context is automatically set for every view. Do not remove it from the context list unless you are certain that the view and its children do not require it.

Designing the Page

The objectives for Tutorial 4 list the components we are going to use, so all that needs to be done to design the page is to specify its layout. The table below shows how the components will be arranged.

Host Details T3 dependent page for Tutorial 4: a Grid layout with two columns
Above the grid

A Customizer that places itself above and to the left of the View and Help buttons on the title bar.

 
Table 1. Cells in the grid

Row 0, Column 0, Column Span 2:

Memory - Utilization History:

A chart component.

Row 1, Columns 1 and 0, Column Span 2:

Alarms table for <host>:

A Row-Oriented Table listing alarms for the chosen host.

The component will span two columns of the Grid container, similar to this row.

Row 2, Column 0:

Return to Hosts Page T3:
A Label component (with a flow action that returns to the parent page).

Row 2, Column 1:

Host Chooser DDL T3:

A Drop-Down List component (whose flow action is Update, which permits choosing a new host. The current page updates itself with new information based on the chosen host.)

Preliminary Setup

As with Tutorials 2 and 3, it is a good idea to keep the work you did on Tutorial 3 intact so that you can reuse it if necessary. To keep the tutorials separate, create a new user and copy Tutorial 3 to the new workspace. There are two options for copying, Normal and Deep. By performing a deep copy you copy all the dependent pages, as well as all the other definitions. For a discussion of the copy options, see the Web Component User Guide.

To copy the Tutorial 3 module to Tutorial 4:
1
Create a new user (tutorial4, tut0rial), as you did for Tutorials 2 and 3.
2
Log in to Foglight® as tutorial4.
3
On the navigation panel, choose Configuration > Definitions.
4
In the Module List pane, choose Other User Definitions > tutorial3.
 
* 
IMPORTANT: We assume that the state of Tutorial 3 is what it was after the additional activities were completed.
5
In the Module Contents pane, click the drop-down list, and select Views.
6
Select Configuration > Definitions. and in the Module List pane select Other User Definitions > tutorial3.
7
In the list of views, select All Hosts.
The Definitions pane shows the configuration of the All Hosts view.
8
Click Copy and from the menu that appears, choose Deep.
9
In the Copy dialog box that appears, in the Select a target module area, choose My Definitions and click OK.
Since you are logged in as user tutorial4, you now have a separate copy of the module you created in Tutorial 3. You can use this copy to continue your work in Tutorial 4 without affecting the work you did for Tutorial 3.
Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating