grafana插件的field和overrides

简介

前面篇文章编写grafana插件配置通常在panel页签的display组下配置，我们查看grafana原生的插件，经常可以看到有些插件有field和overrdes 2个页签可以配置更多的内容，其中：

• field配置查询结果所有列的的公有配置属性
• overrides 单独配置一个或者几个列的配置属性
• 实际输出的配置值overrides的优先级高于field的优先级

如何打开field和overrides配置

如下图所示useFieldConfig使能并配置field并且设置配置窗口

import { PanelPlugin } from '@grafana/data';
import { CustomFieldConfig, Options } from './types';
// import { tableMigrationHandler, tablePanelChangedHandler } from './migrations';
import { TableCellDisplayMode } from '@grafana/ui';
import { SimplePanel } from 'SimplePanel';

export const plugin = new PanelPlugin<Options, CustomFieldConfig>(SimplePanel)
  // .setPanelChangeHandler(tablePanelChangedHandler)
  // .setMigrationHandler(tableMigrationHandler)
  .setNoPadding()
  .useFieldConfig({
    useCustomConfig: builder => {
      builder
        .addNumberInput({
          path: 'width',
          name: 'Column width',
          settings: {
            placeholder: 'auto',
            min: 20,
            max: 300,
          },
          shouldApply: () => true,
        })
        .addRadio({
          path: 'align',
          name: 'Column alignment',
          settings: {
            options: [
              { label: 'auto', value: null },
              { label: 'left', value: 'left' },
              { label: 'center', value: 'center' },
              { label: 'right', value: 'right' },
            ],
          },
          defaultValue: null,
        })
        .addSelect({
          path: 'displayMode',
          name: 'Cell display mode',
          description: 'Color text, background, show as gauge, etc',
          settings: {
            options: [
              { value: TableCellDisplayMode.Auto, label: 'Auto' },
              { value: TableCellDisplayMode.ColorText, label: 'Color text' },
              { value: TableCellDisplayMode.ColorBackground, label: 'Color background' },
              { value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
              { value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
              { value: TableCellDisplayMode.BasicGauge, label: 'Basic gauge' },
              { value: TableCellDisplayMode.JSONView, label: 'JSON View' },
            ],
          },
        })
        .addBooleanSwitch({
          path: 'filterable',
          name: 'Column filter',
          description: 'Enables/disables field filters in table',
          defaultValue: false,
        });
    },
  })
  // dispaly 的配置
  .setPanelOptions(builder => {
    builder.addBooleanSwitch({
      path: 'showHeader',
      name: 'Show header',
      description: "To display table's header or not to display",
      defaultValue: true,
    });
  })
  .setNoPadding();

配置属性的格式

useFieldConfig配置属性最终通过data传入到panel内，格式如下：

{
  "state": "Done",
  "series": [
    {
      "fields": [
        {
          "name": "city",
          "config": {
            "custom": {
              ......
            },
            "thresholds": {
             ......
            },
            "mappings": [],
            "color": {
              "mode": "thresholds"
            }
          },