Chat now with support
Chat with Support

Foglight Evolve 9.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

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.
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.

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:

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.

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

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.

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.
6
Select Configuration > Definitions. and in the Module List pane select Other User Definitions > tutorial3.
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