Improve trace page title with data and unique emoji (fixes #2256)

[nox]

Which problem is this PR solving?

• This solves [Feature]: Make good use of page titles #2256.

Description of the changes

• Trace page titles are changed to <unique emoji> <short trace id>: <operation name> (<service name>) — Jaeger UI.

How was this change tested?

• Page titles are checked in tests.

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: yarn lint and yarn test

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.60%. Comparing base (c4402ca) to head (cada767).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2275   +/-   ##
=======================================
  Coverage   96.59%   96.60%           
=======================================
  Files         254      254           
  Lines        7641     7662   +21     
  Branches     1990     1931   -59     
=======================================
+ Hits         7381     7402   +21     
  Misses        260      260           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[SOF3]

Any thoughts on optionally including the timestamp? That would be more intuitive than the trace ID.

[yurishkuro]

@nox how do you actually use this new feature? I have several traces open in Chrome tabs. They all have our standard favicon, on the trace page the new emojis are not showing anywhere. The only place where I see them is if I expand the tabs list dropdown (something that I almost never do as a navigation mechanism):

[bobrik]

There's a bit of a problem: you need to open the tab for the emoji to appear (first two tabs were not opened).

Other than that this is how it looks like in Chrome for me:

You need to have a reasonable number of tabs open for the emojis to be visible, too many tabs and they disappear.

[nox]

They all have our standard favicon, on the trace page the new emojis are not showing anywhere.

The emojis are the first thing that show up in the title, as we decided back then to not make them favicons. So far the emojis were good enough as long as you don't have too many tabs open as @bobrik said.

Would you want me to make a new PR for a setting that put them as favicons, and another that adds them to the page content itself?

[yurishkuro]

Yes, the tabs need to be wider to see the custom title. I had too many tabs open.

I still think the favicon should remain as Jaeger, for branding. But it would be good to include the emoji into other places showing trace, for consistency, such as search page, and the main trace view (which will be shared between different trace visualizations).

Another glitch I noticed: when I open a new tab with a trace, it first opens with the standard "Jaeger UI" title. If I wait for page to load completely, it then changes to emoji/uuid title, but if I switch tab away before page loads, it stays as "Jaeger UI" until I switch back to it (then it changes). Don't know if this behavior is avoidable given how React router works.