Graph: Adds onHorizontalRegionSelected (#19083)

* Refactor: Renamed and changed Signature for OnHorizontalRegionSelected

* Refactor: Adds onHorizontalRegionSelected to GraphPanelController

* Refactor: Moves TimeSrv call to PanelChrome instead

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

@@ -2,11 +2,9 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { Unsubscribable } from 'rxjs';
-
 // Components
 import { PanelHeader } from './PanelHeader/PanelHeader';
-import { ErrorBoundary } from '@grafana/ui';
-
+import { ErrorBoundary, PanelData, PanelPlugin } from '@grafana/ui';
 // Utils & Services
 import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 import { applyPanelTimeOverrides, calculateInnerPanelHeight } from 'app/features/dashboard/utils/panel';
@@ -14,11 +12,9 @@ import { profiler } from 'app/core/profiler';
 import { getProcessedDataFrames } from '../state/runRequest';
 import templateSrv from 'app/features/templating/template_srv';
 import config from 'app/core/config';
-
 // Types
 import { DashboardModel, PanelModel } from '../state';
-import { PanelData, PanelPlugin } from '@grafana/ui';
-import { LoadingState, ScopedVars } from '@grafana/data';
+import { LoadingState, ScopedVars, AbsoluteTimeRange, toUtc } from '@grafana/data';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
@@ -219,6 +215,13 @@ export class PanelChrome extends PureComponent<Props, State> {
     return !(this.props.plugin.meta.skipDataQuery || this.hasPanelSnapshot);
   }
 
+  onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {
+    this.timeSrv.setTime({
+      from: toUtc(timeRange.from),
+      to: toUtc(timeRange.to),
+    });
+  };
+
   renderPanel(width: number, height: number): JSX.Element {
     const { panel, plugin } = this.props;
     const { renderCounter, data, isFirstLoad } = this.state;
@@ -255,6 +258,7 @@ export class PanelChrome extends PureComponent<Props, State> {
             renderCounter={renderCounter}
             replaceVariables={this.replaceVariables}
             onOptionsChange={this.onOptionsChange}
+            onChangeTimeRange={this.onChangeTimeRange}
           />
         </div>
       </>

public/app/features/explore/ExploreGraphPanel.tsx

@@ -79,9 +79,9 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
     }
   };
 
-  onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
+  onChangeTime = (from: number, to: number) => {
     const { onUpdateTimeRange } = this.props;
-    onUpdateTimeRange(absoluteRange);
+    onUpdateTimeRange({ from, to });
   };
 
   renderGraph = () => {
@@ -136,7 +136,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
               isStacked={isStacked}
               lineWidth={lineWidth}
               onSeriesToggle={onSeriesToggle}
-              onSelectionChanged={this.onChangeTime}
+              onHorizontalRegionSelected={this.onChangeTime}
             />
           );
         }}

public/app/plugins/panel/graph2/GraphPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PanelProps, GraphWithLegend /*, GraphSeriesXY*/ } from '@grafana/ui';
+import { PanelProps, GraphWithLegend } from '@grafana/ui';
 import { Options } from './types';
 import { GraphPanelController } from './GraphPanelController';
 import { LegendDisplayMode } from '@grafana/ui/src/components/Legend/Legend';
@@ -14,6 +14,7 @@ export const GraphPanel: React.FunctionComponent<GraphPanelProps> = ({
   height,
   options,
   onOptionsChange,
+  onChangeTimeRange,
 }) => {
   if (!data) {
     return (
@@ -35,8 +36,13 @@ export const GraphPanel: React.FunctionComponent<GraphPanelProps> = ({
   };
   const { asTable, isVisible, ...legendProps } = legendOptions;
   return (
-    <GraphPanelController data={data} options={options} onOptionsChange={onOptionsChange}>
-      {({ onSeriesToggle, ...controllerApi }) => {
+    <GraphPanelController
+      data={data}
+      options={options}
+      onOptionsChange={onOptionsChange}
+      onChangeTimeRange={onChangeTimeRange}
+    >
+      {({ onSeriesToggle, onHorizontalRegionSelected, ...controllerApi }) => {
         return (
           <GraphWithLegend
             timeRange={timeRange}
@@ -48,6 +54,7 @@ export const GraphPanel: React.FunctionComponent<GraphPanelProps> = ({
             sortLegendBy={legendOptions.sortBy}
             sortLegendDesc={legendOptions.sortDesc}
             onSeriesToggle={onSeriesToggle}
+            onHorizontalRegionSelected={onHorizontalRegionSelected}
             {...graphProps}
             {...legendProps}
             {...controllerApi}

public/app/plugins/panel/graph2/GraphPanelController.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PanelData, GraphSeriesToggler } from '@grafana/ui';
-import { GraphSeriesXY } from '@grafana/data';
+import { GraphSeriesXY, AbsoluteTimeRange } from '@grafana/data';
 
 import { getGraphSeriesModel } from './getGraphSeriesModel';
 import { Options, SeriesOptions } from './types';
@@ -12,6 +12,7 @@ interface GraphPanelControllerAPI {
   onSeriesColorChange: SeriesColorChangeHandler;
   onSeriesToggle: (label: string, event: React.MouseEvent<HTMLElement>) => void;
   onToggleSort: (sortBy: string) => void;
+  onHorizontalRegionSelected: (from: number, to: number) => void;
 }
 
 interface GraphPanelControllerProps {
@@ -19,6 +20,7 @@ interface GraphPanelControllerProps {
   options: Options;
   data: PanelData;
   onOptionsChange: (options: Options) => void;
+  onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
 }
 
 interface GraphPanelControllerState {
@@ -32,6 +34,7 @@ export class GraphPanelController extends React.Component<GraphPanelControllerPr
     this.onSeriesColorChange = this.onSeriesColorChange.bind(this);
     this.onSeriesAxisToggle = this.onSeriesAxisToggle.bind(this);
     this.onToggleSort = this.onToggleSort.bind(this);
+    this.onHorizontalRegionSelected = this.onHorizontalRegionSelected.bind(this);
 
     this.state = {
       graphSeriesModel: getGraphSeriesModel(
@@ -113,6 +116,11 @@ export class GraphPanelController extends React.Component<GraphPanelControllerPr
     });
   }
 
+  onHorizontalRegionSelected(from: number, to: number) {
+    const { onChangeTimeRange } = this.props;
+    onChangeTimeRange({ from, to });
+  }
+
   render() {
     const { children } = this.props;
     const { graphSeriesModel } = this.state;
@@ -126,6 +134,7 @@ export class GraphPanelController extends React.Component<GraphPanelControllerPr
             onSeriesAxisToggle: this.onSeriesAxisToggle,
             onToggleSort: this.onToggleSort,
             onSeriesToggle: onSeriesToggle,
+            onHorizontalRegionSelected: this.onHorizontalRegionSelected,
           });
         }}
       </GraphSeriesToggler>