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!

Building Reliable Asset and Identity Frameworks in Splunk ES

 Accurate asset and identity resolution is the backbone of security operations. Without it, alerts are ...

Cloud Monitoring Console - Unlocking Greater Visibility in SVC Usage Reporting

For Splunk Cloud customers, understanding and optimizing Splunk Virtual Compute (SVC) usage and resource ...

Automatic Discovery Part 3: Practical Use Cases

If you’ve enabled Automatic Discovery in your install of the Splunk Distribution of the OpenTelemetry ...