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!

Quantify Your Splunk Investment Impact: Introducing Savings Metrics to Value Insights

Building on the foundation established in our initial Value Insights releases, we are introducing the Savings ...

Event Series: Telemetry Pipeline Management

Balancing Scale and Spend: Gaining Control Over High-Volume Metrics in Splunk Observability Cloud As ...

Kick the Tires Before You Commit: A Hands-On Tour of the Splunk Observability Cloud ...

Evaluating an enterprise observability platform usually goes like this: fill out a form, get a free trial with ...