In the Big Data Europe project we pursue the goal of delivering seamless experience to the users of the BDE platform. One of the key components for such an experience is an integrated user interface. In this blog post we explain how we tackled the visual alignment of the BDE components within the platform.
The BDE platform provides a plethora of ready-made components: Apache Flink, Apache Spark, Apache Solr among others, for easy deployment on a Docker Swarm cluster. Being self-sufficient applications, most of the components provide Web graphical user interfaces (WebUI) for the end users. Also, being huge projects, the components as well as their WebUIs are developed by various teams using different HTML, CSS and JS frameworks. When deploying several components together the question arises: how can we align the WebUIs to provide the users with a seamless experience?
In the BDE project we came up with the solution of minimal intervention. We use Google Material Design to introduce modifications into the original CSS of the components to align them together into one BDE styling. For example, the Solr component with the original CSS styling and with the BDE CSS styling is shown in Fig. 1.
All the components are aligned in a way that gives the user a feeling of navigating through one application and thus achieving the seamless experience for the user (see Fig. 2, click to zoom in).
In the following blog posts, we will show how WebUIs can be integrated into a common interface using the Integrator UI.