Skip to content

Implementation: Revisit the Kubernetes section UX

Release notes

https://docs.gitlab.com/ee/user/clusters/agent/#management-interfaces

Having an overview of available clusters from a GitLab project is the first step in setting up new deployments or for troubleshooting. With the introduction of the GitLab Kubernetes Agent, the related pages were hard to navigate and features were sometimes hard to find or understand. To support our users, we redesigned the Kubernetes management pages, and we are rolling out this design at the project level pages in this release. The new design provides first-class support for Agent and certificate based cluster connections alike.

Problem to solve

When a user lands on the Kubernetes section it is not clear what options they have for integrating their Kubernetes infrastructure with GitLab. The language we use on the UI is confusing and the documentation is not helpful either to help them understand what options they have, what use cases each solution can be used for, what benefits and drawbacks there are in each option. The Agent and cluster listings are confusing as the terminology is not consistent and we use our internal understanding to describe GitLab's Kubernetes offering. Finally, we make a distinction between Agents and clusters connected with certificate even though we don't know what the mental model of the users is. Do they consider these two ways to connect their clusters to GitLab or do they also consider them to be separate Kubernetes solutions?

Intended users

User experience goal

Make all the Kubernetes integrations options clear for the user so that they can choose the option that helps them achieve their goals.

Proposal

The design issue and discussion can be found here

  • Redesign the Kubernetes landing page so that all the integrations and integration options are present. Clear and concise information should give an overview of what options the user has for integrating their Kubernetes infrastructure with GitLab. All possible integrations should be available from the landing page.
  • Fix the breadcrumb so that it reflects the hierarchy and navigation.
  • Change the way we speak about the GitLab Kubernetes management offerings. Use a language that is clear and understandable even to users who know nothing about the Agent or the certificate-based integrations. Modify all the copy in the UI with the updated language.
  • Make the language consistent on all the UI components.

Empty state

State with content

Long-term design vision

Iteration 1: new overall UI

  • Empty state design
  • Content design should implements
    • 3 tabs at the top
    • "All" tab should show the currently existing listings one under the other
    • The other 2 tabs should show the currently existing listings
  • Actions button is constant across tabs:
    • Create new cluster
    • Connect with agent
    • Connect with certificate

Iteration 2: fix the links

  • Each tab should have a "permalink" - reloading the page should show the current tab
  • The "Add Kubernetes cluster" think on the main project page (example here) should point to the "Connect with agent" page

Related issues

Documentation

Created an issue to improve the documentation as well as the navigation for Kubernetes: #324030 (closed)

Links / references

Figma (design) file: https://www.figma.com/file/J1BRYrcK8fZ6YK9lcMhcYp/Revisit-the-Kubernetes-cluster-UX-after-the-Agent-is-released-project-254998?node-id=2%3A50

Implementation plan

We are going to deliver this issue in the following steps with separate MRs:

  • Move clusters empty state to Vue --> !73064 (merged)
  • Change the navigation for the clusters based page --> !73163 (merged)
  • Change the copy and empty state illustrations in the existing components --> !73586 (merged)
  • Change the navigation on the clusters page to Vue and actions button on the top of the page (introducing the clusters_main_view and clusters_actions components --> !73637 (merged)
  • Add the 'All' tab --> !74135 (merged)
  • Add an empty state variant for the Install new Agent modal --> !73636 (merged) - will be implemented in the follow-up #345893 (closed)
Edited by Anna Vovchenko