FieldOverrides: Apply field overrides in PanelQueryRunner (#22439)

* Apply field overrides in PanelChrome

* Move applyFieldOverrides to panel query runner

* Review updates

* Make sure overrides are applied back on souce panel when exiting the new edit mode

* TS ignores in est

* Make field display work in viz repeater

* Review updates

* Review and test updates

* Change the way overrides and trransformations are retrieved in PQR

* Minor updates after review

* Fix null checks

packages/grafana-data/src/field/fieldDisplay.test.ts

@@ -19,7 +19,6 @@ describe('FieldDisplay', () => {
       shouldApply: () => true,
     } as any;
 
-    console.log('Init tegistry');
     standardFieldConfigEditorRegistry.setInit(() => {
       return [mappings];
     });
@@ -168,48 +167,57 @@ describe('FieldDisplay', () => {
 
   describe('Value mapping', () => {
     it('should apply value mapping', () => {
+      const mappingConfig = [
+        {
+          id: 1,
+          operator: '',
+          text: 'Value mapped to text',
+          type: MappingType.ValueToText,
+          value: '1',
+        },
+      ];
       const options = createDisplayOptions({
         fieldOptions: {
           calcs: [ReducerID.first],
           override: {},
           defaults: {
-            mappings: [
-              {
-                id: 1,
-                operator: '',
-                text: 'Value mapped to text',
-                type: MappingType.ValueToText,
-                value: 1,
-              },
-            ],
+            mappings: mappingConfig,
           },
         },
       });
 
+      options.data![0].fields[1]!.config = { mappings: mappingConfig };
+      options.data![0].fields[2]!.config = { mappings: mappingConfig };
+
       const result = getFieldDisplayValues(options);
       expect(result[0].display.text).toEqual('Value mapped to text');
     });
     it('should apply range value mapping', () => {
       const mappedValue = 'Range mapped to text';
+      const mappingConfig = [
+        {
+          id: 1,
+          operator: '',
+          text: mappedValue,
+          type: MappingType.RangeToText,
+          value: 1,
+          from: '1',
+          to: '3',
+        },
+      ];
       const options = createDisplayOptions({
         fieldOptions: {
           values: true,
           override: {},
           defaults: {
-            mappings: [
-              {
-                id: 1,
-                operator: '',
-                text: mappedValue,
-                type: MappingType.RangeToText,
-                value: 1,
-                from: 1,
-                to: 3,
-              },
-            ],
+            mappings: mappingConfig,
           },
         },
       });
+
+      options.data![0].fields[1]!.config = { mappings: mappingConfig };
+      options.data![0].fields[2]!.config = { mappings: mappingConfig };
+
       const result = getFieldDisplayValues(options);
 
       expect(result[0].display.text).toEqual(mappedValue);

packages/grafana-data/src/field/fieldDisplay.ts

@@ -18,7 +18,6 @@ import { GrafanaTheme } from '../types/theme';
 import { ReducerID, reduceField } from '../transformations/fieldReducer';
 import { ScopedVars } from '../types/ScopedVars';
 import { getTimeField } from '../dataframe/processDataFrame';
-import { applyFieldOverrides } from './fieldOverrides';
 
 export interface FieldDisplayOptions extends FieldConfigSource {
   values?: boolean; // If true show each row value
@@ -91,8 +90,8 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
   const values: FieldDisplay[] = [];
 
   if (options.data) {
-    const data = applyFieldOverrides(options);
-
+    // Field overrides are applied already
+    const data = options.data;
     let hitLimit = false;
     const limit = fieldOptions.limit ? fieldOptions.limit : DEFAULT_FIELD_DISPLAY_VALUES_LIMIT;
     const defaultTitle = getTitleTemplate(fieldOptions.defaults.title, calcs, data);

packages/grafana-data/src/field/fieldOverrides.ts

@@ -1,19 +1,16 @@
 import {
-  GrafanaTheme,
   DynamicConfigValue,
   FieldConfig,
-  InterpolateFunction,
   DataFrame,
   Field,
   FieldType,
-  FieldConfigSource,
   ThresholdsMode,
   FieldColorMode,
   ColorScheme,
-  TimeZone,
   FieldConfigEditorRegistry,
   FieldOverrideContext,
   ScopedVars,
+  ApplyFieldOverrideOptions,
 } from '../types';
 import { fieldMatchers, ReducerID, reduceField } from '../transformations';
 import { FieldMatcher } from '../types/transformations';
@@ -32,17 +29,6 @@ interface GlobalMinMax {
   max: number;
 }
 
-export interface ApplyFieldOverrideOptions {
-  data?: DataFrame[];
-  fieldOptions: FieldConfigSource;
-  replaceVariables: InterpolateFunction;
-  theme: GrafanaTheme;
-  timeZone?: TimeZone;
-  autoMinMax?: boolean;
-  standard?: FieldConfigEditorRegistry;
-  custom?: FieldConfigEditorRegistry;
-}
-
 export function findNumericFieldMinMax(data: DataFrame[]): GlobalMinMax {
   let min = Number.MAX_VALUE;
   let max = Number.MIN_VALUE;

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

@@ -1,5 +1,11 @@
+import { DataTransformerConfig } from './transformations';
+import { ApplyFieldOverrideOptions } from './fieldOverrides';
+
 export type KeyValue<T = any> = { [s: string]: T };
 
+/**
+ * Represent panel data loading state.
+ */
 export enum LoadingState {
   NotStarted = 'NotStarted',
   Loading = 'Loading',
@@ -90,3 +96,11 @@ export interface AnnotationEvent {
   // Currently used to merge annotations from alerts and dashboard
   source?: any; // source.type === 'dashboard'
 }
+
+/**
+ * Describes and API for exposing panel specific data configurations.
+ */
+export interface DataConfigSource {
+  getTransformations: () => DataTransformerConfig[] | undefined;
+  getFieldOverrideOptions: () => ApplyFieldOverrideOptions | undefined;
+}

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

@@ -1,5 +1,14 @@
 import { ComponentType } from 'react';
-import { MatcherConfig, FieldConfig, Field, DataFrame, VariableSuggestionsScope, VariableSuggestion } from '../types';
+import {
+  MatcherConfig,
+  FieldConfig,
+  Field,
+  DataFrame,
+  VariableSuggestionsScope,
+  VariableSuggestion,
+  GrafanaTheme,
+  TimeZone,
+} from '../types';
 import { Registry, RegistryItem } from '../utils';
 import { InterpolateFunction } from './panel';
 
@@ -62,3 +71,14 @@ export interface FieldPropertyEditorItem<TValue = any, TSettings = any> extends
 }
 
 export type FieldConfigEditorRegistry = Registry<FieldPropertyEditorItem>;
+
+export interface ApplyFieldOverrideOptions {
+  data?: DataFrame[];
+  fieldOptions: FieldConfigSource;
+  replaceVariables: InterpolateFunction;
+  theme: GrafanaTheme;
+  timeZone?: TimeZone;
+  autoMinMax?: boolean;
+  standard?: FieldConfigEditorRegistry;
+  custom?: FieldConfigEditorRegistry;
+}

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

@@ -17,11 +17,16 @@ export interface PanelPluginMeta extends PluginMeta {
 
 export interface PanelData {
   state: LoadingState;
+  /**
+   * Contains data frames with field overrides applied
+   */
   series: DataFrame[];
   request?: DataQueryRequest;
   timings?: DataQueryTimings;
   error?: DataQueryError;
-  // Contains the range from the request or a shifted time range if a request uses relative time
+  /**
+   *  Contains the range from the request or a shifted time range if a request uses relative time
+   */
   timeRange: TimeRange;
 }