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