All Apps and Add-ons

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

sameera123
Explorer

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.

0 Karma

duuhsousa
New Member

Can you post your css and XML too ?

0 Karma

renjith_nair
Legend

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

---
What goes around comes around. If it helps, hit it with Karma 🙂

renjith_nair
Legend

Did it help?

---
What goes around comes around. If it helps, hit it with Karma 🙂
0 Karma

renjith_nair
Legend

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 ?

---
What goes around comes around. If it helps, hit it with Karma 🙂
0 Karma

sameera123
Explorer

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??

0 Karma
Get Updates on the Splunk Community!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Get the T-shirt to Prove You Survived Splunk University Bootcamp

As if Splunk University, in Las Vegas, in-person, with three days of bootcamps and labs weren’t enough, now ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...