Creating custom relationship type styles

You can customize the styles and labels for specified relationship types using the Relationship types page accessed through DASH. You can also delete existing, or create new relationship type styles.

Before you begin

To access the Relationship types page, you must have the admin role inasm_admin assigned to you. See the Configuring DASH user roles topic for more information.

About this task

Note: Any resource or relationship properties used in custom relationship styles must be added as required properties to the Agile Service Manager 'Advanced topology settings' (Administration > Advanced topology settings). However, if they do not exist in the Advanced topology settings, you will be prompted to add them when you save your new relationship styles at the end of the following procedure.

You can set a relationship's line color, thickness, and style, as well as the label.

You customize styles in two steps. First, you identify the relationship type to be customized, or create a new one. Then you customize the style elements for the relationship type.

Default relationship style

When you customize relationship styles, you change the following default settings:

Line Color Function:

return '#171717';

Line Width Function:

return '1px';

Line Pattern Function:

return null;

Style restrictions: The line color (strokeWidth) property can have a maximum value of 9px, or it will cause styling problems.; The label (linkLabel) property must return a valid string, which will be displayed alongside the relationship.

See the following external sites for more detailed SVG style definition information:

Line color (stroke): https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke
Line width (stroke-width): https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
Line pattern (stroke-dasharray): https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-dasharray

Accessing properties for styling functions

When defining styles you can access dynamic properties of the relationship or connected resources.

To access the properties of resources, use the asmProperties JavaScript object.

To access the properties of relationships, use the asmSourceProperties or asmTargetProperties JavaScript objects.

Remember: The arrows indicating a relationship point from the source to the target.

To access the highest open severity status from the source or target resource, use the asmSourceProperties._hasStatus or asmTargetProperties._hasStatus JavaScript objects. The following example uses the _hasStatus parameter to modify the relationship label:

if (asmSourceProperties._hasStatus || asmTargetProperties._hasStatus) {
    // object of all ASM's status severities
    let severityRank = {
        clear: 0,
        indeterminate: 1,
        information: 2,
        warning: 3,
        minor: 4,
        major: 5,
        critical: 6
    };
    let sourceSeverityRank = severityRank[asmSourceProperties._hasStatus] || 0;
    let targetSeverityRank = severityRank[asmTargetProperties._hasStatus] || 0;
    let labelString = asmProperties._edgeType;
    // Show highest Status on relationship label
    if(sourceSeverityRank > targetSeverityRank) {
        labelString += ': Status = ' + asmSourceProperties._hasStatus;
    } else {
        labelString += ': Status = ' + asmTargetProperties._hasStatus;
    }
    return labelString;
} else {
    // No status for source or target resources use plain label
    return asmProperties._edgeType;
}

Tip: You can select more than one relationship type and reset them to their default values, or perform a batch edit. You can also apply a filter to reduce the number of types displayed.

Procedure

Access relationship types configuration page

As a user with the inasm_admin role, log into your DASH web application.
Select Administration > Topology configuration, then click Configure on the Relationship types card.
The Relationship types page is displayed, which lists all your existing customized relationship types in table format, also displaying a 'last updated' time stamp, as well as a custom label, custom color, and custom width for the relationship type, if defined. From here, you can delete or edit configurations, either individually or in batches. You can also create a new relationship type.
Tip: To reduce the number of resource types displayed in the table, use the Filter table text field. The resource types displayed are filtered as you enter the search text.
Do one of the following:
- To reload the relationship types, click Refresh (top right). This can be useful if other users are customizing them.
- To delete one or more relationship types, select them and then click Delete relationship settings.
- To reset the default values for one or more relationship types, select them and then click Reset to defaults.
- To create a new relationship type, click New. The New relationship type page is displayed.
- To edit one or more existing relationship types, select them and then click either Edit relationship type or Batch edit relationship types. The Edit relationship type page is displayed, which you edit as you would a new relationship type.

Edit relationship types

If you have selected one or more of the relationship types, or created a new one, the Edit relationship type page is displayed. From here, you customize the label and style to be used when displaying lines for the selected relationship type in a topology view.

Tip: For some configuration options, you can enter text or a number, pick a value from a drop-down list, or pick a color from a palette, which the system then converts to a JavaScript function. Alternatively, you can switch to Advanced mode and define a JavaScript function using the simple script editor. In Advanced mode, you can click Example for more guidance.

Expand the Identification section and define the following elements:
Relationship type

Choose the relationship type that you want to configure from the drop-down list.
Note: Only relationship types that exist in your topology database are listed.

Label

The default value is the relationship type name.

Simple mode: Enter the text to display as the line label.
Advanced mode: Define a JavaScript function as label for the relationship. The following example uses the resource properties:
```
return asmProperties.labelText;
```
Expand the Style section and define the following elements:
Restriction: If you use the advanced JavaScript format to define customized styling, take care to use valid JavaScript and to observe the conventions defined here, as using invalid syntax or formats could prevent topologies from being rendered.
Line color

The default is #8D8D8D (grey).

Simple mode: Enter the line color in hexadecimal format. Alternatively, use the color palette icon to open a color picker, from which you can choose your required color option.
Advanced mode: Define a JavaScript function as line color for the relationship. Example of a JavaScript function to define the color:
```
return 'blue';
```
Line width

The default is 1 pixel.

Simple mode: Choose the line width from the drop-down list.
Advanced mode: Define a JavaScript function to define the line width. The following sample JavaScript function defines the line width for the relationship using the source resource properties:
```
return asmSourceProperties.myProp > 10 ? '9px' : '1.5px';
```
Line pattern

The default is a solid line.

Simple mode: Choose a pattern for the relationship line from the drop-down list.
Advanced mode: Define a JavaScript function to define the line pattern. Example of a JavaScript function to define the line pattern:
```
return '3 4 5';
```
Click Save.

Note: If any of the resource or link properties used have not yet been defined in 'Advanced topology settings', you will be prompted to save them now.

Results

The relationship style and label for the specified relationship type has been customized.