Dashboards & Visualizations
Highlighted

How to add icons based on a row in Splunk dashboard

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
Highlighted

Re: How to add icons based on a row in Splunk dashboard

Champion

Hi

Check this app, which contains similar samples.

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

0 Karma
Highlighted

Re: How to add icons based on a row in Splunk dashboard

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

0 Karma
Highlighted

Re: How to add icons based on a row in Splunk dashboard

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

Highlighted

Re: How to add icons based on a row in Splunk dashboard

@vnravikumar

Thanks It worked!

0 Karma
Highlighted

Re: How to add icons based on a row in Splunk dashboard

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
Highlighted

Re: How to add icons based on a row in Splunk dashboard

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 ⚠️