Need assistance in making the traffic light in splunk dashboard searchable

[sdkp03]

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.

[sdkp03 · Accepted solution]

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

[to4kawa]

 <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]

Am i missing anything in my XML code?

[to4kawa]

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

[sdkp03]

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

[ololdach]

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

[sdkp03]

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

[ololdach]

8.0.2 latest.

[ololdach]

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>

[sdkp03]

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

[ololdach]

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

[sdkp03]

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>