WIP: Tweak SIP and AIP pages

dashboard/src/components/PackageLocationCard.vue

@@ -47,22 +47,35 @@ const choose = async () => {
           authStore.checkAttributes(['package:move'])
         "
       >
-        <button
-          type="button"
-          class="btn btn-primary btn-sm"
-          @click="choose"
-          :disabled="!packageStore.isMovable"
-        >
-          <template v-if="packageStore.isMoving">
-            <span
-              class="spinner-grow spinner-grow-sm me-2"
-              role="status"
-              aria-hidden="true"
-            ></span>
-            Moving...
-          </template>
-          <template v-else>Choose storage location</template>
-        </button>
+        <div class="d-flex flex-wrap gap-2">
+          <button
+            type="button"
+            class="btn btn-primary btn-sm"
+            @click="choose"
+            :disabled="!packageStore.isMovable"
+          >
+            <template v-if="packageStore.isMoving">
+              <span
+                class="spinner-grow spinner-grow-sm me-2"
+                role="status"
+                aria-hidden="true"
+              ></span>
+              Moving...
+            </template>
+            <template v-else>Choose storage location</template>
+          </button>
+          <button
+            v-if="authStore.checkAttributes(['storage:package:download'])"
+            :class="{
+              btn: true,
+              'btn-primary': true,
+              'btn-sm': true,
+            }"
+            type="button"
+          >
+            Download
+          </button>
+        </div>
       </div>
     </div>
   </div>

dashboard/src/pages/ingest/sips/[id]/index.vue

@@ -29,11 +29,11 @@ const createAipWorkflow = computed(
   <div v-if="packageStore.current">
     <div class="row">
       <div class="col-md-6">
-        <h2>AIP creation details</h2>
+        <h2>SIP details</h2>
         <dl>
           <dt>Name</dt>
           <dd>{{ packageStore.current.name }}</dd>
-          <dt>AIP UUID</dt>
+          <dt>UUID</dt>
           <dd><UUID :id="packageStore.current.aipId" /></dd>
           <dt>Workflow status</dt>
           <dd>
@@ -62,10 +62,7 @@ const createAipWorkflow = computed(
           </dd>
         </dl>
       </div>
-      <div class="col-md-6">
-        <PackageLocationCard />
-        <PackageDetailsCard />
-      </div>
+      <div class="col-md-6"></div>
     </div>
 
     <div v-if="authStore.checkAttributes(['package:listActions'])">

dashboard/src/pages/ingest/sips/index.vue

@@ -12,7 +12,7 @@ import { useAsyncState } from "@vueuse/core";
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { usePackageStore } from "@/stores/package";
-import { useRoute, useRouter, type LocationQueryValue } from "vue-router/auto";
+import { useRoute, useRouter } from "vue-router/auto";
 import { computed, ref, watch } from "vue";
 
 // General icons.
@@ -187,8 +187,8 @@ watch(
             <th scope="col">ID</th>
             <th scope="col">Name</th>
             <th scope="col">UUID</th>
+            <th scope="col">Workflow</th>
             <th scope="col">Started</th>
-            <th scope="col">Location</th>
             <th scope="col">
               <span class="d-flex gap-2">
                 Status
@@ -223,10 +223,8 @@ watch(
             <td>
               <UUID :id="pkg.aipId" />
             </td>
+            <td>Create AIP</td>
             <td>{{ $filters.formatDateTime(pkg.startedAt) }}</td>
-            <td>
-              <UUID :id="pkg.locationId" />
-            </td>
             <td>
               <StatusBadge :status="pkg.status" />
             </td>
@@ -329,7 +327,7 @@ watch(
         </ul>
       </nav>
       <div class="text-muted mb-3 text-center">
-        Showing packages {{ packageStore.page.offset + 1 }} -
+        Showing SIPs {{ packageStore.page.offset + 1 }} -
         {{ packageStore.lastResultOnPage }} of
         {{ packageStore.page.total }}
       </div>

dashboard/src/pages/storage/aips/[id].vue

@@ -6,16 +6,16 @@ import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "@/stores/package";
 import { useAsyncState } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router/auto";
-import IconSIPs from "~icons/octicon/package-dependencies-24";
+import IconAIPs from "~icons/clarity/bundle-line";
 import IconDetails from "~icons/clarity/details-line?raw&font-size=20px";
 
-const route = useRoute("/ingest/sips/[id]");
+const route = useRoute("/storage/aips/[id]");
 const router = useRouter();
 const authStore = useAuthStore();
 const packageStore = usePackageStore();
 
 const { execute, error } = useAsyncState(
-  packageStore.fetchCurrent(route.params.id.toString()),
+  packageStore.fetchCurrent(route.params.id.toString(), true),
   null,
 );
 
@@ -24,10 +24,10 @@ const tabs = [
     icon: IconDetails,
     text: "Summary",
     route: router.resolve({
-      name: "/ingest/sips/[id]/",
+      name: "/storage/aips/[id]/",
       params: { id: route.params.id },
     }),
-    show: authStore.checkAttributes(["package:read"]),
+    show: authStore.checkAttributes(["storage:aip:read"]),
   },
 ];
 </script>
@@ -39,7 +39,7 @@ const tabs = [
     <PackagePendingAlert v-if="packageStore.current" />
 
     <h1 class="d-flex mb-3" v-if="packageStore.current">
-      <IconSIPs class="me-3 text-dark" />{{ packageStore.current.name }}
+      <IconAIPs class="me-3 text-dark" />{{ packageStore.current.name }}
     </h1>
 
     <Tabs :tabs="tabs" param="id" />

dashboard/src/pages/storage/aips/[id]/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { api } from "@/client";
-import PackageDetailsCard from "@/components/PackageDetailsCard.vue";
 import PackageLocationCard from "@/components/PackageLocationCard.vue";
 import PreservationActionCollapse from "@/components/PreservationActionCollapse.vue";
 import StatusBadge from "@/components/StatusBadge.vue";
@@ -29,20 +28,18 @@ const createAipWorkflow = computed(
   <div v-if="packageStore.current">
     <div class="row">
       <div class="col-md-6">
-        <h2>AIP creation details</h2>
+        <h2>AIP details</h2>
         <dl>
           <dt>Name</dt>
           <dd>{{ packageStore.current.name }}</dd>
-          <dt>AIP UUID</dt>
+          <dt>UUID</dt>
           <dd><UUID :id="packageStore.current.aipId" /></dd>
-          <dt>Workflow status</dt>
+          <dt>Last workflow status</dt>
           <dd>
             <StatusBadge
               v-if="createAipWorkflow"
               :status="createAipWorkflow.status"
-              :note="
-                $filters.getPreservationActionLabel(createAipWorkflow.type)
-              "
+              note="Move AIP"
             />
           </dd>
           <dt>Started</dt>
@@ -64,7 +61,6 @@ const createAipWorkflow = computed(
       </div>
       <div class="col-md-6">
         <PackageLocationCard />
-        <PackageDetailsCard />
       </div>
     </div>
 

dashboard/src/pages/storage/aips/index.vue

@@ -12,12 +12,12 @@ import { useAsyncState } from "@vueuse/core";
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { usePackageStore } from "@/stores/package";
-import { useRoute, useRouter, type LocationQueryValue } from "vue-router/auto";
+import { useRoute, useRouter } from "vue-router/auto";
 import { computed, ref, watch } from "vue";
 
 // General icons.
 import IconInfo from "~icons/akar-icons/info-fill";
-import IconSIPs from "~icons/octicon/package-dependencies-24";
+import IconAIPs from "~icons/clarity/bundle-line";
 import IconSearch from "~icons/clarity/search-line";
 import IconClose from "~icons/clarity/close-line";
 
@@ -31,8 +31,6 @@ import IconCaretLeft from "~icons/bi/caret-left-fill";
 import IconAll from "~icons/clarity/blocks-group-line?raw&font-size=20px";
 import IconDone from "~icons/clarity/success-standard-line?raw&font-size=20px";
 import IconError from "~icons/clarity/remove-line?raw&font-size=20px";
-import IconInProgress from "~icons/clarity/sync-line?raw&font-size=20px";
-import IconQueued from "~icons/clarity/clock-line?raw&font-size=20px";
 
 const authStore = useAuthStore();
 const layoutStore = useLayoutStore();
@@ -41,7 +39,7 @@ const packageStore = usePackageStore();
 const route = useRoute();
 const router = useRouter();
 
-layoutStore.updateBreadcrumb([{ text: "Ingest" }, { text: "SIPs" }]);
+layoutStore.updateBreadcrumb([{ text: "Storage" }, { text: "AIPs" }]);
 
 const el = ref<HTMLElement | null>(null);
 let tooltip: Tooltip | null = null;
@@ -54,7 +52,7 @@ const toggleLegend = () => {
 
 const doSearch = () => {
   router.push({
-    name: "/ingest/sips/",
+    name: "/storage/aips/",
     query: { ...route.query, name: packageStore.filters.name },
   });
 };
@@ -68,16 +66,16 @@ const tabs = computed(() => [
     icon: IconAll,
     text: "All",
     route: router.resolve({
-      name: "/ingest/sips/",
+      name: "/storage/aips/",
       query: { ...route.query, status: undefined },
     }),
     show: true,
   },
   {
     icon: IconDone,
-    text: "Done",
+    text: "Stored",
     route: router.resolve({
-      name: "/ingest/sips/",
+      name: "/storage/aips/",
       query: { ...route.query, status: "done" },
     }),
     show: true,
@@ -86,29 +84,11 @@ const tabs = computed(() => [
     icon: IconError,
     text: "Error",
     route: router.resolve({
-      name: "/ingest/sips/",
+      name: "/storage/aips/",
       query: { ...route.query, status: "error" },
     }),
     show: true,
   },
-  {
-    icon: IconInProgress,
-    text: "In progress",
-    route: router.resolve({
-      name: "/ingest/sips/",
-      query: { ...route.query, status: "in progress" },
-    }),
-    show: true,
-  },
-  {
-    icon: IconQueued,
-    text: "Queued",
-    route: router.resolve({
-      name: "/ingest/sips/",
-      query: { ...route.query, status: "queued" },
-    }),
-    show: true,
-  },
 ]);
 
 const { execute, error } = useAsyncState(() => {
@@ -140,7 +120,7 @@ watch(
 
 <template>
   <div class="container-xxl">
-    <h1 class="d-flex mb-0"><IconSIPs class="me-3 text-dark" />SIPs</h1>
+    <h1 class="d-flex mb-0"><IconAIPs class="me-3 text-dark" />AIPs</h1>
 
     <div class="text-muted mb-3">
       Showing {{ packageStore.page.offset + 1 }} -
@@ -187,7 +167,7 @@ watch(
             <th scope="col">ID</th>
             <th scope="col">Name</th>
             <th scope="col">UUID</th>
-            <th scope="col">Started</th>
+            <th scope="col">Deposited</th>
             <th scope="col">Location</th>
             <th scope="col">
               <span class="d-flex gap-2">
@@ -215,7 +195,7 @@ watch(
             <td>
               <router-link
                 v-if="authStore.checkAttributes(['package:read'])"
-                :to="{ name: '/ingest/sips/[id]/', params: { id: pkg.id } }"
+                :to="{ name: '/storage/aips/[id]/', params: { id: pkg.id } }"
                 >{{ pkg.name }}</router-link
               >
               <span v-else>{{ pkg.name }}</span>
@@ -228,7 +208,8 @@ watch(
               <UUID :id="pkg.locationId" />
             </td>
             <td>
-              <StatusBadge :status="pkg.status" />
+              <StatusBadge v-if="pkg.status != 'done'" :status="pkg.status" />
+              <span v-else class="badge text-bg-success">STORED</span>
             </td>
           </tr>
         </tbody>
@@ -329,7 +310,7 @@ watch(
         </ul>
       </nav>
       <div class="text-muted mb-3 text-center">
-        Showing packages {{ packageStore.page.offset + 1 }} -
+        Showing AIPs {{ packageStore.page.offset + 1 }} -
         {{ packageStore.lastResultOnPage }} of
         {{ packageStore.page.total }}
       </div>

dashboard/src/stores/package.ts

@@ -139,7 +139,7 @@ export const usePackageStore = defineStore("package", {
       }
       handlers[event.type](value);
     },
-    async fetchCurrent(id: string) {
+    async fetchCurrent(id: string, aipsBreadcrumb: boolean = false) {
       const packageId = +id;
       if (Number.isNaN(packageId)) {
         throw Error("Unexpected parameter");
@@ -150,11 +150,19 @@ export const usePackageStore = defineStore("package", {
       // Update breadcrumb. TODO: should this be done in the component?
       const layoutStore = useLayoutStore();
 
-      layoutStore.updateBreadcrumb([
-        { text: "Ingest" },
-        { route: router.resolve("/ingest/sips/"), text: "SIPs" },
-        { text: this.current.name },
-      ]);
+      if (aipsBreadcrumb) {
+        layoutStore.updateBreadcrumb([
+          { text: "Storage" },
+          { route: router.resolve("/storage/aips/"), text: "AIPs" },
+          { text: this.current.name },
+        ]);
+      } else {
+        layoutStore.updateBreadcrumb([
+          { text: "Ingest" },
+          { route: router.resolve("/ingest/sips/"), text: "SIPs" },
+          { text: this.current.name },
+        ]);
+      }
 
       await Promise.allSettled([
         client.package