FieldOverides: apply field overrides based on configuration (#22047)

* test apply

* test apply

* Move standard field config editor registry to grafana-data

* merge master

* Apply field config defaults

* Make field and dataFrameIndex optional on on FieldOverrideContext

* Apply custom field config overrides

* Gauge - make sure thresholds are set

* Move series and field scoped vars calculation

* Enable template variables interpolation in title fields

* Expose standars field configs from grafana ui via function

* Add missing option to the config for the min value to be derived from field values

* Fix ts issue

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/app.ts

@@ -25,7 +25,7 @@ import angular from 'angular';
 import config from 'app/core/config';
 // @ts-ignore ignoring this for now, otherwise we would have to extend _ interface with move
 import _ from 'lodash';
-import { AppEvents, setLocale, setMarkdownOptions } from '@grafana/data';
+import { AppEvents, setLocale, setMarkdownOptions, standardFieldConfigEditorRegistry } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
 import { checkBrowserCompatibility } from 'app/core/utils/browser';
@@ -40,6 +40,7 @@ import { PerformanceBackend } from './core/services/echo/backends/PerformanceBac
 
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
+import { getStandardFieldConfigs } from '@grafana/ui';
 
 // add move to lodash for backward compatabiltiy
 // @ts-ignore
@@ -82,6 +83,7 @@ export class GrafanaApp {
     setLocale(config.bootData.user.locale);
 
     setMarkdownOptions({ sanitize: !config.disableSanitizeHtml });
+    standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
 
     app.config(
       (

public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx

@@ -7,8 +7,9 @@ import {
   FieldPropertyEditorItem,
   DynamicConfigValue,
   VariableSuggestionsScope,
+  standardFieldConfigEditorRegistry,
 } from '@grafana/data';
-import { standardFieldConfigEditorRegistry, Forms, fieldMatchersUI, ValuePicker } from '@grafana/ui';
+import { Forms, fieldMatchersUI, ValuePicker } from '@grafana/ui';
 import { getDataLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
 import { OptionsGroup } from './OptionsGroup';
 
@@ -151,6 +152,7 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
       <div>
         {config.overrides.map((o, i) => {
           const matcherUi = fieldMatchersUI.get(o.matcher.id);
+          // TODO:  apply matcher to retrieve fields
           return (
             <div key={`${o.matcher.id}/${i}`} style={{ border: `2px solid red`, marginBottom: '10px' }}>
               <Forms.Field label={matcherUi.name} description={matcherUi.description}>

public/app/features/dashboard/components/PanelEditor/utils.test.ts

@@ -0,0 +1,22 @@
+import { FieldConfig, standardFieldConfigEditorRegistry } from '@grafana/data';
+
+describe('standardFieldConfigEditorRegistry', () => {
+  const dummyConfig: FieldConfig = {
+    title: 'Hello',
+    min: 10,
+    max: 10,
+    decimals: 10,
+    thresholds: {} as any,
+    noValue: 'no value',
+    unit: 'km/s',
+    links: {} as any,
+  };
+
+  it('make sure all fields have a valid name', () => {
+    standardFieldConfigEditorRegistry.list().forEach(v => {
+      if (!dummyConfig.hasOwnProperty(v.id)) {
+        fail(`Registry uses unknown property: ${v.id}`);
+      }
+    });
+  });
+});

public/app/plugins/panel/table2/custom.tsx

@@ -20,6 +20,7 @@ const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
     min: 20,
     max: 300,
   },
+  shouldApply: () => true,
 };
 
 export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {

public/test/jest-setup.ts

@@ -44,8 +44,6 @@ const localStorageMock = (() => {
 
 global.localStorage = localStorageMock;
 
-HTMLCanvasElement.prototype.getContext = jest.fn() as any;
-
 const throwUnhandledRejections = () => {
   process.on('unhandledRejection', err => {
     throw err;