Add anomaly chart component (!16530) · Merge requests · GitLab.org / GitLab

What does this MR do?

This MR defines a new component monitor-anomaly-chart to highlight abnormal data in metrics.

The component:

displays a main metric line, and a "boundary band" which shows the limits of usual behavior of the metric
highlights data in the metric which is considered and "anomaly".
has a similar props interface as TimeSeries.vue component
requires exactly 3 queries/metrics to work properly: to display a metric, lower and upper series.

Enable feature flag

Feature.enable('environment_metrics_additional_panel_types')

Screenshots

Example

Example: Business as usual case 😒

An example of a normal behavior

Example: Oops! case 🤦

A new commit introduced a performance issue, that has caused a spike in memory/disk usage, this allows the team to immediately see the issue:

Example: A savior commit 🚀

A new commit introduced a performance issue, but was quickly fixed by a second commit or revert, which puts things back to normal:

Look and feel

Look and feel uses default colors (blue-500 for line and background, and red-500 for anomaly dots):


default look and feel

Background

The implementation of this chart is heavily inspired by the talk given by @andrewn, which explains that given a metric with a normal distribution, it is possible to create a (visual) boundary of based on the average and standard deviation of said metric over a longer period of time.

https://about.gitlab.com/2019/07/23/anomaly-detection-using-prometheus/

An example chart was created to show the how this can visualized.