Timeseries: Time regions migration

public/app/plugins/panel/graph/tab_display.html

@@ -9,7 +9,7 @@ <h5>Migration</h5>
         Migrate
       </button>
     </p>
-    <p>Some features like colored time regions and negative transforms are not supported in the new panel yet.</p>    
+    <p>Some features like negative transforms are not supported in the new panel yet.</p>
   </div>
 
   <gf-form-switch

public/app/plugins/panel/timeseries/migrations.test.ts

@@ -2,17 +2,33 @@ import { cloneDeep } from 'lodash';
 
 import { PanelModel, FieldConfigSource, FieldMatcherID } from '@grafana/data';
 import { TooltipDisplayMode, SortOrder } from '@grafana/schema';
+import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { DashboardModel, PanelModel as PanelModelState } from 'app/features/dashboard/state';
+import { createDashboardModelFixture } from 'app/features/dashboard/state/__fixtures__/dashboardFixtures';
+import { GrafanaQueryType } from 'app/plugins/datasource/grafana/types';
+import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
 
 import { graphPanelChangedHandler } from './migrations';
 
 describe('Graph Migrations', () => {
   let prevFieldConfig: FieldConfigSource;
+  let dashboard: DashboardModel;
 
   beforeEach(() => {
     prevFieldConfig = {
       defaults: {},
       overrides: [],
     };
+
+    dashboard = createDashboardModelFixture({
+      id: 74,
+      version: 7,
+      annotations: {},
+      links: [],
+      panels: [],
+    });
+
+    getDashboardSrv().setCurrent(dashboard);
   });
 
   it('simple bars', () => {
@@ -82,6 +98,37 @@ describe('Graph Migrations', () => {
     expect(panel.fieldConfig.overrides[1].matcher.id).toBe(FieldMatcherID.byRegexp);
   });
 
+  describe('time regions', () => {
+    test('should migrate', () => {
+      const old = {
+        angular: {
+          timeRegions: [
+            {
+              colorMode: 'red',
+              fill: true,
+              fillColor: 'rgba(234, 112, 112, 0.12)',
+              fromDayOfWeek: 1,
+              line: true,
+              lineColor: 'rgba(237, 46, 24, 0.60)',
+              op: 'time',
+            },
+          ],
+        },
+      };
+
+      const panel = { datasource: { type: 'datasource', uid: 'gdev-testdata' } } as PanelModel;
+      dashboard.panels.push(new PanelModelState(panel));
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
+      expect(dashboard.panels).toHaveLength(1);
+      expect(dashboard.annotations.list).toHaveLength(2); // built-in + time region
+      expect(
+        dashboard.annotations.list.filter((annotation) => annotation.target?.queryType === GrafanaQueryType.TimeRegions)
+      ).toHaveLength(1);
+      expect(panel.datasource?.uid).toBe(MIXED_DATASOURCE_NAME);
+      expect(panel).toMatchSnapshot();
+    });
+  });
+
   describe('legend', () => {
     test('without values', () => {
       const old = {

public/app/plugins/panel/timeseries/migrations.ts

@@ -30,7 +30,11 @@ import {
   StackingMode,
   SortOrder,
   GraphTransform,
+  AnnotationQuery,
 } from '@grafana/schema';
+import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { GrafanaQuery, GrafanaQueryType, TimeRegionConfig } from 'app/plugins/datasource/grafana/types';
+import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
 
 import { defaultGraphConfig } from './config';
 import { PanelOptions } from './panelcfg.gen';
@@ -46,10 +50,24 @@ export const graphPanelChangedHandler: PanelTypeChangedHandler = (
 ) => {
   // Changing from angular/flot panel to react/uPlot
   if (prevPluginId === 'graph' && prevOptions.angular) {
-    const { fieldConfig, options } = graphToTimeseriesOptions({
+    const { fieldConfig, options, annotations } = graphToTimeseriesOptions({
       ...prevOptions.angular,
       fieldConfig: prevFieldConfig,
+      panel: panel,
     });
+
+    const dashboard = getDashboardSrv().getCurrent();
+    // @TODO constant uids/types
+    if (dashboard && annotations.length > 0) {
+      dashboard.annotations.list = [...dashboard.annotations.list, ...annotations];
+      if (panel?.datasource?.uid !== 'grafana') {
+        panel.datasource = {
+          uid: MIXED_DATASOURCE_NAME,
+          type: 'mixed',
+        };
+      }
+    }
+
     panel.fieldConfig = fieldConfig; // Mutates the incoming panel
     panel.alert = prevOptions.angular.alert;
     return options;
@@ -61,7 +79,13 @@ export const graphPanelChangedHandler: PanelTypeChangedHandler = (
   return {};
 };
 
-export function graphToTimeseriesOptions(angular: any): { fieldConfig: FieldConfigSource; options: PanelOptions } {
+export function graphToTimeseriesOptions(angular: any): {
+  fieldConfig: FieldConfigSource;
+  options: PanelOptions;
+  annotations: AnnotationQuery[];
+} {
+  let annotations: AnnotationQuery[] = [];
+
   const overrides: ConfigOverrideRule[] = angular.fieldConfig?.overrides ?? [];
   const yaxes = angular.yaxes ?? [];
   let y1 = getFieldConfigFromOldAxis(yaxes[0]);
@@ -352,6 +376,49 @@ export function graphToTimeseriesOptions(angular: any): { fieldConfig: FieldConf
     }
   }
 
+  // timeRegions migration
+  if (angular.timeRegions?.length) {
+    let regions: any[] = angular.timeRegions.map((old: GraphTimeRegionConfig, idx: number) => ({
+      name: `T${idx + 1}`,
+      color: old.colorMode !== 'custom' ? old.colorMode : old.fillColor,
+      line: old.line,
+      fill: old.fill,
+      fromDayOfWeek: old.fromDayOfWeek,
+      toDayOfWeek: old.toDayOfWeek,
+      from: old.from,
+      to: old.to,
+      timezone: 'utc',
+    }));
+
+    regions.forEach((region) => {
+      const queryTarget: GrafanaQuery = {
+        queryType: GrafanaQueryType.TimeRegions,
+        refId: 'Anno',
+        timeRegion: {
+          fromDayOfWeek: region.fromDayOfWeek,
+          toDayOfWeek: region.toDayOfWeek,
+          from: region.from,
+          to: region.to,
+        },
+      };
+
+      annotations.push({
+        datasource: {
+          type: 'datasource',
+          uid: 'grafana',
+        },
+        enable: true,
+        filter: {
+          exclude: false,
+          ids: [angular.panel.id],
+        },
+        iconColor: region.color,
+        name: region.name,
+        target: queryTarget,
+      });
+    });
+  }
+
   const tooltipConfig = angular.tooltip;
   if (tooltipConfig) {
     if (tooltipConfig.shared !== undefined) {
@@ -469,9 +536,18 @@ export function graphToTimeseriesOptions(angular: any): { fieldConfig: FieldConf
       overrides,
     },
     options,
+    annotations,
   };
 }
 
+interface GraphTimeRegionConfig extends TimeRegionConfig {
+  colorMode: string;
+  fill: boolean;
+  fillColor: string;
+  line: boolean;
+  lineColor: string;
+}
+
 function getThresholdColor(threshold: AngularThreshold): string {
   if (threshold.colorMode === 'critical') {
     return 'red';