DataPanel: Added built-in interval variables to scopedVars (#16556)

For react panels the scopedVars did not contain the built in __interval and __interval_ms
variables.

Fixes #16546

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

@@ -132,10 +132,16 @@ export class DataPanel extends Component<Props, State> {
     try {
     try {
       const ds = await this.dataSourceSrv.get(datasource, scopedVars);
       const ds = await this.dataSourceSrv.get(datasource, scopedVars);
 
 
-      // TODO interpolate variables
       const minInterval = this.props.minInterval || ds.interval;
       const minInterval = this.props.minInterval || ds.interval;
       const intervalRes = kbn.calculateInterval(timeRange, widthPixels, minInterval);
       const intervalRes = kbn.calculateInterval(timeRange, widthPixels, minInterval);
 
 
+      // make shallow copy of scoped vars,
+      // and add built in variables interval and interval_ms
+      const scopedVarsWithInterval = Object.assign({}, scopedVars, {
+        __interval: { text: intervalRes.interval, value: intervalRes.interval },
+        __interval_ms: { text: intervalRes.intervalMs.toString(), value: intervalRes.intervalMs },
+      });
+
       const queryOptions: DataQueryOptions = {
       const queryOptions: DataQueryOptions = {
         timezone: 'browser',
         timezone: 'browser',
         panelId: panelId,
         panelId: panelId,
@@ -146,7 +152,7 @@ export class DataPanel extends Component<Props, State> {
         intervalMs: intervalRes.intervalMs,
         intervalMs: intervalRes.intervalMs,
         targets: queries,
         targets: queries,
         maxDataPoints: maxDataPoints || widthPixels,
         maxDataPoints: maxDataPoints || widthPixels,
-        scopedVars: scopedVars || {},
+        scopedVars: scopedVarsWithInterval,
         cacheTimeout: null,
         cacheTimeout: null,
       };
       };