Add anomaly chart component
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.
Current status in monitor
Currently, inside monitor there is an approach to create a similar data source, information in the following MR:
https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14972/diffs
Mock data
You may apply this diff
to see the chart in our dashboard directly: https://gitlab.com/gitlab-org/gitlab-ce/snippets/1890744
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry for user-facing changes, or community contribution. Check the link for other scenarios. -
Documentation created/updated or follow-up review issue created -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Separation of EE specific content
Performance and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
MR follow up issues and dicussions
This MR is quite large, and it uncovered a few issues and discussions that will be left as follow-up:
- Chart headings are not aligned https://gitlab.com/gitlab-org/gitlab-ce/issues/67102
- Make charts legends customizable gitlab-ui#429
- Monitor Chart customization discussion https://gitlab.com/gitlab-org/gitlab-ce/issues/67099
- Charts-child component architecture discussion gitlab-ui#427 (closed)
- Anomaly charts MVC (backend) https://gitlab.com/gitlab-org/gitlab-ee/issues/3610#note_213044924
Related to #5366 (closed)