Add Catapult as an alternative embedded query trace visualizer

[s7tya]

closes #1857

We are currently using Perfetto as our query trace visualizer. However, it would be beneficial to have a visualizer integrated directly into rust-lang.org.

In this PR, I have added the following:

• An endpoint that returns standalone visualizer HTML generated by Catapult's trace2html.
  • It's just using tokio::process::Command to call python3 trace2html (tempfile).json -o (tempfile).html.
• A component that displays the visualizer, which has been added to the compare details page.
• A link to the Catapult's HTML next to the current query tracer.

[Kobzol]

In general, the approach looks good! It would be nice to avoid this Python script invocation though, of course 😅 Maybe we will need to have something like it, but I would like to investigate alternatives first.

Could you try to take a look if this could work? By embedding the HTML page within our frontend, and then passing it data through JavaScript.

[Kobzol]

Another alternatives could be:

• Try to embed https://github.com/firefox-devtools/profiler (which can also compare the traces apparently, which would be super useful.
• Try to embed https://github.com/google/perfetto
• Write our own visualizer 😆

[s7tya]

Could you try to take a look if this could work? By embedding the HTML page within our frontend, and then passing it data through JavaScript.

Alright! I'll give it a try.

Another alternatives could be:

Try to embed https://github.com/firefox-devtools/profiler (which can also compare the traces apparently, which would be super useful.
Try to embed https://github.com/google/perfetto
Write our own visualizer 😆

I've compared some open-source visualizers, so I'll share them on Zulip or somewhere else. The Firefox profiler is definitely a good option.

However, there’s no official way to embed Perfetto. The Perfetto team has declined requests for a "trace2html" alternative due to security concerns, maintenance costs, and other reasons. So, it might be best to avoid that option.

[LalitMaganti]

However, there’s no official way to embed Perfetto. The Perfetto team has declined requests for a "trace2html" alternative due to security concerns, maintenance costs, and other reasons. So, it might be best to avoid that option.

This is not true. Perfetto is embedded by other tools just fine (e.g. Flutter devtools profiler: flutter/devtools#5142, flutter/devtools#4207)

[Kobzol]

Hi, thanks a lot for that link! I suppose that originally, we meant something more granular under the term "embedding", rather than taking a precompiled HTML and putting it inside an iframe. However, if this approach works for others, we could definitely try it!

Just to make sure that I understand it correctly, if you embed Perfetto in an iframe as a precompiled HTML page, the security restrictions that are present on https://ui.perfetto.dev/ disappear, and we could give it any URL to load? (Well, I suppose that if the security restrictions are there, we could still fork it and remove them..).

[LalitMaganti]

rather than taking a precompiled HTML and putting it inside an iframe.

The HTML of the Perfetto UI is very thin if you see our index.html :) Almost everything is JS + communicating via postMessage to control what we are displaying.

Just to make sure that I understand it correctly, if you embed Perfetto in an iframe as a precompiled HTML page, the security restrictions that are present on https://ui.perfetto.dev/ disappear, and we could give it any URL to load?

The security restrictions on URLs come from the Content-Security-Policy, if you control the HTTP headers/top level HTML, you have control over setting that to whatever you want without any forking.

[s7tya]

I think #1967 is much better way so I'll close this