Help with Table: custom column with icons using javascript?

[Shaw]

Hi guys,

I'm trying to show a table where in one colums there will be some icons based on the cell value. I used the examples provvided from the Splunk dashboard example App. 

the problem I'm experiencing is that if i load the dashboard the table is rendered with the string , but if i switch to edit mode then the table is rendered correctly with the icons.  Reloading the page will render the table without icons and anytime i go trough the edit mode the table renders with icons.

<dashboard version="1.1" stylesheet="css/test.css" script="js/test.js">
  <label>test</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| inputcsv thermal_structure.csv
| eval range = case(status=="ok","low",status=="warning","elevated",status=="no","severe")
| table zone,range</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

/* Custom Icons */
td.icon {
    text-align: center;
}
td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}
td.icon .severe {
    color: red;
}
td.icon .elevated {
    color: orangered;
}
td.icon .low {
    color: #006400;
}
/* Row Coloring */
#highlight tr td {
    background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
    background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
    background-color: #d59392 !important;
}
#highlight .table td {
    border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
    font-weight: bold;
}
.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
    color: #ef392c;
}
.icon-inline i.icon-alert {
    color: #ff9c1a;
}
.icon-inline i.icon-check {
    color: #5fff5e;
}
/* Dark Theme */
td.icon i.dark {
    text-shadow: none;
}
/* Row Coloring */
#highlight tr.dark td {
    background-color: #5BA383 !important;
}
#highlight tr.range-elevated.dark td {
    background-color: #EC9960 !important;
}
#highlight tr.range-severe.dark td {
    background-color: #AF575A !important;
}
#highlight .table .dark td {
    border-top: 1px solid #000000;
    color: #F2F4F5;
}

requirejs([
    '../app/simple_xml_examples/libs/underscore-1.6.0-umd-min',
    '../app/simple_xml_examples/theme_utils',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, themeUtils, mvc, TableView) {
    // Translations from rangemap results to CSS class
    var ICONS = {
        severe: 'alert-circle',
        elevated: 'alert',
        low: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Only use the cell renderer for the range field
            return cell.field === 'range';
        },
        render: function($td, cell) {
            var icon = 'question';
            var isDarkTheme = themeUtils.getCurrentTheme() === 'dark';
            // Fetch the icon for the value
            // eslint-disable-next-line no-prototype-builtins
            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 %> <%- isDarkTheme %>" title="<%- range %>"></i>', {
                icon: icon,
                range: cell.value,
                isDarkTheme: isDarkTheme ? 'dark' : ''
            }));
        }
    });
    mvc.Components.get('table1').getVisualization(function(tableView) {
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});

[bowesmana]

Have you bumped the version

https://splunk_server/en-GB/_bump

Also, if you edit source of a XML dashboard it will not show the icons when you save it, you need to force reload the page again.

[Shaw]

Hi!

If you mean bumping  into the cache the css and js file  i have done it multiple times.

Only way to make it work currently is to click the edit button and then close the edit interface, but any realoding of the page will make it again not working.

I also tried with differents method like instead of using icon with js and css maybe with some emoji in unicode and it work but only with the normal blank splunk theme.

My App with the dashboards are all in dark theme so i cannot go trough that way, i'm still trying to understa nd the behaviour that i'm experiencing.

The js and css are fully copied my the Splunk Dashboard Example App. The html is similar the only difference is the search that populate the table. I even tried to use rangemap or create custom column of name range but there are not significant difference.

[bowesmana]

OK, so in that case, I've never seen that behaviour. What version of Splunk and dashboard examples?

[Shaw]

Splunk enterprise 8.2.5 ( rangemap icon not working properly)

Splunk dashboard example 8.2.6 (working)

Tried also with
Splunk enterprise  9.0.3 ( rangemap icon not working properly)

Splunk dashboard example 8.2.6 ( rangemap icon not working properly)

Seems something more general and not related to the specific html,js and css