Use JSON for table values only for objects (#2168)

Without this numbers are treated as json, which styles them with an
offset:

<img width="1552" alt="image"
src="https://github.com/jaegertracing/jaeger-ui/assets/89186/c5f18618-d47c-4e84-a1de-44aaa37fdae3">

With this change applied:

<img width="1552" alt="image"
src="https://github.com/jaegertracing/jaeger-ui/assets/89186/6548542c-83dc-4303-a811-291b8ab0b739">

It's possible that there's a better solution for this.

## Which problem is this PR solving?

https://github.com/jaegertracing/jaeger-ui/pull/1724/files#r1491924866

## How was this change tested?

Manually tested.

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] I have added unit tests for the new functionality
- [ ] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

Signed-off-by: Ivan Babrou <github@ivan.computer>

packages/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',

packages/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>;