Drop down template variable select event handling with Javascript

  • What Grafana version and what operating system are you using?
    11.1.1

  • What are you trying to achieve?
    Dynamically adjust date picker time range (from and to parameters) to timestamps that we load from datasource start and end timestamps when a drop down variable is selected to depict a specific time period of that event.

  • How are you trying to achieve it?
    *Apache e-charts plugin JS injection. Not sure how to go about it since I am unable to handle any drop down select events on any of the template variables

  • What happened?

  • When debugging using console.log() inside an event handler, I don’t see any events being triggered which leads me to believe that I am not referring to the native JS variables (corresponding to the template variable) correctly.

  • What did you expect to happen?
    event handler code needs to be executed to update from and to time params to start and end timestamps read from data source corresponding to the drop down selection.

  • Can you copy/paste the configuration(s) that you are having problems with?

  • // Function to get query parameter values by name
    function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
    }

// Log the start and end values to confirm
console.log(“From Time:”, startParam);
console.log(“To Time:”, endParam);

// Now you can update the URL with the start and end times if necessary
if (!getQueryParam(‘var-from_timestamp’) || !getQueryParam(‘var-to_timestamp’)) {
// Update the URL to include the new ‘start’ and ‘end’ parameters
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set(‘from’, startParam);
currentUrl.searchParams.set(‘to’, endParam);

console.log(currentUrl.toString());
window.location.href = currentUrl.toString();

}

document.addEventListener(‘template-variable-value-updated’, (event) => {
const { variableName, variableValue } = event.detail;

if (variableName === 'var-version') {
  // Construct the new URL with the selected variable value
  const newUrl = new URL(window.location.href);
  newUrl.searchParams.set('from', vars.var-from_timestamp);
  newUrl.searchParams.set('to', vars.var-to_timestamp);

  // Reload the page with the new URL
  window.location.href = newUrl.toString();
}

});

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

  • N/A

  • Did you follow any online instructions? If so, what is the URL?

  • N/A

Why is there a need to adjust the datetime picker? Why not use the date time coming from your datasource?

I’m using chained variables to store start and end timestamps of a deployment event (from infinity datasource json data) based on drop down variable called version.

eg:

[
{
  "version": "0.0.1",
  "start_timestamp": 1736285683000,
  "end_timestamp": 1736285683999
},
{
  "version": "0.0.2",
  "start_timestamp": 1736285684000,
  "end_timestamp": 1736285684999
},
{
  "version": "0.0.3",
  "start_timestamp": 1736285685000,
  "end_timestamp": 1736285685999
}
]

when you select 0.0.2 the the datetime picker needs to adjust to that specific window automatically to a range 1736285684000 to 1736285684999 without user having to enter and adjust the timestamps manually.

1 Like

@yosiasz

Thank you for your comment, it would be great if you could take a moment to explain how this works.
Our experience is that when you performa query to db for data within an an arbitrary from and to time, then the returned dataset does not have any effect on the Datepicker or the time range. This means that the data does not display and instead a “Zoom to Data” button is presented which when pressed moves to the time range for the returned dataset.

We could not find a way (outside of the Scenes framework) to automatically change the time range. So we developed our own as referenced recently here: Hide the "Zoom to Data" Buttons

This solution is a bit clunky, but seems to work ok,.
Are we missing something that this should just work out of the box (without hackery), I am curious.

Thanks for your help!

Best wishes
E

You don’t need the datetime picker if you already have the dates you need coming from your variable

So we have a custom timeseries panel that we use to parse metrics from our tsds, it does not have provision to specify any time constraints in the query or restrict time ranges in SQL like $__timeFilter(start_timestamp). How do I timebox the graph to desired time interval in this case?

What would the query to your data source look like outside of grafana with time ranges

We have a JSON data source that we use json-api infinity plugin to read deployment times: start_timestamp and end_timestamp which are stored as template variables. The dashboard itself has various metrics panels that reads from a timeseries db which uses an RRD (wiki/RRDtool) as input field in panel config. The DB returns a set of metric values that are then plotted as timeseries chart. However since we cannot restrict the query using any time delimiters (atleast the plugin developers did not include anyway to specify that in the panel), we rely on user to set the time range in datetime picker. I noticed that the datetime picker values are passed as from and to GET params in URL (eg: &from=1736286388742&to=now). So to leverage this, I wanted to construct the URL myself using Javascript and reload the page with new overwritten from and to values. Hope this clarifies! Happy to provide more examples or screenshots if that helps. Thanks