Fixes #15739

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

@@ -39,6 +39,16 @@ export interface DataQueryError {
   statusText?: string;
 }
 
+export interface ScopedVar {
+  text: any;
+  value: any;
+  [key: string]: any;
+}
+
+export interface ScopedVars {
+  [key: string]: ScopedVar;
+}
+
 export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
   timezone: string;
   range: TimeRange;
@@ -50,7 +60,7 @@ export interface DataQueryOptions<TQuery extends DataQuery = DataQuery> {
   interval: string;
   intervalMs: number;
   maxDataPoints: number;
-  scopedVars: object;
+  scopedVars: ScopedVars;
 }
 
 export interface QueryFix {

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

@@ -15,6 +15,7 @@ import {
   TableData,
   TimeRange,
   TimeSeries,
+  ScopedVars,
 } from '@grafana/ui';
 
 interface RenderProps {
@@ -33,6 +34,7 @@ export interface Props {
   refreshCounter: number;
   minInterval?: string;
   maxDataPoints?: number;
+  scopedVars?: ScopedVars;
   children: (r: RenderProps) => JSX.Element;
   onDataResponse?: (data: DataQueryResponse) => void;
   onError: (message: string, error: DataQueryError) => void;
@@ -95,6 +97,7 @@ export class DataPanel extends Component<Props, State> {
       timeRange,
       widthPixels,
       maxDataPoints,
+      scopedVars,
       onDataResponse,
       onError,
     } = this.props;
@@ -127,7 +130,7 @@ export class DataPanel extends Component<Props, State> {
         intervalMs: intervalRes.intervalMs,
         targets: queries,
         maxDataPoints: maxDataPoints || widthPixels,
-        scopedVars: {},
+        scopedVars: scopedVars || {},
         cacheTimeout: null,
       };
 

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

@@ -179,6 +179,7 @@ export class PanelChrome extends PureComponent<Props, State> {
             isVisible={this.isVisible}
             widthPixels={width}
             refreshCounter={refreshCounter}
+            scopedVars={panel.scopedVars}
             onDataResponse={this.onDataResponse}
             onError={this.onDataError}
           >

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

 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
+import { ScopedVars } from '@grafana/ui';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
@@ -16,7 +17,7 @@ export interface Props {
   timeInfo: string;
   title?: string;
   description?: string;
-  scopedVars?: string;
+  scopedVars?: ScopedVars;
   links?: [];
   error?: string;
   isFullscreen: boolean;

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

 import React, { Component } from 'react';
 import Remarkable from 'remarkable';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip, ScopedVars } from '@grafana/ui';
+
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import templateSrv from 'app/features/templating/template_srv';
 import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
@@ -16,7 +17,7 @@ interface Props {
   panel: PanelModel;
   title?: string;
   description?: string;
-  scopedVars?: string;
+  scopedVars?: ScopedVars;
   links?: [];
   error?: string;
 }

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

@@ -3,7 +3,7 @@ import _ from 'lodash';
 
 // Types
 import { Emitter } from 'app/core/utils/emitter';
-import { DataQuery, TimeSeries, Threshold } from '@grafana/ui';
+import { DataQuery, TimeSeries, Threshold, ScopedVars } from '@grafana/ui';
 import { TableData } from '@grafana/ui/src';
 
 export interface GridPos {
@@ -71,7 +71,7 @@ export class PanelModel {
   type: string;
   title: string;
   alert?: any;
-  scopedVars?: any;
+  scopedVars?: ScopedVars;
   repeat?: string;
   repeatIteration?: number;
   repeatPanelId?: number;