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

Adding the views to the dashboard

As in Tutorial 2, the first step here is to give the dashboard a title.

To define the dashboard’s title:
1
Open the Configuration tab.
2
In the Title row, in the Value column, click Edit , and choose Set to Binding > String Template from the list that appears.
3
In the Edit - Title dialog box that appears, in the Value box, type Host: {0} -- State {1}.
Two parameters appear in the table below: Parameter {0} and Parameter {1}.
4
For each of these parameters, in the Value column, click Edit , and choose Context from the list that appears.
5
In the dialog box that appears, choose the following values:
Parameter {0}:
•
Input Key: host (Host)
•
Path: Name - String
Parameter {1}:
•
Input Key: host (Host)
•
Path: Aggregate State - Integer
 
* 
IMPORTANT: Recall that aggregateState is an integer, but based on its type it has a default renderer that shows it as an icon that reflects the severity of the state.
6
Click Set to close the dialog box, and click Save in the view editor to save your changes so far.

Adding the views

You need to populate the grid with some existing views. First, we create a host chooser by placing a Drop-Down List in the dashboard.

To modify the Drop-Down List for this tutorial:
1
Replicate the steps you performed to create Host Chooser DDL T3 in Tutorial 4 (see Configuring a Drop-Down List ), but this time name it Host Chooser DDL T4. Do not use the flow settings from Tutorial 4.
2
With the Host Chooser DDL T4 open for editing, open the Flow tab.
3
Click the Selection row, and in the Edit - Selection dialog box that appears, clear the Leave unspecified check box.
The Edit - Selection dialog box refreshes, showing additional settings.
4
In the Edit - Selection dialog box, click the Flow type box, and choose Update from the list that appears.
5
In the Selected Item box, type host.
This flow action updates the page and passes the selected host as a context input, so that data associated with that host appears in the view.
6
Click Save to close the Edit - Selection dialog box. In the view editor, click Save to save your changes to the Host Chooser DDL T4 view.
To add the Drop-Down List to the dashboard:
1
Open the Hosts T4 view for editing, and open the Layout tab.
2
Click Add.
3
In the Add View dialog box that appears, select Select existing view, and click Next.
4
Ensure that the purpose and validity check boxes are selected.
5
In the refreshed Add View dialog box, in the View area, choose My Views > Host Chooser DDL T4, and click Next.
 
* 
TIP: If you do not have this component in your current module, deep copy it from the Tutorial 4 module, and then add it to the layout.
6
Set both Width and Height to Automatic.
7
Set both Row and Column to 0.
8
Select the Show Title and Show Border check boxes.
 
* 
TIP: Checking Show Title is sufficient. The border shows when Show Title is selected.
9
Click Finish to complete the layout of the Drop-Down List.
To add the CPU memory utilization chart:
1
In a similar fashion, add the CPU Memory Utilization Chart T3 view to this dashboard.
 
* 
TIP: This chart appears listed under My Views. In case you do not see it there, ensure the chart is Public to see it as a layout choice.
2
Use the following values to configure the layout settings for this view.
Figure 4. View layout settings
To add an Alarm List with Filter:
•
Use the same procedure to add the Alarm Table for Host T3 view from My Definitions using the following values to configure the layout settings for this view.
 
* 
TIP: This list appears listed under My Views. In case you do not see it there, ensure the list is Public to see it as a layout choice.
Figure 5. View layout settings

The last component to be added is another chart. Rather than building the chart from scratch, copy an existing chart and place the copy in My Definitions.

To add a disk I/O utilization chart:
1
By now, you should have a deep copy of the [chart] Disk I/O Utilization view from Hosts > Host. If you do not, save the grid, make a copy of the chart, and then resume editing the grid.
 
* 
TIP: See Before building the dashboard for instructions on how to deep copy a view.
2
Add the [chart] Disk I/O Utilization view from My Definitions using the following values to configure the layout settings for this view.
Figure 6. View layout settings
3
Click Save in the view editor to save your changes to the Hosts T4 dashboard.
The Grid is ready for testing.
On the navigation panel, under Dashboards, choose My Dashboards > Hosts T4.
The Hosts T4 dashboard appears in the display area.
Figure 7. Viewing the newly created dashboard
As a general rule, views in the same grid should have consistent settings. To achieve consistency, you can experiment by changing the settings on one or both components. For more information, see Additional activities.

Adding a customizer

To add a customizer to the page:
1
Open the Host T4 view for editing.
2
Open the Configuration tab.
3
On the Configuration tab, select the Show Advanced Properties check box.
4
Locate and expand the Customizer node.
5
In its View sub-node, in the Value column, click Edit .
6
In the Edit - View dialog box that appears, choose Hosts > Host Browser and click Save.
7
In the Icon row, in the Value column, click Edit and choose None (Default) from the list that appears.
8
In the Label row, in the Value column, click Edit .
9
In the Edit - Label dialog box that appears, in the String value box, type Customizer Test, and then click Set.
10
Click Save in the view editor to save your changes to the Hosts T4 dashboard.
When you open the Hosts T4 dashboard, the customizer link appears on the action panel as the first item in the Actions group.

Summary

As shown in the preceding figure, there is quite a bit of unused space on the Hosts T4 dashboard. One way of addressing the vertical height problem is to change the order of the components by placing both charts together on the same row below the table

Another solution is possible. A Columns Layout component can be chosen instead of a Grid Layout. In a Columns Layout, a cell’s dimension is independent of its neighbor on either side. Thus, each cell in a column can have the vertical height that it needs without causing spacing problems in adjacent columns.

In other cases, a Rows Layout component may be appropriate. In this component, the width of a cell is not tied to the one above or below

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating