Highlighting the row of two tables with respect to the condition of a single column respectively.
Hi Splunkers, hope all really enjoying with Splunk. Earlier we discussed “Highlighting the row of a table with respect to the condition of a single column” if you have missed it, can check it out from the above link.
Now, what if we want to highlight the row of two tables, where the base field is common. Take an example.
As one can see the “number” field is common for both the tables and we want to highlight both the tables and conditions will be the same also. If you want to check the condition just go to the previous blog by clicking the above link.
In this case, we don’t need to do anything just need to add another id for the second table that’s it. For that just go to your java-script which is given below. ( row_highlighting.js )
require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { // Row Coloring Example with custom, client-side range interpretation var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field return _(['number']).contains(cell.field); }, render: function($td, cell) { // Add a class to the cell based on the returned value var value = parseFloat(cell.value); // Apply interpretation for number of historical searches if (cell.field === 'number') { if (value > 4 ) { $td.addClass('range-cell').addClass('range-elevated'); } else if (value >= 2 && value <= 4 ) { $td.addClass('range-cell').addClass('range-severe'); } } // Apply interpretation for number of realtime searches $td.text(value.toFixed(2)).addClass('numeric'); } }); mvc.Components.get('highlight').getVisualization(function(tableView) { tableView.on('rendered', 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); }); }); // Add custom cell renderer, the table will re-render automatically. tableView.addCellRenderer(new CustomRangeRenderer()); }); mvc.Components.get('highlight1').getVisualization(function(tableView) { tableView.on('rendered', 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); }); }); // Add custom cell renderer, the table will re-render automatically. tableView.addCellRenderer(new CustomRangeRenderer()); }); });
NOTE: BOLD PORTION IS ADDED FURTHER FOR OUR REQUIREMENT
And also need to create CSS for “highlight1” ( table _decorations_CSS.css )
/* Custom Icons */ td.icon { text-align: center; } td.icon i { font-size: 25px; text-shadow: 1px 1px #aaa; } td.icon .severe { color: red; } td.icon .elevated { color: orangered; } td.icon .low { color: #006400; } /* Row Coloring */ /*#highlight tr td { background-color: #c1ffc3 !important; }*/ #highlight tr.range-elevated td { background-color: #ff0000 !important; } #highlight tr.range-severe td { background-color: #ffff00 !important; } /*#highlight tr.range-aa td { background-color: #c1ffc3 !important; }*/ #highlight .table td { border-top: 1px solid #fff; } #highlight td.range-severe, td.range-elevated { font-weight: bold; } #highlight1 tr.range-elevated td { background-color: #ff0000 !important; } #highlight1 tr.range-severe td { background-color: #ffff00 !important; } #highlight1 .table td { border-top: 1px solid #fff; } #highlight1 td.range-severe, td.range-elevated { font-weight: bold; } .icon-inline i { font-size: 18px; margin-left: 5px; } .icon-inline i.icon-alert-circle { color: #ef392c; } .icon-inline i.icon-alert { color: #ff9c1a; } .icon-inline i.icon-check { color: #5fff5e; } NOTE: BOLD PORTION IS ADDED FURTHER FOR OUR REQUIREMENT
After creating these files put them in the following path.
$SPLUNK_HOME/etc/apps/<app name>/appserver/static
And restart your Splunk server.
In the next step, open the dashboard, click edit and go-to source code then within the dashboard write the file names of you java-script and CSS. also provide the table id which is mentioned in the java-script. as shown in the below figure.
That’s it save and refresh the page once and it will be there for you.
It’s colorful it looking mesmerizing, I was kidding. But jokes apart hope your google searching comes to an end on this topic after this blog.
Happy Splunking!!
