All Apps and Add-ons

How to get table_icons_rangemap.js visible in more than 1 table in the same dashboard?

maikelreis
New Member

Hello All,
I downloaded and I'm using Table Icons Rangemap (table_icons_rangemap) dashboard, however I want to use it in more than one table and in this javaScript works only to. I want to be able to view these icon_rangemap in different tables in same Dashboard, is it possible?
I edited js, but it is not working in Splunk

// Translations for en_US
i18n_register({"catalog": {}, "plural": function(n) { return n == 1 ? 0 : 1; }});


require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    '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 === 'range';
    },
    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
        }));
    }
});

mvc.Components.get('table1').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table2').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table3').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table4').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
}); 

mvc.Components.get('table5').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table6').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table7').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
}); 

mvc.Components.get('table8').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table9').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table10').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});     

});

Appreciate your help

0 Karma
1 Solution

niketn
Legend

@maikelreis, You need to make sure in your dashboard Simple XML that your tables have corresponding id.
If it is working for one of the tables, its should look like the following in Simple XML...

<table id="table1">
...
...
</table>

Similarly, you should extend for remaining table as well

<table id="table2">
...
...
</table>
<table id="table3">
...
...
</table>
<table id="table4">
...
...
</table>

and so on and so forth.

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

View solution in original post

0 Karma

niketn
Legend

Table Cell Renderer can be applied to all the tables present in a dashboard dynamically using the solution approach
from one of my recent answer: https://answers.splunk.com/answers/815883/javascript-with-xml-coding.html?childToView=816803#answer-...

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

niketn
Legend

@maikelreis, You need to make sure in your dashboard Simple XML that your tables have corresponding id.
If it is working for one of the tables, its should look like the following in Simple XML...

<table id="table1">
...
...
</table>

Similarly, you should extend for remaining table as well

<table id="table2">
...
...
</table>
<table id="table3">
...
...
</table>
<table id="table4">
...
...
</table>

and so on and so forth.

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

maikelreis
New Member

Hello @niketnilay,

Thanks for your reply, I changed my dashboard xml for the way you mentioned and for same reason now icon_rangemap is not working for any table. I dont know if js needs to be changed or there are more references for table1 that Im not finding
Also I added 10 tables in my js, and if I dont add 10 tables in my dashboard it doesnt show any result.

appreciate your help

0 Karma

niketn
Legend

@maikelreis Have you restarted Splunk after appling your CSS? You would also need to clear Browser history for changes to reflect. For Table Range Icons only two places the table IDs need to match is the XML and CSS file. The corresponding CSS change is generic so no changes required there.

May I also know the Splunk Enterprise version you are using?

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

maikelreis
New Member

@niketnilay my splunk version is 6.2.1. I will restart Splunk service and let you know if worked.
I tried _bump but didn`t help,

Thanks

0 Karma

niketn
Legend

Slight correction for my previous comment "table ids need to match in XML and JS... the CSS changes are generic"

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

maikelreis
New Member

@niketnilay thanks for help. I figured out that .js I downloaded from Dashboard examples was looking for table called "range" and my table didn`t have this column, so fixed it and restarted Splunk service, after that I am able to see more than 1 table with same icon_rangemap.

Thanks for help

0 Karma

niketn
Legend

Great news. Please accept the answer if it has helped you.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...