Hands On: Beautify the UI of Jenkins reporter plugins

This is a developer meetup, target audience: Jenkins contributors and plugin maintainers. Presenter: Ulli Hafner. Time: 3:00PM UTC, May 25. Meetup will be held in Zoom Webinar, RSVP to see the link.

In order to improve the look and feel of reporter plugins (like JUnit, Code Coverage, Static Analysis, etc.) it makes sense to use some modern JavaScript libraries and components. This session introduces a few new UI components that can be used by plugin authors to provide a rich user interface for reports in Jenkins.

The following new components are shown in the session:

• bootstrap4-api-plugin: Bootstrap is the world’s most popular front-end component library to build responsive, mobile-first projects on the web.
• data-tables-api-plugin: DataTables is a highly flexible tool, built upon the foundations of progressive enhancement, that adds a lot of features to any HTML table.
• echarts-api-plugin: ECharts is an open-sourced JavaScript visualization tool to create intuitive, interactive, and highly-customizable charts.
• font-awesome-api-plugin: Font Awesome has vector icons and social logos, it is the web’s most popular icon set and toolkit with currently more than 1,500 free icons.

Links:

• Blogpost: https://www.jenkins.io/blog/2020/03/17/ui-plugins/
• Hackfest page: https://www.jenkins.io/events/online-hackfest/2020-uiux/