Share with friends and colleagues on social media

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:

Comparison between 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:

Package overview in new UI

The repositories configuration for a package:

Package repositories configuration in new UI

The revisions of a package:

Package revisions in new UI

The changes of package’s revision:

Package revision changes in new UI

The requests for a package:

Package requests in new UI

The users of a package:

Package users in new UI

The attributes of a package:

Package attributes in new UI

The meta configuration of a package:

Package meta configuration in new UI

 

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:

Comparison between 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:

Repositories configuration for a project in the new UI

New modal window for repositories page in the new UI

The Add Repository from Distribution page looks very similar to the old one, but without the Expert mode link:

Add Repository from Distribution page in the new UI

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:

Pulse for a project in the new UI

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:

Monitor page in the new UI

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!

:mag:

The overview of a project:

Overview of a project in the new UI

The requests of a project:

Requests page in the new UI

The status of a project:

Status for a project in the new UI

The overview of a user:

User overview in the new UI

The tasks of a user:

User tasks page in the new UI

The overview of a group:

Group overview in the new UI Group members in the new UI

 

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:

 
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.


Share with friends and colleagues on social media
Tags: , , , , , , , , , , , , , ,
Category: Technical Solutions
This entry was posted Monday, 17 December, 2018 at 2:48 pm
You can follow any responses to this entry via RSS.

Comments

  • victorhck says:

    A great tool for maintain, and create packages even for another distros!!

    ‘ve phun!!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *