All Apps and Add-ons

Splunk 6.x Dashboard Examples: How to add icons to my table of search results based on the values?

Communicator

Hi.

I have a table I have filled with search results, and I want to add some icons to it based on the values. I have tried to use the Splunk 6.x Dashboard Examples app for table_icons_inline , but I get no visualizations. My search is structured differently than the one in the examples, so I don't know if that's part of the issue. In the example app, the search just runs a stats command once. In my search, I run stats once as well, and 10 other eval commands on top of that. The one part I'm really interested in visualizing is a time delta for huge numbers, it looks like this:

eval time_delta=tostring(epochTimeA - epochTimeB, "duration")

Every time I try to read a tutorial on this, it feels like I get lost as the tutorial will branch in some direction to make my search a certain way, but I've already got my search parameters down.

Thanks for any help

0 Karma
1 Solution

SplunkTrust
SplunkTrust

You have to amend the JS and xml file according to your requirements.
By default :
A. The visualization assumes that your field name is count. If your field name is different, then either change the field name to count or change the table_icons_inline.js to adjust the field name as below

        canRender: function(cell) {
            return cell.field === 'count';
        },

B. The visualization assumes that your table id is table1. Ether change the table id to table1 or change the files custom_table_icon_set_inline(LINE 6) and table_icons_inline.js(line 34) to adjust the table id as below.

table_icons_inline.js

 mvc.Components.get('table1').getVisualization(function(tableView){

custom_table_icon_set_inline.xml
    <row>
        <table id="table1">
            <title>Render Icons based on rangemap result</title>

C. The visualization sets the icons based on these values

            if(count > 3000) {
                icon = 'alert-circle';
            } else if(count > 1000) {
                icon = 'alert';
            } else {
                icon = 'check';
            }

If you have another range the table_icons_inline.js (line 18) to accommodate your changes.

Once all changes are done, copy the js and css files to $SPLUNK_HOME/etc/apps//appserver/static and refer it in your xml () and refresh your web or restart splunk web to take effect the changes.

Hope this helps to some extent.

View solution in original post

SplunkTrust
SplunkTrust

You have to amend the JS and xml file according to your requirements.
By default :
A. The visualization assumes that your field name is count. If your field name is different, then either change the field name to count or change the table_icons_inline.js to adjust the field name as below

        canRender: function(cell) {
            return cell.field === 'count';
        },

B. The visualization assumes that your table id is table1. Ether change the table id to table1 or change the files custom_table_icon_set_inline(LINE 6) and table_icons_inline.js(line 34) to adjust the table id as below.

table_icons_inline.js

 mvc.Components.get('table1').getVisualization(function(tableView){

custom_table_icon_set_inline.xml
    <row>
        <table id="table1">
            <title>Render Icons based on rangemap result</title>

C. The visualization sets the icons based on these values

            if(count > 3000) {
                icon = 'alert-circle';
            } else if(count > 1000) {
                icon = 'alert';
            } else {
                icon = 'check';
            }

If you have another range the table_icons_inline.js (line 18) to accommodate your changes.

Once all changes are done, copy the js and css files to $SPLUNK_HOME/etc/apps//appserver/static and refer it in your xml () and refresh your web or restart splunk web to take effect the changes.

Hope this helps to some extent.

View solution in original post

Communicator

Thanks for your reply to my question, renjith.nair. I was giving up hope on anyone answering it!

I can actually modify the *.js files for the dashboards examples app and see those changes take effect. When I try to do the same modifications to the files in my own dashboard, the changes don't seem to take effect. Is there a difference between the dashboards examples app and the Search app (the one I save my dashboards in)?

Do I need to configure it a certain way, or make my own custom app?

Thanks

0 Karma

SplunkTrust
SplunkTrust

There are no difference. Just make sure that those files are in etc/apps/search/appserver/static. You can also refer the files from other app

. . .

0 Karma