Open source: OVH Control Panel code finally released

After being announced at the 2016 Summit, the OVH Customer Control Panel source code has now been set free. From now on everyone will be able to participate in its development, via our GitHub. The interface allows a user to manage all their services at a click, and making this historic OVH application open source was a big adventure. Here, we take a look back on this experience and what we have learned. By the UX team.

Why release the code?

In parallel to freeing up OVH’s managerial organization, for the past few months we have also been working on setting our Customer Control Panel free. This is the cornerstone of OVH services, through which all customers administrate their services. Which means it is the focus of a big part of the efforts of the UX team. As developers dedicated to the user experience, we believe that there are several advantages to making the code open source. Advantages that strengthen our deep-held belief that open source has become an indispensable standard for IT professionals.

Community spirit has been at the core of OVH right from the start. We have always done our best to be receptive to the needs, suggestions and criticisms of our users. That is how we have gotten bigger and stronger. It was time for us to to take the next step and pave the way for collaborative development. Together, we are better able to improve the overall quality of the Customer Control Panel. We are seeing it work already, with bugs being detected, helped by our bug bounty program launched in the summer of 2016, and spelling mistakes in the interface being corrected, regularly reported on social media (more or less forgivingly) by the zealous followers of Bernard Pivot. Most importantly, the community can contribute new ideas, on both the technical and usability levels. There is one big advantage: using this Control Panel almost every day has made you real experts on it. Our goal is to adapt our roadmap for future Control Panel developments to your needs.

Setting the source code free also means greater transparency. We are making a changelog, commits and other GitHub labels available. All these elements will let you know the direction the project is taking at any time, and influence how it develops.

Facilitating contribution

The first step to making contribution possible was opening up the sources. Easier said than done: the OVH Customer Control Panel is a project with a long history and, fatally, it had a significant technical debt in some parts. So for you, the most dramatic worksite was invisible. Let’s see what we did.

Guidelines open to suggestions

It is impossible to collaborate without setting a framework. So clear documentation was crucial. The goal: to make sure all submissions are uniform, both on the level of the code and the contribution method used. If it is not precise enough, documentation can prove useless. But if it is too heavy and restrictive it can make contributing burdensome. It is not easy to find the right balance! That is why our guidelines are open to your suggestions too.

These community guidelines include the following files:

README.md: summary of the format required for submissions;
CODE_OF_CONDUCT.md: definition of good practice for contributors;
CONTRIBUTING.md: this is our big dusty book that lists all the rules on contributing to each of our projects;
ISSUE_TEMPLATE.md: the GitHub template for filling out the issue declaration form. The uniform format helps us to deal with issues quickly;
PULL_REQUEST_TEMPLATE.md: identical to the ISSUE_TEMPLATE, but for pull requests;
LICENSE.md: specifies the standard licence BSD 3-clause to use in the projects.

The tool box

1

In addition to these guidelines, we provide several tools to make it easier to follow them:

• Commit pre-formatter: this tool allows you to respect the message format set in our guidelines using the following format:

We were inspired by existing norms like Angular’s to create a familiar environment for contributors.

Changelog generator: this is a Node.js script allowing you to generate a changelog in the standard format. It is generated via the commit messages’ specific format.

Un « linter » JavaScript and a « linter » stylesheet: these tools are used to check the code’s syntax and format, so they are the same in as many submissions as possible. It is easier to read the code if it does not snag on syntax that is too exotic. It helps us focus on the code itself.

In addition to the code itself, you should familiarize yourself with these tools before making a contribution. That is why we use the Makefile standard (known by all) to facilitate the installation of the Customer Control Panel. Two commands are essential:

You already know that the first command installs the dependencies needed to make the Control Panel work. The second launches the development environment. Then... you’re ready to go!

Cleaning up the code: a time consuming but essential step

How did we go about setting the code free? Here are the key milestones.

For the Control Panel to work you need a set of software building blocks, which we call components. To set these components free, 53 GitHub submissions were created and then published on NPM and Bower. Making so many components open source is a time consuming task, particularly when the code does not always meet current quality standards. To put it bluntly: some parts of the code were really ugly, and needed touching up (yup, we’re throwing the first stone!).

Once this clean up of the code was done, the key building blocks were published. Then we decided to make the Telecom Control Panel available on GitHub. Why the Telecom Control Panel? As the most recent addition to the Customer Control Panel, the Telecom manager had the biggest proportion of what is known as legacy code. Little refactoring was needed: most of the work was about ensuring no comment or bit of code could result in security flaws, whether obsolete or containing comments internal to OVH. Once this Control Panel had been set free, it was the turn of the Cloud manager. The similarities in the architecture of the Cloud and Telecom Control Panels allowed us to use the same method.

The Web Control Panel’s murky past

Two Control Panels were lagging behind on a technical level to such an extent that it was impossible to publish them as they were: the Web manager and the Dedicated Server manager.

‘The possible is already done. The impossible is underway. For miracles, please wait 48 hours.’ This statement makes complete sense in tech when you think about clearing a technical debt that was made over the span of nearly 19 years by an army of developers. We decided to freshen up the oldest parts of the Customer Control Panel, starting with the one with the most complex (and eventful) history: the Web manager. To give you an idea, we are talking about approximately 32,000 lines of JavaScript, 800 HTML templates and reams of CSS files. So you see it was not a matter of giving the walls a lick of paint and replacing the carpet. A project like this does not get finished in one go, but in multiple, controlled stages.

First we overhauled the code. And this meant all of it, even the JavaScript files, and migrating them to ES6 and AngularJS superior to 1.3, in order to meet more current norms, more widely used by the community that will work on the GitHub project. To avoid any regression, we used tools like prettier and SonarJS. They are a great help for detecting bugs and homogenizing files.

Then it was time for the HTML files to get a face lift. Once again, we simplified the DOM and migrated the project to the same libraries as the Telecom and Cloud managers, like Bootstrap 3. When this updating stage was over, we then used the process described earlier to make the Cloud and Telecom Control Panels open source. It will be the same for the Dedicated Control Panel in the coming months. The components used by the Web Control Panel will be published on GitHub, making the code available in September 2017.

Make the fork be with you

You can see that setting the OVH Control Panel code free is a project that is still in its early stages. The next steps will include many more important moments for the community and people who want to take part.

One of our goals is to allow everyone to [url="https://fr.wikipedia.org/wiki/Fork_(d%C3%A9veloppement_logiciel)"]fork[/url] the OVH Control Panel and deploy it on their own infrastructure. Whether you want to adapt the Control Panel to a specific use or make a white label version, the Control Panel is yours!

You must have realized that we are talking about the OVH Control Panel when really it is several code bases, each corresponding to an OVH product universe: Telecom, Cloud, Web, Dedicated. This is due to an organization that no longer exists. The separation of different product universes within the Customer Control Panel resulted in technical and usability differences that you all noticed, and which were often complained about.

In the coming months, we are going to work towards unifying the OVH Customer Control Panels on both the technical and usability levels. This is to make the user and developer experience as pleasant as possible.

The adventure continues. With you!