Customise trace page title

We make trace pages have a title "<trace short ID>: <operation name> (<service name>)"
to improve navigation when the user has many traces open in their browser.

Signed-off-by: Anthony Ramine <nox@nox.paris>

Author: nox

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -20,6 +20,7 @@ import _values from 'lodash/values';
 import { IoArrowBack, IoFileTrayFull, IoChevronForward } from 'react-icons/io5';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from 'react-helmet';
 import AltViewOptions from './AltViewOptions';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 import SpanGraph from './SpanGraph';
@@ -148,15 +149,17 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
       return { ...rest, value: renderer(trace) };
     });
 
+  const traceShortID = trace.traceID.slice(0, 7);
+
   const title = (
     <h1 className={`TracePageHeader--title ${canCollapse ? 'is-collapsible' : ''}`}>
-      <TraceName traceName={trace.traceName} />{' '}
-      <small className="u-tx-muted">{trace.traceID.slice(0, 7)}</small>
+      <TraceName traceName={trace.traceName} /> <small className="u-tx-muted">{traceShortID}</small>
     </h1>
   );
 
   return (
     <header className="TracePageHeader">
+      <Helmet title={`${traceShortID}: ${trace.tracePageTitle} — Jaeger UI`} />
       <div className="TracePageHeader--titleRow">
         {toSearch && (
           <Link className="TracePageHeader--back" to={toSearch}>

packages/jaeger-ui/src/model/trace-viewer.tsx

@@ -70,3 +70,9 @@ export function getTraceName(spans: Span[]): string {
 
   return parts ? `${parts.serviceName}: ${parts.operationName}` : '';
 }
+
+export function getTracePageTitle(spans: Span[]): string {
+  const parts = getTracePageHeaderParts(spans);
+
+  return parts ? `${parts.operationName} (${parts.serviceName})` : '';
+}

packages/jaeger-ui/src/model/transform-trace-data.tsx

@@ -16,7 +16,7 @@ import _isEqual from 'lodash/isEqual';
 
 import { getTraceSpanIdsAsTree, TREE_ROOT_ID } from '../selectors/trace';
 import { getConfigValue } from '../utils/config/get-config';
-import { getTraceName } from './trace-viewer';
+import { getTraceName, getTracePageTitle } from './trace-viewer';
 import { KeyValuePair, Span, SpanData, Trace, TraceData } from '../types/trace';
 import TreeNode from '../utils/TreeNode';
 
@@ -170,12 +170,14 @@ export default function transformTraceData(data: TraceData & { spans: SpanData[]
     spans.push(span);
   });
   const traceName = getTraceName(spans);
+  const tracePageTitle = getTracePageTitle(spans);
   const services = Object.keys(svcCounts).map(name => ({ name, numberOfSpans: svcCounts[name] }));
   return {
     services,
     spans,
     traceID,
     traceName,
+    tracePageTitle,
     // TODO why not store `tree` here for easier access to tree structure?
     // ...
     // Can't use spread operator for intersection types

packages/jaeger-ui/src/types/trace.tsx

@@ -81,6 +81,7 @@ export type Trace = TraceData & {
   spans: Span[];
   startTime: number;
   traceName: string;
+  tracePageTitle: string;
   services: { name: string; numberOfSpans: number }[];
 };