Dashboards & Visualizations

Table cell renderer does not work on Firefox

VatsalJagani
Champion

I've very similar javascript as below in my dashboard which adds up the color in the table. As I've updated dashboard.css I cannot utilize XML color palette, so I had to use table cell renderer.

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Point-C
             return _(['My Column Name', 'Name']).contains(cell.field);
         },
         render: function($td, cell) {
             // Point-D
             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 = ["Mytable1", "Mytable2"];
     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
                // Point-A
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
                 // Point-B
             });
         }
     }     
 });

My code is able to execute properly in Chrome.
While running in Firefox it reaches Point-A and Point-B but not to Point-C or Point-D. Any idea what can be wrong or any workaround.
While in Firefox also the issue is intermittent, at some random time out of two tables any one loads as well, but not all the time. Anyone have any idea why TableCellRenderer does not work in firefox sometimes?

Labels (2)
0 Karma
1 Solution

VatsalJagani
Champion

The issue is because JS loads before the dashboard. I found a workaround as follows.

Add one line at the end of your JS.

  ...........
                  tableView.table.render();
                  // Point-B
              });
          }
      }
      setToken("wait_for_js_to_load", " ");
  });

Prepend this token in all the table queries which have custom cell renderer. Ex.

$wait_for_js_to_load$ index=main | stats count by sourcetype

I found this issue in Splunk 8.0.1.

Hope this helps other people having same issue.

View solution in original post

@VatsalJagani this has been a bug in Splunk Table Cell render extension since Splunk 6.6 and above. Please refer to the previous question with a workaround with setTimeout to add a delay before table is rendered().

https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html?ch...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

VatsalJagani
Champion

The issue is because JS loads before the dashboard. I found a workaround as follows.

Add one line at the end of your JS.

  ...........
                  tableView.table.render();
                  // Point-B
              });
          }
      }
      setToken("wait_for_js_to_load", " ");
  });

Prepend this token in all the table queries which have custom cell renderer. Ex.

$wait_for_js_to_load$ index=main | stats count by sourcetype

I found this issue in Splunk 8.0.1.

Hope this helps other people having same issue.

sreichel
Engager

This worked great for me. I found that I needed to use the "submitted" rather than "default" instance.

let sub_tokens = mvc.Components.getInstance("submitted");
...
sub_tokens.set("js_ready", " ");
0 Karma
Get Updates on the Splunk Community!

Splunk Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...