Dashboards & Visualizations

Need assistance in making the traffic light in splunk dashboard searchable

sdkp03
Communicator

We have a splunk dashboard with traffic lights implemented as mentioned in the article - https://answers.splunk.com/answers/309024/is-it-possible-to-show-the-traffic-light-visualiza.html

Though the lights appear fine as expected, on click nothing happens. Ideally if its a chart on click search window would open with corresponding events. Is there someway i can achieve the same.

Labels (2)
Tags (1)
0 Karma
1 Solution

sdkp03
Communicator

Could get drilldown working using small js script mentioned in the URL - https://answers.splunk.com/answers/471329/is-it-possible-to-drilldown-from-an-status-indicat.html

All you need to do is follow below 3 steps:

  1. create a JavaScript file in your app folder: $SPLUNK_HOME/etc/apps//appserver/static/drilldown.js
    Content to be included in js file:

     var components = [
         "splunkjs/ready!",
         "splunkjs/mvc/simplexml/ready!",
         "jquery"
     ];
    
     // Require the components
     require(components, function(
         mvc,
         ignored,
         $
     ) {
    
         $('#clickable').click(function() {
           window.open(
                       '<Your_dashboard_link>',
                       '_blank' // <- This is what makes it open in a new window.
                     );
         });
     });
    
  2. Including js in your dashboard or form as appropriate.
    Example:
    dashboard script="drilldown.js" stylesheet="trafficlight.css" OR
    form script="drilldown.js" stylesheet="trafficlight.css"

  3. Add unique id to the panel in XML
    panel id="clickable"

After making the changes restart the servers. Clear the cache from the browser before loading the application.
you can also use the _bump url to bust the cache for you:
https://your_splunk_url/en-US/_bump

View solution in original post

0 Karma

sdkp03
Communicator

Could get drilldown working using small js script mentioned in the URL - https://answers.splunk.com/answers/471329/is-it-possible-to-drilldown-from-an-status-indicat.html

All you need to do is follow below 3 steps:

  1. create a JavaScript file in your app folder: $SPLUNK_HOME/etc/apps//appserver/static/drilldown.js
    Content to be included in js file:

     var components = [
         "splunkjs/ready!",
         "splunkjs/mvc/simplexml/ready!",
         "jquery"
     ];
    
     // Require the components
     require(components, function(
         mvc,
         ignored,
         $
     ) {
    
         $('#clickable').click(function() {
           window.open(
                       '<Your_dashboard_link>',
                       '_blank' // <- This is what makes it open in a new window.
                     );
         });
     });
    
  2. Including js in your dashboard or form as appropriate.
    Example:
    dashboard script="drilldown.js" stylesheet="trafficlight.css" OR
    form script="drilldown.js" stylesheet="trafficlight.css"

  3. Add unique id to the panel in XML
    panel id="clickable"

After making the changes restart the servers. Clear the cache from the browser before loading the application.
you can also use the _bump url to bust the cache for you:
https://your_splunk_url/en-US/_bump

0 Karma

to4kawa
Ultra Champion
 <search>
   <query>index=_internal | stats count by sourcetype|rangemap field=sum(value) low=0-0  severe=1-12</query>
   <earliest>-6h</earliest>
   <latest>now</latest>
 </search>

<query> needs SPL.

sdkp03
Communicator

Am i missing anything in my XML code?

0 Karma

to4kawa
Ultra Champion

<query>search?q=index=_internal<query>index=_internal
There is extra strings.

0 Karma

sdkp03
Communicator

Apologies, I overlooked. My query actually does not contain the extra strings - "search?q=".

This is my query:
source="" host="" status|head 1|search CRITICAL| stats count as critical|append [search index= host= source="" status|head 1|search UNKNOWN| stats count as unknown]|eval value=if(unknown>0,3,if(critical>0,8,0))|stats sum(value)|rangemap field=sum(value) low=0-0 elevated=1-6 severe=7-12

0 Karma

ololdach
Builder

Hi there,
first of all, like to4kawa pointed out, the example search was syntactically wrong. second, the implementation of the traffic light that you use may not be suitable for your version of Splunk. The option values additionalClass and classField are deprecated. You may need to look for a newer solution that actually works with v8.x but aside from that, I pasted your code into my dashboard, clicked on the value and it worked like a charm. Please install and take a look at the dashboard examples app from splunk. https://splunkbase.splunk.com/app/1603/ Take a look at the example "Custom Decorations". There they use .css to add a custom character to the single value. Exchange that character with an image and you're pretty much done.
Oliver

0 Karma

sdkp03
Communicator

Hi Oliver, am using Splunk Enterprise Version: 7.2.7. Just curious to know what version did you test my piece of code on.

0 Karma

ololdach
Builder

8.0.2 latest.

0 Karma

ololdach
Builder

Hi try setting the option "drilldown" to "all" and insert a drilldown tag like in the example below. Clicking the value will activate the search.

 <single>
    <search>
      <query>index=_internal | timechart count</query>
      <earliest>-15m</earliest>
      <latest>now</latest>
    </search>
    <option name="drilldown">all</option>
    <drilldown>
      <link target="_blank">search?q=index=_internal | stats count by sourcetype</link>
    </drilldown>
    <option name="refresh.display">progressbar</option>
  </single>
0 Karma

sdkp03
Communicator

I did try implementing the solution, but my panel is not searchable on click.

0 Karma

ololdach
Builder

Please define "searchable". The expected behaviour is that a click on the number digits of the traffic light single value opens a new browser tab/window with a search "index=_internal | stats count by sourcetype". It works in my lab environment. Please try it in a new dashboard with only one traffic light and post your simple xml code. Oliver

0 Karma

sdkp03
Communicator

Hi Oliver,

I have pasted the xml code here (I have just modified the search query). This is still not working for me.

Test Dashboard

<panel id="myColoredPanel">
  <html>        
    <h1> Component Status </h1>
   </html>
</panel>


<panel>
  <single>
    <title>process status</title>
    <search>
      <query>search?q=index=_internal | stats count by sourcetype|rangemap field=sum(value) low=0-0  severe=1-12</query>
      <earliest>-6h</earliest>
      <latest>now</latest>
    </search>
    <option name="additionalClass">icon-only</option>
    <option name="classField">range</option>
    <option name="drilldown">all</option>
    <option name="field">value</option>
    <option name="drilldown">all</option>
 <drilldown>
   <link target="_blank">search?q=index=_internal | stats count by sourcetype</link>
 </drilldown>
 <option name="refresh.display">progressbar</option>
  </single>
</panel>


<panel>
  <single>
    <title>SJob2 status</title>
    <search>
      <query>search?q=index=_internal | stats count by sourcetype |head 1|search "Job is UP" | stats count as clear | eval value=if(critical&gt;0,3,0)|stats sum(value)|rangemap field=sum(value) low=0-0 severe=1-10</query>
      <earliest>-24h</earliest>
      <latest>now</latest>
    </search>
    <option name="additionalClass">icon-only</option>
    <option name="classField">range</option>
    <option name="drilldown">all</option>
    <option name="field">value</option>
    <drilldown>
      <link target="_blank">search?q=index=_internal | stats count by sourcetype</link>
    </drilldown>
  </single>
</panel>
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...