Modifying CSS to colorize Table Rows in Dashboard Panel with Event-Renderer.conf?

[muebel]

What Custom CSS config would I need in order to colorize the rows of a real-time dashboard table based on one of the values in that table?

As to IT Bullgod's answer, here is my modified app configuration.

eventtypes.conf in apps/app_name/default

[FreeSpace_Green]
search = name=mon-storage capacity>0 AND capacity<60
[FreeSpace_Yellow]
search = name=mon-storage capacity>59 AND capacity<85
[FreeSpace_Red]
search = name=mon-storage capacity>84

event_renderers.conf in apps/app_name/default

[FreeSpaceGreen]
eventtype = "FreeSpace_Green"
css_class = FreeSpaceGreen

[FreeSpaceYellow]
eventtype = "FreeSpace_Yellow"
css_class = FreeSpaceYellow

[FreeSpaceRed]
eventtype = "FreeSpace_Red"
css_class = FreeSpaceRed

application.css in apps/app_name/appserver/static

.EventsViewer .splEvent-FreeSpaceGreen .event  {
    color: green;
}

.EventsViewer .splEvent-FreeSpaceYellow .event {
    color: yellow;
}

.EventsViewer .splEvent-FreeSpaceRed .event  {
    color: red;
}

dashboard_panel.xml in apps/app_name/default/data/ui/views

<module name="HiddenSearch" layoutPanel="panel_row3_col1" group="TEST" autoRun="True">
<param name="search">eventtype="FreeSpace_Green"</param>
<param name="latest">now</param>
<param name="earliest">-15m</param>
<module name="EnablePreview">
   <param name="enable">true</param>
   <param name="display">false</param>
<module name="SimpleResultsTable">
</module>

When I view the dashboard, I see the table with the events, but they are not colorized. What am I doing wrong?

[araitz]

See here for another approach:

http://splunk-base.splunk.com/answers/13012/does-42-have-any-capabilities-to-set-a-row-color-based-o...

[muebel]

I plan on looking at this again in the near future. For the record, I haven't been able to get a workable solution, but intend to.

[IT_Bullgod]

There are 3 things you'll need to modify to "colorize" results from a search:

1- Configure eventtypes that are unique based on the field values used in your results

2- Configure event renderers that will point to the proper CSS class for each color (based on each unique eventtype)

3 - Add stanzas to the CSS which include the actual colorings

Here's the mechanics and an example for each of these:

1- Modify eventtypes.conf to include a unique eventtype for each value of the field you're evaluating.

------------eventtypes.conf-------------

[normal]
search = sourcetype="your_sourcetype" your_field="Normal"

[warning]
search = sourcetype="your_sourcetype" your_field="Warning"

[critical]
search = sourcetype="your_sourcetype" your_field="Critical"

2- Next configure event_renderers.conf to look like this:

------------event_renderers.conf-------------

[EventRendererNormal]
eventtype = normal
css_class = EventRendererNormal

[EventRendererWarning]
eventtype = warning
css_class = EventRendererWarning

[EventRendererCritical]
eventtype = critical
css_class = EventRendererCritical

3- Finally, modify the CSS classes to map actual colors to the event renderers:

------------application.css-------------
.EventsViewer .splEvent-EventRendererNormal .event {
color: green;
}

.EventsViewer .splEvent-EventRendererWarning .event {
color: yellow;
}

.EventsViewer .splEvent-EventRendererCritical .event {
color: red;
}

[southeringtonp]

You're trying to use an event renderer with SimpleResultsTable, which displays results, not events.

[muebel]

can't seem to get it to work as suggested. I included the current config I am using in the question.

[southeringtonp]

Assuming the dashboard is using SimpleResultsTable, this doesn't appear to be possible via CSS alone.

Custom Event Renderers will add a CSS class when using an EventsViewer module, but not when using SimpleResultsTable -- they render individual events, not results.

I have an open question along these lines as well:
    http://answers.splunk.com/questions/6698/heatmap-style-overlay-at-row-level

You would need to be able to add a CSS class the <tr> tag and/or each <td> tag in the row. The difficulty is in adding a new CSS class based on your "trigger" value in that row. Once you have the class tag, the CSS is easy via application.css or by assigning a stylesheet in the view definition.

The two approaches I know of are:

Use JavaScript to check each row and add a given CSS class to each cell in the row, based on the value of the cell you're using to trigger colorization.

Customize or replace the SimpleResultsTable module to add the needed CSS classes.

Neither is particularly elegant. Unless someone offers a better way, this would be a great enhancement request. I've had some (very limited) success experimenting with the second option.

---

If you are using EventViewer to view individual events, then Event Renderers may be an option.

The default CSS approach shown here never worked for me as shown, possibly because I haven't tried it with custom HTML, or possibly because of the particular CSS elements I was trying to use.

If you don't see anything happening, consider using Firebug to verify that the CSS class is really being added, and to see what the CSS heirarchy should look like. You may need to adjust CSS paths, for example:

.splEvent-FreeSpaceGreen table tbody tr td .event em {
        color: #00ff00;
}

You can use the CSS Reloader plugin to make it easier to preview CSS changes as you make them.

[southeringtonp]

My guess is that the CSS is being added, but your stylesheet isn't quite right. See edits above.

[muebel]

Thanks for update. I changed SimpleResultsTable to EventsViewer and left all other config unchanged. That isn't showing the rows to be colorized. Is there something else I could be missing?