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 => {
+              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={textComponentProps.data}
+                  value={text}
                 />
-            )}
+              );
+            }}
             onToggle={() => stackTracesToggle(spanID)}
           />
         )}