Show full traceID and better discern multiple stackTraces (#27710)

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>
   );
 

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 => (
+            TextComponent={textComponentProps => {
-              <TextArea
+              let text;
-                className={styles.Textarea}
+              if (textComponentProps.data?.length > 1) {
-                style={{ cursor: 'unset' }}
+                text = textComponentProps.data
-                readOnly
+                  .map((stackTrace, index) => `StackTrace ${index + 1}:\n${stackTrace}`)
-                cols={10}
+                  .join('\n');
-                rows={10}
+              } else {
-                value={textComponentProps.data}
+                text = textComponentProps.data?.[0];
-              />
+              }
-            )}
+              return (
+                <TextArea
+                  className={styles.Textarea}
+                  style={{ cursor: 'unset' }}
+                  readOnly
+                  cols={10}
+                  rows={10}
+                  value={text}
+                />
+              );
+            }}
             onToggle={() => stackTracesToggle(spanID)}
           />
         )}