Bulb Visualization Sample
<panel>
<html>
<style>
/* CSS for table response_time_highlight_icon
#response_time_highlight_icon tr{
width: 40px;
height: 40px;
float: left;
}*/
#response_time_highlight_icon td.icon img{
text-align: center;
width: 100px;
height: 100px;
}
#response_time_highlight_icon td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
#response_time_highlight_icon td.icon .severe {
color: indianred;
}
#response_time_highlight_icon td.icon .elevated {
color: orange;
}
#response_time_highlight_icon td.icon .low {
color: #lightgreen ;
}
/* CSS for table response_time_highlight_cell */
#response_time_highlight_cell td.range-low {
background-color: lightgreen !important;
}
#response_time_highlight_cell td.range-elevated {
background-color: orange !important;
font-weight: bold;
}
#response_time_highlight_cell td.range-severe {
background-color: indianred !important;
font-weight: bold;
}
/* CSS for table response_time_highlight_row */
#response_time_highlight_row tr td {
background-color: lightgreen !important;
}
#response_time_highlight_row tr.range-elevated td {
background-color: orange !important;
}
#response_time_highlight_row tr.range-severe td {
background-color: indianred !important;
}
#response_time_highlight_row .table td {
border-top: 1px solid #fff;
}
</style>
<table id="response_time_highlight_icon">
<search>
<query>index=_internal|stats count by name| eval "Total Count"=case('count'>2800,"severe_".'count','count'<2800 AND 'count'>=2000,"elevated_".'count',true(),"low_".'count')|fields - count,name</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">10</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
Java Script Code is:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {
severe: 'alert-circle',
elevated: 'alert',
low: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the "Total Count" field
return cell.field === 'Total Count';
},
render: function($td, cell) {
var icon = 'check-circle';
// Fetch the icon for the value
var cellArray = cell.value.split("");
var cellValue = cellArray1;
var range = cellArray[0];
if (ICONS.hasOwnProperty(cellArray[0])) {
icon = ICONS[cellArray[0]];
}
// Create the icon element and add it to the table cell
/* $td.addClass('icon').html(.template('
icon: icon,
range: cellArray[0],
cellValue:cellValue
}));
}
});
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for 'Total Count'
return _(['Total Count']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var strSLA = cell.value;
if (strSLA!==undefined){
strSLA=strSLA.trim();
$td.addClass('range-cell').addClass("range-"+strSLA);
}
$td.text(strSLA).addClass('string');
}
});
mvc.Components.get("response_time_highlight_icon").getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
mvc.Components.get("response_time_highlight_cell").getVisualization(function(tableView){
tableView.on("rendered", function() {
console.log("Table Rendered");
setTimeout(function(){
$("#response_time_highlight_cell tr").each(function() {
var strSLA=$(this).find("td:last").html();
if (strSLA!==undefined){
strSLA=strSLA.trim();
$(this).find("td:nth-child(3)").addClass("range-cell").addClass("range-"+strSLA);
}
});
},100);
});
});
mvc.Components.get("response_time_highlight_row").getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
Output is showing like this,But i want to display horizontally.Bulbs should display sided by side.How to do this.
