Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-46096

Pipeline stage view rendered at bottom of page, below build history

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • None
    • Pipeline: Stage View Plugin 2.8

      The stage view was broken when we upgraded from 2.4 to 2.8. The stage view matrix with stages vs runs ended up far down, at the very bottom of the page, beneath the list of build history in the left column if it's wider than what fits on the screen.

      I guess the problem was introduced with Pipeline: Stage View Plugin v 2.5:

      2.5 (Feb 13, 2017)

      • Fix a minor CSS layout issue with stage view interfering with test results trends graphs

      This is a critical bug for this plugin considering that the main purpose of the plugin is to render this view, and it fails in doing so in a good way.

          [JENKINS-46096] Pipeline stage view rendered at bottom of page, below build history

          Sorin Sbarnea added a comment - - edited

          svanoort, I am taking ownership of this one, please help be review it, merge and making a new release. This bug is really serious, and while I do like BlueOcean UI design, the reality is that it will take another 2-3 years to become usable for medium and customers. As of today it still lacks views and folders, not to mention serious bugs. I tried to promote it to other users without any success. For startups / new small projects is quite good.

           

          Here is the https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55 — that reverts the regression, original was the wrong fix, apparently sorting a minor issue by causing a much bigger one.

          Sorin Sbarnea added a comment - - edited svanoort , I am taking ownership of this one, please help be review it, merge and making a new release. This bug is really serious, and while I do like BlueOcean UI design, the reality is that it will take another 2-3 years to become usable for medium and customers. As of today it still lacks views and folders, not to mention serious bugs. I tried to promote it to other users without any success. For startups / new small projects is quite good.   Here is the https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55 — that reverts the regression, original was the wrong fix, apparently sorting a minor issue by causing a much bigger one.

          Philip Arickx added a comment -

          Thank you ssbarnea ! I'm glad this one is finally moving. BlueOcean is at this time indeed not yet a serious alternative.

          Philip Arickx added a comment - Thank you ssbarnea ! I'm glad this one is finally moving. BlueOcean is at this time indeed not yet a serious alternative.

          Marcus Philip added a comment - - edited

          Thank you ssbarnea for picking this up. I have forgotten about it/not had time.

          I agree with Philip: Blue Ocean is not yet an alternative.

          I also agree with making it a major. I think I made it that. For a view plugin, if the view is broken for a pretty normal use case, I think that's a major issue.

          And I agree with you about this very simple solution being the right one: Just revert the change that caused this problem. That change causes more problems than it solves.

          A proper fix, that achieves the intent in https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35 without causing this major regressions is AFAICT (with my fairly limited CSS knowledge) very hard due to how the html is structured.

          svanoort Please merge https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55.

          Note that the attached screenshot is of how it did (and should) look before the regression. I did a monkey patch on my Jenkins immediately when I discovered this and I forgot to take a screen shot of how it looks when broken.

          Marcus Philip added a comment - - edited Thank you ssbarnea  for picking this up. I have forgotten about it/not had time. I agree with Philip: Blue Ocean is not yet an alternative. I also agree with making it a major. I think I made it that. For a view plugin, if the view is broken for a pretty normal use case, I think that's a major issue. And I agree with you about this very simple solution being the right one: Just revert the change that caused this problem. That change causes more problems than it solves. A proper fix, that achieves the intent in https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35  without causing this major regressions is AFAICT (with my fairly limited CSS knowledge) very hard due to how the html is structured. svanoort Please merge https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55 . Note that the attached screenshot is of how it did (and should) look before the regression. I did a monkey patch on my Jenkins immediately when I discovered this and I forgot to take a screen shot of how it looks when broken.

          Tony Hoyle added a comment -

          For something with a one line fix that causes so much pain hand patching jar files every time there's a jenkins update is getting really old now.

          Blue ocean is not an alternative.. it doesn't even have a stage view..

           

           

           

           

          Tony Hoyle added a comment - For something with a one line fix that causes so much pain hand patching jar files every time there's a jenkins update is getting really old now. Blue ocean is not an alternative.. it doesn't even have a stage view..        

          Sorin Sbarnea added a comment -

          I removed myself as I managed to move from Jenkins to Zuul. It would still be nice if somoene could fix it.

          Sorin Sbarnea added a comment - I removed myself as I managed to move from Jenkins to Zuul. It would still be nice if somoene could fix it.

          Sam Van Oort added a comment -

          tonyhoylerps marcus_phi You guys are welcome to take a stab at the proper fix for this if you like – the blocker with https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55
          is that it is simply reverting https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35 – which makes sense with wider screens now quite common.

          What needs to happen is the graphs need to be at the top until the screen is wide enough, and then they should reflow to the right – but I'm no expert at CSS and our layouts aren't trivial, so I'm not sure how to do that. If someone else can provide a solution for that goal, I'd be happy to merge and release it though.

          Sam Van Oort added a comment - tonyhoylerps marcus_phi You guys are welcome to take a stab at the proper fix for this if you like – the blocker with https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/55 is that it is simply reverting https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/35 – which makes sense with wider screens now quite common. What needs to happen is the graphs need to be at the top until the screen is wide enough, and then they should reflow to the right – but I'm no expert at CSS and our layouts aren't trivial, so I'm not sure how to do that. If someone else can provide a solution for that goal, I'd be happy to merge and release it though.

          Marcus Philip added a comment - - edited

          svanoort: I agree with the proper solution of the GUI layout. 

          But there stops our agreement. Either you do not understand the problem, or this project has very strange policies for regressions.

          1. We do have wide screen (I have a retina screen, 2560 px wide!), but if you have a pipeline larger than around 6 stages with stage names that have long words, this problem still occurs.
            See and
          2. In my projects the regression policy are: if a change cause major regressions, you revert it until it's fixed, unless this would cause even worse consequences. I think that is a sound policy. What do you think?
            • Otherwise you are encouraging people to just solve their small use case and don't test for any regressions. This change was not properly tested with realistic test data and should never have been merged. Can you please admit that.
            • I think the value of the change is small and the damage of the regression is large, so this should be an easy call.
            • Maybe you should get a second opinion on this.
          3. I tried to fix it properly, and like you, my CSS skills are limited, but I think I can say that much that there is no easy fix due to how the html of the surrounding elements are structured. You would need to change in the test results plugin and or core. So reverting this is reasonable because it's likely to never get fixed (note that it's more than a year since I opened this).

          Marcus Philip added a comment - - edited svanoort : I agree with the proper solution of the GUI layout.  But there stops our agreement. Either you do not understand the problem, or this project has very strange policies for regressions. We do have wide screen (I have a retina screen, 2560 px wide!), but if you have a pipeline larger than around 6 stages with stage names that have long words, this problem still occurs. See and In my projects the regression policy are: if a change cause major regressions, you revert it until it's fixed, unless this would cause even worse consequences. I think that is a sound policy. What do you think? Otherwise you are encouraging people to just solve their small use case and don't test for any regressions. This change was not properly tested with realistic test data and should never have been merged. Can you please admit that. I think the value of the change is small and the damage of the regression is large, so this should be an easy call. Maybe you should get a second opinion on this. I tried to fix it properly, and like you, my CSS skills are limited, but I think I can say that much that there is no easy fix due to how the html of the surrounding elements are structured. You would need to change in the test results plugin and or core. So reverting this is reasonable because it's likely to never get fixed (note that it's more than a year since I opened this).

          Alex Zeleznikov added a comment - - edited

          I've been struggling with this issue too, I've managed to get it to look batter with some CSS, although this can break easily, if the div holding the test result charts had an ID or class to target via CSS that would be batter.
          For now this has worked for me:

          div#description + div + div > div {
           display: inline-block;
           vertical-align: top; 
          }
          
          div.table-box {
              vertical-align: middle;
              float: left;
          }
          

          Alex Zeleznikov added a comment - - edited I've been struggling with this issue too, I've managed to get it to look batter with some CSS, although this can break easily, if the div holding the test result charts had an ID or class to target via CSS that would be batter. For now this has worked for me: div#description + div + div > div { display: inline-block; vertical-align: top; } div.table-box { vertical-align: middle; float : left; }

          There is still quite wasted space when you have a pipeline with lots of stages. I'm not sure if it's a problem with the stage view or the job page as a whole. It seems like it would be much nicer if the other widgets were displayed in columns rather than rows as in the screen shot in Alex Zeleznikov's reply.

           

          The attached screen shot was rendered using version 2.13 of the pipeline-stage-view-plugin.

          James Whitworth added a comment - There is still quite wasted space when you have a pipeline with lots of stages. I'm not sure if it's a problem with the stage view or the job page as a whole. It seems like it would be much nicer if the other widgets were displayed in columns rather than rows as in the screen shot in Alex Zeleznikov's reply .   The attached screen shot was rendered using version 2.13 of the pipeline-stage-view-plugin.

          since this issue probably won't get fixed any time soon, as a workaround I applied the above CSS as a custom css following this answer : https://superuser.com/questions/318912/how-can-i-override-the-css-of-a-site-in-firefox-with-usercontent-css

          my steps were:

          1. find folder for firefox profile
          2. create folder "chrome"
          3. create userContent.css (content below, adjust domain to your setup)
          4. in about:config set `toolkit.legacyUserProfileCustomizations.stylesheets ` to true
          5. restart firefox
          6. go to colleagues and gloat ("Well it works for me. Maybe there is something wrong with your machine?")

           

          my `userContent.css`:

           

          @-moz-document domain(myjenkins.mydomain.de) {
              div#description + div + div > div {
                  display: inline-block;
                  vertical-align: top; 
                 }
                 
                 div.table-box {
                     vertical-align: middle;
                     float: left;
                 }
          } 

           

          it still doesn't looks prettyy bad, but at least I don't have to scroll as far. I guess the problem is that graphs from warnings-NG plugin have a slightly different layout than other graphs.

           

          Björn Jürgens added a comment - since this issue probably won't get fixed any time soon, as a workaround I applied the above CSS as a custom css following this answer : https://superuser.com/questions/318912/how-can-i-override-the-css-of-a-site-in-firefox-with-usercontent-css my steps were: find folder for firefox profile create folder "chrome" create userContent.css (content below, adjust domain to your setup) in about:config set ` toolkit.legacyUserProfileCustomizations.stylesheets ` to true restart firefox go to colleagues and gloat ("Well it works for me. Maybe there is something wrong with your machine?")   my `userContent.css`:   @-moz-document domain(myjenkins.mydomain.de) {     div#description + div + div > div {         display: inline-block;         vertical-align: top;         }                div.table-box {            vertical-align: middle;             float : left;        } }   it still doesn't looks prettyy bad, but at least I don't have to scroll as far. I guess the problem is that graphs from warnings-NG plugin have a slightly different layout than other graphs.  

            svanoort Sam Van Oort
            marcus_phi Marcus Philip
            Votes:
            14 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated: