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!

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...

Edge Processor Scaling, Energy & Manufacturing Use Cases, and More New Articles on ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...