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

Adding the views to the dashboard

As in Tutorial 2, the first step here is to give the dashboard a 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.
Input Key: host (Host)
Path: Name - String
Input Key: host (Host)
Path: Aggregate State - Integer
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.

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.
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.
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.
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.
9
Click Finish to complete the layout of the Drop-Down List.
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.
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.

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.

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.
3
Click Save in the view editor to save your changes to the Hosts T4 dashboard.
On the navigation panel, under Dashboards, choose My Dashboards > Hosts T4.

Adding a customizer

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.

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