TimeSeries: ensure series overrides containing color are migrated, and migrate previous fieldConfig when changing panel type (#35676)

* migrate previous fieldConfig when changing panel type * TimeSeries: ensure a color series override is migrated correctly * TimeSeries: update test description to be more accurate * TimeSeries: update snapshot
2025-02-25 18:55:37 -06:00 · 2021-06-17 11:18:36 +01:00 · 2021-06-17 11:18:36 +01:00 · 4618fd34a9
commit 4618fd34a9
parent 4cdcb3103a
3 changed files with 197 additions and 28 deletions
--- a/public/app/plugins/panel/timeseries/snapshots/migrations.test.ts.snap
+++ b/public/app/plugins/panel/timeseries/snapshots/migrations.test.ts.snap
@ -101,6 +101,60 @@ Object {
 }
 `;

+exports[`Graph Migrations preserves colors from series overrides 1`] = `
+Object {
+  "fieldConfig": Object {
+    "defaults": Object {
+      "custom": Object {
+        "axisPlacement": "hidden",
+        "drawStyle": "line",
+        "fillOpacity": 60,
+        "gradientMode": "opacity",
+        "lineInterpolation": "stepAfter",
+        "lineWidth": 1,
+        "showPoints": "never",
+        "spanNulls": true,
+      },
+      "nullValueMode": "null",
+      "unit": "short",
+    },
+    "overrides": Array [
+      Object {
+        "matcher": Object {
+          "id": "byName",
+          "options": "A-series",
+        },
+        "properties": Array [
+          Object {
+            "id": "color",
+            "value": Object {
+              "fixedColor": "rgba(165, 72, 170, 0.77)",
+              "mode": "fixed",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "options": Object {
+    "legend": Object {
+      "calcs": Array [
+        "mean",
+        "lastNotNull",
+        "max",
+        "min",
+        "sum",
+      ],
+      "displayMode": "table",
+      "placement": "bottom",
+    },
+    "tooltip": Object {
+      "mode": "single",
+    },
+  },
+}
+`;
+
 exports[`Graph Migrations simple bars 1`] = `
 Object {
  "fieldConfig": Object {
--- a/public/app/plugins/panel/timeseries/migrations.test.ts
+++ b/public/app/plugins/panel/timeseries/migrations.test.ts
@ -1,7 +1,16 @@
-import { PanelModel } from '@grafana/data';
+import { PanelModel, FieldConfigSource } from '@grafana/data';
 import { graphPanelChangedHandler } from './migrations';

 describe('Graph Migrations', () => {
+  let prevFieldConfig: FieldConfigSource;
+
+  beforeEach(() => {
+    prevFieldConfig = {
+      defaults: {},
+      overrides: [],
+    };
+  });
+
  it('simple bars', () => {
    const old: any = {
      angular: {
@ -9,7 +18,7 @@ describe('Graph Migrations', () => {
      },
    };
    const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
    expect(panel).toMatchSnapshot();
  });

@ -18,7 +27,16 @@ describe('Graph Migrations', () => {
      angular: stairscase,
    };
    const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+
+    prevFieldConfig = {
+      defaults: {
+        custom: {},
+        unit: 'areaF2',
+        displayName: 'DISPLAY NAME',
+      },
+      overrides: [],
+    };
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
    expect(panel).toMatchSnapshot();
  });

@ -27,7 +45,7 @@ describe('Graph Migrations', () => {
      angular: twoYAxis,
    };
    const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
    expect(panel).toMatchSnapshot();
  });

@ -36,7 +54,16 @@ describe('Graph Migrations', () => {
      angular: stepedColordLine,
    };
    const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
+    expect(panel).toMatchSnapshot();
+  });
+
+  it('preserves colors from series overrides', () => {
+    const old: any = {
+      angular: customColor,
+    };
+    const panel = {} as PanelModel;
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
    expect(panel).toMatchSnapshot();
  });

@ -56,7 +83,7 @@ describe('Graph Migrations', () => {
        },
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel).toMatchSnapshot();
    });
    test('with single value', () => {
@ -74,7 +101,7 @@ describe('Graph Migrations', () => {
        },
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel).toMatchSnapshot();
    });
    test('with multiple values', () => {
@ -82,7 +109,7 @@ describe('Graph Migrations', () => {
        angular: legend,
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel).toMatchSnapshot();
    });
  });
@ -93,7 +120,7 @@ describe('Graph Migrations', () => {
        angular: stacking,
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel).toMatchSnapshot();
    });
    test('groups', () => {
@ -101,7 +128,7 @@ describe('Graph Migrations', () => {
        angular: stackingGroups,
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel).toMatchSnapshot();
    });
  });
@ -131,7 +158,7 @@ describe('Graph Migrations', () => {
        },
      };
      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('area');
      expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
        Array [
@ -176,7 +203,7 @@ describe('Graph Migrations', () => {
      };

      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('line+area');
      expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
        Array [
@ -213,7 +240,7 @@ describe('Graph Migrations', () => {
      };

      const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
      expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('line+area');
      expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
        Array [
@ -266,22 +293,97 @@ describe('Graph Migrations', () => {
        ],
      };

-      panel.options = graphPanelChangedHandler(panel, 'graph', {});
+      panel.options = graphPanelChangedHandler(panel, 'graph', {}, prevFieldConfig);
      expect(panel.fieldConfig.defaults.custom.hideFrom).toEqual({ viz: false, legend: false, tooltip: false });
      expect(panel.fieldConfig.overrides[0].properties[0].value).toEqual({ viz: true, legend: false, tooltip: false });
    });
  });
 });

-const stairscase = {
-  fieldConfig: {
-    defaults: {
-      custom: {},
-      unit: 'areaF2',
-      displayName: 'DISPLAY NAME',
-    },
-    overrides: [],
+const customColor = {
+  aliasColors: {},
+  dashLength: 10,
+  fill: 5,
+  fillGradient: 6,
+  legend: {
+    avg: true,
+    current: true,
+    max: true,
+    min: true,
+    show: true,
+    total: true,
+    values: true,
+    alignAsTable: true,
  },
+  lines: true,
+  linewidth: 1,
+  nullPointMode: 'null',
+  options: {
+    alertThreshold: true,
+  },
+  pointradius: 2,
+  seriesOverrides: [
+    {
+      $$hashKey: 'object:12',
+      alias: 'A-series',
+      color: 'rgba(165, 72, 170, 0.77)',
+    },
+  ],
+  spaceLength: 10,
+  steppedLine: true,
+  thresholds: [],
+  timeRegions: [],
+  title: 'Panel Title',
+  tooltip: {
+    shared: true,
+    sort: 0,
+    value_type: 'individual',
+  },
+  type: 'graph',
+  xaxis: {
+    buckets: null,
+    mode: 'time',
+    name: null,
+    show: true,
+    values: [],
+  },
+  yaxes: [
+    {
+      $$hashKey: 'object:42',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: false,
+    },
+    {
+      $$hashKey: 'object:43',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: true,
+    },
+  ],
+  yaxis: {
+    align: false,
+    alignLevel: null,
+  },
+  timeFrom: null,
+  timeShift: null,
+  bars: false,
+  dashes: false,
+  hiddenSeries: false,
+  percentage: false,
+  points: false,
+  stack: false,
+  decimals: 1,
+  datasource: null,
+};
+
+const stairscase = {
  aliasColors: {},
  dashLength: 10,
  fill: 5,
--- a/public/app/plugins/panel/timeseries/migrations.ts
+++ b/public/app/plugins/panel/timeseries/migrations.ts
@ -8,7 +8,7 @@ import {
  FieldMatcherID,
  fieldReducers,
  NullValueMode,
-  PanelModel,
+  PanelTypeChangedHandler,
  Threshold,
  ThresholdsMode,
 } from '@grafana/data';
@ -32,14 +32,18 @@ import { defaultGraphConfig } from './config';
 /**
 * This is called when the panel changes from another panel
 */
-export const graphPanelChangedHandler = (
-  panel: PanelModel<Partial<TimeSeriesOptions>> | any,
-  prevPluginId: string,
-  prevOptions: any
+export const graphPanelChangedHandler: PanelTypeChangedHandler = (
+  panel,
+  prevPluginId,
+  prevOptions,
+  prevFieldConfig
 ) => {
  // Changing from angular/flot panel to react/uPlot
  if (prevPluginId === 'graph' && prevOptions.angular) {
-    const { fieldConfig, options } = flotToGraphOptions(prevOptions.angular);
+    const { fieldConfig, options } = flotToGraphOptions({
+      ...prevOptions.angular,
+      fieldConfig: prevFieldConfig,
+    });
    panel.fieldConfig = fieldConfig; // Mutates the incoming panel
    return options;
  }
@ -224,6 +228,15 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
              value: { mode: StackingMode.Normal, group: v },
            });
            break;
+          case 'color':
+            rule.properties.push({
+              id: 'color',
+              value: {
+                fixedColor: v,
+                mode: FieldColorModeId.Fixed,
+              },
+            });
+            break;
          default:
            console.log('Ignore override migration:', seriesOverride.alias, p, v);
        }