Merge pull request #15136 from grafana/react-snapshots

React snapshots

public/app/features/dashboard/dashboard_model.ts

@@ -811,6 +811,10 @@ export class DashboardModel {
     return this.getTimezone() === 'utc';
   }
 
+  isSnapshot() {
+    return this.snapshot !== undefined;
+  }
+
   getTimezone() {
     return this.timezone ? this.timezone : contextSrv.user.timezone;
   }

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -3,15 +3,12 @@ import React, { Component } from 'react';
 import { Tooltip } from '@grafana/ui';
 
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
-
 // Services
-import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
-
+import { DatasourceSrv, getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 // Utils
 import kbn from 'app/core/utils/kbn';
-
 // Types
-import { TimeRange, TimeSeries, LoadingState, DataQueryResponse, DataQueryOptions } from '@grafana/ui/src/types';
+import { DataQueryOptions, DataQueryResponse, LoadingState, TimeRange, TimeSeries } from '@grafana/ui/src/types';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
@@ -32,6 +29,7 @@ export interface Props {
   minInterval?: string;
   maxDataPoints?: number;
   children: (r: RenderProps) => JSX.Element;
+  onDataResponse?: (data: DataQueryResponse) => void;
 }
 
 export interface State {
@@ -85,7 +83,17 @@ export class DataPanel extends Component<Props, State> {
   }
 
   private issueQueries = async () => {
-    const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
+    const {
+      isVisible,
+      queries,
+      datasource,
+      panelId,
+      dashboardId,
+      timeRange,
+      widthPixels,
+      maxDataPoints,
+      onDataResponse,
+    } = this.props;
 
     if (!isVisible) {
       return;
@@ -127,6 +135,10 @@ export class DataPanel extends Component<Props, State> {
         return;
       }
 
+      if (onDataResponse) {
+        onDataResponse(resp);
+      }
+
       this.setState({
         loading: LoadingState.Done,
         response: resp,

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -21,6 +21,7 @@ import { TimeRange } from '@grafana/ui';
 
 import variables from 'sass/_variables.scss';
 import templateSrv from 'app/features/templating/template_srv';
+import { DataQueryResponse } from '@grafana/ui/src';
 
 export interface Props {
   panel: PanelModel;
@@ -83,16 +84,42 @@ export class PanelChrome extends PureComponent<Props, State> {
     return templateSrv.replace(value, this.props.panel.scopedVars, format);
   };
 
+  onDataResponse = (dataQueryResponse: DataQueryResponse) => {
+    if (this.props.dashboard.isSnapshot()) {
+      this.props.panel.snapshotData = dataQueryResponse.data;
+    }
+  };
+
   get isVisible() {
     return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
   }
 
+  renderPanel(loading, timeSeries, width, height): JSX.Element {
+    const { panel, plugin } = this.props;
+    const { timeRange, renderCounter } = this.state;
+    const PanelComponent = plugin.exports.Panel;
+
+    return (
+      <div className="panel-content">
+        <PanelComponent
+          loading={loading}
+          timeSeries={timeSeries}
+          timeRange={timeRange}
+          options={panel.getOptions(plugin.exports.PanelDefaults)}
+          width={width - 2 * variables.panelHorizontalPadding}
+          height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
+          renderCounter={renderCounter}
+          onInterpolate={this.onInterpolate}
+        />
+      </div>
+    );
+  }
+
   render() {
-    const { panel, dashboard, plugin } = this.props;
-    const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
+    const { panel, dashboard } = this.props;
+    const { refreshCounter, timeRange, timeInfo } = this.state;
 
     const { datasource, targets, transparent } = panel;
-    const PanelComponent = plugin.exports.Panel;
     const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
     return (
       <AutoSizer>
@@ -113,6 +140,9 @@ export class PanelChrome extends PureComponent<Props, State> {
                 links={panel.links}
               />
 
+              {panel.snapshotData ? (
+                this.renderPanel(false, panel.snapshotData, width, height)
+              ) : (
                 <DataPanel
                   datasource={datasource}
                   queries={targets}
@@ -120,24 +150,13 @@ export class PanelChrome extends PureComponent<Props, State> {
                   isVisible={this.isVisible}
                   widthPixels={width}
                   refreshCounter={refreshCounter}
+                  onDataResponse={this.onDataResponse}
                 >
                   {({ loading, timeSeries }) => {
-                  return (
-                    <div className="panel-content">
-                      <PanelComponent
-                        loading={loading}
-                        timeSeries={timeSeries}
-                        timeRange={timeRange}
-                        options={panel.getOptions(plugin.exports.PanelDefaults)}
-                        width={width - 2 * variables.panelHorizontalPadding}
-                        height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
-                        renderCounter={renderCounter}
-                        onInterpolate={this.onInterpolate}
-                      />
-                    </div>
-                  );
+                    return this.renderPanel(loading, timeSeries, width, height);
                   }}
                 </DataPanel>
+              )}
             </div>
           );
         }}

public/app/features/dashboard/panel_model.ts

@@ -4,7 +4,7 @@ import _ from 'lodash';
 // Types
 import { Emitter } from 'app/core/utils/emitter';
 import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
-import { DataQuery } from '@grafana/ui/src/types';
+import { DataQuery, TimeSeries } from '@grafana/ui';
 
 export interface GridPos {
   x: number;
@@ -87,7 +87,7 @@ export class PanelModel {
   datasource: string;
   thresholds?: any;
 
-  snapshotData?: any;
+  snapshotData?: TimeSeries[];
   timeFrom?: any;
   timeShift?: any;
   hideTimeOverride?: any;