-
Improvement
-
Resolution: Fixed
-
Minor
-
Jenkins ver. 1.631
build-pipeline-plugin 1.4.9
-
Powered by SuggestiMate
On 1600x1200 screens the menu plus the revision box can easily occupy ~50% of the screen. This leads to almost any useful pipeline not fitting into the pipeline box. The overflow of the pipeline elements is cut off hard by the pipeline box without any indication to the user of this occurring, unless the box is cutting right through an element making it obvious to the user that something is missing.
The onliest indication of the overflow is an horizontal scroll bar at the bottom. This scroll bar is only noticeable once one has scrolled down below the last job in the pipeline queue. Since pipeline potentially contain hundreds of runs the scroll bar is out of reach in most scenarios. Common use cases will require the user to manipulate one of the jobs at the top of the pipelines list. So to actually use UI elements the user will have to scroll all the way down, scroll his way to the correct job and then scroll all the way up again. Using arrow keys to scroll the pipeline is possible but not convenient.
To alleviate the issue I would suggest the following improvements:
- Job boxes should have a reasonable maximum width and grow to the bottom if an element needs more space than provided.
- The display of the menu should be optional, since pipelines tend to require lots of horizontal space.
- If the menu is present it should scroll with the pipeline horizontally. Currently it scrolls vertically already creating lots of negative space on the left side once it has scrolled out of the view port. Additionally it creates a large unused area on 5:4 screens when manipulating the pipeline elements.
- The horizontal scroll bar should always be visible in the viewport if it is required. The pipeline is used a lot more horizontally than vertically. Scrolling down through the entire pipeline history is a lot less common than to access the last job in the pipeline. Horizontal scrolling should thus be more prominent than it is now.
[JENKINS-31746] Build pipeline elements overflow without proper feedback
- I'm working on improvements in the UI. There is a PR in progress. By the way, this PR is waiting for feedback. You could help here.
- I sent an email to jenkins-dev mailing list asking about feedback.
- If you cannot believe there are no updates on this issue, feel free to send a PR.
Regards,
Sorry for the late reply. I was enjoying christmas holidays with my family. I checked out commit https://github.com/recena/build-pipeline-plugin/commit/94e6144d50a19a35ac46b089d8dd929446a6ef82 from https://github.com/jenkinsci/build-pipeline-plugin/pull/95/commits and build the plugin. After installing it the pipeline looks really ugly, but the side menu has indeed vanished.
Am I missing something to reproduce:
Interesting. I reverted back to a 1.49 I build myself when testing one of the prior suggestions. While it went back to normal "broken" in Chrome, the Firefox I used to test PR95 did come up with an interesting caching issue:
IMO PR 95 would work fine if the left parameter box would be allowed to use more space and if it wouldn't spill its contents when displaying long parameter strings.
noamik In advance, thanks for your feedback. It seems you only can see negative things.
By the way, Do you think it is normal parameters like Test the best parameter I could think of? Is it a real use-case?
No, as I said in my second comment, only the parameters box on the left doesn't display its data properly. The other parts are looking rough and unpolished (some alignments aren't perfect), but they adjust a lot better to the available display size.
Edit: no, the long parameter isn't a real use case of mine, the URL is though. The long string is just there to see how much work is missing, since it's easier to get displayed correctly than an URL.
noamik Could you tell me (using a screenshot with annotations) what alignments are wrong?
Sorry if my first comment was too harsh. I got just stunned by the view of the pipeline when I opened it first. I really liked your screen shot. So I had some expectations of what it would look like. When it looked totally different I was kind of disappointed for a moment. I should have waited some minutes before posting and should have better phrased my words. You have done great work to get this done. I went through each of your commits to see what has changed and read the diff.
Considering the feature request: Only the parameter box on the left is in a worse state than before.
Regarding the alignment issues:
- The "Run" button isn't in line with the other buttons anymore. If you can't reproduce this it might be caching related. I have to admit that I didn't CTRL-F5 after installing the new build and I can't see the issue on your screen shot.
- In the old versions the parameter box on the left was formatted like the parameter box on top. Parameter names and the parameters were aligned using two columns per row.
noamik Don't worry. I'm going to polish these details and the automated tests.
Your feedback would be great in this pull request. Thanks so much.
noamik I've pushed a new commit. Could you review the last status? I would like to cut a beta release of this plugin in order to receive more feedback for other real users.
Code changed in jenkins
User: Manuel Recena
Path:
CONTRIBUTING.md
pom.xml
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/main.jelly
src/main/resources/index.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/e2b39a3c6eae64a2fbd915d5e9dcd8ef8d14a237
Log:
JENKINS-31746 Initial source code modifications
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/e73665b7cfab3a8f346182424cc0d1c2991a8ac3
Log:
JENKINS-31746 Clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/7897f50d7be497327207c07ca33a5bcd40915e46
Log:
JENKINS-31746 Clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
src/main/webapp/images/application_view_list.png
src/main/webapp/images/application_xp_terminal.png
src/main/webapp/images/clock.png
http://jenkins-ci.org/commit/build-pipeline-plugin/2b84104052792f0546f3d54d45da0efb0d614040
Log:
JENKINS-31746 Removing <table> for layout
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/290e8da6e7c26935dd9db8e8be400f0874e2e234
Log:
JENKINS-31746 Removing unnecessary CSS styles
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
src/main/webapp/images/clock-small.png
http://jenkins-ci.org/commit/build-pipeline-plugin/a077cf83b4167aed716d11c2a9f5e8c8f69adc4c
Log:
JENKINS-31746 Reviewing the semantic markup
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/9aa9f59ecf88718a1d17d096ac738f0335fb41f2
Log:
JENKINS-31746 Polishing details
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/f37e6f04d5e80dd34f8b2afd459ea3deb890daf6
Log:
JENKINS-31746 More clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/webapp/css/main.css
src/main/webapp/images/application_xp_terminal.png
src/main/webapp/images/user-small.png
src/main/webapp/images/user.png
http://jenkins-ci.org/commit/build-pipeline-plugin/94e6144d50a19a35ac46b089d8dd929446a6ef82
Log:
JENKINS-31746 More clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39
Log:
JENKINS-31746 Michael Noack's comments were addressed
Hi, I build https://github.com/recena/build-pipeline-plugin/commit/a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39?w=1 and the parameter boxes on the left are now properly sized. It's so much better than the current 1.48 that I'm currently sticking with this version on our live system.
Unfortunately there are some minor things left. I made screenshots:
1) The header isn't aligned anymore.
2) The parameter box could use a minimal amount of spacing to the right. That's really just an eye-candy problem.
3) The run button is still placed a tiny bit to low compared to the other icons. Again that's just eye-candy.
4) The boxes could use less horizontal space, if the console and the run button wouldn't use their own line. They could be on the same line as the build time or the build user name. Again that's only eye-candy and maybe shouldn't even be changed in this feature request. I just noticed while testing that this element is using up valuable horizontal space and that it would fit side by side with the build time and the build user name.
On small screens:
I also checked out your later changes (up to commit 7897f50d7be497327207c07ca33a5bcd40915e46), but they broke the parameter boxes:
I don't know if you even wanted me to test these changes ...
While we are discussing this: I spoke with a colleague of mine and we both think that global scrolling would be preferred. I very much like the static parameter box on the left. But I think the jobs and the header should scroll all together with a single scroll bar. This would also prevent the scroll bar to move vertically, being out of side sometimes. Can this be done or does this break the current dom representation of the pipeline?
noamik I don't understand your last screenshot. The styles does not make sense with my changes.
If you use these kind of parameters (for example, long URLs) it is normal that the layout is broken. The space is limited
The last screenshot is from commit 7897f50d7be497327207c07ca33a5bcd40915e46. There is no long parameter breaking the design, there is simply no display of parameters at all.
Commit a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39 displays parameters perfectly fine. Just the header isn't aligned with the jobs and the parameters aren't vertically aligned, but that is nitpicking.
noamik I'm seeing parameters very long (header section). Please, refresh your CSS files. I see it in a different way.
To make sure there are no side effects I now made a special instance of jenkins. Even when loading the page in a fresh incognito window of chrome or private tab on firefox I see this behavior. Maybe I just expressed myself in an incomprehensible way due to my bad English. I made another series of screen shots and will try my best to express myself properly.
When I checkout a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39 I get the following output which is almost perfect:
With header parameters:
Without header parameters:
There are only minor issues, which I highlighted in the screen shot:
- alignment of header and job pipelines doesn't fit
- alignment of parameters is gone, it was there in 1.48 (nitpicking, I wouldn't particularly care, just mentioned for completeness)
- no space between parameter box on the left and job pipeline itself (again nitpicking, but most likely easy to fix)
- run button misplaced, if no pipeline description exist (again nitpicking, I wouldn't care, just mentioned for completeness)
When shrinking the window:
Again everything is almost perfect, but I think scrolling all pipeline elements enclosed by my highlighted lines together with the header would be preferred. That's just my opinion though and I can also live with the current solution.
#################
After testing the commit a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39 I noticed that you made more changes and checked them out as well for testing. The last change mentioned in this issue is 7897f50d7be497327207c07ca33a5bcd40915e46.
This one seems to be a step backwards. The parameter box on the left has vanished, not even the pipeline build number is existent anymore. The parameter box at the top is aligned properly now, but the contents formatting is gone. I tried with Firefox and Chrome in private tabs with clean caches but got the same result. Maybe clean-up removed some crucial formatting pieces?
Sorry for the inconvenience. I just noticed that I misinterpreted some of the automatic messages in this issue. When looking at your commits with "git log" I just noticed that commit 7897f50d7be497327207c07ca33a5bcd40915e46 is from December. For some reason I got mails about this commit after testing a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39. I should have looked at the commit date.
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildPipelineViewTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildSecurityTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/ParameterPassingTest.java
http://jenkins-ci.org/commit/build-pipeline-plugin/f0f58339879ab9406055b6581adbffc28c87cec3
Log:
JENKINS-31746 Upgraded Selenium to work with latest version of Firefox and some tests were ignored
I've released a beta version with with the current status of this issue. It is available on the Experimental Update Center.
I downloaded and build the beta version. It looks exactly the same as the version from commit a7c4c8dcdb4ba87c9ced1e95dfdf0488c5d8eb39. I guess that's intended. Will you try to fix the header alignment for the 1.50 release or should that be a separate feature request for a future version?
noamik, The PR is still opened. I have to continue working on it. I'm going to release beta versions in order to receive feedback from users.
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
http://jenkins-ci.org/commit/build-pipeline-plugin/aa08acadba5a3d176bb127f449b744847d854e47
Log:
JENKINS-31746 Unrelated change but easier to deploy
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/main.jelly
src/main/resources/index.jelly
src/main/webapp/css/main.css
src/main/webapp/images/application_view_list.png
src/main/webapp/images/clock-small.png
src/main/webapp/images/clock.png
src/main/webapp/images/user-small.png
src/main/webapp/images/user.png
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildPipelineViewTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildSecurityTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/ParameterPassingTest.java
http://jenkins-ci.org/commit/build-pipeline-plugin/e3fb57df01b30a36fc3f0d7888f834af22825b3f
Log:
Merge pull request #95 from recena/JENKINS-31746
JENKINS-31746[WiP] Improve the layout
Compare: https://github.com/jenkinsci/build-pipeline-plugin/compare/d3dd54ef56bd...e3fb57df01b3
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/main.jelly
src/main/resources/index.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/cc2055409288ed8a7d840df6a29793d140c61025
Log:
JENKINS-31746 Initial source code modifications
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/fb696a9fe5c9e11c7ac4ba0bb7f574f60dc36963
Log:
JENKINS-31746 Clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/58e4b19b19c8ca9a918bbeb3a444b59e41339493
Log:
JENKINS-31746 Clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
src/main/webapp/images/application_view_list.png
src/main/webapp/images/application_xp_terminal.png
src/main/webapp/images/clock.png
http://jenkins-ci.org/commit/build-pipeline-plugin/1b7a57c1168e3b25ac3d022a5b10ac3b3343924c
Log:
JENKINS-31746 Removing <table> for layout
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/7ca49b7551756aeff0e3e54503dd82484911b824
Log:
JENKINS-31746 Removing unnecessary CSS styles
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
src/main/webapp/images/clock-small.png
http://jenkins-ci.org/commit/build-pipeline-plugin/1dad74eb6a8a3474a4540cbce74336b5f244f129
Log:
JENKINS-31746 Reviewing the semantic markup
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/1154e83b5b34f1347bf5d7d4b80ae1b7927c06ba
Log:
JENKINS-31746 Polishing details
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/973ddcd928b7f1da4f150058bcb6f26a5efecdaf
Log:
JENKINS-31746 More clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/webapp/css/main.css
src/main/webapp/images/application_xp_terminal.png
src/main/webapp/images/user-small.png
src/main/webapp/images/user.png
http://jenkins-ci.org/commit/build-pipeline-plugin/3e5708a16099c5b3eb1a1b75721ed987b329ddd2
Log:
JENKINS-31746 More clean up
Code changed in jenkins
User: Manuel Recena
Path:
src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
src/main/webapp/css/main.css
http://jenkins-ci.org/commit/build-pipeline-plugin/edead7096cd6a6240de301bf55a47f52d77c34c7
Log:
JENKINS-31746 Michael Noack's comments were addressed
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildPipelineViewTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/BuildSecurityTest.java
src/test/java/au/com/centrumsystems/hudson/plugin/buildpipeline/functionaltest/ParameterPassingTest.java
http://jenkins-ci.org/commit/build-pipeline-plugin/c33c9ff53022c7bffa451b23a432be927f4cd68f
Log:
JENKINS-31746 Upgraded Selenium to work with latest version of Firefox and some tests were ignored
Code changed in jenkins
User: Manuel Recena
Path:
pom.xml
http://jenkins-ci.org/commit/build-pipeline-plugin/e565de51cbb5aae7b67ab962c51db177f8b1a6b0
Log:
JENKINS-31746 Improve the layout
+1
Seeing this with build pipeline plugin 1.4.9 and Jenkins 1.609.2.
Can't believe there are no updates on this issue, which is totally a show stopper. Gonna have to do some rollbacks to try and get back to a usable state.