Summary

Redo the layout and JavaScript backing for the Admin UI dashboard page.

Review Request #10755 — Created Oct. 14, 2019 and submitted Oct. 16, 2019, 2:30 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

Commit

cc9a092...

Reviewers

Groups

reviewboard

People

Description

This replaces the old JavaScript code for the admin dashboard with a
new, simpler, and cleaner implementation built on top of our
RB.Page/RB.PageView classes. The new implementation isn't limited to
two columns of Large/Small widget sizes, but rather allows utilitizes as
many columns as can fit on the page.

The new page makes use of a modern version of Masonry, which is what we
use for laying out widgets. This version is a bit smarter with how it
handles layout and gives us better control over its layout rules.

The new layout rules may lay out widgets in a way that seems unfamiliar
when used to the old dashboard design. There's no longer a dedicated
column of smaller widgets, though that column will seem to appear
depending on the width of the window. As widgets are rewritten, they may
be adjusted to even out the sizing of widgets to help keep things more
uniform.

The dashboard no longer allows widgets to be added, deleted, or moved.
We might bring this back someday, but it would be with an entirely
different implementation. It's unlikely anyone really made use of this
in the past, though, and it's probably better to bring this back to
basics for now.

Upcoming changes will redo the implementation of widgets and widget
registration to fix issues with responsive layout and in widgets and to
make it easier to perform some rewrites of these widgets.

Testing Done

Tested the layout at various window sizes, and in mobile mode.

Files

Issues

Description	From	Last Updated
Col: 28 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 129 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 142 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 238 Expected an assignment or function call and instead saw an expression.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 239 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 392 Expected '{' and instead saw 'return'.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 481 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 493 Expected '{' and instead saw 'return'.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 570 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:05 p.m.
Col: 587 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 676 A constructor name should start with an uppercase letter.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 696 Expected an assignment or function call and instead saw an expression.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 697 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 699 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 834 Expected an assignment or function call and instead saw an expression.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 835 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 871 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 925 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 947 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 953 Expected an assignment or function call and instead saw an expression.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 954 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 964 'n' was used before it was defined.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 999 Expected an assignment or function call and instead saw an expression.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1000 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1005 'o' was used before it was defined.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1041 's' was used before it was defined.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1056 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1100 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1125 Missing semicolon.	reviewbot	Oct. 14, 2019, 4:06 p.m.
Col: 1154 Expected '===' and instead saw '=='.	reviewbot	Oct. 14, 2019, 4:06 p.m.
This should have a method comment.	david	Oct. 16, 2019, 3:57 a.m.
Needs docs for options	david	Oct. 16, 2019, 3:57 a.m.
Can we please always include non-minified versions here? That way we get usable source maps when running in devel mode.	david	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 33 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 12 'methodCall' was used before it was defined.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 46 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 12 'plainCall' was used before it was defined.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 10 'updateJQuery' was used before it was defined.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 20 Expected '!==' and instead saw '!='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 1 Missing "use strict" statement.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 40 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 16 Expected '!==' and instead saw '!='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 32 Missing semicolon.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 38 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 33 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 64 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 10 'getSize' was used before it was defined.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 22 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '!==' and instead saw '!='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 58 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 24 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 31 Expected '===' and instead saw '=='.	reviewbot	Oct. 16, 2019, 3:57 a.m.
Col: 1 Missing "use strict" statement.	reviewbot	Oct. 16, 2019, 3:57 a.m.

flake8 passed.

JSHint failed.

JSHint

```
Warning: Showing 30 of 51 failures.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 28
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 129
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 142
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 238
 Expected an assignment or function call and instead saw an expression.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 239
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 392
 Expected '{' and instead saw 'return'.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 481
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 493
 Expected '{' and instead saw 'return'.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 570
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 587
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 676
 A constructor name should start with an uppercase letter.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 696
 Expected an assignment or function call and instead saw an expression.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 697
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 699
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 834
 Expected an assignment or function call and instead saw an expression.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 835
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 871
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 925
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 947
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 953
 Expected an assignment or function call and instead saw an expression.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 954
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 964
 'n' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 999
 Expected an assignment or function call and instead saw an expression.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1000
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1005
 'o' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1041
 's' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1056
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1100
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1125
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.min.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Col: 1154
 Expected '===' and instead saw '=='.
```

reviewboard/static/rb/js/admin/models/dashboardPageModel.es6.js (Diff revision 1)
The issue has been dropped. Show all issues
```
This should have a method comment.
```
reviewboard/static/rb/js/admin/views/supportBannerView.es6.js (Diff revision 1)
The issue has been dropped. Show all issues
```
Needs docs for options
```

reviewboard/staticbundles.py (Diff revision 1)

The issue has been dropped. Show all issues

Can we please always include non-minified versions here? That way we get usable source maps when running in devel mode.

Change Summary:


Added missing docs.
Replaced the Masonry JavaScript file with a non-minified copy.

Commit:

d8cb2222a92849930d7c775b635c4b06d494bde8

fb182ed4bc3f65b07f85f37af53ca93415600277

Diff:

Revision 2 (+162 -492)

Show changes

	reviewboard/staticbundles.py
	reviewboard/admin/urls.py
	reviewboard/admin/views.py
	reviewboard/static/lib/js/jquery.masonry.js
	reviewboard/static/lib/js/flot/excanvas.min.js
	reviewboard/static/rb/css/ui/admin/widgets.less
	reviewboard/static/rb/images/admin/activity-graph-widget.png
	reviewboard/static/rb/images/admin/database-stats-widget.png
	16 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Change Summary:

Actually added the masonry-4.2.2.js file.

Commit:

fb182ed4bc3f65b07f85f37af53ca93415600277

cc9a092cfbc295600dd910c458087e485b11b445

Diff:

Revision 3 (+2666 -492)

Show changes

	reviewboard/staticbundles.py
	reviewboard/admin/urls.py
	reviewboard/admin/views.py
	reviewboard/static/lib/js/jquery.masonry.js
	reviewboard/static/lib/js/masonry-4.2.2.js
	reviewboard/static/lib/js/flot/excanvas.min.js
	reviewboard/static/rb/css/ui/admin/widgets.less
	reviewboard/static/rb/images/admin/activity-graph-widget.png
	17 more

Checks run (1 failed, 1 succeeded)

flake8 passed.

JSHint failed.

JSHint

```
Warning: Showing 30 of 51 failures.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 33
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 12
 'methodCall' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 46
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 12
 'plainCall' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 10
 'updateJQuery' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 20
 Expected '!==' and instead saw '!='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 1
 Missing "use strict" statement.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 40
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 16
 Expected '!==' and instead saw '!='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 32
 Missing semicolon.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 38
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 33
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 64
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 10
 'getSize' was used before it was defined.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 22
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '!==' and instead saw '!='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 58
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 24
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 31
 Expected '===' and instead saw '=='.
```
reviewboard/static/lib/js/masonry-4.2.2.js (Diff revision 3)
The issue has been dropped. Show all issues
```
Col: 1
 Missing "use strict" statement.
```

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-4.0.x (1ab07ef)