Foglight 7.1.0 - Web Component Tutorial

Table 12. Common properties
Property	Description
Background	Sets an optional background color and/or background image for the view.
Customizer	The properties for a view used as Customizer.
Data Availability	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.
Error Renderer Null Renderer	Renderers to use if an error occurs when attempting to load the component or if null is returned.
Icon	An icon can be associated with the component. It appears if Page Title in Page Options > Page Style Options is set to Descriptive.
Page Options	Options that apply when a view is a page (a top level view).
Popup Options	Options that apply when a view is used as a popup.
Portlet Options	Options that apply when a view is used as a portlet.
Report Options	Options that apply when a view is associated with some of the report template views.
Sizing	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.
Title Flow	The flow to execute when the title is selected. The component must not be a top level view.

Horizontal Behavior and Vertical Behavior

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:

•

Natural

•

The component is sized to its natural dimensions, based on its data and configuration.

•

Usage examples include labels and natural tables.

•

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.

•

Specified

•

The component's size is the is the size you specify.

•

The size is typically set by a developer, based on specific design considerations.

•

The Preferred value is used as the specified size.

•

The Minimum and Maximum values are not relevant.

•

Stretchable

•

The component can be stretched or compressed to accommodate the size of its parent.

•

Examples include Chart components that are stretchable in both directions.

•

AJAX tables are naturally stretchable vertically.

•

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.

•

Determine how to align a component within its container if there is more space available than needed. This occurs when the available space is greater than the Natural or Specified size, or in the case of Stretchable, the Maximum size.

Minimum Height and Minimum Width

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.

Maximum Height and Maximum Width

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.


	NOTE: When selecting a view as a target for a flow, only entities that have their Public property enabled are shown in modules that do not have a common ancestry with the module of the current definition. Thus, views in the current hierarchy can be set as targets if their Public property is not set, but views in other modules must have their Public property set if they are to be available as targets.

Configuring Flows for Views

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

•

•

•

•

•

•

•

•

•

•

•


	NOTE: For the Next Page, Popup, Select Type Flow, and Select Tagged View flow types, a diagnostic workflow is available via a check box. If you mark a flow as diagnostic and if the time range is connected to “now” (real time), it will automatically remain unchanged so that the data and the data window you are looking at does not shift until you cancel this option by resetting the time range.

Update

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.


	CAUTION: Context keys must be explicitly specified in the update flow action otherwise they will not be passed on. This allows control over which context entries are updated and which are not. This is different than the next page or popup reactions, where any context that is needed is automatically forwarded.


	NOTE: A view whose context is marked as optional cannot be added to a container that has the same input, otherwise if a flow of type Update is triggered in this component, the context is retrieved from its container. The view’s context entry won't replace the one in the container.

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.

Popup

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 view that initiates the reaction is somewhere on a page then the page switches to the previous one in memory. This is synonymous with clicking the previous page in the breadcrumbs trail at the top left of the page.

•

If the view is a top level view (that is, it has not been drilled into or the only breadcrumb is the name of the view you are looking at) it has the same effect as using update on that page with the exception that the context is not updated.


	IMPORTANT: When configuring a Previous flow type, the Update check box is cleared. If it is selected, the context is updated as the previous page is reloaded.

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.

Sequence

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).


	CAUTION: A Task Component that calls the method ActionContext.setResponseData cannot be used in a sequence flow type because sending two different data types in the same response is not supported. The Task components in WCF that call this method are: Download File and Template Generator.

Select Tagged View

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.

Select Type Flow

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.

To define the flow for a view:

Open the Flow tab.

Click one of the actions.

The Edit window opens and displays a set of input fields that allow you to further define the flow.

Clear the Leave unspecified check box.

Figure 22. Edit Selection

Click Flow Type and select one of the options.


	IMPORTANT: The contents of the dialog box depend on the type of flow that is chosen.

If the type is Select type flow, choose one of the tags from the drop down list or type in a tag name of your choice.

To use the type flow to drill down from a context key:

Add a node to the navigation tree.

The settings of this node determine the drill down behavior.

To edit the settings of the node:

Specify the metric referenced by the view. Use the same metric that is used in the chart configuration.

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.


	NOTE: Because Foglight allows for a maximum of one type flow for each Foglight 5.0 data type, specifying the type flow is sufficient.

To apply your changes to the drill down, click OK.

To use a Next page action to configure the drill down, complete the following steps:

Add a node to the navigation tree in the Module Contents pane.

Select the Update node.

Specify the metric that will be passed down to the view. Use the same metric that defines the metric in the chart.

To do that, in the right pane, in the Case Value box, type the name of a metric.

To open another view when the user clicks the area in the chart that shows a metric, click Flow Type and select Next page from the list.

The right pane refreshes and shows the View box under Flow type:

Figure 23. View box displayed

Specify the view that you want to appear when the user clicks the area in the chart. To choose from existing views, click the Browse button to the right of the View box.

Click Apply.

To save your changes, click Save.

The Edit window refreshes and the Context key box appears below Flow Type:

Figure 24. Context key box displayed

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

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.

To set the Choose action:

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.

The context is added to the action in the tree.

To add a case:

Click

, whose tooltip is Click to add a case.

A new row for the case is added under the default row.

Click the new row.

Type a context key in the Case Value text field and specify a Flow type in the drop-down list.

Enter the context key for the case by selecting the field and then entering the key.

Select the flow type and add context entries if needed.

Click OK.

To remove a case

•

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

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

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.

External URL

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

Figure 25. External URL