Dashboards & Visualizations

How can I apply custom formatting to all tables on a dashboard?

andrewtrobec
Motivator

Hello,

I was following the "Table Row Highlighting" example as part of the "Splunk 6.x Dashboard Examples" app, and I have managed to get it working for one table on my dashboard. Since there is a total of 10, I would like to extend the highlighting logic to all of them,

What is the best way for doing this?

Thank you and best regards,

Andrew

Tags (1)
0 Karma
1 Solution

niketn
Legend

@andrewtrobec, in the Table Row Highlighting example, the table ID has been used as highlight. If you give all tables in your dashboard generic names like highlight01,highlight02,...highlight10, then you can change the CSS selector to pick all such tables through [id^="highlight"]. However, Javascript mvc.Components.get() will get only one visualization at a time. Hence your JavaScript will have one section for each new table added.

While, Simple XML change would be to add generic table IDs as mentioned above (also the script, stylesheet file names, if you change them), following are the changes to JavaScript and CSS:

1) table_row_highlight_multiple.js (mvc.Components.get() call should be for each table through table ID, hence you will have 10 of the following function calls)

mvc.Components.get('highlight01').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});
mvc.Components.get('highlight02').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
}); 

....
....
mvc.Components.get('highlight10').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});

2) table_row_highlight_generic.css (CSS Selector will be for generic table ID )

/* Row Coloring */
[id^="highlight"] tr td {
    background-color: #c1ffc3 !important;
}
[id^="highlight"] tr.range-elevated td {
    background-color: #ffc57a !important;
}
[id^="highlight"] tr.range-severe td {
    background-color: #d59392 !important;
}
[id^="highlight"] .table td {
    border-top: 1px solid #fff;
}
[id^="highlight"] td.range-severe, td.range-elevated {
    font-weight: bold;
}

Other contents of JavaScript and CSS will remain the same. Modify your existing files and include the same in your Simple XML Dashboard.

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

View solution in original post

niketn
Legend

@andrewtrobec, in the Table Row Highlighting example, the table ID has been used as highlight. If you give all tables in your dashboard generic names like highlight01,highlight02,...highlight10, then you can change the CSS selector to pick all such tables through [id^="highlight"]. However, Javascript mvc.Components.get() will get only one visualization at a time. Hence your JavaScript will have one section for each new table added.

While, Simple XML change would be to add generic table IDs as mentioned above (also the script, stylesheet file names, if you change them), following are the changes to JavaScript and CSS:

1) table_row_highlight_multiple.js (mvc.Components.get() call should be for each table through table ID, hence you will have 10 of the following function calls)

mvc.Components.get('highlight01').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});
mvc.Components.get('highlight02').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
}); 

....
....
mvc.Components.get('highlight10').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});

2) table_row_highlight_generic.css (CSS Selector will be for generic table ID )

/* Row Coloring */
[id^="highlight"] tr td {
    background-color: #c1ffc3 !important;
}
[id^="highlight"] tr.range-elevated td {
    background-color: #ffc57a !important;
}
[id^="highlight"] tr.range-severe td {
    background-color: #d59392 !important;
}
[id^="highlight"] .table td {
    border-top: 1px solid #fff;
}
[id^="highlight"] td.range-severe, td.range-elevated {
    font-weight: bold;
}

Other contents of JavaScript and CSS will remain the same. Modify your existing files and include the same in your Simple XML Dashboard.

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

niketn
Legend

@andrewtrobec, please accept to mark your question as answered if it helped. 🙂

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

andrewtrobec
Motivator

Thanks for the reply. I've updated the tables as you've mentioned and have the following:

table_row_highlighting.js

mvc.Components.get('highlight01').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});

mvc.Components.get('highlight02').getVisualization(function(tableView) {
    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);
        });
    });
    // Add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());
});

table_decorations.css

[id^="highlight"] tr td {
    background-color: #c1ffc3 !important;
}

[id^="highlight"] tr.match td {
    background-color: #93ca3b !important;
}

[id^="highlight"] tr.no-match td {
    background-color: #ff0030 !important;
}

[id^="highlight"] .table td {
    border-top: 1px solid #fff;
}

[id^="highlight"] td.range-severe, td.range-elevated {
    font-weight: bold;
}

This doesn't seem to work. I understand what you're getting at, though. The generic case will catch anything that starts with the word highlight.

Shouldn't I have an * character somewhere?

0 Karma

woodcock
Esteemed Legend

Edit the source and cut/paste the XML.

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 ...