No backward compatibility with 6.x plugins

The backward compatibility with 6.x react plugin is broken. I have a custom plugin written in react which works fine in Grafana 6.x but breaks in 7.x.

I think the reason is due to the restructuring of @grafana/ui library. The old form elements are being exported as LegacyForms. There is no way we can use the plugins compiled with @grafana/ui 6.x library.

1 Like

I had to do following changes to my 6.x plugin in order for it to work in 7.x

In query editor =>
import { LegacyForms, InlineFormLabel } from ‘@grafana/ui’;
const { FormField } = LegacyForms;
import { QueryEditorProps } from ‘@grafana/data’; // Moved from @grafana/ui to @grafana/data

Note that FormLabel is removed and use InlineFormLabel instead

in datasource.ts =>
import { DataQueryRequest, DataSourceApi, DataSourceInstanceSettings, DataFrame } from '@grafana/data'; // Moved from @grafana/ui to @grafana/data

in module.tsx =>
import { DataSourcePlugin } from '@grafana/data'; // Moved from @grafana/ui to @grafana/data

In package.json =>
“devDependencies”: {
@grafana/data”: “^7.0.1”,
@grafana/runtime”: “^7.0.1”,
@grafana/toolkit”: “next”,
@grafana/ui”: “^7.0.1”,
@types/lodash”: “^4.14.138”,
“react”: “^16.13.1”,
“react-dom”: “latest”,
“react-scripts”: “latest”
}

So to say the updated plugin will work only in 7.x. We have to maintain 2 version on plugin side, one for 6.x and one for 7.x.

Please let me know if there is any way we have achieve the backward compatibility with 6.x plugins.

Thanks

Hi, the grafana libraries are loaded from the grafana, inside of which the plugin is used. Installed versions in package.json are used for type definitions. Therefore if you want your plugin to work for both 6 and 7 versions of Grafana, you’ll need to maintain two versions of the plugin. This solution is far from optimal and a few options how to fix this are being considered, but due to its complexity it may take some time before any of them are implemented.

You could also try to detect the current version of grafana based on available components and adjust accordingly, but this is more of a temporary hack than a proper solution.

Yes, thought so. Thanks for confirming.