How to highlight dynamic timelines in Splunk?

[SridharS]

hey hi,

I am newbie to Splunk. I am trying to create a dashboard. I created the dashboard in a way that, if I give a group name, the servers which belongs to that particular group will get displayed along with their last response time(with the help of Community member). Now what I require is to highlight the servers which are not been reporting for past 7days. I google and made some reportime.js file and tried, but no luck. Is there any way that I can do it in splunk itself without going to a .js file??

[alacercogitatus]

You can't call the javascript/stylesheet like that. All js and css must reside in $APP_HOME/appserver/static. So put table_row_highlighting.js in that folder, and call it like this:

<form script="table_row_highlighting.js"> ....

Restart splunkweb once you have done this, and it should load the JS and execute.

[bmacias84]

Take a look at Splunk 6.x Dashboard Examples. It contain many example and has what you are trying to do.

[SridharS]

Yeah. I had a look 6.x dashboard on that and tried to do highlight using .js file. My query here is am not able to do it so with | Highlight... command. Is there any other way that I can get it done with splunk query itself instead of going to .js?

[bmacias84]

The closest thing you have is using the heatmap overlay option or rangemap command, however what you want can only be accomplished with js.

[SridharS]

Hi, I created a table_row_highlighting.js and decoration.css file and called it in my dashboard xml. But i find that this file is not effecting in my dashboard.

In the .js file i want to highlight the list of server that are not responding for past 48hrs(i.e. 2 days). I tested the script and called it in my .xml file, but no luck. Can you please find what error I am facing here. Here the 'host' and "Last" columns contains the server name and server's last response time. The .js is here

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

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

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



        var currentDate = new Date();
       var prevDate = new prevDate(cell.value)


        if (cell.field === 'Last') {
            if(prevDate<currentDate) {
                $td.addClass('range-cell').addClass('range-elevated');
            }
        }

        $td.date(currentDate.toFixed(currentDate)).addClass('date');
    }
});
mvc.Components.get('highlight').getVisualization(function(tableView) {

    tableView.table.addCellRenderer(new CustomRangeRenderer());
    tableView.on('rendered', function() {

        tableView.$el.find('td.range-cell').each(function() {
            $(this).parents('tr').addClass(this.className);
        });
    });

    tableView.table.render();
});

});

And I called this script here in .xml file

[SridharS]

I called the .xmll in dashboard like this
form script="~/splunk/bin/table_row_highlighting.js" stylesheet="~/splunk/share/splunk/search_mrsparkle/exposed/css/decoration.css"