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!

Announcing Scheduled Export GA for Dashboard Studio

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

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...