wip: panel-header: Start implementing the applyPanelTimeOverrides in the react…

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.

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}
                 />

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>

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;

public/app/features/dashboard/utils/panel.ts

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

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 = '';
-
-    // 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 };
-    }
+    const timeData: TimeData = {
+      timeInfo: '',
+      timeRange: this.range,
+    };
 
-    if (this.panel.hideTimeOverride) {
-      this.timeInfo = '';
-    }
+    const newTimeData = applyPanelTimeOverridesUtil(this.panel, timeData);
+    this.timeInfo = newTimeData.timeInfo;
+    this.range = newTimeData.timeRange;
   }
 
   issueQueries(datasource) {

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,

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[][];