Dashboards & Visualizations

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

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

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

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

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