Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

Splunk Dashboard Icon

darshana1990
New Member
‎08-02-2019 07:20 AM

Hello All,

I am working on splunk dashboard with icons. I have two Columns one column is name of the server and other is status. if server is UP i have to use "green circle check" , if server is down "red cross". I am able to get icons with js file but server column is coming as blank.

0 Karma
Reply

mayurr98
Super Champion
‎08-02-2019 08:39 AM

Hi

You should install Splunk Dashboard Examples App available on Splunkbase which has sample examples for Table Icon Set inline and rangemap under table elements.

https://splunkbase.splunk.com/app/1603/

0 Karma
Reply

darshana1990
New Member
‎08-05-2019 06:48 AM

Thank you very much for your support.I have already gone though it and created dashboard but its not returning coorect output.

0 Karma
Reply

gaurav_maniar
Builder
‎08-02-2019 07:56 AM

Hi Darshana,

Share your javascript code and panel xml

0 Karma
Reply

darshana1990
New Member
‎08-05-2019 01:01 AM

below is my XML.

Icon Clone

  <html>
   <head>
     <style>
       .up {
           background-image: url('ok-icon.png') !important;
           background-repeat: no-repeat !important;
           background-size: 20px 20px; !important;
       }
       .down {
           background-image: url('') !important;
           background-repeat: no-repeat !important;
           background-size: 20px 20px; !important;
       }
       .unknown {
           background-image: url('Lol_question_mark.png') !important;
           background-repeat: no-repeat !important;
           background-size: 20px 20px; !important;
       }
       .warn {
           background-image: url('img_83533.png') !important;
           background-repeat: no-repeat !important;
           background-size: 20px 20px; !important;
       }
     </style>
   </head>
 </html>


<panel>
  <table id="sample">
    <search>
      <query>index="****" sourcetype = "****"|table server,Status</query>
      <earliest>-6d@w1</earliest>
      <latest>-1d@w6</latest>
    </search>
    <option name="count">10</option>
    <option name="drilldown">none</option>
    <option name="refresh.display">progressbar</option>
  </table>
</panel>

below is the icon.js

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

 var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
     canRender: function(cell) {
         return _(['Status']).contains(cell.field);
     },
     render: function($td, cell) {
        var value = cell.value;
         if(value=="UP" )
             {
                 $td.html("<div class='up'> </div>")
             }
         else if(value=="DOWN")
         {
                 $td.html("<div class='down'> </div>")
         }
         else if(value=="UNKNOWN" || value=="N/A")
         {
                 $td.html("<div class='unknown'> </div>")
         }
         else if(value=="WARN")
         {
                 $td.html("<div class='warn'> </div>")
         }

     }
 });

 var sh = mvc.Components.get("sample");
 if(typeof(sh)!="undefined") {
     sh.getVisualization(function(tableView) {
         // Add custom cell renderer and force re-render
         tableView.table.addCellRenderer(new CustomRangeRenderer());
     tableView.table.render();

     });
 }

});

0 Karma
Reply
Get Updates on the Splunk Community!

Community Content Calendar, November Edition

Welcome to the November edition of our Community Spotlight! Each month, we dive into the Splunk Community to ...

October Community Champions: A Shoutout to Our Contributors!

As October comes to a close, we want to take a moment to celebrate the people who make the Splunk Community ...

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

What are Community Office Hours? Community Office Hours is an interactive 60-minute Zoom series where ...