Uploaded image for project: 'Samza'
  1. Samza
  2. SAMZA-32

Update Samza AM dashboard look and feel

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 0.6.0
    • Fix Version/s: 0.8.0
    • Component/s: yarn
    • Labels:

      Description

      We should update Samza's YARN AM look & feel to match the branding/CSS on the website. This includes:

      • White background, black font, blue accent color and link color (#1B91E0)
      • Samza logo (font-family: 'Ropa Sans', sans-serif; color: white; background-color: rgb(255, 0, 0);)
      • Grey-ish bar on top (background-color: #F5F4F0;) with Samza logo embedded in upper left.
      • Helvetica body font
      • Font awesome for icons (color: #d3d2d0;)

      We should also take a look at making the AM layout a little more intuitive. Maybe it makes sense to add separate pages, or a better layout?

      1. SAMZA-32.1.patch
        1.24 MB
        David Chen
      2. SAMZA-32.2.patch
        2 kB
        David Chen
      3. SAMZA-32.3.patch
        53 kB
        David Chen
      4. SAMZA-32.4.patch
        1022 kB
        David Chen
      5. Screen Shot 2014-05-05 at 6.48.54 AM.png
        108 kB
        David Chen
      6. Screen Shot 2014-05-07 at 1.12.58 AM.png
        64 kB
        David Chen
      7. Screen Shot 2014-05-07 at 1.13.25 AM.png
        63 kB
        David Chen
      8. Screen Shot 2014-05-07 at 1.14.00 AM.png
        54 kB
        David Chen
      9. Screen Shot 2014-05-07 at 1.14.16 AM.png
        141 kB
        David Chen
      10. Screen Shot 2014-05-10 at 4.01.43 AM.png
        141 kB
        David Chen

        Issue Links

          Activity

          Hide
          davidzchen David Chen added a comment -

          Excellent. Thanks!

          Show
          davidzchen David Chen added a comment - Excellent. Thanks!
          Hide
          criccomini Chris Riccomini added a comment -

          Merged and committed.

          Show
          criccomini Chris Riccomini added a comment - Merged and committed.
          Hide
          criccomini Chris Riccomini added a comment -

          +1 Just applied this patch and ran it locally on hello-samza. Everything worked as expected, and the new UI looks great!

          Show
          criccomini Chris Riccomini added a comment - +1 Just applied this patch and ran it locally on hello-samza. Everything worked as expected, and the new UI looks great!
          Hide
          davidzchen David Chen added a comment -

          Sorry, my fault. I used the wrong command when generating the patch.

          The new patch should work. Let me know if you run into any problems applying it.

          Show
          davidzchen David Chen added a comment - Sorry, my fault. I used the wrong command when generating the patch. The new patch should work. Let me know if you run into any problems applying it.
          Hide
          davidzchen David Chen added a comment -

          Interesting. I will rebase on master and then post a new patch.

          Show
          davidzchen David Chen added a comment - Interesting. I will rebase on master and then post a new patch.
          Hide
          criccomini Chris Riccomini added a comment -

          I'm having some trouble applying this patch:

          $ git apply SAMZA-32.3.patch 
          error: patch failed: samza-yarn/src/main/resources/scalate/WEB-INF/views/index.scaml:125
          error: samza-yarn/src/main/resources/scalate/WEB-INF/views/index.scaml: patch does not apply
          error: samza-yarn/src/main/resources/scalate/css/ropa-sans.css: No such file or directory
          error: samza-yarn/src/main/resources/scalate/fonts/ropa-sans.woff: No such file or directory
          

          patch -p0 and patch -p1 also fail. Anything obvious that I'm doing wrong? Probably something silly that I'm missing.

          Show
          criccomini Chris Riccomini added a comment - I'm having some trouble applying this patch: $ git apply SAMZA-32.3.patch error: patch failed: samza-yarn/src/main/resources/scalate/WEB-INF/views/index.scaml:125 error: samza-yarn/src/main/resources/scalate/WEB-INF/views/index.scaml: patch does not apply error: samza-yarn/src/main/resources/scalate/css/ropa-sans.css: No such file or directory error: samza-yarn/src/main/resources/scalate/fonts/ropa-sans.woff: No such file or directory patch -p0 and patch -p1 also fail. Anything obvious that I'm doing wrong? Probably something silly that I'm missing.
          Hide
          davidzchen David Chen added a comment - - edited

          I have posted a third revision with the following changes:

          • Make the web resources self-contained by using a local copy of the Ropa Sans font
          • Add links to the container in the table of partition assignments.

          The Ropa Sans font (https://www.google.com/fonts/specimen/Ropa+Sans) and Font Awesome icon fonts (http://fortawesome.github.io/Font-Awesome/license/) are licensed under the Open Font License. According to the License page of Glyphicons (http://glyphicons.com/license/) the Bootstrap Glyphicon Halflings are under the same license as the rest of Bootstrap. The jQuery tablesorter plugin is licensed under MIT (http://tablesorter.com/docs/). From what I can tell, there should be no issues with the licenses of these resources, though we may need to add a NOTICE file for some of these resources.

          For the links to containers from partition assignments, from what I understand, state.taskPartitions is a map of task ID to a set of partitions and state.runningTasks is a map of task ID to containers. I simply used the taskId for the partition set in taskPartitions to look up the container in runningTasks.

          I think for the most part, this patch is ready to be committed. The only other consideration I have is that the license headers, or lack thereof, in some of the imported web resources may cause Apache Rat tests to fail and we would need to create exceptions for them. Are we currently running automated Rat tests for Samza?

          Show
          davidzchen David Chen added a comment - - edited I have posted a third revision with the following changes: Make the web resources self-contained by using a local copy of the Ropa Sans font Add links to the container in the table of partition assignments. The Ropa Sans font ( https://www.google.com/fonts/specimen/Ropa+Sans ) and Font Awesome icon fonts ( http://fortawesome.github.io/Font-Awesome/license/ ) are licensed under the Open Font License. According to the License page of Glyphicons ( http://glyphicons.com/license/ ) the Bootstrap Glyphicon Halflings are under the same license as the rest of Bootstrap. The jQuery tablesorter plugin is licensed under MIT ( http://tablesorter.com/docs/ ). From what I can tell, there should be no issues with the licenses of these resources, though we may need to add a NOTICE file for some of these resources. For the links to containers from partition assignments, from what I understand, state.taskPartitions is a map of task ID to a set of partitions and state.runningTasks is a map of task ID to containers. I simply used the taskId for the partition set in taskPartitions to look up the container in runningTasks . I think for the most part, this patch is ready to be committed. The only other consideration I have is that the license headers, or lack thereof, in some of the imported web resources may cause Apache Rat tests to fail and we would need to create exceptions for them. Are we currently running automated Rat tests for Samza?
          Hide
          davidzchen David Chen added a comment -

          I have made the partition assignments and config tables sortable. I have attached a new patch and updated RB.

          Show
          davidzchen David Chen added a comment - I have made the partition assignments and config tables sortable. I have attached a new patch and updated RB.
          Hide
          davidzchen David Chen added a comment - - edited

          I have ported the theme to Bootstrap 3 to make use of its more extensive collection of UI elements. The new layout now uses tabs, one for each major section of the UI. I also moved the lists of running containers and partitions into separate tables and made the table of running partitions sortable using the jQuery TableSorter plugin (http://tablesorter.com/docs/).

          I have attached some new screenshots as well as a patch for feedback.

          RB: http://reviews.apache.org/r/21146

          Show
          davidzchen David Chen added a comment - - edited I have ported the theme to Bootstrap 3 to make use of its more extensive collection of UI elements. The new layout now uses tabs, one for each major section of the UI. I also moved the lists of running containers and partitions into separate tables and made the table of running partitions sortable using the jQuery TableSorter plugin ( http://tablesorter.com/docs/ ). I have attached some new screenshots as well as a patch for feedback. RB: http://reviews.apache.org/r/21146
          Hide
          davidzchen David Chen added a comment -

          Adding a sortable table is a great idea. It is also not very difficult to do, and since my patch for this might involve significant layout changes to the AM UI, I think I will go ahead and add the sortable table as part of this patch as well.

          I also like the idea of using JS+tabs. It does not appear that we are running into issues with overall page size yet, so I think it would be fine (and simpler) to keep everything on one page and use JS+tabs.

          I noticed that the Samza website doesn't use full Bootstrap but either a subset or a custom stylesheet that contains some Bootstrap-esque classes. It might make it easier to add tabs, as well as other UI features in the future, to adapt the Samza CSS to use full Bootstrap.

          Show
          davidzchen David Chen added a comment - Adding a sortable table is a great idea. It is also not very difficult to do, and since my patch for this might involve significant layout changes to the AM UI, I think I will go ahead and add the sortable table as part of this patch as well. I also like the idea of using JS+tabs. It does not appear that we are running into issues with overall page size yet, so I think it would be fine (and simpler) to keep everything on one page and use JS+tabs. I noticed that the Samza website doesn't use full Bootstrap but either a subset or a custom stylesheet that contains some Bootstrap-esque classes. It might make it easier to add tabs, as well as other UI features in the future, to adapt the Samza CSS to use full Bootstrap.
          Hide
          criccomini Chris Riccomini added a comment -

          Woah. This is great.

          For improving the layout of the AM webapp, there are a few changes I want to make, including making the list of running containers and partitions display better.

          Jakob Homan had some thoughts on this in SAMZA-107.

          Other options I am considering include adding tabs or to split into multiple pages. I would like to run some more jobs to get a sense of how the current UI looks for jobs that are a bit more complex.

          Personally, I feel like JS+tabs would be a bit more intuitive, but I think the only real way to tell is to actually implement and see how it feels. I'm sure people will be vocal once they see what we come up with.

          Show
          criccomini Chris Riccomini added a comment - Woah. This is great. For improving the layout of the AM webapp, there are a few changes I want to make, including making the list of running containers and partitions display better. Jakob Homan had some thoughts on this in SAMZA-107 . Other options I am considering include adding tabs or to split into multiple pages. I would like to run some more jobs to get a sense of how the current UI looks for jobs that are a bit more complex. Personally, I feel like JS+tabs would be a bit more intuitive, but I think the only real way to tell is to actually implement and see how it feels. I'm sure people will be vocal once they see what we come up with.
          Hide
          davidzchen David Chen added a comment -

          I have updated the styling of the AM web UI to match that of the Samza website. The links on the side currently just jump to the corresponding sections on the page.

          For improving the layout of the AM webapp, there are a few changes I want to make, including making the list of running containers and partitions display better.

          Other options I am considering include adding tabs or to split into multiple pages. I would like to run some more jobs to get a sense of how the current UI looks for jobs that are a bit more complex.

          Show
          davidzchen David Chen added a comment - I have updated the styling of the AM web UI to match that of the Samza website. The links on the side currently just jump to the corresponding sections on the page. For improving the layout of the AM webapp, there are a few changes I want to make, including making the list of running containers and partitions display better. Other options I am considering include adding tabs or to split into multiple pages. I would like to run some more jobs to get a sense of how the current UI looks for jobs that are a bit more complex.

            People

            • Assignee:
              davidzchen David Chen
              Reporter:
              criccomini Chris Riccomini
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development