Fix handling of numeric strings in span tag values

Signed-off-by: Matus Majchrak <[email protected]> Fixes the rendering of span tag values that contain numeric strings Signed-off-by: Matus <[email protected]>
jaegertracing · Aug 8, 2019 · 8b7b0f8 · 8b7b0f8
1 parent c6788b5
commit 8b7b0f8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 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,12 @@ 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) => {
+      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,6 +23,8 @@ import { KeyValuePair, Link } from '../../../../types/trace';
 
 import './KeyValuesTable.css';
 
+const jsonObjectOrArrayStartRegex = new RegExp('^[{[]+');
+
 function parseIfJson(value: any) {
   try {
     return JSON.parse(value);
@@ -31,6 +33,15 @@ function parseIfJson(value: any) {
   return value;
 }
 
+function createMarkup(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)) {
+    return jsonMarkup(parseIfJson(value));
+  }
+  // otherwise just return as is
+  return jsonMarkup(value);
+}
+
 export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => (
   <a href={props.href} title={props.title} target="_blank" rel="noopener noreferrer">
     {props.children} <Icon className="KeyValueTable--linkIcon" type="export" />
@@ -66,7 +77,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
         <tbody className="KeyValueTable--body">
           {data.map((row, i) => {
             const markup = {
-              __html: jsonMarkup(parseIfJson(row.value)),
+              __html: createMarkup(row.value),
             };
             // eslint-disable-next-line react/no-danger
             const jsonTable = <div className="ub-inline-block" dangerouslySetInnerHTML={markup} />;