I am developing a panel plugin for grafana. My development cycle is like this:
- Make change to controller.js file for the plugin
- Re-build docker image for application (which in turn runs grunt to build js and put files in the right folder in the image)
- Update running docker container to use newly built image
- wait for grafana server inside container to load (10-15 sec)
- Refresh browser, log inn to grafana, load the plugin, navigate to a dashboard where the panel is used
- See the changes I made in action
- Profit!
The problem is that this only works once in a while. What happens most of the time is that the changes I made do NOT show up in the browser.
My first suspect was of course Docker, because… Docker. But I have managed to verify that indeed my change has been propagated to the actual file that is inside the running in the image. I have verified it like this:
docker exec -ti $(docker ps | grep grafana | awk ‘{print $1}’) bash -c "cat /var/lib/grafana/plugins/my-app/panels/annotation_editor/annotation_editor_ctrl.js | grep version"
To break this command apart:
- $(docker ps | grep grafana | awk ‘{print $1}’) will get the ID of the running grafana container
- docker exec -ti $(…) bash -c will run a command inside that container
- cat /var/…/ccc_ctrl.js | grep version will show all lines with the word “version” in the controller.js
Since the controller script file contains a line like this in the top:
let version=“9”;
console.log("Version: ", version);
… it will show up and so I can verify that the correct version of the file is in the image.
However, when I load the plugin in the browser, the ouput is still “Version: 8”.
So my next suspect was the browser’s cache. I have made sure to clear the browser cache. In fact I tried incognito mode and alternate browser instances. No cigar.
So now my primary suspect is grafana’s cache.
If I open the url of the .js file I get a 404 page that looks like the attached screenshot. Please note that the URL drops the “my-app” part of the file path for some reason. This URL was opened directly from chrome developer tool. I literally right clicked the tab showing the controller .js file and selected “open in new tab”.
Another telling sign is that the .html files of the plugin never gets stale in the cache, only the .js do.
I tried “touching” the file in the running container to see if grafana would pick that up as an “file changed”.
I have ensured that docker uses the exact same clock as my host system by following this advice: https://stackoverflow.com/questions/24551592/how-to-make-sure-dockers-time-syncs-with-that-of-the-host
I have tried editing the file inside the container at run time to see if the file needs to change for grafana to pick it up.
So at this point I would really like someone to help me with suggestions on how I can bypass grafana’s cache while developing plugins. This is driving me crazy!