Foglight 7.1.0 - Web Component Tutorial

The Design Tab

Design tab is available on any non-portal page to properly-authenticated users such as those with the dashboard designer role. The Design tab shows a hierarchical list of all views of a dashboard, definition details, and a context editor that is useful for debugging.

The top pane of the Design tab displays the name of the dashboard currently being viewed, and the names of all its component views. The items in the pane respond to the mouse pointer, As you hover over a name, the component is highlighted. This facilitates finding a component that is contained in another component.

When you select a particular view you can:

In the above image, the Row-Oriented Table contained in the Grid Layout is selected. The portion of the grid that contains the table is highlighted, and Definition tab displays the same information that is found in Configuration > Definitions for that component. There is an Inspect button directly underneath the Definition tab. If it is selected the Definitions area opens, permitting you to edit the component’s properties.

The Layout tab displays layout information for the contained component, if there is any.

The Context tab displays the context keys for the chosen component and shows their current values.

The Web Component Framework

The Foglight® user interface is built using the Web Component Framework (WCF). This same framework is available to you to develop your own specialized views. Existing Foglight views are configurable from the user interface without the need to resort to the full editing resources provided by WCF, but if you decide to build your own specialized dashboards, the Web Component Framework is available for your use.

Core Concepts

There are certain core concepts that you will encounter while using WCF:

Modules

The default WCF definitions (views, queries, renderers, tasks, icons, files, types, and units) in Foglight are organized into the modules and sub-modules seen in the module list pane of the Definitions editor. A module contains a collection of related definitions. If you have the Dashboard Designer role, you can add entities to any of the existing modules. If you have access to the Definitions choice (in the navigation panel under Dashboards > Configuration), you can create entities in their own modules. You can then save these modules by exporting them to a file using fglcmd. Again using fglcmd, you can import modules that have been created on another Foglight® server.

For information on importing and exporting modules, see the Command-Line Reference Guide.