With the filter component, lists and views can be filtered.
The content affected by the filter is dependent on the filters position. If the filter is placed on top of a view, the filter applies to all components and contents underneath it. All filter terms are connected with the logical AND operator if no other operator is explicitly used.
Applied filters can be displayed as
Free text filters
Free text can be used in filters, the typed text will be suggested on top, focused and selected on
The applied free text filters are displayed in quotes.
Free text in key:value filters
It is valid to filter for key:values where the value contains a specific free text. The free text values are displayed with a
~ in front.
Filter field styles
x: 12px y: 8px
width: 16px height: 16px icon-color: $gray-500
font-family: Bernina Sans Regular font-size: 14px color: $gray-500
Key-value filter styles
x: 24px y: 8px
font-family: Bernina Sans Regular font-size: 12px color: $gray-500
font-family: Bernina Sans Regular font-size: 12px color: $turquoise-600
height: 24px width: depends on text length border: 1px solid $gray-300 //inside border-radius: 3px background-color: $gray-130
height: 16px width: 16px vertical-align: center icon-color: $turquoise-600
#### Hover on bubble or text
font-color key: $gray-600 font-color value: $turquoise-700 background-color: $gray-200
#### Hover on 'x' icon
icon-color: $turquoise-700 background-color: $gray-200
font-color: $gray-300 border: 1px solid $gray-200 //inside icon-color: $gray-300
Abbreviations for long names
By default, filters should not extend 50 characters. Long names can be abbreviated with three dots
.... The full name is visible when clicking the filter (edit mode).
On focus of the filter field the dropdown panel expands and reveals valid items.
The suggested items can be redefined by typing.
key:value filter can be edited by selecting it, all possible values for the key are presented in the dropdown again. The selected value is highlighted.
By triggering the
clear all button, all filters are deleted. This button appears on focus loss of the filter field. Please also check out this behavior in the click dummy
clear all button is a secondary button.
Filter for custom metrics
Some keys ask for custom values, e.g. response time, CPU, failure rate, etc.
Input fields in the dropdown provide the possibility of entering a range.
By leaving the second input field blank, the filter will be set to everything
>= entered value.
Styling of custom metric filter
The styling for the
tabs is the same as the chart tabs.
By default, all filter terms are handled as AND operations. However, the filter results can use other operators like
All used operators are highlighted as soon as they are active and can be edited by selecting them.
font-family: BerninaSans Regular font-size: 14px color: $turquoise-500
Multiselection of filter values
To select multiple values, use the operator
IN, or select several values from the dropdown.
Help and errors
To make users aware of the operators, the options will appear when the filter field is focused and at least one filter is already applied.
The filter fields syntax is validated, please consider the input field validation in the validation guidelines for details.
font-family: BerninaSans Regular font-size: 14px color: $red-500