A filter printing a colored icon by a given value.
.png?sv=2022-11-02&spr=https&st=2025-05-16T17%3A21%3A57Z&se=2025-05-16T17%3A32%3A57Z&sr=c&sp=r&sig=QqZAyTwFSDTLcjRI7KsTUUwY60KDlOdPfapC6MhqdIc%3D)
How it works
This filter and its variants can be applied to metrics and properties template elements.
The string case is ignored (e.g. "Critical" -> "CRITICAL").
In case of null or empty values no icon is printed.
In case the value has not been registered within the options, the value itself is printed as it is.
Without this filter, the values of metrics/properties are printed as they are according to the underlying value type, for instance:
Filter Variants
The set of predefined filter variants that can be used to format values.
Severity Icon | Prints out an icon according to the a severity string (eg. WARNING, FAILURE). Name: severityIcon Input Types: INTEGER, FLOAT, NUMBER, STRING Output Type: HTML |
Threshold Icon | Prints out a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). Name: thresholdIcon Input Types: INTEGER, FLOAT, NUMBER, STRING Output Type: HTML |
Threshold Icon with Value | Prints out the value with a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). Name: thresholdIcon2 Input Types: INTEGER, FLOAT, NUMBER, STRING Output Type: HTML |
Custom Variants
New variants can be defined through the following configuration options.
Option | Description | Sample Value |
|---|---|---|
iconStyle | The style to apply to the printed icon. | font-size:20px;text-align:center |
fallback | The fallback icon in case of unrecognized value. | icon='fas fa-exclamation-triangle' |
showValue | The flag indicating whether to display the value after the icon. | true |
thresholds | The optional array of THRESHOLD objects used to convert a numeric value to a specific severity. | 'thresholds':[{...},{...}] |
unit | The optional measurement of unit displayed within the icon title. | °C |
<VALUE_KEY> | For each possible value the set of properties used to render the value. | 'fooBar':{...} |
VALUE_KEY
Each can be configured through these properties.
Property | Description | Sample Value |
icon | The Font Awesome icon to be displayed. | fas fa-exclamation-triangle |
color | The icon color. | #f39c12 |
THRESHOLD
The properties of the threshold object to be added in the thresholds array.
Property | Description | Sample Value |
min | The lover exclusive threshold. | 50 |
max | The upper inclusive threshold. | 75 |
severity | The result severity (one of ) | WARNING |
Example of custom filter variants into the Custom Filters component.
// icon by value
exports.severityIcon = ValueToIcon({
"INFORMATIONAL": { "icon": "fas fa-info-circle", "color": "#08b05b" },
"WARNING": { "icon": "fas fa-exclamation-triangle", "color": "#f39c12" },
"CRITICAL": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
"FAILURE": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
"EMERGENCY": { "icon": "fas fa-exclamation-circle", "color": "#FF0000" }
});
// icon by value with thresholds
exports.thresholdIcon = ValueToIcon({
"thresholds": [
{ "max": 50, "severity": "NORMAL" },
{ "min": 50, "max": 75, "severity": "WARNING" },
{ "min": 75, "severity": "CRITICAL" }],
"NORMAL": { "icon": "fas fa-circle", "color": "#08b05b" },
"WARNING": { "icon": "fas fa-circle", "color": "#f39c12" },
"CRITICAL": { "icon": "fas fa-circle", "color": "#dd4b39" }
});