Resolve "Add UI for viewing and managing Resources"

Closes #88 (closed)

src/components/resources/ResourceCard.vue

@@ -25,6 +25,17 @@ const props = defineProps<{
 }>();
 let refreshTimeout: NodeJS.Timeout | undefined = undefined;
 
+const stateToUIMapping: Record<Status, string> = {
+  CLUSTER_DELETED: "Deleted on Cluster",
+  DENIED: "Rejected",
+  RESOURCE_REQUESTED: "Resource created",
+  S3_DELETED: "Deleted in S3",
+  SYNCHRONIZED: "Available",
+  SYNCHRONIZING: "Synchronizing to Cluster",
+  SYNC_REQUESTED: "Wait for Approval",
+  LATEST: "Available (Latest)",
+};
+
 const emit = defineEmits<{
   (e: "click-info", resourceVersion: ResourceVersionOut): void;
   (e: "click-update", resource: ResourceOut): void;
@@ -147,7 +158,7 @@ onMounted(() => {
                   resourceVersion.resource_version_id
                 "
               >
-                {{ resourceVersion.release }} - {{ resourceVersion.status }}
+                {{ resourceVersion.release }} - {{ stateToUIMapping[resourceVersion.status] }}
               </button>
             </h2>
             <div
@@ -163,7 +174,7 @@ onMounted(() => {
             >
               <div class="accordion-body">
                 <div>
-                  Created at:
+                  Registered at:
                   {{
                     dayjs.unix(resourceVersion.created_at).format("DD MMM YYYY")
                   }}