21 November 2017 Engineering

Meet the New Elastic Cloud Enterprise UI!

By Nicolás Bevacqua

A few months ago, Dave Snider (a design lead at Elastic) showed me the latest of what the design team had been working on since July. This was a minimalistic set of UI components that worked well together and, more importantly, had a coherent design. We’re calling it Elastic UI, or EUI for short. The designs are purely CSS based, while the interactive bits have been added in React, but in such a way that we could easily take just the CSS, or make a version of the components using a different JavaScript framework.

As we were going through the designs I wasn’t merely impressed, I wanted Elastic Cloud Enterprise to leverage this component system right away! When the team met in Berlin, I was eager to discuss the possibility of releasing this as part of ECE 1.1. A minor bump we faced was that EUI was at the time embedded in a branch of Kibana, and thus not readily available to other teams within Elastic that may have wanted to leverage all of the design work that went into it. This was because, at the time of its inception, Kibana was the only intended consumer of EUI. Thankfully they received us with open arms and we were able to extract EUI into its own repository the day after, so that everyone across the company could consume it.

Armed with the new repository, we set out to redesign the entire Elastic Cloud Enterprise UI. The plan was to experiment a little and see how far we could get in a week’s time. The problem was that there was an upcoming release in two weeks, and virtually everyone in the team was taking one week vacations at some point before the release. Alas, we excitedly pushed forward.

Experimenting with EUI

The way React applications are typically built often encourages a highly componentized structure, meaning we would have our own share of reusable components like a Spinner, a DangerButton to require confirmation for dangerous actions, code highlighting components, and so on. By changing these components’ implementations to use EUI, we were able to reimplement large portions of our codebase to rely on EUI without having to change the interfaces of our own reusable components – a huge time saver.

Another benefit in doing such a large scale migration with React is that components are easy to swap. Where you had an <input />, you now have an <EuiFieldText /> and an import statement. Same thing with buttons. Suddenly the Login screen looks great!

The first few bits of the redesign involved bringing in the new page layout, and replacing with EUI components all of the styles we had previously implemented ourselves. Things like spacing and responsiveness ended up being the more challenging aspects.

The Platform page, for example, gives you an overview of how your entire fleet is doing.

One of the nice aspects of EUI is that it has accessibility built into it, so we can be sure to provide an optimal experience to screen readers while using the slick new designs.

We’re excited about this release and can’t wait to hear your feedback! Try it out.