Use react-favicon to put trace emoji in favicon

This gives us more estate in a browser tab bar to get more details from a trace with a single glance. Signed-off-by: Anthony Ramine <nox@nox.paris>
jaegertracing · Apr 23, 2024 · 3f5fd94 · 3f5fd94
1 parent 7e6ec95
commit 3f5fd94
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 5 deletions.
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
@@ -73,6 +73,7 @@
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
+    "react-favicon": "^2.0.3",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.0.1",
     "react-is": "^18.2.0",

diff --git a/packages/jaeger-ui/src/components/App/Page.tsx b/packages/jaeger-ui/src/components/App/Page.tsx
@@ -25,6 +25,7 @@ import { trackPageView } from '../../utils/tracking';
 
 import './Page.css';
 import withRouteProps from '../../utils/withRouteProps';
+import Favicon from 'react-favicon';
 
 type TProps = {
   children: React.ReactNode;
@@ -55,6 +56,7 @@ export class PageImpl extends React.Component<TProps> {
     const contentCls = cx({ 'Page--content': true, 'Page--content--no-embedded': !embedded });
     return (
       <div>
+        <Favicon url="/favicon.ico" />
         <Helmet title="Jaeger UI" />
         <Layout>
           {!embedded && (

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -37,6 +37,7 @@ import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
 import { Helmet } from 'react-helmet';
+import Favicon from 'react-favicon';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -159,7 +160,8 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
 
   return (
     <header className="TracePageHeader">
-      <Helmet title={`${trace.traceEmoji} ${traceShortID}: ${trace.tracePageTitle} — Jaeger UI`} />
+      <Favicon url={trace.traceEmojiFaviconURL} />
+      <Helmet title={`${traceShortID}: ${trace.tracePageTitle} — Jaeger UI`} />
       <div className="TracePageHeader--titleRow">
         {toSearch && (
           <Link className="TracePageHeader--back" to={toSearch}>

diff --git a/packages/jaeger-ui/src/model/trace-viewer.tsx b/packages/jaeger-ui/src/model/trace-viewer.tsx
@@ -105,3 +105,13 @@ export function getTraceEmoji(spans: Span[]): string {
 
   return emojiSet[index];
 }
+
+// See <https://css-tricks.com/emoji-as-a-favicon/>.
+export function getTraceEmojiFaviconURL(spans: Span[]): string {
+  if (!spans.length) return '/favicon.ico';
+
+  const traceEmoji = getTraceEmoji(spans);
+  const traceFavicon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${traceEmoji}</text></svg>`;
+
+  return `data:image/svg+xml,${encodeURI(traceFavicon)}`;
+}
diff --git a/packages/jaeger-ui/src/model/transform-trace-data.tsx b/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 { getTraceEmoji, getTraceName, getTracePageTitle } from './trace-viewer';
+import { getTraceEmojiFaviconURL, getTraceName, getTracePageTitle } from './trace-viewer';
 import { KeyValuePair, Span, SpanData, Trace, TraceData } from '../types/trace';
 import TreeNode from '../utils/TreeNode';
 
@@ -171,15 +171,15 @@ export default function transformTraceData(data: TraceData & { spans: SpanData[]
   });
   const traceName = getTraceName(spans);
   const tracePageTitle = getTracePageTitle(spans);
-  const traceEmoji = getTraceEmoji(spans);
+  const traceEmojiFaviconURL = getTraceEmojiFaviconURL(spans);
   const services = Object.keys(svcCounts).map(name => ({ name, numberOfSpans: svcCounts[name] }));
   return {
     services,
     spans,
     traceID,
     traceName,
     tracePageTitle,
-    traceEmoji,
+    traceEmojiFaviconURL,
     // TODO why not store `tree` here for easier access to tree structure?
     // ...
     // Can't use spread operator for intersection types

diff --git a/packages/jaeger-ui/src/types/trace.tsx b/packages/jaeger-ui/src/types/trace.tsx
@@ -82,7 +82,7 @@ export type Trace = TraceData & {
   startTime: number;
   traceName: string;
   tracePageTitle: string;
-  traceEmoji: string;
+  traceEmojiFaviconURL: string;
   services: { name: string; numberOfSpans: number }[];
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -8872,6 +8872,13 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-favicon@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-favicon/-/react-favicon-2.0.3.tgz#dfb54562ca91b1e239f5447a5c8c43817c262b78"
+  integrity sha512-eKtog0JO29rxkSHwq48t9EtLLeLtL0YzJsWDrtGr30c/yRt6GQUgHZizjIVJ/24e/MAHKFZg5jVnca+lvcTSZA==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"