@shreyasathavale, you can use Splunk Dashboard Examples App to take a look at Table Row Highlighting example.
In your case you would need to convert RealDuration to same format as RunDuration i.e. HH:MM:SS.%4N and then use strptime() to convert them to epoch time (so that they can be used for evaluating numerical difference) using %H:%M:%S.%4N. Once you calculate the Difference, the same can be used to apply row color as per your use case. Following is the run any where search example:
| makeresults
| eval RunDuration="00:35:45.0000"
| eval RealDuration="00:28:35".".0000"
| append
[| makeresults
| eval RunDuration="00:25:20.0000"
| eval RealDuration="00:30:50".".0000"]
| append
[| makeresults
| eval RunDuration="00:40:30.0000"
| eval RealDuration="00:35:40".".0000"]
| fields - _time
| eval RunDurationEpoch=strptime(RunDuration,"%H:%M:%S.%4N")
| eval RealDurationEpoch=strptime(RealDuration,"%H:%M:%S.%4N")
| eval diffEpoch=RunDurationEpoch-RealDurationEpoch
| fields - RunDurationEpoch RealDurationEpoch
Commands till | fields - _time generate mock data as per your requirement. You would need to use your existing Splunk query instead. Remaining pipes calculate required difference in Epoch Time for RunDuration and RealDuration. You will also need to add %4N to RealDuration to have both time fields in similar format. If RunDuration %4N is always 0000, you can ignore the following and also just use "%H:%M:%S" in your strptime() functions.
| eval RealDuration=RealDuration.".0000"
Final command | fields - RunDurationEpoch RealDurationEpoch removes Epoch times not required.
Following is the Run anywhere dashboard code.
1) JavaScript and CSS files have been used in the dashboard i.e. script="table_row_highlighting_numeric_diff.js" stylesheet="table_decorations.css"
2) Table has been given id="highlight"
<dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
<label>Color Based on Two Columns</label>
<row>
<panel>
<title>Color Table Row Based on duration difference</title>
<table id="highlight">
<search>
<query>| makeresults
| eval RunDuration="00:35:45.0000"
| eval RealDuration="00:28:35".".0000"
| append
[| makeresults
| eval RunDuration="00:25:20.0000"
| eval RealDuration="00:30:50".".0000"]
| append
[| makeresults
| eval RunDuration="00:40:30.0000"
| eval RealDuration="00:35:40".".0000"]
| fields - _time
| eval RunDurationEpoch=strptime(RunDuration,"%H:%M:%S.%4N")
| eval RealDurationEpoch=strptime(RealDuration,"%H:%M:%S.%4N")
| eval diffEpoch=RunDurationEpoch-RealDurationEpoch
| fields - RunDurationEpoch RealDurationEpoch</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>
</row>
</dashboard>
Javascript file table_row_highlighting.js (based on the Splunk Dashboard Examples App)
PS: Somehow the JavaScript to apply custom Table Row Classes was getting overridden with Splunk Default Table Renderer. Hence colors were not applying. I have added 1 sec delay in adding table row class based on cell class using setTimeOut() JavaScript function. Please adjust or remove as per your use case.
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring by Numeric Comparison of Epoch Time Value in HH:MM:SS.%4N
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for diffEpoch field
return _(['diffEpoch']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Update the cell content with numeric diffEpoch value HH:MM:SS.%4N
$td.text(value).addClass('numeric');
// Apply interpretation for diffEpoch field
if (cell.field === 'diffEpoch') {
if (value >= 0) {
$td.addClass('range-cell').addClass('range-severe');
}
}
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
tableView.on('rendered', function() {
// Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
setTimeout(function() {
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
console.log("Applying Class",this.className);
});
}, 100);
});
});
});
Following is the table_decorations.css code similar to the one used in example.
/* Row Coloring */
#highlight tr td {
background-color: #65A637 !important;
}
#highlight tr.range-elevated td {
background-color: #F7BC38 !important;
font-weight: bold;
}
#highlight tr.range-severe td {
background-color: #D93F3C !important;
font-weight: bold;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
PS: Since this example uses JavaScript and CSS static files. It might require you to Refresh/Restart Splunk and also clear your Internet Browser history for changes to reflect.
Please try out and confirm.
