refactor: move timeInfo to DataRequestInfo (#16664)

* use timeInfo from request

* move timeInfo to DataRequestInfo

packages/grafana-ui/src/types/datasource.ts

@@ -223,7 +223,7 @@ export interface ScopedVars {
 export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
 export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
   timezone: string;
   timezone: string;
   range: TimeRange;
   range: TimeRange;
-  rangeRaw: RawTimeRange;
+  rangeRaw: RawTimeRange; // Duplicate of results in range.  will be deprecated eventually
   targets: TQuery[];
   targets: TQuery[];
   panelId: number;
   panelId: number;
   dashboardId: number;
   dashboardId: number;
@@ -238,6 +238,7 @@ export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
  * Timestamps when the query starts and stops
  * Timestamps when the query starts and stops
  */
  */
 export interface DataRequestInfo extends DataQueryOptions {
 export interface DataRequestInfo extends DataQueryOptions {
+  timeInfo?: string; // The query time description (blue text in the upper right)
   startTime: number;
   startTime: number;
   endTime?: number;
   endTime?: number;
 }
 }

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

@@ -17,7 +17,7 @@ import config from 'app/core/config';
 // Types
 // Types
 import { DashboardModel, PanelModel } from '../state';
 import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { PanelPlugin } from 'app/types';
-import { TimeRange, LoadingState, PanelData } from '@grafana/ui';
+import { LoadingState, PanelData } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui';
 
 
 import templateSrv from 'app/features/templating/template_srv';
 import templateSrv from 'app/features/templating/template_srv';
@@ -39,8 +39,6 @@ export interface Props {
 export interface State {
 export interface State {
   isFirstLoad: boolean;
   isFirstLoad: boolean;
   renderCounter: number;
   renderCounter: number;
-  timeInfo?: string;
-  timeRange?: TimeRange;
   errorMessage: string | null;
   errorMessage: string | null;
 
 
   // Current state of all events
   // Current state of all events
@@ -133,11 +131,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { panel, width } = this.props;
     const { panel, width } = this.props;
     const timeData = applyPanelTimeOverrides(panel, this.timeSrv.timeRange());
     const timeData = applyPanelTimeOverrides(panel, this.timeSrv.timeRange());
 
 
-    this.setState({
-      timeRange: timeData.timeRange,
-      timeInfo: timeData.timeInfo,
-    });
-
     // Issue Query
     // Issue Query
     if (this.wantsQueryExecution) {
     if (this.wantsQueryExecution) {
       if (width < 0) {
       if (width < 0) {
@@ -157,6 +150,7 @@ export class PanelChrome extends PureComponent<Props, State> {
         dashboardId: this.props.dashboard.id,
         dashboardId: this.props.dashboard.id,
         timezone: this.props.dashboard.timezone,
         timezone: this.props.dashboard.timezone,
         timeRange: timeData.timeRange,
         timeRange: timeData.timeRange,
+        timeInfo: timeData.timeInfo,
         widthPixels: width,
         widthPixels: width,
         minInterval: undefined, // Currently not passed in DataPanel?
         minInterval: undefined, // Currently not passed in DataPanel?
         maxDataPoints: panel.maxDataPoints,
         maxDataPoints: panel.maxDataPoints,
@@ -201,7 +195,7 @@ export class PanelChrome extends PureComponent<Props, State> {
 
 
   renderPanel(width: number, height: number): JSX.Element {
   renderPanel(width: number, height: number): JSX.Element {
     const { panel, plugin } = this.props;
     const { panel, plugin } = this.props;
-    const { timeRange, renderCounter, data, isFirstLoad } = this.state;
+    const { renderCounter, data, isFirstLoad } = this.state;
     const PanelComponent = plugin.reactPlugin.panel;
     const PanelComponent = plugin.reactPlugin.panel;
 
 
     // This is only done to increase a counter that is used by backend
     // This is only done to increase a counter that is used by backend
@@ -222,7 +216,7 @@ export class PanelChrome extends PureComponent<Props, State> {
         <div className="panel-content">
         <div className="panel-content">
           <PanelComponent
           <PanelComponent
             data={data}
             data={data}
-            timeRange={timeRange}
+            timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
             options={panel.getOptions(plugin.reactPlugin.defaults)}
             options={panel.getOptions(plugin.reactPlugin.defaults)}
             width={width - 2 * config.theme.panelPadding.horizontal}
             width={width - 2 * config.theme.panelPadding.horizontal}
             height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
             height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
@@ -244,7 +238,7 @@ export class PanelChrome extends PureComponent<Props, State> {
 
 
   render() {
   render() {
     const { dashboard, panel, isFullscreen, width, height } = this.props;
     const { dashboard, panel, isFullscreen, width, height } = this.props;
-    const { errorMessage, timeInfo } = this.state;
+    const { errorMessage, data } = this.state;
     const { transparent } = panel;
     const { transparent } = panel;
 
 
     const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
     const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
@@ -253,7 +247,7 @@ export class PanelChrome extends PureComponent<Props, State> {
         <PanelHeader
         <PanelHeader
           panel={panel}
           panel={panel}
           dashboard={dashboard}
           dashboard={dashboard}
-          timeInfo={timeInfo}
+          timeInfo={data.request ? data.request.timeInfo : null}
           title={panel.title}
           title={panel.title}
           description={panel.description}
           description={panel.description}
           scopedVars={panel.scopedVars}
           scopedVars={panel.scopedVars}

public/app/features/dashboard/state/PanelQueryRunner.ts

@@ -28,6 +28,7 @@ export interface QueryRunnerOptions<TQuery extends DataQuery = DataQuery> {
   dashboardId?: number;
   dashboardId?: number;
   timezone?: string;
   timezone?: string;
   timeRange?: TimeRange;
   timeRange?: TimeRange;
+  timeInfo?: string; // String description of time range for display
   widthPixels: number;
   widthPixels: number;
   minInterval?: string;
   minInterval?: string;
   maxDataPoints?: number;
   maxDataPoints?: number;
@@ -92,6 +93,7 @@ export class PanelQueryRunner {
       panelId,
       panelId,
       dashboardId,
       dashboardId,
       timeRange,
       timeRange,
+      timeInfo,
       cacheTimeout,
       cacheTimeout,
       widthPixels,
       widthPixels,
       maxDataPoints,
       maxDataPoints,
@@ -105,6 +107,7 @@ export class PanelQueryRunner {
       dashboardId,
       dashboardId,
       range: timeRange,
       range: timeRange,
       rangeRaw: timeRange.raw,
       rangeRaw: timeRange.raw,
+      timeInfo,
       interval: '',
       interval: '',
       intervalMs: 0,
       intervalMs: 0,
       targets: cloneDeep(queries),
       targets: cloneDeep(queries),