React Dropdowns and Checkboxes for Grafana DS Plugin

alistairv · April 7, 2020, 12:48pm

Hi everyone,

Since Grafana is migrating from Angular to ReactJS, I have been tasked to rewrite the datasource plugin of the company I work in to also use React elements. To do the task, I decided to use the grafana-toolkit as a base.

I noticed that instead of using the HTML input tag for string inputs, the toolkit offers the FormField element located in node_modules/@grafana/ui/components folder. In our old plugin, we used Angular along with the gf-form-checkbox and gf-form-dropdown tags.

Here is my question:
Currently, are there any Grafana elements that replace gf-form-checkbox and gf-form-dropdown in the same way FormField replaces input? I tried searching the ui/components folder, but without success (or at least without recognising them).

vsergeyev · April 7, 2020, 2:30pm

Hello @alistairv,

Please take a look at:

it may give you an idea on available components.

For example, Select:

github.com

grafana/grafana/blob/master/public/app/core/components/Select/MetricSelect.tsx#L75


  const { options } = this.state;
  const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
  return allOptions.find(option => option.value === this.props.value);
}


render() {
  const { placeholder, className, isSearchable, onChange } = this.props;
  const { options } = this.state;
  const selectedOption = this.getSelectedOption();
  return (
    <Select
      className={className}
      isMulti={false}
      isClearable={false}
      backspaceRemovesValue={false}
      onChange={item => onChange(item.value)}
      options={options}
      isSearchable={isSearchable}
      maxMenuHeight={500}
      placeholder={placeholder}
      noOptionsMessage={() => 'No options found'}

Regards,
V.

alistairv · April 7, 2020, 6:34pm

Hello @vsergeyev ,

thank you very much for the answer! The MetricSelect element fulfills the role of a gf-form-dropdown really well.

As far as I saw, the Select folder you shared contains maily menu-esque elements (hence the name, I guess). Do you also happen to know a gf-form-checkbox substitute? I suppose I could modify an input field somehow, but that’d be a downgrade from the current state.

Kind regards,
A.

skarhed · April 8, 2020, 3:02pm

Hi!

If you look in your package.json, which version of @grafana/ui do you have?

We’re currently working on preparing @grafana/ui for 7.0, and we have a lot of new components avilable here https://developers.grafana.com/ui/canary/index.html?path=/story/forms-checkbox--controlled. If you want to experiment with the, try either latest or next version (https://www.npmjs.com/package/@grafana/ui)

They are under heavy development right now - so next is very unstable.

/Tobias Skarhed

alistairv · April 8, 2020, 5:41pm

Hi,

the @grafana/ui is already set to next. I just ran a fresh yarn install and was able to find the Forms constant with all the elements it offers, it was just what I needed. Thanks for the help, and for the Docs Overview in the link, it is really convenient for checking usages and elements without having to manually try them inside the project

A.

skarhed · April 9, 2020, 7:56am

Awesome! If you use next you will have issues, as we are currently moving elements from the Forms constant. latest is preferred until 7.0

Topic		Replies	Views
Styling of Forms.Checkbox Grafana Plugin Development	3	978	April 14, 2020
React Grafana checkbox api	2	1168	August 17, 2020
How to access input elements in Grafana Grafana Plugin Development	1	414	November 15, 2018
Datasource plugin creation: What is right way to use form? Grafana Plugin Development	6	2069	February 24, 2020
Equivalent of 'label with typeahead dropdown (Angular)' in grafana > 7, React component Grafana Plugin Development mysql , plugins , angular	3	533	January 7, 2023

React Dropdowns and Checkboxes for Grafana DS Plugin

Related topics