All Apps and Add-ons

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

guilmxm
SplunkTrust
SplunkTrust

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:

alt text

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 !!!

1 Solution

ineeman
Splunk Employee
Splunk Employee

There is an example of how to use custom table cells in the Web Framework Toolkit app. Here is the code for that specific view:
https://github.com/splunk/splunk-webframework-toolkit/blob/master/splunk_wftoolkit/django/splunk_wft...

And you can download the app here:
http://apps.splunk.com/app/1613/

Let us know if you have any other questions or if this isn't sufficient.

View solution in original post

ineeman
Splunk Employee
Splunk Employee

There is an example of how to use custom table cells in the Web Framework Toolkit app. Here is the code for that specific view:
https://github.com/splunk/splunk-webframework-toolkit/blob/master/splunk_wftoolkit/django/splunk_wft...

And you can download the app here:
http://apps.splunk.com/app/1613/

Let us know if you have any other questions or if this isn't sufficient.

View solution in original post

guilmxm
SplunkTrust
SplunkTrust

Thanks, this is indeed what i was looking for, i missed this view within the Framework toolkit 😉

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!