Foglight 7.1.0 - Web Component Guide

Introducing the Web Component Framework

This Web Component Guide provides configuration instructions, conceptual information, and instructions on how to use the Web Component Framework.

This guide is intended for any user who wants to extend Foglight® using the tools provided by the Web Component Framework to design additional user interface (UI) component

The Web Component Framework (WCF) provides the underlying structure from which you can build browser-based Foglight and Foglight-like user interfaces. WCF is a set of graphic user interface (GUI) controls called components. WCF provides capabilities for interaction and navigation among these components. You can use WCF to build a browser interface for performing specific tasks, such as monitoring services.

The query-based model used by WCF enables you to bind components to data from any source. WCF makes it easy to deploy dashboards and their drilldown views into various application environments. By configuring these views, you can display data in a variety of tabular and graphical formats.

This document provides an introduction to these components and describes the underlying mechanisms that allow them to display data retrieved from Foglight or other sources with the same data structure. The full list of properties for each WCF component is given in the view pages that are accessible from the Help menu on the browser interface.

For a quick introduction to how dashboards are built and populated with sample views, try the Web Component Tutorial.

•

Configuring Views

•

Browser Interface Views

•

The Browser Interface

Configuring Views

Foglight® has a configurable Web-based interface. By performing your own custom configurations, you apply your detailed knowledge of your system to augment or replace the views that Foglight shows by default.

You can arrange or modify the existing components in the browser interface by:

•

Creating a custom dashboard by dragging existing views or data from the action panel to the display area. This is the simplest way of creating a new view.

You can add any view that is designated as a portlet, thus building a custom page. The Data tab on the action panel presents choices from which you can drag metric charts and position them on the page.

In the action panel, you can adjust the width of the views placed on a page by choosing the number of columns.

•

Creating a report.

•

Adding bookmarks.

•

Adding dashboards to your user module (in My Definitions) or to system modules (requires the Cartridge Developer role). This requires more expertise, but it gives you access to the framework, so you can define completely new views.

Browser Interface Views

WCF provides you with the means to customize the browser interface. You can access the browser interface’s component framework and create custom views. You can populate these views with other display components, such as charts and tables, and connect them to data sources. It is the same data that the agents are configured to collect, but organized in a way that best fits a given business model and the information needs particular to that model.

The end result is a monitoring system that organizes data to mirror the business model. Real-time monitoring data is easily viewed and fosters better control of the monitored components’ availability. Custom views help inform application and IT managers about end-user service levels, notify stakeholders when those service levels are violated, and allow problem resolution tasks to be assigned to the appropriate domain experts. Custom views that focus on known trouble spots can help establish processes for quick recovery from system failure.

The Browser Interface

The Foglight® User Guide describes the overall appearance of the browser interface. This document describes the part of the interface used to define, view, and edit elements of WCF. The Definitions dashboard allows you to examine and work with all existing entities in WCF which you can use to build all the views in the browser interface.

You access the Definitions area by clicking Definitions under Dashboards > Configuration in the left navigation panel.

Figure 1. Definitions area on the navigation panel