Add resource info modal to review page

#88

README.md

@@ -18,3 +18,7 @@ When accessing the website, these variables will be loaded dynamically into the
 | `S3PROXY_API_BASE_URL`  | unset   | HTTP URL | Base URL for the S3Proxy Service API             |
 | `S3_URL`                | unset   | HTTP URL | URL of the S3 storage to interact with           |
 | `DEV_SYSTEM`            | `false` | boolean  | Flag if the service is installed on a Dev system |
+
+## License
+
+The API is licensed under the [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) license. See the [License](LICENSE) file for more information

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")
                   }}

src/components/admin/ResourceVersionInfoModal.vue → src/components/resources/ResourceVersionInfoModal.vue

@@ -26,8 +26,8 @@ const resourceVersion = computed<ResourceVersionOut | undefined>(
     size-modifier="lg"
   >
     <template #header
-      >Resource Version
-      <span v-if="resourceVersion">{{ resourceVersion.release }}</span>
+      >Resource
+      <b v-if="resourceVersion">{{resource?.name}}@{{ resourceVersion?.release }}</b>
     </template>
     <template #body>
       <h5>Resource</h5>

src/views/admin/AdminResourcesView.vue

@@ -11,7 +11,7 @@ import type { User } from "@/client/auth";
 import { useNameStore } from "@/stores/names";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import dayjs from "dayjs";
-import ResourceVersionInfoModal from "@/components/admin/ResourceVersionInfoModal.vue";
+import ResourceVersionInfoModal from "@/components/resources/ResourceVersionInfoModal.vue";
 
 const resourceRepository = useResourceStore();
 const nameRepository = useNameStore();

src/views/resources/ReviewResourceView.vue

 <script setup lang="ts">
 import { useResourceStore } from "@/stores/resources";
 import { computed, onMounted, reactive } from "vue";
-import { type ResourceVersionOut, Status } from "@/client/resource";
+import {
+  type ResourceOut,
+  type ResourceVersionOut,
+  Status,
+} from "@/client/resource";
 import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import { Tooltip } from "bootstrap";
+import ResourceVersionInfoModal from "@/components/resources/ResourceVersionInfoModal.vue";
+import BucketDetailModal from "@/components/object-storage/modals/BucketDetailModal.vue";
+import {useNameStore} from "@/stores/names";
 
 const resourceRepository = useResourceStore();
+const nameRepository = useNameStore();
 let refreshTimeout: NodeJS.Timeout | undefined = undefined;
 
 const resourceState = reactive<{
   sendingRequest: boolean;
   loading: boolean;
+  inspectResource?: ResourceOut;
+  inspectVersionIndex: number;
 }>({
   sendingRequest: false,
   loading: true,
+  inspectResource: undefined,
+  inspectVersionIndex: 0,
 });
 
 const countItems = computed<number>(() =>
@@ -26,7 +38,7 @@ const countItems = computed<number>(() =>
 );
 
 function fetchResources() {
-  resourceRepository.fetchReviewableResources().finally(() => {
+  resourceRepository.fetchReviewableResources(() => {
     resourceState.loading = false;
   });
 }
@@ -52,6 +64,11 @@ onMounted(() => {
 </script>
 
 <template>
+  <resource-version-info-modal
+    modal-id="review-resource-version-info-modal"
+    :resource-version-index="resourceState.inspectVersionIndex"
+    :resource="resourceState.inspectResource"
+  />
   <div
     class="row m-2 border-bottom mb-4 justify-content-between align-items-center"
   >
@@ -95,7 +112,8 @@ onMounted(() => {
         <th scope="col">Resource</th>
         <th scope="col">Release</th>
         <th scope="col">Status</th>
-        <th scope="col">S3 Path</th>
+        <th scope="col">Maintainer</th>
+        <th scope="col"></th>
         <th scope="col" class="text-end">Action</th>
       </tr>
     </thead>
@@ -105,25 +123,26 @@ onMounted(() => {
         :key="resource.resource_id"
       >
         <tr
-          v-for="version in resource.versions"
+          v-for="(version, index) in resource.versions"
           :key="version.resource_version_id"
         >
           <th>{{ resource.name }}</th>
           <th>{{ version.release }}</th>
           <th>{{ version.status }}</th>
+          <th>{{ nameRepository.getName(resource.maintainer_id) }}</th>
           <th>
-            <div class="input-group">
-              <input
-                class="form-control form-control-sm"
-                type="text"
-                :value="version.s3_path"
-                aria-label="S3 Access Path"
-                readonly
-              />
-              <span class="input-group-text"
-                ><copy-to-clipboard-icon :text="version.s3_path"
-              /></span>
-            </div>
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-bs-toggle="modal"
+              data-bs-target="#review-resource-version-info-modal"
+              @click="
+                resourceState.inspectResource = resource;
+                resourceState.inspectVersionIndex = index;
+              "
+            >
+              Inspect
+            </button>
           </th>
           <th class="text-end">
             <div