shanzi / buildbot Goto Github PK

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.