立即与支持人员聊天
与支持团队交流

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

Adding a Column of Aggregate Alarms to the Table

There are two ways of adding columns. You can work with the Columns property as you did in when first creating the table in Tutorial 2, or you can use Config Wizard.

To add a column of aggregate alarms to the table of hosts using the Config Wizard:
1
On the navigation panel, choose Dashboards > Configuration > Definitions.
2
In the Module List pane, choose My Definitions from the list of modules.
1
In the Module Contents pane, click the drop-down list, select Views.
The group of views defined in this module appears.
2
Choose Monitored Hosts and open the view for editing.
Figure 1. The Definitions view pane fills with the parameters that currently define the table
3
Click Config Wizard.
The first page of the Config Wizard appears in the edit pane, allowing you to choose one or more properties that are available for selection.
4
In the Config Wizard, select the Aggregate State Severity node.
By choosing aggregateStateSeverity (an integer) we are asking for a value that represents the highest level alarm that is raised for this host. Even though this property contains an integer value, it is replaced by an icon by the default renderer associated with this data type. Thus, the icon shows up instead of the numerical value.
5
Click Next.
The Config Wizard refreshes.
6
Accept the default settings by clicking Finish.
7
Optional. Check the result by clicking the Test button.
To add a column of aggregate alarms to the table of hosts by configuring the Columns node:
1
Open the Monitored Hosts view for editing.
2
Open the Configuration tab.
This tab shows the configuration property editor for the Monitored Hosts view. Since none of the properties we want to modify are advanced properties, leave the Show Advanced Properties check box clear. This makes for easier viewing.
3
In the Columns row, expand that node and click .
4
In the Value row that appears, click Edit , and choose Context from the menu that appears.
Figure 2. Value menu entries
You are choosing Context because you want the value that appears to depend on the selected row in the table. Recall from Tutorial 2 that the row supplies a context that identifies a particular host: the one whose name appears in the selected row.
The Edit - Value dialog box appears.
5
In the Edit - Value dialog box, in the Input Key box, click , and choose currentRow (Host) from the list that appears.
6
In the Path box, click , and choose Aggregate State Severity from the list.
By choosing Aggregate State Severity (an integer) we are asking for a value that represents the highest level alarm that has been raised for this host. Even though this value is an integer, it is replaced by an icon by the default renderer associated with this data type. Thus, the icon shows up instead of the numerical value.
7
Click Save both in the dialog box and in the view editor to save the configuration changes.
When you view the All Hosts dashboard, you may notice that the area assigned to the table may not be wide enough to show all of its columns without clipping the right most column. If this happens, edit the All Hosts dashboard by opening the Layout tab, selecting the Monitored Hosts area, and dragging its right edge.

Adding a Dependent Page

This task introduces the notion of context inputs. In this example we use a required context input. Contexts are entities that have a data type, so a context must first be declared, much like a variable in a programming language, by giving it a key, which is the name by which it can be referenced, and a type, which is chosen from a list of available types. You will see in this example how a value is assigned to a named context so that it can be passed to the drilldown page through a flow.

Adding a dependent page that relies on a context supplied by the parent page involves these steps:

•
Create a dependent page.
•
Define a Context Input.
•
Define a flow from the parent page to the dependent page.
•
Set a Flow Context Mapping on the table row that supplies the context to the dependent page.
•
Insert the desired component on the dependent page and specify the same context in the component that needs it.

Adding a Context-Sensitive Dependent Page for the Table of Hosts

In Tutorial 2, we choose a fixed layout container because it has simple properties that are easy to adjust. When, in this tutorial, we need to widen the table it contains, it is a simple matter of dragging the table’s right edge in the Layout tab.

In this example we use a Grid to hold the component we plan to embed. The Grid container permits the placement of designated, already-existing views in cells. A later tutorial illustrates more of the Grid’s properties.

When adding a view, you can specify the row and column in which to place it. The row and column indices are zero-based, so the top-left cell is in column 0 of row 0. We place a single component, a host monitor page, in this cell.

The Host Monitor page is quite complex, but it has the advantage of being one that already exists. You can find it in the Hosts module.

Create a dependent page

To create a dependent page called ‘Host Monitor’:
1
On the navigation panel, choose Dashboards > Configuration > Definitions.
The Definitions area appears.
1
In the Module Contents pane, click the drop-down list, select Views, and click Add .
The Add View dialog box appears.
2
Click the Add button in the Module Definitions pane.
The Add View dialog box appears.
3
In the Add View dialog box, on the Create a Blank View tab, choose Layouts > Grid Layout.
Figure 3. Add View
4
Click OK.
In the Definitions pane, on the General tab, populate the settings using the following values.
Figure 4. General tab
相关文档

The document was helpful.

选择评级

I easily found the information I needed.

选择评级