Custom Prometheus data source plugin

Attempted to create a custom Prometheus data source plugin that is pre-configured for application. Obtained the source code for the original Prometheus data source plugin from the repo: grafana/public/app/plugins/datasource/prometheus at main · grafana/grafana · GitHub

Then followed the procedure for adding the folder to the plugins folder listed in config file. The custom data source appears on the plugin list in console, but is unsigned with no description loading. The custom data source is available to use, but after selecting to add it, the following error appears:
Fetch error: 404 Instantiating https:// **** /public/plugins/prometheus3/module.js Loading plugins/prometheus3/module

Looking at the files from repo, they are all .ts format for React. Also tried this link but got a generic plugin folder that appears unrelated to Prometheus: https://grafana.com/api/plugins/prometheus/versions/5.0.0/download

Is it possible to obtain the source code of the Prometheus data source in .js format for Angular which is expected by console?

Version of Grafana is 7.5.4 and would expect React plugins to load. However, other plugins such as clock and pie-chart panel using Angular appear to work instead after loading. As an alternative to using an Angular version of Prometheus data source plugin, understanding why the console at this version would expect Angular.

That’s an interesting thing to try. My first question is whether you tried to actually build the plugin? You don’t mention building, so I’m assuming that’s a key missing piece. The build process is what will generate the JS files (in a dist directory) from the TS sources, and those are the files Grafana will actually load.

Now, for most custom plugins (e.g. GitHub - fifemon/graphql-datasource: Grafana datasource plugin to query data from a GraphQL API) you will have yarn.lock and plugin.json files that allow you to build the plugin by running e.g.

yarn install --pure-lockfile
yarn build

The Prometheus sources you point to obviously don’t have those, since they’re not designed to be built as a stand-alone plugin (but as part of the overall Grafana “tree”). So if you wanted to build it as a stand-alone plugin you’ll need to copy/tweak/generate those files somehow, in a way that will ensure that the right dependencies are installed during build.

I know this isn’t a full answer to your question, but hopefully it helps directionally.

Thanks! Yes, I believe this was the part missing. Looked through my old notes with the simple react plugin, as opposed to signed/built plugins, and forgot those extra steps are required before an unsigned plugin works. Will try this again and hopefully should work.

Is there a way to access the source code for the official Prometheus plugin to obtain yarn.lock, plugin.json, etc? Was hoping to take the existing one and just tweak a few things.

Nevermind, I see what you wrote regarding this. Seems like a project that will take some time.

I assume the same goes with the panel plugin? If for example I wanted to have a plugin pre-configured for a panel to plot certain metrics: grafana/public/app/plugins/panel/graph at main · grafana/grafana · GitHub

Yeah, it’s a tough one - maybe others here have better pointers.

If you’re up for a small adventure you could copy the generic/minimal package.json file from the “starter datasource” plugin, and try to build based on that - then see how it breaks, and include additional dependencies from the main Grafana package.json as needed.

1 Like

Ok, thanks a lot for the suggestion! Seems like a good starting point.

Can maybe try something similar with the simple react panel plugin for developing a graph plugin.

Trying out Grafana 8, and looks like library panels might be a good step in this direction. Can use library panels in each dashboard template within a folder, then update the original library panels to cascade changes. If its possible to have library panels span multiple organizations within a console, that would be very helpful.