Dashboards & Visualizations

How to display colored cells or rows in a dashboard table in Splunk 5.0.4?

Path Finder

Hi,

Based on the search:

sourcetype="splunkd" | stats count by log_level

it will provide the table below. If I wish to display the table cell/row such that ERROR will be the color red, warn is orange and info is green, how do I get these colors displayed in a dashboard in Splunk 5.0.4? thks

log_level    count
ERROR       149
INFO         564123
WARN         225
Tags (3)
0 Karma

Builder

HI newbiesplunk

Here is an exemple of what you need

xml code:

    <dashboard script="my.js" stylesheet="my.css">
    <label>Log Level</label>
    <description/>
    <row>
    <table id="highlight">
    <title>Log Level</title>
    <searchString>index=_internal sourcetype=splunkd | stats count log_level |table log_level  count </searchString>
    <earliestTime>-24h</earliestTime>
    <option name="drilldown">none</option>
    </table>
    </row>
    </dashboard>

your .js file must look at this:

    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 _(['log_level']).contains(cell.field);
    },
    render: function($td, cell) {
    // Apply interpretation for number of historical searches
    if (cell.field === 'log_level') {
    if (value == ERROR) {
    $td.addClass('range-cell').addClass('range-severe');
    }
    else if (value == INFO) {
    $td.addClass('range-cell').addClass('range-elevated');
    }
    else if (value == WARM) {
    $td.addClass('range-cell').addClass('range-low');
    }
    }
    }
    }
    // 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();
    });
    });

Your css file must be like this:

#highlight td.range-low {
color: orange  !important;
font-weight: bold;
}
#highlight td.range-elevated {
background-color: green !important;
font-weight: bold;
}
#highlight td.range-severe {
background-color: red !important;
font-weight: bold;
}

NB: You must put the css and js files in the folder ''static'' of the app that contain the xml dashboard. If there is not change, think to restart splunk to applied changes.

Influencer

This can be done in your dashboards with custom CSS & Javascript. I highly recommend the Splunk 6.x Dashboard Examples app, which has examples of this (Under Examples for Table Elements, there is one for changing the color of a cell, and one for changing the color of a row) and many other examples of other things that can be done for your Splunk dashboards

Path Finder

Hi, my Splunk version is 5.0.4,is there any examples in the Splunk 5.x Dashboard Examples app? thks

0 Karma

Influencer

There might be, the splunk dashboard examples app (for version 5) is still around, but hasn't been updated in some time obviously. I'll admit that I haven't played with that app (I went from 4.3 to 6.0).

0 Karma