Dashboards & Visualizations

How to examine values in a dashboard table using my own javascript?

_dave_b
Communicator

Hello.

The table_icons_inline.js file in the simple_xml_examples app demonstrates how Javascript is used to check/compare integer values. I want to be able to do that same thing with my own code, except I'd be checking time values instead of integers. It try to query the values using javascript's alert function, but I always get a blank value. Basically, I want to be able to check a value that is set in Splunk like so: eval customCell=toString(epochTimeA, "duration") | table customCell

and the javascript looking like:

var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'customCell';
        },
        render: function($td, cell) {
            var count = cell.value;
            // Compute the icon base on the field value
            var icon;

I've tried several ways to get an alert box to pop up with the Cell's value, but none have worked. Any help or insight would be greatly appreciated. Thanks!

0 Karma
1 Solution

_dave_b
Communicator

The problem was I the string I used to display the count variable wasn't properly concatenated. When I tried to alert the value of count, the improper concatenation caused it to appear null when in fact it was storing a value all along. If I had pasted the complete segment of code, that would have been apparent. Comparing the time value never popped up as an issue, All that needed to be done was to compare the variable to a time-formatted string like "00:30:00" (when comparing against 30 minutes).

Here's my customized CustomIconRenderer from table_icons_inline.js:

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

    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Delta Since Current Upload';
        },
        render: function($td, cell) {
            var count = cell.value;

            // Compute the icon base on the field value
            var icon;

            //alert("Count concatenated by + to this string is " + count);

            if(count > "00:30:00") {
                icon = 'alert-circle';
            } else if(count > "00:20:00") {
                icon = 'alert';
            } else {
                icon = 'check';
            }


            // Create the icon element and add it to the table cell
            $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: cell.value
            }));
        }
    });

View solution in original post

_dave_b
Communicator

The problem was I the string I used to display the count variable wasn't properly concatenated. When I tried to alert the value of count, the improper concatenation caused it to appear null when in fact it was storing a value all along. If I had pasted the complete segment of code, that would have been apparent. Comparing the time value never popped up as an issue, All that needed to be done was to compare the variable to a time-formatted string like "00:30:00" (when comparing against 30 minutes).

Here's my customized CustomIconRenderer from table_icons_inline.js:

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

    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Delta Since Current Upload';
        },
        render: function($td, cell) {
            var count = cell.value;

            // Compute the icon base on the field value
            var icon;

            //alert("Count concatenated by + to this string is " + count);

            if(count > "00:30:00") {
                icon = 'alert-circle';
            } else if(count > "00:20:00") {
                icon = 'alert';
            } else {
                icon = 'check';
            }


            // Create the icon element and add it to the table cell
            $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: cell.value
            }));
        }
    });

lakshmisri
New Member

Hi Dave.. How do I debug using developer tools. The custom js that we add is not coming up so that i can give breakpoints. Any tips?

0 Karma
Get Updates on the Splunk Community!

Join Us for Splunk University and Get Your Bootcamp Game On!

If you know, you know! Splunk University is the vibe this summer so register today for bootcamps galore ...

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

.conf24 is taking place at The Venetian in Las Vegas from June 11 - 14. Continue reading to learn about the ...

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...