Splunk Search

Fill into multiselect input by clicking a table element (drill down)

BMacher
Path Finder

Hi folks,

I have tried to create a table drill down to insert elements into a multiselect input, that are already selected.

The workflow is: User searches something by using a keyword. He then selects tokens, which are then added to the multiselect input. The mutliselect input however is used as a filter for a new search.

Is there a simple way, to add selected elements to a multiselect input by a drill down. Or do I have to use java script in stead.

I've already created a dashboard, which has a drilldown on a multivalue field.

<form>
  <label>My test Dashboard</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="sel_tokens">
      <label>Selected Tokens</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>$Token$</title>
        <search>
          <query>| makeresults 
| eval _raw="2017-10-15 | INFO | NOTES=\"My app has ID APP-01234 and yours APP-56789\". The dedicated host is Test0815.de."
| rex field=_raw max_match=5 "(?P<appid>APP-\d{5})"
| rex field=_raw max_match=5 "(?P<host>Test0815.de)"
| eval Tokens=mvappend(appid, host)
| table _time, _raw, Tokens</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="Token">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @BMacher,

Can you please try below XML and Javascript??

splunk/etc/apps/search/appserver/static/my.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    var defaultTokens = mvc.Components.getInstance('default');
    var sel_tokens_id = mvc.Components.get("sel_tokens_id");
    var sel_tokens_list = [];
    defaultTokens.on("change:TokenValue", function (e) {
        var myClickedVal = {label:e.attributes.TokenValue, value: e.attributes.TokenLabel}
        sel_tokens_list.push(myClickedVal);
        sel_tokens_id.settings.set("choices",sel_tokens_list);
        sel_tokens_id.render();
    });
});

Dashboard XML:

<form script="my.js">
   <label>My test Dashboard</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="sel_tokens" id="sel_tokens_id">
       <label>Selected Tokens</label>
     </input>
   </fieldset>
   <row>
     <panel>
       <table>
         <title>$TokenValue$ $TokenLabel$</title>
         <search>
           <query>
             index=_internal | stats count by source sourcetype | table source sourcetype
           </query>
           <earliest>@h</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">row</option>
         <option name="percentagesRow">false</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
         <drilldown>
           <set token="TokenValue">$row.source$</set>
           <set token="TokenLabel">$row.sourcetype$</set>
         </drilldown>
       </table>
     </panel>
   </row>
 </form>

I hope above example will help you.

Thanks

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @BMacher,

Can you please try below XML and Javascript??

splunk/etc/apps/search/appserver/static/my.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    var defaultTokens = mvc.Components.getInstance('default');
    var sel_tokens_id = mvc.Components.get("sel_tokens_id");
    var sel_tokens_list = [];
    defaultTokens.on("change:TokenValue", function (e) {
        var myClickedVal = {label:e.attributes.TokenValue, value: e.attributes.TokenLabel}
        sel_tokens_list.push(myClickedVal);
        sel_tokens_id.settings.set("choices",sel_tokens_list);
        sel_tokens_id.render();
    });
});

Dashboard XML:

<form script="my.js">
   <label>My test Dashboard</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="sel_tokens" id="sel_tokens_id">
       <label>Selected Tokens</label>
     </input>
   </fieldset>
   <row>
     <panel>
       <table>
         <title>$TokenValue$ $TokenLabel$</title>
         <search>
           <query>
             index=_internal | stats count by source sourcetype | table source sourcetype
           </query>
           <earliest>@h</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">row</option>
         <option name="percentagesRow">false</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
         <drilldown>
           <set token="TokenValue">$row.source$</set>
           <set token="TokenLabel">$row.sourcetype$</set>
         </drilldown>
       </table>
     </panel>
   </row>
 </form>

I hope above example will help you.

Thanks

niketn
Legend

@BMacher, You should try to use your own JavaScript to handle multivalues for Multiselect input. However, you can try the following workaround in Simple XML as well.

PS:
1) I have introduced a Text Box to convert Single Value Comma Separated field (as far as your query/table has this instead of actual multivalue, you can get rid of text box.)
2) You can add depends attribute to always hide the text box in case you are sticking to text box i.e. depends="$alwaysHideTextBox$"

<form>
  <label>Multiselect from Table</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="sel_tokens" searchWhenChanged="true">
      <label>Selected Tokens</label>
      <delimiter> </delimiter>
    </input>
    <input type="text" token="tokText" searchWhenChanged="true">
      <label>Intermediate Text</label>
      <change>
         <eval token="sel_tokens">split($value$,",")</eval>
         <eval token="form.sel_tokens">split($value$,",")</eval>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults 
 | eval _raw="2017-10-15 | INFO | NOTES=\"My app has ID APP-01234 and yours APP-56789\". The dedicated host is Test0815.de."
 | rex field=_raw max_match=5 "(?P<appid>APP-\d{5})"
 | rex field=_raw max_match=5 "(?P<host>Test0815.de)"
 | eval Tokens=mvappend(appid, host)
 | table _time, _raw, Tokens</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokText">$row.Tokens$</set>
          <set token="form.tokText">$row.Tokens$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

rjthibod
Champion

I think the issue is your are not properly addressing the name of the multi-select input from the drilldown.

You current have this: <set token="Token">$click.value2$</set>

If the name of your multi-select is "Token", then you need to use this instead: <set token="form.Token">$click.value2$</set>

This applies to pretty much all SimpleXML-defined inputs. To properly set those inputs via a token, you almost always want to use the token name with the form. prefix.

Last note, you should probably give your multi-select input a unique name - "Token" is not really clear.

BMacher
Path Finder

Thank you for answering my question. You're right, my naming should be better, but it's just a test dashboard. The form prefix does not really meet my needs. Because I want to insert more than one element into the mutliselect input, which is not possible with the form prefix, because it only inserts the currently selected token.

0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...