Splunk Search

How can I add icons that replace the cell.value on my table without using rangemap?

sfatnass
Contributor

Hi,

I want to add icons that replace the cell.value on my table without using range map.

How can I do that?

thx

Tags (3)
1 Solution

ConnorG
Path Finder

You'll need to use javascript if you're looking to use icons without rangemaps. Below you'll find a segment of my code that is placing icons in a table. Instead of a rangemap you'll see that this is choosing the icon based on conditionals and the cell value itself.

Go here if you have never used javascript with dashboards before. My code is expanding upon these concepts.

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) 
        {

            return _(['SLA']).contains(cell.field);
        },
        render: function($td, cell) {

             var template_settings="";
             console.log("cell: ", cell);

            if (cell.field === 'SLA') {
                var value = cell.value;
                if( value == '-1') {
                    $td.addClass('nopadding').addClass('range-cell').addClass('range-na');
                    // $td.text(value);
                    $td.text('N/A');

                    var msg='No Response Time SLA defined for this transaction.';
                    template_settings = '<div class="data-box" data-toggle="tooltip" data-placement="left" title="'+msg+'"><div class="sla-good"  style="background-color:#222222; width:100%"></div></div>';
                }
                else if ( value == '0') {
                        $td.addClass('nopadding');

                        var msg='Transactions failed response time SLA as defined in terms of 90th percentile'; 
                        template_settings = '<i class="icon-alert-circle" title="Failed"></i>';
                }
                else {

                        $td.addClass('nopadding');

                        var msg='Transactions passed response time SLA as defined in terms of 90th percentile';
                        template_settings = '<i class="icon-check-circle" title="Passed"></i>';

                }
            }
            $td.html(_.template(template_settings));

            //$td.children('[data-toggle="tooltip"]').tooltip();
        }
    });

View solution in original post

ConnorG
Path Finder

You'll need to use javascript if you're looking to use icons without rangemaps. Below you'll find a segment of my code that is placing icons in a table. Instead of a rangemap you'll see that this is choosing the icon based on conditionals and the cell value itself.

Go here if you have never used javascript with dashboards before. My code is expanding upon these concepts.

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) 
        {

            return _(['SLA']).contains(cell.field);
        },
        render: function($td, cell) {

             var template_settings="";
             console.log("cell: ", cell);

            if (cell.field === 'SLA') {
                var value = cell.value;
                if( value == '-1') {
                    $td.addClass('nopadding').addClass('range-cell').addClass('range-na');
                    // $td.text(value);
                    $td.text('N/A');

                    var msg='No Response Time SLA defined for this transaction.';
                    template_settings = '<div class="data-box" data-toggle="tooltip" data-placement="left" title="'+msg+'"><div class="sla-good"  style="background-color:#222222; width:100%"></div></div>';
                }
                else if ( value == '0') {
                        $td.addClass('nopadding');

                        var msg='Transactions failed response time SLA as defined in terms of 90th percentile'; 
                        template_settings = '<i class="icon-alert-circle" title="Failed"></i>';
                }
                else {

                        $td.addClass('nopadding');

                        var msg='Transactions passed response time SLA as defined in terms of 90th percentile';
                        template_settings = '<i class="icon-check-circle" title="Passed"></i>';

                }
            }
            $td.html(_.template(template_settings));

            //$td.children('[data-toggle="tooltip"]').tooltip();
        }
    });

jerhuey75
Explorer

I don't know if you can do it without rangemap. If you haven't already, take a look at the Traffic Light Visualisations App. Good examples there.

0 Karma
Get Updates on the Splunk Community!

See your relevant APM services, dashboards, and alerts in one place with the updated ...

As a Splunk Observability user, you have a lot of data you have to manage, prioritize, and troubleshoot on a ...

Index This | What goes away as soon as you talk about it?

May 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...

What's New in Splunk Observability Cloud and Splunk AppDynamics - May 2025

This month, we’re delivering several new innovations in Splunk Observability Cloud and Splunk AppDynamics ...