Re: Splunk Dashboard Icon

darshana1990 · ‎08-02-2019

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.

mayurr98 · ‎08-02-2019

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/

darshana1990 · ‎08-05-2019

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

gaurav_maniar · ‎08-02-2019

Hi Darshana,

Share your javascript code and panel xml

darshana1990 · ‎08-05-2019

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();

     });
 }

});

Splunk Dashboard Icon

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

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

Fuel Your Journey: What’s Waiting for You at the .conf26 Acceleration Station

Join the Final Session of the Data Management & Federation Bootcamp Series

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Join the Conversation