Splunk Search

How to insert checkboxes in a simple statistics results table?

allan_newton
Path Finder

Hello Splunkers,

I have a situation where I have to replace the first cell in each row in a statistics table with a checkbox.

example query: index=_internal | dedup sourcetype | head 5 | eval select="select" | table select, sourcetype, source, index

The first cell in each row except heading should now be having a select button.

Thanks in advance.

michael_vi
Engager

Is there a way to "keep the checkbox"?
Once you browse between the pages, the checkbox disappears.

0 Karma

michael_vi
Engager

The solution provided by @kamlesh_vaghela works great.

How can I add 3 more columns with checkboxes? Something like this:

sourcetypehostindexsourcetype_checkhost_checkindex_check
splunk_web_accesssh1_internal   
splunk_web_servicesh1_internal   
splunkdidx1_internal   
splunkdsh1_internal   
splunkd_accessidx1_internal   
splunkd_accesssh1_internal   
splunkd_remote_searchesidx1_internal   
splunkd_ui_accesssh1_internal   

 

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@michael_vi 

Can you please try this?

JS

 

 require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    // Access the "default" token model
    var tokens = mvc.Components.get("default");
    var selected_values_array = [];
    var selected_values_array_host = [];
    var selected_values_array_index = [];
    var submittedTokens = mvc.Components.get('submitted');
    console.log("This is Multi-select table JS");
    // Custom renderer for applying checkbox.
    var CustomRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Select Sourcetype', 'Select host', 'Select index']).contains(cell.field);
        },
        render: function($td, cell) {
            console.log(cell)
            var a = $('<div>').attr({
                "id": "chk-sourcetype" + cell.value,
                "value": cell.value
            }).addClass('checkbox').click(function() {
                if ($(this).attr('class') === "checkbox") {
                    if (cell.field === 'Select Sourcetype') {
                        selected_values_array.push($(this).attr('value'));
                    } else if (cell.field === 'Select host') {
                        selected_values_array_host.push($(this).attr('value'));
                    } else if (cell.field === 'Select index') {
                        selected_values_array_index.push($(this).attr('value'));
                    }
                    $(this).removeClass();
                    $(this).addClass("checkbox checked");
                } else {
                    $(this).removeClass();
                    $(this).addClass("checkbox");
                    if (cell.field === 'Select Sourcetype') {
                        var i = selected_values_array.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array.splice(i, 1);
                        }
                    } else if (cell.field === 'Select host') {
                        var i = selected_values_array_host.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array_host.splice(i, 1);
                        }
                    } else if (cell.field === 'Select index') {
                        var i = selected_values_array_index.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array_index.splice(i, 1);
                        }
                    }
                }
                console.log("selected_values_array", selected_values_array);
                console.log("selected_values_array_host", selected_values_array_host);
                console.log("selected_values_array_index", selected_values_array_index);
            }).appendTo($td);
        }
    });

    //List of table ID
    var sh = mvc.Components.get("myTable");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRenderer());
            tableView.table.render();
        });
    }

    // Disabling button while search is running
    var mysearch = mvc.Components.get('mysearch');
    mysearch.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });

    var mysearch_host = mvc.Components.get('mysearch_host');
    mysearch_host.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch_host.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });

    var mysearch_index = mvc.Components.get('mysearch_index');
    mysearch_index.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch_index.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });
    $(document).ready(function() {

        //setting up tokens with selected value.
        $("#mybutton").on("click", function(e) {
            e.preventDefault();
            tokens.set("mytoken", selected_values_array.join());
            tokens.set("mytoken_host", selected_values_array_host.join());
            tokens.set("mytoken_index", selected_values_array_index.join());
            submittedTokens.set(tokens.toJSON());
            $("#mybutton").attr('disabled', true);
        });
    });
});

 

 

css

 

/* The standalone checkbox square*/

.checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    display: inline-block;
}


/* This is what simulates a checkmark icon */

.checkbox.checked:after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    /* "Center" the checkmark */
    position: relative;
    top: 4px;
    left: 7px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

 

 

XML

 

<dashboard script="a.js" stylesheet="a.css">
  <label>Multi-Select Table Rows Example</label>
  <row>
    <panel>
      <!-- This Panel is for instruction purpose only-->
      <html>
    <h1>This is an example for multi select table rows.</h1>
    <h2>Steps:</h2>
    <ui>
    <li>Select rows from Panel A by clicking on checkboxes.</li>
    <li>Click on "Submit" button</li>
    <li>You will get selected values in Panel B.</li>
    </ui>
    <br/>
    <h3>This is how you can achieve your requirements. See below files for implementation code.</h3>
    <code>multiselect_table.js</code>
        <br/>
    <code>multiselect_table.css</code>
        <br/>
    <code>multiselect_table.xml</code>
        <br/>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="myTable">
        <title>Panel A</title>
        <search>
          <query>index=_internal | stats count by sourcetype | eval "Select Sourcetype"=sourcetype | table "Select Sourcetype" sourcetype count | eval host=sourcetype,index=sourcetype,"Select host"=host,"Select index"=index | table  sourcetype host index "Select Sourcetype" "Select host" "Select index"</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
       <div>
         <input type="button" id="mybutton" value="Submit"/>
       </div>
     </html>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch">
          <query>| makeresults | eval SelectedRowValue="$mytoken$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch_host">
          <query>| makeresults | eval SelectedRowValue="$mytoken_host$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch_index">
          <query>| makeresults | eval SelectedRowValue="$mytoken_index$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

 

 

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @allan_newton,

I have created sample dashboard for you.

Can you please try below code?

mydashboard.xml

<form script="my.js" stylesheet="my.css">
   <row>
     <panel>
       <table id="myTable">
         <title>My Table</title>
         <search>
           <query>index=_internal | stats count by sourcetype | eval checkbox=sourcetype</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
         </search>
         <option name="count">10</option>
         <option name="drilldown">row</option>
         <drilldown>
           <condition field="*">

           </condition>
           </drilldown>
       </table>
     </panel>
   </row>
   <row>
     <html>
       <div>
         <input type="button" id="mybutton" value="My Button" />
       </div>
     </html>
   </row>
   <row>
      <panel>
       <table>
         <title>My Selected Value</title>
         <search>
           <query>| makeresults | eval myvalue="$mytoken$" | makemv delim="," myvalue | stats count by myvalue | table myvalue</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
         </search>
         <option name="count">10</option>
         <option name="drilldown">none</option>
       </table>
     </panel>
   </row>
 </form>

my.js

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {
     // Access the "default" token model
     var tokens = mvc.Components.get("default");
     var selected_values_array = [];
     var submittedTokens = mvc.Components.get('submitted');

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(['checkbox']).contains(cell.field);
         },
         render: function($td, cell) {
             var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass('checkbox').click(function() {
                 // console.log("checked",$(this).attr('class'));
                 // console.log("checked",$(this).attr('value'));
                 if($(this).attr('class')==="checkbox")
                 {
                     selected_values_array.push($(this).attr('value'));
                     $(this).removeClass();
                     $(this).addClass("checkbox checked");
                 }
                 else {
                     $(this).removeClass();
                     $(this).addClass("checkbox");
                     var i = selected_values_array.indexOf($(this).attr('value'));
                     if(i != -1) {
                         selected_values_array.splice(i, 1);
                     }
                     // Change the value of a token $mytoken$
                 }
                 console.log(selected_values_array);
             }).appendTo($td);
         }
     });

     //List of table IDs
     var tableIDs = ["myTable"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
             });
         }
     }
     $(document).ready(function () {
         $("#mybutton").on("click", function (e) {
             e.preventDefault();
             console.log("in");
             tokens.set("mytoken", selected_values_array.join());
             submittedTokens.set(tokens.toJSON());
         });
     });
 });

my.css

/* The standalone checkbox square*/
 .checkbox {
   width:20px;
   height:20px;
   border: 1px solid #000;
   display: inline-block;
 }

 /* This is what simulates a checkmark icon */
 .checkbox.checked:after {
   content: '';
   display: block;
   width: 4px;
   height: 7px;

   /* "Center" the checkmark */
   position:relative;
   top:4px;
   left:7px;

   border: solid #000;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }

Here I have created javascript and Css (my.js and my.css).
Keep both file in SPLUNK_HOME/etc/apps/MYAPP/appserver/static/ path.

There are two tables in dashboard. First for selection and seconf for selected value.
I have stored value in javascript variable selected_values_array and splunk token mytoken.
You can use splunk token mytoken in any search.
2nd table is an example of using splunk token mytoken. You can use this token for store in lookup.

Thanks

mwdbhyat
Builder

@kamlesh_vaghela any thoughts on how this could be implemented to select all the fields in a table row? EG - Table 1 has - field1 field2 field3 and the Select box, when I tick that row for selection -> field1 field2 field3 get sent to table 2 on a single row--essentially i want it to select the whole row with values and any sparklines i have embedded in the table row and send it to another table.

Right now it looks like it only does it by a single defined value of whatever you set the eval to.. Would it be best to just make the eval = all the fields in the row?

0 Karma

MelnikovTimofey
New Member

Use TableView.BaseCellRenderer to define your own string renderer. Example: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUB.
And create css style for checkbox

0 Karma

mayurr98
Super Champion
0 Karma

493669
Super Champion

Hi @allan_newton
please refer https://answers.splunk.com/answers/587089/multiselect-table-rows.html
here you need to include js and css to include checkbox in each row which will store field key value once it is checked in checkmark.

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!