NewPanelEditor: Options/FieldConfig API for defaults and common options selection (#23214)

* Add "some" typesafety to panel options/field config APIs

* Allow selected common field config properties config, allow option defaults config via fluent API

* Update packages/grafana-data/src/panel/PanelPlugin.ts

Co-Authored-By: Ryan McKinley <ryantxu@gmail.com>

* Add defaults support for custom field config

* Enable defaults setting for standard and custom field configs

* Remove setFieldConfigDefaults from PanelPlugin API and replace it with useStandardFieldConfig

* Update API for standard field config defaults

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/plugins/panel/bargauge/module.tsx

@@ -1,15 +1,14 @@
 import { sharedSingleStatPanelChangedHandler } from '@grafana/ui';
-import { PanelPlugin } from '@grafana/data';
+import { defaultStandardFieldConfigProperties, PanelPlugin } from '@grafana/data';
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugeOptions, defaults } from './types';
-import { standardFieldConfig, addStandardDataReduceOptions } from '../stat/types';
+import { standardFieldConfigDefaults, addStandardDataReduceOptions } from '../stat/types';
 import { BarGaugePanelEditor } from './BarGaugePanelEditor';
 import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
 
 export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
   .setDefaults(defaults)
   .setEditor(BarGaugePanelEditor)
-  .setFieldConfigDefaults(standardFieldConfig)
   .setPanelOptions(builder => {
     addStandardDataReduceOptions(builder);
 
@@ -33,4 +32,5 @@ export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
       });
   })
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
-  .setMigrationHandler(barGaugePanelMigrationHandler);
+  .setMigrationHandler(barGaugePanelMigrationHandler)
+  .useStandardFieldConfig(defaultStandardFieldConfigProperties, standardFieldConfigDefaults);

public/app/plugins/panel/gauge/module.tsx

@@ -1,13 +1,12 @@
-import { PanelPlugin } from '@grafana/data';
+import { defaultStandardFieldConfigProperties, PanelPlugin } from '@grafana/data';
 import { GaugePanelEditor } from './GaugePanelEditor';
 import { GaugePanel } from './GaugePanel';
 import { GaugeOptions, defaults } from './types';
-import { standardFieldConfig, addStandardDataReduceOptions } from '../stat/types';
+import { standardFieldConfigDefaults, addStandardDataReduceOptions } from '../stat/types';
 import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
 
 export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
   .setDefaults(defaults)
-  .setFieldConfigDefaults(standardFieldConfig)
   .setEditor(GaugePanelEditor)
   .setPanelOptions(builder => {
     addStandardDataReduceOptions(builder);
@@ -25,4 +24,5 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
       });
   })
   .setPanelChangeHandler(gaugePanelChangedHandler)
-  .setMigrationHandler(gaugePanelMigrationHandler);
+  .setMigrationHandler(gaugePanelMigrationHandler)
+  .useStandardFieldConfig(defaultStandardFieldConfigProperties, standardFieldConfigDefaults);

public/app/plugins/panel/piechart/module.tsx

@@ -1,9 +1,11 @@
-import { PanelPlugin } from '@grafana/data';
+import { defaultStandardFieldConfigProperties, PanelPlugin, StandardFieldConfigProperties } from '@grafana/data';
 import { PieChartPanelEditor } from './PieChartPanelEditor';
 import { PieChartPanel } from './PieChartPanel';
 import { PieChartOptions, defaults } from './types';
 
 export const plugin = new PanelPlugin<PieChartOptions>(PieChartPanel)
   .setDefaults(defaults)
-  .setFieldConfigDefaults({ defaults: { unit: 'short' } })
+  .useStandardFieldConfig(defaultStandardFieldConfigProperties, {
+    [StandardFieldConfigProperties.Unit]: 'short',
+  })
   .setEditor(PieChartPanelEditor);

public/app/plugins/panel/stat/module.tsx

@@ -1,12 +1,11 @@
 import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
-import { PanelPlugin } from '@grafana/data';
-import { StatPanelOptions, defaults, standardFieldConfig, addStandardDataReduceOptions } from './types';
+import { defaultStandardFieldConfigProperties, PanelPlugin } from '@grafana/data';
+import { StatPanelOptions, defaults, standardFieldConfigDefaults, addStandardDataReduceOptions } from './types';
 import { StatPanel } from './StatPanel';
 import { StatPanelEditor } from './StatPanelEditor';
 
 export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
   .setDefaults(defaults)
-  .setFieldConfigDefaults(standardFieldConfig)
   .setEditor(StatPanelEditor)
   .setPanelOptions(builder => {
     addStandardDataReduceOptions(builder);
@@ -48,4 +47,5 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
   })
   .setNoPadding()
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
-  .setMigrationHandler(sharedSingleStatMigrationHandler);
+  .setMigrationHandler(sharedSingleStatMigrationHandler)
+  .useStandardFieldConfig(defaultStandardFieldConfigProperties, standardFieldConfigDefaults);

public/app/plugins/panel/stat/types.ts

@@ -4,9 +4,9 @@ import {
   ReducerID,
   ReduceDataOptions,
   SelectableValue,
-  FieldConfigSource,
   ThresholdsMode,
   standardEditorsRegistry,
+  StandardFieldConfigProperties,
 } from '@grafana/data';
 import { PanelOptionsEditorBuilder } from '@grafana/data/src/utils/OptionsUIBuilders';
 
@@ -37,21 +37,18 @@ export const commonValueOptionDefaults: ReduceDataOptions = {
   calcs: [ReducerID.mean],
 };
 
-export const standardFieldConfig: FieldConfigSource = {
-  defaults: {
-    thresholds: {
-      mode: ThresholdsMode.Absolute,
-      steps: [
-        { value: -Infinity, color: 'green' },
-        { value: 80, color: 'red' }, // 80%
-      ],
-    },
-    mappings: [],
+export const standardFieldConfigDefaults: Partial<Record<StandardFieldConfigProperties, any>> = {
+  [StandardFieldConfigProperties.Thresholds]: {
+    mode: ThresholdsMode.Absolute,
+    steps: [
+      { value: -Infinity, color: 'green' },
+      { value: 80, color: 'red' }, // 80%
+    ],
   },
-  overrides: [],
+  [StandardFieldConfigProperties.Mappings]: [],
 };
 
-export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder) {
+export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder<StatPanelOptions>) {
   builder.addRadio({
     id: 'reduceOptions.values',
     name: 'Show',

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

@@ -1,8 +1,8 @@
 import { PanelPlugin } from '@grafana/data';
 import { TablePanel } from './TablePanel';
-import { Options, defaults } from './types';
+import { CustomFieldConfig, defaults, Options } from './types';
 
-export const plugin = new PanelPlugin<Options>(TablePanel)
+export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
   .setDefaults(defaults)
   .setCustomFieldOptions(builder => {
     builder
@@ -15,6 +15,7 @@ export const plugin = new PanelPlugin<Options>(TablePanel)
           min: 20,
           max: 300,
         },
+        defaultValue: 1,
       })
       .addSelect({
         id: 'displayMode',

public/app/plugins/panel/table2/types.ts

@@ -2,6 +2,11 @@ export interface Options {
   showHeader: boolean;
 }
 
+export interface CustomFieldConfig {
+  width: number;
+  displayMode: string;
+}
+
 export const defaults: Options = {
   showHeader: true,
 };