Splunk Search

How to color a table cell whose column name is dynamic

kabiraj
Path Finder

I want to color cells of a column name which is in dynamic _time format. Below is my format if we select last 3 days from timepicker.

Channel 22-Jun-15 21-Jun-15 20-Jun-15 19-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

I want to color all the dynamic _time column cells based on the numbers that cell contains. In Splunk Dashboard Examples 6.x, the method is mentioned only for a static column name.

Can it be done if the column name is dynamic. Please help.

paramagurukarth
Builder

You can do it using splunk/etc/apps/MyApplication/appserver/static/application.js...

if(Splunk.util.getCurrentView() == "yourViewName" && Splunk.Module.SimpleResultsTable){
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function() {
            var container = this.container;
            .
            .
            . **Select and color your element using jQuery**
            .
            .
            .
        }
    });
}

Above example is to customize SimpleResultsTable....
*container is the parent div element of your table view

0 Karma

kabiraj
Path Finder

Hi paramagurukarthikeyan. Appreciate you answer but couldn't understand the entire part. It would be great if you could explain me a bit more and tell me what exactly will be my return field.

ex -

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'active_hist_searches') {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'active_realtime_searches') {
if (value > 1) {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
// Add custom cell renderer
tableView.table.addCellRenderer(new CustomRangeRenderer());
// tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
// tableView.$el.find('td.range-cell').each(function() {
// $(this).addClass(this.className);
// });
//});
// Force the table to re-render
tableView.table.render();
});
});

In the above example, the return fields are 'active_hist_searches' & 'active_realtime_searches'. Smilarly for my case as its a dynamic _time field, what should i write inside return[]?

0 Karma

paramagurukarth
Builder

I guess you will the same column number even if you have different field name..
If that is right...... Then you can get the column position and decide your color...

$td.parent().children().index($td[0]) == coloumnPos

  1. Get the parent Element (i.e )
  2. get the list of childrens (i.e. ss)
  3. find the position of the current td and compare it with your column position and do the rest with coloring....

Note : coloumn count starts from Zero ...i.e zero for 1st column

0 Karma

kabiraj
Path Finder

Below is my query :

sourcetype=shmapplogs "getMS3SAS ended for - deviceId" | bucket span=1d _time | stats count by _time channelId | sort count desc | lookup youview_channels.csv service_id_truncated AS channelId OUTPUT channel_name_letter | streamstats count AS position by _time | fields channel_name_letter position _time | convert timeformat="%d-%b-%Y" ctime(_time) As Time | chart max(position) over channel_name_letter by Time

I want to color the cells belong to 'Time' field.

0 Karma

paramagurukarth
Builder

Instead, can you Please show me your results screen shot.....

0 Karma

paramagurukarth
Builder
require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(, $, mvc, TableView) {
    // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            return (['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            // Apply interpretation for number of historical searches
            var tdPosition = $td.parent().children().index($td[0]);
            //To customize First Column based on its value
            if (tdPosition == 0) {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-severe');
                } else if (value > 1) {
                    $td.addClass('range-cell').addClass('range-elevated');
                } else if (value > 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
            // Apply interpretation for number of realtime searches
            //To customize Second Column based on its value
            if (tdPosition == 1) {
                if (value > 1) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }
            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.on('rendered', function() {
        // Apply class of the cells to the parent row in order to color the whole row
        // tableView.$el.find('td.range-cell').each(function() {
        // $(this).addClass(this.className);
        // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});
0 Karma

kabiraj
Path Finder

can i use below to give same condition for all the columns after 1st column.

if (tdPosition > 0) {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
} else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
} else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}

Also do i need return field if i use tdposition?

0 Karma

paramagurukarth
Builder

yes you can... to confirm that just put a console.log(tdposition + value) before that condition

0 Karma

kabiraj
Path Finder

okay.. Thank you.. one more question..

return (['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
},

The names mentioned in return[] contains the field names whose cells i want to color. what should i mention in return field for my case as the column names are dynamic?

my first field name is "Channel" and it's static. After that only dynamic _time column names will come.

0 Karma

paramagurukarth
Builder

send me what you are getting a a value for cell
Or
Before sending that just try return true;

0 Karma

kabiraj
Path Finder

In the below link i have specified everything very clearly. Please have a look.

http://answers.splunk.com/answers/249570/content-not-showing-in-the-table.html

0 Karma

kabiraj
Path Finder

Hi paramagurukarthikeyan.
Below is the script i am using right now. The bolded parts (i.e parts with **) has some problems. The table is showing empty i.e. only the column names are showing without any values. I think there is some problem with updating the cell content. Can you please help?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            **return true;**
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            // Apply interpretation for number of historical searches
                var tdPosition = $td.parent().children().index($td[0]);
                **var value = cell.value;**
            if (tdPosition > 0) {
                    **var value = parseFloat(value);**
                if ((value > 0) && (value <= 50)) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if ((value > 50) && (value <= 100)) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if ((value > 100) && (value <= 150)) {
                    $td.addClass('range-cell').addClass('range-low');
                }
                    else {
                        $td.addClass('range-cell').addClass('range-empty');
                    }

            }
            // Update the cell content
                **$td.text(value).addClass('numeric');**
        }
    });
    mvc.Components.get('rettable').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
           // tableView.$el.find('td.range-cell').each(function() {
           //     $(this).addClass(this.className);
           // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});
0 Karma

kabiraj
Path Finder

Below will be sample of my results if i chose 3 days from timepicker

Channel 22-Jun-15 21-Jun-15 20-Jun-15 19-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

My query:
sourcetype=shmapplogs "getMS3SAS ended for - deviceId" | bucket span=1d _time | stats count by _time channelId | sort count desc | lookup youview_channels.csv service_id_truncated AS channelId OUTPUT channel_name_letter | streamstats count AS position by _time | fields channel_name_letter position _time | convert timeformat="%d-%b-%Y" ctime(_time) As Time | chart max(position) over channel_name_letter by Time

i want to color all '_time' columns from the above format based on the numbers each column contains.

Channel will be the static column and rest all will be dynamic. I want coloring only for dynamic columns.

so what should i write for return[()].contains(cell.field)?

0 Karma

paramagurukarth
Builder

Inside C:\Program Files\Splunk\share\splunk\search_mrsparkle\exposed\js\build\splunkjs\mvc\tableview.js, the render method will be called only if canRender method returns true for that cell...

if (cellRenderer instanceof BaseCellRenderer) {
if (cellRenderer.canRender(cellData)) {
cellRenderer.setup($td, cellData);
cellRenderer.render($td, cellData);
renderedCell.cellData = cellData;
renderedCell.cellRenderer = cellRenderer;
break;
}

So you have to identify the required cell in candRender too...

But before investing time in that just return true from candRender method and see whether it work or not...

0 Karma

paramagurukarth
Builder

If you see the tableview.js inside C:\Program Files\Splunk\share\splunk\search_mrsparkle\exposed\js\build\splunkjs\mvc
it will cal render only if the canRender returns true

if (cellRenderer instanceof BaseCellRenderer) {
                        if (**cellRenderer.canRender(cellData)**) {
                            cellRenderer.setup($td, cellData);
                            **cellRenderer.render($td, cellData);**
                            renderedCell.cellData = cellData;
                            renderedCell.cellRenderer = cellRenderer;
                            break;
                        }

You must identify you column number in canRender too or just return true; from canRender... and check what is happening..........

0 Karma

kabiraj
Path Finder

i cannot post screenshots here. But in my question itself i have specified the format of my results. Please have a look.

0 Karma

kabiraj
Path Finder

Hi paramagurukarthikeyan. If you could just give one example to demonstrate the solution you suggested, it would be great.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...