Skip to content

Move the cluster UI component under the environment detail page

Problem

Today, the cluster UI component is shown on the environment list page under a collapsible of a collapsible.

We should redesign the environment detail page, and move the cluster UI under the details view. This allows us more space in the future to grow out the Kubernetes Dashboard (including the tree view), as well as simplify the environment list view to what it should be - a list.

Together with it, we might need an "unconfigured" view to help with adoption.

UX Proposal

General Page Updates:

  • Update the Edit button to say Edit environment.
  • Add two tabs to the top: Kubernetes overview and Deployment history.
  • When Kubernetes is configured, show Kubernetes tab. If not, show Deployment tab.

Kubernetes Overview Tab Updates:

Page Empty State
Screenshot_2024-01-29_at_2.14.25_PM Screenshot_2024-01-26_at_9.35.44_AM

Deployment History Tab Updates:

Page Empty State
Screenshot_2024-01-26_at_9.42.20_AM Screenshot_2024-01-26_at_9.42.26_AM

Implementation plan

The scope of the task is rather big. Work in separate MRs to reduce changes and speed up the review process.

  • Deployment history:
    • Add GlTabs to the environments details page.
    • Move the current deployments list under the 'deployment history' tab
    • Update text and links for the empty state
    • Update 'Edit' button
  • Add Kubernetes Overview to the details page:
    • Add a new tab for the 'Kubernetes overview'
    • Move the current Kubernetes UI under this tab
    • Create an empty state
  • Remove Kubernetes overview from the index page:
    • Remove the code
    • Update the docs
  • Tabs logic
    • Update the tabs to show open the Kubernetes overview by default if it's configured and open Deployments history is the Kubernetes is not configured for an environment.
  • Deployments count
    • Add a count field to the deployments query
    • Update the tab title to show the count

Release Notes

Refactor the environments list to display an easier to parse list, moving the details in a dedicated details page.

Edited by Nicolò Maria Mezzopera