Dashboards & Visualizations

Is there only ones way to Fire JavaScript After Search Panels are Done?

fredclown
Builder

I know that I can add  visualizations to a dashboard with JavaScript and hook into the SearchManager done event that way. However, I am wondering if there is a way to get an object reference for visualizations that are added via the GUI? Is the only way to hook into the done event via JavaScript without having to build the dashboard via JavaScript? Thanks.

Labels (4)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@fredclown 

May be the below example will help you, Can you please try this?

a.js

require([
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    SearchManager,
    mvc,
    _
) {
    var tokens = mvc.Components.get("default");
    var submittedTokens = mvc.Components.get('submitted');
    var searhId1 = mvc.Components.get("searhId1");
    searhId1.on('search:start', function (properties) {
        tokens.set("afterDone", "search in progress");
        submittedTokens.set(tokens.toJSON());
    });
    searhId1.on('search:done', function (properties) {
        console.log("in search done", properties);
        tokens.set("afterDone", "search done");
        submittedTokens.set(tokens.toJSON());
    });
});

 

XML

 

<dashboard script="a.js">
  <label>Fire JavaScript After Search Panels are Done</label>
  <row>
    <panel>
      <table id="panelId1">
        <search id="searhId1">
          <query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count | eval "Color"= if(count&gt;5000,"OK","KO")</query>
          <earliest>-1w@w1</earliest>
          <latest>@w1</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>After Done $$afterDone$$</title>
      <single>
        <search>
          <query>| makeresults 
| eval value= "$afterDone$"
| table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="field">range</option>
        <option name="colorBy">value</option>
      </single>
    </panel>
  </row>
</dashboard>

 

Note: Just observe the Panel Search and JS code on Search start and done. You can do any logic execution and customisation during this event.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@fredclown 

May be the below example will help you, Can you please try this?

a.js

require([
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    SearchManager,
    mvc,
    _
) {
    var tokens = mvc.Components.get("default");
    var submittedTokens = mvc.Components.get('submitted');
    var searhId1 = mvc.Components.get("searhId1");
    searhId1.on('search:start', function (properties) {
        tokens.set("afterDone", "search in progress");
        submittedTokens.set(tokens.toJSON());
    });
    searhId1.on('search:done', function (properties) {
        console.log("in search done", properties);
        tokens.set("afterDone", "search done");
        submittedTokens.set(tokens.toJSON());
    });
});

 

XML

 

<dashboard script="a.js">
  <label>Fire JavaScript After Search Panels are Done</label>
  <row>
    <panel>
      <table id="panelId1">
        <search id="searhId1">
          <query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count | eval "Color"= if(count&gt;5000,"OK","KO")</query>
          <earliest>-1w@w1</earliest>
          <latest>@w1</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>After Done $$afterDone$$</title>
      <single>
        <search>
          <query>| makeresults 
| eval value= "$afterDone$"
| table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="field">range</option>
        <option name="colorBy">value</option>
      </single>
    </panel>
  </row>
</dashboard>

 

Note: Just observe the Panel Search and JS code on Search start and done. You can do any logic execution and customisation during this event.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

fredclown
Builder

Ah! I did not know you could put an id on the search element in the xml and reference that from JavaScript. Splunk's XML dashboard and accompanying JavaScript documentation is abysmal. Thanks a ton sir.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Glad to help you

Happy Splunking

KV

Tags (1)
Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

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

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...