wip: panel-header: Move getResolution and calculateInterval into utils-functions and use the same code from react and angular

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

@@ -81,7 +81,6 @@ export class DataPanel extends Component<Props, State> {
     try {
       const dataSourceSrv = getDatasourceSrv();
       const ds = await dataSourceSrv.get(datasource);
-
       const queryOptions: DataQueryOptions = {
         timezone: 'browser',
         panelId: panelId,

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<Props, State> {
@@ -41,6 +45,10 @@ export class PanelChrome extends PureComponent<Props, State> {
         timeInfo: '',
         timeRange: this.timeSrv.timeRange(),
       },
+      interval: {
+        interval: undefined,
+        intervalMs: undefined,
+      },
     };
   }
 
@@ -63,10 +71,14 @@ export class PanelChrome extends PureComponent<Props, State> {
     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,
     }));
   };
 

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;

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,
+  };
+};

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;
-
-    // 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;
+    // 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;
+    // }
+
+    // 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() {