Tempo/Jaeger: Add better display name to legend (#34063)

* Add display name

* Fix test

* Fix test

public/app/plugins/datasource/jaeger/graphTransform.test.ts

@@ -24,8 +24,8 @@ describe('createGraphFrames', () => {
         ['3fa414edcef6ad90'],
         ['tempo-querier'],
         ['HTTP GET - api_traces_traceid'],
-        ['total: 1049.14ms (100%)'],
-        ['self: 1049.14ms (100%)'],
+        ['1049.14ms (100%)'],
+        ['1049.14ms (100%)'],
         [1],
       ])
     );

public/app/plugins/datasource/jaeger/graphTransform.ts

@@ -24,8 +24,8 @@ export function createGraphFrames(data: TraceResponse): DataFrame[] {
       { name: Fields.id, type: FieldType.string },
       { name: Fields.title, type: FieldType.string },
       { name: Fields.subTitle, type: FieldType.string },
-      { name: Fields.mainStat, type: FieldType.string },
-      { name: Fields.secondaryStat, type: FieldType.string },
+      { name: Fields.mainStat, type: FieldType.string, config: { displayName: 'Total time (% of trace)' } },
+      { name: Fields.secondaryStat, type: FieldType.string, config: { displayName: 'Self time (% of total)' } },
       { name: Fields.color, type: FieldType.number, config: { color: { mode: 'continuous-GrYlRd' } } },
     ],
     meta: {
@@ -71,10 +71,10 @@ function convertTraceToGraph(data: TraceResponse): { nodes: Node[]; edges: Edge[
       [Fields.id]: span.spanID,
       [Fields.title]: process?.serviceName ?? '',
       [Fields.subTitle]: span.operationName,
-      [Fields.mainStat]: `total: ${toFixedNoTrailingZeros(span.duration / 1000)}ms (${toFixedNoTrailingZeros(
+      [Fields.mainStat]: `${toFixedNoTrailingZeros(span.duration / 1000)}ms (${toFixedNoTrailingZeros(
         (span.duration / traceDuration) * 100
       )}%)`,
-      [Fields.secondaryStat]: `self: ${toFixedNoTrailingZeros(selfDuration / 1000)}ms (${toFixedNoTrailingZeros(
+      [Fields.secondaryStat]: `${toFixedNoTrailingZeros(selfDuration / 1000)}ms (${toFixedNoTrailingZeros(
         (selfDuration / span.duration) * 100
       )}%)`,
       [Fields.color]: selfDuration / traceDuration,

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

@@ -96,8 +96,8 @@ export const testResponseNodesFields = toNodesFrame([
   ['3fa414edcef6ad90', '0f5c1808567e4403'],
   ['tempo-querier', 'tempo-querier'],
   ['HTTP GET - api_traces_traceid', '/tempopb.Querier/FindTraceByID'],
-  ['total: 1049.14ms (100%)', 'total: 1.85ms (0.18%)'],
-  ['self: 1047.29ms (99.82%)', 'self: 1.85ms (100%)'],
+  ['1049.14ms (100%)', '1.85ms (0.18%)'],
+  ['1047.29ms (99.82%)', '1.85ms (100%)'],
   [0.9982395121342127, 0.0017604878657873442],
 ]);
 

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

@@ -42,8 +42,8 @@ export function createGraphFrames(data: DataFrame): DataFrame[] {
       { name: Fields.id, type: FieldType.string },
       { name: Fields.title, type: FieldType.string },
       { name: Fields.subTitle, type: FieldType.string },
-      { name: Fields.mainStat, type: FieldType.string },
-      { name: Fields.secondaryStat, type: FieldType.string },
+      { name: Fields.mainStat, type: FieldType.string, config: { displayName: 'Total time (% of trace)' } },
+      { name: Fields.secondaryStat, type: FieldType.string, config: { displayName: 'Self time (% of total)' } },
       { name: Fields.color, type: FieldType.number, config: { color: { mode: 'continuous-GrYlRd' } } },
     ],
     meta: {