Chat now with support
Chat with Support

Foglight 7.1.0 - Web Component Tutorial

Introducing the Web Component Framework The Web Component Framework Configuring Views and Context Queries Functions Bindings Additional Components

Common Properties in the Configuration Tab

There are a number of common properties for each view: Data Availability, Customizer, Background, Page Options, Portlet Options, Popup Options, Report Options, and Sizing.

See any component in the Reference Pages for a description of the properties available in these nodes.

Sets an optional background color and/or background image for the view.

The properties for a view used as Customizer.

Option that allows asynchronous data retrieval. This is useful if the data displayed in this view can take a long time to load. By using this mechanism, the page can finish drawing and then check back periodically to see if the data is ready to display or not.

Renderers to use if an error occurs when attempting to load the component or if null is returned.

An icon can be associated with the component. It appears if Page Title in Page Options > Page Style Options is set to Descriptive.

Options that apply when a view is a page (a top level view).

Options that apply when a view is used as a popup.

Options that apply when a view is used as a portlet.

Options that apply when a view is associated with some of the report template views.

Options that are set on any view for use by certain layout components, for example, by the Grid, Rows, or Columns layouts). The Horizontal Behavior and Vertical Behavior setting are also typically used by the Perspectives Viewer, Tab Manager, and switchable layouts. These options help ensure that the view is displayed correctly. See Horizontal Behavior and Vertical Behavior, Minimum Height and Minimum Width, and Maximum Height and Maximum Width for more information.

The flow to execute when the title is selected. The component must not be a top level view.

These options tell the layout component whether the view can be resized (is stretchable) or has a fixed size and requires scroll bars if the layout cannot allot it sufficient space. In addition to the Grid, Rows, and Columns layouts, these options are typically used by the Perspectives Viewer, Tab Manager, and switchable layouts[what are switchables?].

The Width and Height Behavior values of the Sizing property can be set to one of the following options:

The Minimum and Maximum values of the Sizing property override the natural size, which is useful for labels.
The Preferred value is not relevant, unless the component (such as a Time Plot Chart) has no natural size; in that case, the specified value is used as the natural size.
The Preferred value is used as the specified size.
The Minimum and Maximum values are not relevant.
The Preferred value is used if the container has no notion of how big it should be (for example, in popups).
The Minimum and Maximum values are used to ensure a component is not squeezed or stretched in a manner that makes unsightly or unusable.

Use the following considerations when setting the Width and Height Alignment values of the Sizing property:

Start, Middle, and End correspond to left, middle and right if applied horizontally, or top, middle and bottom if applied vertically.

The minimum size options are only applicable if the view is stretchable. These options set a limit to how small the layout can make the view when the layout stretches its contents to fit the space available. The combined minimum and fixed sizes of a layout’s children in a particular direction effectively also create a minimum size for the layout.

These options are hints about sizing that are provided by the view to the layout component. They are overridden by the layout if you set a minimum size on the view’s window properties within the layout.

The maximum size options are only applicable if the view is stretchable. Maximum size limits the growth of a view to an upper bound. The view does not stretch beyond this. This is not a hard upper limit on the size of the rows or columns in the view. The view can contain other components permitted to take more space.

A view’s Maximum Height and Maximum Width options are not overridden by the layout. The layout honors these settings. For example, if you create a view and set its maximum width to 100px, provide it with content wider than 100px, and place it in a grid that has layout properties that permit the view to stretch, the view continues to have a maximum width of 100px even if more space is available.

CAUTION: It is possible to select non-metric value when setting a metric. If you do select a non-metric value, no values display in the chart. For example, the Host property CPU Usage is a metric that belongs to a parent, but the Average is not. It is derived from the metric. Both metrics and non-metric data are selected from a dropdown tree. Currently, there is no indication whether or not an item is a metric.

Flow Tab

When you click a link on a page, what displays next depends on a common set of actions called Application Flows. These actions are set in the view editor’s Flow tab.

Flows can be set on parts of the component, such as a table’s rows or individual cells.

The resulting action depends on the current dynamic context. In the case of a row action, the view switches to a new page that shows the details for the object being used to populate the cells of the currently-selected row. These actions are set in views, but the targets may be popups, or other pages, or even other applications. The actions themselves rely on a context to give them information they need.

Configuring Flows for Views

The following sections provided details about how to configure flows for a view.

The flow types are:

Update refreshes the page with the new context. Where the context key is restricted using an internal input, the change is restricted to components that are children and grandchildren of the view marked with the internal context input. If a child page's context is marked as optional, user action that changes this key does not automatically propagate to the parent unless the parent explicitly declares the same key and sets it to Internal.

This action refreshes the context for all the dependent views. For example, if you change the context on view A, then the data in view B is updated, and the data in view C is updated. By default, the context is initialized the first time a page or view is displayed. You may want to re-initialize context when more than two views are dependent on each other. If view A is not set to re-initialize its context, then view B updates, but view C does not change.

There is a Preserve current timestamp option, which if enabled allows an update to the page without changing the timestamp. This can improve response because fewer components need to be re-rendered.

Next Page sets a specific target page. Select the target from a tree of pages. The tree is filtered to only include non-deprecated pages, and dashboards (that have their required context inputs (if any) satisfied by the definition being edited). The purpose of the target page must be Page or Dashboard. This means that the type and the list property what is list-ness?of the inputs must be satisfied. A target page must have its public attribute set unless it is in the same module hierarchy as the page that references it.

The tree of target views is filtered to only include non-deprecated views that have their required context inputs (if any) satisfied by the definition being edited (and their public attributes set unless they are in the same module hierarchy as the referencing page). This means that the type and the list property of the inputs must be satisfied. Also, the list of options is filtered to match views whose purpose includes Pagelet, Summary, Menu and Dialog. A target page must have its public attribute set unless it is in the same module hierarchy as the page that references it.

A Popup has four different behaviors:

Dwell: If the popup is associated with a dwell action then it shows the target view in a transitory read-only window. This disappears when the user clicks the mouse anywhere.
Transient: If the action is not dwell and the selected popup type is “transient” the target view is displayed in a transitory window, but in this case user interactions are allowed. The target view disappears if the users clicks outside of it or if another action is fired.
Dialog: If the action is not a dwell then the target view is created in a popup dialog box which the user can interact with, move about, and dismiss. This new popup view is part of the page and disappears along with the rest of the current page if you traverse to a different page.
Modal Dialog: A modal dialog is like a regular dialog box, except that the rest of the UI is frozen until the modal dialog is dismissed.

When this action is invoked the page reverts to a previous state. There are two separate notions of the meaning of previous:

If the root view causing the firing of the previous action is contained in a popup dialog box, then previous causes the dialog box to pop down.

The Sequence flow type is used when there is a requirement to do more than one type of flow, so it is used to execute a list of reactions sequentially. The order in the list is important and the execution of one reaction affects the next one, including changing the context.

This allows you, for example, to update the current page with a selection from a table (therefore causing the selected row to be remembered), and then go to another page. If you return to the first page, it is the updated page that is displayed. In this case the first reaction in the list should be Update and the second should be Next Page (reversing the order would cause the update to affect the next page, which is not the desired effect).

The Select tagged view reaction is used in Foglight to implement Rule Based Drilldown. Its use is application specific, and is intended for internal development purposes.

A Type Flow is defined in a Type Mapping using the Type mappings choice in the Module List drop-down. You can associate a default UI flow (via a tag) with a specific data type. For example, you can define a default flow for a Foglight Host to be a drill-down to the Host Summary page.

Type Flow links to selected pages when you specify a type of object. The figure shows a typical configuration. In this case, all cases flow to the same view, the Host Summary page. You have the option of marking the popup as temporary or permanent, which is the reason for having two drill downs to the same page. Also, the flow might be based on a menu choice.

Figure 21. Type mappings

To enable this Type Flow in a view, use Select Type Flow when setting up the flow type. For example, a cell selection on the Host column triggers a Type Flow based on the data type of Monitoring:Host, the host that is currently selected. If the preceding Type Flow configuration is in place and the selected item is a Host instance, the system drills down to the Host Summary page.

If Select Type Flow is the flow type, Foglight looks for all Type Mappings available in the system for a match. If an exact match is not available, the search continues up the data type inheritance tree until a match is found; an error is reported if this fails. For example, if a WebLogicServer Type Flow is not defined, the system follows its inheritance tree to look for a match: WebLogicServer > JavaEEAppServer > JavaEECollectionModelInstance > CollectionModelInstance > ModelInstance > TopologyObject. If the search reaches the root without finding a match it reports an error.

The tagged flow mechanism allows more than one flow to be configured for each data type. Using tags you can specify a default dwell, a default temporary popup and a default drill down for each data type.

Open the Flow tab.
Clear the Leave unspecified check box.
Figure 22. Edit Selection
Click Flow Type and select one of the options.
To choose from existing type flows, click Flow type and choose Select type flow from the list.
Specify the type whose flow you want to use. This is the name of the view’s context input key whose data type, matches the type flow.
To use a Next page action to configure the drill down, complete the following steps:
Select the Update node.
To do that, in the right pane, in the Case Value box, type the name of a metric.
Click Apply.
The Edit window refreshes and the Context key box appears below Flow Type:
Click the Browse button to the right of the Context Key box and choose a name from the list that appears.
Click Save.

Choose Value lets you select different actions and targets based on case values. For instance, you might want to have a different reaction depending on which cell of a table the user chooses. You would set a Choose Value flow type on the Cell Selection flow and then you would add cases for the various columns. You choose a name key for the column and associate a flow with it. This key name must be the same one that you assigned to the column ID under Column in the table’s configuration tab. Thus a different reaction can be associated with each column in the table.

Follow the procedure given below to configure a case.

Select the Choose Value action from the Flow type drop-down list.
Select a key from the Context key drop-down list. This is the key that you have configured to have different bindings that are going to be used as case values.
Click Save.
Click , whose tooltip is Click to add a case.
Type a context key in the Case Value text field and specify a Flow type in the drop-down list.
Click on the row of the case.

There is also a Context group box where you can specify any additional context to be passed to the target view. This may be necessary if the target view has a required context that is not already defined in the calling view’s context.

Choose Type is similar to Choose Value, but instead of directing actions based on the value of a context element you can do this by the Type of the object. Often the reason to do this is that you have a generic object and depending on the more specific nature of the run time type you want to perform a different action.

For example, use Choose Type if your type is Host and you want to go to different pages depending on whether the actual object is a WindowsHost or an AIXHost.

Invoke task allows you to invoke a task when an action occurs. For example, you acknowledge an alert or launch a program on your desktop with information from the Foglight® application. The tree of tasks is filtered to only include non-deprecated tasks that have their required context inputs (if any) satisfied by the definition being edited. This means that the type and the list property of the inputs of the task to be invoked must be satisfied.

Instead of flowing to another Foglight view, any Web page can be referenced by specifying its URL.

Figure 25. External URL

External URL lets you set any URL address as the link target. If you set the external URL to the string {url} the system looks in the context for a key URL and uses its value as the URL to go to. This is useful in conjunction with a template allowing you to customize the URL with runtime data from Foglight.

This choice is used by Foglight developers to launch the help associated with a specific help key. This choice is useful for connecting alarm states or in deciding what to do with a particular section of the help.

This choice provides a link to the Create Dashboard or Create Report wizards.

Figure 26. Create View

It is useful if you want to give the user an opportunity to create one of these views via a direct link.

Layout Tab

The Layout tab is used in the Fixed Layout and Grid, and HTML Table Layout containers. The tab contains a layout frame. At the top of the frame is a toolbar with these functions:

Add: Add an existing component to the layout.
Define Customize: Place a link to a view in the General tab of the action panel.
Properties: Show the placement properties dialog box for the selected component.
Inspect: Inspect the chosen component by opening it in the Definitions pane.
Remove: Remove the selected component from the layout.

The Layout frame shows the views that are on the container and their approximate sizes. The guide lines in the background show you how the views would fit in browser windows with different screen resolutions.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating