topic Re: store search result to a javascript variable for dynamic displaying custom dashboard in Dashboards & Visualizations

store search result to a javascript variable for dynamic displaying custom dashboard

jperezh — Fri, 21 Jul 2017 19:45:47 GMT

Hi, I'm new to splunk and trying to create a custom dashboard using javascript. I want to store the result from a search to a variable in a javascript code so I can use it for displaying on a custom dashboard. So basically I need something like this:

javascript file
var x = "search index=test qualify=Me | stats count",

html

P.D. I know there is some similare questions out there but i haven't been able to make them work for my particular case.
Thanks in advance.

Re: store search result to a javascript variable for dynamic displaying custom dashboard

niketn — Fri, 21 Jul 2017 20:22:19 GMT

@jperezh, you can do this directly via SimpleXML using Search Event Handler and tokens. Any specific reason for JavaScript?

Following example uses done event handler to access search result field count and assign to token to be used elsewhere in the dashboard.

  <search>
    <query>index=test qualify=Me 
   | stats count
    </query>
    <earliest>-1h@h</earliest>
    <latest>now</latest>
    <done>
      <condition match="$job.resultCount$==0$">
        <set token="tokCount">0</set>
      </condition>
      <condition>
        <set token="tokCount">$result.count$</set>
      </condition>
    </done>
  </search>

PS: Following condition, $job.resultCount$==0, is used to default the token to 0 in case no results are found.

Re: store search result to a javascript variable for dynamic displaying custom dashboard

jperezh — Fri, 21 Jul 2017 22:05:34 GMT

Thanks for answering. I've just try that but I don't get the value but the search string: index=chartlike qualify=Me | stats count -1h@h now 0 $result.count$ . I thought of javascript because I implemented some facebook like buttons to qualify the charts and I want to get back the count of those buttons to display it beside the icons, I've mixed xml with html to make it.

this is my xml/html:

Blockquote

prueba

<panel>
  <chart>
    <search>
      <query>sourcetype="csv"</query>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">line</option>
    <option name="charting.drilldown">none</option>
  </chart>

    <html>
     <div>
          <!-- Boton de "me gusta" -->
          <a class="like_chart" title="Me gusta" id="like_app_chart1">
            <i class="fa fa-2x fa-thumbs-o-up fa-lg"/>
          </a>

        <search>
           <query>
             index=chartlike qualify=Me | stats count 
           </query>
           <earliest>-1h@h</earliest>
           <latest>now</latest>
           <done>
             <condition match="$job.resultCount$==0$">
               <set token="tokCount">0</set>
             </condition>
             <condition>
               <set token="tokCount">$result.count$</set>
             </condition>
           </done>
         </search>

          <!-- Boton de "no me gusta" -->
          <a class="like_chart" title="No me gusta" id="nolike_app_chart1">
            <i class="fa fa-2x fa-thumbs-o-down fa-lg"/>
          </a>

          <!-- boton de mostrar caja de comentarios -->
          <a class="comment" title="Comentar" id="comment_app_chart1">
            <i class="fa fa-2x fa-comment-o fa-lg" aria-hidden="true"/>
          </a>
          <!-- caja de comentarios -->
          <div class="comments" id="show_comment_chart1">
          <div id="comment_chart1" contenteditable="true" placeholder="Comentario"/>
            <span id="error_app_chart1">Máximo 140 caracteres&gt;</span>
            &lt;br/&gt;
            <button type="button" class="comment_chart" id="send_comment_app_chart1">Enviar</button>
          </div>

     </div>
  </html>
</panel>

Blockquote

P.D I would attach some screen captures but I don't have enough karma points.
I've already try to insert a Splunk sigle value with the search result buy I can olny seem to put it into a new panel.

Re: store search result to a javascript variable for dynamic displaying custom dashboard

niketn — Sat, 22 Jul 2017 05:19:56 GMT

@ jperezh, you have set the token in your search however, you have not displayed the same in either Splunk visualization or HTML panel. Based on your requirements

Option 1
Seems like you are looking for Splunk Custom Visualization called Status Indicator which shows value icon and color based on data (https://splunkbase.splunk.com/app/3119/) .

Option 2
If you do not want to use Status Indicator and stick to HTML to apply CSS Style to show thumbs up or down based on value you can also check out Custom Decorations examples in the Splunk 6.x Dashboard Examples App. Or check out the following blog: https://www.splunk.com/blog/2015/06/25/shiny-icons.html

Re: store search result to a javascript variable for dynamic displaying custom dashboard

niketn — Sat, 22 Jul 2017 05:23:16 GMT

PS: The token $tokCount$ set through the search needs to be displayed with CSS Styling in your HTML Panel. Something like the following:

     <search>
        <query>
          index=chartlike qualify=Me | stats count 
        </query>
        <earliest>-1h@h</earliest>
        <latest>now</latest>
        <done>
          <condition match="$job.resultCount$==0$">
            <set token="tokCount">0</set>
          </condition>
          <condition>
            <set token="tokCount">$result.count$</set>
          </condition>
        </done>
      </search>

<row>
  <panel>
     <chart>
         ....
         Your Chart Code Here
         ....
     </chart>
     <html>
        <div>
           <!-- Boton de "me gusta" -->
           <a class="like_chart" title="Me gusta" id="like_app_chart1">
             <i class="fa fa-2x fa-thumbs-o-up fa-lg"/>
           </a>
           <div style="font-weight:bold;color:green">$tokCount$</div>
          ....
          ....

PS: To understand Search Event Handler and Token refer to the following documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Search_event_handlers

Re: store search result to a javascript variable for dynamic displaying custom dashboard

woodcock — Sat, 22 Jul 2017 18:59:07 GMT

I suggest you download the Splunk 6.x Dashboard Examples app and poke around in it; it has many examples of this kind of thing:
https://splunkbase.splunk.com/app/1603/

Re: store search result to a javascript variable for dynamic displaying custom dashboard

jperezh — Mon, 24 Jul 2017 12:56:18 GMT

Thank you very much, Indeed I was missing the way to display the token. Just another question, If I need 3 tokens, one for like, one for dislike and another for comments, can I put the 3 queries inside the same search tag or do I need to create one search tag for each query?

Re: store search result to a javascript variable for dynamic displaying custom dashboard

niketn — Mon, 24 Jul 2017 14:11:17 GMT

@jperezh, as far as you can get the query to return results (or fields) in single row, you can access them all through $result.<fieldName>$ .

If you can provide your query for like, dislike and other with field name and sample data, we can help you further.

Re: store search result to a javascript variable for dynamic displaying custom dashboard

jperezh — Mon, 24 Jul 2017 15:32:04 GMT

My queries are:

likes:
index="chartlike" "qualify=me" | stats count

dislikes:
index="chartlike" "qualify=no" | stats count

comments:
index="chartlike" comments | stats count

The data is the result of a javascript code that makes an entry to the index whenever one of the buttons is clicked. That's already working. When I put those queries on the search bar I get the value I need but when i put them in the html code the value displayed is always 0.

Re: store search result to a javascript variable for dynamic displaying custom dashboard

jperezh — Mon, 24 Jul 2017 18:33:15 GMT

UPDATE: I think the problem is that the query doesn't have an all time specification, so it only displays the lastest of all.

So I only modify this part of the xml

<earliest>-1h@h</earliest>

<earliest>0</earliest>

And that did it, its displaying the whole amount of likes and dislikes.