Non Legacy Form Data Source Plugin Grafana

Grafana 7.5.x

As previously mentioned, the tutorial for Grafana data source plugin development is all over the place. Even in the latest version of Grafana (8.x), the tutorial shows this as the way to write the query editor form:

      <div className="gf-form">
        <FormField
          inputWidth={30}
          value={queryText || ''}
          onChange={this.onQueryTextChange}
          label="Query"
          type="string"
        />
      </div>

What is not really discussed in the tutorial is that this is the "old" way of doing it. I don't have the full history of Grafana, but the high level executive summary is that it was written in angular and has been transitioning to React. As of 7.0.0 they moved all of these forms into the LegacyForm variable and it is still used as the basis for the tutorial today.

The reason I went down this rabbit hole is that my data source plugin queries became longer. I needed to extend the input text field to be the full width of the container like other data source plugins do. If you notice above, I have inputWidth set to 30. This value cannot be any higher, because the css only has classes that go up to width-X where X is 30. There appears to be no mechanism in which you can tell the FormField to expand to the fullest extent possible.

A width of 30 wasn't cutting it so I started to look at how other plugins did their query forms. After a never ending rabbit hole of mismatched documentation and random github tickets and epics going back to 2020, I finally discovered that LegacyForm was put in at 7.0.0, but its replacements InlineField, et al, did not get released until 7.3.0. This was difficult to discern using semvar of ^7.0.0 as apparently only 7.2.0 was deemed compatible and that was what yarn downloaded.

It may be the case that the tutorials use the legacy forms such that plugin writers can target any(?) version of Grafana rather than 7.3.0+ but that really should in bold font somewhere on the page.

I bumped my dependencies up to ^7.5.0, as that is the server version we have deployed.

package.json

  "devDependencies": {
    "@grafana/data": "^7.5.0",
    "@grafana/runtime": "^7.5.0",
    "@grafana/toolkit": "^7.5.0",
    "@grafana/ui": "^7.5.0",
    "@types/lodash": "latest",
    "@testing-library/jest-dom": "5.4.0",
    "@testing-library/react": "^10.0.2"
  },

plugin.json

  "dependencies": {
    "grafanaDependency": "^7.5.0",
    "plugins": []
  },

I now have access to the newer, modern(?) forms that grafana is moving towards.

All of the other code from the previous blog post is valid, here is the change for the render:

render() {
    const query = this.props.query;
    const { queryText } = query;

    return (
      <InlineFieldRow>
        <InlineField label="Query" grow>
          <Input type="text" value={queryText || ''} onChange={this.onQueryTextChange} />
        </InlineField>
      </InlineFieldRow>
    );
  }

If you set width on the Input element, you will get the same behavior as before. The trick here is the grow flag on the InlineField. We can easily tell it to fill the width of the row.

You can see the difference between the two: