HWKAPM-722 : Add timeline directive

[ammendonca]

Timeline directive, including:

• Scrubber (line following mouse and showing timestamp);
• Brush Overview to see whole timeline;
• Drag feature to drag in the main timeline;
• Show events (APM logs) at given timeframe;
• Show TX info on click;
• Zoom to TX span on double-click;
• Collapse / Expand span children;

(had a gif demo, but doesn't seem to be able to attach.. will try later)

[ammendonca]

Sample usage of the directive:

<!-- the actual timeline -->
<div id="timeline-container" timeline nodes="myNodes"></div>
<!-- the overview to brush and zoom in/out -->
<div id="timeline-overview-container" timeline timeline-overview nodes="myNodes"></div>

selectedSpan is the scope variable that will hold the currently selected span to display info about.

[ammendonca]

Demo with improvements

[objectiser]

@ammendonca Great work! Marked as 'do not merge' for now until we sort out the backend.

[ptescher]

Any progress on the backend? This feature would be great!

[objectiser]

@pat2man Sorry for the delay in responding.

Although this UI is great, we have recently made the decision to use the Jaeger project as our OpenTracing core - which already provides its own timeline view. See http://www.hawkular.org/blog/2017/04/19/hawkular-apm-jaeger.html

Therefore we won't be using this timeline view currently - although in the future, potentially if closer integration is required with the OpenShift UI, we may get a chance to use it then.

[ptescher]

@objectiser thanks for the response. Jaeger seems like a solid foundation although the aggregated views of Hawkular APM are really what sold me. Looking forward to see those integrated.