Dashboards & Visualizations

How to add icons based on a row in Splunk dashboard

vishaltaneja070
Motivator

Need to add icons based on a row in Splunk Dashboard
Like:

ICONS should be:
Down: 'alert-circle',
Unknown: 'question-circle',
Up: 'check-circle',
N/A: 'question-circle',
Warn: 'warning-sign'

Below is the dashboard sample code:

<dashboard>
  <label>Color</label>
  <row>
    <panel>
      <title>Color</title>
      <table>
        <search>
          <query>| makeresults | eval A="UP" | eval B="DOWN" | eval C="UNKNOWN" | eval D="N/A" | eval E="WARN" | eval F="UP" | fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

The number of columns can be increased.

0 Karma
1 Solution

vnravikumar
Champion

Hi

Check this

<dashboard script="icon.js">
  <label>Icon Clone</label>
  <row>
    <html>
      <head>
        <style>
          .up {
              background-image: url('/static/app/search/images/check-circle.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .down {
              background-image: url('/static/app/search/images/alert-circle.jfif') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .unknown {
              background-image: url('/static/app/search/images/question-circle.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .warn {
              background-image: url('/static/app/search/images/warn.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
        </style>
      </head>
    </html>
  </row>
  <row>
    <panel>
      <table id="sample">
        <search>
          <query>| makeresults | eval A="UP" | eval B="DOWN" | eval C="UNKNOWN" | eval D="N/A" | eval E="WARN" | eval F="UP" |eval G="DOWN"| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

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

  });  

alt text

View solution in original post

spayneort
Contributor

Emoji example:

| makeresults | eval A="UP" | eval B="DOWN" | eval C="UNKNOWN" | eval D="N/A" | eval E="WARN" | eval F="UP" | fields - _time 
| replace UP with ✅
| replace DOWN with ⛔️
| replace UNKNOWN with ❔
| replace N/A with ❔
| replace WARN with ⚠️

vnravikumar
Champion

Hi

Check this

<dashboard script="icon.js">
  <label>Icon Clone</label>
  <row>
    <html>
      <head>
        <style>
          .up {
              background-image: url('/static/app/search/images/check-circle.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .down {
              background-image: url('/static/app/search/images/alert-circle.jfif') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .unknown {
              background-image: url('/static/app/search/images/question-circle.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .warn {
              background-image: url('/static/app/search/images/warn.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
        </style>
      </head>
    </html>
  </row>
  <row>
    <panel>
      <table id="sample">
        <search>
          <query>| makeresults | eval A="UP" | eval B="DOWN" | eval C="UNKNOWN" | eval D="N/A" | eval E="WARN" | eval F="UP" |eval G="DOWN"| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

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

  });  

alt text

vishaltaneja070
Motivator

@vnravikumar

Thanks It worked!

0 Karma

darshana1990
New Member

I am using same code for one of my dashboard but i have one extra column for which I need values which a re from index. When I use above code i get all the icons but one column which has values of server name coming as blank values. can you please help me?

0 Karma

Zasadinho
Loves-to-Learn Lots

Hi, I have the same as icons  working fine but other columns which contains text not working .

I've added to .js some point but still the same. Did you resolved an issue?

} else
$td.
text(value);
}

Also it's only working for the table id="sample" so if I would like to add next table is it enough to add another var example sample1?

var sh = mvc.Components.get("sample1");
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

Zasadinho
Loves-to-Learn Lots

Ok it's working for adding another table ID and also text is showing when I've added provided above "else" but I had to do a splunk website cache by adding _bump and refresh version

 http://<your host and port>/en-US/_bump

 

0 Karma

vnravikumar
Champion

Hi

Check this app, which contains similar samples.

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

0 Karma

vishaltaneja070
Motivator

In this they have example for column based,not with row based. I need to setup using row based.

0 Karma
Get Updates on the Splunk Community!

See your relevant APM services, dashboards, and alerts in one place with the updated ...

As a Splunk Observability user, you have a lot of data you have to manage, prioritize, and troubleshoot on a ...

Index This | What goes away as soon as you talk about it?

May 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...

What's New in Splunk Observability Cloud and Splunk AppDynamics - May 2025

This month, we’re delivering several new innovations in Splunk Observability Cloud and Splunk AppDynamics ...