Solved: How to add icons based on a row in Splunk dashboar...

vishaltaneja070 · ‎07-02-2019

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.

vnravikumar · ‎07-02-2019

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

  });

View solution in original post

spayneort · ‎07-02-2019

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 · ‎07-02-2019

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

  });

vishaltaneja070 · ‎07-02-2019

@vnravikumar

Thanks It worked!

darshana1990 · ‎08-05-2019

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?

Zasadinho · ‎11-02-2023

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

Zasadinho · ‎11-02-2023

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

vnravikumar · ‎07-02-2019

Hi

Check this app, which contains similar samples.

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

vishaltaneja070 · ‎07-02-2019

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

How to add icons based on a row in Splunk dashboard

Good Sourcetype Naming

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

Splunk App for Anomaly Detection End of Life Announcement

Are you a member of the Splunk Community?

How to add icons based on a row in Splunk dashboard

Good Sourcetype Naming

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

Splunk App for Anomaly Detection End of Life Announcement