Zipkin: More clear hierarchy in the trace view

Created on 25 Sep 2018 · 1Comment · Source: openzipkin/zipkin

Currently it's very difficult to tell whether 2 spans are siblings, parent - child or from 2 different subtrees. It's doable in small traces, but as you start having hundreds of spans it's hard to visually track the hierarchy.

The service name boxes (not sure how to call them) on the left kind of show the hierarchy, but they don't go very deep and it's still hard to tell whether 2 boxes with ~50 spans between them are at the same depth in the tree or not and whether they're actually related.

In my opinion it'd be useful to have even just something like ascii -- and | visually drawing the tree and connecting the spans.

example:

get /homepage
|-- select * from users
|-- get /is_user_authorized
|    |-- get /session_token
|         |-- select token from session_db;
|         |---- memcache set
|----------- update cookies
|----------- render template

Hopefully with CSS and Javascript you can come up with a better solution than my terrible ascii tree.

cc @zeagord

enhancement ui

Source