support .jenkins-table css for addSummary

[marslo]

What feature do you want to see added?

I'm trying to create a table with .jenkins-table css in build summary, by following the example in design-library/Table.

Here is the sample Jenkinsfile:

#!/usr/bin/env groovy

def table = addSummary icon: 'symbol-terminal',
                       text: '''
                               <h2>PIPELINE DETAILS</h2>
                                <table class="jenkins-table sortable jenkins-!-margin-bottom-0">
                                  <thead>
                                    <th>NAME</th>
                                    <th>STATUS</th>
                                    <th>REASON</th>
                                  </thead>
                                  <tbody>
                                  <tr>
                                    <td><a href="#" class="jenkins-table__link">Link 1</a></td>
                                    <td>Success <a href="#" class="jenkins-table__link jenkins-table__badge model-link inside">#7</a></td>
                                    <td>No Errors</td>
                                  </tr>
                                  <tr>
                                    <td><a href="#" class="jenkins-table__link">Link 2</a></td>
                                    <td>Failure</td>
                                    <td>Can't compile</td>
                                  </tr>
                                  <tr>
                                    <td><a href="#" class="jenkins-table__link">Link 3</a></td>
                                    <td>Unstable</td>
                                    <td>Test Failed</td>
                                  </tr>
                                  </tbody>
                                </table>
                             '''.stripIndent()

println table.getText()

However, seems the Jenkins trim the css from the HTML ( text: <..html..> ), and it looks as below:

When I manually added the Jenkins official css in HTML, it works ( as below )

• dark theme
  

• light theme
  

I'd like to know how to enable the official table css class="jenkins-table sortable jenkins-!-margin-bottom-0" for table content ?

---

By the way, I've noticed that the addSummary will consider the <table><thead>..</thead></table> as a separated table, and the <thead>..</thead> will be re-format into <tbody>..</tbody> :

ORIGINAL	RESULT
<table> <thead> <th>NAME</th> <th>STATUS</th> <th>REASON</th> </thead> </table>	<table>   <thead></thead> </table> <table> <tbody> <tr> <th>NAME</th> <th>STATUS</th> <th>REASON</th> </tr> </tbody> </table>

Upstream changes

No response

Are you interested in contributing this feature?

No response

[strangelookingnerd]

On first look it seems that the MarkupFormatter (I assume you are using https://github.com/jenkinsci/antisamy-markup-formatter-plugin) does remove the class attributes. I will investigate a little further to find out if and how one could change that and let you know.

[marslo]

thanks a lot @strangelookingnerd !

[strangelookingnerd]

Digging a little deeper I can confirm above assumption. One way of working around that would be to use the https://plugins.jenkins.io/custom-markup-formatter/ and explicitly allow class attributes in the formatted HTML. I did not dive too much into it, but looking at the docs it should be straight forward.

Another option would be to disable the markup formatter globally via https://plugins.jenkins.io/anything-goes-formatter/ which I would not really recommend.

The third option is to disable markup formatting in the plugin which currently is not supported and I would rather keep it that way to prevent security issues further down the road.

[jangalda-nsc]

I was able to get formatted table using bigtable class.
addSummary(id: 'my-table', text: table, cssClass: 'bigtable', icon: 'icon-clipboard')

I have Markup Formatted set to Safe HTML.
Above code requires Badge plugin version 2.6+, due to #210 issue