From 7ace80c71cce5d3e0065590e3c9d2aee1363d3f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Mon, 16 Sep 2019 09:31:22 +0200 Subject: [PATCH] Graph: Adds onHorizontalRegionSelected (#19083) * Refactor: Renamed and changed Signature for OnHorizontalRegionSelected * Refactor: Adds onHorizontalRegionSelected to GraphPanelController * Refactor: Moves TimeSrv call to PanelChrome instead --- .../grafana-ui/src/components/Graph/Graph.tsx | 29 ++++++++++++------- .../src/components/Graph/GraphWithLegend.tsx | 7 ++--- packages/grafana-ui/src/types/panel.ts | 3 +- .../dashboard/dashgrid/PanelChrome.tsx | 16 ++++++---- .../features/explore/ExploreGraphPanel.tsx | 6 ++-- .../app/plugins/panel/graph2/GraphPanel.tsx | 13 +++++++-- .../panel/graph2/GraphPanelController.tsx | 11 ++++++- 7 files changed, 56 insertions(+), 29 deletions(-) diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index 7db0aa699bc..942cbc07b61 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/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 { @@ -49,12 +48,9 @@ export class Graph extends PureComponent { } 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 { 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 { labelMarginX: 0, }, selection: { - mode: 'x', + mode: onHorizontalRegionSelected ? 'x' : null, color: '#666', }, }; diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx index 61d4f9b071a..e8e33c3873d 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx +++ b/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) => void; onToggleSort: (sortBy: string) => void; - onSelectionChanged?: (range: AbsoluteTimeRange) => void; } const getGraphWithLegendStyles = ({ placement }: GraphWithLegendProps) => ({ @@ -70,7 +69,7 @@ export const GraphWithLegend: React.FunctionComponent = (p hideZero, isStacked, lineWidth, - onSelectionChanged, + onHorizontalRegionSelected, timeZone, } = props; const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props); @@ -104,7 +103,7 @@ export const GraphWithLegend: React.FunctionComponent = (p key={isLegendVisible ? 'legend-visible' : 'legend-invisible'} isStacked={isStacked} lineWidth={lineWidth} - onSelectionChanged={onSelectionChanged} + onHorizontalRegionSelected={onHorizontalRegionSelected} /> diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 440c55c664a..3eeab063966 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/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 { width: number; height: number; replaceVariables: InterpolateFunction; + onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void; } export interface PanelEditorProps { diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index bf3c379f081..baf8ef2ca0a 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/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 { 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 { renderCounter={renderCounter} replaceVariables={this.replaceVariables} onOptionsChange={this.onOptionsChange} + onChangeTimeRange={this.onChangeTimeRange} /> diff --git a/public/app/features/explore/ExploreGraphPanel.tsx b/public/app/features/explore/ExploreGraphPanel.tsx index 4ff4140e773..f3ebfd3e9d0 100644 --- a/public/app/features/explore/ExploreGraphPanel.tsx +++ b/public/app/features/explore/ExploreGraphPanel.tsx @@ -79,9 +79,9 @@ class UnThemedExploreGraphPanel extends PureComponent { } }; - 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 { isStacked={isStacked} lineWidth={lineWidth} onSeriesToggle={onSeriesToggle} - onSelectionChanged={this.onChangeTime} + onHorizontalRegionSelected={this.onChangeTime} /> ); }} diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx index 285a63de1f1..e1804521201 100644 --- a/public/app/plugins/panel/graph2/GraphPanel.tsx +++ b/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 = ({ height, options, onOptionsChange, + onChangeTimeRange, }) => { if (!data) { return ( @@ -35,8 +36,13 @@ export const GraphPanel: React.FunctionComponent = ({ }; const { asTable, isVisible, ...legendProps } = legendOptions; return ( - - {({ onSeriesToggle, ...controllerApi }) => { + + {({ onSeriesToggle, onHorizontalRegionSelected, ...controllerApi }) => { return ( = ({ sortLegendBy={legendOptions.sortBy} sortLegendDesc={legendOptions.sortDesc} onSeriesToggle={onSeriesToggle} + onHorizontalRegionSelected={onHorizontalRegionSelected} {...graphProps} {...legendProps} {...controllerApi} diff --git a/public/app/plugins/panel/graph2/GraphPanelController.tsx b/public/app/plugins/panel/graph2/GraphPanelController.tsx index eede30143c8..107dbcac755 100644 --- a/public/app/plugins/panel/graph2/GraphPanelController.tsx +++ b/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) => 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