[v9.3.x] Prometheus: Add traceID field on top of the exemplar popover (…

…#60035)

Prometheus: Add traceID field on top of the exemplar popover (#59920)

Prioritize trace link

(cherry picked from commit 694dc60)

Co-authored-by: Ludovic Viaud <ludovic.viaud@gmail.com>

public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@@ -70,6 +70,10 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
   }, [setIsOpen]);
 
   const renderMarker = useCallback(() => {
+    // Put the traceID field in front.
+    const traceIDField = dataFrame.fields.find((field) => field.name === 'traceID') || dataFrame.fields[0];
+    const orderedDataFrameFields = [traceIDField, ...dataFrame.fields.filter((field) => traceIDField !== field)];
+
     const timeFormatter = (value: number) => {
       return dateTimeFormat(value, {
         format: systemDateFormats.fullDate,
@@ -94,7 +98,7 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
             <div>
               <table className={styles.exemplarsTable}>
                 <tbody>
-                  {dataFrame.fields.map((field, i) => {
+                  {orderedDataFrameFields.map((field, i) => {
                     const value = field.values.get(dataFrameFieldIndex.fieldIndex);
                     const links = field.config.links?.length
                       ? getFieldLinks(field, dataFrameFieldIndex.fieldIndex)