Grafana v11.2.2 (c47b921ef4)
I built a Dashboard with a “Business Charts” (Apache EChart) Graph panel. The graph visualizes a status of the jobflow for several environments. Postgres is used as a datasource. Information about nodes and edges is stored in separate tables. This part - drawing graph works well, no complaints.
There are two Dashboard variables: “env” and “batch_dt”. Correspondingly there are 2 drop-down combos that let me change env and date. This works smoothly.
I want to make this Dashboard more tailored to my needs. I am adding dozen of buttons (one per each environment). They will have two functions:
- indicate the overall status of the environment (button is green if everything is ok, red - if there is an issue)
- serve as a quick switch between environments.
I tried several methods: HTML panel, Text panel. I was able to make it work with the Text panel. See screenshot below. Text panel on the left, Business Chart on the right.
Indeed it switches to the right environment on a button click and sets proper URL. However, I am not happy. Every time I click a button in the Text panel the whole Dashboard (rather web page) is reloaded.
http_here://agas01:3000/d/be1vhlg56tm9sf/02-jobflow?orgId=1&var-env=cox&var-batch_dt=2024-11-18&refresh=1m&editPanel=3
Partial HTML in Text panel:
<body>
<div class="button-container">
<!-- Buttons arranged in two columns -->
<button class="button" onclick="handleClick(this, 'nea')">NEA</button>
<button class="button" onclick="handleClick(this, 'cea')">CEA</button>
</div>
<script>
function handleClick(button, newValue) {
// Part 2: Update Grafana Dashboard Variable
const currentUrl = new URL(window.location.href); // Get the current dashboard URL
currentUrl.searchParams.set('var-env', newValue);
// Reload the page with the updated variable to apply the change
window.location.href = currentUrl.toString();
}
</script>
</body>
Reloading page is not very elegant solution. I would like only the affected (Business Chart) panel to refresh. I could not find the way to refresh a single panel from another panel.
I decided to try a different approach. Buttons were added to the Graph panel itself. I expected I would have more control over the panel state with this setup.
I tired to use different methods but nothing seems working. Here are some methods I have tried to handle button click event.
// Working. Full page reload. Not exactly what I need
function handleButtonClick(buttonEnv) {
const variableName = 'var-env';
const newValue = `${buttonEnv}`;
const currentUrl = new URL(window.location.href); // Get the current dashboard URL
currentUrl.searchParams.set('var-env', newValue);
window.location.href = currentUrl.toString();
}
// method 2. not working
function handleButtonClick(buttonEnv) {
const variableName = 'var-env';
const newValue = `${buttonEnv}`;
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('var-env', newValue); // Update the variable in the URL
// Change the URL without reloading the page
window.history.pushState({}, '', currentUrl.toString());
// Optionally trigger a refresh of the panels if needed
const event = new Event('grafana-variable-changed');
window.dispatchEvent(event);
}
Besides I found some info that the refresh() or runQuery() methods can be used but I have no idea how.
There were some ideas about using angular but support for angular will be dropped in Grafana 12.
I do not see any errors in the console when adding console.log() with different arguments through the code.
I can’t list all Community post I went through but looks like I am not the only one who is looking for solution.
I am open to ideas.
