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

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

Are you a member of the Splunk Community?

How to add icons based on a row in Splunk dashboard

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25