Improve Geo Nodes admin screen
Description
This is how our Geo Nodes admin screen look like today:

There are a lot of information and concerns in a single screen:
- CRUD
- Monitoring
- Health Checking and Error displaying
- Disabling / Re-enabling replication
- Repairing configuration (if some of dependencies are removed a button to repair shows up next to the Node).
- Selective replication (you can choose a node to sync only specified namespaces)
Proposal / Questions
We need UX work here. Few things in my mind:
- We may want to hide the form and show it only when the user clicks a "Add a new Geo node" button
- We need a "hero" onboarding instruction (perhaps this is what I meant: https://gitlab.com/gitlab-org/gitlab-ee/issues/1363)
- There are a lot of tabular information need to rethink something
- We display percentage of completude, perhaps we can show a nice progress bar or a composed progress bar with different colors for Actual / Remaining / Failed
- Should we hide the extra information in a collapsable something?
- How do we display more than one error?
- Where do we display then?
- Should we have a "checklist" with "green" and "red" dots for everything we are testing on behalf of our user?
- How do we display / communicate selective replication?
- Should we have icons for "full" and "selective"?
- Should we display all selected namespaces, or hide it into a collapsable something? in a modal? New page?
We are not finished yet on the amount of things we want to communicate, there are this other issues on the backlog:
- https://gitlab.com/gitlab-org/gitlab-ee/issues/1929
- https://gitlab.com/gitlab-org/gitlab-ee/issues/1996
- https://gitlab.com/gitlab-org/gitlab-ee/issues/1957 (we've already implemented most of it but there are things remaining)
- https://gitlab.com/gitlab-org/gitlab-ee/issues/1751
- https://gitlab.com/gitlab-org/gitlab-ee/issues/727
- https://gitlab.com/gitlab-org/gitlab-ee/issues/1285
- https://gitlab.com/gitlab-org/gitlab-ee/issues/2968
Design
- If there are no nodes on 'Geo Nodes' page, it will show the empty state from https://gitlab.com/gitlab-org/gitlab-ee/issues/1363.
- If there are nodes on 'Geo Nodes' page, only the 'Geo nodes' table will be displayed. (Mockup 01)
- The 'Add new node' form is removed from this page and displays on a separate page. (Mockup 02)
- On 'New node' and 'Edit Geo Node' pages, if
[] This is primary nodeis checked,Public keyandNamespaces to replicatewill be hidden.(Mockup 03)
Progress bar
- It includes the numbers of 'Synced', 'Failed', and 'Out of sync' in the progress bar.
- When the mouse is over the progress bar, a tooltip with the percentage will show up.
Selective replications
- The selective replications aren't displayed on 'Geo Nodes' page. Considering that there might be thousands of replications, so they will only be shown in the 'edit form'.
- Instead, only the status of sync setting will be displayed.
Last event info
- Last event info displays next to status of Selective replications.
- 5 minutes up to 1 hour: A tooltip with
Node is slow, overloaded, or it just recovered after an outage.shows up when it's hovering. - Over 1 hour: A tooltip with
Node is failing or broken.shows up when the mouse is over the text.
| Up to 5 minutes | 5 minutes up to 1 hour | Over 1 hour |
|---|---|---|
![]() |
![]() |
![]() |
Errors
- If there is more than one error, the second error displays under the first error. Users can expand the error message if it has detail information (e.g. health checklist). (Mockup 05)
| 01 | 02 |
|---|---|
![]() |
![]() |
| 03 | 04 - Edit Geo Node |
|---|---|
![]() |
![]() |
| 05 - Erros |
|---|
![]() |
Icons used both in errors and last event info
Icon used in last event info
The colors for the bars:
- Failed:
- Background -
$red-500 - Hover -
$red-600 - Font -
$white
- Synced:
- Background -
$green-500 - Hover -
$green-600 - Font -
$white
- Waiting:
- Background -
$grey-200 - Hover -
$grey-300 - Font -
$grey-700
- Not available:
- Background -
$grey-100 - Font -
$grey-600
Design for the mobile:
Edited by Hazel Yang







