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?
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