Recommendation - Business Text Panel for Javascript shenanigans

Not asking any question here, but I’ve just discovered how absurdly useful the Business Text Panel is for those who want to manipulate variables and perform other arbitrary work on a dashboard. I’m 100% unaffiliated in any way whatsoever BTW.

Whilst it is principally designed to use handlebars to help display custom HTML in a panel, it also provides a great place to run Javascript code that can interact with so much Grafana backend stuff.

Using Javascript I’ve now been able to:

  • parse and restructure multi dimensions JSON from am Inifinity data source
  • query all datasources and select them based on name / id
  • change main datasource based on JSON data which identifies different isolated cloud environments
  • inspect the time ranges on a dashboard and switch between fine grained and downsampled data sources
  • run full queries against data sources and process the output
  • perform arbitrary string matching of file paths and disk mount points to know which partition a given file of interest is on, so it’s disk utilization can be specifically graphed
  • update dashboard variables with new details for other conventional panels to utilize

In addition to this, I’ve also been able to:

  • totally retheme the dashboard style with Internal and External CSS
  • add images to the dashboard background
  • create “popup windows” which appear on a link click and disappear on clicking off of them, which are great for showing less used information that varies significantly in size, so hard to display in a fixed size panel.

It’s absolutely revolutionized how I can get extra flexibility from Grafana when my needs aren’t / can’t be covered by the default UI.

I am finding it a bit tricky working out what is a responsible thing to write into business critical dashboards that need to remain supportable and understandable, but I think I’m riding that line mostly, and so many things have suddenly become so much better, cleaner and easier!

If anyone has been able to achieve any other significant goals, I’d love to get more ideas, and happy to expand further on anything I have achieved if people wanted to ask.

3 Likes

probably my fav plugin by far! see this

and this for some stuff others have done

3 Likes

Oh here’s one thing maybe someone else can confirm… is it possible to update the contents of a custom / query variable? I can set a single value easily enough, but is it possible to replace the whole list? I certainly can’t see any way yet.

@RocketSurgeon Thank you for this post!

Would you be interested to publish a blog post on our blog (Blog | Volkov Labs) to highlight your use of the Business Text panel? Similar to what you published on forum with extended context, examples and screenshots?

Are you asking about updating Dashboard variables or the way how to display them? We have various examples in documentation

2 Likes

Currently I am querying hostnames from 3 different cloud environments, and merging the results and posting them to a separate API, which then filters and enriches them, giving back a user friendly list of hosts across all clouds. In your panel I can now query these clouds directly in javascript, and filter them on the client, however I would then need to push that list of possible variable choices back into a variable for a user to select. Can I load that list of 350 hostnames into a variable somehow? I don’t think so, but you’re clearly going to know more than me.

Yeah I’d possibly be interested. I do have a habit of losing interest in things when the next exciting thing comes along though!

1 Like

@RocketSurgeon Yes, you can load a list of hundreds of hostnames in a variable using locationService.

You can also look into using Business Variable which we tested on 10,000 values without significant performance degradation.

1 Like

Well I’m not clear how I would get those values in easily, but moreover I realised that I was saying how useful the panel is for Javascript and didn’t think to just create my own HTML input inside the panel, which I’m naturally free to do whatever I want with.

I’ve now been able to further customize my experience by removing both all use of Handlebars and the use of the built-in panel data query.

I now have an asynchronous workflow which grabs /api/datasources and locates the data sources we want for each monitored cloud, and goes on from there to query various other backends that were previously called via dashboard variables. I then end up with a customized dashboard header which also passes out a few key variables via a locationService.partial() call that the rest of the dashboard can use as normal

I’ve therefore been able to make the whole loading process faster and more flexible, and focussing all effort into a small amount of conventional HTML, CSS and JS and totally because of the openness of @mikhailvolkov 's fantastic panel.

3 Likes

@RocketSurgeon Great to hear that. More reasons to share your experience with Community.

1 Like

Yeah all for it, esp if i get a hotline to the developers :smiley:

One thing I think I’ve understood from how you’re implementing the javascript is that I can’t really define JS variables properly at a session level as I am stuck inside a function of your creation. So defining a const etc will not exist on the next time the function is automatically executed. As such I’m left not explicitly declaring variables in general and doing a number of
if (typeof variablename === "undefined" ) { variablename = ... }
to know if I have this variable (e.g the results from an /api/datasources call) in the environment already or not. I’m not missing a trick on somewhere more long term to store this sort of data for a user? Any style points on that within the limitations you’re developing with would be handy.

Oh also I think this is very much a grafana level thing, but as I have a dev org and prod org, I find the cookies (I think) get missed up at times, and I can’t call a datasource in one org after working in the other without a page reload. Anything at this level to deal with this without triggering a location.reload() on a fetch() error?

@RocketSurgeon To persist values you need to use dashboard variables, which is recommended Grafana’s practice or local storage.

We don’t use cookies in any of our Grafana projects.

Ah well today I learned all about sessionStorage. Working well so far!

1 Like