Dashboards & Visualizations

How to add icons for the multiple fields in splunk table

Nadhiyaa
Path Finder

I have multiple columns in my table .Fields having values either "Yes" or "No". Yes will be displayed as check-circle icon and No will be displayed as x-circle icon.Whats the missing thing in the below js.

Eg. Wireless and VSP are the fields .Below is the js .

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {

    No: 'x-circle',
    Yes: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        // Only use the cell renderer for the range field
        return cell.field === 'Wireless';

    },
    render: function($td, cell) {
        var icon = 'question';
        // Fetch the icon for the value
        if (ICONS.hasOwnProperty(cell.value)) {
            icon = ICONS[cell.value];
        }
        // Create the icon element and add it to the table cell
        $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- Wireless %>" title="<%- Wireless %>"></i>', {
            icon: icon,
            Wireless: cell.value
        }));
    }
});

var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the range field

        return cell.field === 'VSP';
    },
    render: function($td, cell) {
        var icon = 'question';
        // Fetch the icon for the value
        if (ICONS.hasOwnProperty(cell.value)) {
            icon = ICONS[cell.value];
        }
        // Create the icon element and add it to the table cell

$td.addClass('icon').html(_.template('', {
icon: icon,

            VSP: cell.value
        }));
    }
});

mvc.Components.get('table1').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

});

Labels (2)
Tags (1)
0 Karma
1 Solution

niketn
Legend

@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html

alt text

Following is a run anywhere dashboard example with both options

Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.

<dashboard script="table_with_icon.js">
  <label>Check Mark and Cross Using Simple XML</label>
  <init>
    <!-- Unicode Characters for Check and Cross -->
    <!-- https://emojipedia.org/heavy-check-mark/ -->
    <!-- https://emojipedia.org/cross-mark/ -->
    <set token="tokCheckGreen">✔️</set>
    <set token="tokCrossRed"></set>
  </init>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithUnicodeIcon td{
            text-align: center;
          }
        </style>
      </html>
      <table id="tableWithUnicodeIcon">
        <title>Table with Unicode Icons (Simple XML)</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None 
  [| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</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>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithJSIcon td.icon {
              text-align: center;
          }
          #tableWithJSIcon td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          #tableWithJSIcon td.icon .No {
              color: red;
          }
          #tableWithJSIcon td.icon .Yes {
              color: #006400;
          }
        </style>
      </html>
      <table id="tableWithJSIcon">
        <title>Table with JS Icon</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</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>

Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    console.log("Inside Script");
    // Translations from rangemap results to CSS class
    var ICONS = {
        No: 'x-circle',
        Yes: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Only use the cell renderer for the range field
            return _(["Wireless", "LAN", "None"]).contains(cell.field);
        },
        render: function ($td, cell) {
            var icon = 'question';
            // Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            // Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
                icon: icon,
                range: cell.value
            }));
        }
    });
    mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html

alt text

Following is a run anywhere dashboard example with both options

Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.

<dashboard script="table_with_icon.js">
  <label>Check Mark and Cross Using Simple XML</label>
  <init>
    <!-- Unicode Characters for Check and Cross -->
    <!-- https://emojipedia.org/heavy-check-mark/ -->
    <!-- https://emojipedia.org/cross-mark/ -->
    <set token="tokCheckGreen">✔️</set>
    <set token="tokCrossRed"></set>
  </init>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithUnicodeIcon td{
            text-align: center;
          }
        </style>
      </html>
      <table id="tableWithUnicodeIcon">
        <title>Table with Unicode Icons (Simple XML)</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None 
  [| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</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>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithJSIcon td.icon {
              text-align: center;
          }
          #tableWithJSIcon td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          #tableWithJSIcon td.icon .No {
              color: red;
          }
          #tableWithJSIcon td.icon .Yes {
              color: #006400;
          }
        </style>
      </html>
      <table id="tableWithJSIcon">
        <title>Table with JS Icon</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</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>

Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    console.log("Inside Script");
    // Translations from rangemap results to CSS class
    var ICONS = {
        No: 'x-circle',
        Yes: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Only use the cell renderer for the range field
            return _(["Wireless", "LAN", "None"]).contains(cell.field);
        },
        render: function ($td, cell) {
            var icon = 'question';
            // Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            // Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
                icon: icon,
                range: cell.value
            }));
        }
    });
    mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@Nadhiyaa could you please confirm whether one of above options worked for you or not?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

vnravikumar
Champion

Hi

Try this

<dashboard script="table.js">
  <label>Icon</label>
  <row>
    <html>
      <head>
        <style>
          .yes {
              background-image: url('/static/app/search/images/yes.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .no {
              background-image: url('/static/app/search/images/no.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 Wireless = "Yes,No,Yes,Yes,No" 
| makemv delim="," Wireless 
| mvexpand Wireless 
| appendcols 
    [| makeresults 
    | eval VSP = "No,No,Yes,Yes,Yes" 
    | makemv delim="," VSP 
    | mvexpand VSP ] 
| appendcols 
    [| makeresults 
    | eval Others = "1,2,3,4,5" 
    | makemv delim="," Others 
    | mvexpand Others ] 
| table Wireless,VSP,Others</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

java script:table.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 _(['Wireless','VSP']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = cell.value;
            if(value=="Yes" )
                {
                    $td.html("<div class='yes'> </div>")
                }
            else
            {
                    $td.html("<div class='no'> </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();
        });
    }

  });  

In this sample, I had placed two images yes.png and no.png under /opt/splunk/etc/apps/search/appserver/static/images/ modify it accordingly to your need.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...