Hi
We had a javascript and css created to acknowledge the errors in Splunk dashboard. Reference link is here https://community.splunk.com/t5/Dashboards-Visualizations/Need-help-in-applying-checkbox-in-splunk-t...
It needs a feature "SELECT ALL" option at the top of the row to select all the errors in that particular page. So that we can acknowledge the errors at one instance. Current logic, we are clicking the tick box one by one before pressing the acknowledge button. Is it possible to append this logic in the existing JS without breaking current logic?
Please refer the JS, XML and CSS attached
CSS:
/* The standalone checkbox square*/
.checkbox {
width:0px;
height:0px;
border: 2px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 2px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:1px;
left:-8px;
border: solid black;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox, .radio {
min-height: 12px;
padding-left: 12px;
}
td.numeric, th.numeric {
text-align: left;
}
#myTable tr.range-acked td {
background-color: #82e566 !important;
}
#myTable tr.range-not-acked td {
background-color: #ff0000b3 !important;
}
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 _(['Tick']).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");
console.log(selected_values_array);
} else {
$(this).removeClass();
$(this).addClass("checkbox");
var i = selected_values_array.indexOf($(this).attr('value'));
if (i != -1) {
selected_values_array.splice(i, 1);
}
console.log(selected_values_array);
}
}))
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("Output 1");
setTimeout(function(){
// 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("Output 2");
$(this).parents('tr').addClass(this.className);
console.log(this.className);
});
console.log("Output 3");
},100);
});
// 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');
var myrevertsearch = mvc.Components.get('myrevertsearch');
var myjirasearch = mvc.Components.get('myjirasearch');
mysearch.on('search:start', function (properties) {
$("#mybutton").attr('disabled', true);
});
mysearch.on('search:done', function (properties) {
$("#mybutton").attr('disabled', false);
mainSearch.startSearch();
});
myrevertsearch.on('search:done', function (properties) {
console.log("Revert Search Done");
$("#myrevertbutton").attr('disabled', false);
mainSearch.startSearch();
console.log("Main Search Done");
});
myjirasearch.on('search:start', function (properties) {
$("#myjirabutton").attr('disabled', true);
});
myjirasearch.on('search:done', function (properties) {
$("#myjirabutton").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);
});
$("#myrevertbutton").on("click", function (e) {
e.preventDefault();
myrevertsearch.startSearch();
$("#myrevertbutton").attr('disabled', true);
console.log("Hiee");
});
$("#myjirabutton").on("click", function (e) {
e.preventDefault();
tokens.set("myjiratoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#myjirabutton").attr('disabled', true);
});
});
});
XML:
<form version="1.1" script="jiraselect.js" stylesheet="multiselect_color.css" hideEdit="true" isVisible="true" hideAppBar="true">
<label>Error Acknowledgment UI</label>
<search id="ram_inst_search" ref="rpt_ram_institution"></search>
<search id="mysearch">
<query> |inputlookup $dash$ | dedup ID | where ID IN ($mytoken$)
| eval Ack=now(),Ack_time="UPD",Ack_By="$env:user_email$"+","+strftime(Ack,"%c")
| outputlookup $dash$ append=True</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<search id="myjirasearch">
<query> |inputlookup $dash$ | dedup ID | where ID IN ($myjiratoken$)
| eval Ack=now(),Ack_time="JIRA",Ack_By="$env:user_email$"+","+strftime(Ack,"%c")
| eval Message_Text = "Update from SD to raise JIRA ticket - "+Message_Text
| eval Message_Text= if(isnull(Ack_By) AND LIKE(Message_Text,"%Update from SD to raise JIRA%"),substr(Message_Text,39,len(Message_Text)),Message_Text)
| outputlookup $dash$ append=True</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<search id="myrevertsearch">
<query> |inputlookup $dash$ | where ID = "$UnAckID$"
| eval Ack="",Ack_time="",Ack_By=""
| eval Message_Text= if(LIKE(Message_Text,"%Update from SD to raise JIRA%"),substr(Message_Text,39,len(Message_Text)),Message_Text)
| outputlookup $dash$ append=True</query>
</search>
<!-- Information panel -->
<fieldset submitButton="true" autoRun="false">
<input type="radio" token="dash" searchWhenChanged="true">
<label>Choose Current/Historic Data</label>
<choice value="ram_error_ack_kv">Monthly</choice>
<choice value="ram_error_ack_kv_bkup">Historic</choice>
<default>ram_error_ack_kv</default>
<initialValue>ram_error_ack_kv</initialValue>
</input>
<input type="time" token="time1" searchWhenChanged="true">
<label>Time Window</label>
<default>
<earliest>-2h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="inst" searchWhenChanged="true">
<label>Institution EMEA</label>
<choice value="*">ALL</choice>
<default>*</default>
<fieldForLabel>Institution_name</fieldForLabel>
<fieldForValue>Institution</fieldForValue>
<search>
<query>|inputlookup emea_institution_kv_data
| join type=outer Institution
[ | inputlookup institution_name.csv
| sort institution_number
| eval Institution=institution_number]
| eval Institution_name=if(isnull(institution_name),substr(Institution,7,2)+" "+"Inst",institution_name)
| table Inst_desc Institution Institution_name</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="ackby" searchWhenChanged="true">
<label>Acknowledged By</label>
<choice value="*">ALL</choice>
<default>*</default>
<fieldForLabel>Ack_name</fieldForLabel>
<fieldForValue>Ack_name</fieldForValue>
<search>
<query>|inputlookup acknowledged_names.csv</query>
<earliest>-7d@h</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="ackflag" searchWhenChanged="true">
<label>Acknowledged (Y/N)</label>
<choice value="*">ALL</choice>
<choice value="Yes">Yes</choice>
<choice value="No">No</choice>
<default>*</default>
<initialValue>Yes</initialValue>
</input>
<input type="text" token="UnAckID" searchWhenChanged="true">
<label>Enter Un Ack ID</label>
</input>
<input type="text" token="error" searchWhenChanged="true">
<label>Type Error String here</label>
<default></default>
</input>
</fieldset>
<row>
<panel>
<html>
<h3>
<a href="https://de-splunk.1dc.com/en-US/manager/TA-omnipay-platform/admin/macros/error_skiplist?f_ns=TA-omnipay-platform&uri=%2FservicesNS%2Fnobody%2FTA-omnipay-platform%2Fadmin%2Fmacros%2Ferror_skiplist&action=edit&ns=TA-omnipay-platform" target="blank">
<font color="blue">Click to Update Error Skip List</font>
</a>
</h3>
<style>
div.fieldset.dashboard-form-globalfieldset div.dashboard-element.html.dashboard-element-html {
display: inline-block;
}
</style>
<div>
<input type="button" id="mybutton" value="Ack Selected Rows"/>
<input type="button" id="myrevertbutton" value="Un Ack Entered Id"/>
<input type="button" id="myjirabutton" value="Ack and Create Jira Ticket"/>
<a href="https://de-splunk.1dc.com/en-US/app/TA-omnipay-platform/ram_error_dashboard" class="btn btn-primary" text-align="right">Refresh</a>
</div>
</html>
</panel>
</row>
<row>
<panel>
<html>
<div class="imgheader">
<div style="text-align: right;">
<h4>
<a data-toggle="modal" data-target="#Help_modal">
<font color="blue">Help, information for this dashboard</font>
</a>
</h4>
</div>
</div>
<style>
#Help_modal.dropdown-menu {
float: left;
min-width: 421px;
top: -1000% !important;
left: 40% !important;
}
.close {
text-align: right;
border-radius: 1px 2px 2px 2px;
<!--width: 30% !important;
height: 600px !important;-->
}
pre {
text-align: left;
}
.modal-footer {
background: #ffe0 !important;
padding: 1px 1px 1px 1px;
}
</style>
<!--<div class="modal custom-modal-60 fade" id="Help_modal" tabindex="-1" role="dialog" aria-labelledby="Help_modal_Label">-->
<div class="dropdown-menu other-menu shared-poptart close" id="Help_modal" tabindex="-1" role="dialog" aria-labelledby="Help_modal_Label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"/>
</button>-->
<div style="text-align: left;">
<h4 class="modal-title" id="Help_modal_Label">Dashboard:</h4>
</div>
</div>
<pre>
<b>Dashboard Information</b>
This dashboard is for acknowledging or unacknowledge errors
<p>
<b>For queries or feedback on this dashboard, mail to</b>:<b>
</p>
</pre>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
</html>
</panel>
</row>
<row>
<panel>
<html>
<style>
<!--#test h2 {
text-align: center !important;
background-color: aliceblue;
}-->
.dashboard-body {
padding: 2px 2px 2px 2px;
<!--color: #3c444d;-->
color: #ce8820;
background-color: #ffffff;
min-height: 500px;
}
.dashboard-row .dashboard-panel h2.panel-title {
text-align: center !important;
background-color: mistyrose;
border: 1px solid black;
font-size: 21px;
font-weight: bold;
padding: 12px 2px 12px 2px;
margin: 2px 2px 2px 2px;
}
.dashboard-row .dashboard-panel .panel-head h3 {
text-align: center !important;
background-color: rgba(0, 164, 253, 0.37);
}
.dashboard-row .dashboard-panel .panel-body.html, .dashboard-row .dashboard-panel .panel-body.splunk-html {
padding: 0px !important;
}
td.numeric, th.numeric {
text-align: center !important;
}
.table td, .table th {
text-align: left;
color: black !important;
border: 1px solid black !important;
font-size: 13.5px;
}
label {
font-weight: bold;
}
.table .sorts a {
color: black;
font-weight: 500;
font-size: 14.3px;
}
.fieldset {
margin-bottom: -17px;
}
.dashboard-header h1 {
font-size: 30px;
font-weight: 700;
line-height: 76px;
text-align: center;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
background-color: coral;
color: #3c444d;
}
.dashboard-header {
margin-bottom: 10px;
min-height: 28px;
background: chocolate;
padding: 2px;
}
.dashboard-row .dashboard-cell {
float: left;
<!--background-color: darkslategrey; -->
}
.results-table {
color: black;
}
.SimpleResultsTable table.simpleResultsTable {
white-space:pre-line;
}
#myTable tr.range-acked td {
background-color: #82e566 !important;
border: 1px solid black;
}
#myTable tr.range-not-acked td {
background-color: #ff6363 !important;
border: 1px solid black;
}
.modal-header .close {
top: 20px;
right: -220px;
margin-top: -2px;
position: unset;
background-color: none;
border: 1px solid transparent;
color: #5c6773;
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none;
text-shadow: none;
-webkit-transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s;
transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
-webkit-filter: none;
filter: none;
}
</style>
</html>
<table id="myTable">
<search id="mainSearch">
<query>|inputlookup $dash$
| rename "Package_Name,Procedure_Name,File_Name,Host_Name" AS Package_Name_Procedure_Name_File_Name_Host_Name
| search `error_skiplist`
| dedup ID
| eval fields=split(Ack_By,",") | eval Ack_name=mvindex(fields,0)
| eval Ack_name = if(isnotnull(Ack_name),Ack_name,"NA")
| eval ack_flag=if(isnotnull(Ack_By),"Yes","No")
| search Institution=$inst$ Platform="EMEA" Ack_name=$ackby$ ack_flag=$ackflag$ Message_Text="*$error$*"
| eval _time=strptime(Date_Time,"%d-%m-%Y %H:%M:%S")
| convert mstime(_time) AS ms_time
| addinfo
| where ms_time >= info_min_time AND ms_time <= info_max_time
| eval Ack=if(isnull(Ack_time),"",Ack_time)
| eval Tick=ID."|".Ack
| eval "Program_ID Program_Name" = Program_ID+","+Program_Name | makemv delim="," "Program_ID Program_Name"
| makemv delim="," Package_Name_Procedure_Name_File_Name_Host_Name
| makemv delim="," Ack_By
| rex max_match=100 field=Message_Text "(?<split__regex>.{0,100}(?:\s|$)|[^\s]+)" | rename split__regex as Message_Text
| table Tick ID ms_time Institution Date_Time Ack Ack_By Ack_time "Program_ID Program_Name", Program_Run_ID Package_Name_Procedure_Name_File_Name_Host_Name Message_Text email
| sort 0 - ms_time
| eval skip_ram_user=if(like(Package_Name_Procedure_Name_File_Name_Host_Name,"%RAM%"),1,if(like(Package_Name_Procedure_Name_File_Name_Host_Name,"%ram%"),1,0))
| where skip_ram_user != 1
| fields - email Ack ms_time Ack_name Ack_time skip_ram_user</query>
<earliest>$time1.earliest$</earliest>
<latest>$time1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="count">25</option>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">true</option>
<drilldown>
<condition field="*"></condition>
</drilldown>
</table>
</panel>
</row>
<row depends="noshow">
<panel>
<html>
<style>
.input-dropdown {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.splunk-dropdown .select2-container {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.input-text {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.input-text > input[type="text"] {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
</style>
</html>
</panel>
</row>
</form>
I have an example similar to this. Can you please check this example and use with your requirement?
<form version="1.1" script="multiselect_table.js" stylesheet="multiselect_table.css">
<label>Multi-Select Table Rows Example</label>
<row>
<panel>
<table id="myTable">
<title>Panel A</title>
<search id="SearchA">
<query>| makeresults
| eval _raw="{\"data\":[{\"id\":1,\"value\":\"test\"},{\"id\":2,\"value\":\"test2\"}]}"
| rename comment as "upto now is data only"
| spath path=data{} output=data
| mvexpand data
| spath input=data
| eval CheckBox=id
| table CheckBox id value</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>
<panel>
<html>
<div>
<input type="button" id="mybutton" value="Submit"/>
</div>
</html>
</panel>
<panel>
<table>
<title>Ids Processed</title>
<search id="SearchB">
<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>
</row>
</form>
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 isSelectAll = false;
var searchAValues = [];
var searchAFields = [];
var fieldKey = "CheckBox";
var fieldDataStoreKey="data-sort-key="+fieldKey;
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 _([fieldKey]).contains(cell.field);
},
render: function ($td, cell) {
// all_values_array.push(cell.value);
var cls = "checkbox";
if(isSelectAll) {
cls = "checkbox checked";
}
var a = $('<div>').attr({
"id": "chk-sourcetype_" + cell.value,
"value": cell.value
}).addClass(cls).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);
}
}
}).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();
tableView.on('rendered', function(view) {
setCheckAllCheckBox();
});
// setCheckAllCheckBox();
});
}
var SearchA = mvc.Components.get("SearchA");
var SearchAResults = SearchA.data("results");
SearchAResults.on("data", function () {
resultArray = SearchAResults.data().rows;
searchAFields = SearchAResults.data().fields;
var keyIndex=searchAFields.indexOf(fieldKey);
searchAValues = [];
$.each(resultArray, function (index, value) {
searchAValues[index]=value[keyIndex];
})
});
SearchA.on('search:start', function (properties) {
isSelectAll = false;
tokens.unset("mytoken");
tokens.set("mytoken", "");
submittedTokens.set(tokens.toJSON());
});
SearchA.on('search:done', function (properties) {
console.log("in search done",properties);
});
// Disabling button while search is running
var SearchB = mvc.Components.get('SearchB');
SearchB.on('search:start', function (properties) {
$("#mybutton").attr('disabled', true);
});
SearchB.on('search:done', function (properties) {
$("#mybutton").attr('disabled', false);
});
var sto;
function setCheckAllCheckBox()
{
var a = $("["+fieldDataStoreKey+"]");
a.html("");
var cls = "checkbox";
if(isSelectAll) {
cls = "checkbox checked";
}
var temp = $('<div>').attr({
"id": "chk-sourcetype-All",
"value": "All"
}).addClass(cls).click(function () {
if ($(this).attr('class') === "checkbox") {
$(this).removeClass();
$(this).addClass("checkbox checked");
isSelectAll = true;
} else {
$(this).removeClass();
$(this).addClass("checkbox");
isSelectAll = false;
}
checkUnCheckAllCheckboxes();
}).appendTo(a);
$("["+fieldDataStoreKey+"]").parent().removeAttr("class");
$("["+fieldDataStoreKey+"]").removeAttr("data-sort-key");
}
function checkUnCheckAllCheckboxes(){
var cls = "checkbox";
selected_values_array = [];
if(isSelectAll) {
cls = "checkbox checked";
$.each(searchAValues, function (index, value) {
selected_values_array.push(value);
})
}
$('[id^="chk-sourcetype_"]').removeClass();
$('[id^="chk-sourcetype_"]').addClass(cls);
}
function updateDataOnServerSide() {
var service = mvc.createService({ owner: "nobody" });
//send data to server
console.log(selected_values_array.join());
var params = selected_values_array.join();
service.request("/services/my-api-path","POST", {}, {}, JSON.stringify(params), {'Content-Type': 'application/json'}, function(err, resp) {
// Handle response
if(resp != null){
if(resp.status == 200){
//do something
} else {
//do something with status !=200
}
}
// Handle error
if(err != null){
//handle error
}
});
}
$(document).ready(function () {
//setting up tokens with selected value.
$("#mybutton").on("click", function (e) {
e.preventDefault();
updateDataOnServerSide();
tokens.set("mytoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#mybutton").attr('disabled', true);
});
// setCheckAllCheckBox();
setTimeout(function(){
setCheckAllCheckBox();
},2000);
});
});
I hope this will help you.
Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.
