The content of the following article has been contributed by the Open Build Service (OBS) Team at SUSE. It is based on the two blog posts “OBS Is Revamping Its User Interface, Help Us to Make It Awesome” and “Revamped User Interface for Project, User and Group Pages“, originally published at the OBS web site and licensed under a Creative Commons Attribution 4.0 International License.
Why Are We Revamping the OBS User Interface?
In the past weeks, we have kicked off the migration to a new user interface for OBS. But why are we doing this? Well, we refresh the whole UI to improve your user experience. It includes:
- Improving consistency among the application.
- Responsive pages, so you can use OBS on phones and tablets.
- Modern look and feel.
On top of this, there are benefits for developers and contributors too:
- Improved code consistency, readability and ease of maintenance by using Bootstrap’s excellent components and utilities.
- Reduced unnecessary technical complexity, effectively helping us in fixing bugs and adding UI-related features.
It’s a win-win situation for all OBS users, developers and contributors.
Revamped Homepage and Packages Page
We started with the homepage and the package pages. Here is a comparison of the new and old user interface of the package overview page:
New Packages Pages: Changes in Detail
Let’s take a tour together to go through the major changes. You will see, the package pages in the new UI look great!
The overview of a package:
The repositories configuration for a package:
The revisions of a package:
The changes of package’s revision:
The requests for a package:
The users of a package:
The attributes of a package:
The meta configuration of a package:
Revamped User Interface for Project, User and Group Pages
In a second step, we have migrated the project, user and group pages to the new user interface, which are already available for all users in the beta program.
Here is a comparison of the old and new user interface of the project overview page:
New Project, User and Group Pages: The Changes in Detail
All the new pages now have a new design and work on your phone! Some of them were completely re-designed in order to optimize the space and improve usability. You may notice the difference between the old and the new user interface in those cases. Please pay special attention to the repositories and pulse pages. Your feedback is going to be very helpful, especially for those pages.
The Repositories Page
This page has significantly changed. We have moved the links to add repositories to the top (where they are easy to find) and added the Add from a Project option, which used to be in the Add Repository from Distribution page and called Expert mode. In addition, repositories are now showed in cards, where the information is condensed and nicely displayed. Last but not least, the edit options are in independent modals that appear in the center of the screen instead of being mixed with the displayed information.
Below you can see how the new beautiful Repositories for project page looks like:
The Add Repository from Distribution page looks very similar to the old one, but without the Expert mode link:
The Pulse Page
The pulse page has better visual cues and it is organized in sections. It also allows you to decide the period of time to visualize. Check how different the page looks:
The Monitor Page
The old version of this page looks broken because the build status table overflows and breaks the layout. The new page does not only fix this bug, but it provides more functionality as well. The columns are sortable, with a client-side search, pagination and a legend.
This is how it looks:
And Much More
The rest of the pages keep the same structure, but with a new look and feel. The following images summarize the major changes, but go ahead and try it yourself!
The overview of a project:
The requests of a project:
The status of a project:
The overview of a user:
The tasks of a user:
The overview of a group:
Share Your Feedback
We need your feedback to make this new user interface even better! We are looking for:
- Bugs, so anything breaking workflows
- Design feedback, so anything related to the user experience and interface
- How it works on your device / browser
To check everything out, you need to join the beta program on OBS if you haven’t already.
There are two ways to reach us:
- On GitHub, by opening an issue and / or commenting on an already opened issue.
- On IRC, by talking directly to us. We are in the channel
#opensuse-buildserviceon Freenode.
Please note that we favor GitHub to gather feedback as it allows us to easily keep track of the discussions.
What Is Coming Next?
We will be working next on the request pages. Stay tuned, we will inform you as soon as changes are available in the beta program.
Comments
A great tool for maintain, and create packages even for another distros!!
‘ve phun!!