Add task-page

Add task-page

None of the buttons work yet, will add in future CL

BUG=631047
Committed: https://github.com/luci/luci-py/commit/5e7156b6ab1254530c4e1fc0b3a470697fa9e4f7

[kjlubick, 2016-09-15 16:33:36]

kjlubick@google.com changed reviewers:
+ jcgregorio@google.com, stephana@google.com

[kjlubick, 2016-09-15 16:33:37]

Live at
https://2341-3f797a9-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...

Better demo at https://goto.google.com/oqreu with better mock data

Can change the 001 to any number up to 008 for different mock tasks.

Completed(Success)
https://screenshot.googleplex.com/4mw4dce9h6Q

Success with extra data (hidden by default)
https://screenshot.googleplex.com/v0T7cLqpRh0

Cancelled task
https://screenshot.googleplex.com/r6UnJyP64nT

Pending Task
https://screenshot.googleplex.com/P2fOrz78Cbg

Deduplicated Task
https://screenshot.googleplex.com/t6sv8dCmThO

Failed Task
https://screenshot.googleplex.com/iqVOMLzqiOJ

Expired Task
https://screenshot.googleplex.com/AkmKHwias03

Timed out Task
https://screenshot.googleplex.com/xzpH2O7x5SA

Task in which Bot Died
https://screenshot.googleplex.com/CrA7kscENwD

[stephana, 2016-09-20 13:16:35]

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
File appengine/swarming/elements/res/imp/taskpage/task-page.html (right):

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:147: <template
is="dom-if" if="[[_wasPickedUp(_result)]]">
Could these dom-if's be replaced with hidden ?

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:593: if
(result.state === "COMPLETED") {
IMO it's preferable to use use constants instead of string literals. The
interpreter will catch typos for you.

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:607: if (state ===
"CANCELED" ||state === "TIMED_OUT" || state === "EXPIRED") {
Instead of many if-statements you could have a lookup table defined as a
constant up top. Then this would be 

return STATE_TO_CLASS[this._state(result)];

[kjlubick, 2016-09-20 19:44:25]

Also added in Joe's styling comments

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
File appengine/swarming/elements/res/imp/taskpage/task-page.html (right):

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:147: <template
is="dom-if" if="[[_wasPickedUp(_result)]]">
On 2016/09/20 at 13:16:35, stephana wrote:
> Could these dom-if's be replaced with hidden ?

When I use the hidden approach, they are visible by default and then go away
when the data arrives:
https://screencast.googleplex.com/cast/NTE0NDg2MTI2MzAwMzY0OHwzY2QzZWNlMy01Zg

I think this looks strange, so I use the dom-ifs to hide them by default
instead:
https://screencast.googleplex.com/cast/NTcwNzgxMTIxNjQyNDk2MHxlYjY4NDk2Yy0wOQ

What do you think?

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:593: if
(result.state === "COMPLETED") {
On 2016/09/20 at 13:16:35, stephana wrote:
> IMO it's preferable to use use constants instead of string literals. The
interpreter will catch typos for you.

Done.  See task-behavior

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:607: if (state ===
"CANCELED" ||state === "TIMED_OUT" || state === "EXPIRED") {
On 2016/09/20 at 13:16:35, stephana wrote:
> Instead of many if-statements you could have a lookup table defined as a
constant up top. Then this would be 
> 
> return STATE_TO_CLASS[this._state(result)];

Moved to task-behavior.  I don't think the object map buys us much.

[jcgregorio, 2016-09-20 19:54:27]

On 2016/09/20 at 19:44:25, kjlubick wrote:
> Also added in Joe's styling comments
> 
>
https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
> File appengine/swarming/elements/res/imp/taskpage/task-page.html (right):
> 
>
https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
> appengine/swarming/elements/res/imp/taskpage/task-page.html:147: <template
is="dom-if" if="[[_wasPickedUp(_result)]]">
> On 2016/09/20 at 13:16:35, stephana wrote:
> > Could these dom-if's be replaced with hidden ?
> 
> When I use the hidden approach, they are visible by default and then go away
when the data arrives:
> https://screencast.googleplex.com/cast/NTE0NDg2MTI2MzAwMzY0OHwzY2QzZWNlMy01Zg
> 
> I think this looks strange, so I use the dom-ifs to hide them by default
instead:
> https://screencast.googleplex.com/cast/NTcwNzgxMTIxNjQyNDk2MHxlYjY4NDk2Yy0wOQ
> 
> What do you think?
> 
>
https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
> appengine/swarming/elements/res/imp/taskpage/task-page.html:593: if
(result.state === "COMPLETED") {
> On 2016/09/20 at 13:16:35, stephana wrote:
> > IMO it's preferable to use use constants instead of string literals. The
interpreter will catch typos for you.
> 
> Done.  See task-behavior
> 
>
https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
> appengine/swarming/elements/res/imp/taskpage/task-page.html:607: if (state ===
"CANCELED" ||state === "TIMED_OUT" || state === "EXPIRED") {
> On 2016/09/20 at 13:16:35, stephana wrote:
> > Instead of many if-statements you could have a lookup table defined as a
constant up top. Then this would be 
> > 
> > return STATE_TO_CLASS[this._state(result)];
> 
> Moved to task-behavior.  I don't think the object map buys us much.

One last UI nit: https://screenshot.googleplex.com/DVTQ7br0k91.png

The spacing above the tabs should match the spacing above the buttons.

[stephana, 2016-09-20 20:07:18]

lgtm

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
File appengine/swarming/elements/res/imp/taskpage/task-page.html (right):

https://codereview.chromium.org/2337363004/diff/60001/appengine/swarming/elem...
appengine/swarming/elements/res/imp/taskpage/task-page.html:147: <template
is="dom-if" if="[[_wasPickedUp(_result)]]">
On 2016/09/20 19:44:25, kjlubick wrote:
> On 2016/09/20 at 13:16:35, stephana wrote:
> > Could these dom-if's be replaced with hidden ?
> 
> When I use the hidden approach, they are visible by default and then go away
> when the data arrives:
> https://screencast.googleplex.com/cast/NTE0NDg2MTI2MzAwMzY0OHwzY2QzZWNlMy01Zg
> 
> I think this looks strange, so I use the dom-ifs to hide them by default
> instead:
> https://screencast.googleplex.com/cast/NTcwNzgxMTIxNjQyNDk2MHxlYjY4NDk2Yy0wOQ
> 
> What do you think?

Acknowledged.

[kjlubick, 2016-09-20 20:09:57]

On 2016/09/20 at 19:54:27, jcgregorio wrote:
> 
> One last UI nit: https://screenshot.googleplex.com/DVTQ7br0k91.png
> 
> The spacing above the tabs should match the spacing above the buttons.

Done.
https://screenshot.googleplex.com/q5mDODPB1N5

[jcgregorio, 2016-09-20 20:12:44]

On 2016/09/20 at 20:09:57, kjlubick wrote:
> On 2016/09/20 at 19:54:27, jcgregorio wrote:
> > 
> > One last UI nit: https://screenshot.googleplex.com/DVTQ7br0k91.png
> > 
> > The spacing above the tabs should match the spacing above the buttons.
> 
> Done.
> https://screenshot.googleplex.com/q5mDODPB1N5

Sorry, I should have been clearer. The space should be wider, like it was above
the buttons.

[kjlubick, 2016-09-20 20:23:04]

On 2016/09/20 at 20:12:44, jcgregorio wrote:
> On 2016/09/20 at 20:09:57, kjlubick wrote:
> > On 2016/09/20 at 19:54:27, jcgregorio wrote:
> > > 
> > > One last UI nit: https://screenshot.googleplex.com/DVTQ7br0k91.png
> > > 
> > > The spacing above the tabs should match the spacing above the buttons.
> > 
> > Done.
> > https://screenshot.googleplex.com/q5mDODPB1N5
> 
> Sorry, I should have been clearer. The space should be wider, like it was
above the buttons.

I align, I revert, I align again. 

https://screenshot.googleplex.com/bLB2fNrS8Ak

[jcgregorio, 2016-09-20 20:23:44]

lgtm

[KevinL, 2016-09-20 20:24:13]

kjlubick@chromium.org changed reviewers:
+ kjlubick@chromium.org

[KevinL, 2016-09-20 20:24:14]

lgtm

[KevinL, 2016-09-20 20:24:16]

The CQ bit was checked by kjlubick@chromium.org

[KevinL, 2016-09-20 20:24:16]

The patchset sent to the CQ was uploaded after l-g-t-m from stephana@google.com
Link to the patchset: https://codereview.chromium.org/2337363004/#ps160001
(title: "Alignment take 2")

[commit-bot: I haz the power, 2016-09-20 20:24:21]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-09-20 20:27:39]

Description was changed from

==========
Add task-page

None of the buttons work yet, will add in future CL

BUG=631047
==========

to

==========
Add task-page

None of the buttons work yet, will add in future CL

BUG=631047

Committed:
https://github.com/luci/luci-py/commit/5e7156b6ab1254530c4e1fc0b3a470697fa9e4f7
==========

[commit-bot: I haz the power, 2016-09-20 20:27:40]

Committed patchset #9 (id:160001) as
https://github.com/luci/luci-py/commit/5e7156b6ab1254530c4e1fc0b3a470697fa9e4f7