SpanDetail: render HTTP headers as comma-separated strings

Signed-off-by: Will Rogers <wjrogers@gmail.com>
jaegertracing · Mar 23, 2023 · 466a41c · 466a41c
1 parent 4e413ab
commit 466a41c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/.../jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/.../jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
@@ -51,6 +51,8 @@ describe('<KeyValuesTable>', () => {
     { key: 'numericString', value: '12345678901234567890', expected: '12345678901234567890' },
     { key: 'numeric', value: 123456789, expected: '123456789' },
     { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
+    { key: 'http.request.header.accept', value: ['application/json'] },
+    { key: 'http.response.header.set_cookie', value: JSON.stringify(['name=mos-def', 'code=12345']) },
   ];
 
   beforeEach(() => {
@@ -126,9 +128,27 @@ describe('<KeyValuesTable>', () => {
     const el = wrapper.find('.ub-inline-block');
     expect(el.length).toBe(data.length);
     el.forEach((valueDiv, i) => {
-      if (data[i].key !== 'jsonkey') {
+      if (data[i].expected) {
         expect(valueDiv.html()).toMatch(data[i].expected);
       }
     });
   });
+
+  it('renders HTTP headers as multiple string spans', () => {
+    const el = wrapper.find('.ub-inline-block');
+    expect(el.length).toBe(data.length);
+    el.forEach((valueDiv, i) => {
+      if (/http\.(request|response)\.header\./.test(data[i].key)) {
+        let value = data[i].value;
+        if (typeof value === 'string') {
+          value = JSON.parse(value);
+        }
+        const spans = valueDiv.find('div.json-markup > span.json-markup-string');
+        expect(spans.length).toBe(value.length);
+        spans.forEach((span, j) => {
+          expect(span.text()).toBe(value[j]);
+        });
+      }
+    });
+  })
 });
diff --git a/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -35,6 +35,19 @@ function tryParseJson(value: string) {
   }
 }
 
+function shouldDisplayAsStringList(key: string) {
+  return (
+    key.startsWith('http.request.header.') ||
+    key.startsWith('http.response.header.')
+  );
+}
+
+const stringListMarkup = (value: any[]) => (
+  <div className="json-markup">
+    {value.map((item, i) => <>{i > 0 && ', '}<span className="json-markup-string">{item}</span></>)}
+  </div>
+);
+
 const stringMarkup = (value: string) => (
   <div className="json-markup">
     <span className="json-markup-string">{value}</span>
@@ -50,12 +63,18 @@ function _jsonMarkup(value: any) {
   );
 }
 
-function formatValue(value: any) {
+function formatValue(key: string, value: any) {
   let content;
+  let parsed = value;
 
   if (typeof value === 'string') {
-    const parsed = tryParseJson(value);
-    content = typeof parsed === 'string' ? stringMarkup(parsed) : _jsonMarkup(parsed);
+    parsed = tryParseJson(value);
+  }
+
+  if (typeof parsed === 'string') {
+    content = stringMarkup(parsed);
+  } else if (Array.isArray(parsed) && shouldDisplayAsStringList(key)) {
+    content = stringListMarkup(parsed);
   } else {
     content = _jsonMarkup(value);
   }
@@ -97,7 +116,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
       <table className="u-width-100">
         <tbody className="KeyValueTable--body">
           {data.map((row, i) => {
-            const jsonTable = formatValue(row.value);
+            const jsonTable = formatValue(row.key, row.value);
             const links = linksGetter ? linksGetter(data, i) : null;
             let valueMarkup;
             if (links && links.length === 1) {