GraphPanel: use SeriesData directly (skip legacy transformation) (#17037)

* support streaming in angular panels

* keep the same dashboard number

* skip the legacy data conversion

* fix tests

public/app/features/panel/metrics_panel_ctrl.ts

@@ -15,6 +15,7 @@ import {
   PanelData,
   LoadingState,
   DataQueryResponse,
+  SeriesData,
 } from '@grafana/ui';
 import { Unsubscribable } from 'rxjs';
 import { PanelModel } from 'app/features/dashboard/state';
@@ -37,6 +38,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   skipDataOnInit: boolean;
   dataList: LegacyResponseData[];
   querySubscription?: Unsubscribable;
+  dataFormat = PanelQueryRunnerFormat.legacy;
 
   constructor($scope: any, $injector: any) {
     super($scope, $injector);
@@ -134,16 +136,6 @@ class MetricsPanelCtrl extends PanelCtrl {
 
       this.loading = false;
 
-      // The result should already be processed, but just in case
-      if (!data.legacy) {
-        data.legacy = data.series.map(v => {
-          if (isSeriesData(v)) {
-            return toLegacyResponseData(v);
-          }
-          return v;
-        });
-      }
-
       if (data.request) {
         const { range, timeInfo } = data.request;
         if (range) {
@@ -154,11 +146,25 @@ class MetricsPanelCtrl extends PanelCtrl {
         }
       }
 
-      // Make the results look like they came directly from a <6.2 datasource request
-      // NOTE: any object other than 'data' is no longer supported supported
-      this.handleQueryResult({
-        data: data.legacy,
-      });
+      if (this.dataFormat === PanelQueryRunnerFormat.legacy) {
+        // The result should already be processed, but just in case
+        if (!data.legacy) {
+          data.legacy = data.series.map(v => {
+            if (isSeriesData(v)) {
+              return toLegacyResponseData(v);
+            }
+            return v;
+          });
+        }
+
+        // Make the results look like they came directly from a <6.2 datasource request
+        // NOTE: any object other than 'data' is no longer supported supported
+        this.handleQueryResult({
+          data: data.legacy,
+        });
+      } else {
+        this.handleSeriesData(data.series);
+      }
     },
   };
 
@@ -198,7 +204,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     const queryRunner = panel.getQueryRunner();
 
     if (!this.querySubscription) {
-      this.querySubscription = queryRunner.subscribe(this.panelDataObserver, PanelQueryRunnerFormat.legacy);
+      this.querySubscription = queryRunner.subscribe(this.panelDataObserver, this.dataFormat);
     }
 
     return queryRunner.run({
@@ -216,6 +222,16 @@ class MetricsPanelCtrl extends PanelCtrl {
     });
   }
 
+  handleSeriesData(data: SeriesData[]) {
+    this.loading = false;
+
+    if (this.dashboard && this.dashboard.snapshot) {
+      this.panel.snapshotData = data;
+    }
+
+    // Subclasses that asked for SeriesData will override
+  }
+
   handleQueryResult(result: DataQueryResponse) {
     this.loading = false;
 

public/app/plugins/panel/graph/module.ts

@@ -13,6 +13,7 @@ import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { getColorFromHexRgbOrName, LegacyResponseData, SeriesData } from '@grafana/ui';
 import { getProcessedSeriesData } from 'app/features/dashboard/state/PanelQueryState';
+import { PanelQueryRunnerFormat } from 'app/features/dashboard/state/PanelQueryRunner';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
@@ -128,6 +129,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     _.defaults(this.panel.legend, this.panelDefaults.legend);
     _.defaults(this.panel.xaxis, this.panelDefaults.xaxis);
 
+    this.dataFormat = PanelQueryRunnerFormat.series;
     this.processor = new DataProcessor(this.panel);
 
     this.events.on('render', this.onRender.bind(this));
@@ -188,8 +190,16 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.render([]);
   }
 
+  // This should only be called from the snapshot callback
   onDataReceived(dataList: LegacyResponseData[]) {
-    this.dataList = getProcessedSeriesData(dataList);
+    this.handleSeriesData(getProcessedSeriesData(dataList));
+  }
+
+  // Directly support SeriesData skipping event callbacks
+  handleSeriesData(data: SeriesData[]) {
+    super.handleSeriesData(data);
+
+    this.dataList = data;
     this.seriesList = this.processor.getSeriesList({
       dataList: this.dataList,
       range: this.range,