Introduce an emoji computed from trace ID in trace page titles

> Dear colleague, are you talking about the shrimp trace or the baguette trace?

To help discussing about traces with coworkers when debugging issues,
referring to a unique and distinguishable emoji is good.

Signed-off-by: Anthony Ramine <[email protected]>

Author: nox

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

@@ -159,7 +159,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
 
   return (
     <header className="TracePageHeader">
-      <Helmet title={`${traceShortID}: ${trace.tracePageTitle} — Jaeger UI`} />
+      <Helmet title={`${trace.traceEmoji} ${traceShortID}: ${trace.tracePageTitle} — Jaeger UI`} />
       <div className="TracePageHeader--titleRow">
         {toSearch && (
           <Link className="TracePageHeader--back" to={toSearch}>

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

@@ -80,3 +80,29 @@ export function getTracePageTitle(spans: Span[]): string {
     ? `${tracePageHeaderParts.operationName} (${tracePageHeaderParts.serviceName})`
     : '';
 }
+
+export function getTraceEmoji(spans: Span[]): string {
+  if (!spans.length) return '';
+
+  // prettier-ignore
+  const emojiSet = [
+    '🐶', '🐱', '🐭', '🦊', '🐨', '🐮', '🐷', '🐸', '🐵', '🐔', '🐤', '🦆',
+    '🦉', '🐝', '🦋', '🐢', '🦀', '🐳', '🐊', '🦒', '🪶', '🦩', '🐉', '🍄',
+    '🌸', '🌜', '🔥', '🌪️', '💧', '🍏', '🍊', '🍉', '🍒', '🥦', '🌽', '🍠',
+    '🥐', '🥖', '🥚', '🧀', '🍗', '🍟', '🍕', '🍣', '🍤', '🍙', '🍪', '⚽️',
+    '🏀', '🥎', '🎹', '🎲', '🎮', '🧩', '🚗', '🚲', '🚂', '⛺️', '📞', '⏰',
+    '🔌', '💎', '🪚', '🧲', '🧬', '🎀', '📬', '📘', '🩷', '🎵', '🏴', '🚩', 
+  ];
+
+  const traceID = spans[0].traceID;
+  let index = 0;
+
+  if (traceID) {
+    for (let i = 0; i < traceID.length; i++) {
+      const hexChar = traceID.slice(i, i + 1);
+      index = (index * 16 + parseInt(hexChar, 16)) % emojiSet.length;
+    }
+  }
+
+  return emojiSet[index];
+}

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, getTracePageTitle } from './trace-viewer';
+import { getTraceEmoji, getTraceName, getTracePageTitle } from './trace-viewer';
 import { KeyValuePair, Span, SpanData, Trace, TraceData } from '../types/trace';
 import TreeNode from '../utils/TreeNode';
 
@@ -171,13 +171,15 @@ export default function transformTraceData(data: TraceData & { spans: SpanData[]
   });
   const traceName = getTraceName(spans);
   const tracePageTitle = getTracePageTitle(spans);
+  const traceEmoji = getTraceEmoji(spans);
   const services = Object.keys(svcCounts).map(name => ({ name, numberOfSpans: svcCounts[name] }));
   return {
     services,
     spans,
     traceID,
     traceName,
     tracePageTitle,
+    traceEmoji,
     // 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

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