Chat now with support
Chat with Support

Foglight Evolve 9.2 - 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 the columns for the row-oriented table

Configuring the columns for the row-oriented table

This component needs a host context as well, so need to define it.

To set the context:
1
Open the Context tab.
2
Under Inputs, click Add Input , and set the columns of the newly added row as follows:
•
Key: hosts
•
Name: unchanged
•
Usage: Required
•
List: True
•
Data Type: Monitoring:Host
3
In the Fallback Value column, click Edit , and choose String from the list that appears.
4
In the Edit - Context Input Entry “title” dialog box that appears, in the String value box, type Utilization Report - Hosts, and then click Set.

Now you need to define the columns for the Load Summary T5 table.

To define the table’s columns:
1
Open the Configuration tab.
We need to set each row. This time the rows are populated from the hosts context.
2
To tell the table that its rows will be populated from a context selection, locate the row called Rows. In the Value column, click Edit , and choose Context from the list that appears.
3
In the Edit - Rows dialog box that appears, click the Input Key box, and choose hosts (List of Hosts) from the list that appears.
4
Leave all of the other values unchanged, and click Save.
The table is now configured to be populated from the hosts context that is defined in the Hosts Summary Report T5 view, but we still have to define which properties of a host appear in the columns. For that, we have to add columns and define their contents.
5
Choose Columns > Column > Value.
Next, we set all of the table’s columns. We organize them into groups later.
6
In the Value column, click Edit , and choose Context from the list that appears.
7
In the Edit - Value dialog box that appears, click the Input Key box, and choose currentRow (Host) from the list that appears.
8
Click the Path box, and choose Name - String from the list that appears.
9
Click Set.
10
On the Configuration tab, select the Show Advanced Properties check box so that you can set the property containing the header name for the newly configured column.
11
Under Columns > Column > Header, in the Value column, click Edit , and choose Context from the list that appears.
12
In the Edit - Header dialog box that appears, in the Value box, type Host Name, and click Set.
 
* 
TIP: By using a Rich Text Template, you can provide localized text for your headers.
13
Under Columns > Column > ID, in the Value column, click Edit .
14
In the Edit - ID dialog box that appears, in the String value box, type Host Name, and click Set.
 
* 
IMPORTANT: Each entry in the columns that you define must have an ID set so that they can be associated with a group.
Add eight more columns in four groups

At this point you are going to add eight more columns in four groups: CPU, Memory, File System, and Network to complete the definition of the table.

To create the groups:
1
On the Configuration tab, expand the Groups node and click to add a new group.
2
Under Groups > Group > Header, set the group header to CPU Utilization.
3
Add three more groups with their Header property set to Memory, File System and Network.
To create more columns:
1
On the Configuration tab, expand the Columns node and click the Add Column () button.
2
Choose Columns > Column > Value.
3
In the Value column, click Edit , and choose Context from the list that appears.
4
In the Edit - Value dialog box that appears, click the Input Key box, and choose currentRow (Host) from the list that appears.
5
Click the Path box, and choose CPUs - Host CPUs > Aggregate State Severity - Alarm Severity from the list that appears.
6
Click Set.
7
Under Columns > Column > ID, in the Value column, click Edit .
8
In the Edit - ID dialog box that appears, in the String value box, type CPU Aggregate State, and click Set.
9
Repeat the previous steps to add seven more columns, with the following ID, Path , and Renderer values. Set the Input Key value for all of these column to currentRow (Host).
 
* 
IMPORTANT: Some of the following settings use renderers. Renderers are selected from the Renderer box.
Column 1:
•
ID: CPU Average Utilization
•
Value > Path: CPUs > Utilization - Metric > Current - Metric Value > Average - Double
•
Value > Renderer: Management Server > System > Number: No Decimals, With Unit
Column 2:
•
ID: Memory Aggregate State
•
Value > Path: Memory - Memory > Aggregate State - Integer
Column 3:
•
ID: Memory Average Utilization
•
Value > Path: Memory - Memory > Utilization - Metric > Current - Metric Value > Average - Double
•
Value > Renderer: Management Server > System > Number: No Decimals, With Unit
Column 4:
•
ID: Disk Aggregate State
•
Value > Path: Storage - Host Storage > Aggregate State - Integer
Column 5:
•
ID: Disk Average Utilization
•
Value > Path: Storage - Host Storage > Disk Utilization - Metric > Current - Metric Value > Average - Double
•
Value > Renderer: Management Server > System > Number: No Decimals, With Unit
Column 6:
•
ID: Network Aggregate State
•
Value > Path: Network - Host Network > Aggregate State - Integer
•
Value > Renderer:
Column 7:
•
ID: Network Average Utilization
•
Value > Path: Network - Host Network > Utilization - Metric > Current - Metric Value > Average - Double
•
Value > Renderer: Management Server > System > Number: No Decimals, With Unit
To add a column to its target group and set the table title and its column order:
1
On the Configuration tab, expand the Groups node, choose the Group node to which you want to add a column, and expand the group’s Column Order node.
2
Create the following column groups:
Group: CPU Utilization
•
Column: CPU Aggregate State
•
Column: CPU Average Utilization
•
Column: CPU User Time
Group: Memory
•
Column: Memory Aggregate State
•
Column: Memory Aggregate Utilization
Group: File System
•
Column: Disk Aggregate State
•
Column: Disk Average Utilization
Group: Network
•
Column: Network Aggregate State
•
Column: Network Average Utilization
To add a a column to a group, first create a group, and add a Column ID node to the group’s Column Order node. For each column that you want to add to the group, create a separate Column ID node, and set its value to the column’s ID value.
3
Set the table title to Utilization Summary - Hosts.
4
In the view editor, click Save.
5
Open the Hosts Summary Report T5 view for editing, and add the newly created Load Summary Table T5 view to the report, as described in Adding a sample view to the report.
6
With the Hosts Summary Report T5 view still open for editing, on the Views tab, select the Load Summary Table T5 view and click Properties.
7
In the Properties dialog box that appears, on the Configuration Override tab, choose Column/Group Order > Column ID, and ensure it is set to Host Name. This causes the Host Name to display first.
8
Save the changes to the Hosts Summary Report T5 view.

Generating the table

Test the work you have done so far by generating a PDF of the table.

To generate the report:
1
Ensure that Load Summary Table T5 is open in the Definitions pane.
2
On the Definitions pane toolbar, click .
3
Provide the input values, and observe the result.
Figure 3. Newly created able
The table contains nine columns. Having that many columns can present a challenge to the layout algorithm, and it is possible you have noticed some issues that need attention. In the Additional activities section you can learn how to adjust the width of a column to improve the table layout.

Adding a Header

You could attempt to design fixed-layout views to use as the header and footer on a single-page report, but in most cases all you require is a simple one-line header and footer. Multi-page reports would present you with even greater challenges.

The Page Decoration component removes most of the effort in creating headers and footers. It has right, center, and left areas where you can add icons and text. Page numbering is easy because the PDF Layout component passes a special context, pageNumber, to views if you assign the Header or Footer function to them.

Creating the header component

To create the Header component:
1
In the Module List pane, ensure that your tutorial module is selected.
2
In the Module Contents pane, click the drop-down list, select Views, and click Add .
The Add View dialog box appears.
3
In the Add View dialog box, ensure that the Create a Blank View tab is selected.
4
On the Create a Blank View tab, choose Reporting > Page Decoration.
5
Click OK.
6
Populate the values on the view’s General tab as follows:
Figure 4. Header component settings
To set the context:
1
Open the Context tab.
2
Under Inputs, click Add Input , and set the columns of the newly added row as follows:
•
Key: title
•
Name: unchanged
•
Usage: Required
•
List: False
•
Data Type: Common:String
To configure the header:
1
Open the Configuration tab.
2
Set the left portion of the header.
a
In the Left Image row, in the Value column, click Edit , and choose Set to Binding > Icon in the list that appears.
b
In the Edit - Left Image dialog box that appears, click the Icon box, choose Management Server > Reporting > Company Logo from the list that appears, and click Set.
Note
For instructions on how to add your company logo to this repository, see the Web Component Guide.
3
Set the center portion of the header.
a
In the Center row, in the Value column, click Edit , and choose Context from the list that appears.
b
In the Edit - Center dialog box that appears, click the Input Key box, choose title (String) from the list that appears, and click Set.
4
Set the right portion of the header.
a
In the Right row, in the Value column, click Edit , and choose Context from the list that appears.
b
In the Edit - Center dialog box that appears, click the Input Key box, and choose timeRange (Time Range) from the list that appears.
c
Click the Renderer box, and in the Select a Renderer dialog box that appears, choose Management Server > Reporting > Absolute Time Range, and then click Save.
d
In the Edit - Right dialog box, click Set.
5
In the view editor, click Save.
Adding the header to the report
To add the Header component to the report:
1
Open the Hosts Summary Report T5 view for editing, and open its Views tab.
2
Click Add icon.
3
In the Select a View to add to the Report dialog box that appears, in the Name column, choose My Views > Header: Icon, Report Title, Time Range T5, and click Save.
4
On the Views tab, in the newly added Header: Icon, Report Title, Time Range T5 row, click the Function column, and choose Header from the list that appears.
5
Select the Header: Icon, Report Title, Time Range T5 row and click Move Up two times to move this view to the top of the container view.
6
In the view editor, click Save.
Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating