We have an HTML dashboard that displays some data in a table with custom colour coding and drilldowns applied using jQuery selectors in Javascript. Since upgrading to Splunk 6.6 there have been problems with the colour coding etc. not being applied upon loading. Now after upgrading to 7.0 on our search head the table doesn't display at all; I get "Uncaught Error: VisualisationRegistry has not been populated" in the console in Chrome. I've also tried other browsers and get the same problem.
I believe this is a problem with the TableView visualisation in Splunk 7. I've tried substituting TableView for TableElement (the default name after converting a table in a simple XML dashboard to HTML) in the Javascript itself and the table is now rendered, but there is no colour coding or any sign of the jQuery functions we have being applied at all.
Anyone had similar problems with Javascript dashboards after recent upgrades? Has the support for these visualisations changed or have the dependencies been affected in Splunk 7 or 6.6?
@jhigginsmq, I believe you are using jQuery for Table Row Highlighting based on Table Cell value. I have noticed that post 6.5 this require us to add some delay even after rendering the table otherwise default color overrides the color we want to apply...
Following is an example for adding some delay before applying row color:
tableView.on('rendered', function() {
// Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
Refer to one of my answers on similar lines:https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html
Please try out and confirm. If it does not work you might need to paste what you currently have. Just ensure that every time you modify JSS you refresh/bump your Splunk instance for latest static files to reflect changes. May also need to clear internet browser history.
i have the same problem and i don't find any solution.
nothing work (xml or html) dashboard.
splunk wont execute tableView.on('rendered', function() {
i tryed with the delay but nothing happen 😞
what's happen with splunk 7 ? why is being complicated for splunkjs stack right there
@sfatnass the behavior has been same since Splunk 6.6 where setTimeout()
is required inside TableView render()
function. So the workaround should still hold true. Have you tried debug refresh or bump of environment to ensure that latest JavaScript code is getting pulled? Also can you add some Console Logs outputs to ensure whether code flow is hitting all the code blocks or not?
@niketnilay yes of course i bump and debug/refresh ^^
when i add setTimeout() nothing change.
and yes i use console.log to show where i am and i found that any render() function not loaded.
but sometime it work but make a lot a lot of time :(.
@sfatnass, are you trying Table Row Highlighting? How Many Columns Do you have? Is there Maximum displayed Column (if the number of columns is not fixed)? Are the column Names fixed/static or may change i.e. like Date or something similar?
Finally, have you posted any recent question with the details of what you have and what you want with mock screenshots? Since the post is roughly a year old would you be able to create a new question so that it gets proper attention?
@niketnilay, i submit an app exemple (xml and html dashboards)
my objectif is simple, if i click on cell "id" i need to highlight the value.
you are able to download/edit the app https://splunkbase.splunk.com/app/4184/
if you have any solution for me i'm interested
Adding the delay has fixed it! Thanks we've been going for months with an ugly, colour-less database table.
@jhigginsmq, I believe you are using jQuery for Table Row Highlighting based on Table Cell value. I have noticed that post 6.5 this require us to add some delay even after rendering the table otherwise default color overrides the color we want to apply...
Following is an example for adding some delay before applying row color:
tableView.on('rendered', function() {
// Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
Refer to one of my answers on similar lines:https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html
Please try out and confirm. If it does not work you might need to paste what you currently have. Just ensure that every time you modify JSS you refresh/bump your Splunk instance for latest static files to reflect changes. May also need to clear internet browser history.
HI @jhigginsmq,
My javascript code is working properly in 6.x & 7.0 both.
Below is my sample code. Can you please try it or compare it with your code?
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(['My Column Namwe']).contains(cell.field);
},
render: function($td, cell) {
if(cell.value=="red" || cell.value=="green" || cell.value=="yellow")
{
$td.html("<div class='circle_"+cell.value+"'></div>")
}
else if(cell.value=="NoData" || cell.value=="null")
{
$td.html("<div class='align_center'></div>")
}
else
{
$td.html("<div class='align_center'>"+cell.value+"</div>")
}
}
});
//List of table IDs to add icon
var tableIDs = ["Mytable"];
for (i=0;i<tableIDs.length;i++) {
var sh = mvc.Components.get(tableIDs[i]);
if(typeof(sh)!="undefined") {
sh.getVisualization(function(tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
}
});
Happy Splunking
Thanks, ours looks quite different but good to see another example.
You need to make sure the JS is ready
for calls. Add this to your requirejs stack:
splunkjs/ready!
This will make sure the splunkJS is ready and the registry is loaded.
Thanks for that, adding it fixes the issue with the table not displaying but I'm getting the same issue with the jQuery not being applied.