Filter field

filter filterfield

Introduction

With the filter component, lists and views can be filtered.

Filter example

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.

Key-value filters

Applied filters can be displayed as key:value pairs.

Key-value filter

Free text filters

Free text can be used in filters, the typed text will be suggested on top, focused and selected on enter key.

The applied free text filters are displayed in quotes.

Free value filters

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.

Free text value filter

Styleguide

Filter field styles

Filter style guide field

x: 12px
y: 8px

Filter style guide elements

Filter icon

width: 16px
height: 16px
icon-color: $gray-500

Filter watermark

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-500

Filter field

Input-field

Key-value filter styles

Filter style guide key-value

x: 24px
y: 8px

Filter style guide key-value elements

Key

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Value

font-family: Bernina Sans Regular
font-size: 12px
color: $turquoise-600

Filter bubble

height: 24px
width: depends on text length
border: 1px solid $gray-300 //inside
border-radius: 3px
background-color: $gray-130

Icon

height: 16px
width: 16px
vertical-align: center
icon-color: $turquoise-600

Hover state

Hover on bubble #### Hover on bubble or text

font-color key: $gray-600
font-color value: $turquoise-700
background-color: $gray-200

Hover on icon #### Hover on 'x' icon

icon-color: $turquoise-700
background-color: $gray-200

Disabled state

Filter disabled state

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).

Filter abbreviation

Behavior

Adding filters

On focus of the filter field the dropdown panel expands and reveals valid items.

Adding a filter

The suggested items can be redefined by typing.

Refine filter results

Edit filters

A 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.

Edit filters

Clear filters

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 filters

The 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.

Filter for custom metric bigger than

Styling of custom metric filter

The styling for the tabs is the same as the chart tabs.

Styling of custom metric filters

Handling operators

By default, all filter terms are handled as AND operations. However, the filter results can use other operators like OR, NOT, (, ), * ...

All used operators are highlighted as soon as they are active and can be edited by selecting them.

Operators in filter

x: 8px

Operator

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.

Multiselection of filter values

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.

Operators hint

The filter fields syntax is validated, please consider the input field validation in the validation guidelines for details.

Syntax validation in filter

Invalid function

font-family: BerninaSans Regular
font-size: 14px
color: $red-500