[APM] Service overview: MVP interactive timeline component to contain event annotations and metric aggregation visualization

[formgeist]

Related to #300

Summary

As part of the MVP feature of the new Service overview page, we're exploring a new interactive timeline component that will contain timestamped events such as annotations (alerts, anomalies, and deployments) alongside an aggregated metric visualization including a comparison to a previous period.

User stories

From #300

• As App Ops, I need to have visibility into the timeline of anomalies, alerts, and change events correlated to the service KPIs to better identify and isolate issues.

MVP Requirements

For a first iteration, the following requirements are stated to provide a simple yet effective implementation that will resolve the major incentives for implementing this in the first version of the Service overview. As prioritized;

1. Visualize event information; annotations of anomalies, alerts, and deployments.
2. Visualize aggregate metric e.g. latency for a given historic period.
3. Visualize a comparative period of time for the aggregated metric.
4. Allow user to change the aggregated time range
5. Allow user to change the comparative time range

Initial ideas and mocks

[elasticmachine]

Pinging @elastic/observability-design (design)

[tbragin]

Note that the Security app has a "Timeline" feature that is quite different from how we use that word in this context. I wonder if it will be confusing for anyone using Security and Observability together. I am actually not sure what we mean by timeline -- isn't all of our stuff time-series?

[formgeist]

@tbragin I can definitely see that we need to be careful of naming here. I've tried to use timeline in the most general sense (we're displaying a timeline of events). The current user-facing title is History, which is also used in the Metrics UI implementation (elastic/kibana#73962). I'm happy to discuss any naming changes because I'm struggling with coming up with a good name.

[tbragin]

Instead of saying History or Timeline, can we refer to the data we display? What is actually shown in the blue line? It's not clear to me.

[eyalkoren]

Looks incredible!
How about also allow user to chose the aggregated metric from a predefined set of options?

[formgeist]

Instead of saying History or Timeline, can we refer to the data we display? What is actually shown in the blue line? It's not clear to me.

Valid point - it is displaying latency average, but I understand not necessarily naming the component but specifically the data as we do with the other panels on the page.

How about also allow user to chose the aggregated metric from a predefined set of options?

We imagine to offer different sets of metrics, but for the MVP we want to use latency as your reference metric for the events on the "timeline". The idea is not to compete with the visualizations below but to give a trend so you can quickly inspect when there might be areas of interest, e.g. alerts or anomalies.

[formgeist]

After much consideration, we've chosen to not include a History component in the first iteration of the Service overview. We're already providing a number of time-series visualizations in the view and in order to not replicate metrics (Latency) with two separate time ranges, we've decided to combine the existing Latency visualization with the events (anomalies, alerts and deployments) displayed as annotations. The concept of showing the events in a single element resonated well with the users we've presented it to, but we received almost consistent feedback that the separate time range concept was too difficult to grok.

So now the latency visualization looks like this and follows the time range selection in the global date picker.

Closing this issue as we'll not focus on building a History component to the time being.