Dashboards & Visualizations

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

fredclown
Contributor

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
Contributor

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!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer at Splunk .conf24 ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...

Splunk Lantern is Splunk’s customer success center that provides advice from Splunk experts on valuable data ...