Why am I not able to use more than 4 table icon rangemaps in Splunk 6.x dashboards?

[sameera123]

Not able to use more than 4 table icon rangemaps in Splunk 6.x dashboards. Can any one please suggest on this?

I'm using table icon rangemaps for 4 tables by creating for each table and each js file. I did the same thing with the 5th table, but it's not working.

[duuhsousa]

Can you post your css and XML too ?

[renjith_nair]

I have tested this in Splunk 6.2 and 6.3 and is working. Each of the table should have an id and use that id to render. You can write a loop to get all the table id and render it too.

I have used a field name as Status and this should be the column name of the ICON

  require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'bootstrap.tab',
      'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, mvc, TableView) {
    // Translations from rangemap results to CSS class
    var ICONS = {
       severe: 'alert-circle',
      elevated: 'alert',
      low: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
      canRender: function(cell) {
      // Only use the cell renderer for the range field
      return cell.field === 'Status';
     },
    render: function($td, cell) {
    var icon = 'question';
    // Fetch the icon for the value
    if (ICONS.hasOwnProperty(cell.value)) {
    icon = ICONS[cell.value];
    }
    // Create the icon element and add it to the table cell
    $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %>" title="<%- range %>"></i>', {
    icon: icon,
    range: cell.value
    }));
    }
    });
    //For each status tables, include the icons with rspective colors
    mvc.Components.get('host_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('boot_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('process_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('url_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });    

    mvc.Components.get('ssl_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('license_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });        
    mvc.Components.get('df_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('cpu_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });
    mvc.Components.get('ram_status').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
    });    

  });    

Enable the debugger(firebug or similar) to identify any issue with your JS

[renjith_nair]

Did it help?

[renjith_nair]

Are you using the example from splunk 6.x dashboard examples? I have created at least 8 tables on same dashboard and never experience any limitations. In between I'm using single js for all tables. How did you manage to call different JS file for each table ?

[sameera123]

if you don't mind pasting the table_icon_rangemap.js file here please.I was able to do it for only 2 tables in single js not more than that.and what version you are using??