835336 - overhaul ship it interface

Status: RESOLVED FIXED

(Release Engineering :: Release Automation, defect, P3)

Description

[[e-mail] (:bhearsum)]

There's so many columns in the releases.html table that there's a lot of horizontal scrolling.

Comment 1

[Massimo Gervasini [:massimo]]

Attachment: diet for releases table

This patch adds a 'hide/show' button to hide less important columns using a similar mechanism as in bug 847608, it also uses a smaller font (Open Sans - 12px). 

Are there any other columns to show/hide on the release page? 
Is the smaller font ok?

Comment 2

[[e-mail] (:bhearsum)]

Comment on attachment 723456 [details] [diff] [review]
diet for releases table

Review of attachment 723456 [details] [diff] [review]:
-----------------------------------------------------------------

I think this approach would do more harm than good, unfortunately. When we're reviewing releases we need to be looking at all of the fields, not just the basic ones. With that in mind, only narrowing the page for basic options means that the page is still too wide during normal usage.

One thing I was thinking might work here is to move incomplete releases out of the table and use a different type of view for them. Here's a very poor ASCII mock up
Incomplete Releases:

Firefox 20.0b5-build1 [ ] ready [ ] delete:
Submitted By: Massimo
etc.

Completed Releases:
<existing table goes here>

This might go well with this patch, because then completed releases could have their advanced fields hidden by default.

I'm also open to other ideas.

Comment 3

[Massimo Gervasini [:massimo]]

Attachment: diet: a mock up

this patch is a mock up: it adds tabs in submit_releases and releases.

* submit_release has a tab for each product, so there is more space for the form (this should solve bug 847608)

* releases are now organized in tabs: not ready, complete and incomplete, so there is little more space removing irrelevant fields for specific release type (e.g. status and ready for completed releases)

* each release table is now in a different file so it should not be difficult to implement your ascii mock up 

This work is not complete but I'd like to have a feedback from you before proceeding further.

Comment 4

[[e-mail] (:bhearsum)]

Comment on attachment 723960 [details] [diff] [review]
diet: a mock up

Review of attachment 723960 [details] [diff] [review]:
-----------------------------------------------------------------

feedback+ for the general idea, but the specifics need some work:
* The buttons on the index page don't line up nicely. There's no need for wrapping the first one with so much horizontal space: https://people.mozilla.com/~bhearsum/sattap/554bef73.png
* No navigation links on submit_release.html (eg, I can't get to releases.html from there).
* Update prompt wait time still wraps (probably need to give the labels more width): https://people.mozilla.com/~bhearsum/sattap/8650ccfd.png
* <h3>'s with "Fennec", "Firefox", and "Thunderbird" can be removed from submit_release.html now that we have tabs that show which form you're on.
* Overlap issues on releases.html in the navbar: https://people.mozilla.com/~bhearsum/sattap/4f2ee75f.png

I like the tabbed table for Incomplete/Completed releases, but I still think that not ready releases need to be separated out and displayed in a different format, per comment #2.

::: kickoff/templates/base.html
@@ +9,4 @@
>  <script type='text/javascript' src='{{ url_for("static", filename="suggestions.js") }}'></script>
> +<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
> +<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
> +<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

I'd rather have these imported than referenced remotely - I don't want ship it to stop functioning if jquery.com goes down.

@@ +9,5 @@
>  <script type='text/javascript' src='{{ url_for("static", filename="suggestions.js") }}'></script>
> +<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
> +<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
> +<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
> +<link rel="stylesheet" href="/resources/demos/style.css" />

This doesn't look like it's referencing anything that exists...what's it for?

Comment 5

[Massimo Gervasini [:massimo]]

Attachment: diet II

Adding some jquery magic.

* changes in submit_releases: fennec, firefox and thunderbird are in separate tabs
* changes in view releases: 
 - submitted and completed releases use dataTables
 - "not ready" releases are displayed as a list 
* this patch makes bug 847608 obsolete 

other changes:
* updated jquery library to latest version
* installed jquery smothness theme
* using Open Sans font
* added license files for jquery, datatables libraries and OpenSans font

This patch is quite big for some interface changes but it's mostly because of the updated jquery libraries.

Comment 6

[[e-mail] (:bhearsum)]

Comment on attachment 726681 [details] [diff] [review]
diet II

Review of attachment 726681 [details] [diff] [review]:
-----------------------------------------------------------------

This is looking awesome - just a few things that need fixing, noted below.

::: kickoff/static/jquery-1.9.1.js
@@ +1,1 @@
> +/*!

Need the minified version of this and other jquery libraries.

::: kickoff/templates/base.html
@@ +44,5 @@
> +<div id="radio">
> +  <input type="radio" id="submitrelease" name="radio"/>
> +  <label for="submitrelease">Submit a new release</label>
> +  <input type="radio" id="viewreleases" name="radio"/>
> +  <label for="viewreleases">View Releases</label>

It seems a little range to be using radio buttons just for simple navigation. Is there a reason you can't use normal hyperlinks? Is this a normal jquery-ui technique or something?

::: kickoff/templates/includes/releases_submitted.html
@@ +1,1 @@
> +<form id='release_readyness' action='{{ url_for('releases') }}' method='post'>

I really like the look of this section, great job!

::: kickoff/templates/releases.html
@@ +9,5 @@
> +  <h3>Submitted</h3>
> +  <div id='notready'>
> +   {% include 'includes/releases_submitted.html' %}
> +  </div><!-- submitted -->
> +  <h3>Reviewed/Complete</h3>

There's something wrong with this section. On my screen it's only 100px tall or so: https://people.mozilla.com/~bhearsum/sattap/7b6e04af.png. Ideally, this section should extend all the way to the bottom of the viewable area.

Comment 7

[Massimo Gervasini [:massimo]]

Attachment: diet III

Thanks for the review, Ben.

changes in this patch:

* using minified jquery libs
* replaced radio buttons with simple links
* fixed wrong tabs size in view releases

Comment 8

[Massimo Gervasini [:massimo]]

Attachment: diet IV

removed remaining jquery libs files

Comment 9

[[e-mail] (:bhearsum)]

Comment on attachment 727674 [details] [diff] [review]
diet IV

Review of attachment 727674 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, let's get this landed!

Comment 10

[Massimo Gervasini [:massimo]]

Attachment: diet V

added missing images/font

Comment 11

[[e-mail] (:bhearsum)]

Comment on attachment 727680 [details] [diff] [review]
diet V

Review of attachment 727680 [details] [diff] [review]:
-----------------------------------------------------------------

Hooray! Let's verify that it works in the dev env, then we'll get it pushed to production.

Comment 14

[[e-mail] (:bhearsum)]

This is in production. bug 853979 tracks a small regression.