Add anomaly chart component
What does this MR do?
This MR defines a new component
monitor-anomaly-chart to highlight abnormal data in metrics.
- 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
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|
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.
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:
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?
- 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
- Anomaly charts MVC (backend) https://gitlab.com/gitlab-org/gitlab-ee/issues/3610#note_213044924
Related to #5366 (closed)