Dashboards & Visualizations

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

kgiri253
Explorer

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.

kgiri253_0-1670306068087.png

 

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

kgiri253_0-1670306315445.png

Trying to resolve this issue but noting is working.

Labels (3)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@kgiri253 

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

KV

0 Karma

kgiri253
Explorer

Please find the complete code below and the error below.

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

 

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.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false

});
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();
});
});

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

0 Karma
Get Updates on the Splunk Community!

Investigate Security and Threat Detection with VirusTotal and Splunk Integration

As security threats and their complexities surge, security analysts deal with increased challenges and ...

Observability Highlights | January 2023 Newsletter

 January 2023New Product Releases Splunk Network Explorer for Infrastructure MonitoringSplunk unveils Network ...

Security Highlights | January 2023 Newsletter

January 2023 Splunk Security Essentials (SSE) 3.7.0 ReleaseThe free Splunk Security Essentials (SSE) 3.7.0 app ...