Fixes handling of numeric strings in span tag values (jaegertracing#436)

Fixes handling of numeric strings in span tag values Signed-off-by: vvvprabhakar <[email protected]>
vvvprabhakar · Aug 11, 2019 · 3756282 · 3756282
2 parents 7fe6f57 + 0e74060
commit 3756282
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 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
@@ -45,7 +45,12 @@ describe('LinkValue', () => {
 describe('<KeyValuesTable>', () => {
   let wrapper;
 
-  const data = [{ key: 'span.kind', value: 'client' }, { key: 'omg', value: 'mos-def' }];
+  const data = [
+    { key: 'span.kind', value: 'client' },
+    { key: 'omg', value: 'mos-def' },
+    { key: 'numericString', value: '12345678901234567890' },
+    { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
+  ];
 
   beforeEach(() => {
     wrapper = shallow(<KeyValuesTable data={data} />);
@@ -127,4 +132,14 @@ describe('<KeyValuesTable>', () => {
       expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON');
     });
   });
+
+  it('renders a span value containing numeric string correctly', () => {
+    const el = wrapper.find('.ub-inline-block');
+    expect(el.length).toBe(data.length);
+    el.forEach((valueDiv, i) => {
+      if (data[i].key !== 'jsonkey') {
+        expect(valueDiv.html()).toMatch(`"${data[i].value}"`);
+      }
+    });
+  });
 });
diff --git a/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -23,11 +23,17 @@ import { KeyValuePair, Link } from '../../../../types/trace';
 
 import './KeyValuesTable.css';
 
-function parseIfJson(value: any) {
-  try {
-    return JSON.parse(value);
-    // eslint-disable-next-line no-empty
-  } catch (_) {}
+const jsonObjectOrArrayStartRegex = /^(\[|\{)/;
+
+function parseIfComplexJson(value: any) {
+  // if the value is a string representing actual json object or array, then use json-markup
+  if (typeof value === 'string' && jsonObjectOrArrayStartRegex.test(value)) {
+    // otherwise just return as is
+    try {
+      return JSON.parse(value);
+      // eslint-disable-next-line no-empty
+    } catch (_) {}
+  }
   return value;
 }
 
@@ -66,7 +72,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
         <tbody className="KeyValueTable--body">
           {data.map((row, i) => {
             const markup = {
-              __html: jsonMarkup(parseIfJson(row.value)),
+              __html: jsonMarkup(parseIfComplexJson(row.value)),
             };
             // eslint-disable-next-line react/no-danger
             const jsonTable = <div className="ub-inline-block" dangerouslySetInnerHTML={markup} />;