ui: Lots of instances of a service break out of it's bounding box

[mattrobenolt]

Should be pretty self explanatory:

[ryanuber]

Thanks for reporting this, marking as a bug! /cc @pearkes @markupboy

[mattrobenolt]

@ryanbreen fwiw, this happens similarly as well for Lock Sessions:

[rafikk]

I've run into this all over the place as well.

I'd be interested in contributing a patch and I've already fixed several instances of this on our local cluster. The main offender here is setting explicit element heights in Ember's ListView. Personally, I've found the nested scrolling UI buggy and distracting and have opted to just remove it altogether. If no one is attached to the nested scrolling, I can submit a PR.

Thoughts?

[pearkes]

@rafikk Agreed about the nested scrolling, but unfortunately it's for performance. In large clusters (thousands of services/nodes) the UI chokes without ember listview.

[rafikk]

@pearkes Does that mean removing ListView is a non-starter? Is pagination an option?

Is there a good way for me to test the UI against such a cluster?

[pearkes]

@rafikk Best way to test the UI is to replace the JSON endpoint to a json file on disk (the ui dir serves a directory, so you can just copy a file in there). Then give the file a fake response of some 1000s of nodes. That's the best way I remember. Proper fixtures would be nice though. Ember has a come a long way since this UI was made, so there are a number of "better" tools now as well.

[nickwales]

I've got instances of this happening with very long node and check names.

Long check names push the status down to where it is almost illegible.
Long service names break out of their bounding boxes on the services view.

[macb]

Long node names also cause issues on the nodes endpoint (pushes the Deregister button around)

[slackpad]

Kicking over to @meirish who's been looking into some UI bugs.

[slackpad]

Hey there,

We are currently hiring for a full time position to manage the Consul UI. They are going to do a full revamp, so we'll make sure this is included then!