Use JSON for table values only for objects

Without this numbers are treated as json, which styles them with an offset. Signed-off-by: Ivan Babrou <github@ivan.computer>
jaegertracing · Feb 17, 2024 · fba6b14 · fba6b14
1 parent a150319
commit fba6b14
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 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
@@ -61,6 +61,7 @@ describe('<KeyValuesTable>', () => {
     { key: 'omg', value: 'mos-def', expected: 'mos-def' },
     { key: 'numericString', value: '12345678901234567890', expected: '12345678901234567890' },
     { key: 'numeric', value: 123456789, expected: '123456789' },
+    { key: 'boolean', value: true, expected: 'true' },
     { key: 'http.request.header.accept', value: ['application/json'], expected: 'application/json' },
     {
       key: 'http.response.header.set_cookie',

diff --git a/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -52,11 +52,27 @@ const stringListMarkup = (value: any[]) => (
   </div>
 );
 
-const stringMarkup = (value: string) => (
-  <div className="json-markup">
-    <span className="json-markup-string">{value}</span>
-  </div>
-);
+const scalarMarkup = (value: string | Number | Boolean) => {
+  let className;
+  switch (typeof value) {
+    case 'boolean': {
+      className = 'json-markup-bool';
+      break;
+    }
+    case 'number': {
+      className = 'json-markup-number';
+      break;
+    }
+    default: {
+      className = 'json-markup-string';
+    }
+  }
+  return (
+    <div className="json-markup">
+      <span className={className}>{value.toString()}</span>
+    </div>
+  );
+};
 
 function formatValue(key: string, value: any) {
   let content;
@@ -66,11 +82,9 @@ function formatValue(key: string, value: any) {
     parsed = tryParseJson(value);
   }
 
-  if (typeof parsed === 'string') {
-    content = stringMarkup(parsed);
-  } else if (Array.isArray(parsed) && shouldDisplayAsStringList(key)) {
+  if (Array.isArray(parsed) && shouldDisplayAsStringList(key)) {
     content = stringListMarkup(parsed);
-  } else {
+  } else if (typeof parsed === 'object') {
     const shouldJsonTreeExpand = Object.keys(parsed).length <= 10;
 
     content = (
@@ -95,6 +109,8 @@ function formatValue(key: string, value: any) {
         }}
       />
     );
+  } else {
+    content = scalarMarkup(parsed);
   }
 
   return <div className="ub-inline-block">{content}</div>;