Display anomaly deviation boundaries on dashboard
With the addition of alerts for anomaly detection based on exceeding a certain standard deviation from the weekly average, we should also display these boundaries on the charts.
For the MVC of the visualization, we should just show a light color band which represents the standard deviation window we are using for detecting anomalies.
We don't need to color anything exceeding that as red, for now.
Original design
Updated designs
We have discussed moving this chart to the metrics dashboard (NGINX section), as all of the navigation and page layouts have changed since the original designs were created.
We are proposing using a line chart with the anomaly points highlighted in red. Here's how it would look utilizing the current ECharts design patterns:
Also, rather than utilizing the alarm functionality discussed in the original design, we'd make use of our existing alert functionality on the metrics dashboard. In this instance, if events started happening outside of the normal threshold, the user would be emailed.
We should also consider adding the zoom and scroll functionality we have on our other charts to ensure that users can control the time window with a little more granularity.
Technical Implementation
- Possible GitLab UI chart component: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-discrete-scatter-chart--default
- Gitlab On-call Run Books for anomalies https://gitlab.com/gitlab-com/runbooks/blob/master/rules/general-service-alerts.yml#L169