[Metrics UI] Inventory view timeline

[jasonrhodes]

In preparation for viewing alerting and ML events over time in the inventory view, this ticket adds a timeline UI element to the bottom of that view.

Acceptance Criteria:

• Timeline view added to bottom of the view fixed to the bottom edge of the screen (waffle map will resize and become scrollable if necessary)
  • Collapsed by default, can be expanded and collapsed
• Saved view picker moved to top left corner under filters
• User cannot choose a time range or bucket span, these values will be pre-decided based on metricset.period
• Single line appears, charting the selected metric's overall average over this time range
• Clicking on the timeline changes the point in time value for the waffle map and readjusts the timeline so that the selected point in time is on the right edge
• If possible: Anomaly events appear on the timeline as red vertical bars

Not in scope for this ticket:

• Editable time range and bucket span (maybe we never need this?)
• User can select a node in the waffle map which will cause that node's metric values to appear in the graph below alongside the overall average (this causes the node above to display a "selected" state, represented by a black outline in the mockup)
• Alerting events in timeline
• Anomaly/alert states represented in the "waffle map" view (colored circles/squares)

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[jasonrhodes]

@hbharding @sorantis can you take a look at this today/before Monday meeting and make sure it looks right to get started on this?

[jasonrhodes]

Also: are we calling this a timeline view? I see "Timeline" has been removed from the latest mockup and it says "Hide history" ... do we have a decision on what we want to call it?

[hbharding]

re: "Timeline". Originally it said "Histogram", but I think @sorantis suggested Timeline, which sounds more descriptive. I realized afterwards that SIEM has a feature called Timeline, which might be a good reason to consider a different name. So I put "History" to start a discussion. It's been mentioned that this feature could be applicable to other Observability apps. Happy to go with whatever the team decides.

[hbharding]

I updated screenshot and removed what once said "Chart options". It was leftover design from an old idea. I was considering putting "time range" and "bucket span" inside a popover menu, as well as any other possible options. For instance, maybe the user wants to view a barchart instead of line, or change the colors in the chart, etc. Not necessary at the moment, but maybe something we do in the future if the bottom area becomes crowded with lots of options.

Re: "time range" and "bucket span" - they serve 2 purposes.

1. They provide important context about what's being shown in the chart (a good reason not to hide them in a popover)
2. They allow the user to choose how far back in time they want to look, and at what detail (bucket span). Larger lookback periods make it easier to navigate back in time and to find areas of interest.

I realize it might be problematic to load a years worth of data with 1 minute bucket intervals, so we likely need to limit bucket size based on the lookback period. I think we should discuss what the default resolution and lookback period should be, and what options we want to make available. i.e. Past day, Past week, etc. Also, perhaps we don't want to provide this as an option for our initial release if we think our default is good enough.

What exactly happens when these options change? Does that change the waffle map view above as well as the graphs in the timeline section?

These options only affect the graph in the timeline section. The user does not see these options when the timeline is closed.

[jasonrhodes]

@hbharding I've updated the AC based on conversations over the past few days. Can we have an updated mockup for the MVP version outlined in the current AC?

[Zacqary]

@hbharding I just want to confirm we're changing Last {duration} of data for the selected time to just Last {duration} of data in this new design?

[Zacqary]

User cannot choose a time range or bucket span, these values will be pre-decided based on metricset.period

This gives me the bucket size but I'm not sure how to get the time range from this? Should a 1 minute metricset.period mean 1 hour of history data, or 24 hours? Should a 24-hour period mean 1 week or 1 month? I'll implement this with some assumptions but I'll need guidance on what time ranges to actually use.

[Zacqary]

Single line appears, charting the selected metric's overall average over this time range

I've implemented it to chart the overall average across the currently displayed nodes. Is this expected behavior, or do we want it to chart data for the entire infrastructure?

[sorantis]

If no grouping is applied, then I think the expected behavior is correct - average across currently displayed nodes.
A more interesting case is when the nodes are grouped, especially in the context of the selected node. A few thoughts

• when the nodes are grouped and none is selected, default to average across the displayed nodes.
• when the nodes are grouped and a node is selected, show the average across the group the node is in + show the node's average.

Thoughts?

[hbharding]

I just want to confirm we're changing Last {duration} of data for the selected time to just Last {duration} of data in this new design?

Oversight / mistake on my part. You can keep the text as it exists in the code now.

I've implemented it to chart the overall average across the currently displayed nodes. Is this expected behavior, or do we want it to chart data for the entire infrastructure?

Yes - avg for the currently displayed nodes makes sense. I.e. if 1000 nodes exist, but there is a filter applied so only 10 nodes appear, the calculation should be based on the 10 visible nodes.

User cannot choose a time range or bucket span, these values will be pre-decided based on metricset.period

Good questions here. For simplicity, I think we should default to showing the past 24 hours of data in the timeline, regardless of the node's metricset.period. We'll need to bucket the results so that the chart's resolution is not too high and the page is performant. Can we try 24 hours of data with 5 minute buckets (288 data points) as a starting point? In case the node's metricset.period is greater than 5 minutes, we can use that value as the bucket size in the timeline. In the future, we may add time toggles so users can change the timespan from 24hr | 3 days | 1 week | 1 month | etc.

when the nodes are grouped and a node is selected, show the average across the group the node is in + show the node's average. Thoughts?

Node "selected state" is out of scope for this ticket, but I think something like this could work in the future. If a node is selected inside a group, I might propose 3 curves: 1 for the avg across all groups, 1 for the avg across nodes in the "selected group", and 1 for the avg for the selected node.