Dashboards & Visualizations

configure colours for rows in a table

yong_ly
Path Finder

I have a search which generates a table from two different lookup files (one is updated with a scheduled search) and this table basically lists a whole bunch of files and when it was last received.

What I want to do is to be able to highlight the rows/files that have not been been received over the last 3 days.. I can do the calculations and the formatting of the table but I can't figure out how to get it the colours working with CSS and .js??

Can anyone help me with this? Ideally what I'd want is to be able to create a column/field called oss_alert and have the colour of the row depending on that value..

Tags (2)
0 Karma
1 Solution

LukeMurphey
Champion

Splunk 6 makes this very easy to do in simple XML using a custom cell renderer. Below are some instructions. The examples are taken from an open source app that is on GitHub.

Step 1: Create the cell renderer

Create a cell renderer which applies the styling you want. See this example. You will need to implement the canRender function such that it returns true for the cells that you want to apply styling to. Next you will need to implement the render function to add the HTML representing the cell (along with the styling). This script ends to be placed in the directory: $SPLUNK_HOME$/etc/apps//appserver/static

Step 2: Create a script that applies the cell renderer

You will need to need to create a script which applies the cell renderer to the table. See this example. Note that you will need to know the element ID of the table you want to style. Use "view source" in your browser to find it. Generally, I name this script after the view it applies to. For example, if I was using the JavaScript to stylize a view called "site_changes" I would name the view "site_changes.js". This code needs to also reside in: $SPLUNK_HOME$/etc/apps//appserver/static

Step 3: Load the script in the view that applies the cell renderer

Finally, you will need to tell your view to refer to the script you made in the step above. To do this, just modify your view to declare a "script" attribute:

<form script="my_view.js" >...

See this example.

Step 4: reload your view

You will probably need to bounce your Splunk instance in order for it to recognize that you want the view to load JavaScript. After that, you should be able to edit your JavaScript without bouncing your Splunk install (though you may need to clear your browser cache each time you change the script).

Let me know of you need help. This is relatively easy but I may be taking a step for granted.

View solution in original post

LukeMurphey
Champion

Splunk 6 makes this very easy to do in simple XML using a custom cell renderer. Below are some instructions. The examples are taken from an open source app that is on GitHub.

Step 1: Create the cell renderer

Create a cell renderer which applies the styling you want. See this example. You will need to implement the canRender function such that it returns true for the cells that you want to apply styling to. Next you will need to implement the render function to add the HTML representing the cell (along with the styling). This script ends to be placed in the directory: $SPLUNK_HOME$/etc/apps//appserver/static

Step 2: Create a script that applies the cell renderer

You will need to need to create a script which applies the cell renderer to the table. See this example. Note that you will need to know the element ID of the table you want to style. Use "view source" in your browser to find it. Generally, I name this script after the view it applies to. For example, if I was using the JavaScript to stylize a view called "site_changes" I would name the view "site_changes.js". This code needs to also reside in: $SPLUNK_HOME$/etc/apps//appserver/static

Step 3: Load the script in the view that applies the cell renderer

Finally, you will need to tell your view to refer to the script you made in the step above. To do this, just modify your view to declare a "script" attribute:

<form script="my_view.js" >...

See this example.

Step 4: reload your view

You will probably need to bounce your Splunk instance in order for it to recognize that you want the view to load JavaScript. After that, you should be able to edit your JavaScript without bouncing your Splunk install (though you may need to clear your browser cache each time you change the script).

Let me know of you need help. This is relatively easy but I may be taking a step for granted.

yong_ly
Path Finder

I did wonder if you could have the same element ID for multiple tables or whether it would cause issues in splunk.. I was thinking more along the liens of having element_id = * for ALL tables..

0 Karma

LukeMurphey
Champion

@yong.ly: The only difficulty with using a single JS file is that you need to specify the element ID of the tables to apply the cell renderer. You could probably do this easily by specifying the element ID in your table and making it the same for ever dashboard. For example:

. Then, just tell your JS to apply the renderer to the element ID of "oss_alert_table".

0 Karma

yong_ly
Path Finder

Thanks for that Luke. Would it be possible to have a generic .js script that applies to all tables with a column of 'oss_alert'?

Just thinking that then you could just use the one .js and .css for multiple tables..

0 Karma

somesoni2
SplunkTrust
SplunkTrust

You got here what you're looking for.

0 Karma

yong_ly
Path Finder

I tried the sideview utils method but that requires going to advanced xml which seems to be discouraged on Splunk 6.

Apparently it's better to use .js and .css combination but it doesn't seem to work. I took the js from this answer:

http://answers.splunk.com/answers/83206/color-in-a-table-based-on-values

and updated my dashboard.css/application.css:

classes for severities

.SimpleResultsTable tr td.d[field="oss_alerts"][data-value="OK"] {
background-color:#0C0;
color:white;
}

I guess I'm missing something? not too familiar with CSS and .JS

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...