Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Deep Dive: Accelerate threat investigation with Splunk’s AI Assistant in Security

AI is one of the biggest topics in the market today, and for security teams, its value goes far beyond the ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Detection Engineering Office Hours: Real-World Troubleshooting & Q&A

[REGISTER HERE] This thread is for the Community Office Hours session on Detection Engineering Office Hours: ...