How to access the /public folder from a plugin?

Grafana Plugin Development
1

Pretty much what the title says.
I have utility functions in the public app folder that I would like all my plugins to have access to.

When I try:
import { myFunction } from 'app/foo/bar';

I get Cannot find module 'app/foo/bar' or its corresponding type declarations.

I also tried:

import { myFunction } from '/public/app/foo/bar';

import { myFunction } from '../../../../../public/app/foo/bar'; // relative to where my plugin is

import { myFunction } from 'grafana/app/foo/bar';

import { myFunction } from 'grafana/public/app/foo/bar';

None works.

I also tried to configure the plugin’s tsconfig.json to have public as a root dir, includes, and path, and nothing worked as well.

2

No answer, bumping the thread.
I would be ok with being answered with alternatives on how to share code between plugins, and how to access the redux store (since the store file is in public/app as well).

2 Likes
3

Hey, I’m dealing with the same problem. I just created a topic on this. Any help would be appreciated. Thanks!

1 Like
4

Bump, still in need of an answer, and I’m not alone :slight_smile:

1 Like
5

Bump, need an answer…

6

Bump, need an answer

7

bump again, someday maybe someone will see this :smiley:

8

Hi @flockofflames can you clarify what you mean by this? I have utility functions in the public app folder that I would like all my plugins to have access to.

Are you talking about the public folder of grafana or the public folder of your plugin?

Generally speaking when you work in a plugin and bundle it. webpack takes care of putting everything together, so in terms of JS code there are not folders, all (after bundling) is a single module.js file.

If you have an app plugin that has several plugins inside, you should be able to simply include the modules from each of your own plugin files and webpack will generate the correct module.js for each of the plugins. There won’t be a “shared” file to load, rather it’ll put the code on each plugin independently. You don’t need to do any special setup for this, this is the way it already works.

9

Hello @estebanbeltran and thank you for responding.
I’m talking about the public folder of Grafana, I cloned the whole thing to make changes to some core functions, and now I’d like to develop plugins that use what I developed in Grafana’s core basically.
Most notably I’m looking for a way to make panels (plugins) communicate with one another so that a click on one can trigger a zoom on another. Using Grafana’s redux store seemed like a good way to do this but unfortunately I can’t seem to access the store that is located in Grafana’s public folder in my plugins and they are isolated from one another.

10

@flockofflames we don’t really support that use case and thus there’s no API to do something like that

In such case the best you can do is create a fork of grafana and build the plugin inside grafana the same several inbuilt plugin are here https://github.com/grafana/grafana/tree/main/public/app/plugins

Regarding how you can communicate across several panels. Perhaps you can start emitting custom events that bubble up to a common element and then you can listen to them?

1 Like
11

Did you where able to do that?

12

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.