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!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...