Foglight Evolve 9.2 - Web Component Tutorial

Tutorial 2: Creating a Dashboard

The term dashboard in Foglight® denotes a container that includes a pre-set collection of visual data, but does not necessarily require any user interaction to complete the picture. Technically, a dashboard cannot have any required context inputs, although it can have additional context entries. A dashboard presents an overall view of the health of a monitored system through the use of colored buttons, tabular data, various icons representing system alerts, and other graphical components. It supports a drilldown mechanism to show Web pages containing more detailed information about a selected item.

This tutorial shows you how to create a dashboard that shows a table of all the hosts in the monitored system.

User actions that cause the view to update will be covered in a subsequent tutorial.

The first thing you have to decide is whether you want to take the top-down or the bottom-up approach. In the top-down approach, you create the dashboard first, then you populate it with components. In the bottom-up approach, you focus on the information you want to display, which forces you to think about which query or queries you want to build and how you want to present the results, such as in a table, or a chart, or some other component. The dashboard is a container that holds the components, so you define it after knowing what it will contain.

Since this is a tutorial, we will do a bit of both approaches. Our stated goal is to display a hosts table in the dashboard. That is our design for the moment. It is not really a design, just a bit of an outline, but it will serve to guide us as we build the view.

With that much of a goal in mind, we start the bottom-up approach with a query. Next, we use the query to populate the rows of a table and then add the table to an empty dashboard.

IMPORTANT: When returning from a child page, use the breadcrumb trail, not the browser’s back button.

The starting place for working with View Components is to choose, from the left panel, in the Dashboards group, Configuration > Definitions. Make this selection to follow along with the tutorial. (Your user module is labeled My Definitions.)

The Configuration > Definitions page contains all the functionality needed to create new customized views, as well as allowing anyone with proper user permissions to edit existing modules. The Module List pane at the upper left side of the window lists all the modules for which definitions exist.

In this tutorial, we start off by configuring a user query in your user module My Definitions. First, select this module, and then focus your attention on the Module Contents pane. At the top of the pane on the left there is an Add button. You will use this button to add your new query. Above the Add button there is a drop-down list. The first two items are Views and Queries. We will be working with these items in this part of the tutorial.

We are going to start by defining a query, so ensure that the Queries choice is selected. When it is, the Module Definition pane on the right side of the window will be used to configure the query.

Constructing the Tutorial Module

There are two ways to work through this tutorial. The recommended way is to build all the queries and views yourself. That will give you the experience you need to become comfortable with the Web Component development environment. If you are pressed for time, you can read the tutorial and examine the pre-built components.

IMPORTANT: If you are a novice at dashboard development, it is a good idea to create the queries and views yourself by following the instructions in the tutorials. You can create a new user and log on as that user. For example, you can configure this new user as tutorial and make this user a Dashboard Designer. Anything you create as this user will be available under My Definitions in the (Module List) Definitions pane. Any dashboards you create will be available under My Definitions in the navigation pane once you have saved them.The pre-built tutorial files can be made available in the navigation pane under Dashboards without constructing them yourself, but first you or the system administrator needs to assign the Dashboard Developer role to the tutorial modules in the Dashboard Support > Tutorials.

5	In the Edit Module dialog box that appears, on the right of Relevant Role(s), click .

Configuring a Query

Web Component Reference queries are similar to SQL queries and perform a similar function. They are used to select a subset of the information in a data source. Foglight® agents collect a vast amount of data, so Web Component Reference queries are used to access specific items. The Web Component Reference building blocks are used to present this information in a readily understandable way.

Recall that these queries return objects. In most cases you want to use only a portion of the data returned by the query.

The query we want to define extracts from the data source information about all the hosts in our monitored system. To accomplish this task, it is helpful to understand something about Data Source Types, Data Source IDs, Object Types, and paths in the data object graph.

NOTE: There are other parameters that may be used with a query, such as Aggregations, filtering the top N results, Order By, and the familiar where clause. These parameters are not needed for the simple query we are constructing as our first example, so we will not discuss them here. The Web Component Guide contains more information about these topics.

1	In the Module Contents pane, click the drop-down list, select Queries, and click Add .

IMPORTANT: The Comments and Context Help boxes are for describing the purpose of the query to developers and end users. You can supply descriptive text if you want, but they are not needed for the tutorial. However, any real application requires them. These help fields are discussed in the Foglight User Help.

IMPORTANT: You can also see that the query returns a list of objects by expanding a Host object node in the Name column and observe the Value column for those properties that have numerical values associated with them. The Name column allows you to see all the properties of the object, which is useful if you want to determine their names for use later on.

Configuring a Row-Oriented Table

After completing the task in Configuring a Query, you have a query that returns a list of hosts. The next step is to use the query to populate the rows of a table.

1	In the Module Contents pane, click the drop-down list, select Views, and click Add .

NOTE: Do not leave preferred sizes at 0. Set a non-zero number instead, as is done here.

On the right of Purpose, click Edit (). In the dwell that appears, select Pagelet, and leave all the other check boxes cleared. Since the table will be placed on a dashboard, we need to ensure that view has the Pagelet purpose