Foglight 5.9.3 - Web Component Tutorial

Additional activities

After completing this tutorial, consider performing the following activities:

Tutorial 5: Using a Grid

This tutorial illustrates some of the more advanced properties of the Grid component. As well, the tutorial outlines how to perform a deep copy of an existing view and how to place a component on the navigation panel.

Before you get started, obtain a deep copy of the [chart] Disk I/O Utilization view. Deep copying gives you your own copy of the component and any of its referenced components, which you can edit any way you want. You need to add this view to the grid, and by copying it first you can make changes to the copied version without affecting the installed component.

Deep copy the [chart] Disk I/O Utilization view from Hosts > Host.

To start off, give the newly copied chart a title and ensure that the legend is enabled.

8	In the Text sub-node, in the Value column, click Edit (), and choose String Template from the list that appears.

10	In the Parameter {0} row that appears in the table below, in the Value column, click Edit (), and choose Context from the list that appears.

IMPORTANT: Only System modules automatically have an associated resource bundle, so localization of the header string is not at issue here. For details on localization and resource bundles, see the Web Component Guide.

2	In the Visible sub-node, in the Value column, click Edit (), and in the Edit - Visible dialog box that appears, ensure the Boolean value check box is selected.

These are the only changes you need to make to the chart after copying it from Hosts > Host.

One purpose of this tutorial is to help you investigate the layout properties of the Grid component. Once more, we choose the familiar example of a host. Rather than limiting you to a single host, we use a Drop-Down List to pick any host in your monitored system. Alternatively, we can build a top-level dashboard that lists all hosts (like in Tutorial 2), and then configure a drill down page as a grid displaying host information. This tutorial, however, shows you how to update a top-level page by making a choice within the page and then having all the other views update themselves.

In this example, selecting a host in the drop-down list reloads the page and uses the selected host to set the context values. This is a simple but effective way to use one page to look at the properties of a number of different hosts.

Because we are interested in Grid properties, we do not need to take the time to build all the views that we want to place in the cells of the Grid component. Instead, we will pre-built views and investigate what shape they take after adding them to the Grid cells.

The views that we will choose are:

For the Customizer, we make use of the Host Browser view from Hosts > Host, inserting it as the Customizer for this page.

Building the Dashboard

We begin by constructing the Grid component’s shell. After that, we lay out the contained views. After adding all of the required views, you can experiment with various layout settings to see how they affect the grid’s appearance.

2	In the Module Contents pane, ensure that Views is selected in the drop-down, and then click Add .

Set a context

Define a Context to instruct the component accept a Host object as context input and supply the component with actual host-related data. You configure this dashboard to permit the choice of a different host and then update itself.

2	On the Context tab, under Inputs, click Add Input to add a new row to the table.

NOTE: This dashboard does not have a required Host input. You will set an initial value in the context in a following step. The host context key is necessary because you use it to supply the host name and state to the dashboard title. By setting a default value, you supply the dashboard with an initial host value. Without it, the view might show errors until a host is selected and an update action is triggered.

b	In the Module Contents pane, click Add .

3	On the Context tab, under Inputs, in the host row, in the Fallback Value column, click Edit , and choose Query from the list that appears.

In the table, in the On Null row, in the Value column, click Edit , and choose String Template from the list that appears.