Icon alerts in a table for Up or Down values

[leordimalanta]

Hi splunkers,

I am currently working on a project about routers, I manage to run a search that displays the status of the router which is Up or Down.

My question is
How will I display it to my visualization if it is Up a green check icon or if it is Down a red exclamation point icon will display instead of the Values Up or Down.

I am using Splunk 6 instance..

[sideview]

If writing and maintaining a lot of Javascript and CSS code isn't your cup of tea, then you can take a look at the Table module in Sideview Utils. If you have a relatively recent version of the Sideview Utils app you can do this fairly easily and without any custom javascript or CSS. It'll only require a few extra lines in the XML itself.

The Table module has a feature called Table Embedding where you can embed other UI modules into individual tablecells. The most common use of this by far is to embed a Sideview HTML module. And here you can easily embed an HTML module into each of the cells in that column, and have those tablecells display an icon. And of course the HTML can incorporate dynamic field values so the icon can vary depending on the data in the given row.

The Sideview Utils app itself has a lot of docs and examples contained inside, and it has a whole page of docs and working examples just on the Table Embedding feature.

Moreover, hidden inside the app is a much longer view called "testcases_for_table_embedding". Although this is an internal view used for our regression testing, it does ship and it does have an example specifically where little icons get embedded into a column of a table. Here I've lifted out the entire XML for that example so you can see it, and so you can see that it really involves no custom javascript or CSS. (OK I cleaned it up very slightly. 😃

<module name="Search">
  <param name="search"><![CDATA[
    * | head 1000 | timechart count | delta count as change | search change=* change!="0" | eval rises=if(change>0,"sort_asc",if(change<0,"sort_desc","none"))
  ]]></param>

  <module name="Table">
    <module name="HTML" group="row.fields.rises">
      <param name="html"><![CDATA[
        <img src="/static/app/sideview_utils/images/arrow_$row.fields.rises$.gif">
      ]]></param>
    </module>
  </module>        
</module>

Next steps if you're interested:

-- Download the latest Sideview Utils app (3.1) from the Sideview website. It is free for internal use. http://sideviewapps.com/apps/sideview-utils
You can only get the latest app from Sideview. Don't look on Splunkbase because Splunkbase only has an ancient LGPL version.

-- Make sure to read the first couple pages of overview documentation. They will orient you and give you a good general grounding. Sideview Utils allows you to stop using almost all of the core advanced XML modules but you need those first few pages to unlearn and learn conventions and concepts as appropriate.

-- Read the full docs for the Table module, including the Table Embedding docs.

Incidentally you could also do this with the "Table Rendering" feature of the Table module, which is a different feature that allows you to give any rows and any columns (and thus any cells) dynamic CSS classes where the class string incorporates one or more field values. With this and a little CSS you could very easily make icons appear in the given cells. However on the whole I recommend Table Embedding cause it's a lot less finicky and it involves zero custom JS or CSS.

If you want to read more about the history you can read the release notes - http://sideviewapps.com/apps/sideview-utils/release-notes/
(Table was released back in version 2.2 in October 2012.)

and if you are curious about the "free internal use" licensing you can read the licensing FAQ - http://sideviewapps.com/apps/sideview-utils/licensing-faq/

[nfilippi_splunk]

You should take a look at the Splunk 6 Dashboard Examples App.
http://apps.splunk.com/app/1603/

More specifically, the example titled, "Table Icon Set (Inline)". To enable this in your app, you will need to:
- Copy the referenced js and css files into your app's /appserver/static directory
- Files are table_icons_inline.js, and table_decorations.css
- Restart splunk in order for these files to be available from splunkd
- Reference these files in your dashboard xml like so:
-
- Add an id to your table so that it can be referenced in your javascript
- Edit the javascript to reference the correct table id element, as well as the correct table field name
- Edit the javascript logic to match your status values
- Edit the javascript to set the correct cell style that you want rendered

Hope that helps!

[leordimalanta]

Thank you very much good Sir!

I will try this after trying the web framework kit!

[aelliott]

Here's more info on this.. there are some instructions http://dev.splunk.com/view/SP-CAAAEUB.. if you are using web framework.

[otman01]

Yes its a good example. But can we add another icons ????? like
icon-power, icon-battery-1, icon-closethick .... present in this page
http://api.jqueryui.com/theming/icons/

Thank you for your answer.