Make SpanDetail component simple and use TypeScript

[tacigar]

SpanDetail component displays the details of a particular span. This component has been more complicated than it needed to be. So this PR did the followings

• Make SpanDetail component simple
• Use TypeScript for SpanDetail (it has been written in JavaScript)

Before

After

[jcchavezs]

Thanks @tacigar I think it looks much simpler and clean, however I am concerned the annotations can't be seen in context as timestamp is less meaningful than seeing them over the span duration. Any chance we can get that back?

[tacigar]

@jcchavezs Thank you for your feedback!

I'm currently redeveloping trace graph in this PR (https://github.com/openzipkin/zipkin/pull/3350). In this PR, the trace graph looks like this and annotation is drawn by white line. This may be helpful.. I'm not sure..

[basvanbeek]

Hi @tacigar the "white striped" annotations on the spans is a good idea, however this will not be enough to replace the span bar with annotation items in the SpanDetail view. Especially in large traces it will be difficult to see the annotations in the trace view. I would keep the idea and restyle to fit between the Annotations header and the annotations table. So make it collapsible together with the table if people want a tag/key only view.

[tacigar]

I see...make sense! I'll update the design 🙇‍♂️ Thank you for your feedback! @basvanbeek