A filter printing a colored icon by a given value.
.png?sv=2026-02-06&spr=https&st=2026-08-07T07%3A07%3A15Z&se=2026-08-07T07%3A23%3A15Z&sr=c&sp=r&sig=rLyWbPkKWh0iGojNeBXQSyBlKSlkfudWs3%2FAIA%2BgKXA%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 severity (one of INFORMATIONAL, WARNING, CRITICAL). 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 |
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 unit that is displayed within the icon title. | °C |
<VALUE_KEY> | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |
VALUE_KEY
Each can be configured through these properties.
Property | Description | Sample Value |
icon | The Font Awesome (5 free) 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 lower exclusive threshold. | 50 |
max | The upper inclusive threshold. | 75 |
severity | The result severity (one of | WARNING |
Example of custom filter variants in 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" }
});
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Severity Icon | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). 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 |
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 unit that is displayed within the icon title. | °C |
<VALUE_KEY> | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |
VALUE_KEY
Each can be configured through these properties.
Property | Description | Sample Value |
icon | The Font Awesome (5 free) 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 lower exclusive threshold. | 50 |
max | The upper inclusive threshold. | 75 |
severity | The result severity (one of | WARNING |
Example of custom filter variants in 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" }
});
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Severity Icon | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). 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 |
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 unit that is displayed within the icon title. | °C |
<VALUE_KEY> | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |
VALUE_KEY
Each can be configured through these properties.
Property | Description | Sample Value |
icon | The Font Awesome (5 free) 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 lower exclusive threshold. | 50 |
max | The upper inclusive threshold. | 75 |
severity | The result severity (one of | WARNING |
Example of custom filter variants in 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" }
});
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Severity Icon | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). 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 |