Health indicator

pattern state healthy

When do things get colored in red?

The color red is used to indicate an unhealthy status of entities and their metrics.

Hint: We differentiate between indicating problems with the color red and throwing notifications.

Why do things get red?

Obviously, because we want to emphasize unhealthy components. That one's easy. However, we use red also because we want to give our users a click path to the root cause: As a user, any time I see something red on the screen I want to be able to click on it, and continue clicking on red, until I find the root cause of the problem.

What is unhealthy?

In order to use the color red correctly, we have to decide when elements are unhealthy and when they are not.

What about yellow and green?

Examples

Entity views

Entity views should indicate unhealthy metrics as well as other unhealthy entities that are connected.

Service

Host

Instances

Problem context

In a problem context, only events related to this problem should be shown in red.

Problem context service

Unhealthy entities that are not related to this problem are not shown.

Problem context comparison

Custom charting

Custom charting

UI components

Tables without unhealthy metric in column

Unhealthy entities in tables are indicated with a vertical red line. Information about the unhealthy metric is shown in a second line. If more than one metric is affected, the message 'Multiple problems' is shown.

Tables

Tables with unhealthy metric in column

Tables

Tables with multiple unhealthy entities

Tables

Tabs

Unhealthy metrics, hidden behind tabs need to be red. (High failure rate of a service - not of a single request)

Tabs Tabs

Other components

Failure rate, JavaScript errors, 5xx errors... can be displayed in red.

Charts

Dashboard tiles should indicate unhealthy components too.

Dashboard tiles

Infographics also show the health status of connected entities.

Infogfx

Examples

Tabs styleguide

Chart styleguide

Table styleguide

Dashboard tile styleguide