How to fix: JavaScript error caused an issue loadi...

kgiri253 · ‎12-05-2022

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.

kamlesh_vaghela · ‎12-07-2022

@kgiri253

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

KV

kgiri253 · ‎12-12-2022

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,
_
){

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

kamlesh_vaghela · ‎12-15-2022

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

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

javascript

panel

table

Take the 2021 Splunk Career Survey for $50 in Amazon Cash

Using Machine Learning for Hunting Security Threats

Observability Newsletter Highlights | March 2023