Dashboards & Visualizations
Highlighted

Refresh data in table by collecting token on click with JavaScript

Path Finder

Hello, Splunkers.

I have developed a dashboard with a custom visualization that we have developed according to requirements. This custom visualization is a panel with four icons, and depending of icon where user do click, the query of the table must to be executed with a value of a token.

We have developed one JavaScript that captures the click event on each icon, and the JS sets one token with a different value for each icon. This works fine, and the token is updated with new value on each click, but the table that filters its data by this token value is not updated when token changes. It's like when you not select "Search on change" when you creates an input.

I have been searching for the way to do that panel be refreshed on each token change, but I don't find this information.

Is there any way to do this? Maybe if the table runs with a query with id we can run the query from SearchManager of JS?

Thanks & regards!!

Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Legend

Can you add a snippet of the panel with four icons? I just want to see if the same can be done without JS.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Path Finder

Hello, Niketnilay.

Sure, this is the snippet:

alt text

Thanks!

0 Karma
Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Legend

@nsanchezfernandez, while updating the token on your custom visualization, which Token Model have you used? Can you update the token value to both default and submitted Token model?

I though the Custom visualization was either just data or just icon. However, seems like you are using both. I was able to build something similar using Single Value (which required CSS Override within XML Dashboard, but no JS) and Status Indicator (Which required JS Extension but no CSS).

For the JS Extension I updated both Default and Submitted token model and the search depended on the token ran on its own, the moment token was set/changed.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Legend

@nsanchezfernandez, following are the two run anywhere dashboards based on similar lines to question using Splunk's _internal index. These use Trellis Layout (Splunk Enterprise 6.6 onward, for version prior to that this would need to be done via Post-processing by running one search for each panel).

Option 1: Using Single Value with Trellis for Drilldown

alt text

Step 1: The search query collects the stats split by different log_level. Appendpipe is used to populate loglevel values which are not present in the stats. Prepare Data with count and percent. For splitting the visualization by loglevel, final query should be stats command.

Step 2: Set the Single Value drilldown using drilldown option as all and drilldown token as $row.log_level$

     <option name="drilldown">all</option>

     <drilldown>
       <eval token="tokLogLevel">$row.log_level$</eval>
     </drilldown>

Step 3: Above steps should get you Single Value panels with drilldown to set required token for the drilldown search to run. Now we would need CSS selectors to Color the Panels as per panel type and also display corresponding Icon i.e. for INFO color is Green with Check Circle icon. I have used Custom Decorations example from Splunk Dashboard Examples app. CSS Selector has been based on loglevel type for example for INFO panel it is `div[id*="1INFO_"]. The CSS




| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Path Finder

Thanks, @niketnilay!! This is amazing.

Finally, I had to change the development. This is really good, but we are working with an old version of Splunk (6.4.1) and trellis does not work on it, and the Status indicator neither...

Your option is very good, I'm very grateful of your time.

At last, I have developed a JS that captures the click on the button of each severity, and this invokes one method that uses the severity value clicked to run a query to get the data needed to show in the table. Then, I create a new TableView and assign the results of previous query to this table. On each click, table is created, and previously I delete the table, because if I don't do it, JS creates as many tables as clicks are done.

Maybe not is the best option, but it works fine!

Thanks & regards!

0 Karma
Highlighted

Re: Refresh data in table by collecting token on click with JavaScript

Legend

Glad you could get yours to work.

The JavaScript that I had given for Status Indicator should also work for your Custom visualization on similar lines using correct jQuery selector. All I did was set the token for both default and submitted token models. This just passes on the selected token to same Table which displays the results based on token changed.

If you are on 6.4.1 and you can only use Single Value the option you have it to use post-processing and return only one row at a time i.e. for example all values for INFO to be passed to first Single Value panel and so on. Since you have already got your custom visualization working, no need to stress (just remember there is an alternate option ;))




| eval message="Happy Splunking!!!"


0 Karma