Splunk Web Framework - Converting Table Icon Simple XML view from Splunk 6 Dashboard example into django/js

Hi All,

I am currently trying with no success to convert the view "Table Icon Set (Inline)" provided by the app Splunk 6 Dashboard Examples into a django / javascript view using the new Web framework.

This view provides a very interesting way (and important to our requirements) to add custom icon visualizations of specific values ranges into a table to much improve its visibility:

This uses a Javascript code (file: table_icons_inline.js) as follows (with fields name adapted to my requirements):

    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 === 'Percent_Used';
        },
        render: function($td, cell) {
            var Percent_Used = cell.value;

            // Compute the icon base on the field value
            var icon;
            if(Percent_Used > 90) {
                icon = 'alert-circle';
            } else if(Percent_Used > 70) {
                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
            }));
        }
    });

    var CustomIconRenderer2 = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Percent_OverProvisionning';
        },
        render: function($td, cell) {
            var Percent_OverProvisionning = cell.value;

            // Compute the icon base on the field value
            var icon;
            if(Percent_OverProvisionning > 90) {
                icon = 'alert-circle';
            } else if(Percent_OverProvisionning > 70) {
                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
            }));
        }
    });

    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer());
        // Force the table to re-render
        tableView.table.render();
    });

    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer2());
        // Force the table to re-render
        tableView.table.render();
    });

});

This works very well into my simple xml view, but when i try to add it into my django view, the table works ok but not the icon customization.

Inspecting the page using my browser, i can see some related errors into the console which i don't have when launching the simple xml page that works fine:

Failed to load resource: the server responded with a status of 404 (Not Found) http://guilhem-xxxxx:8000/en-us/splunkd/__raw/servicesNS/admin/xxxxxxxxxxxxxx/data/ui/views/HDS_Dashboard?output_mode=json&_=1388709272893
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. mvc.js:1
Uncaught Error: Load timeout for modules: splunkjs/mvc/simplexml/ready!_unnormalized4,splunkjs/mvc/simplexml/ready!
http://requirejs.org/docs/errors.html#timeout config.js:1
4
Uncaught TypeError: Object [object Array] has no method 'attrTween' d3chartview.js:1

I tried to adapt and play with library launched inside the js code (require...) with no success.

I'm unfortunately not (yet) a javascript expert, that is why i would appreciate your help on this, i guess the javascript is maybe not totally compatible with a django view and has to be adapted...

The error message shown in the console talks about the splunkjs/mvc/simplexml/ready! library that cannot be loaded, off course if i delete loading this library, then other error will append (ex. Uncaught TypeError: Cannot call method 'extend' of undefined )

I notably tried replacing require with and example coming from django views:

require([
        "splunkjs/ready!", 
        "splunkjs/mvc/utils",
        "underscore",
        "jquery",
        "splunkjs/mvc/tableview"

With no success.

Last thing, the simple xml view can be converted into an html view that works perfectly, in this html view the js code is called differently like:

<script src="{{SPLUNKWEB_URL_PREFIX}}/static/app/xxxxxxxxxxxxxx/table_icons_inline.js" type="text/javascript"></script>

I also tried to integer this into my django view javascript block with no success...

Here is an example of js code part i tried with no success :

{% block js %}
{{ block.super }}
<script>
    require([
        "splunkjs/ready!", 
        "splunkjs/mvc/utils",
        "underscore",
        "jquery",
        "splunkjs/mvc/dropdownview"
        ], 
        function(
            mvc, 
            utils,
            _, 
            $,
            DropdownView
                ){

                var chart = mvc.Components.getInstance('chart-info-pool');
                chart.settings.set("setup", function(chart){
                chart.showLabels(true);
                chart.showLegend(false);                
                });

    });
</script>

<script>
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 === 'Percent_Used';
        },
        render: function($td, cell) {
            var Percent_Used = cell.value;

            // Compute the icon base on the field value
            var icon;
            if(Percent_Used > 90) {
                icon = 'alert-circle';
            } else if(Percent_Used > 70) {
                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
            }));
        }
    });

    var CustomIconRenderer2 = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Percent_OverProvisionning';
        },
        render: function($td, cell) {
            var Percent_OverProvisionning = cell.value;

            // Compute the icon base on the field value
            var icon;
            if(Percent_OverProvisionning > 90) {
                icon = 'alert-circle';
            } else if(Percent_OverProvisionning > 70) {
                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
            }));
        }
    });

    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer());
        // Force the table to re-render
        tableView.table.render();
    });

    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomIconRenderer2());
        // Force the table to re-render
        tableView.table.render();
    });

});
</script>

{% endblock js %}

Many thanks in advance for any help !!!