Is MaterialUI exposed?

Grafana Plugin Development
1

hi,

I want to build a custom table panel with @material-ui, but it seems like some templates in that package are not exposed like the one called ‘TablePagination’. Here’s the screen shot

image
image1390×336 79.3 KB

most of what I imported works and but the one called ‘TablePagination’ doesn’t, it caused an error

image
image1298×156 25.3 KB

and also the panel shows nothing but this

image
image1112×428 18 KB

My Grafana Version: v6.3.1 (in a docker container)
Why not use the built-in table in @grafana-ui? : because it doesn’t support row click and there is still limitation

any hint to get rid of the error?

2

Looks like that component is uncompiled? We have not ts transpiler in the runtime you have to compile ts -> js when you build your plugin

1 Like
3

thanks for your reply. how can I tell if it is uncompiled? I just don’t understand why only this specific component is uncompiled but other components are work fine.

I inspected the built module.js in dist directory, it looks exactly the same with other working components

image
image2074×526 134 KB

image
image2076×508 122 KB

the @material package already contains js files for each ts file, I just don’t know why I should translate it to js just for this specific component.

But if I really need to do ts → js, how do people normally do that in grafana plugin?

4

I can help you because there is not enough doc.
I tested everything you described and I do not understand why the material /table works. I looked at the source code of grafana and outside of material / icon, I do not see anything. What I can say is that I managed to import the module pre-compiled … The webpack grafana toolkit must be custom to take into account the different modules you want to import.
I did not do it.
I have already compiled the code in amd of material-ui. For that, I replaced what was in material / code and I replaced it with the one already compiled. It’s ugly, I know.
While searching the net, I found some preparatory tips compiled with Grunt :

No simple option / solution is offered by grafana.
It’s very sad.

I put you the commands I needed to do it:

root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# mv core core.esm
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# mv core.old/umd/material-ui.
material-ui.development.js     material-ui.production.min.js  
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# mv core.old/umd/material-ui.
material-ui.development.js     material-ui.production.min.js  
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# mv core.old/umd/ core
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# ls
core  core.esm  core.old  icons  pickers  styles  system  types  utils
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui# cd core
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui/core# ll
total 1400
drwxr-xr-x  2 gaetan gaetan    4096 août  21 10:28 ./
drwxr-xr-x 11 root   root      4096 août  21 11:47 ../
-rw-r--r--  1 root   root   1119022 août  20 14:07 material-ui.development.js
-rw-r--r--  1 root   root    300220 août  20 14:07 material-ui.production.min.js
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui/core# ls
material-ui.development.js  material-ui.production.min.js
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui/core# mv material-ui.development.js index.s
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui/core# ^C material-ui.development.js index.s
root@PC13404LX:/var/lib/grafana/plugins/simple-react-panel-master/node_modules/@material-ui/core# mv index.s index.js

I imported like this in module.tsx :
import { TablePagination } from ‘@material-ui/core’;
import Datas from ‘./components/datas’;
console.log(TablePagination);

Result :

graf
graf1914×457 150 KB

it works but it would be nice if the grafana toolkit could have this option.

5

Thank you very much for your help. It’s useful. I’ll do it if it’s necessary, but I don’t really need that component to be honest. I might just stick with what it is now and hopefully Grafana can have a better support for such things.

The reason why I posted it is because I want to figure out why some components work and some do not. I think I can have an ideal workaround if I can understand why it was like that, but I still don’t

Yeah BTW, Grafana is awesome, but the doc is bad as always

6

No problem, with pleasure, I understand. I also laugh a lot on grafana documentation, especially on the development part.
I’m sorry Torkel but the answer you gave is exactly the same as the browser console … It does not provide any solution or explanation to the problem.
I’m still waiting for an answer to my post from 2d ago.

7

heehe true that !!! Most ppl come to grafana without a background on React or Angular and dont realize like i do that we need to compile the jsx to js in the dist folder. This information is missing in the documentation of Grafana too.

If someone is not seeing this dist folder… it means the js is not generated… use NPM or Yarn to compile the JSX files into js in the dist folder. Then grafana understands the plugin …

image

8

Thank you Samant! What is missing is a doc on the industrialization of the transpilation of external libraries.

Example: a custom webpack in grafana-ui.

In order to use the NPM or YARN build directly taking into account of external libraries.

Do you have that available?