Dashboards & Visualizations

Need help in applying checkbox in splunk table and saving the on click user details in new column

spkriyaz
Path Finder


I am trying to replicate a interface where the records are stored in a table. A checkbox will be there in every row of the table, so if I am the user and if I want any of the row to be acknowledged I will click the checkbox of that row and press a submit button. This process indicates that I have acknowledged the error in the particular time.

I want to replicate the same in Splunk. Currently I did a editable Splunk table in a dashboard but we have enter the time, username and save the lookup but I wanted to have a checkbox when it is clicked then i want to save the username, time for that particular row in the last column which will be empty for unacknowledged rows.

For example:
Below is the dashboard which I am trying to replicate in Splunk, the first row in it has been acknowledged so it has the value in the last column "Ack By" which shows who has acknowledged and the time. I wanted to do the similar thing in Splunk by having this table in a dashboard. So whoever clicks the row his/her email/name with clicked time should be updated in the new column "Ack By" and the checkbox should be hidden for the acknowledged row. Could anyone please help with this?

sample dashboard.PNG

Labels (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust
 
As per your requirement and with the same approach I suggested in below answer, I have designed sample code for you.
 
 
 
Note:
1) Here I have used sample_data lookup for having sample data in table. You have to change search query as per your need.
 
2) For making running this dashboard you need to create file based lookup.
- Create a sample_data.csv file in lookups folder.
- Add below stanza in transforms.conf
[sample_data]
filename = sample_data.csv
- Do debug refersh
http://splunkhost:8000/en-US/debug/refresh
- Populate lookup using below search
| makeresults count=10 | eval Number=1 | accum Number | eval SomeFields="This is sample data", Ack="" | table Number SomeFields Ack | outputlookup sample_data
 
3) I have create on more search which will update the lookup on click on "Ack Selected rows" button and start search for main search.
 
4) For implementing this solution, You need to change column name in search and in JS as well.
 
5) You can enhance JS and XML as per your requirements.
 
 
 
Sample Code:
 

multiselect_table_submit.xml

 

 

<dashboard script="multiselect_table_submit.js" stylesheet="multiselect_table.css">
  <label>Multi-Select Table Rows Example</label>
  <search id="mysearch">
    <query> |inputlookup sample_data | where Number IN ($mytoken$) | eval Ack=now() | append [|inputlookup sample_data | where not Number IN ($mytoken$) ]  | sort Number | outputlookup sample_data</query>
    <earliest>-15m</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <html>
       <div>
         <input type="button" id="mybutton" value="Ack Selected Rows"/>
       </div>
     </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="myTable">
        <title>Panel A</title>
        <search id="mainSearch">
          <query>|inputlookup sample_data | eval "Select Number"=Number."|".Ack | table "Select Number" Number SomeFields Ack | eval Ack=strftime(Ack,"%c") | sort Number</query>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

 

 

multiselect_table_submit.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');
	console.log("This is Multi-select table JS");
	// Custom renderer for applying checkbox.
	var CustomRenderer = TableView.BaseCellRenderer.extend({
			canRender: function (cell) {
				return _(['Select Number']).contains(cell.field);
			},
			render: function ($td, cell) {
				var cell_value = cell.value.split("|")[0];
				var ack_value = cell.value.split("|")[1];
				var ack_flag = ack_value !== "";
				console.log(cell.value,ack_flag,ack_value);
				var div = (ack_flag ? $('<div>') :$('<div>').attr({
						"id": "chk-number" + cell_value,
						"value": cell_value
					}).addClass('checkbox').click(function () {
						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);
							}
						}
					}))
				var b = (ack_flag ? $td.addClass('range-cell').addClass('range-acked') : $td.addClass('range-cell').addClass('range-not-acked'));
				div.appendTo($td);
			}
		});

	//List of table ID
	var sh = mvc.Components.get("myTable");
	if (typeof(sh) != "undefined") {
		sh.getVisualization(function (tableView) {
			
			tableView.on('rendered', function() {
				console.log("Kamlesh 1");
                // Apply class of the cells to the parent row in order to color the whole row
                tableView.$el.find('td.range-cell').each(function() {
                	console.log("Kamlesh 2");
                	$(this).parents('tr').addClass(this.className);
                	console.log(this.className);
                });
                console.log("Kamlesh 3");
            });

			// 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');
	var mainSearch = mvc.Components.get('mainSearch');
	
	mysearch.on('search:start', function (properties) {
		$("#mybutton").attr('disabled', true);
	});

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

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

 

 

 

multiselect_table.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);
 }

#myTable tr.range-acked  td  {
    background-color: #08f540 !important; 
}

#myTable tr.range-not-acked  td {
    background-color: #f00d18 !important;
}

 

 

 

Please check and acknowledge 😛


Thanks

View solution in original post

Get Updates on the Splunk Community!

Developer Spotlight with William Searle

The Splunk Guy: A Developer’s Path from Web to Cloud William is a Splunk Professional Services Consultant with ...

Major Splunk Upgrade – Prepare your Environment for Splunk 10 Now!

Attention App Developers: Test Your Apps with the Splunk 10.0 Beta and Ensure Compatibility Before the ...

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

What are Community Office Hours?Community Office Hours is an interactive 60-minute Zoom series where ...