The scenario

You have a dashboard panel and you wish for certain rows in that panel to be highlighted if one or more fields contains values that meet certain criteria.

The image above shows various pieces of information associated with different endpoints of an openbanking API. For this example dashboard, we are interested in highlighting the rows of any endpoints that have recorded any downtime (that is to say, highlight any rows that have a “1” in the ‘inDowntime’ column).

The approach

Whilst it is possible to highlight individual cells based on values using simple XML, in order to highlight the whole row, JavaScript/CSS will need to be used.

The basic idea is to:

  • Create a CSS file that contains the styling information relating to how a specific row belonging to a table object should look when highlighted.
  • Create a JavaScript file that controls how each row of a table looks depending on what values are contained within one or more of its fields. The JavaScript should amend the set of classes that each row belongs to so that the appropriate styling defined in the CSS file is picked up.
  • Update the dashboard to point to these files.

The problem

There are several tutorials on the internet that go into how the above might be achieved. However, there seems to be an issue with row highlighting in that, even if a specific table row is specified to be highlighted in the css, some other styling property defined with respect to the individual cells within a given row will overwrite it.

The solution to this problem is to apply any background colouring to each of the individual cells in a given row rather than to the row itself which produces the effect of a row being highlighted.

The steps below outline how to achieve this.

The steps

1. Navigate to the base directory for your app. In the terminal this looks like:

cd $SPLUNK_HOME/etc/apps/<your_app_base_directory>

2. If it is not already there, create an “appserver” folder and then within that folder, create a “static” folder.

mkdir appserver
cd appserver
mkdir static
cd static

3. Within the static folder create a new css file and a new javascript file.

touch <your_css_name>.css
touch <your_javascript_name>.js

4. Open up the css and add the appropriate styling information.

5. Open up the javascript file, insert the following code, save then close.

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

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
                   return _(['<your_range>']).contains(cell.field);
    },
    render: function($td, cell) {

        //Read the value for the cell being passed in
        var value = parseFloat(cell.value);

        // If the cell belongs to the <your_range> field then proceed
        if (cell.field === '<your_range>') {

            if (value >0 ) {
            //If the <your_range> cell is greater than 0
            //Update the list of classes associated with the cell
            //to include the ‘<your_range>’ class.
            //This means that the cell will pick up the CSS information associated with the <your_range> class
                    $td.addClass('<your_range>');
            }
        }

        // Update the cell content
        $td.text(value.toFixed(2)).addClass('numeric');
    }
});

mvc.Components.get('highlight').getVisualization(function(tableView) {

    tableView.on('rendered', function() {

    //Use timeout function to make sure that rendering of custom elements is applied after defaults kick in
    setTimeout(function() {

            //Search across all elements in the table and for each one that has the <your_range> class associated with it, find the parent row that it belongs to and then apply the <your_range> class to each cell in the row.
            tableView.$el.find('td.<your_range>').each(function() {
                    $(this).parents('tr').find('td').each(function() {
                            $(this).addClass('<your_range>');
                    });




            });
    },250);
    });

    tableView.addCellRenderer(new CustomRangeRenderer());

    });
});

Where <your_range> is the name of the field that you are interested in highlighting

The code essentially looks at each cell that is of the <your_range> field and checks its value. If the value is non-zero then the cell is assigned an additional class, “<your_range>”. This class is the same as that defined in the CSS file.

The code then finds which row the newly updated cell belongs to and then cycles through every cell and applies the same class.

6. Go to the dashboard in question, click on edit then source. Find the <form> or <dashboard> tag to which the relevant table belongs and add:

script=“<your_javascript_name>.js stylesheet=“<your_css_name>.css”

to the tag. It should look something like this:

In this example, the JavaScript file has been named “table_row_highlighting_02.js” and the CSS file has been named “table_decorations_02.css”.

7. Restart Splunk – any tables within your dashboard that are pointing to the JavaScript and which have rows that meet your specified criteria should now be highlighted.


For 2021 we’ve committed to posting a new Splunk tip every week!

If you want to keep up to date on tips like the one above then sign up below:

Subscribe to our newsletter to receive regular updates from iDelta, including news and updates, information on upcoming events, and Splunk tips and tricks from our team of experts. You can also find us on Twitter and LinkedIn.

Subscribe

* indicates required
Posted by:Andrew MacLeod

Andrew is a certified Splunk Admin and has worked for iDelta for just under a year. Previously, he worked as an actuarial analyst in the life and pensions industry - a role that he was in for over 7 years before deciding to embark on a career change into the IT industry. He holds an MPhys degree in theoretical physics from the University of Edinburgh. Outside of work he is a big puzzle fan, with a particular penchant for things cruciverbal and mathematical.

One thought on “Spice up your Dashboards with Advanced Highlighting

Comments are closed.