### 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 node` is checked, `Public key` and `Namespaces to replicate` will 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 - [Warning](https://gitlab.com/gitlab-org/gitlab-svgs/blob/master/sprite_icons/warning.svg) - [Check](https://gitlab.com/gitlab-org/gitlab-svgs/blob/master/sprite_icons/issue-close.svg) ##### Icon used in last event info - [Sync](https://gitlab.com/gitlab-org/gitlab-svgs/blob/master/sprite_icons/retry.svg) ##### 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: [geo-admin--mobile](/uploads/217171e6106dab15b7b65a3857261d34/geo-admin--mobile.png) cc @stanhu @dbalexandre @to1ne @rspeicher