Visualize related events using correlation ids in the Console

[kschiffer]

Summary

The Console does currently not make any use of the correlation_ids that are provided by events. These can be used to visually group related events.

Why do we need this?

To further improve the UX around inspecting events in the Console by indicating related events

What is already there? What do you see now?

Event details and event data previews.

What is missing? What do you want to see?

Some unobtrusive way(s) to mark related events.

How do you propose to implement this?

@adriansmares had the idea that when clicking on an event to inspect its details, we could also hightlight all events that are related in the event list. One problem with this is that we usually have a whole bunch of correlation ids, e.g.:

[
  "gs:conn:01EKJGANQ9ZFYKF0VP4ZDYPX9Y",
  "gs:up:host:01EKJGANYDV785Z48TNPKE3XF8",
  "gs:uplink:01EKJJ5DT5WNW48ETGKY36DPCJ",
  "ns:downlink:01EKJJ5ETYTZ3A9RCCNQXNFMRA",
  "ns:uplink:01EKJJ5DT7BMQTXKTWG7YV69PY",
  "rpc:/ttn.lorawan.v3.GsNs/HandleUplink:01EKJJ5DT77F0KCAF862F6C0JF"
]

If we would highlight all events that match any of these, we'd likely get mark too many events for the functionality to be useful. Hence, I think we need a way for the user to select which correlations he/she is interested in. I've yet to think about what UX might work here.

How do you propose to test this?

Manually, using storybook and real events in the staging environment.

Can you do this yourself and submit a Pull Request?

Yes.

[adriansmares]

I generally think in tables and buttons so my opinions on UX are to be taken with a gram of salt, but maybe we could have some check boxes for correlation types (that basically select the correlation ID prefixes the user is interested in ?). We could add this as a dropdown menu next to Pause and Clear and users would be able to select which correlation types/prefixes they are interested in.

A UX part that is missing here is how to actually communicate to the user the relation between the name of the checkbox and the prefix itself.

[kschiffer]

Blocked on #3817

[KrishnaIyer]

Replaced by #7314