TablePanel: Do not prefix columns with frame name if multiple frames and override active (#45174)

* Fix bug where table panel shows column names prefixed with frame name * simplify && fix tests Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2025-02-25 18:55:37 -06:00 · 2022-02-11 11:47:48 +02:00 · 2022-02-11 11:47:48 +02:00 · a12f2e1d19
commit a12f2e1d19
parent cc49537965
9 changed files with 47 additions and 10 deletions
--- a/packages/grafana-data/src/field/fieldState.ts
+++ b/packages/grafana-data/src/field/fieldState.ts
@ -38,14 +38,16 @@ export function getFrameDisplayName(frame: DataFrame, index?: number) {

 export function getFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
  const existingTitle = field.state?.displayName;
+  const multipleFrames = Boolean(allFrames && allFrames.length > 1);

-  if (existingTitle) {
+  if (existingTitle && multipleFrames === field.state?.multipleFrames) {
    return existingTitle;
  }

  const displayName = calculateFieldDisplayName(field, frame, allFrames);
  field.state = field.state || {};
  field.state.displayName = displayName;
+  field.state.multipleFrames = multipleFrames;

  return displayName;
 }
--- a/packages/grafana-data/src/transformations/transformers/order.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/order.test.ts
@ -47,6 +47,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'temperature',
+              multipleFrames: false,
            },
          },
          {
@ -57,6 +58,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'humidity',
+              multipleFrames: false,
            },
          },
          {
@ -67,6 +69,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'time',
+              multipleFrames: false,
            },
          },
        ]);
@ -108,6 +111,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'humidity',
+              multipleFrames: false,
            },
          },
          {
@ -118,6 +122,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'time',
+              multipleFrames: false,
            },
          },
          {
@ -128,6 +133,7 @@ describe('Order Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'pressure',
+              multipleFrames: false,
            },
          },
        ]);
--- a/packages/grafana-data/src/transformations/transformers/organize.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/organize.test.ts
@ -52,6 +52,7 @@ describe('OrganizeFields Transformer', () => {
            name: 'temperature',
            state: {
              displayName: 'temperature',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
@ -64,6 +65,7 @@ describe('OrganizeFields Transformer', () => {
            name: 'humidity',
            state: {
              displayName: 'renamed_humidity',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
@ -113,6 +115,7 @@ describe('OrganizeFields Transformer', () => {
            name: 'time',
            state: {
              displayName: 'renamed_time',
+              multipleFrames: false,
            },
            type: FieldType.time,
            values: new ArrayVector([3000, 4000, 5000, 6000]),
@ -123,6 +126,7 @@ describe('OrganizeFields Transformer', () => {
            name: 'pressure',
            state: {
              displayName: 'pressure',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
--- a/packages/grafana-data/src/transformations/transformers/reduce.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/reduce.test.ts
@ -164,7 +164,7 @@ describe('Reducer Transformer', () => {
        {
          name: 'Field',
          type: FieldType.string,
-          values: new ArrayVector(['A temperature', 'A humidity']),
+          values: new ArrayVector(['temperature', 'humidity']),
          config: {},
        },
        {
@ -213,7 +213,7 @@ describe('Reducer Transformer', () => {
        {
          name: 'Field',
          type: FieldType.string,
-          values: new ArrayVector(['A temperature']),
+          values: new ArrayVector(['temperature']),
          config: {},
        },
        {
@ -286,16 +286,16 @@ describe('Reducer Transformer', () => {
    const seriesA = toDataFrame({
      name: 'a',
      fields: [
-        { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] },
-        { name: 'value', type: FieldType.number, values: [3, 4, 5, 6], state: { displayName: 'a' } },
+        { name: 'Time', type: FieldType.time, values: [3000, 4000, 5000, 6000] },
+        { name: 'Value', type: FieldType.number, values: [3, 4, 5, 6] },
      ],
    });

    const seriesB = toDataFrame({
      name: '2021',
      fields: [
-        { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] },
-        { name: 'value', type: FieldType.number, values: [7, 8, 9, 10], state: { displayName: '2021' } },
+        { name: 'Time', type: FieldType.time, values: [3000, 4000, 5000, 6000] },
+        { name: 'Value', type: FieldType.number, values: [7, 8, 9, 10] },
      ],
    });

--- a/packages/grafana-data/src/transformations/transformers/rename.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/rename.test.ts
@ -48,6 +48,7 @@ describe('Rename Transformer', () => {
            name: 'time',
            state: {
              displayName: 'Total time',
+              multipleFrames: false,
            },
            type: FieldType.time,
            values: new ArrayVector([3000, 4000, 5000, 6000]),
@ -60,6 +61,7 @@ describe('Rename Transformer', () => {
            name: 'temperature',
            state: {
              displayName: 'how cold is it?',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
@ -72,6 +74,7 @@ describe('Rename Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'Moistness',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
@ -115,6 +118,7 @@ describe('Rename Transformer', () => {
            labels: undefined,
            state: {
              displayName: 'ttl',
+              multipleFrames: false,
            },
            type: FieldType.time,
            values: new ArrayVector([3000, 4000, 5000, 6000]),
@ -125,6 +129,7 @@ describe('Rename Transformer', () => {
            name: 'pressure',
            state: {
              displayName: 'pressure',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
@ -137,6 +142,7 @@ describe('Rename Transformer', () => {
            name: 'humidity',
            state: {
              displayName: 'hum',
+              multipleFrames: false,
            },
            type: FieldType.number,
            values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
--- a/packages/grafana-data/src/transformations/transformers/renameByRegex.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/renameByRegex.test.ts
@ -46,6 +46,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Time",
              "state": Object {
                "displayName": "Time",
+                "multipleFrames": false,
              },
              "type": "time",
              "values": Array [
@ -62,6 +63,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Value",
              "state": Object {
                "displayName": "web-01",
+                "multipleFrames": false,
              },
              "type": "number",
              "values": Array [
@ -96,6 +98,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Time",
              "state": Object {
                "displayName": "Time",
+                "multipleFrames": false,
              },
              "type": "time",
              "values": Array [
@ -112,6 +115,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Value",
              "state": Object {
                "displayName": "web-01.example.com",
+                "multipleFrames": false,
              },
              "type": "number",
              "values": Array [
@ -147,6 +151,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Time",
              "state": Object {
                "displayName": "Time",
+                "multipleFrames": false,
              },
              "type": "time",
              "values": Array [
@ -163,6 +168,7 @@ describe('Rename By Regex Transformer', () => {
              "name": "Value",
              "state": Object {
                "displayName": "web-01.example.com",
+                "multipleFrames": false,
              },
              "type": "number",
              "values": Array [
--- a/packages/grafana-data/src/transformations/transformers/seriesToColumns.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/seriesToColumns.test.ts
@ -170,7 +170,9 @@ describe('SeriesToColumns Transformer', () => {
                "name": "even",
              },
              "name": "time",
-              "state": Object {},
+              "state": Object {
+                "multipleFrames": true,
+              },
              "type": "time",
              "values": Array [
                3000,
@ -208,7 +210,9 @@ describe('SeriesToColumns Transformer', () => {
                "name": "odd",
              },
              "name": "time",
-              "state": Object {},
+              "state": Object {
+                "multipleFrames": true,
+              },
              "type": "time",
              "values": Array [
                undefined,
@ -267,7 +271,9 @@ describe('SeriesToColumns Transformer', () => {
            Object {
              "config": Object {},
              "name": "time",
-              "state": Object {},
+              "state": Object {
+                "multipleFrames": true,
+              },
              "type": "time",
              "values": Array [
                1000,
--- a/packages/grafana-data/src/types/dataFrame.ts
+++ b/packages/grafana-data/src/types/dataFrame.ts
@ -175,6 +175,12 @@ export interface FieldState {
   * @internal -- we will try to make this unnecessary
   */
  origin?: DataFrameFieldIndex;
+
+  /**
+   * Boolean value is true if field is in a larger data set with multiple frames.
+   * This is only related to the cached displayName property above.
+   */
+  multipleFrames?: boolean;
 }

 /** @public */
--- a/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.test.ts
+++ b/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.test.ts
@ -101,6 +101,7 @@ describe('Lookup gazetteer', () => {
          "name": "values",
          "state": Object {
            "displayName": "values",
+            "multipleFrames": false,
          },
          "type": "number",
          "values": Array [