From 9fd62b80d939d79ddf02c85e314ea09ab5149a8b Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 8 Nov 2018 14:44:12 +0100
Subject: [PATCH 1/9] 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<Props, State> {
+  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<Props, State> {
   }
 
   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<Props, State> {
 
   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<Props, State> {
     console.log('panelChrome render');
     return (
       <div className="panel-container">
-        <PanelHeader panel={panel} dashboard={dashboard} />
+        <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeData.timeInfo} />
         <div className="panel-content">
           <DataPanel
             datasource={datasource}
             queries={targets}
-            timeRange={timeRange}
+            timeRange={timeData.timeRange}
             isVisible={this.isVisible}
             refreshCounter={refreshCounter}
           >
@@ -93,7 +107,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 <PanelComponent
                   loading={loading}
                   timeSeries={timeSeries}
-                  timeRange={timeRange}
+                  timeRange={timeData.timeRange}
                   options={panel.getOptions()}
                   renderCounter={renderCounter}
                 />
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<Props> {
@@ -16,7 +17,7 @@ export class PanelHeader extends PureComponent<Props> {
     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 (
       <div className={panelHeaderClass}>
@@ -39,10 +40,11 @@ export class PanelHeader extends PureComponent<Props> {
             </span>
 
             <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-
-            <span className="panel-time-info">
-              <i className="fa fa-clock-o" /> 4m
-            </span>
+            {timeInfo ? (
+              <span className="panel-time-info">
+                <i className="fa fa-clock-o" /> {timeInfo}
+              </span>
+            ) : null}
           </div>
         </div>
       </div>
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[][];

From e55f3f883f38d7ffab837886e44c94ed159e59c1 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 12 Nov 2018 09:32:55 +0100
Subject: [PATCH 2/9] 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<Props, State> {
     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<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,
     }));
   };
 
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() {

From 8117a7559ff0f5b2a53bdfb45e2f56073d704fe3 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 12 Nov 2018 10:35:46 +0100
Subject: [PATCH 3/9] wip: panel-header: Add proper typings to maxDataPoints
 and interval + remove code in comment

---
 public/app/features/dashboard/panel_model.ts    |  4 ++--
 public/app/features/panel/metrics_panel_ctrl.ts | 13 -------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index a77828adbce..d89f810e95a 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -47,8 +47,8 @@ export class PanelModel {
   timeShift?: any;
   hideTimeOverride?: any;
 
-  maxDataPoints?: any;
-  interval?: any;
+  maxDataPoints?: number;
+  interval?: string;
 
   // non persisted
   fullscreen: boolean;
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index ee5c55816de..8ac3c36cf0f 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -148,19 +148,6 @@ 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;
-
     const interval = calculateIntervalUtil(this.panel, this.datasource, this.range, this.resolution);
     this.interval = interval.interval;
     this.intervalMs = this.intervalMs;

From a3f1a1c6b391799feab5181bf0e9ec874dc0761c Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 12 Nov 2018 11:23:41 +0100
Subject: [PATCH 4/9] wip: panel-header: Remove the TimeData type

---
 .../dashboard/dashgrid/PanelChrome.tsx        | 26 +++++++++----------
 public/app/features/dashboard/utils/panel.ts  | 12 ++++++---
 .../app/features/panel/metrics_panel_ctrl.ts  |  8 +-----
 public/app/types/index.ts                     |  2 --
 public/app/types/series.ts                    |  5 ----
 5 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index b4a3621f87b..ab6f5e3c3b2 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -14,7 +14,7 @@ import { applyPanelTimeOverrides, getResolution, calculateInterval } from 'app/f
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { TimeData, PanelProps } from 'app/types';
+import { TimeRange, PanelProps } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
@@ -25,7 +25,8 @@ export interface Props {
 export interface State {
   refreshCounter: number;
   renderCounter: number;
-  timeData: TimeData;
+  timeInfo: string;
+  timeRange: TimeRange;
   interval: {
     interval: string;
     intervalMs: number;
@@ -41,10 +42,8 @@ export class PanelChrome extends PureComponent<Props, State> {
     this.state = {
       refreshCounter: 0,
       renderCounter: 0,
-      timeData: {
-        timeInfo: '',
-        timeRange: this.timeSrv.timeRange(),
-      },
+      timeInfo: '',
+      timeRange: this.timeSrv.timeRange(),
       interval: {
         interval: undefined,
         intervalMs: undefined,
@@ -67,9 +66,10 @@ export class PanelChrome extends PureComponent<Props, State> {
     if (!this.isVisible) {
       return;
     }
-    const currTimeData = this.state.timeData;
+
+    const { timeRange } = this.state;
     const { panel } = this.props;
-    const timeData = applyPanelTimeOverrides(panel, currTimeData);
+    const timeData = applyPanelTimeOverrides(panel, timeRange);
 
     const resolution = getResolution(panel);
     const interval = calculateInterval(panel, panel.datasource, timeData.timeRange, resolution);
@@ -77,8 +77,8 @@ export class PanelChrome extends PureComponent<Props, State> {
     this.setState(prevState => ({
       ...prevState,
       refreshCounter: this.state.refreshCounter + 1,
-      timeData,
       interval,
+      ...timeData,
     }));
   };
 
@@ -96,7 +96,7 @@ export class PanelChrome extends PureComponent<Props, State> {
 
   render() {
     const { panel, dashboard } = this.props;
-    const { refreshCounter, timeData, renderCounter } = this.state;
+    const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
     const { datasource, targets } = panel;
     const PanelComponent = this.props.component;
@@ -104,12 +104,12 @@ export class PanelChrome extends PureComponent<Props, State> {
     console.log('panelChrome render');
     return (
       <div className="panel-container">
-        <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeData.timeInfo} />
+        <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
         <div className="panel-content">
           <DataPanel
             datasource={datasource}
             queries={targets}
-            timeRange={timeData.timeRange}
+            timeRange={timeRange}
             isVisible={this.isVisible}
             refreshCounter={refreshCounter}
           >
@@ -119,7 +119,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 <PanelComponent
                   loading={loading}
                   timeSeries={timeSeries}
-                  timeRange={timeData.timeRange}
+                  timeRange={timeRange}
                   options={panel.getOptions()}
                   renderCounter={renderCounter}
                 />
diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index a9aa4ef1eb7..6a3d3449986 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -4,7 +4,6 @@ import store from 'app/core/store';
 // Models
 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
@@ -101,9 +100,14 @@ export const toggleLegend = (panel: PanelModel) => {
   refreshPanel(panel);
 };
 
-export const applyPanelTimeOverrides = (panel: PanelModel, timeData: TimeData): TimeData => {
-  const { timeRange } = timeData;
-  const newTimeData = { ...timeData };
+export const applyPanelTimeOverrides = (
+  panel: PanelModel,
+  timeRange: TimeRange
+): { timeInfo: string; timeRange: TimeRange } => {
+  const newTimeData = {
+    timeInfo: '',
+    timeRange: timeRange,
+  };
 
   if (panel.timeFrom) {
     const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars);
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index 8ac3c36cf0f..6168ddf27d5 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -10,7 +10,6 @@ import {
   calculateInterval as calculateIntervalUtil,
   getResolution,
 } from 'app/features/dashboard/utils/panel';
-import { TimeData } from 'app/types';
 
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
@@ -154,12 +153,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
 
   applyPanelTimeOverrides() {
-    const timeData: TimeData = {
-      timeInfo: '',
-      timeRange: this.range,
-    };
-
-    const newTimeData = applyPanelTimeOverridesUtil(this.panel, timeData);
+    const newTimeData = applyPanelTimeOverridesUtil(this.panel, this.range);
     this.timeInfo = newTimeData.timeInfo;
     this.range = newTimeData.timeRange;
   }
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 1238a924a04..fc176fed7e2 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -9,7 +9,6 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
 import {
-  TimeData,
   TimeRange,
   LoadingState,
   TimeSeries,
@@ -67,7 +66,6 @@ export {
   OrgUser,
   User,
   UsersState,
-  TimeData,
   TimeRange,
   LoadingState,
   PanelProps,
diff --git a/public/app/types/series.ts b/public/app/types/series.ts
index 8f5d29c81aa..5396880611b 100644
--- a/public/app/types/series.ts
+++ b/public/app/types/series.ts
@@ -18,11 +18,6 @@ export interface TimeRange {
   raw: RawTimeRange;
 }
 
-export interface TimeData {
-  timeRange: TimeRange;
-  timeInfo: string;
-}
-
 export type TimeSeriesValue = string | number | null;
 
 export type TimeSeriesPoints = TimeSeriesValue[][];

From e045169094c04a1d7664f6c7e7ab88820fa1580b Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 12 Nov 2018 11:26:47 +0100
Subject: [PATCH 5/9] wip: panel-header: Avoid null returning to get better
 code readability. High five @ peterholmberg

---
 .../features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 9fed23ba3ab..9c474d626c2 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -40,11 +40,11 @@ export class PanelHeader extends PureComponent<Props> {
             </span>
 
             <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-            {timeInfo ? (
+            {timeInfo && (
               <span className="panel-time-info">
                 <i className="fa fa-clock-o" /> {timeInfo}
               </span>
-            ) : null}
+            )}
           </div>
         </div>
       </div>

From 6d4d7c50329ca03104849ede5ac4dafadb7bc382 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 12 Nov 2018 11:38:41 +0100
Subject: [PATCH 6/9] wip: panel-header: On panel refresh, get new timeRange
 from timeSrv, not the old one from the state

---
 public/app/features/dashboard/dashgrid/PanelChrome.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index ab6f5e3c3b2..79af541769a 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -67,10 +67,9 @@ export class PanelChrome extends PureComponent<Props, State> {
       return;
     }
 
-    const { timeRange } = this.state;
     const { panel } = this.props;
+    const timeRange = this.timeSrv.timeRange();
     const timeData = applyPanelTimeOverrides(panel, timeRange);
-
     const resolution = getResolution(panel);
     const interval = calculateInterval(panel, panel.datasource, timeData.timeRange, resolution);
 

From f274195d817385a7c3848c5fe619e7360ba4ab38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 13 Nov 2018 15:05:07 +0100
Subject: [PATCH 7/9] wip: refactoring interval and time override handling

---
 .../dashboard/dashgrid/PanelChrome.tsx        | 35 ++++++-------------
 public/app/features/dashboard/time_srv.ts     |  3 +-
 public/app/features/dashboard/utils/panel.ts  |  2 +-
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 79af541769a..3bfa1d365b7 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, getResolution, calculateInterval } from 'app/features/dashboard/utils/panel';
+import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -25,12 +25,8 @@ export interface Props {
 export interface State {
   refreshCounter: number;
   renderCounter: number;
-  timeInfo: string;
-  timeRange: TimeRange;
-  interval: {
-    interval: string;
-    intervalMs: number;
-  };
+  timeInfo?: string;
+  timeRange?: TimeRange;
 }
 
 export class PanelChrome extends PureComponent<Props, State> {
@@ -42,12 +38,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     this.state = {
       refreshCounter: 0,
       renderCounter: 0,
-      timeInfo: '',
-      timeRange: this.timeSrv.timeRange(),
-      interval: {
-        interval: undefined,
-        intervalMs: undefined,
-      },
     };
   }
 
@@ -68,25 +58,20 @@ export class PanelChrome extends PureComponent<Props, State> {
     }
 
     const { panel } = this.props;
-    const timeRange = this.timeSrv.timeRange();
-    const timeData = applyPanelTimeOverrides(panel, timeRange);
-    const resolution = getResolution(panel);
-    const interval = calculateInterval(panel, panel.datasource, timeData.timeRange, resolution);
+    const timeData = applyPanelTimeOverrides(panel, this.timeSrv.timeRange());
 
-    this.setState(prevState => ({
-      ...prevState,
+    this.setState({
       refreshCounter: this.state.refreshCounter + 1,
-      interval,
-      ...timeData,
-    }));
+      timeRange: timeData.timeRange,
+      timeInfo: timeData.timeInfo,
+    });
   };
 
   onRender = () => {
     console.log('onRender');
-    this.setState(prevState => ({
-      ...prevState,
+    this.setState({
       renderCounter: this.state.renderCounter + 1,
-    }));
+    });
   };
 
   get isVisible() {
diff --git a/public/app/features/dashboard/time_srv.ts b/public/app/features/dashboard/time_srv.ts
index 03b4a408125..ac717de15c9 100644
--- a/public/app/features/dashboard/time_srv.ts
+++ b/public/app/features/dashboard/time_srv.ts
@@ -20,7 +20,7 @@ export class TimeSrv {
   private autoRefreshBlocked: boolean;
 
   /** @ngInject */
-  constructor(private $rootScope, private $timeout, private $location, private timer, private contextSrv) {
+  constructor($rootScope, private $timeout, private $location, private timer, private contextSrv) {
     // default time
     this.time = { from: '6h', to: 'now' };
 
@@ -189,7 +189,6 @@ export class TimeSrv {
       this.$location.search(urlParams);
     }
 
-    this.$rootScope.appEvent('time-range-changed', this.time);
     this.$timeout(this.refreshDashboard.bind(this), 0);
   }
 
diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index 6a3d3449986..831d4e0396f 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -1,4 +1,4 @@
-// Store
+// Store
 import store from 'app/core/store';
 
 // Models

From f026be3790b3af69c968e0ac7c5cf2b2fc6c6ef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 13 Nov 2018 15:23:13 +0100
Subject: [PATCH 8/9] fix case where timeshift and time override is used

---
 public/app/features/dashboard/utils/panel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index 831d4e0396f..6e0138eeec8 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -140,7 +140,7 @@ export const applyPanelTimeOverrides = (
     }
 
     const timeShift = '-' + timeShiftInterpolated;
-    newTimeData.timeInfo = ' timeshift ' + timeShift;
+    newTimeData.timeInfo += ' timeshift ' + timeShift;
     newTimeData.timeRange = {
       from: dateMath.parseDateMath(timeShift, timeRange.from, false),
       to: dateMath.parseDateMath(timeShift, timeRange.to, true),

From 6d91e06f4d6f299304c382b87e16af4cd446ee64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 13 Nov 2018 16:01:52 +0100
Subject: [PATCH 9/9] refactoring back the interval calculation, needs to be
 different for react panels

---
 public/app/features/dashboard/utils/panel.ts  | 40 +++++--------------
 .../app/features/panel/metrics_panel_ctrl.ts  | 35 ++++++++--------
 2 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index 6e0138eeec8..0b0f127e2aa 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -11,7 +11,6 @@ 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';
@@ -100,10 +99,12 @@ export const toggleLegend = (panel: PanelModel) => {
   refreshPanel(panel);
 };
 
-export const applyPanelTimeOverrides = (
-  panel: PanelModel,
-  timeRange: TimeRange
-): { timeInfo: string; timeRange: TimeRange } => {
+export interface TimeOverrideResult {
+  timeRange: TimeRange;
+  timeInfo: string;
+}
+
+export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange): TimeOverrideResult {
   const newTimeData = {
     timeInfo: '',
     timeRange: timeRange,
@@ -156,34 +157,11 @@ export const applyPanelTimeOverrides = (
   }
 
   return newTimeData;
-};
+}
 
-export const getResolution = (panel: PanelModel): number => {
+export function 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 6168ddf27d5..e19a36294ce 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -1,15 +1,12 @@
 import _ from 'lodash';
 
+import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
-// 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,
-  calculateInterval as calculateIntervalUtil,
-  getResolution,
-} from 'app/features/dashboard/utils/panel';
+import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/utils/panel';
 
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
@@ -136,26 +133,30 @@ class MetricsPanelCtrl extends PanelCtrl {
   updateTimeRange(datasource?) {
     this.datasource = datasource || this.datasource;
     this.range = this.timeSrv.timeRange();
-
-    this.applyPanelTimeOverrides();
-
     this.resolution = getResolution(this.panel);
 
+    const newTimeData = applyPanelTimeOverrides(this.panel, this.range);
+    this.timeInfo = newTimeData.timeInfo;
+    this.range = newTimeData.timeRange;
+
     this.calculateInterval();
 
     return this.datasource;
   }
 
   calculateInterval() {
-    const interval = calculateIntervalUtil(this.panel, this.datasource, this.range, this.resolution);
-    this.interval = interval.interval;
-    this.intervalMs = this.intervalMs;
-  }
+    let intervalOverride = this.panel.interval;
 
-  applyPanelTimeOverrides() {
-    const newTimeData = applyPanelTimeOverridesUtil(this.panel, this.range);
-    this.timeInfo = newTimeData.timeInfo;
-    this.range = newTimeData.timeRange;
+    // 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;
   }
 
   issueQueries(datasource) {