Universal Control Plane - Hacks

Hack week projects based on UCP

cover

This project page contains a list of hacks implemented on top of UCP during Docker's bi-annual hack weeks. The following projects focus on pure frontend features and UX.

All of the following hacks won a prize at their respective hack weeks.

Web Terminal

This hack was made possible thanks to Raphael Bouchard and David Fisher, who made incredible UX work.

This project was originally a customer request. UCP did not have a web terminal to interact with the cluster or just view resources as you would do from the terminal. We felt that allowing the user to use the strengths of both the UCP web UI and the Docker/Kubernetes CLI in parallel would complete the user experience of our product line and bring it as close together as we could.

The terminal feature is accessible throughout the entire app on the bottom right corner. Once open, it occupies the bottom part of the screen and gives the user the ability to type any Docker or Kubernetes command to interact with her/his UCP cluster. She/he can also open new terminal sessions by opening new tabs. If the terminal is collapsed the sessions are preserved through the user session.

When opening the terminal the user gets immediately the control over the docker and kubernetes workloads of her/his cluster. The interface lets the user write any docker or kubernetes she/he wants. We also built a tab feature in the terminal so the user can open multiple sessions and switch between them.

Sometimes the user prefers to view the information in the CLI, but getting to inspect a resource can be hard given the length of the command to type in the terminal. This is why we built a "View in CLI" feature. The UI lets the user navigate quickly to a specific resource, she/he can then click on a button to display the same data she/he is seeing on the UI in the CLI.

We wanted the CLI experience in the UI to feel seamless. Hence we rebuilt the Logs and Exec UCP features for Docker and Kubernetes resources so they could work in this terminal. The user could then view logs or exec in a specific container while still be able to navigate. This resulted in less context switching and smoother workflow.

Technical details:

The UI elements were built in React, Emotion, Redux, and Term.js. To give access to the cluster through the web terminal, when opening a new terminal, each user starts a docker container on the cluster that contains a "client bundle" that allows running docker or kubernetes commands against a cluster remotely. When starting a new terminal session, we're basically just running a docker exec command against that container.

The Dockerfile for the image of that container is available here.

Kubernetes Compose Stack Visualizer

This hack was also made possible thanks to Raphael Bouchard and David Fisher and their incredible UX skills.

This project was originally a UX experiment but it resulted in an actual UI feature. We were looking for new ways to display all the different layers of Kubernetes objects composing a Kubernetes Compose stack, have a better way to tell the user how these resources are related to each other and also give a better overview of the status of each one of these stack components.

The video above showcases a user creating a Kubernetes stack after submitting a docker-compose file. After being redirected on the screen, she/he can see the Stack Visualizer, where each resource composing a stack is displayed. The user can navigate to any component of the stack and see their status updating live on the dashboard.

This feature is great for any UCP user who wants to have a quick overview of their stacks and their components.

Technical details:

The featured UI elements were built with React and Emotion. The hover effects/animations are done in CSS through Emotion.

Including a Slack-like Global Search feature in UCP was my first hack as a Docker employee part of the UCP team. Before this hack, it was not possible for a UCP user to quickly jump to a specific category of the app or look for specific resources. The user could trigger the Global Search window via a simple shortcut and search through all the resources of her/his UCP cluster.

Screenshot showcasing the Global Search component that was built on top of UCP
Screenshot showcasing the Global Search component that was built on top of UCP

Technical details

The UI elements for these projects were implemented with React and styled with CSS (CSS modules). For the shortcuts, we used mousetrap and this amazing article from Cassidy Williams.