topic Re: How to fix: JavaScript error caused an issue loading your dashboard, likely due to the dashboard version update? in Dashboards & Visualizations

How to fix: JavaScript error caused an issue loading your dashboard, likely due to the dashboard version update?

kgiri253 — Tue, 06 Dec 2022 14:40:35 GMT

I updated Splunk to 9.0.2 from 9.0.0 and in on of my panels I have changed lookup from kvstore lookup to general csv lookup -> from "allfindings" to "allfindings.csv". Just after this I started getting the following error.

I tried to inspect this error and found this in my console.

Trying to resolve this issue but noting is working.

Re: How to fix: JavaScript error caused an issue loading your dashboard, likely due to the dashboard version update?

kamlesh_vaghela — Wed, 07 Dec 2022 12:19:32 GMT

@kgiri253

Can you please share the sample JS code and the error you are getting in the console in plain text?

Re: How to fix: JavaScript error caused an issue loading your dashboard, likely due to the dashboard version update?

kgiri253 — Tue, 13 Dec 2022 06:16:51 GMT

Please find the complete code below and the error below.

Error: Already have instance with id: details-search-manager

//this._dataView = new DataView({
// managerid: 'details-search-manager',
// template: "<b>Solution:</b> <p><%= results[0].solution %></p>"
//});
},

canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},

render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the sourcetype cell to use its value
$container.html("");
var findingCell = _(rowData.cells).find(function (cell) {
return cell.field === 'finding';
});
// get plugin and ip
var result = findingCell.value.split("#");
//update the searches
this._searchManager.set({ search: '| inputlookup nessus_plugin_solution.csv | search id=' + result[1] + ' | fields solution | append [| makeresults | eval solution="No data available." | fields - _time ] | head 1'});
// the rex is a workaround for splunk not implementing linebreaks in the details tables correctly, only mv fields seem to work
this._postproc_pluginOutput.set({search: '| search pokey="' + result[3] + '" | fields plugin_output | rex mode=sed field=plugin_output "s/(\\n)/\\1 #BREAK#/g" | makemv delim="#BREAK#" plugin_output | append [| makeresults | eval plugin_output="No data available." | fields - _time ] | head 1' });

// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
$container.append(this._tableView.render().el);
$container.append(this._plugintableView.render().el);
// $container.append("IP: " + result[0] + " Plugin: " + result[1] );
}
});

var CustomLinkRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'solved';
},
render: function($td, cell) {
var solved = cell.value;
var solved_result = solved.split("-");
//var a = $('<a>').attr("href", "www.test.de").text("testlink");
//var a = $('<input>').attr('type','checkbox');
//var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).attr('class','icon-minus-circle');
var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value});
// check if marked as solved
if(solved_result[1] == 1)
{
a.attr('class','icon-check-circle');
}
else
{
a.attr('class','icon-minus-circle');
}
$td.empty().append(a);

a.click(function(e) {
e.preventDefault();
//window.location = $(e.currentTarget).attr('href');
// or for popup:
// window.open($(e.currentTarget).attr('href'));
if($(e.currentTarget).attr('class') == 'icon-minus-circle')
{
$(e.currentTarget).attr('class','icon-gear');
var updatestring = '| inputlookup lkp-all-findings | eval key=_key | where key="' + solved_result[2] +'" | eval lastchecked=1 | outputlookup append=t lkp-all-findings';
var kvupdate = new SearchManager({
preview: false
});
kvupdate.set({search: updatestring});
kvupdate.on('search:done', function(properties) {
//console.log("DONE!\nSearch job properties:", properties.content);
// Set new value when search is done
$(e.currentTarget).attr('class','icon-check-circle');
});
}
else
{
$(e.currentTarget).attr('class','icon-gear');
var updatestring = '| inputlookup lkp-all-findings | eval key=_key | where key="' + solved_result[2] +'" | eval lastchecked=0 | outputlookup append=t lkp-all-findings';
var kvupdate = new SearchManager({
preview: false
});
kvupdate.set({search: updatestring});
kvupdate.on('search:done', function(properties) {
//console.log("DONE!\nSearch job properties:", properties.content);
// Set new value when search is done
$(e.currentTarget).attr('class','icon-minus-circle');
});
}

});
}
});

var tableElement = mvc.Components.getInstance("reports_table");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.

tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
tableView.table.addCellRenderer(new CustomLinkRenderer());
// Force the table to re-render
tableView.table.render();
});
});

Re: How to fix: JavaScript error caused an issue loading your dashboard, likely due to the dashboard version update?

kamlesh_vaghela — Fri, 16 Dec 2022 06:15:49 GMT

@kgiri253

Can you please try this?

require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/dataview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc/postprocessmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function( TableView, ChartView, DataView, SearchManager, PostProcessManager, mvc, _ ) { var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { // initialize will run once, so we will set up a search and a chart to be reused. if(this._searchManager == "undefined") { this._searchManager = new SearchManager({ id: 'details-search-manager', preview: false }); } if(this._baseSearchManager == "undefined") { this._baseSearchManager = new SearchManager({ id: 'base-search-manager', search: '| loadjob savedsearch="nobody:duerr_it_vuln_management:saved-plugin_outputv2"', preview: false }); } this._postproc_pluginOutput = new PostProcessManager({ id: 'postproc-plugin-output', managerid: 'base-search-manager', }); this._tableView = new TableView({ managerid: 'details-search-manager', 'charting.legend.placement': 'none' }); this._plugintableView = new TableView({ managerid: 'postproc-plugin-output', 'charting.legend.placement': 'none' }); //this._dataView = new DataView({ // managerid: 'details-search-manager', // template: "<b>Solution:</b> <p><%= results[0].solution %></p>" //}); }, canRender: function(rowData) { // Since more than one row expansion renderer can be registered we let each decide if they can handle that // data // Here we will always handle it. return true; }, render: function($container, rowData) { // rowData contains information about the row that is expanded. We can see the cells, fields, and values // We will find the sourcetype cell to use its value $container.html(""); var findingCell = _(rowData.cells).find(function(cell) { return cell.field === 'finding'; }); // get plugin and ip var result = findingCell.value.split("#"); //update the searches this._searchManager.set({ search: '| inputlookup nessus_plugin_solution.csv | search id=' + result[1] + ' | fields solution | append [| makeresults | eval solution="No data available." | fields - _time ] | head 1' }); // the rex is a workaround for splunk not implementing linebreaks in the details tables correctly, only mv fields seem to work this._postproc_pluginOutput.set({ search: '| search pokey="' + result[3] + '" | fields plugin_output | rex mode=sed field=plugin_output "s/(\\n)/\\1 #BREAK#/g" | makemv delim="#BREAK#" plugin_output | append [| makeresults | eval plugin_output="No data available." | fields - _time ] | head 1' }); // $container is the jquery object where we can put out content. // In this case we will render our chart and add it to the $container $container.append(this._tableView.render().el); $container.append(this._plugintableView.render().el); // $container.append("IP: " + result[0] + " Plugin: " + result[1] ); } }); var CustomLinkRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field === 'solved'; }, render: function($td, cell) { var solved = cell.value; var solved_result = solved.split("-"); //var a = $('<a>').attr("href", "www.test.de").text("testlink"); //var a = $('<input>').attr('type','checkbox'); //var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).attr('class','icon-minus-circle'); var a = $('<div>').attr({ "id": "chk-sourcetype" + cell.value, "value": cell.value }); // check if marked as solved if (solved_result[1] == 1) { a.attr('class', 'icon-check-circle'); } else { a.attr('class', 'icon-minus-circle'); } $td.empty().append(a); a.click(function(e) { e.preventDefault(); //window.location = $(e.currentTarget).attr('href'); // or for popup: // window.open($(e.currentTarget).attr('href')); if ($(e.currentTarget).attr('class') == 'icon-minus-circle') { $(e.currentTarget).attr('class', 'icon-gear'); var updatestring = '| inputlookup lkp-all-findings | eval key=_key | where key="' + solved_result[2] + '" | eval lastchecked=1 | outputlookup append=t lkp-all-findings'; var kvupdate = new SearchManager({ preview: false }); kvupdate.set({ search: updatestring }); kvupdate.on('search:done', function(properties) { //console.log("DONE!\nSearch job properties:", properties.content); // Set new value when search is done $(e.currentTarget).attr('class', 'icon-check-circle'); }); } else { $(e.currentTarget).attr('class', 'icon-gear'); var updatestring = '| inputlookup lkp-all-findings | eval key=_key | where key="' + solved_result[2] + '" | eval lastchecked=0 | outputlookup append=t lkp-all-findings'; var kvupdate = new SearchManager({ preview: false }); kvupdate.set({ search: updatestring }); kvupdate.on('search:done', function(properties) { //console.log("DONE!\nSearch job properties:", properties.content); // Set new value when search is done $(e.currentTarget).attr('class', 'icon-minus-circle'); }); } }); } }); var tableElement = mvc.Components.getInstance("reports_table"); tableElement.getVisualization(function(tableView) { // Add custom cell renderer, the table will re-render automatically. tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); tableView.table.addCellRenderer(new CustomLinkRenderer()); // Force the table to re-render 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.