Updated Answer for this thread. @willtseng0217 Please try below full sample code below your requirement. collections.conf [my_status_data]
enforceTypes = true
field.status = string
field.unique_id = string transforms.conf [my_status_data_lookup]
external_type = kvstore
collection = my_status_data
fields_list = _key, status, unique_id XML <dashboard version="1.1" theme="dark" script="test.js">
<label>js for button on table cell</label>
<row>
<panel>
<table id="table1">
<search id="SearchA">
<query>| makeresults count=10
| eval A=1
| accum A
| eval B=random()
| lookup my_status_data_lookup unique_id as A output status
| eval action= case(isnull(status),"Ack",status=="Ack","Unack", 1=1,"Ack") +"|"+ A
| eval status = if(isnull(status),"",status) +"|"+A
</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> test.js require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
console.log("Hie 65100");
var SearchA = mvc.Components.get("SearchA");
let CustomCellRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Enable this custom cell renderer for the confirm field
return _(["action", "status"]).contains(cell.field);
},
render: function ($td, cell) {
if (cell.field == "action") {
const cell_value = cell.value.split("|")[0]
let unique_id = cell.value.split("|")[1];
let button_id = "action_btn_" + unique_id;
let div_id = "status_div_" + unique_id;
console.log(cell_value);
let button = $('<button />', {
value: cell_value,
id: button_id,
on: {
click: function () {
console.log(unique_id, button_id);
console.log(div_id);
let div_value = $('#' + div_id).html();
let new_status = "";
if (div_value == "Ack") {
$('#' + div_id).html("Unack");
$('#' + button_id).html("Ack");
new_status = "Unack"
} else {
$('#' + div_id).html("Ack");
$('#' + button_id).html("Unack");
new_status = "Ack"
}
update_collection_data(unique_id, new_status);
}
}
}).addClass("extend_expiry btn-sm btn btn-primary").html(cell_value);
$td.html(button)
}
if (cell.field == "status") {
console.log(cell.value);
const cell_value = cell.value.split("|")[0]
const cell_id = cell.value.split("|")[1]
console.log(cell_value);
console.log(cell_id);
let div_id = "status_div_" + cell_id;
let html = `<div id="` + div_id + `">` + cell_value + `</div>`
$td.html(html)
}
}
});
function update_collection_data(unique_id, status) {
var record = {
status: status,
unique_id: unique_id,
_key: unique_id
}
let collection = "my_status_data";
$.ajax({
url: '/en-US/splunkd/__raw/servicesNS/nobody/search/storage/collections/data/' + collection + '/' + unique_id,
type: "POST",
async: true,
contentType: "application/json",
data: JSON.stringify(record),
success: function(returneddata) {
console.log("Updated!", returneddata)
},
error: function(xhr, textStatus, error) {
console.error("Error Updating!", xhr, textStatus, error);
$.ajax({
url: '/en-US/splunkd/__raw/servicesNS/nobody/search/storage/collections/data/' + collection,
type: "POST",
async: true,
contentType: "application/json",
data: JSON.stringify(record),
success: function(returneddata) {
console.log("Added!", returneddata)
},
error: function(xhr, textStatus, error) {
console.error("Error Adding!", xhr, textStatus, error);
}
});
}
});
}
let sh = mvc.Components.get("table1");
if (typeof (sh) != "undefined") {
sh.getVisualization(function (tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomCellRenderer());
tableView.table.render();
});
}
}); 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.
... View more
