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)