server.root_url not honored

[joerglemke]

Hello folks,
I tried to use your plugin because it sounds promising to achieve what I want. However it fails on load.

In my installation Grafana is running on a custom root URL, i.e. server.root_url is set.
This causes HTML Graphics plugin to fail on load of loader.js and a font file, because the root path is not used in the request.

I was successful when editing the module.js inside the running docker container by prefixing all occurences of "/public/plugins/gapit-htmlgraphics-panel" with the root path. One for loader.js, some more for the fonts.

I found this configuration at https://github.com/gapitio/gapit-htmlgraphics-panel/blob/main/src/components/TextEditor/index.tsx line 12, where the path is hard coded. I believe the Grafana configuration of root_url should be prepended here.
However, I could not find where the font paths are built in the source code.

[ZuperZee]

Hello @joerglemke.
Thank you for checking out the plugin.

The fonts are loaded from the scss file https://github.com/gapitio/gapit-htmlgraphics-panel/blob/main/src/fonts.scss.
The fonts should be relative to the plugin folder (/public/plugins/gapit-htmlgraphics-panel/fonts/OpenSans-Regular.woff2).

I'll try to fix the issues with the paths.

[joerglemke]

Thanks, the version from Github is working fine.

Font loading still fails (as expected), but I don't see where the font rendering is wrong. Probably the font is even unused or maybe there is another font source for the same font family .

[ZuperZee]

I've made an issue grafana/grafana#32750 about it.
It comes from the toolkit using a leading slash.

[ZuperZee]

A quick fix would be to add

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

in the css, but it will require internet access to use the fonts.

[joerglemke]

Thanks for sharing.
Does it mean, these fonts are not required by the plugin backend editor, but just for the frontend rendering if referenced by the stylesheet?

[ZuperZee]

Yes. The fonts are fetched from the browser.
The reason why the OpenSans fonts were saved on the backend is to make it available in a closed network.

The font is only for aesthetic. They aren't even used in the plugin. It has to be explicitly set in the CSS. Even then it's only for the elements in the panel htmlNode (HTML in the panel).

[ZuperZee]

Fixed in v1.3.2
(Cleaning up some discussions)