feat(timeline): swimlanes, duration filter, and filter desc to timeline

[kenbailey]

Background

I've used AW for some time and found it very useful. However, the timeline view can be hard to understand when switching windows and tabs quickly throughout the day. For example:

I wanted the ability to separate the timeline into swim lanes based on various event attributes.

New Features

Feature 1: I've added 2 different swimlane options to this PR:

• Categories: swimlane per category color displayed
• Bucket Specific: swinlane specific to bucket type (e.g., app name for currentwindow, domain name for web.tab.current)

Feature 2: I added a filter summary description when the filter is closed.

Feature 3: To reduce the number of swimlanes and confusion in the timeline I also added a filter to only include events that are a minimum duration as well.

Implementation Notes

• The swimlanes are implemented by specifying a subgroup on the vizjs timeline in Timeline.vue.
• A util/swimlane.js file is added to calculate the swimlane/subgroup value.
• The swimlane selection is passed through to the viz-timeline component for filtering the events.

Further Improvement Ideas

Some ideas on where this could still go for improvement:

• It would be nice to have some sort of artificial event added to the left side of the swimlane that shows the entire name (e.g., category or application name).
• Persisting the filter and swimlane settings to the user store, possibly with an optional restore timeline settings option on the Settings page. Possibly add a reset button on the page to reset all the settings/filters if they are saved.
• Sorting the swimlanes consistently: the swimlanes don't appear to be ordered by the subgroup alphabetically. Would like them to consistently be sorted.
• Ability to filter swimlanes where all the time for the given swimlane filter is less than x time (i.e., hide swimlanes that only have a few short entries to reduce the vertical scrolling added due to the swimlanes).
• Add additional support for different types of watchers (I only supported the ones in util/tooltip.js).

@ErikBjare, this is my first PR for the project. If I've missed something obvious, please let me know and I'll try to submit a fix. Thanks for all your time and the other contributors.

[codecov]

Codecov Report

Attention: 15 lines in your changes are missing coverage. Please review.

Comparison is base (845b12f) 25.55% compared to head (fd130e9) 25.32%.
Report is 1 commits behind head on master.

❗ Current head fd130e9 differs from pull request most recent head 7462743. Consider uploading reports for the commit 7462743 to get more accurate results

Files	Patch %	Lines
src/util/swimlane.js	0.00%	9 Missing and 6 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #530      +/-   ##
==========================================
- Coverage   25.55%   25.32%   -0.24%     
==========================================
  Files          27       28       +1     
  Lines        1616     1631      +15     
  Branches      273      279       +6     
==========================================
  Hits          413      413              
- Misses       1177     1186       +9     
- Partials       26       32       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ErikBjare]

Very neat!

Just a couple comments that would improve the typing a bit.

Feel free to simply apply them from the GitHub UI if they look good to you, and you don't expect them to break things :)

Haven't tested it myself locally, will do that right before I merge.

[kenbailey]

@ErikBjare, thanks for the suggestions. I've added them and rebuilt. It all looks good.

[kenbailey]

@ErikBjare, I added some additional adjustments so that the refreshes to the timeline are more predictable you don't lose your location when changing filters.

There may be a better way to pass the updateTimelineWindow than using a separate boolean. If there is a better way of doing it than I did I can rework it if you provide some direction.

This is the last I'm doing on this PR. I hope to add another time format PR, but not sure when I'll be working on this.