Panel Conflict with other panel

Grafana Plugin Development
1

I been making multiple plugin, xxx-escaxxxx-panel, xxx-escaxxxx-panel,xxx-escaxxxx-panel, … but what happened is they have the same .tsx elements and start messing around. In each of the panel, I copy and pasted the textbox.tsx, and textbox.css. Ofc they have the same tsx but the style(textbox.css) is different in each panel. The problem was that when I finished with my development of the plugin and I distributed all of them to my local Grafana, the three panels started messing with each other. The first panel will use the textbox.tsx and textbox.css from the second panel. It sounds crazy but this is true. How I know is I recognize the style is from the second panel. It will fix itself with a refresh button then it will find the right tsx and CSS file. But this is annoying and my panel is for professional use. I don’t want this to happen.

2

Hi @morpinma it is not possible for panels to mix up their TSX files because in reality Grafana never loads the tsx files. It uses the bundled version from webpack that takes care of creating the correct namespaces that won’t collide.

What is more likely happening is that you are using global css classes that are colliding with each other. You should not be using css files that you import in your js files (like import textbox.css) because that will definitely create conflicts with other elements in the page using the same css classes and ids.

Instead of importing the css files you should be using emotion css

I would also like to ask you how are you developing your panel plugins. Are you developing them all independently? I mean, each one bootstraped independently with create-plugin and each one having its own build step?

3

Hi @academo, I’d used import textbox.css. Now after hearing the explanation from you, I think this is definitely the problem. I never read that I needed to use emotion CSS when developing Grafana plugin. Where can I read more about this? And why is this necessary? To answer your second question, I’d develop them independently but all of them are similar they share like 5 TSX classes between each panel plugin. I create each of them with npx @grafana/create-plugin@latest. Thank you so much for your help

4

Hi @morpinma,

You can see an example of using Emotion here:

Specifically you’ll see:

const s = useStyles2(getStyles);

The getStyles function defines all of the CSS for the individual classes in your component:

const getStyles = (theme: GrafanaTheme2) => ({
  page: css`
    padding: ${theme.spacing(3)};
    background-color: ${theme.colors.background.secondary};
    display: flex;
    justify-content: center;
  `,
  container: css`
    width: 900px;
    max-width: 100%;
    min-height: 500px;
  `,
  content: css`
    margin-top: ${theme.spacing(6)};
  `,
});

Then in the React component markup itself they are used as follows:

<div className={s.page}>

To answer your question about why this is necessary, Emotion CSS has many benefits but the biggest one in this instance is that it generates non-clashing CSS class names. So, while you define the class name as page in your code, in reality Emotion will be generating a class with a random unique identifier (e.g. css-1riaxdn). This resolves the issue that @academo mentioned of global css clashes affecting all 3 of your panel plugins that use the same class name in their textbox.css file.

I hope this helps.

5

It helps. Thank you so much for the explanation

1 Like
6

You’re very welcome, glad I could help.