Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 1.1.4
    • Fix Version/s: 1.3.0
    • Component/s: Webfrontend
    • Labels:
      None

      Description

      When the window is not wide enough, or when the job name is too long, the "Cancel" button in the Job view of the web UI is not visible because it is the first element that gets wrapped down and gets covered by the secondary navbar (the tabs). This causes us to often need to resize the browser wider than our monitor in order to use the cancel button.

      In general, the use of Bootstrap's ".navbar-fixed-top" is problematic if the content may wrap, especially if the content's horizontal width if not known & fixed. The ".navbar-fixed-top" uses fixed positioning, and therefore any unexpected change in height will result in overlap with the rest of the normal-flow content in the page. The Bootstrap docs explain this in their "Overflowing content" callout.

      I am submitting a PR which does not attempt to resolve all issues with the fixed navbar approach, but attempts to improve the situation by using less horizontal space and by altering the layout approach of the Cancel button.

        Issue Links

          Activity

          Hide
          githubbot ASF GitHub Bot added a comment -

          GitHub user rehevkor5 opened a pull request:

          https://github.com/apache/flink/pull/3189

          FLINK-5608 [webfrontend] Cancel button stays visible in narrow windows

          • Most importantly, the Cancel button has been changed to float
            right, and will only wrap downward if pushed out by the job name
          • Also combined the job name and job id into a single horizontal
            element, reducing the overall horizontal space taken by the main
            navbar components in the job view, making the main navbar components
            less likely to wrap downward and be overlapped by the secondary navbar.
          • Compiled code has been rebuilt

          Thanks for contributing to Apache Flink. Before you open your pull request, please take the following check list into consideration.
          If your changes take all of the items into account, feel free to open your pull request. For more information and/or questions please refer to the [How To Contribute guide](http://flink.apache.org/how-to-contribute.html).
          In addition to going through the list, please provide a meaningful description of your changes.

          • [ ] General
          • The pull request references the related JIRA issue ("[FLINK-XXX] Jira title text")
          • The pull request addresses only one issue
          • Each commit in the PR has a meaningful commit message (including the JIRA id)
          • [ ] Documentation
          • Documentation has been added for new functionality
          • Old documentation affected by the pull request has been updated
          • JavaDoc for public methods has been added
          • [ ] Tests & Build
          • Functionality added by the pull request is covered by tests
          • `mvn clean verify` has been executed successfully locally or a Travis build has passed

          You can merge this pull request into a Git repository by running:

          $ git pull https://github.com/rehevkor5/flink ui_job_cancel_button_layout_issue

          Alternatively you can review and apply these changes as the patch at:

          https://github.com/apache/flink/pull/3189.patch

          To close this pull request, make a commit to your master/trunk branch
          with (at least) the following in the commit message:

          This closes #3189


          commit 33e3a14ebd3d614a6e5d4eae90f5985416e0b995
          Author: Shannon Carey <rehevkor5@gmail.com>
          Date: 2017-01-22T20:52:43Z

          FLINK-5608 [webfrontend] Cancel button stays visible in narrow windows

          • Most importantly, the Cancel button has been changed to float
            right, and will only wrap downward if pushed out by the job name
          • Also combined the job name and job id into a single horizontal
            element, reducing the overall horizontal space taken by the main
            navbar components in the job view, making the main navbar components
            less likely to wrap downward and be overlapped by the secondary navbar.
          • Compiled code has been rebuilt

          Show
          githubbot ASF GitHub Bot added a comment - GitHub user rehevkor5 opened a pull request: https://github.com/apache/flink/pull/3189 FLINK-5608 [webfrontend] Cancel button stays visible in narrow windows Most importantly, the Cancel button has been changed to float right, and will only wrap downward if pushed out by the job name Also combined the job name and job id into a single horizontal element, reducing the overall horizontal space taken by the main navbar components in the job view, making the main navbar components less likely to wrap downward and be overlapped by the secondary navbar. Compiled code has been rebuilt Thanks for contributing to Apache Flink. Before you open your pull request, please take the following check list into consideration. If your changes take all of the items into account, feel free to open your pull request. For more information and/or questions please refer to the [How To Contribute guide] ( http://flink.apache.org/how-to-contribute.html ). In addition to going through the list, please provide a meaningful description of your changes. [ ] General The pull request references the related JIRA issue (" [FLINK-XXX] Jira title text") The pull request addresses only one issue Each commit in the PR has a meaningful commit message (including the JIRA id) [ ] Documentation Documentation has been added for new functionality Old documentation affected by the pull request has been updated JavaDoc for public methods has been added [ ] Tests & Build Functionality added by the pull request is covered by tests `mvn clean verify` has been executed successfully locally or a Travis build has passed You can merge this pull request into a Git repository by running: $ git pull https://github.com/rehevkor5/flink ui_job_cancel_button_layout_issue Alternatively you can review and apply these changes as the patch at: https://github.com/apache/flink/pull/3189.patch To close this pull request, make a commit to your master/trunk branch with (at least) the following in the commit message: This closes #3189 commit 33e3a14ebd3d614a6e5d4eae90f5985416e0b995 Author: Shannon Carey <rehevkor5@gmail.com> Date: 2017-01-22T20:52:43Z FLINK-5608 [webfrontend] Cancel button stays visible in narrow windows Most importantly, the Cancel button has been changed to float right, and will only wrap downward if pushed out by the job name Also combined the job name and job id into a single horizontal element, reducing the overall horizontal space taken by the main navbar components in the job view, making the main navbar components less likely to wrap downward and be overlapped by the secondary navbar. Compiled code has been rebuilt
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user uce commented on the issue:

          https://github.com/apache/flink/pull/3189

          Thanks for the PR. I also sometimes had the bad experience while testing that the cancel button was not visible. This change definitely solves it. I tested it and it works as expected. I made some screenshots and would love some feedback from other contributors before changing this.

            1. Wide

          Current:
          ![screen shot 2017-01-24 at 09 49 24](https://cloud.githubusercontent.com/assets/1756620/22240321/fd0736da-e21a-11e6-91a7-75b7fae8c7ba.png)

          This PR:
          ![screen shot 2017-01-24 at 09 49 37](https://cloud.githubusercontent.com/assets/1756620/22240344/01fb2e44-e21b-11e6-93f3-41b9dc9c2ad1.png)

            1. Narrow

          Current:
          ![screen shot 2017-01-24 at 09 49 44](https://cloud.githubusercontent.com/assets/1756620/22240356/1d18cf4c-e21b-11e6-8db3-748cecbe1eeb.png)

          This PR:
          ![screen shot 2017-01-24 at 09 49 52](https://cloud.githubusercontent.com/assets/1756620/22240358/1fdd76f6-e21b-11e6-89c9-30aa4ba05334.png)

          Show
          githubbot ASF GitHub Bot added a comment - Github user uce commented on the issue: https://github.com/apache/flink/pull/3189 Thanks for the PR. I also sometimes had the bad experience while testing that the cancel button was not visible. This change definitely solves it. I tested it and it works as expected. I made some screenshots and would love some feedback from other contributors before changing this. Wide Current: ! [screen shot 2017-01-24 at 09 49 24] ( https://cloud.githubusercontent.com/assets/1756620/22240321/fd0736da-e21a-11e6-91a7-75b7fae8c7ba.png ) This PR: ! [screen shot 2017-01-24 at 09 49 37] ( https://cloud.githubusercontent.com/assets/1756620/22240344/01fb2e44-e21b-11e6-93f3-41b9dc9c2ad1.png ) Narrow Current: ! [screen shot 2017-01-24 at 09 49 44] ( https://cloud.githubusercontent.com/assets/1756620/22240356/1d18cf4c-e21b-11e6-8db3-748cecbe1eeb.png ) This PR: ! [screen shot 2017-01-24 at 09 49 52] ( https://cloud.githubusercontent.com/assets/1756620/22240358/1fdd76f6-e21b-11e6-89c9-30aa4ba05334.png )
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user zentol commented on the issue:

          https://github.com/apache/flink/pull/3189

          How come the state of tasks is no longer shown?

          Show
          githubbot ASF GitHub Bot added a comment - Github user zentol commented on the issue: https://github.com/apache/flink/pull/3189 How come the state of tasks is no longer shown?
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user uce commented on the issue:

          https://github.com/apache/flink/pull/3189

          Good point. @rehevkor5 is it possible to only hide the color boxes when the browser window is very narrow?

          Show
          githubbot ASF GitHub Bot added a comment - Github user uce commented on the issue: https://github.com/apache/flink/pull/3189 Good point. @rehevkor5 is it possible to only hide the color boxes when the browser window is very narrow?
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user rehevkor5 commented on the issue:

          https://github.com/apache/flink/pull/3189

          Thanks @uce that's helpful! Didn't think of putting screenshots in the PR.

          @zentol The global job state counts didn't seem like the most important thing to show when the browser is narrow, given that this view is about a particular job. So, I added these CSS classes to it ".hidden-xs .hidden-sm .hidden-md" the behavior of which is described on http://getbootstrap.com/css/#responsive-utilities I am not sure what width @uce used for the "wide" screenshots, but it probably was less than 1200px, otherwise it would show up. I can remove the ".hidden-md" class if you want it to show up in the 992px to 1200px range, too... however it does make it more likely for the other more job-specific elements (start/end, duration) to wrap & get lost. Perhaps it would be a good idea to reorder the elements? Put start/end & duration first, and overall job stats last so that it's the first one to wrap? Let me know if you have a preference.

          Show
          githubbot ASF GitHub Bot added a comment - Github user rehevkor5 commented on the issue: https://github.com/apache/flink/pull/3189 Thanks @uce that's helpful! Didn't think of putting screenshots in the PR. @zentol The global job state counts didn't seem like the most important thing to show when the browser is narrow, given that this view is about a particular job. So, I added these CSS classes to it ".hidden-xs .hidden-sm .hidden-md" the behavior of which is described on http://getbootstrap.com/css/#responsive-utilities I am not sure what width @uce used for the "wide" screenshots, but it probably was less than 1200px, otherwise it would show up. I can remove the ".hidden-md" class if you want it to show up in the 992px to 1200px range, too... however it does make it more likely for the other more job-specific elements (start/end, duration) to wrap & get lost. Perhaps it would be a good idea to reorder the elements? Put start/end & duration first, and overall job stats last so that it's the first one to wrap? Let me know if you have a preference.
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user rehevkor5 commented on the issue:

          https://github.com/apache/flink/pull/3189

          @zentol I updated the commit: the overall job status count is now displayed in medium-width (but not small or below), and I move the job status count to the right of job start/end & duration.

          Also, I applied the float-right fix to the "Stop" button, which I didn't notice before.

          You can see that the fix isn't perfect when the job name is long, but it's still better than what it was. Screenshots from Chrome 55.0.2883.95, controlling window width in the dev tool.

          1200px:
          ![1200-2](https://cloud.githubusercontent.com/assets/16899/22379830/a6b3a062-e480-11e6-8d6a-d4a40a235597.png)

          1128px (you can see the top navbar wrapping down & peeking out from behind the secondary navbar:
          ![1128-2](https://cloud.githubusercontent.com/assets/16899/22379837/ae8959bc-e480-11e6-8de8-2d9b05af1ee9.png)

          1020px (back to normal because left navbar is collapsed):
          ![1020-2](https://cloud.githubusercontent.com/assets/16899/22379866/c571038c-e480-11e6-8ab0-ce6e5eec489a.png)

          992px (wrapping again):
          ![992-2](https://cloud.githubusercontent.com/assets/16899/22379876/d2967ae2-e480-11e6-9104-ab884e04ebfa.png)

          991px:
          ![991-2](https://cloud.githubusercontent.com/assets/16899/22379898/e915e9c4-e480-11e6-8a42-8f3fb73b43d4.png)

          Show
          githubbot ASF GitHub Bot added a comment - Github user rehevkor5 commented on the issue: https://github.com/apache/flink/pull/3189 @zentol I updated the commit: the overall job status count is now displayed in medium-width (but not small or below), and I move the job status count to the right of job start/end & duration. Also, I applied the float-right fix to the "Stop" button, which I didn't notice before. You can see that the fix isn't perfect when the job name is long, but it's still better than what it was. Screenshots from Chrome 55.0.2883.95, controlling window width in the dev tool. 1200px: ! [1200-2] ( https://cloud.githubusercontent.com/assets/16899/22379830/a6b3a062-e480-11e6-8d6a-d4a40a235597.png ) 1128px (you can see the top navbar wrapping down & peeking out from behind the secondary navbar: ! [1128-2] ( https://cloud.githubusercontent.com/assets/16899/22379837/ae8959bc-e480-11e6-8de8-2d9b05af1ee9.png ) 1020px (back to normal because left navbar is collapsed): ! [1020-2] ( https://cloud.githubusercontent.com/assets/16899/22379866/c571038c-e480-11e6-8ab0-ce6e5eec489a.png ) 992px (wrapping again): ! [992-2] ( https://cloud.githubusercontent.com/assets/16899/22379876/d2967ae2-e480-11e6-9104-ab884e04ebfa.png ) 991px: ! [991-2] ( https://cloud.githubusercontent.com/assets/16899/22379898/e915e9c4-e480-11e6-8a42-8f3fb73b43d4.png )
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user uce commented on the issue:

          https://github.com/apache/flink/pull/3189

          Thanks for addressing my comments. Looks very good now. I'm going ahead and merging this.

          Show
          githubbot ASF GitHub Bot added a comment - Github user uce commented on the issue: https://github.com/apache/flink/pull/3189 Thanks for addressing my comments. Looks very good now. I'm going ahead and merging this.
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user asfgit closed the pull request at:

          https://github.com/apache/flink/pull/3189

          Show
          githubbot ASF GitHub Bot added a comment - Github user asfgit closed the pull request at: https://github.com/apache/flink/pull/3189
          Hide
          uce Ufuk Celebi added a comment -

          Fixed in 7c9c099 294c082 (master).

          Show
          uce Ufuk Celebi added a comment - Fixed in 7c9c099 294c082 (master).

            People

            • Assignee:
              rehevkor5 Shannon Carey
              Reporter:
              rehevkor5 Shannon Carey
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development