Splunk 6.x Dashboard Examples: How to include multiple ID's for different tables (inline icon) in javascript?

[jonathan_yan5]

Need your help to find the right javascript codes of inline icons under dashboard examples. Need to know how to use multiple ID's for this setup. I understand i need to include the ID name on .xml, but what is the right code for .js?

This is only limited to a single "Table1" ID. how can i include other table ID's (e.g Table2, Table3,etc)?

 mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer());
        // Force the table to re-render
        tableView.table.render();

[baerts]

I verified this and it works after
restart and clearing your browsercache:

cat blabla/appserver/static/table_icons_inline2.js ::

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

var CustomIconRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        return cell.field === 'count';
    },
    render: function($td, cell) {
        var count = cell.value;

        // Compute the icon base on the field value
        var icon;
        if(count > 3000) {
            icon = 'alert-circle';
        } else if(count > 1000) {
            icon = 'alert';
        } else {
            icon = 'check';
        }

        // Create the icon element and add it to the table cell
        $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
            icon: icon,
            text: cell.value
        }));
    }
});

mvc.Components.get('table1').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new CustomIconRenderer());
    // Force the table to re-render
    tableView.table.render();
});


mvc.Components.get('table2').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new CustomIconRenderer());
    // Force the table to re-render
    tableView.table.render();
});

});

—————————

cat blabla/default/data/ui/views/custom_table_icon_set_inline2.xml:

<label>Table Icon Set (Inline)</label>

<row>
    <table id="table1">
        <title>Render Icons based on rangemap result</title>
        <searchString>index=_internal | stats count by sourcetype,source,host</searchString>
        <earliestTime>-1h</earliestTime>
        <option name="drilldown">none</option>
    </table>
</row>

<row>
    <table id="table2">
        <title>Render second table Icons based on rangemap result</title>
        <searchString>index=_internal | stats count by component</searchString>
        <earliestTime>-1h</earliestTime>
        <option name="drilldown">none</option>
    </table>
</row>

[baerts]

This paste contains some errors 🙂

[stephanefotso · Accepted solution]

Hello! you can attain your objective by simply assign for each table, his own js file. something like this

<dashboard script="table_icons_inline1.js,table_icons_inline2.js" stylesheet="table_decoration_icon.css">
    <label>Table Icon Set (Inline)</label>
    <row>
        <table id="table1">
            <title>Render Icons based on rangemap result</title>
            <searchString>index=_internal | stats count by sourcetype,source,host</searchString>
            <earliestTime>-1h</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>
   <row>
        <table id="table2">
            <title>Render Icons based on rangemap result</title>
            <searchString>index=_internal | stats count by sourcetype,source,host</searchString>
            <earliestTime>-1h</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>
</dashboard>

Means, three tables == three js files. And each js file manage a single table. Something like this

 mvc.Components.get('table1').getVisualization(function(tableView){
         // Register custom cell renderer
         tableView.table.addCellRenderer(new CustomIconRenderer());
         // Force the table to re-render
         tableView.table.render();

for the first table,

mvc.Components.get('table2').getVisualization(function(tableView){
         // Register custom cell renderer
         tableView.table.addCellRenderer(new CustomIconRenderer());
         // Force the table to re-render
         tableView.table.render();

for the second one, and so on

[martinstack]

can you change by class instead of ID?,

[jonathan_yan5]

Thanks this worked!

[baerts]

You can add the following to the javascript for each table needed:

mvc.Components.get('table2').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomIconRenderer());
// Force the table to re-render
tableView.table.render();

mvc.Components.get('table3').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomIconRenderer());
// Force the table to re-render
tableView.table.render();

etc.

and use these as your additional table id's in the dashboard

[baerts]

and of course the
});

after each mvc.Components table def 😉

[jonathan_yan5]

Hello baerts, have you tried to use your suggestion? actually i have tried that before but it did not work.

[baerts]

Jonathan hi!

Yes and it did work also :-). If I remember correctly:

• I needed to restart spunk (but am not sure anymore on that)
• You need to use all table-id's you defined in your javascript in the dashboard.

gr.

[Patient]

Hi Jonathan,
I don't know if this will help you, but I'll like to help you more.
If I have understood well, you need the right javascript codes of inline icons under dashboard examples, in the simple_xml_examples you can choose Table Icon Set (Inline)for the good application that you need. Below is the right code for .js:

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

    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'count';
        },
        render: function($td, cell) {
            var count = cell.value;

            // Compute the icon base on the field value
            var icon;
            if(count > 3000) {
                icon = 'alert-circle';
            } else if(count > 1000) {
                icon = 'alert';
            } else {
                icon = 'check';
            }

            // Create the icon element and add it to the table cell
            $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: cell.value
            }));
        }
    });

    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer());
        // Force the table to re-render
        tableView.table.render();
    });

});

You can found this table_icons_inline.js in the link below in your local machine if you have intalled simple_xml_examples app:
$Splunk_home$\etc\apps\simple_xml_examples\appserver\static then follow the below link in splunk web for simple xml code:
/en-US/app/simple_xml_examples/custom_table_icon_set_inline?earliest=0&latest=
Please let me know if you have more suggestion. Thanks and regards

[jonathan_yan5]

Hello Patient, i am already aware of that script.. problem is i have three tables.. that script i believe does not support 3 table ID's.. if it does can you revise that script to show the right codes. Thanks