I am developing a datasource plugin but I am running into a rather strange issue. Below is some context to our problem.
The first issue I encountered was knowing how to include npm modules in the browser so grafana can use them (node-rest-client-promise, for example). This GitHub issue: https://github.com/grafana/simple-json-datasource/issues/19 says to copy the modules into the src folder (it seems like grafana does not look in the node_modules directory) in order to make it accessible to grafana via the browser.
This led to another issue with require statements not being understood by the browser so I am using webpack to bundle the modules and make such statements understandable to the browser.
However, in doing this, webpack does not understand the path ‘app/plugins/sdk’ in the queryCtrl for importing the queryCtrl class. I came across the following Stack Overflow post:
https://stackoverflow.com/questions/47624327/typescript-import-paths.
Which suggests using grafana-sdk-mocks to fix this path issue. So I copied over the module into the src folder but it doesn’t show up in the browser and it seems that something is appending a .js extension to the path.
Error Message when attempting to select our custom datasource plugin:
Failed to load resource: the server responded with a status of 404 (Not Found) row_ctrl.ts:73 Plugin component error Error: Fetch error: 404 Not Found Instantiating http://www.localhost:3000/public/plugins/name-of-plugin/libs/grafana-sdk-mocks/app/plugins/sdk.ts.js. <= here is the appended .js
Loading http://www.localhost:3000/public/plugins/name-of-plugin/query_ctrl.js Loading plugins/name-of-plugin-datasource/module at index.js:20
The grafana documentation is not very clear as to how grafana looks for imported modules nor how it resolves the ‘app/plugins/sdk’ path since it is nowhere to be found locally.
=====
Technologies we are using:
Grunt => Used to copy from the src/ directory to the dist/ directory and handle babel transpilation
Babel => Used to transpile from ES6 to ES5 standards
Webpack => Used to bundle node modules and make them accessible to grafana via the browser
Our pipeline:
$ webpack
$ grunt && brew services restart grafana
Grafana was installed using these steps:
$ brew update
$ brew install grafana
$ brew tap homebrew/services
$ brew services start grafana
Any help would be greatly appreciated!