All Apps and Add-ons

Splunk 6.x Dashboard Examples: How to apply cell renderer to all tables in a dashboard?

xchang1226
Path Finder

Hi Guys,

I am trying to apply CSS to highlight color in my statistics table panels. Problem is, I have lots of panels and all have the same structure, yet I am not able to figure out how to apply the same BaseCellRenderer type to all of them. From the example app, this needs to be done by assigning a unique id to the table I want to apply the renderer to and then call:

mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

But I am looking for a way to avoid tagging each of my tables with an id and add this piece of code. Instead, I just want to generally apply this to all tables in the dashboard.

Thanks !

Graham_Hanningt
Builder

I had the same issue using the "Table with Data Bars" example. I wanted to apply data bars to multiple tables in a dashboard, not just a single table with id="table1". (Splunk 6.6.3.)

I solved this by iterating over mvc.Components.getInstances() and looking for tables.

I apply the data bar rendering to any cell whose field name contains "%". This suits me better than requiring a fixed field name of "percent". I typically don't use the top command to generate these percentage values. Here's an example of the type of query I use for these data bars (with the first application-specific stage omitted):

| stats sum(response) as response by applid | sort -response | head 10 | eventstats sum(response) as total | eval percent=100*response/total | fields - total | rename response as "Total response time", percent as "% of top 10"

Here's my updated table_data_bar.js file:

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

    "use strict";

    var DataBarCellRenderer = BaseCellRenderer.extend({
        canRender: function(cell) {
            return (cell.field.indexOf('%') !== -1);
        },
        render: function($td, cell) {
            $td.addClass('data-bar-cell').html(_.template('<div class="data-bar-wrapper"><div class="data-bar" style="width:<%- percent %>%"></div></div>', {
                percent: Math.min(Math.max(parseFloat(cell.value), 0), 100)
            }));
        }
    });

    $.each(mvc.Components.getInstances(), function (i, view) {
         if (view instanceof TableView) {
             view.addCellRenderer(new DataBarCellRenderer());
         }
     });
});

Graham_Hanningt
Builder

Possibly too much information: I'm using these "top 10" tables with data bars for drilldown. I originally wanted to use tag clouds (which is what I'm using in equivalent dashboards on a different analytics platform), but it wasn't immediately obvious to me how to add drilldown behavior to either the custom tag cloud viz in the Splunk-built dashboard examples, or the Wordcloud viz. So I "fell back" to using tables (which support drilldown out-of-the-box via Simple XML), and added data bars to offer the feeling of "scale" that font sizes in tag clouds offer. In case you're wondering, I don't simply use bar charts with drilldown because, in my data, some values can be relatively huge, dwarfing the bar sizes of others (even in the "top 10"), so there's not much "bar" to click on for drilldown. This problem is avoided in tag clouds by having a minimum font size.

0 Karma

renjith_nair
SplunkTrust
SplunkTrust

Add a loop to your Java script to list all table elements and apply renderer to each element.

Something like below. Please test it and feel free to amend for your requirements

function addStatusIcon(id) {
                mvc.Components.get(id).getVisualization(function(tableView){
                        tableView.table.addCellRenderer(new CustomRangeRenderer());
                        tableView.table.render();
                });
    }

//Get all table elements in the dashboard    
var s = document.getElementsByClassName("dashboard-element table splunk-view");

// Loop thru the list
    for (i=0;i<s.length;i++) {
        id=s[i].getAttribute("id");
                addStatusIcon(id);
    }

xchang1226
Path Finder

Thanks for the answer! This should work. Although just wanted to go one step ahead and check if i can also avoid the whole "id" all together? Basically is there an equivalent call to Components.get() that will accept a tag name or may be even array of DOM elements?

0 Karma

martinstack
New Member

Did you figure this out?

0 Karma

renjith_nair
SplunkTrust
SplunkTrust

Not sure but start from here : http://docs.splunk.com/DocumentationStatic/WebFramework/1.2/compref_mvc.html or http://dev.splunk.com/webframework

Please accept as answer if you are happy with the first answer so that the question will be marked as complete. Thank you

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!