Transformations: Transpose should respect renamed field names (#105893)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

packages/grafana-data/src/transformations/transformers/transpose.test.ts

@@ -86,9 +86,17 @@ describe('Transpose transformer', () => {
         { name: 'env', type: FieldType.string, values: ['dev', 'prod', 'staging', 'release', 'beta'] },
         { name: 'january', type: FieldType.number, values: [11, 12, 13, 14, 15] },
         { name: 'february', type: FieldType.number, values: [6, 7, 8, 9, 10] },
-        { name: 'type', type: FieldType.string, values: ['metricA', 'metricB', 'metricC', 'metricD', 'metricE'] },
+        {
+          name: 'metricName',
+          type: FieldType.string,
+          values: ['metricA', 'metricB', 'metricC', 'metricD', 'metricE'],
+          config: {
+            displayName: 'type',
+          },
+        },
       ],
     });
+
     await expect(transformDataFrame([cfgB], [seriesB])).toEmitValuesWith((received) => {
       const result = received[0];
       expect(result[0].fields).toEqual([

packages/grafana-data/src/transformations/transformers/transpose.ts

@@ -1,5 +1,6 @@
 import { map } from 'rxjs/operators';
 
+import { cacheFieldDisplayNames } from '../../field/fieldState';
 import { DataFrame, Field, FieldType } from '../../types/dataFrame';
 import { DataTransformerInfo } from '../../types/transformations';
 
@@ -28,6 +29,8 @@ export const transposeTransformer: DataTransformerInfo<TransposeTransformerOptio
 };
 
 function transposeDataFrame(options: TransposeTransformerOptions, data: DataFrame[]): DataFrame[] {
+  cacheFieldDisplayNames(data);
+
   return data.map((frame) => {
     const firstField = frame.fields[0];
     const firstName = !options.firstFieldName ? 'Field' : options.firstFieldName;
@@ -38,8 +41,12 @@ function transposeDataFrame(options: TransposeTransformerOptions, data: DataFram
       ? [firstName, ...fieldValuesAsStrings(firstField, firstField.values)]
       : [firstName, ...firstField.values.map((_, i) => restName)];
     const rows = useFirstFieldAsHeaders
-      ? frame.fields.map((field) => field.name).slice(1)
-      : frame.fields.map((field) => field.name);
+      ? frame.fields
+          .map((field) => {
+            return field.state?.displayName ?? field.name;
+          })
+          .slice(1)
+      : frame.fields.map((field) => field.state?.displayName ?? field.name);
     const fieldType = determineFieldType(
       useFirstFieldAsHeaders
         ? frame.fields.map((field) => field.type).slice(1)