Geo Replicable Details - Present meaningful information to the user about a single replicable item

What / Why

We are working to create a view that allows users to "dig into" a single replicable item's details: &16249 (closed)

This change is focused on presenting information that is meaningful to the customer about a single replicable item. The highest priority of this page is surfacing error information (or lack there of) to the user.

We currently have the follow data that should be available from the replicable item:

id                                  bigint
retry_at                            timestamp with time zone
last_synced_at                      timestamp with time zone
created_at                          timestamp with time zone
state                               smallint
retry_count                         smallint
last_sync_failure                   text
force_to_redownload                 boolean
missing_on_primary                  boolean
verification_started_at             timestamp with time zone
verified_at                         timestamp with time zone
verification_retry_at               timestamp with time zone
verification_retry_count            integer
verification_state                  smallint
checksum_mismatch                   boolean
verification_checksum               bytea
verification_checksum_mismatched    bytea
verification_failure                character varying(255)

Proposal

1. Implement a UI on the Vue component implemented as part of #509360 (closed)
   • This UI should present all the meaningful information about a Replicable Item
   • We can possibly try to find logical ways to group the data into sections
   • The Error information is the most important information in this UI

Implementation details

1. Add UI elements to the Vue component ee/app/assets/javascripts/geo_replicable_item/components/app.vue
   • We will want to reference existing UIs and https://design.gitlab.com/ to build this UI as we don't have an assigned designer currently.