Event timeline

[andyrichardson]

General Todos

• Setup panel + state boilerplate ([WIP] Add timeline events panel #108)
• Optimise position and element calculations

Events

Events demonstrate what is happening on the stream

Todo

• Add events (addition, update, teardown) ([WIP] Add timeline events panel #108)
• Show tooltip on hover (needs design work)

Screenshots

Stream periods

Stream periods demonstrate key durations within a stream (network requests, aliveness, etc)

• Add stream alive periods ([WIP] Add timeline events panel #108)
• Add network periods
• Show tooltip on hover (needs design work)

Screenshots

Tooltips

Tooltips explain what different elements on the timeline are.

Note: Tooltips don't provide operation-specific info

Todo

• Create tooltip component (visual)
• Create tooltip hook (positioning)
• Add tooltips to event elements

Event Panel

Shown when a user clicks on an element in the timeline.

Todo

• Add collapsible heading component (@wgolledge)
• Add Query + Response sections to panel (@wgolledge)
• Hook panel into page

Screenshots

Screenshots

Timeline page

Shows all timelines on the page

Todo

• Show all timelines (@andyrichardson)
• Add ticker for time duration (@andyrichardson)

Screenshots

Additional info