Tutorial

86 vFoglight
Web Component Tutorial
Using a List as a Chooser
One purpose of this tutorial is to help you investigate the layout properties of the Grid
component. Once more, we’ll choose the familiar example of a host. Rather than
limiting you to a single host, we’ll use a Drop-Down List to let you pick any host in
your monitored system. We could have built a top-level dashboard that listed all hosts,
as we did in Tutorial 1, and then configured a drill down page as a grid displaying host
information. This tutorial 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.
When a host is selected in the drop-down list, the page is reloaded and the context is
now that of the chosen host. This is a simple but effective way to use one page to look at
the properties of a number of different hosts.
Choosing the Views
Because we are interested in Grid properties, we do not need to take the time to build all
the views that will be placed in the cells of the Grid. Instead, we will choose pre-built
views and investigate what shape they take when they are added to the cells in the Grid.
The views we’ll choose are:
•A Row-Oriented Table for choosing hosts. We will build this one.
• Agents Running On A Given Host from the System module Hosts > Host
Analysis.
• CPU Memory Utilization Chart T3 from the module containing the tutorial views.
• Alarm List with Filter from the System module Alarms.
• [chart] Disk I/O Utilization from the System module Host > Host.
For the Customizer, we’ll choose Host Browser from the System module Hosts > Host
and insert it as the Customizer for this page.
Building the Dashboard
We begin by constructing the Grid component’s shell and then we will lay out the
contained views. After all the views have been added, you can experiment with various
layout settings to see how they affect the grid’s appearance.