Improve the location of where the runner registration information lives

Overview

The Admin Area > Runners view needs to be re-designed to be more consistent with other GitLab views, making use of the space more effectively, and to be the building block for future improvements to the Runner Fleet Management experience, especially for organizations with tens of thousands of runners.

Guiding Principles

  • The vision is to provide administrators with a birds-eye view and configuration management capabilities to administer a fleet (tens of thousands) of GitLab runners easily.

  • We will emphasize actionable insights, simplicity, ease of use, engaging and modern tooling.

User story

Goal: As an Admin, I want to view an overview of the data related to my organization's fleet of runners, so I can make effective decisions.

Stories to remain intact with changes: As an Admin, I want to register a runner. As an Admin, I want to reset my runner registration token.

Acceptance criteria

Visit the full prototype to see all interactions

  • Remove the summary card, and rely on the docs for any general runner definitions
  • Transfer definitions of labels to tooltips that appear upon hovering over labels
  • Add a single tab named All that sits left-aligned to where the register button will be
  • Add Register an instance runner dropdown button below the divider that includes:
    • Show runner installation and registration instructions
    • Registration token
    • Reset registration token
  • Selecting show runner installation and registration instructions will bring up the modal we have today with additional tweaks:
    • Below the one-line copy instructions, add Registration token and Instance URL fields with the ability to copy each of those
  • Registration token allows for copying the token as well as showing/hiding it
    • Copying will confirm that the string was copied with "Copied!" tooltip
  • Reset registration token remains the same as today with the confirmation modal

Design proposal

🎨 Static designs

Full prototype in Figma

UX Definition of Done

Edited by Gina Doyle