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

Miguel Rincon requested to merge 5366-display-anomaly-deviation-boundaries-on-dashboard-ce into master Aug 28, 2019

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.

Screenshots (with mock data)

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

The default shows some anomalous data points, and some parts can be customized:

metric line color
metric line width
opacity of area

default look and feel	customized

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.