From 0fe3b78a50d9610abfc973059994de94473a551d Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Tue, 22 Sep 2020 22:53:45 +0200
Subject: [PATCH] Show full traceID and better discern multiple stackTraces
 (#27710)

---
 .../src/TracePageHeader/TracePageHeader.tsx   |  6 +++-
 .../TraceTimelineViewer/SpanDetail/index.tsx  | 30 ++++++++++++-------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
index 7a3dd387420..6e7deb34702 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
@@ -130,6 +130,10 @@ const getStyles = createStyle((theme: Theme) => {
       font-size: 1.78em;
       margin-right: 0.15em;
     `,
+    TracePageHeaderTraceId: css`
+      label: TracePageHeaderTraceId;
+      white-space: nowrap;
+    `,
   };
 });
 
@@ -238,7 +242,7 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
   const title = (
     <h1 className={cx(styles.TracePageHeaderTitle, canCollapse && styles.TracePageHeaderTitleCollapsible)}>
       <TraceName traceName={getTraceName(trace.spans)} />{' '}
-      <small className={uTxMuted}>{trace.traceID.slice(0, 7)}</small>
+      <small className={cx(styles.TracePageHeaderTraceId, uTxMuted)}>{trace.traceID}</small>
     </h1>
   );
 
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
index e24642fe8b2..04019b63463 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
@@ -225,16 +225,26 @@ export default function SpanDetail(props: SpanDetailProps) {
             label="Stack trace"
             data={stackTraces}
             isOpen={isStackTracesOpen}
-            TextComponent={textComponentProps => (
-              <TextArea
-                className={styles.Textarea}
-                style={{ cursor: 'unset' }}
-                readOnly
-                cols={10}
-                rows={10}
-                value={textComponentProps.data}
-              />
-            )}
+            TextComponent={textComponentProps => {
+              let text;
+              if (textComponentProps.data?.length > 1) {
+                text = textComponentProps.data
+                  .map((stackTrace, index) => `StackTrace ${index + 1}:\n${stackTrace}`)
+                  .join('\n');
+              } else {
+                text = textComponentProps.data?.[0];
+              }
+              return (
+                <TextArea
+                  className={styles.Textarea}
+                  style={{ cursor: 'unset' }}
+                  readOnly
+                  cols={10}
+                  rows={10}
+                  value={text}
+                />
+              );
+            }}
             onToggle={() => stackTracesToggle(spanID)}
           />
         )}