Dashboard Panel. Statistics table: How to change font of single table string (value) in XML?

[maxdranitski]

Hi all,

I have the Statistics table on my Dashboard Panel. (I'm using it to convert it to PDF later).
Please see screenshot below.
1. Question is: How can I change the font of string (row) "Peterbilt/MD Subtotal" (I need it bold and with blue color)? I am newbee in XML in HTML. So, please give me detailed answer if possible.

2. Question is: Will these font changes affect exported PDF also, or not?

Thank you.

[stephanefotso]

hello!
Below is a code that I conceive and that does exactly what you need.It includes 3 files: table_row_highlighting.xml, table_row_highlighting.js and table_decorations.css.
you'll have to put js and css files in the folowing directory: your_app_name / appserver / static , and do not forget to restart splunk.
Here is the search i will use: (index=_internal sourcetype=* | stats count as total_count by sourcetype ) and i will change the font of the string "splunkd_access". Are you ready? lets go!

table_row_highlighting.xml

<dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
    <label>font_of_single_table_string</label>
    <row>
        <table id="highlight">
            <title>Row Coloring</title>
            <searchString>index=_internal sourcetype=*  | stats count as total_count by sourcetype</searchString>
            <earliestTime>-24h</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>
</dashboard>

table_row_highlighting.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for the sourcetype field
            return _([ 'sourcetype']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = String(cell.value);
           // Apply interpretation for number of historical searches
            if (cell.field === 'sourcetype') {
                 if (value==="splunkd_access" ){
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }
            $td.text(value.toString()).addClass('string');
        }
    });
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
            tableView.$el.find('td.range-cell').each(function() {
                $(this).parents('tr').addClass(this.className);
            });
        });
        // Force the table to re-render
        tableView.table.render();
    });
});

table_decorations.css

/* Row Coloring */

#highlight tr.range-elevated td {
    background-color: #ffc57a !important;
    font-weight: bold;
    color:blue;
}

Any question? Thanks.