Skip to content

Design: Agent details page - Agent top level and access tokens' information

Problem to solve

The users should be able to view and manage the Agent access tokens in the GitLab UI.

Intended users

Personas are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/

User experience goal

The person who comes to this page should be able to see information for and manage the tokens that have been created for the cluster agentk connection to GitLab's kas agent. In the UI they should be able to identify each token in the list, see that the expected tokens are active, the tokens that pose security concerns have been revoked, which tokens have been used and which have expired. They should also be able to see further information such as when a token was created and by who. In addition, the user should be able to create new tokens from this page without having to navigate to another page.

Proposal

Information

Top level info

  • The Agent name + numeric agent id
  • The Agent connection status
  • Which cluster the Agent is installed on (optional)
  • User who installed the Agent and when the Agent was installed.
  • The Agent version.
  • Kubernetes version.
  • Date Agent last contacted GitLab.
  • Agent Namespace.

Tooltips

  • A warning icon if the Agent version is older than the kas version with a tooltip prompting the user to update the Agent version and the reasons).
  • For the connection status "Not connected" and "Never connected" show a popover explaining possible reasons and including a link to the troubleshooting docs.
  • For Connected status a tooltip with the relative date/time that the connection was established.
  • A tooltip will be shown on hover of the Namespace and will explain that it's the Agent namespace.

Token list

Add a list of tokens that have been created for the cluster agentk connection to GitLab's kas agent. In the list the user should be able to see:

  • the token name.
  • the status of the tokens: active, available or not used, revoked (by user or by the system).
  • Last used.
  • who created the token.
  • when the token was created.
  • the description of the token.

Tooltips

  • For truncated descriptions a tooltip will show the full description.
  • All the exact dates and times will be shown via tooltips for all the relative dates on the screen.
  • For revoked tokens a tooltip will show who revoked them and when. If the token expired then the tooltip will say "Revoked by GitLab on ".

Actions

  • An Action Revoke to revoke a token.

  • An interaction should also be added to allow the users create a new token. If this is not possible for the MVC then a link should be added instead

000__Agent_details_page-Access_tokens_tab

MVC_Agent_details_page-Access_tokens_list-Link_to_token_docs

003_Agent_details_page-Agent_status_with_new_icons__2_

002__Agent_details_page-Agent_information

Warnings

  • Show a warning if the configuration project points to a different manifest project. - No design

Further details

Tokens are documented here https://gitlab.com/gitlab-org/cluster-integration/gitlab-agent/-/blob/master/doc/identity_and_auth.md#authentication

Conversations about tokens:

Permissions and Security

Project maintainers should be able to see the Access tokens tab.

Links / references

Design: Cluster details page for a cluster managed by an agent- Initial explorations

Figma project

Edited by Viktor Nagy (GitLab)