From 9fd62b80d939d79ddf02c85e314ea09ab5149a8b Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Thu, 8 Nov 2018 14:44:12 +0100 Subject: [PATCH] wip: panel-header: Start implementing the applyPanelTimeOverrides in the react panels by moving it to a util, make it pure and call it from angular and react. --- .../dashboard/dashgrid/PanelChrome.tsx | 34 ++++++--- .../dashgrid/PanelHeader/PanelHeader.tsx | 12 ++-- public/app/features/dashboard/panel_model.ts | 5 ++ public/app/features/dashboard/utils/panel.ts | 71 ++++++++++++++++++- .../app/features/panel/metrics_panel_ctrl.ts | 49 +++---------- public/app/types/index.ts | 2 + public/app/types/series.ts | 5 ++ 7 files changed, 121 insertions(+), 57 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index f6fc9028726..e6d53e6f844 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -2,16 +2,19 @@ import React, { ComponentClass, PureComponent } from 'react'; // Services -import { getTimeSrv } from '../time_srv'; +import { getTimeSrv, TimeSrv } from '../time_srv'; // Components import { PanelHeader } from './PanelHeader/PanelHeader'; import { DataPanel } from './DataPanel'; +// Utils +import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel'; + // Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; -import { TimeRange, PanelProps } from 'app/types'; +import { TimeData, PanelProps } from 'app/types'; export interface Props { panel: PanelModel; @@ -22,16 +25,22 @@ export interface Props { export interface State { refreshCounter: number; renderCounter: number; - timeRange?: TimeRange; + timeData: TimeData; } export class PanelChrome extends PureComponent { + timeSrv: TimeSrv = getTimeSrv(); + constructor(props) { super(props); this.state = { refreshCounter: 0, renderCounter: 0, + timeData: { + timeInfo: '', + timeRange: this.timeSrv.timeRange(), + }, }; } @@ -46,13 +55,18 @@ export class PanelChrome extends PureComponent { } onRefresh = () => { - const timeSrv = getTimeSrv(); - const timeRange = timeSrv.timeRange(); + console.log('onRefresh'); + if (!this.isVisible) { + return; + } + const currTimeData = this.state.timeData; + const { panel } = this.props; + const timeData = applyPanelTimeOverrides(panel, currTimeData); this.setState(prevState => ({ ...prevState, refreshCounter: this.state.refreshCounter + 1, - timeRange: timeRange, + timeData, })); }; @@ -70,7 +84,7 @@ export class PanelChrome extends PureComponent { render() { const { panel, dashboard } = this.props; - const { refreshCounter, timeRange, renderCounter } = this.state; + const { refreshCounter, timeData, renderCounter } = this.state; const { datasource, targets } = panel; const PanelComponent = this.props.component; @@ -78,12 +92,12 @@ export class PanelChrome extends PureComponent { console.log('panelChrome render'); return (
- +
@@ -93,7 +107,7 @@ export class PanelChrome extends PureComponent { diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index ab3081ba21e..9fed23ba3ab 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -9,6 +9,7 @@ import { PanelModel } from 'app/features/dashboard/panel_model'; export interface Props { panel: PanelModel; dashboard: DashboardModel; + timeInfo: string; } export class PanelHeader extends PureComponent { @@ -16,7 +17,7 @@ export class PanelHeader extends PureComponent { const isFullscreen = false; const isLoading = false; const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen }); - const { panel, dashboard } = this.props; + const { panel, dashboard, timeInfo } = this.props; return (
@@ -39,10 +40,11 @@ export class PanelHeader extends PureComponent { - - - 4m - + {timeInfo ? ( + + {timeInfo} + + ) : null}
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index ed032a118fe..913431d7f0c 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -42,6 +42,11 @@ export class PanelModel { datasource: string; thresholds?: any; + snapshotData?: any; + timeFrom?: any; + timeShift?: any; + hideTimeOverride?: any; + // non persisted fullscreen: boolean; isEditing: boolean; diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts index 151c1ea8d61..2f3c62ef5bd 100644 --- a/public/app/features/dashboard/utils/panel.ts +++ b/public/app/features/dashboard/utils/panel.ts @@ -1,7 +1,21 @@ -import appEvents from 'app/core/app_events'; +// Store +import store from 'app/core/store'; + +// Models import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; -import store from 'app/core/store'; +import { TimeData } from 'app/types'; + +// Utils +import { isString as _isString } from 'lodash'; +import * as rangeUtil from 'app/core/utils/rangeutil'; +import * as dateMath from 'app/core/utils/datemath'; +import appEvents from 'app/core/app_events'; + +// Services +import templateSrv from 'app/features/templating/template_srv'; + +// Constants import { LS_PANEL_COPY_KEY } from 'app/core/constants'; export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => { @@ -84,3 +98,56 @@ export const toggleLegend = (panel: PanelModel) => { // panel.legend.show = !panel.legend.show; refreshPanel(panel); }; + +export const applyPanelTimeOverrides = (panel: PanelModel, timeData: TimeData): TimeData => { + const { timeRange } = timeData; + const newTimeData = { ...timeData }; + + if (panel.timeFrom) { + const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars); + const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated); + if (timeFromInfo.invalid) { + newTimeData.timeInfo = 'invalid time override'; + return newTimeData; + } + + if (_isString(timeRange.raw.from)) { + const timeFromDate = dateMath.parse(timeFromInfo.from); + newTimeData.timeInfo = timeFromInfo.display; + newTimeData.timeRange = { + from: timeFromDate, + to: dateMath.parse(timeFromInfo.to), + raw: { + from: timeFromInfo.from, + to: timeFromInfo.to, + }, + }; + } + } + + if (panel.timeShift) { + const timeShiftInterpolated = templateSrv.replace(panel.timeShift, panel.scopedVars); + const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated); + if (timeShiftInfo.invalid) { + newTimeData.timeInfo = 'invalid timeshift'; + return newTimeData; + } + + const timeShift = '-' + timeShiftInterpolated; + newTimeData.timeInfo = ' timeshift ' + timeShift; + newTimeData.timeRange = { + from: dateMath.parseDateMath(timeShift, timeRange.from, false), + to: dateMath.parseDateMath(timeShift, timeRange.to, true), + raw: { + from: timeRange.from, + to: timeRange.to, + }, + }; + } + + if (panel.hideTimeOverride) { + newTimeData.timeInfo = ''; + } + + return newTimeData; +}; diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index e517c48bb59..a023e0b54f5 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -4,10 +4,10 @@ import _ from 'lodash'; import config from 'app/core/config'; import kbn from 'app/core/utils/kbn'; import { PanelCtrl } from 'app/features/panel/panel_ctrl'; -import * as rangeUtil from 'app/core/utils/rangeutil'; -import * as dateMath from 'app/core/utils/datemath'; import { getExploreUrl } from 'app/core/utils/explore'; import { metricsTabDirective } from './metrics_tab'; +import { applyPanelTimeOverrides as applyPanelTimeOverridesUtil } from 'app/features/dashboard/utils/panel'; +import { TimeData } from 'app/types'; class MetricsPanelCtrl extends PanelCtrl { scope: any; @@ -164,45 +164,14 @@ class MetricsPanelCtrl extends PanelCtrl { } applyPanelTimeOverrides() { - this.timeInfo = ''; + const timeData: TimeData = { + timeInfo: '', + timeRange: this.range, + }; - // check panel time overrrides - if (this.panel.timeFrom) { - const timeFromInterpolated = this.templateSrv.replace(this.panel.timeFrom, this.panel.scopedVars); - const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated); - if (timeFromInfo.invalid) { - this.timeInfo = 'invalid time override'; - return; - } - - if (_.isString(this.range.raw.from)) { - const timeFromDate = dateMath.parse(timeFromInfo.from); - this.timeInfo = timeFromInfo.display; - this.range.from = timeFromDate; - this.range.to = dateMath.parse(timeFromInfo.to); - this.range.raw.from = timeFromInfo.from; - this.range.raw.to = timeFromInfo.to; - } - } - - if (this.panel.timeShift) { - const timeShiftInterpolated = this.templateSrv.replace(this.panel.timeShift, this.panel.scopedVars); - const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated); - if (timeShiftInfo.invalid) { - this.timeInfo = 'invalid timeshift'; - return; - } - - const timeShift = '-' + timeShiftInterpolated; - this.timeInfo += ' timeshift ' + timeShift; - this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false); - this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true); - this.range.raw = { from: this.range.from, to: this.range.to }; - } - - if (this.panel.hideTimeOverride) { - this.timeInfo = ''; - } + const newTimeData = applyPanelTimeOverridesUtil(this.panel, timeData); + this.timeInfo = newTimeData.timeInfo; + this.range = newTimeData.timeRange; } issueQueries(datasource) { diff --git a/public/app/types/index.ts b/public/app/types/index.ts index fc176fed7e2..1238a924a04 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -9,6 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; import { Invitee, OrgUser, User, UsersState, UserState } from './user'; import { DataSource, DataSourcesState } from './datasources'; import { + TimeData, TimeRange, LoadingState, TimeSeries, @@ -66,6 +67,7 @@ export { OrgUser, User, UsersState, + TimeData, TimeRange, LoadingState, PanelProps, diff --git a/public/app/types/series.ts b/public/app/types/series.ts index 5396880611b..8f5d29c81aa 100644 --- a/public/app/types/series.ts +++ b/public/app/types/series.ts @@ -18,6 +18,11 @@ export interface TimeRange { raw: RawTimeRange; } +export interface TimeData { + timeRange: TimeRange; + timeInfo: string; +} + export type TimeSeriesValue = string | number | null; export type TimeSeriesPoints = TimeSeriesValue[][];