Styling > Customizing Object States > Customizing the Object Representation Based on States

JViews TGO predefined business objects are graphically represented with properties that change according to the states and alarms set to the objects. In general, the primary state information is used to define the representation characteristics of the object base, while secondary states are added as new decorations. This predefined mapping can be modified through cascading style sheets (CSS). See section Introducing Cascading Style Sheets in this documentation for more information on how to create and use CSS files.

You can customize the object representation according to its states and alarms using CSS attribute selectors. An attribute selector is based on the IltObject attribute "objectState" (see ilog.tgo.model.IltObject#ObjectStateAttribute) and is composed of the attribute name and the state name information.

It is recommended that, when you specify a graphic property in an attribute selector, you provide an object selector that sets a default value to the property. This value will be used when the attribute is not defined. In other words, you can customize your objects according to the attribute values, but keep in mind that a consistent graphic representation should also be available when the attribute is not set in a specific object. Observe this policy whenever you create CSS attribute selectors to customize the object graphic representation based on states and alarms.

The following example illustrates this policy in a scenario that creates a graphic representation based on the presence of the state IltMisc.SecState.HighTemperatureWarning:

object."ilog.tgo.model.IltObject"["objectState.Misc.SecState.HighTemperatureWarning"] {
  labelForeground: red;
}
 
object."ilog.tgo.model.IltObject" {
  labelForeground: '';
}

In this scenario, when the state IltMisc.SecState.HighTemperatureWarning is present in the object, the label of the object changes to red. When the state is no longer present, the label color is set to its default value.

The selectors described in the following sections can be used to customize the object graphic representation according to the different state and alarm dictionaries:

OSI

The OSI state dictionary is based on the OSI SMF 10164-2 standard defining the primary state of a telecom object as a combination of three states, as well as a number of secondary states. See The OSI State Dictionary Visuals for more information.

Using cascading style sheets, you can define specific selectors based on OSI primary and secondary states.

The following selector matches all objects that have the OSI primary state Administrative=Locked defined.

object."ilog.tgo.model.IltObject"["objectState.OSI.State.Administrative"=Locked] {
...
}

In CSS selectors, primary states are identified by the attribute name ("objectState") and the primary state information ("OSI.State.Administrative", "OSI.State.Operational", or "OSI.State.Usage").

You can also create selectors which are based on more than one state, as illustrated below:

object."ilog.tgo.model.IltObject"["objectState.OSI.State.Administrative"=Locked]["objectState.OSI.State.Operational"=Enabled] {
...
}

In addition, you can create selectors based on secondary state information. Secondary states are identified by the attribute name ("objectState") and the state information.

In the OSI state dictionary, secondary states are identified by the group to which they belong (for example, Procedural, Availability, Control, Standby and Repair) and by their name.

The following selectors match all objects that contain the state OSI.Procedural.Initializing or OSI.Availability.NotInstalled.

object."ilog.tgo.model.IltObject"["objectState.OSI.Procedural.Initializing"] {
...
}
 
object."ilog.tgo.model.IltObject"["objectState.OSI.Availability.NotInstalled"] {
...
}
How to Change the Object Representation Based on OSI States

The following CSS extract customizes the graphic representation of all telecom business objects according to the value of the OSI Administrative State. This example does not take into account the possible presence of alarms in the objects.

object."ilog.tgo.model.IltObject" {
  foreground: '';
}
object."ilog.tgo.model.IltObject"["objectState.OSI.State.Administrative"=Locked] {  
  foreground: orange;
}
object."ilog.tgo.model.IltObject"["objectState.OSI.State.Administrative"=Unlocked] {
  foreground: green;
}
object."ilog.tgo.model.IltObject"["objectState.OSI.State.Administrative"=ShuttingDown] {
  foreground: red;
}

Figure 12.1 illustrates this configuration on network elements:

images/osiStyling.gif

Figure 12.1 OSI State Styling Example

Bellcore

The Bellcore state dictionary defines a primary state and several secondary states, which are used to define the graphic representation of predefined business objects through cascading style sheets. See The Bellcore State Dictionary Visuals for more information.

The following selector matches all objects that have the Bellcore primary state EnabledActive defined.

object."ilog.tgo.model.IltObject"["objectState.Bellcore.State"=EnabledActive] {
...
}

You can also use secondary states in your attribute selectors. In CSS selectors, secondary states are identified by the attribute name ("objectState") and the secondary state information (Blocked, Combined, and so on). See The Bellcore State Dictionary Visuals for a complete list of available secondary states.

The following selectors match all objects that contain the secondary state Blocked or Combined:

object."ilog.tgo.model.IltObject"["objectState.Bellcore.SecState.Blocked"] {
...
}
 
object."ilog.tgo.model.IltObject"["objectState.Bellcore.SecState.Combined"] {
...
}
How to Change the Object Representation Based on Bellcore States

The following CSS extract customizes the graphic representation of all telecom business objects according to the value of the Bellcore Primary State. This example does not take into account the possible presence of alarms in the objects.

object."ilog.tgo.model.IltObject" {
  foreground: '';
}
object."ilog.tgo.model.IltObject"["objectState.Bellcore.State"=DisabledIdle] {
  foreground: lightGray;
}
object."ilog.tgo.model.IltObject"["objectState.Bellcore.State"=EnabledIdle] {  
  foreground: green;
}
object."ilog.tgo.model.IltObject"["objectState.Bellcore.State"=EnabledActive] {
  foreground: yellow;
}

Figure 12.2 illustrates this configuration on network elements:

images/bellcoreStyling.gif

Figure 12.2 Bellcore State Styling Example

SNMP

The SNMP state dictionary defines a primary state and several secondary states, which are used to define the graphic representation of predefined business objects through cascading style sheets. See The SNMP State Dictionary Visuals for more information.

The following selector matches all objects that have the SNMP primary state Up defined:

object."ilog.tgo.model.IltObject"["objectState.SNMP.State"=Up] {
...
}

In CSS selectors, primary states are identified by the attribute name ("objectState") and the primary state information ("SNMP.State").

You can also use secondary states in the attribute selectors. Secondary states are identified by the attribute name ("objectState") and the secondary state information. This information is based on the State Dictionary (SNMP) and the group to which the state belongs within this dictionary (Interface, IP, SNMP, EGP, TCP or UDP), as well as on the state name. See The SNMP State Dictionary Visuals for a complete list of available secondary states.

The following selector matches all objects that contain the secondary state Interface.InErrors:

object."ilog.tgo.model.IltObject"["objectState.SNMP.Interface.InErrors"] {
...
}

The following selector matches all objects that contain the secondary state IP.InDiscards:

object."ilog.tgo.model.IltObject"["objectState.SNMP.IP.InDiscards"] {
...
}
How to Change the Object Representation Based on SNMP States

The following CSS extract customizes the graphic representation of all telecom business objects according to the value of the SNMP Secondary State IltSNMP.Interface.InErrors. This example changes the foreground color of the object when the value of the secondary state exceeds the given thresholds.

object."ilog.tgo.model.IltObject" {
  foreground: lightGray;
}
object."ilog.tgo.model.IltObject"["objectState.SNMP.Interface.InErrors"] {
  foreground: green;
}
object."ilog.tgo.model.IltObject"["objectState.SNMP.Interface.InErrors">40] {  
  foreground: yellow;
}
object."ilog.tgo.model.IltObject"["objectState.SNMP.Interface.InErrors">70] {
  foreground: red;
}

Figure 12.3 illustrates this configuration on network elements:

images/snmpStyling.gif

Figure 12.3 SNMP State Styling Example

SONET

The SONET state dictionary defines a primary state, as well as protections, which are used to define the graphic representation of predefined business objects through cascading style sheets. See The SONET State Dictionary Visuals for more information.

The following selector matches all objects that have the SONET primary state Active defined:

object."ilog.tgo.model.IltObject"["objectState.SONET.State"=Active] {
...
}

In CSS selectors, primary states are identified by the attribute name ("objectState") and the primary state information ("SONET.State").

You can also use SONET protections in CSS selectors. Protections are identified by the attribute name ("objectState"), the position of the protection ("SONET.FromProtections" or "SONET.ToProtections"), and the protection name as in the following example:

object."ilog.tgo.model.IltLink"["objectState.SONET.FromProtections.Locked"] {
...
}
 
object."ilog.tgo.model.IltLink"["objectState.SONET.ToProtections.Pending"] {
...
}

The SONET state dictionary contains an extension that allows you to define a reverse primary state. This extension is mainly designed for link objects, so that you can define state information for both directions of the link connection.

In CSS selectors, reverse primary states are identified by the attribute name ("objectState") and the primary reverse state information ("SONET.ReverseState") as in the following example:

object."ilog.tgo.model.IltLink"["objectState.SONET.ReverseState"=Active] {
...
}

See The SONET State Dictionary Visuals for a complete list of available states and protections.

How to Change the Object Representation Based on SONET States

The following CSS extract customizes the graphic representation of links according to the value of the SONET Primary State. This example changes the foreground color of the object according to the value of the primary state.

object."ilog.tgo.model.IltAbstractLink" {
  foreground: '';
}
object."ilog.tgo.model.IltAbstractLink"["objectState.SONET.State"=Active] {  
  foreground: green;
}
object."ilog.tgo.model.IltAbstractLink"["objectState.SONET.State"=ActiveProtecting] {
  foreground: orange;
}

Figure 12.4 illustrates this configuration:

images/sonetStyling.gif

Figure 12.4 SONET State Styling Example

Miscellaneous

JViews TGO provides a set of miscellaneous states to complement the OSI, Bellcore, SONET, and SNMP standards. See The Misc State Dictionary Visuals for a complete list of available states.

You can use the secondary states of the Misc State Dictionary to specify cascading style sheet selectors.

Misc states are identified by the attribute name ("objectState"), the state information ("Misc.SecState"), and the state name as in the following example:

object."ilog.tgo.model.IltObject"["objectState.Misc.SecState.DoorAjar"] {
...
}
How to Change the Object Representation Based on Miscellaneous States

The following CSS extract customizes the graphic representation of links according to the presence of the Miscellaneous State: High Temperature Warning.

object."ilog.tgo.model.IltNetworkElement" {
  foreground: '';
}
object."ilog.tgo.model.IltNetworkElement"["objectState.Misc.SecState.HighTemperatureWarning"] {  
  foreground: red;
}

Figure 12.5 illustrates this configuration:

images/miscStyling.gif

Figure 12.5 Miscellaneous State Styling Example

Performance

JViews TGO provides a set of performance states to complement the OSI, Bellcore, SONET, and SNMP standards. See The Performance State Dictionary Visuals for a complete list of available states.

You can use the secondary states of the Performance State Dictionary to specify cascading style sheet selectors.

Performance states are identified by the attribute name ("objectState"), the state information ("Performance.SecState"), and the state name as in the following example:

object."ilog.tgo.model.IltObject"["objectState.Performance.SecState.Output"] {
...
}
How to Change the Object Representation Based on Performance States

The following CSS extract customizes the graphic representation of links according to the value of the Performance Bandwidth State. In this configuration, the width of the link is based on the current value of the state. When the value of the line width is set to a negative value, the link retrieves the default value.

object."ilog.tgo.model.IltAbstractLink" {
  lineWidth: -1;
}
object."ilog.tgo.model.IltAbstractLink"["objectState.Performance.SecState.Bandwidth"] {  
  lineWidth: @|@"objectState.Performance.SecState.Bandwidth"/10;  
}

Figure 12.6 illustrates this configuration:

images/perfStyling.gif

Figure 12.6 Performance State Styling Example

SAN

JViews TGO provides a set of SAN states to complement the OSI, Bellcore, SONET, and SNMP standards. See The SAN State Dictionary Visuals for a complete list of available states.

You can use the secondary states of the SAN State Dictionary to specify cascading style sheet selectors.

SAN states are identified by the attribute name ("objectState"), the state information ("SAN.SecState"), and the state name as in the following example:

object."ilog.tgo.model.IltObject"["objectState.SAN.SecState.Allocated"] {
...
}
How to Change the Object Representation Based on SAN States

The following CSS extract customizes the graphic representation of network elements according to the value of the SAN Available secondary state. In this configuration, the color of the network element is based on the current value of the state. When the value of the foreground color is set to null, the network element retrieves the default configuration.

object."ilog.tgo.model.IltNetworkElement" {
  foreground: '';
}
object."ilog.tgo.model.IltNetworkElement"["objectState.SAN.SecState.Available"] {  
  foreground: green;
}
object."ilog.tgo.model.IltNetworkElement"["objectState.SAN.SecState.Available"<20] {  
  foreground: red;
}
object."ilog.tgo.model.IltNetworkElement"["objectState.SAN.SecState.Available"<50] {  
  foreground: orange;
}

Figure 12.7 illustrates this configuration:

images/sanStyling.gif

Figure 12.7 SAN State Styling Example

Alarm

JViews TGO provides a predefined alarm system, which modifies the graphical representation of telecom objects according to the alarm conditions. The Alarm dictionary can be used to complement the information of OSI, SONET and Bellcore state dictionaries. See Alarm States in the Business Objects and Data Sources documentation for more information.

You can use alarm conditions to customize the graphic representation of your objects through cascading styles sheets.

In CSS selectors, new and acknowledged alarms are identified by the attribute name ("objectState"), the type of alarm (raw or impact), the alarm severity, and the information indicating whether it is a new or an acknowledged alarm.

The following selector matches all objects that have new critical alarms:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Raw.Critical.New"] {
...
}

The following selector matches all objects that have critical acknowledged alarms:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Raw.Critical.Acknowledged" {
...
}

You can also customize the representation of objects based on impact alarms. For example:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Impact.CriticalHigh.New" {
...
}
How to Change the Object Representation Based on Alarms

The following CSS extract customizes the graphic representation of business objects according to the value of alarms set in the objects. In this configuration, the alarm balloon decoration is only displayed if there are new critical alarms.

object."ilog.tgo.model.IltObject" {
  alarmBalloonVisible: false;
}
object."ilog.tgo.model.IltObject"["objectState.Alarm.Raw.Critical.New"] {  
  alarmBalloonVisible: true;
}
object."ilog.tgo.model.IltObject"["objectState.Alarm.Impact.CriticalLow.New"] {  
  alarmBalloonVisible: true;
}
object."ilog.tgo.model.IltObject"["objectState.Alarm.Impact.CriticalHigh.New"] {  
  alarmBalloonVisible: true;
}

Figure 12.8 illustrates this configuration:

images/alarmStyling.gif

Figure 12.8 Alarm State Styling Example

Trap

JViews TGO provides a predefined trap system, which modifies the graphical representation of telecom objects according to the traps present in the objects. The Trap dictionary can be used to complement the information of the SNMP state dictionary. See Trap States in the Business Objects and Data Sources documentation for more information.

You can use trap conditions to customize the graphic representation of your objects through cascading styles sheets.

In CSS selectors, new and acknowledged traps are identified by the attribute name ("objectState"), the trap type, and the information indicating whether it is a new or an acknowledged trap.

The following selector matches all objects that have new link failure traps:

object."ilog.tgo.model.IltObject"["objectState.Trap.LinkFailure.New"] {
...
}

The following selector matches all objects that have acknowledged link failure traps:

object."ilog.tgo.model.IltObject"["objectState.Trap.LinkFailure.Acknowledged" {
...
}
How to Change the Object Representation Based on Traps

The following CSS extract customizes the graphic representation of business objects according to the value of traps set in the object. In this configuration, the alarm balloon decoration is hidden for all business objects that use the SNMP object state, except those that have new traps of type LinkFailure.

object."ilog.tgo.model.IltObject"["objectState.SNMP.State"] {
  alarmBalloonVisible: false;
}
object."ilog.tgo.model.IltObject"["objectState.Trap.LinkFailure.New"] {  
  alarmBalloonVisible: true;
}

Figure 12.9 illustrates this configuration:

images/trapStyling.gif

Figure 12.9 Trap State Styling Example