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!

Build Scalable Security While Moving to Cloud - Guide From Clayton Homes

 Clayton Homes faced the increased challenge of strengthening their security posture as they went through ...

Mission Control | Explore the latest release of Splunk Mission Control (2.3)

We’re happy to announce the release of Mission Control 2.3 which includes several new and exciting features ...

Cloud Platform | Migrating your Splunk Cloud deployment to Python 3.7

Python 2.7, the last release of Python 2, reached End of Life back on January 1, 2020. As part of our larger ...