Graph: Adds onHorizontalRegionSelected (#19083)

* Refactor: Renamed and changed Signature for OnHorizontalRegionSelected

* Refactor: Adds onHorizontalRegionSelected to GraphPanelController

* Refactor: Moves TimeSrv call to PanelChrome instead

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -2,9 +2,8 @@
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import uniqBy from 'lodash/uniqBy';
-
 // Types
-import { TimeRange, GraphSeriesXY, AbsoluteTimeRange, TimeZone, DefaultTimeZone } from '@grafana/data';
+import { TimeRange, GraphSeriesXY, TimeZone, DefaultTimeZone } from '@grafana/data';
 
 export interface GraphProps {
   series: GraphSeriesXY[];
@@ -17,7 +16,7 @@ export interface GraphProps {
   height: number;
   isStacked?: boolean;
   lineWidth?: number;
-  onSelectionChanged?: (range: AbsoluteTimeRange) => void;
+  onHorizontalRegionSelected?: (from: number, to: number) => void;
 }
 
 export class Graph extends PureComponent<GraphProps> {
@@ -49,12 +48,9 @@ export class Graph extends PureComponent<GraphProps> {
   }
 
   onPlotSelected = (event: JQueryEventObject, ranges: { xaxis: { from: number; to: number } }) => {
-    const { onSelectionChanged } = this.props;
-    if (onSelectionChanged) {
-      onSelectionChanged({
-        from: ranges.xaxis.from,
-        to: ranges.xaxis.to,
-      });
+    const { onHorizontalRegionSelected } = this.props;
+    if (onHorizontalRegionSelected) {
+      onHorizontalRegionSelected(ranges.xaxis.from, ranges.xaxis.to);
     }
   };
 
@@ -63,7 +59,18 @@ export class Graph extends PureComponent<GraphProps> {
       return;
     }
 
-    const { width, series, timeRange, showLines, showBars, showPoints, isStacked, lineWidth, timeZone } = this.props;
+    const {
+      width,
+      series,
+      timeRange,
+      showLines,
+      showBars,
+      showPoints,
+      isStacked,
+      lineWidth,
+      timeZone,
+      onHorizontalRegionSelected,
+    } = this.props;
 
     if (!width) {
       return;
@@ -136,7 +143,7 @@ export class Graph extends PureComponent<GraphProps> {
         labelMarginX: 0,
       },
       selection: {
-        mode: 'x',
+        mode: onHorizontalRegionSelected ? 'x' : null,
         color: '#666',
       },
     };

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { css } from 'emotion';
-import { GraphSeriesValue, AbsoluteTimeRange } from '@grafana/data';
+import { GraphSeriesValue } from '@grafana/data';
 
 import { Graph, GraphProps } from './Graph';
 import { LegendRenderOptions, LegendItem, LegendDisplayMode } from '../Legend/Legend';
@@ -22,7 +22,6 @@ export interface GraphWithLegendProps extends GraphProps, LegendRenderOptions {
   onSeriesAxisToggle?: SeriesAxisToggleHandler;
   onSeriesToggle?: (label: string, event: React.MouseEvent<HTMLElement>) => void;
   onToggleSort: (sortBy: string) => void;
-  onSelectionChanged?: (range: AbsoluteTimeRange) => void;
 }
 
 const getGraphWithLegendStyles = ({ placement }: GraphWithLegendProps) => ({
@@ -70,7 +69,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
     hideZero,
     isStacked,
     lineWidth,
-    onSelectionChanged,
+    onHorizontalRegionSelected,
     timeZone,
   } = props;
   const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props);
@@ -104,7 +103,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
           key={isLegendVisible ? 'legend-visible' : 'legend-invisible'}
           isStacked={isStacked}
           lineWidth={lineWidth}
-          onSelectionChanged={onSelectionChanged}
+          onHorizontalRegionSelected={onHorizontalRegionSelected}
         />
       </div>
 

packages/grafana-ui/src/types/panel.ts

@@ -1,5 +1,5 @@
 import { ComponentClass, ComponentType } from 'react';
-import { LoadingState, DataFrame, TimeRange, TimeZone, ScopedVars } from '@grafana/data';
+import { LoadingState, DataFrame, TimeRange, TimeZone, ScopedVars, AbsoluteTimeRange } from '@grafana/data';
 import { DataQueryRequest, DataQueryError } from './datasource';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 
@@ -30,6 +30,7 @@ export interface PanelProps<T = any> {
   width: number;
   height: number;
   replaceVariables: InterpolateFunction;
+  onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
 }
 
 export interface PanelEditorProps<T = any> {

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>