Import Grafana modules into custom plugin

Grafana Plugin Development
1

I’m trying to create a customized version of the InfluxDB datasource that is tailored to my specific usecase. I copied the source for the shipped InfluxDB datasource into a new folder in data/plugins, and pulled in grunt and typescript configurations from the typescript-template-datasource. I added triple slash references for grafana-sdk-mocks to my new version of the InfluxDB datasource code as described in the documentation for the sdk mocks.

The thing that’s causing me trouble is that the original InfluxDB plugin imports app/core/components/query_part/query_part. First, query_part isn’t part of the SDK mocks. So I added a declaration to common.d.ts in the sdk mocks for the exported classes/functions in query_parts. Now my plugin compiles, but when I try to use the new datasource in grafana, I get 404 errors saying that there were problems instantiating http://grafana.staged-by-discourse.com/public/app/core/components/query_part/query_part

The path to the module looks right, so my suspicion is that there’s something in the Grafana build/deploy process that makes the module not available at the same path for my custom plugin as it is when the shipped InfluxDB plugin is built. I guess one answer would be to bundle a copy of the query_part module into my plugin, but is there a cleaner way to use the one Grafana already has and avoid duplication?

1 Like
2

Hi, I’m getting the same error.
If you know how to solve it, could you please let me know?

3

@marcusolsson @vsergeyev @daniellee @svetb

Can I please get any insight of this, I tried to build a custom plugin myself in data/plugins folder.( [the plugin actually extends the functionality of existing grafana panel plugin] just like @cantankerousbullmoos tried to customize influxdb) .The new plugin needs to make use of native typescript files like app/features/explore/utils/links, app/core/services, app/types etc. while building it gives [Cannot find modules or corresponding type declarations error]
In order to resolve these module load errors, I tried to tweak the tsconfig.json by introducing path mappings and tools like tsmodule-alias so that I can map these @app components by aliasing. But this didn’t help.

Can you’ll please suggest a better way to “import public/app folder inside custom panel plugin”?