Signed-off-by: Matus Majchrak <matus.majchrak@gmail.com>

Updates regex and merge json/markup functions

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -23,23 +23,18 @@ import { KeyValuePair, Link } from '../../../../types/trace';
 
 import './KeyValuesTable.css';
 
-const jsonObjectOrArrayStartRegex = new RegExp('^[{[]+');
+const jsonObjectOrArrayStartRegex = '/^({|[)/';
 
-function parseIfJson(value: any) {
-  try {
-    return JSON.parse(value);
-    // eslint-disable-next-line no-empty
-  } catch (_) {}
-  return value;
-}
-
-function createMarkup(value: any) {
+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)) {
-    return jsonMarkup(parseIfJson(value));
+  if (typeof value === 'string' && jsonObjectOrArrayStartRegex.match(value)) {
+    // otherwise just return as is
+    try {
+      return JSON.parse(value);
+      // eslint-disable-next-line no-empty
+    } catch (_) {}
   }
-  // otherwise just return as is
-  return jsonMarkup(value);
+  return value;
 }
 
 export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => (
@@ -77,7 +72,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
         <tbody className="KeyValueTable--body">
           {data.map((row, i) => {
             const markup = {
-              __html: createMarkup(row.value),
+              __html: jsonMarkup(parseIfComplexJson(row.value)),
             };
             // eslint-disable-next-line react/no-danger
             const jsonTable = <div className="ub-inline-block" dangerouslySetInnerHTML={markup} />;