WIP/POC - Enable declarative way of panel options / editors definition #16731

dprokop · 2019-04-23T18:59:56Z

Based on #16718

This is a heavy POC/WIP

The idea behind this PR is to enable declarative way of panel editors definition. Core typings are available in panelOptions.ts. Based on options UI model the PanelOptionsUIBuilder component will create options editor. For now there are only simple option inputs implemented: BooleanOption, Numeric(Integer/Float)Option.

Major proposed change is OptionInputAPI interface that would enforce all option editor components to have a common API (value/onChange). Some steps in this direction are already taken (see ThresholdsEditor, ValueMappingsEditor).

To see the proposed JSON model for options UI take a look at panel/gauge/module.tsx. Gauge panel options editor is now rendered from options JSON model using a very primitive (yet) PanelOptionsUIBuilder component

Next step is to implement and API to make the model creation easy. The draft shape will be sth more or less like:

 const MyPanelOptionModel = new OptionsEditorUIModel<PanelOptions>()
   .addRow(/*{row config, i.e. number of column }*/)
     .addColumn()
       .addPanel('Basic settings') // Creates
         .useStatsPicker('Show', 'stats')
         .useUnitPicker('Unit', 'unit')
         .useDecimalsInput('Decimals', 'decimals')
         .useTextInput('Prefix', 'prefix')
         .useTextInput('Suffix', 'suffix')
         .addSelectOption('Font size', 'fontSize', /*[...options]*/ )
       .endPanel()
     .endColumn()
     .addColumn()
       .addPanel('Gauge')
         .useNumber('Min value', 'minValue')
         .useNumber('Max value', 'maxValue')
         .useToggle('Show labels', 'showThresholdLabels')
         .useToggle('Show markers', 'showThresholdMarkers')
       .endPanel()
     .endColumn()
     .addColumn()
       .addPanel('Threshold')
         .useThresholdEditor('thresholds')
       .endPanel()
     .endColumn()
   .endRow();

TODO:

Implement basic options UI elements (i.e. TextOption, SelectOption...)
Implement API for options UI model creation
Implement PanelOptionsUIBuilder components to render options edito layout/panels/etc
Make it panel independent (no Panel in naming convention)

…any)

…tAPI

ryantxu · 2019-04-23T19:10:25Z

Quick feedback without having looked far...

love it :)
Lets name things to feel appropriate for more than just panels -- this same stuff would be useful in datasources, apps and some builtin UI elements.

Rather than PanelOptions maybe OptionsEditor

I'll look more later

dprokop · 2019-04-23T19:13:24Z

Rather than PanelOptions maybe OptionsEditor

Definitely. For now I focused more on the typings, so would love to get some feedback on that:)

torkelo · 2019-04-23T19:21:30Z

Cool! yea, the addPanel and using the Panel name for a "options box" feels confusing as Panel term is used already :)

dprokop · 2019-04-23T19:25:17Z

packages/grafana-ui/src/types/panelOptions.tsx

+   * it could be 'minValue'
+   * Question: Should we name it option instead of path?
+   */
+  path: P;


Not sure we should name it path since I'm allowing shallow options manipulation only. I think we should strive for editors composition(via declarative API, i.e. useCustomOption('Some custom options', 'customOptionKey, CustomOptionEditor)` rather than handling deep paths for options. Any thoughts on that @ryantxu?

Does path represent the json attribute name? if so, maybe property? and make sure it is a valid property

Yes, it's basically json attribute name. property sgtm

ryantxu · 2019-04-24T05:18:14Z

packages/grafana-ui/src/types/panelOptions.tsx

+  Boolean = 'boolean',
+  Object = 'object',
+  Array = 'array',
+}


I don't fully understand how this will work, but Array strikes me as a differnt camp. I would expect somethign like:
DataType

text

float

integer

boolean

custom (=> object)

Properties:

multi-valued (stored as array)

min/max/step (numbers)

MaxLength (strings)
etc

@ryantxu it is not used yet. Array/Object will not be there for sure. Thing is I wanted to use it for primitive option types to automatically select UI component based on the option type, if no component was specified. That's why component is an optional prop in OptionUIModel interface

ryantxu · 2019-04-24T05:22:38Z

packages/grafana-ui/src/types/panelOptions.tsx

+ *      + Option 2                    on/off +
+ *      + ...                                +
+ *      ++++++++++++++++++++++++++++++++++++++
+ */


I love ascii art comments ❤️

ryantxu · 2019-04-24T05:23:50Z

packages/grafana-ui/src/types/panelOptions.tsx

+// //         .useTextInput('Suffix', 'valueMappings.suffix')
+// //         .addBooleanOption('Title', 'option.path')
+// //         .addSelectOption('Title', 'option.path', )
+// //       .endPanel()


What are thoughts on how an external plugin would add to this?

there will be a way to add custom components of course. Adding high level structures (groups) that can be reused will be a bit trickier :)

Yes, I was thinking about it and my idea was to stick with the row/column approach, but enable used component config, i.e. addRow({renderAs: MyRowComponent}). Same with groupings: for now I thought only on panel(which name we need to change) and fiieldsets which are panel options specific. But the same approach could be taken towards grouping, i.e. current addPanel and addFieldset could use more generic function addGroup({renderAs: PanelOptionsGroup}).

ryantxu

This is really important and I am happy it is getting attention. This will help a lot.

My other big reaction/advice is to make sure we check existing solutions for inspiration and see if they are appropriate to use/extend. The biggest one that pops out in my google searching is:
https://mozilla-services.github.io/react-jsonschema-form/

Maybe also check:
https://jsonforms.io/
https://medium.freecodecamp.org/how-to-autogenerate-forms-in-react-and-material-ui-with-mson-5771b1b7e739
https://github.com/redgeoff/mson

The advantage of starting with something like JSONSchema is that we get robust validation out-of-the-box. The disadvantage is that is is json :) and would be better as typescript. Quick googling show: https://github.com/bcherny/json-schema-to-typescript -- here is an article that explores some options: https://spin.atomicobject.com/2018/03/26/typescript-data-validation/

dprokop · 2019-05-06T07:38:21Z

Closing in favour of #16773

dprokop added 7 commits April 23, 2019 11:02

Make SelectOptionItem a generic type to enable select value typing

cd0d42f

TS ignores because of optional value on Select items (it's no longer …

bad92d2

…any)

WIP typings for declarative options API

c30cf46

Basic components for building options based on options ui model

787188b

Make thresholds editor and value mappings editor implement OptionInpu…

3869a85

…tAPI

Allow grid columns config for PanelOptionsGrid

2aa02b5

Enable rendering panel options editor based on OptionsUIModel

c36c054

dprokop requested review from torkelo and ryantxu April 23, 2019 18:59

dprokop commented Apr 23, 2019

View reviewed changes

ryantxu reviewed Apr 24, 2019

View reviewed changes

This was referenced Apr 24, 2019

grafana/ui: Enable React based options editors for Datasource plugins #16748

Merged

WIP/POC - Enable declarative way of panel options / editors definition (alternative version) #16773

Closed

dprokop closed this May 6, 2019

dprokop mentioned this pull request Mar 25, 2020

Plugins: Fluent API for custom field config and panel options creation for PanelPlugin #23070

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP/POC - Enable declarative way of panel options / editors definition #16731

WIP/POC - Enable declarative way of panel options / editors definition #16731

dprokop commented Apr 23, 2019 •

edited

Loading

ryantxu commented Apr 23, 2019

dprokop commented Apr 23, 2019

torkelo commented Apr 23, 2019

dprokop Apr 23, 2019

ryantxu Apr 24, 2019

dprokop Apr 24, 2019

ryantxu Apr 24, 2019

dprokop Apr 24, 2019

ryantxu Apr 24, 2019

ryantxu Apr 24, 2019

torkelo Apr 25, 2019

dprokop Apr 25, 2019

ryantxu left a comment •

edited

Loading

dprokop commented May 6, 2019

WIP/POC - Enable declarative way of panel options / editors definition #16731

WIP/POC - Enable declarative way of panel options / editors definition #16731

Conversation

dprokop commented Apr 23, 2019 • edited Loading

ryantxu commented Apr 23, 2019

dprokop commented Apr 23, 2019

torkelo commented Apr 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryantxu left a comment • edited Loading

Choose a reason for hiding this comment

dprokop commented May 6, 2019

dprokop commented Apr 23, 2019 •

edited

Loading

ryantxu left a comment •

edited

Loading