Tempo: Encode IDs as hexadecimal when downloading traces (#66001)

* Remove converting tempo trace id to base64

* fix typo

* Update id format to hex for tempo json mock

public/app/plugins/datasource/tempo/mockJsonResponse.json

@@ -46,9 +46,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "cmteMBAvwNA=",
+              "spanId": "726b5e30102fc0d0",
-              "parentSpanId": "OY8PIaPbma4=",
+              "parentSpanId": "398f0f21a3db99ae",
               "name": "HTTP GET - root",
               "kind": "SPAN_KIND_SERVER",
               "startTimeUnixNano": "1627471657255809000",
@@ -156,8 +156,8 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "GVdnHErYWoo=",
+              "spanId": "1957671c4ad85a8a",
               "parentSpanId": "WgdmnUQaoyY=",
               "name": "HTTP Client",
               "startTimeUnixNano": "1627471657251425000",
@@ -214,8 +214,8 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "YLoqu0TxPq4=",
+              "spanId": "60ba2abb44f13eae",
               "name": "HTTP Client",
               "startTimeUnixNano": "1627471657247632000",
               "endTimeUnixNano": "1627471657260233000",
@@ -285,9 +285,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "VzhhbsaOedI=",
+              "spanId": "5738616ec68e79d2",
-              "parentSpanId": "YLoqu0TxPq4=",
+              "parentSpanId": "60ba2abb44f13eae",
               "name": "HTTP GET",
               "kind": "SPAN_KIND_CLIENT",
               "startTimeUnixNano": "1627471657247674000",
@@ -530,9 +530,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "OY8PIaPbma4=",
+              "spanId": "398f0f21a3db99ae",
-              "parentSpanId": "GVdnHErYWoo=",
+              "parentSpanId": "1957671c4ad85a8a",
               "name": "HTTP GET",
               "kind": "SPAN_KIND_CLIENT",
               "startTimeUnixNano": "1627471657251445000",
@@ -775,9 +775,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
+              "traceId": "000000000000000060ba2abb44f13eae",
-              "spanId": "WgdmnUQaoyY=",
+              "spanId": "5a07669d441aa326",
-              "parentSpanId": "VzhhbsaOedI=",
+              "parentSpanId": "5738616ec68e79d2",
               "name": "HTTP GET - root",
               "kind": "SPAN_KIND_SERVER",
               "startTimeUnixNano": "1627471657251228000",

public/app/plugins/datasource/tempo/resultTransformer.ts

@@ -116,29 +116,6 @@ export function transformTraceList(
   return response;
 }
 
-// Don't forget to change the backend code when the id representation changed
-function transformBase64IDToHexString(base64: string) {
-  const raw = atob(base64);
-  let result = '';
-  for (let i = 0; i < raw.length; i++) {
-    const hex = raw.charCodeAt(i).toString(16);
-    result += hex.length === 2 ? hex : '0' + hex;
-  }
-
-  return result.length > 16 ? result.slice(16) : result;
-}
-
-function transformHexStringToBase64ID(hex: string) {
-  const hexArray = hex.match(/\w{2}/g) || [];
-  return btoa(
-    hexArray
-      .map(function (a) {
-        return String.fromCharCode(parseInt(a, 16));
-      })
-      .join('')
-  );
-}
-
 function getAttributeValue(value: collectorTypes.opentelemetryProto.common.v1.AnyValue): any {
   if (value.stringValue) {
     return value.stringValue;
@@ -297,9 +274,9 @@ export function transformFromOTLP(
       for (const librarySpan of data.instrumentationLibrarySpans) {
         for (const span of librarySpan.spans) {
           frame.add({
-            traceID: transformBase64IDToHexString(span.traceId),
+            traceID: span.traceId.length > 16 ? span.traceId.slice(16) : span.traceId,
-            spanID: transformBase64IDToHexString(span.spanId),
+            spanID: span.spanId,
-            parentSpanID: transformBase64IDToHexString(span.parentSpanId || ''),
+            parentSpanID: span.parentSpanId || '',
             operationName: span.name || '',
             serviceName,
             serviceTags,
@@ -376,10 +353,10 @@ export function transformToOTLP(data: MutableDataFrame): {
     }
 
     result.batches[batchIndex].instrumentationLibrarySpans[0].spans.push({
-      traceId: transformHexStringToBase64ID(span.traceID.padStart(32, '0')),
+      traceId: span.traceID.padStart(32, '0'),
-      spanId: transformHexStringToBase64ID(span.spanID),
+      spanId: span.spanID,
+      parentSpanId: span.parentSpanID || '',
       traceState: '',
-      parentSpanId: transformHexStringToBase64ID(span.parentSpanID || ''),
       name: span.operationName,
       kind: getOTLPSpanKind(span.tags) as any,
       startTimeUnixNano: span.startTime * 1000000,

public/app/plugins/datasource/tempo/testResponse.ts

@@ -2137,9 +2137,9 @@ export const otlpResponse = {
         {
           spans: [
             {
-              traceId: 'AAAAAAAAAABguiq7RPE+rg==',
+              traceId: '000000000000000060ba2abb44f13eae',
-              spanId: 'cmteMBAvwNA=',
+              spanId: '726b5e30102fc0d0',
-              parentSpanId: 'OY8PIaPbma4=',
+              parentSpanId: '398f0f21a3db99ae',
               name: 'HTTP GET - root',
               kind: 'SPAN_KIND_CLIENT',
               startTimeUnixNano: 1627471657255809000,