Add new botlist for swarming

Add new botlist for swarming

This botlist is a dynamic table.  The user can choose which columns they want to see and what to sort by, in addition to making it easier to discover what can be sorted by.

BUG=631047
Committed: https://github.com/luci/luci-py/commit/7c258a419a17da74f64ce5bf27b1f67c3ea107e5

[kjlubick, 2016-07-25 20:29:48]

Description was changed from

==========
Add new botlist for swarming

BUG=
==========

to

==========
Add new botlist for swarming

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

[kjlubick, 2016-07-28 20:08:08]

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

[kjlubick, 2016-07-28 20:08:09]

It is currently live at
https://2213-cbaf341-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...

Since the staging data isn't all that interesting, I've loaded in some mock data
at
https://goto.google.com/sivef

Screenshots:
https://screenshot.googleplex.com/gWHmgWZ9M1Y
https://screenshot.googleplex.com/oURQrrT2HE9
https://screenshot.googleplex.com/iOOhvJmHEqv (showing off verbose)

I plan to add in a way to save the filters and sorts to url params, a way to see
an overview of the query, and to combine this client-side sorting/filtering with
the server-side so no data is missed.

[kjlubick, 2016-07-28 20:09:04]

Description was changed from

==========
Add new botlist for swarming

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

to

==========
Add new botlist for swarming

This botlist is a dynamic table.  The user can choose which columns they want to
see and what to sort by, in addition to making it easier to discover what can be
sorted by.

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

[kjlubick, 2016-07-28 20:14:06]

On 2016/07/28 at 20:08:09, kjlubick wrote:
> It is currently live at
>
https://2213-cbaf341-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...
> 
> Since the staging data isn't all that interesting, I've loaded in some mock
data at
> https://goto.google.com/sivef
> 
> Screenshots:
> https://screenshot.googleplex.com/gWHmgWZ9M1Y
> https://screenshot.googleplex.com/oURQrrT2HE9
> https://screenshot.googleplex.com/iOOhvJmHEqv (showing off verbose)
> 
> I plan to add in a way to save the filters and sorts to url params, a way to
see an overview of the query, and to combine this client-side sorting/filtering
with the server-side so no data is missed.

In both cases, you'll need to sign in (upper right hand corner).  In a future
CL, I can make it more obvious that you need to sign in to see useful
information.

[jcgregorio, 2016-07-28 20:28:14]

On 2016/07/28 at 20:14:06, kjlubick wrote:
> On 2016/07/28 at 20:08:09, kjlubick wrote:
> > It is currently live at
> >
https://2213-cbaf341-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...
> > 
> > Since the staging data isn't all that interesting, I've loaded in some mock
data at
> > https://goto.google.com/sivef
> > 
> > Screenshots:
> > https://screenshot.googleplex.com/gWHmgWZ9M1Y
> > https://screenshot.googleplex.com/oURQrrT2HE9
> > https://screenshot.googleplex.com/iOOhvJmHEqv (showing off verbose)
> > 
> > I plan to add in a way to save the filters and sorts to url params, a way to
see an overview of the query, and to combine this client-side sorting/filtering
with the server-side so no data is missed.
> 
> In both cases, you'll need to sign in (upper right hand corner).  In a future
CL, I can make it more obvious that you need to sign in to see useful
information.

I don't quite understand the 3-state nature of the sort buttons:

https://screenshot.googleplex.com/qoDDYfFbpKB.png

[kjlubick, 2016-07-28 20:36:33]

On 2016/07/28 at 20:28:14, jcgregorio wrote:
> On 2016/07/28 at 20:14:06, kjlubick wrote:
> > On 2016/07/28 at 20:08:09, kjlubick wrote:
> > > It is currently live at
> > >
https://2213-cbaf341-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...
> > > 
> > > Since the staging data isn't all that interesting, I've loaded in some
mock data at
> > > https://goto.google.com/sivef
> > > 
> > > Screenshots:
> > > https://screenshot.googleplex.com/gWHmgWZ9M1Y
> > > https://screenshot.googleplex.com/oURQrrT2HE9
> > > https://screenshot.googleplex.com/iOOhvJmHEqv (showing off verbose)
> > > 
> > > I plan to add in a way to save the filters and sorts to url params, a way
to see an overview of the query, and to combine this client-side
sorting/filtering with the server-side so no data is missed.
> > 
> > In both cases, you'll need to sign in (upper right hand corner).  In a
future CL, I can make it more obvious that you need to sign in to see useful
information.
> 
> I don't quite understand the 3-state nature of the sort buttons:
> 
> https://screenshot.googleplex.com/qoDDYfFbpKB.png

They are like the ones Wikipedia uses.  Both arrows means "don't sort", then
ascending, descending.  What might be confusing is the order sorts are applied. 
If you sort first by id and then by status, you'll probably observe nothing
change on the second one.  That's because they are first ordered by id.  There
are no ties, so the status sort does nothing.

Wikipedia gets around this by only allowing you to do one sort at a time. 
Should we do the same?

Also, what are your thoughts on the query?  I saw in your screenshot that you
had typed "poo".  Only one thing showed up in the first column "Pool", which was
selected.  Was this what you expected?  Did you find it confusing that nothing
showed up in the second column.  Nothing showed up because no pool (Chrome, QO,
etc) has "poo" in it.  I can change this behavior so that if the "primary" key
matches, everything in secondary shows up.  What do you think?

[jcgregorio, 2016-07-28 20:46:32]

On 2016/07/28 at 20:36:33, kjlubick wrote:
> On 2016/07/28 at 20:28:14, jcgregorio wrote:
> > On 2016/07/28 at 20:14:06, kjlubick wrote:
> > > On 2016/07/28 at 20:08:09, kjlubick wrote:
> > > > It is currently live at
> > > >
https://2213-cbaf341-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/newu...
> > > > 
> > > > Since the staging data isn't all that interesting, I've loaded in some
mock data at
> > > > https://goto.google.com/sivef
> > > > 
> > > > Screenshots:
> > > > https://screenshot.googleplex.com/gWHmgWZ9M1Y
> > > > https://screenshot.googleplex.com/oURQrrT2HE9
> > > > https://screenshot.googleplex.com/iOOhvJmHEqv (showing off verbose)
> > > > 
> > > > I plan to add in a way to save the filters and sorts to url params, a
way to see an overview of the query, and to combine this client-side
sorting/filtering with the server-side so no data is missed.
> > > 
> > > In both cases, you'll need to sign in (upper right hand corner).  In a
future CL, I can make it more obvious that you need to sign in to see useful
information.
> > 
> > I don't quite understand the 3-state nature of the sort buttons:
> > 
> > https://screenshot.googleplex.com/qoDDYfFbpKB.png
> 
> They are like the ones Wikipedia uses.  Both arrows means "don't sort", then
ascending, descending.  What might be confusing is the order sorts are applied. 
If you sort first by id and then by status, you'll probably observe nothing
change on the second one.  That's because they are first ordered by id.  There
are no ties, so the status sort does nothing.
> 
> Wikipedia gets around this by only allowing you to do one sort at a time. 
Should we do the same?

Right, but when I used the sorts on wikipedia they behave as expected, i.e. if I
sort on a column, all the other columns revert to the 'unsorted' state:
https://en.wikipedia.org/wiki/Table_of_epithelia_of_human_organs

That doesn't happen on the botlist page. Also, I can click a third time and the
column moves back to unsorted, which doesn't make sense.


> 
> Also, what are your thoughts on the query?  I saw in your screenshot that you
had typed "poo".  Only one thing showed up in the first column "Pool", which was
selected.  Was this what you expected?  Did you find it confusing that nothing
showed up in the second column.  Nothing showed up because no pool (Chrome, QO,
etc) has "poo" in it.  I can change this behavior so that if the "primary" key
matches, everything in secondary shows up.  What do you think?

I need to play with the UI some more, but how it works was initially surprising
to me, but I don't have concrete ideas on how to change it right now.

[stephana, 2016-07-29 14:09:31]

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-data.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-data.html:45: <dom-module
id="bot-list-data">
What is the benefit of creating a declarative ajax element that wraps another
declarative ajax element over doing this in JS ?

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-demo.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-demo.html:2: Copyright 2016
The LUCI Authors. All rights reserved.
Can you include a screenshot of the demo page ?

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-shared.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-shared.html:15:
window.SwarmingBehaviors = window.SwarmingBehaviors || {};
IMO this should go into a pure JS file. Behaviors are are like polymer base
classes and should be use to facilitate UI related functionality.
Anything that can be in pure JS should be in pure JS, so when we switch
frameworks or move to the next version of Polymer we have to port minimal amount
of code.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/common/sort-toggle.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:17: sort: Number,
the direction of the sorting.  1, 0, -1 for
IMO, should be a string with either values: 'asc', 'dec', ''
It's much more descriptive. I might still have to look up the docs, 
but if I see 

ele.sort = 'asc';

I know immediately what's going on.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:78: toggle:
function() {
Nit: spaces between methods.

[kjlubick, 2016-07-29 19:13:25]

I also addressed Joe's concerns.  

new Screenshot, with checkboxes and bolding search:
https://screenshot.googleplex.com/qbSLKC1skwM

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-data.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-data.html:45: <dom-module
id="bot-list-data">
On 2016/07/29 at 14:09:31, stephana wrote:
> What is the benefit of creating a declarative ajax element that wraps another
declarative ajax element over doing this in JS ?

Using iron-ajax, to me, seems easier to read and hides a lot of the boilerplate
I would need if doing it in pure js.  At the moment, this is a simple enough
query that I don't think doing it myself in JS buys me much, but I will keep
that in mind if this gets more complicated.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-demo.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-demo.html:2: Copyright 2016
The LUCI Authors. All rights reserved.
On 2016/07/29 at 14:09:31, stephana wrote:
> Can you include a screenshot of the demo page ?

As we talked offline, those are in the original publish message.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/botlist/bot-list-shared.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/botlist/bot-list-shared.html:15:
window.SwarmingBehaviors = window.SwarmingBehaviors || {};
On 2016/07/29 at 14:09:31, stephana wrote:
> IMO this should go into a pure JS file. Behaviors are are like polymer base
classes and should be use to facilitate UI related functionality.
> Anything that can be in pure JS should be in pure JS, so when we switch
frameworks or move to the next version of Polymer we have to port minimal amount
of code.

From the docs:
"Polymer supports extending custom element prototypes with shared code modules
called behaviors."

This is the Polymer way to have shareable js, not raw js files.  I'm going to go
with that.  It won't be hard to port in either format, and this one will be less
confusing to other Polymer developers who come in from other Polymer projects.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/common/sort-toggle.html (right):

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:17: sort: Number,
the direction of the sorting.  1, 0, -1 for
On 2016/07/29 at 14:09:31, stephana wrote:
> IMO, should be a string with either values: 'asc', 'dec', ''
> It's much more descriptive. I might still have to look up the docs, 
> but if I see 
> 
> ele.sort = 'asc';
> 
> I know immediately what's going on.

Done.

https://codereview.chromium.org/2182693002/diff/120001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:78: toggle:
function() {
On 2016/07/29 at 14:09:31, stephana wrote:
> Nit: spaces between methods.

Done.

[kjlubick, 2016-08-01 14:02:38]

It now looks like:
https://screenshot.googleplex.com/CdtszKzc3am

[jcgregorio, 2016-08-01 14:03:28]

lgtm

[KevinL, 2016-08-01 14:03:50]

The CQ bit was checked by kjlubick@chromium.org

[commit-bot: I haz the power, 2016-08-01 14:03:56]

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-08-01 14:03:58]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-08-01 14:03:59]

No L-G-T-M from a valid reviewer yet. 
CQ run can only be started by full committers or once the patch has
received an L-G-T-M from a full committer.
Even if an L-G-T-M may have been provided, it was from a non-committer,
_not_ a full super star committer.
Committers are members of the group "project-infra-committers".
Note that this has nothing to do with OWNERS files.

[KevinL, 2016-08-01 14:04:23]

lgtm

[KevinL, 2016-08-01 14:04:24]

The CQ bit was checked by kjlubick@chromium.org

[jcgregorio, 2016-08-01 14:04:35]

jcgregorio@google.com changed reviewers:
- kjlubick@chromium.org

[commit-bot: I haz the power, 2016-08-01 14:04:36]

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

[jcgregorio, 2016-08-01 14:04:36]

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
File appengine/swarming/elements/res/js/common.js (right):

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
appengine/swarming/elements/res/js/common.js:44: // Javascript will try to
corece these to numbers or return NaN.
nit: coerce

[commit-bot: I haz the power, 2016-08-01 14:07:33]

Description was changed from

==========
Add new botlist for swarming

This botlist is a dynamic table.  The user can choose which columns they want to
see and what to sort by, in addition to making it easier to discover what can be
sorted by.

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

to

==========
Add new botlist for swarming

This botlist is a dynamic table.  The user can choose which columns they want to
see and what to sort by, in addition to making it easier to discover what can be
sorted by.

BUG=631047

Committed:
https://github.com/luci/luci-py/commit/7c258a419a17da74f64ce5bf27b1f67c3ea107e5
==========

[commit-bot: I haz the power, 2016-08-01 14:07:35]

Committed patchset #15 (id:280001) as
https://github.com/luci/luci-py/commit/7c258a419a17da74f64ce5bf27b1f67c3ea107e5

[jcgregorio, 2016-08-01 14:08:04]

jcgregorio@google.com changed reviewers:
+ kjlubick@chromium.org

[jcgregorio, 2016-08-01 14:08:06]

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
File appengine/swarming/elements/Makefile (right):

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
appengine/swarming/elements/Makefile:24: cp ./res/js/common.js
./build/js/common.js
In a future CL this should be run through uglify-js.

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
File appengine/swarming/elements/res/imp/common/sort-toggle.html (right):

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:79: properties: {
nit: need blank line above.

https://codereview.chromium.org/2182693002/diff/280001/appengine/swarming/ele...
appengine/swarming/elements/res/imp/common/sort-toggle.html:123: 
nit: no blank line here.