Hello
I try to modify text color in a table based on a field value.
Here's the table i display.
ScanName ScanSatus ScanDate
Scan1 Up to date Apr 01, 2013
Scan2 Up to date Apr 01, 2013
Scan3 Up to date Apr 01, 2013
Scan4 Not up to date Mar 01, 2013
I want to put in green the rows where the ScanStatus field is at "Up to date" and red when it's at "Not up to date".
I'd applied the recommendations on the following topic but i have no result
http://splunk-base.splunk.com/answers/42994/advanced-xml-highlight-certain-values-in-a-table-not-num...
The table is still white everywhere, maybe i'm doing something wrong or it dosen't work on 5.0 ?
Could someone confirm me what is currently the best choice to implement this feature ?
Still using .jss/.css files, using the sideview utils, an other solution ?
Please let me know.
Thanks.
You can do this with application.js (if you dashboards are bundled in a separate app). The nice thing about this approach is that it works in simple XML.
Step one: update application.js
First, add the following to $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.js:
if( Splunk.Module.SimpleResultsTable ){
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
renderResults: function($super, htmlFragment) {
$super(htmlFragment);
if (this.getInferredEntityName()=="events") {
this.renderedCount = $("tr", this.container).length - 1;
}
$.each( $('.simpleResultsTable td'), function(index, value) {
$(this).attr('data-value', $(this).text() );
});
}
});
}
This code will add the value of the field to the table cell which allows you to write CSS that matches the table such that you can stylize it. Your table cells will look like the following and will contain an attribute named "data-value" which allows you to write CSS selectors to match and stylize table cells:
td class="d" field="ScanStatus" data-value="Not up to date">Not up to date
Step two: define CSS
Next, make the CSS selectors in $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.css. Something like:
.SimpleResultsTable tr td.d[field="title"][data-value="Not up to date"]{
font-weight: bold;
background-color: #C42323;
color: white;
}
I am using this technique in an application I am writing right now and it works well. See http://lukemurphey.net/projects/splunk-website-monitoring/wiki for a screenshot.
Thank you
below are my scipt, css, xml file i am not able to load the color in rows.
Please help me in this...
testing.css
.SimpleResultsTable tr td.d[field="log_subtype"][data-value="virus"]{
font-weight: bold;
background-color: #C42323;
color: white;
}
testing.js
if( Splunk.Module.SimpleResultsTable ){
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
renderResults: function($super, htmlFragment) {
$super(htmlFragment);
if (this.getInferredEntityName()=="testing") {
this.renderedCount = $("tr", this.container).length - 1;
}
$.each( $('.simpleResultsTable td'), function(index, value) {
$(this).attr('data-value', $(this).text() );
});
}
});
}
xml:
<dashboard script="testing.js" stylesheet="testing.css">
<label>testing</label>
<row>
<panel>
<table id="testing">
<search>
<query>source="/tmp/tests.csv" host="10.0.255.247" sourcetype="csv"| fillnull value=NULL | table log_subtype,device_id,eventSignature</query>
<earliest></earliest>
<latest></latest>
</search>
</table>
</panel>
</row>
</dashboard>
I have the same problem.
How can we add colors to cells by using sideview utils? I don't want to add any script in application.js. I want to write all the functionality in advanced xml. How can I do this?
As I posted above, set the Table's CSS attributes accordingly. You can view a large example here: http://answers.splunk.com/answers/132524/custom-heatmap-logic-in-advanced-xml
You can do this with application.js (if you dashboards are bundled in a separate app). The nice thing about this approach is that it works in simple XML.
Step one: update application.js
First, add the following to $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.js:
if( Splunk.Module.SimpleResultsTable ){
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
renderResults: function($super, htmlFragment) {
$super(htmlFragment);
if (this.getInferredEntityName()=="events") {
this.renderedCount = $("tr", this.container).length - 1;
}
$.each( $('.simpleResultsTable td'), function(index, value) {
$(this).attr('data-value', $(this).text() );
});
}
});
}
This code will add the value of the field to the table cell which allows you to write CSS that matches the table such that you can stylize it. Your table cells will look like the following and will contain an attribute named "data-value" which allows you to write CSS selectors to match and stylize table cells:
td class="d" field="ScanStatus" data-value="Not up to date">Not up to date
Step two: define CSS
Next, make the CSS selectors in $SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.css. Something like:
.SimpleResultsTable tr td.d[field="title"][data-value="Not up to date"]{
font-weight: bold;
background-color: #C42323;
color: white;
}
I am using this technique in an application I am writing right now and it works well. See http://lukemurphey.net/projects/splunk-website-monitoring/wiki for a screenshot.
Hello,
Thank you. your approach is very simple and easy to understand. Although I am facing some trouble here.
I too want to achieve same result as you defined here. I followed below steps.
1- created an App.
2- Updated the .js and .css files in /appserver/static/ folder for my app.
Still I am not able to get the result. I have provided the search & code if you would be kind to look.
search:
host=XXXXX | eval state=case(Event_code=0,"passed",Event_code!=0,"failed") | table host _time state
Still the table cell is white , there is no color, I don't know what I am missing. Can you please tell me? I need to submit my work and I am hitting deal lock every time.
Thank you for you time.
What version of Splunk are you using?
Hello,
One doubt:
in this line of code:
td class="d" field="ScanStatus" data-value="Not up to date">Not up to date
do you mean to say that I can see code like this when I open XML source code of my dashboard? As I didn't find any. It might be possible that I missed this step somewhere? just wanted to let you know.
Thanks!
Hello,
Version is 6.2
Thanks
Version: 6.2
@ericrobinson: yeah, you use wildcard in CSS. For example, div[class*='foo'] will match foobar, foobarquix, etc..
This works great.. Question though, any idea how to wildcard the data-value to match multiple values, or any values?
Neat trick..
Thanks for the details Murphey, it works fine now !
Using a Sideview Utils Table module, you can set rowStyle to background-color: $row.fields.color$
and let your search results decide the color by themselves, then set hiddenFields to color
to avoid confusing the viewer.