From e55f3f883f38d7ffab837886e44c94ed159e59c1 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 12 Nov 2018 09:32:55 +0100 Subject: [PATCH] wip: panel-header: Move getResolution and calculateInterval into utils-functions and use the same code from react and angular --- .../features/dashboard/dashgrid/DataPanel.tsx | 1 - .../dashboard/dashgrid/PanelChrome.tsx | 14 ++++++- public/app/features/dashboard/panel_model.ts | 3 ++ public/app/features/dashboard/utils/panel.ts | 32 +++++++++++++++ .../app/features/panel/metrics_panel_ctrl.ts | 39 ++++++++++--------- 5 files changed, 69 insertions(+), 20 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index d0122363668..413cb788756 100644 --- a/public/app/features/dashboard/dashgrid/DataPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx @@ -81,7 +81,6 @@ export class DataPanel extends Component { try { const dataSourceSrv = getDatasourceSrv(); const ds = await dataSourceSrv.get(datasource); - const queryOptions: DataQueryOptions = { timezone: 'browser', panelId: panelId, diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index e6d53e6f844..b4a3621f87b 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -9,7 +9,7 @@ import { PanelHeader } from './PanelHeader/PanelHeader'; import { DataPanel } from './DataPanel'; // Utils -import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel'; +import { applyPanelTimeOverrides, getResolution, calculateInterval } from 'app/features/dashboard/utils/panel'; // Types import { PanelModel } from '../panel_model'; @@ -26,6 +26,10 @@ export interface State { refreshCounter: number; renderCounter: number; timeData: TimeData; + interval: { + interval: string; + intervalMs: number; + }; } export class PanelChrome extends PureComponent { @@ -41,6 +45,10 @@ export class PanelChrome extends PureComponent { timeInfo: '', timeRange: this.timeSrv.timeRange(), }, + interval: { + interval: undefined, + intervalMs: undefined, + }, }; } @@ -63,10 +71,14 @@ export class PanelChrome extends PureComponent { const { panel } = this.props; const timeData = applyPanelTimeOverrides(panel, currTimeData); + const resolution = getResolution(panel); + const interval = calculateInterval(panel, panel.datasource, timeData.timeRange, resolution); + this.setState(prevState => ({ ...prevState, refreshCounter: this.state.refreshCounter + 1, timeData, + interval, })); }; diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index 913431d7f0c..a77828adbce 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -47,6 +47,9 @@ export class PanelModel { timeShift?: any; hideTimeOverride?: any; + maxDataPoints?: any; + interval?: 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 2f3c62ef5bd..a9aa4ef1eb7 100644 --- a/public/app/features/dashboard/utils/panel.ts +++ b/public/app/features/dashboard/utils/panel.ts @@ -5,12 +5,14 @@ import store from 'app/core/store'; import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; import { TimeData } from 'app/types'; +import { TimeRange } from 'app/types/series'; // 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'; +import kbn from 'app/core/utils/kbn'; // Services import templateSrv from 'app/features/templating/template_srv'; @@ -151,3 +153,33 @@ export const applyPanelTimeOverrides = (panel: PanelModel, timeData: TimeData): return newTimeData; }; + +export const getResolution = (panel: PanelModel): number => { + const htmlEl = document.getElementsByTagName('html')[0]; + const width = htmlEl.getBoundingClientRect().width; // https://stackoverflow.com/a/21454625 + + return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24)); +}; + +export const calculateInterval = ( + panel: PanelModel, + datasource, + timeRange: TimeRange, + resolution: number +): { interval: string; intervalMs: number } => { + let intervalOverride = panel.interval; + + // if no panel interval check datasource + if (intervalOverride) { + intervalOverride = templateSrv.replace(intervalOverride, panel.scopedVars); + } else if (datasource && datasource.interval) { + intervalOverride = datasource.interval; + } + + const res = kbn.calculateInterval(timeRange, resolution, intervalOverride); + + return { + interval: res.interval, + intervalMs: res.intervalMs, + }; +}; diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index a023e0b54f5..ee5c55816de 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -1,12 +1,15 @@ -import $ from 'jquery'; import _ from 'lodash'; import config from 'app/core/config'; -import kbn from 'app/core/utils/kbn'; +// import kbn from 'app/core/utils/kbn'; import { PanelCtrl } from 'app/features/panel/panel_ctrl'; import { getExploreUrl } from 'app/core/utils/explore'; import { metricsTabDirective } from './metrics_tab'; -import { applyPanelTimeOverrides as applyPanelTimeOverridesUtil } from 'app/features/dashboard/utils/panel'; +import { + applyPanelTimeOverrides as applyPanelTimeOverridesUtil, + calculateInterval as calculateIntervalUtil, + getResolution, +} from 'app/features/dashboard/utils/panel'; import { TimeData } from 'app/types'; class MetricsPanelCtrl extends PanelCtrl { @@ -137,11 +140,7 @@ class MetricsPanelCtrl extends PanelCtrl { this.applyPanelTimeOverrides(); - if (this.panel.maxDataPoints) { - this.resolution = this.panel.maxDataPoints; - } else { - this.resolution = Math.ceil($(window).width() * (this.panel.gridPos.w / 24)); - } + this.resolution = getResolution(this.panel); this.calculateInterval(); @@ -149,18 +148,22 @@ class MetricsPanelCtrl extends PanelCtrl { } calculateInterval() { - let intervalOverride = this.panel.interval; + // let intervalOverride = this.panel.interval; - // if no panel interval check datasource - if (intervalOverride) { - intervalOverride = this.templateSrv.replace(intervalOverride, this.panel.scopedVars); - } else if (this.datasource && this.datasource.interval) { - intervalOverride = this.datasource.interval; - } + // // if no panel interval check datasource + // if (intervalOverride) { + // intervalOverride = this.templateSrv.replace(intervalOverride, this.panel.scopedVars); + // } else if (this.datasource && this.datasource.interval) { + // intervalOverride = this.datasource.interval; + // } - const res = kbn.calculateInterval(this.range, this.resolution, intervalOverride); - this.interval = res.interval; - this.intervalMs = res.intervalMs; + // const res = kbn.calculateInterval(this.range, this.resolution, intervalOverride); + // this.interval = res.interval; + // this.intervalMs = res.intervalMs; + + const interval = calculateIntervalUtil(this.panel, this.datasource, this.range, this.resolution); + this.interval = interval.interval; + this.intervalMs = this.intervalMs; } applyPanelTimeOverrides() {