Refactor: move ScopedVars to grafana/data (#18992)

packages/grafana-data/src/types/ScopedVars.ts

+export interface ScopedVar<T = any> {
+  text: any;
+  value: T;
+  [key: string]: any;
+}
+
+export interface ScopedVars {
+  [key: string]: ScopedVar;
+}

packages/grafana-data/src/types/index.ts

@@ -10,3 +10,4 @@ export * from './utils';
 export * from './valueMapping';
 export * from './displayValue';
 export * from './graph';
+export * from './ScopedVars';

packages/grafana-data/src/utils/dataFrameHelper.test.ts

@@ -13,11 +13,16 @@ describe('dataFrameHelper', () => {
   });
   const ext = new FieldCache(frame);
 
-  it('Should get the first field with a duplicate name', () => {
+  it('should get the first field with a duplicate name', () => {
     const field = ext.getFieldByName('value');
     expect(field!.name).toEqual('value');
     expect(field!.values.toJSON()).toEqual([1, 2, 3]);
   });
+
+  it('should return index of the field', () => {
+    const field = ext.getFirstFieldOfType(FieldType.number);
+    expect(field!.index).toEqual(2);
+  });
 });
 
 describe('FieldCache', () => {

packages/grafana-data/src/utils/dataFrameHelper.ts

@@ -5,16 +5,22 @@ import { ArrayVector, MutableVector, vectorToArray, CircularVector } from './vec
 import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 
+interface FieldWithIndex extends Field {
+  index: number;
+}
 export class FieldCache {
-  fields: Field[] = [];
+  fields: FieldWithIndex[] = [];
 
-  private fieldByName: { [key: string]: Field } = {};
-  private fieldByType: { [key: string]: Field[] } = {};
+  private fieldByName: { [key: string]: FieldWithIndex } = {};
+  private fieldByType: { [key: string]: FieldWithIndex[] } = {};
 
-  constructor(private data: DataFrame) {
-    this.fields = data.fields;
+  constructor(data: DataFrame) {
+    this.fields = data.fields.map((field, idx) => ({
+      ...field,
+      index: idx,
+    }));
 
-    for (const field of data.fields) {
+    for (const [index, field] of data.fields.entries()) {
       // Make sure it has a type
       if (field.type === FieldType.other) {
         const t = guessFieldTypeForField(field);
@@ -25,19 +31,22 @@ export class FieldCache {
       if (!this.fieldByType[field.type]) {
         this.fieldByType[field.type] = [];
       }
-      this.fieldByType[field.type].push(field);
+      this.fieldByType[field.type].push({
+        ...field,
+        index,
+      });
 
       if (this.fieldByName[field.name]) {
         console.warn('Duplicate field names in DataFrame: ', field.name);
       } else {
-        this.fieldByName[field.name] = field;
+        this.fieldByName[field.name] = { ...field, index };
       }
     }
   }
 
-  getFields(type?: FieldType): Field[] {
+  getFields(type?: FieldType): FieldWithIndex[] {
     if (!type) {
-      return [...this.data.fields]; // All fields
+      return [...this.fields]; // All fields
     }
     const fields = this.fieldByType[type];
     if (fields) {
@@ -51,7 +60,7 @@ export class FieldCache {
     return types && types.length > 0;
   }
 
-  getFirstFieldOfType(type: FieldType): Field | undefined {
+  getFirstFieldOfType(type: FieldType): FieldWithIndex | undefined {
     const arr = this.fieldByType[type];
     if (arr && arr.length > 0) {
       return arr[0];
@@ -66,7 +75,7 @@ export class FieldCache {
   /**
    * Returns the first field with the given name.
    */
-  getFieldByName(name: string): Field | undefined {
+  getFieldByName(name: string): FieldWithIndex | undefined {
     return this.fieldByName[name];
   }
 }

packages/grafana-runtime/src/services/dataSourceSrv.ts

-import { ScopedVars, DataSourceApi } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
+import { DataSourceApi } from '@grafana/ui';
 
 export interface DataSourceSrv {
   get(name?: string, scopedVars?: ScopedVars): Promise<DataSourceApi>;

packages/grafana-ui/src/components/Table/Table.story.tsx

@@ -4,8 +4,8 @@ import { Table } from './Table';
 import { getTheme } from '../../themes';
 
 import { migratedTestTable, migratedTestStyles, simpleTable } from './examples';
-import { ScopedVars, GrafanaThemeType } from '../../types/index';
-import { DataFrame, FieldType, ArrayVector } from '@grafana/data';
+import { GrafanaThemeType } from '../../types/index';
+import { DataFrame, FieldType, ArrayVector, ScopedVars } from '@grafana/data';
 import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory';
 import { number, boolean } from '@storybook/addon-knobs';
 

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

@@ -9,6 +9,7 @@ import {
   LoadingState,
   DataFrameDTO,
   AnnotationEvent,
+  ScopedVars,
 } from '@grafana/data';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 import { PanelData } from './panel';
@@ -435,16 +436,6 @@ export interface DataQueryError {
   cancelled?: boolean;
 }
 
-export interface ScopedVar {
-  text: any;
-  value: any;
-  [key: string]: any;
-}
-
-export interface ScopedVars {
-  [key: string]: ScopedVar;
-}
-
 export interface DataQueryRequest<TQuery extends DataQuery = DataQuery> {
   requestId: string; // Used to identify results and optionally cancel the request in backendSrv
   timezone: string;

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

 import { ComponentClass, ComponentType } from 'react';
-import { LoadingState, DataFrame, TimeRange, TimeZone } from '@grafana/data';
-import { ScopedVars, DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource';
+import { LoadingState, DataFrame, TimeRange, TimeZone, ScopedVars } from '@grafana/data';
+import { DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;

packages/grafana-ui/src/utils/fieldDisplay.ts

@@ -8,12 +8,13 @@ import {
   GraphSeriesValue,
   DataFrameView,
   getTimeField,
+  ScopedVars,
 } from '@grafana/data';
 
 import toNumber from 'lodash/toNumber';
 import toString from 'lodash/toString';
 
-import { GrafanaTheme, InterpolateFunction, ScopedVars } from '../types/index';
+import { GrafanaTheme, InterpolateFunction } from '../types/index';
 import { getDisplayProcessor } from './displayProcessor';
 import { getFlotPairs } from './flotPairs';
 import { DataLinkBuiltInVars } from '../utils/dataLinks';

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

@@ -17,8 +17,8 @@ import config from 'app/core/config';
 
 // Types
 import { DashboardModel, PanelModel } from '../state';
-import { ScopedVars, PanelData, PanelPlugin } from '@grafana/ui';
-import { LoadingState } from '@grafana/data';
+import { PanelData, PanelPlugin } from '@grafana/ui';
+import { LoadingState, ScopedVars } from '@grafana/data';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 

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 { ScopedVars } from '@grafana/data';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';

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

 import React, { Component } from 'react';
 
-import { renderMarkdown, LinkModelSupplier } from '@grafana/data';
-import { Tooltip, ScopedVars, PopoverContent } from '@grafana/ui';
+import { renderMarkdown, LinkModelSupplier, ScopedVars } from '@grafana/data';
+import { Tooltip, PopoverContent } from '@grafana/ui';
 
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import templateSrv from 'app/features/templating/template_srv';

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

@@ -6,8 +6,8 @@ import { Emitter } from 'app/core/utils/emitter';
 import { getNextRefIdChar } from 'app/core/utils/query';
 
 // Types
-import { DataQuery, ScopedVars, DataQueryResponseData, PanelPlugin } from '@grafana/ui';
-import { DataLink, DataTransformerConfig } from '@grafana/data';
+import { DataQuery, DataQueryResponseData, PanelPlugin } from '@grafana/ui';
+import { DataLink, DataTransformerConfig, ScopedVars } from '@grafana/data';
 
 import config from 'app/core/config';
 

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

 import { PanelQueryRunner, QueryRunnerOptions } from './PanelQueryRunner';
-import { PanelData, DataQueryRequest, DataStreamObserver, DataStreamState, ScopedVars } from '@grafana/ui';
+import { PanelData, DataQueryRequest, DataStreamObserver, DataStreamState } from '@grafana/ui';
 
-import { LoadingState, MutableDataFrame } from '@grafana/data';
+import { LoadingState, MutableDataFrame, ScopedVars } from '@grafana/data';
 import { dateTime } from '@grafana/data';
 import { SHARED_DASHBODARD_QUERY } from 'app/plugins/datasource/dashboard/SharedQueryRunner';
 import { DashboardQuery } from 'app/plugins/datasource/dashboard/types';

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

@@ -11,9 +11,9 @@ import { PanelQueryState } from './PanelQueryState';
 import { isSharedDashboardQuery, SharedQueryRunner } from 'app/plugins/datasource/dashboard/SharedQueryRunner';
 
 // Types
-import { PanelData, DataQuery, ScopedVars, DataQueryRequest, DataSourceApi, DataSourceJsonData } from '@grafana/ui';
+import { PanelData, DataQuery, DataQueryRequest, DataSourceApi, DataSourceJsonData } from '@grafana/ui';
 
-import { TimeRange, DataTransformerConfig, transformDataFrame, toLegacyResponseData } from '@grafana/data';
+import { TimeRange, DataTransformerConfig, transformDataFrame, toLegacyResponseData, ScopedVars } from '@grafana/data';
 import config from 'app/core/config';
 
 export interface QueryRunnerOptions<

public/app/features/panel/panellinks/linkSuppliers.ts

 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { FieldDisplay, ScopedVars, DataLinkBuiltInVars } from '@grafana/ui';
-import { LinkModelSupplier, getTimeField } from '@grafana/data';
+import { FieldDisplay, DataLinkBuiltInVars } from '@grafana/ui';
+import { LinkModelSupplier, getTimeField, ScopedVars } from '@grafana/data';
 import { getLinkSrv } from './link_srv';
 
 /**

public/app/features/panel/panellinks/link_srv.ts

@@ -3,8 +3,8 @@ import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import templateSrv, { TemplateSrv } from 'app/features/templating/template_srv';
 import coreModule from 'app/core/core_module';
 import { appendQueryToUrl, toUrlParams } from 'app/core/utils/url';
-import { VariableSuggestion, ScopedVars, VariableOrigin, DataLinkBuiltInVars } from '@grafana/ui';
-import { DataLink, KeyValue, deprecationWarning, LinkModel } from '@grafana/data';
+import { VariableSuggestion, VariableOrigin, DataLinkBuiltInVars } from '@grafana/ui';
+import { DataLink, KeyValue, deprecationWarning, LinkModel, ScopedVars } from '@grafana/data';
 
 export const getPanelLinksVariableSuggestions = (): VariableSuggestion[] => [
   ...templateSrv.variables.map(variable => ({

public/app/features/plugins/datasource_srv.ts

@@ -8,7 +8,8 @@ import { importDataSourcePlugin } from './plugin_loader';
 import { DataSourceSrv as DataSourceService, getDataSourceSrv as getDataSourceService } from '@grafana/runtime';
 
 // Types
-import { DataSourceApi, DataSourceSelectItem, ScopedVars } from '@grafana/ui';
+import { DataSourceApi, DataSourceSelectItem } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 import { auto } from 'angular';
 import { TemplateSrv } from '../templating/template_srv';
 

public/app/features/templating/template_srv.ts

 import kbn from 'app/core/utils/kbn';
 import _ from 'lodash';
 import { variableRegex } from 'app/features/templating/variable';
-import { ScopedVars } from '@grafana/ui';
-import { TimeRange } from '@grafana/data';
+import { TimeRange, ScopedVars } from '@grafana/data';
 
 function luceneEscape(value: string) {
   return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, '\\$1');

public/app/plugins/datasource/cloudwatch/datasource.ts

 import angular, { IQService } from 'angular';
 import _ from 'lodash';
-import { dateMath } from '@grafana/data';
+import { dateMath, ScopedVars } from '@grafana/data';
 import kbn from 'app/core/utils/kbn';
 import { CloudWatchQuery } from './types';
-import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings, ScopedVars } from '@grafana/ui';
+import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';

public/app/plugins/datasource/graphite/datasource.ts

 import _ from 'lodash';
-import { dateMath } from '@grafana/data';
+import { dateMath, ScopedVars } from '@grafana/data';
 import { isVersionGtOrEq, SemVersion } from 'app/core/utils/version';
 import gfunc from './gfunc';
 import { IQService } from 'angular';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { ScopedVars } from '@grafana/ui';
 
 export class GraphiteDatasource {
   basicAuth: string;

public/app/plugins/datasource/graphite/graphite_query.ts

 import _ from 'lodash';
 import { Parser } from './parser';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { ScopedVars } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 
 export default class GraphiteQuery {
   datasource: any;

public/app/plugins/datasource/influxdb/influx_query_model.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import queryPart from './query_part';
 import kbn from 'app/core/utils/kbn';
 import { InfluxQuery, InfluxQueryTag } from './types';
-import { ScopedVars } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
 export default class InfluxQueryModel {

public/app/plugins/datasource/mysql/mysql_query.ts

 import _ from 'lodash';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { ScopedVars } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 
 export default class MysqlQuery {
   target: any;

public/app/plugins/datasource/postgres/postgres_query.ts

 import _ from 'lodash';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { ScopedVars } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 
 export default class PostgresQuery {
   target: any;

public/app/plugins/datasource/stackdriver/datasource.ts

@@ -3,7 +3,8 @@ import appEvents from 'app/core/app_events';
 import _ from 'lodash';
 import StackdriverMetricFindQuery from './StackdriverMetricFindQuery';
 import { StackdriverQuery, MetricDescriptor, StackdriverOptions } from './types';
-import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings, ScopedVars } from '@grafana/ui';
+import { DataSourceApi, DataQueryRequest, DataSourceInstanceSettings } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';

public/app/plugins/panel/table/renderer.ts

 import _ from 'lodash';
-import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, ScopedVars } from '@grafana/ui';
-import { stringToJsRegex } from '@grafana/data';
+import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType } from '@grafana/ui';
+import { stringToJsRegex, ScopedVars } from '@grafana/data';
 import { ColumnStyle } from '@grafana/ui/src/components/Table/TableCellBuilder';
 import { dateTime } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';

public/app/plugins/panel/table/specs/renderer.test.ts

 import _ from 'lodash';
 import TableModel from 'app/core/table_model';
 import { TableRenderer } from '../renderer';
-import { getColorDefinitionByName, ScopedVars } from '@grafana/ui';
+import { getColorDefinitionByName } from '@grafana/ui';
+import { ScopedVars } from '@grafana/data';
 
 describe('when rendering table', () => {
   const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange');