topic Re: Remove "All" from Multiselect Input in Dashboard in Dashboards & Visualizations

Remove "All" from Multiselect Input in Dashboard

ashish9433 — Mon, 08 Jun 2020 00:06:57 GMT

Hi Team,

I have multiple "Multiselect" Input on my Dashboard which has search query which populates the result for Multiselect along with a static option of All (*)

Now, i want that whenever anyone selects any one or Multiple values in Multiselect input, "All" should automatically gets removed. Currently the user has to remove "All" and if user doesn't remove "All" then the result is skewed.

The results is getting skewed because we are using OR clause.

For example

When only ALL is selected (default) below search query runs

index=abc | search xzy=* | stats count by xyz

When other values are also selected along with ALL

index=abc | search xzy=* OR xzy=hello OR xzy=hi OR xzy=how | stats count by xyz

Now in the above case since "All" is by default selected, and even person selects other name the results show for all users as xzy=* remains and user has to explicitly remove ALL from the multiselect.

What i am looking for is whenever any user selects anything from the multiselect input, All should automatically be removed/de-selected.

Re: Remove "All" from Multiselect Input in Dashboard

niketn — Wed, 22 Nov 2017 11:34:19 GMT

@ashish9433, on similar lines refer to an answer by @jeffland

https://answers.splunk.com/answers/583461/how-can-i-apply-javascript-on-a-multiselect-dropdo.html

Re: Remove "All" from Multiselect Input in Dashboard

ashish9433 — Thu, 23 Nov 2017 19:09:07 GMT

Thanks @niketnilay though the answer by @jeffland in the above link didn't worked for me, but it gave me a guidance on how to fix it and i was able to get it resolved.

Re: Remove "All" from Multiselect Input in Dashboard

ashish9433 — Thu, 23 Nov 2017 19:13:45 GMT

I followed the advice by @jeffland in Link and using the below JS i was able to achieve what i was looking for.

require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($, mvc){
         $('#multi').on("change",function(){
                 var multi1 = mvc.Components.get("multi");
                 var tokens = mvc.Components.getInstance("default");
                 var mytoken = tokens.get("multi")

                  if (mytoken.length > 1 && mytoken.includes("All"))
                 {
                     // If "All" was selected before current (more specific) selection, remove it from list
                     if (indexOfAll == 0) 
                     {
                         var temp = mytoken.split(" ")
                         var temp1 = temp[1]
                         multi1.val(temp1);
                     } else 
                     {
                         // "All" was selected last, clear input and leave only "All" in it
                         multi1.val("All");
                     }
                 }


 }); 
 });

Re: Remove "All" from Multiselect Input in Dashboard

niketn — Thu, 23 Nov 2017 19:16:08 GMT

@ashish9433, please accept your own answer listed here to mark this question as answered. Do upvote the comments that helped. (Even on the original post :))

Re: Remove "All" from Multiselect Input in Dashboard

ashleyherbert — Sat, 17 Feb 2018 04:19:12 GMT

Just thought I'd post an alternative way of doing this. I'm not a big fan of adding javascript to my dashboards, so I've found a way to do this by adjusting the token for the input using the change & eval attributes. See the example below from one of our dashboards:

    <input type="multiselect" token="host" searchWhenChanged="true">
      <label>Hosts</label>
      <search base="lookup">
        <query>search $env$ | dedup host</query>
      </search>
      <valuePrefix>host=</valuePrefix>
      <delimiter> OR </delimiter>
      <default>*</default>
      <choice value="*">All</choice>
      <fieldForLabel>host</fieldForLabel>
      <fieldForValue>host</fieldForValue>
      <change>
        <eval token="form.host">if(mvcount('form.host')=0,"*",if(mvcount('form.host')!=1,mvfilter('form.host'!="*"),'form.host'))</eval>
      </change>
    </input>

This will reset the token to 'All' if no options are selected, and will remove the 'All' option if more than 1 are selected.

UPDATE:
One of my colleagues found this didn't work properly. When you select a couple of hosts, the only way to get back to 'All' is to remove all your previous selections, at which point 'All' will re-appear. Below is the fix he added, this is the commentary from our internal Jira system:

Basically, because of the '*', the regex doesn't quite work, so we need to change the

<choice value="*">All</choice>

<choice value="All">All</choice>

so the regex mvfind works as expected. Then, set a second token dependent on the value of 'form.blah', which is then used in any post-process search [decided to change the name of the original multi-select form token, and then set a token with the old name, so it remains transparent to the post-process searches that use the original token].

So:
- it defaults to 'All' (All is alone at the start, index=0)
- if another env is chosen, 'All' is removed
- if 'All' is chosen, all other envs are removed (ie All is always alone at the start, index=0)
- if everything is removed, 'All' reappears (ie All is always alone at the start, index=0)

<input type="multiselect" token="env2" searchWhenChanged="true">
  <label>Environment</label>
  <search base="lookup">
    <query>dedup environment</query>
  </search>
  <default>All</default>
  <valuePrefix>environment=</valuePrefix>
  <delimiter> OR </delimiter>
  <choice value="All">All</choice>
  <fieldForLabel>environment</fieldForLabel>
  <fieldForValue>environment</fieldForValue>
  <change>
    <eval token="form.env2">case(mvcount('form.env2')=0,"All",mvcount('form.env2')&gt;1 AND mvfind('form.env2',"All")&gt;0,"All",mvcount('form.env2')&gt;1 AND mvfind('form.env2',"All")=0,mvfilter('form.env2'!="All"),1==1,'form.env2')</eval>
    <eval token="env">if(mvfind('form.env2',"All")=0,"environment=*",$env2$)</eval>
  </change>
</input>

...still use $env$ where appropriate

<input type="dropdown" token="host" searchWhenChanged="true">
<label>Select a Host:</label>
<selectFirstChoice>true</selectFirstChoice>
<search base="lookup">
<query>search $env$ | dedup host</query>
</search>

Hope this helps, cheers.

Re: Remove "All" from Multiselect Input in Dashboard

ashish9433 — Sat, 17 Feb 2018 05:41:00 GMT

looks like easy and innovative way of doing it! Thanks @ashleyherbert

Re: Remove "All" from Multiselect Input in Dashboard

phoenix_down — Thu, 01 Mar 2018 04:43:25 GMT

@ashleyherbert, is your code still working for you? I tried (for several hours) to get it to work in Splunk 6.6.1 and was not able to. With your code as shown, the multi-select input doesn't allow me to remove the default "All" choice, nor does it allow me to add any additional choices.

Re: Remove "All" from Multiselect Input in Dashboard

tonyca — Thu, 05 Jul 2018 11:43:24 GMT

If i have more than one Multi select Input in Dashboard .Is there any generic solution to Remove "All" from all Multi select Input, instead of writing separate JS for all multi select input.

Re: Remove "All" from Multiselect Input in Dashboard

niketn — Thu, 05 Jul 2018 13:19:27 GMT

@tonyca, you can use jQuery each() selector for iterating through all the multiselect inputs and then place above code: https://api.jquery.com/each/

$(this).on("change",function(){

This is theoretical approach. So let me know if it does not work.

The Table Row Highlight example in Splunk Dashboard Example App uses the same each() approach to color each row based on individual cell content/class.

Re: Remove "All" from Multiselect Input in Dashboard

tonyca — Tue, 10 Jul 2018 08:50:26 GMT

can i have some more elaborative solution.

Re: Remove "All" from Multiselect Input in Dashboard

phoenix_down — Tue, 10 Jul 2018 15:35:02 GMT

I was not able to get either of the above answers to work for me in Splunk 6.6.1, so I wrote my own using plain Javascript without the need for jQuery. This is also a generic solution that works for any number of multi-selects on the page.

require([
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(mvc) {

    function setupMultiInput(instance_id) {

      // Get multiselect
      var multi = mvc.Components.get(instance_id);

      // On change, check selection
      multi.on("change", (selectedValues) => {

        if (selectedValues.length > 1 && selectedValues.includes("*")) {
          var indexOfAll = selectedValues.indexOf("*");

          // If "ALL" was selected before current (more specific) selection, remove it from list
          if (indexOfAll == 0) {
            selectedValues.splice(indexOfAll, 1);
            multi.val(selectedValues);
            multi.render();
          } else {
            // "ALL" was selected last, clear input and leave only "ALL" in it
            multi.val("*");
            multi.render();
          }
        }

      });
    }

    var all_multi_selects = document.getElementsByClassName("input-multiselect");
    for (j = 0; j < all_multi_selects.length; j++) {
      setupMultiInput(all_multi_selects[j].id);
    }

});

The assumption is that the default value is "*". But you can easily modify the code if you use something different for the default value.

Then all you have to do is to include the script at the top of your dashboard code:

<form script="path/to/multiselect.js">

Re: Remove "All" from Multiselect Input in Dashboard

phoenix_down — Tue, 10 Jul 2018 16:54:20 GMT

tonyca, checkout my answer below. Should do what you want.

Re: Remove "All" from Multiselect Input in Dashboard

tonyca — Wed, 11 Jul 2018 06:34:25 GMT

Thanks @phoenix-down .it is working for all multi select inputs.

Re: Remove "All" from Multiselect Input in Dashboard

niketn — Wed, 11 Jul 2018 07:03:03 GMT

@tonyca, do up-vote this answer if it has helped 🙂

Re: Remove "All" from Multiselect Input in Dashboard

jrballesteros05 — Tue, 31 Jul 2018 12:23:50 GMT

I did it and I'd rather this answer. I worked for me.

Re: Remove "All" from Multiselect Input in Dashboard

Zakary_n — Fri, 22 Feb 2019 16:04:47 GMT

Can confirm, this works. Thank you so much.

Re: Remove "All" from Multiselect Input in Dashboard

alai — Thu, 21 Mar 2019 11:59:09 GMT

Works for me too, thank you very much!

Re: Remove "All" from Multiselect Input in Dashboard

simpkins1958 — Wed, 27 Mar 2019 15:49:18 GMT

@ashleyherbert - this is working well when using on a dashboard interactively. When have multiple selections working well. But if refresh the page selections go back to "All". If save as a book mark and open from the bookmark the multiple selections are not selected, back to "All".

Re: Remove "All" from Multiselect Input in Dashboard

ashleyherbert — Wed, 27 Mar 2019 22:42:08 GMT

Haven't noticed this before, but yes I can see it happening on mine as well. For some reason when the dashboard is refreshing, it's running through the functions and not finding any pre-populated tokens. I'm not sure why this is, I'll do some playing around and see if I can get it working.