Hello guys, I need a help with a dropdown, basically I have this "Stage" column on Splunk dashboard classic, which I can choose the stage of the data. But when I reload the page or open the dashboard on the new tab (Or Log in on another device), it returns to default value, which is Pending. This is the XML and the a.js I use:
------XML-------
<dashboard version="1.1" script="a.js">
<label>Audit Progression Tracker</label>
<fieldset submitButton="false">
<input type="time" token="field1">
<label>Time Range</label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="field2">
<label>Domain Controller</label>
<choice value="dc1">Domain Controller 1</choice>
<choice value="dc2">Domain Controller 2</choice>
<choice value="dc3">Domain Controller 3</choice>
<fieldForLabel>Choose DC</fieldForLabel>
</input>
</fieldset>
<row>
<panel>
<table id="table_id">
<search>
<query>
index="ad_security_data"
| where status ="failed"
| table checklist_name, name, mitigation
| eval Stage="Pending"
</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>
------a.js----------
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
console.log("Script loaded");
var StageDropdownRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
console.log("Checking cell for Stage column:", cell.field);
return cell.field === "Stage";
},
render: function($td, cell) {
console.log("Rendering cell for Stage column");
var dropdownHtml = `
<select>
<option value="Pending" ${cell.value === "Pending" ? "selected" : ""}>Pending</option>
<option value="Proceeding" ${cell.value === "Proceeding" ? "selected" : ""}>Proceeding</option>
<option value="Solved" ${cell.value === "Solved" ? "selected" : ""}>Solved</option>
</select>
`;
$td.html(dropdownHtml);
updateBackgroundColor($td, cell.value);
$td.find("select").on("change", function(e) {
console.log("Selected value:", e.target.value);
updateBackgroundColor($td, e.target.value);
});
}
});
function updateBackgroundColor($td, value) {
var $select = $td.find("select"); // Chọn dropdown (phần tử <select>)
if (value === "Proceeding") {
$select.css("background-color", "#FFD700");
} else if (value === "Solved") {
$select.css("background-color", "#90EE90");
} else {
$select.css("background-color", "");
}
}
// Lấy bảng và áp dụng custom renderer
var table = mvc.Components.get("table_id");
if (table) {
console.log("Table found, applying custom renderer");
table.getVisualization(function(tableView) {
// Thêm custom cell renderer và render lại bảng
tableView.table.addCellRenderer(new StageDropdownRenderer());
tableView.table.render();
});
} else {
console.log("Table not found");
}
});
All I want it to keep it intact whatever I do and It can turn back to Pending every 8 A.M. Thanks for the help
... View more
