Dashboards & Visualizations

Getting Time token value in JS to use in Drill-Down with Status Indicator Viz...

kwestlake
Engager

Hi All

I was wondering if any kind soul could point me in the right direction with this.

I recently put together a jazzy looking dashboard using the Status Indicator Visualization, unfortunately though, it has no built-in drill down capabilities. So the hack others on this forum use is open a pop-up when the panel is clicked using JS. I've got this bit working, for the life of me, I can't figure out how to get the filter values/tokens from the current dashboard to pass onto the pop-up URL.

I've hacked together the following script using examples on the forum and the Splunk dev docs:

 // Components to require
 var components = [
    "splunkjs/ready!",
    "splunkjs/mvc/simplexml/ready!",
    "jquery"
];

// Require the components
require(components, function(
    mvc,
    ignored,
    $
) {
    $('#something').click(function() {

        // Get the default model
        var defaultTokenModel = splunkjs.mvc.Components.getInstance("default");
        // Get some token from there
        var time_token = defaultTokenModel.get("time_field");

        // Other method from doc
        //var tokens = mvc.Components.get("default");
        //var time_token = tokens.get("time_field");

        window.open(
                  'drilldown_report?earliest=' + time_token.earliest,
                  '_blank' // <- This is what makes it open in a new window.
                );
    });
});

I tried 2 methods of getting the Time token, using "Components.getInstance()" and "Components.get()", in addition tried looking for the token name of "time_field" and "form.time_field", the actual parent-dashboard URL is:

https://splunk.myhome.uk:8000/en-GB/app/search/my-core/edit?form.time_field.earliest=-24h%40h&form.t...

but all I ever get back is

VM3277:30 Uncaught TypeError: Cannot read property '**earliest**' of undefined
    at HTMLDivElement.eval (eval at globalEval (common.js:1003), <anonymous>:30:61)
    at HTMLDivElement.dispatch (common.js:1014)
    at HTMLDivElement.elemData.handle (common.js:1014)
eval @ VM3277:30
dispatch @ common.js:1014
elemData.handle @ common.js:1014
0 Karma
1 Solution

manjunathmeti
Champion

You need to require "splunkjs/mvc" library to access tokens.

// Components to require
  var components = [
     "splunkjs/mvc" ,
     "splunkjs/ready!",
     "splunkjs/mvc/simplexml/ready!",
     "jquery"
 ];

View solution in original post

0 Karma

manjunathmeti
Champion

You need to require "splunkjs/mvc" library to access tokens.

// Components to require
  var components = [
     "splunkjs/mvc" ,
     "splunkjs/ready!",
     "splunkjs/mvc/simplexml/ready!",
     "jquery"
 ];
0 Karma

kwestlake
Engager

Thank you.. Also, I discovered I was addressing the tokens wrong. I dumped the objects out to the browser console, and found the correct paths. Using the following its now working:

        var defaultTokenModel = splunkjs.mvc.Components.getInstance("submitted");

        // Get some token from there
        var time_token = defaultTokenModel.get("form.time_field.earliest");

Also I believe time_field.earliest would also do - Basically I was mis-understanding the value returned by Get(), I thought it was an object, in fact, the tokens seem to be stored in a named list.

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Thanks for the Memories! Splunk University, .conf25, and our Community

Thank you to everyone in the Splunk Community who joined us for .conf25, which kicked off with our iconic ...

Data Persistence in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. What happens if the OpenTelemetry collector ...

Introducing Splunk 10.0: Smarter, Faster, and More Powerful Than Ever

Now On Demand Whether you're managing complex deployments or looking to future-proof your data ...