[Feature]: Make good use of page titles

[nox]

Requirement

As a Jaeger UI user, I want page titles to include the same data as trace names so that I can disambiguate browser tabs instead of having a dozen of them named "Jaeger UI".

Problem

Currently all Jaeger UI pages are titled "Jaeger UI", which is not descriptive and doesn't help me when I have a dozen tabs open trying to debug an issue.

Proposal

Make use of <Helmet title="…" /> in TracePageHeader to make the page title become:

<short trace id>: <operation name> | <service name> — Jaeger UI

Open questions

What the exact format of the page title should be? I think it should go from most unique bit to less unique bit, so it should start with the short trace id and end with the service name.

[yurishkuro]

+1. Would you be able to create a PR?

Do you really need a trace ID in the title? While they can help distinguish tabs, I doubt they would help much to recognize the tabs, someone would have to keep hex codes in memory.

[yurishkuro]

Also, there are many pages that are not about a single trace (e.g. Diff Traces, Dependencies, etc), so we need to make sure custom titles work for them too.

[nox]

+1. Would you be able to create a PR?

Yes I can. I was looking at the code already. I see that getTraceName is memoized and does two things: find the best candidate span for the name and then compute the string.

Should I change that to a function (name to be defined) that returns an object (type name to be defined) with two keys (key names to defined) storing a trace name usable for the page content and a trace name usable for the page title?

function get TraceName(spans: Span[]): TraceName;

type TraceName {
  forContent: string,
  forTitle: string,
}

I'm all ears for better names!

Do you really need a trace ID in the title? While they can help distinguish tabs, I doubt they would help much to recognize the tabs, someone would have to keep hex codes in memory.

I asked around (I'm at Cloudflare) and the feedback I got was that if we don't include the trace ID we would just have a slightly more descriptive page title but which doesn't help at all if you are comparing a dozen traces of the same operation, so yeah I think it is pretty important.

Wild idea: what if it started with a emoji selected from the trace ID?

[yurishkuro]

function get TraceName(spans: Span[]): TraceName;

I don't like using different names for title and on-screen, I think it's better to use the same name

Wild idea: what if it started with a emoji selected from the trace ID?

🥳 worth a try - but they have to be distinct, i.e. not flavors of smiley faces but rather selected from more unique sets: like ⚒️ ⚓️ ⚔️ ⚕️ ⚖️ ⛰️ ⛱️ ⛲️ ⛳️ ⛴️ ⛵️ ⛷️ ⛸️ ⛹️ ⛺️

[nox]

I don't like using different names for title and on-screen, I think it's better to use the same name

If we start with the service name, we are back at the beginning, looking at dozens of tabs with the same truncated title.

[nox]

🥳 worth a try - but they have to be distinct, i.e. not flavors of smiley faces but rather selected from more unique sets: like ⚒️ ⚓️ ⚔️ ⚕️ ⚖️ ⛰️ ⛱️ ⛲️ ⛳️ ⛴️ ⛵️ ⛷️ ⛸️ ⛹️ ⛺️

There are a lot of animals: https://emojipedia.org/nature, I'll start implementing it and then make a PR once I get the DCO sorted out.

[yurishkuro]

If we start with the service name, we are back at the beginning, looking at dozens of tabs with the same truncated title.

I see what you mean - we can return a struct that separates those pieces and the title can compose them in different order, e.g. span_name (service_name).

[yurishkuro]

There are a lot of animals: https://emojipedia.org/nature

the Mammals section is kind of blurring together for me, because overall shapes and colors are very similar. But the other sections are much better (especially when they use different colors).

[nox]

I see what you mean - we can return a struct that separates those pieces and the title can compose them in different order, e.g. span_name (service_name).

So I assume the memoization is first and foremost about the candidate span search, and not the concatenation of the various parts together? Otherwise I agree that keeping things separated is for the best.

the Mammals section is kind of blurring together for me, because overall shapes and colors are very similar. But the other sections are much better (especially when they use different colors).

Completely agree! I'll select a few different emojis, I kinda want to add the baguette emoji and some cheese too, as I'm known to use cheese names in test code in general hah. We can bikeshed the exact set once I make the PR, but yeah there are too many horses anyway in the mammal set.

[yurishkuro]

So I assume the memoization is first and foremost about the candidate span search, and not the concatenation of the various parts together?

yes

[nox]

I have opened #2275.