Refactor the web UI

[shanzi]

Hi all,

After some preparation, I’d like to discuss my ideas about the front end side of buildbot before start writing my proposal. At first I’m interested in the Angular.js related issues such as #3147 and #3148, but after digging into the code deeper and working with current UI for a while, I think there are a few places that should be taken care of first.

These are some problems I think exists in the current UI design:

1. The arrangement of the items in the side navigation bar is a little improper. For example, under the builds sub nav, the build master, build slave and schedulers items navigate to pages with little information. These pages scarcely have any interactive functions and the informations seems will change seldom while running. These informations are more statuses about the environment than specific info for a single builder. So I think move these informations to About page and let builders be a top level nav item will be better so that we can avoid nested nav items in the side nav bar.
2. The side nav bar doesn't highlight the item corresponding to current page. In my opinion, when we are at Home, then the home item in the nav bar should be highlighted. And if we have removes the nested nav items, this should not be hard to achieve.
3. The rawdata directive and the table shows all the properties of a build in the build page are too simple. I think we should visualize the properties better and make it easier to read.
4. The login and logout functions seems still absent.

So I think it's time to handle these issues and give buildbot a new look. I have performed some researches and had a primary discussion with Pierre a few days ago and now I am confidence to the idea that we should replace Bootstrap with Angular Material.

Angular Material has many advantages over Bootstrap:

1. Bootstrap is abused so much. And in my opinion, Angular Material provides a more clean, modern and elegant UI.
2. Angular Material works better with Angular.js than bootstrap as it is offered by the Angular community officially.
3. Angular Material has become quite stable after 0.8.3 released.
4. Angular Material contains some promising new technology such as using SVG icons with md-icon as SVG is a better choice than web icon font according to this article.
5. Angular Material contains a lot of UI components such as Slider, Select, Checkbox and so on. These components is very useful to implement a beautiful UI especially when it comes to the Settings page.
6. The color scheme of Angular Material can be easily customized.

In my last project I switched from Pure and backbone.js half way in the development to Angular.js and Angular Material and I finished the whole UI with the time costed to implement only half of it with pure. I believe not only the Angular.js but also Angular Material speed up the development.

As to illustrate how it will be like for an Angular Material based buildbot, I tried to draw the pages in my mind out. It will be a high probability that you will agree with me after seeing these mockups :)

Now let's begin with the Home page:

In this design, you can see the brand new arrangement of the side bar items on the left. I put About below Settings and removes nested items. And also you will see the new look of dashboard. It become two columns and the stickers of builders and builds are both redesigned. The side bar will in fact change little, we need not use Angular Material's implementation of Sidenav. Keep using current one with a little tweak will be OK.

Then the second is the Builders page:

I drew ideas from Travis CI. Now with the second side nav we can switch between builders more easily.

The third is the Settings page:

You can see in the picture above that if we uses UI components with Material Design, the settings page will looks more elegant immediately!

At last is the About page:

Through not drawn, just as I have said, the build slave, build master and schedulers should be put here.

This project might need more works than other projects such as #3147 and #3148. But after a lot of consideration, I finally come to conclusions that it worth to be done, and that we should do it before the front end becomes too complex.

I believes buildbot will benefit a lot from this UI redesign. We are working for Nine, isn't it? And the UI might be one of the most important things to be distinguished with Eight that users may see at first glance.

If you still think this idea is too big, maybe we can discuss together to simplify it. In fact, most of pages only need replacing HTML element from bootstrap to Angular Material's component. The work might be much, but is basically mechanically. The biggest challenge stands in the Builders pages. If we find it too hard to implement, we can always fallback to just change the style instead of change the layout.

[tardyp]

I like this design. Can you share the source code of your PoC?

[shanzi]

@tardyp These are not drawn by HTML. I draw them with Sketch's free trial :p

I think it won't be very hard to translate them into code. I'm still considering of ways to reduce the amount of work. Migrate to Material design seems will be quite easy for pages such as Settings, About and Home. The biggest problem stands in the displaying of builders and builds.

To the level of my knowledge of the code, I estimate that it may takes one to two month to finish the builders and builds. If we start now, I guess we could finish Settings, About and Home before summer starts and take the whole summer on the displaying of builders and builds.

You know, programmers are usually more optimistic than they should be. I think there is probability that we may need make use of the time off season. But I am still optimistic that we can finish it this year.

I'm not sure about the schedule of releasing Nine. If finishing this year will cause a delay of releasing Nine. We might should consider to pick up the plan B.

[tothandras]

Very nice! :+1:

[tardyp]

I think this is a good plan.

Don't worry about the first Nine release. My advise would be to create a separate module apart from base. We can call it mdbase. It would generate the same buildbot-www package, but with material design.

You can work with Andras whose project is to rework the data binding API in a separate module as well.

I'll plan to release the beta version with Bootstrap based UI, and we can decide later when we switch to md.

I can help you with the first guanlecoja step and create the mdbase project for you, so that you dont losse to much time with boilerplating

[gsemet]

+1 if users can "choose" their own ui, that's a very cool feature for buildbot :)

[shanzi]

@tardyp So what should I do now? should I make my GSoC proposal based on the homepage dashboard?

[tardyp]

Yes. This document is a good start. Please create a google doc, and share it to us. It is easier for review and colaboration

[shanzi]

@tardyp Just to make sure I am not confused: you mean I should make the proposal about Material Design based on this document instead of just a proposal for the dashboard of homepage (aka. #3147), is it?

[tardyp]

I think the material design proposal is more valuable for you than the homepage dashboard. There is no need to take a project proposal by the project maintainers. Its much better if this is a proposal from the student. We are only providing them as a hint. (as a side joke, I think google will be happier to fund a project to create more md community)

[shanzi]

@tardyp welcome to the early version of my proposal :) should I send this link to the mail list?

[tardyp]

Yes please

Le jeu. 19 mars 2015 12:57, Chase Zhang notifications@github.com a écrit :

@tardyp https://github.com/tardyp welcome to the early version of my proposal https://docs.google.com/document/d/1lKwlhZqQLRHv3pFHvX7NzosUZuqgqqvex52pY3As07M/edit?usp=sharing :) should I send this link to the mail list?

— Reply to this email directly or view it on GitHub https://github.com/shanzi/buildbot/issues/1#issuecomment-83523040.