Modernise the table design #5851

janfaracik · 2021-10-24T17:04:34Z

📸 View screenshots

Dashboard

Old

New

People

Old

New

Build history

Old

New

What's changed and what's the reasoning behind it

This MR updates the design of the table component in Jenkins, offering a more modern appearance that's easier to use and is easier to work with.

This is a large change and doesn't change every table in Jenkins, much like the forms changes I want to do this in sequences to minimise impact.

As always not everything may work perfectly from the get go - I'd really appreciate any feedback/comments about it :)

This MR also adds an ionicon tag - Ionicons is a wonderful icon library that I think would look great in Jenkins - it's open source, MIT licensed and super easy to integrate with.

Why not use the icons/SVGs that are there?
I found that they're rather difficult to work with, the old SVGs (previously PNGs) look old and antiquated and using the icon component with its class size system felt odd in an age where fully scalable graphics are a thing.

svgIcon was an improvement, but it required that all SVGs have an ID (an annoyance as that may require tweaking of the original SVG file) and the SVGs were all located in one file, which made finding appropriate icons tedious.

My approach for Ionicons was to make using them super simple, simply write <u:ionicon name="terminal-outline" title="${%Console output}" /> with the name and title you want for the icon and it'll appear on the page in SVG format. No need to worry about sizes (that'd be managed by the icons container) or IDs.

NOTE: Jelly really isn't my forte, there might be an easier way of importing icons - if so please let me know and I'll make the changes :)

The eventual plan if this MR is approved/merged would be to update the rest of the tables in Jenkins to follow this format, and then to update instances of icons to use Ionicons, eventually deprecating older styles/icon sources.

Test this pull request

docker run --rm -ti -p 8080:8080 -e ID=5851 -e MERGE_WITH=master jenkins/core-pr-tester

Proposed changelog entries

Modernise the table design and add support for Ionicons.

Proposed upgrade guidelines

N/A

Submitter checklist

(If applicable) Jira issue is well described
Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change). Examples
- Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
Appropriate autotests or explanation to why this change has no tests
For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@mention

Maintainer checklist

Before the changes are marked as ready-for-merge:

There are at least 2 approvals for the pull request and no outstanding requests for change
Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
Changelog entries in the PR title and/or Proposed changelog entries are correct
Proper changelog labels are set so that the changelog can be generated automatically
If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

timja · 2021-11-04T07:33:55Z

NOTE: Jelly really isn't my forte, there might be an easier way of importing icons - if so please let me know and I'll make the changes :)

I couldn't see a need for the custom tag lib so I changed it to use the one the other icons are using, feel free to revert or we can discuss :)

d809e85 (#5851)

uhafner

The new design is fantastic. It gives Jenkins a new and impressive look and feel. Thank you very much for this incredible effort! 🚀

I have some minor non-blocking comments though:

How can other plugins benefit from the new design without much refactoring? Can we improve the adoption by simply changing existing classes rather than adding new ones?
Would it make sense to describe the required steps for plugins (to behave correctly) somewhere in the developer documentation? This would help to get a consistent user interface for the whole area of Jenkins. (This can be done in a followup PR)
How can we combine these changes with the existing Bootstrap and Datatables components so that everything is using the same styling? (Example: https://ci.jenkins.io/job/Plugins/job/warnings-ng-plugin/job/master/lastBuild/cpd)

uhafner · 2021-11-04T16:01:07Z

core/src/main/resources/lib/layout/ionicon.jelly

+        <j:arg value="${name}"/>
+        <j:arg value="${title}"/>
+    </j:invokeStatic>
+    <j:out value="${icon}" />


This looks somehow strange that we need to invoke sever code to render an image. I'm using a SVG sprite to render Font Awesome icons.

How can I add an additional class to the icon? E.g., to change color or size?

I used that approach in the font-awesome plugin:
https://github.com/jenkinsci/font-awesome-api-plugin/blob/master/src/main/resources/font-awesome/svg-icon.jelly

it's explained in the description, it's to avoid having to modify them into sprites.

E.g., to change color or size?

I assume for now it would be wrap it in a span or a div and style that

Yep! The parent element would manage the styling for the icon, although modifier classes should continue to work.

uhafner · 2021-11-04T16:02:31Z

core/src/main/java/org/jenkins/ui/icon/IconSet.java

@@ -57,6 +69,50 @@ public static void initPageVariables(JellyContext context) {
        context.setVariable("icons", icons);
    }

+    private String prependTitleIfRequired(String icon, String title) {
+        if (StringUtils.isNotBlank(title)) {
+            return "<span class=\"jenkins-visually-hidden\">" + title + "</span>" + icon;


I'm using the <title> tag for the Font Awesome icons: https://github.com/jenkinsci/font-awesome-api-plugin/blob/master/src/main/resources/font-awesome/svg-icon.jelly

uhafner · 2021-11-04T16:05:50Z

core/src/main/resources/hudson/views/JobColumn/column.jelly

@@ -26,6 +26,6 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
    <td style="${indenter.getCss(job)}">
        <!-- TODO consider using ${rootURL}/${job.url} instead (also in other column.jelly) -->
-        <a href="${jobBaseUrl}${job.shortUrl}" class='model-link inside'> <l:breakable value="${h.getRelativeDisplayNameFrom(job, itemGroup)}"/></a>
+        <a href="${jobBaseUrl}${job.shortUrl}" class='jenkins-table__link model-link inside'> <l:breakable value="${h.getRelativeDisplayNameFrom(job, itemGroup)}"/></a>


Can't we reuse the existing classes? Otherwise we need to change every plugin to get it adapted to the new style.

There aren't existing classes for a link inside of a table afaik, and styling .jenkins-table a could have unintended consequences where a developer wants a link that doesn't look like .jenkins-table__link.

uhafner · 2021-11-04T16:06:58Z

core/src/main/resources/hudson/views/LastStableColumn/column.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
    <j:choose>
      <j:when test="${lstBuild!=null}">
        ${lstBuild.timestampString}
-        - <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="model-link inside">${lstBuild.displayName}</a>
+        <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lstBuild.displayName}</a>


It does not break, yes. But it uses the old styles. Wouldn't it be better to automatically get the new design for all?

uhafner · 2021-11-04T16:09:13Z

core/src/main/resources/lib/hudson/buildHealth.jelly

        </j:if>
        <j:if test="${!empty(healthReports)}">
            <div class="jenkins-tooltip healthReportDetails">
-                <table class="bigtable stripped-odd">
+                <table class="jenkins-table">


Also here: we need to restyle all existing plugins. Isn't there a better alternative without changing the plugins by substituting the existing classes?

uhafner · 2021-11-04T16:11:42Z

war/src/main/less/abstracts/theme.less

+  // Colors
+  --green: #1c9146;


I will bring up that topic in a separate mail (see UX meeting) but wouldn't it make more sense to use some kind of semantics color names? Why is this green different from the success green?

uhafner · 2021-11-04T16:15:35Z

war/src/main/less/modules/table.less

+    -webkit-border-vertical-spacing: 0;
+  }
+
+  & > thead {


Shouldn't we then fix those tables?

uhafner · 2021-11-04T16:18:50Z

war/src/main/less/modules/table.less

+    }
+  }
+
+  &__cell__button-wrapper {


As a non UI developer I also find this new style syntax complex to understand. I have no idea how I can apply those new styles for the Bootstrap or DataTables plugins 🤷

uhafner · 2021-11-04T16:20:51Z

war/src/main/resources/images/ionicons/ellipse-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Ellipse</title><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>


How can we use the other icons? So we need to manually add them one by one? Wouldn't it make more sense to include all (like in the Font Awesome plugin)?

It'd involve copying the icons from ionicons to this folder, wanted to avoid that in this PR as it'd balloon this PR up in size.

The icons are currently part of resources folder (and not below the webapp folder). How can we replace icons in actions with these new ionicon icons?

We can't yet, it wasn't part of this feature.

likely the l:icon tag needs to be able to detect its an ionicon and load it, possibly another flag or other way

uhafner · 2021-11-04T16:34:01Z

core/src/main/resources/hudson/views/LastStableColumn/column.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
    <j:choose>
      <j:when test="${lstBuild!=null}">
        ${lstBuild.timestampString}
-        - <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="model-link inside">${lstBuild.displayName}</a>
+        <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lstBuild.displayName}</a>


Here an example from the dashboard view:

The upper part reuses the job table and looks good. The lower part uses the Bigtable CSS which seems to be unchanged. Also my newly introduced tooltips (for the tooltip PR) seem to be not automatically in synch with the new design .

timja

Going through here I can't see any blockers, some questions that would be nice to have answers to, but we can iterate all of it.

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

Bananeweizen · 2021-11-16T19:20:08Z

Hey developers. The table layout changes may be fine, I don't want to discuss that. But the font changes are simply horrible. All header text is now automatically converted to uppercase and uses a huge font spacing (I assume that is the term for empty space between the characters). The views table header suddenly needs much more space (it uses 2 lines instead of 1 for my unchanged views), and the labels in the header are much harder to read now.
Regarding usability, that's a big step backwards, sorry. What custom CSS can I set to revert the header capitalization and font spacing? After the upgrade I actually thought I'm experiencing a bug until I saw the screenshots here have the same headers.

EDIT: I've meanwhile set this in my installation to make headers readable again:

.tabBar .tab a {
text-transform: none;
letter-spacing: 0px;
}

uhafner · 2021-11-16T22:39:35Z

I'm not sure if you are looking into Jira as well: I created a bug report regarding the health-report tooltip styling:
https://issues.jenkins.io/browse/JENKINS-67154

nischu · 2021-11-18T15:31:26Z

As @Bananeweizen mentioned, the automatic capitalization is a problem. We have some views that start with capital letters and some views that start with lower-case letters. We got used to the latter being sorted after the former but now it is indistinguishable why the alphabet starts twice, like

Before: Apple Pear avocado peach

After: APPLE PEAR AVODACO PEACH

The issue appeared several times but never really got resolved so please, could you refrain from auto-capitalizing everything? The case does matter for use.

https://issues.jenkins.io/browse/JENKINS-8860
https://issues.jenkins.io/browse/JENKINS-44119
https://issues.jenkins.io/browse/JENKINS-41577
#2885

uhafner · 2021-11-18T16:42:27Z

Can you please file an issue in Jira so we can track this problem?

didiez · 2021-12-15T08:12:49Z

Is there any way to make the new UI more compact other than overriding with a custom css? IMHO The new "pills" aproach added too much vertical spacing for an operational UI.
Also, we have noticed in a quick check:

the icon sizes S/M/L are not being respected anymore (16/24/32px)
there is no "overlay panel" arrow for the build numbers on "hover"

timja · 2021-12-15T08:15:48Z

Can you create (at least one if not more) issue(s) please with more details, screenshots would be helpful, I understand some of what you mean but not all.

You'll need custom css or an improvement PR here.

didiez · 2021-12-17T13:23:26Z

Can you create (at least one if not more) issue(s) please with more details, screenshots would be helpful, I understand some of what you mean but not all.

Sure 👍

daniel-beck · 2022-01-05T14:58:33Z

Caused https://issues.jenkins.io/browse/JENKINS-67515

janfaracik · 2022-01-05T15:27:44Z

Caused https://issues.jenkins.io/browse/JENKINS-67515

Fixed here :)

KalleOlaviNiemitalo · 2022-04-08T15:44:31Z

war/src/main/less/modules/table.less

+  &__link, .sortheader {
+    display: inline-flex;
+  }


This inline-flex may have caused JENKINS-68205.

Bananeweizen · 2022-04-15T14:56:02Z

war/src/main/less/modules/table.less

+        vertical-align: middle;
+        padding: var(--table-padding) 0 var(--table-padding) var(--table-padding);
+        font-weight: 500;
+        height: 50px;


This leads to any table using a height of 50 px per row, while you probably wanted this only for the table listing the Jenkins jobs. For instance the test results table looks horrible with this huge space now.

Please file an appropriate issue labeled as regression on Jira (https://issues.jenkins.io/secure/Dashboard.jspa) including steps to reproduce and screenshots from the old and current behavior.

basil · 2022-04-20T21:11:27Z

Causes JENKINS-68303.

alecharp · 2022-05-11T13:16:26Z

Causes JENKINS-68402.

daniel-beck · 2022-06-22T14:40:11Z

core/src/main/java/org/jenkins/ui/icon/IconSet.java

@@ -57,6 +66,43 @@ public static void initPageVariables(JellyContext context) {
        context.setVariable("icons", icons);
    }

+    private static String prependTitleIfRequired(String icon, String title) {
+        if (StringUtils.isNotBlank(title)) {
+            return "<span class=\"jenkins-visually-hidden\">" + title + "</span>" + icon;


Caused SECURITY-2761

janfaracik added 30 commits September 30, 2021 22:38

Update tooltip appearance

db114db

Update style.less

2810b20

Align percentage to right, remove background

868081a

Align to right, remove last of table styling

6064b1b

Update buildHealth.jelly

3c87775

Initial

78d446e

Merge branch 'tooltips' into new-table

8fe014a

More

4bd0fb7

Update table.less

3c6a85e

TABLE 💯

6a4a0b0

Update buildHealth.jelly

f399c71

Cleaning up more and more

2f07a6e

Add button/link style

d245d7e

Temp stylings

75ed5f5

More

487dfbe

Getting there 💯

d68828f

More cleanup, getting there

94dcd67

Update table.less

2fce6bd

Add title to SVG for accessibility

f4c7a08

Cleanup

536f3fa

Restyle tabs

4593320

Restyle table

353b59b

Cleanup

118c9a0

Tighten up tabs

92318a5

Merge branch 'master' into new-table

17eed3b

Added back resizing of the table

ac32bd0

Update noJob.jelly

e68cd33

Fix a few issues

b2fd5ed

Update table.less

1975783

Merge branch 'master' into new-table

71f0b8b

uhafner approved these changes Nov 4, 2021

View reviewed changes

timja added 2 commits November 4, 2021 22:00

Merge branch 'master' into new-table

e838b68

Merge branch 'master' into new-table

523dbf4

oleg-nenashev self-requested a review November 6, 2021 20:21

Merge branch 'master' into new-table

71077e1

res0nance added the squash-merge-me Unclean or useless commit history, should be merged only with squash-merge label Nov 8, 2021

Merge branch 'master' into new-table

40d0eb6

timja approved these changes Nov 9, 2021

View reviewed changes

timja added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Nov 9, 2021

timja merged commit cee0d06 into jenkinsci:master Nov 10, 2021

janfaracik deleted the new-table branch January 5, 2022 15:08

janfaracik mentioned this pull request Feb 3, 2022

Update table styling and spacing #6248

Merged

10 tasks

daniel-beck mentioned this pull request Feb 19, 2022

Don't show status tooltip on nobuilt jobs #6287

Merged

8 tasks

uhafner mentioned this pull request Feb 20, 2022

Use new Jenkins table styling for tooltips jenkinsci/warnings-ng-plugin#1206

Merged

KalleOlaviNiemitalo reviewed Apr 8, 2022

View reviewed changes

Bananeweizen reviewed Apr 15, 2022

View reviewed changes

alecharp mentioned this pull request May 3, 2022

[JENKINS-68303] Animate button when job already in queue #6534

Merged

11 tasks

daniel-beck reviewed Jun 22, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernise the table design #5851

Modernise the table design #5851

janfaracik commented Oct 24, 2021 •

edited by MarkEWaite

Loading

timja commented Nov 4, 2021

uhafner left a comment

uhafner Nov 4, 2021

timja Nov 4, 2021 •

edited

Loading

janfaracik Nov 9, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

janfaracik Nov 9, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

uhafner Nov 4, 2021

janfaracik Nov 9, 2021

uhafner Nov 25, 2021 •

edited

Loading

timja Nov 25, 2021

uhafner Nov 4, 2021

timja left a comment •

edited

Loading

Bananeweizen commented Nov 16, 2021 •

edited

Loading

uhafner commented Nov 16, 2021

nischu commented Nov 18, 2021

uhafner commented Nov 18, 2021

didiez commented Dec 15, 2021

timja commented Dec 15, 2021

didiez commented Dec 17, 2021

daniel-beck commented Jan 5, 2022

janfaracik commented Jan 5, 2022

KalleOlaviNiemitalo Apr 8, 2022

Bananeweizen Apr 15, 2022

NotMyFault Apr 15, 2022

basil commented Apr 20, 2022

alecharp commented May 11, 2022

daniel-beck Jun 22, 2022

		@@ -0,0 +1 @@
		<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Ellipse</title><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

Modernise the table design #5851

Modernise the table design #5851

Conversation

janfaracik commented Oct 24, 2021 • edited by MarkEWaite Loading

Dashboard

Old

New

People

Old

New

Build history

Old

New

What's changed and what's the reasoning behind it

Test this pull request

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

timja commented Nov 4, 2021

uhafner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timja Nov 4, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

uhafner Nov 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timja left a comment • edited Loading

Choose a reason for hiding this comment

Bananeweizen commented Nov 16, 2021 • edited Loading

uhafner commented Nov 16, 2021

nischu commented Nov 18, 2021

uhafner commented Nov 18, 2021

didiez commented Dec 15, 2021

timja commented Dec 15, 2021

didiez commented Dec 17, 2021

daniel-beck commented Jan 5, 2022

janfaracik commented Jan 5, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

basil commented Apr 20, 2022

alecharp commented May 11, 2022

Choose a reason for hiding this comment

janfaracik commented Oct 24, 2021 •

edited by MarkEWaite

Loading

timja Nov 4, 2021 •

edited

Loading

uhafner Nov 25, 2021 •

edited

Loading

timja left a comment •

edited

Loading

Bananeweizen commented Nov 16, 2021 •

edited

Loading