Display apollo tracing data in devtools

[slorber]

Hi,

Currently, Apollo tracing data can be displayed on Apollo Engine.

It could be useful to allow developers to view tracing informations directly in this devtools as well, as the setup would be more simple and wouldn't need a proxy.

My usecase is that I can't guarantee that my team will adopt Apollo Engine for different reasons (timing, setup, pricing model, performance impact...) but I certainly want myself to easily be able to get dev insights on the perf of our graph queries.

[acoll]

I can put together a pull request for this. I did something similar with just the graphiql package. I put together a rough gist (the styles are bad).
https://gist.github.com/acoll/a83494430fc3a394504b646622fab422

My thoughts here were to show bars representing the duration and offsets for each resolver as well as showing the actual metric values for duration in milliseconds and the duration percentage of the total query duration.

Here is an example of what it could look like:

What are the maintainers thoughts here?

[slorber]

Hi,

I think it would be better to have the same UI on Apollo Engine and on devtools. Maybe Apollo team could publish their UI lib for that?

If that's complicated or not possible, any good enough UI would still be helpful

[justinanastos]

This is an awesome idea. This is something we're discussing internally but we haven't started work on it yet. There's an open PR right now from the community (#162) but I think it needs some work because, as @cheapsteak pointed out, the UI is hard to navigate.

I'm going to add enhancement label to this and keep it up. Thanks!

[hwillson]

Moved to #376 - thanks!