Landing page - Packages

[Madeline-UX]

Big Components

• Cluster section (states: not connected, connected not initialized, connected Initialized)
• Table of packages (name, version, chips)
• Connect Cluster UX flow
• Deploy Cluster UX Flow
• Navigation (Global and left)

*Ignore - signed stuff

As Ashton I want to be able to connect to a cluster and deploy packages so that I can setup services that my organization needs.

Connec/Initialize Zarf Cluster UX Flow

Connect a Cluster (Kubeconfig available)

Given - the user does not have a cluster connected (initialized with Zarf)
Then - show connect cluster button and disable the deploy package button
When - the user clicks connect cluster
Then - scan kubeconfig for available contexts
And - show a modal that lists the default cluster default (radio button to selected state)
If - User clicks Connect cluster - start to deploy wizard
If - User clicks cancel - return to the main screen. (Packages)

Connect a Cluster (No Kubeconfig)

Given - the user does not have a cluster connected (initialized with Zarf)
Then - show connect cluster button and disable the deploy package button
When - the user clicks connect cluster
Then - scan kubeconfig for available contexts
If - on Linux show a dialog with a button to deploy the init-package (to install k3s)
when - the user clicks deploy init
Then - start to deploy wizard
If - not on linux show a dialog message explaining user needs to create or connect to a cluster to connect.

Initialize a Cluster

Given - the user has a cluster connected
When - a user clicks initialize cluster button
Then - they will be directed to step one of the deploy modal (select package)
And - the user should only see init packages (filter by Zarfinitconfig package type)
When - a user selects the init package
Then - they will be taken through the rest of the deploy flow
... deploy flow
When - the user has deployed the init package
Then - (if failed) stay on deployed page
And - show the error page and recommend user to go to the CLI to get logs
Then - (if successful) show success dialog
Then - redirect to package page (default)
And - Show Cluster Context and details
And - show deployed package is added to package table
And - deploy button is now active

Deploy Zarf Package

Deploy Package

Given - a user has clicked the deploy package button
Then - they will be directed to step one of the deploy modal (select package)
And - then should only see all packages
When - a user selects the package they will be taken through the deploy flow
... deploy flow
When - the user has deployed the package
Then - (if failed) stay on deployed page
And - show the error page and recommend user to go to the CLI to get logs
Then - (if successful) show success
And - redirect the user to the main page where deployed package is added to package table with link to tunnel if needed

Design File

https://www.figma.com/file/MUItIzpzLBLuIyt225Bwgl/Zarf-UI?node-id=1081%3A54952&t=ojULNeuu0CxY2PM1-1

[Racer159]

An endpoint exists for cluster information but will need the following information added:

cluster-name
k8s-revision

An endpoint exists to list packages.

No endpoint exists for resources - resources will be hardcoded as n/a for the MVP.

No endpoint exists to return all of the kubecontexts - this endpoint will need to be created.