Merge branch 'develop': tape handling

subugoe · Jan 31, 2024 · f7b4a41 · f7b4a41
2 parents b4015be + 9958cac
commit f7b4a41
Show file tree

Hide file tree

Showing 9 changed files with 378 additions and 268 deletions.
diff --git a/cypress/e2e/import_archive.cy.ts b/cypress/e2e/import_archive.cy.ts
@@ -37,6 +37,7 @@ describe("Import first Archive", () => {
 describe("Test import validation", () => {
   it("Invalid mets should be rejected with appropriate error", () => {
     uploadArchive("cypress/fixtures/example_invalid_mets_structure.ocrd.zip")
+    cy.wait(2000)
     cy.contains("Failed")
   });
 });
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "jquery.easing": "^1.4.1",
     "moment": "^2.24.0",
     "oidc-client": "^1.11.5",
+    "postcss": "^8.4.33",
     "primevue": "^3.42.0",
     "streamsaver": "^2.0.3",
     "tailwindcss": "^3.0.24",

diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,9 @@
     <div class="h-14" />
     <Main v-if="isHeaderVisible"></Main>
     <div class="flex flex-1 flex-col">
-      <RouterView />
+      <Router-View v-slot="{ Component, route }">
+        <component :is="Component" :key="$route.fullPath" />
+      </Router-View>
     </div>
     <Footer />
   </div>

diff --git a/src/components/dashview/Dashboard.vue b/src/components/dashview/Dashboard.vue
@@ -20,27 +20,24 @@
               </thead>
               <tbody>
                 <template v-if="this.records.length > 0">
-                  <tr
-                    v-for="(record, index) in records"
-                    :key="index"
-                    class="
+                  <tr v-for="(record, index) in records" :key="index" class="
                       border-b
                       text-sm text-gray-900
                       font-light
                       whitespace-nowrap
-                    "
-                  >
+                    ">
                     <td class="px-6 py-4">
                       {{ formatDate(record.trackingInfo.timestamp) }}
                     </td>
                     <td class="px-6 py-4">
-                      <a
-                        :href="buildUrl(record)"
-                        class="text-sky-500 hover:text-slate-700"
-                        target="_blank"
-                      >
-                        {{ record.trackingInfo.pid }}
-                      </a>
+                      <router-link :to="{
+                        name: 'search-detail',
+                        query: {
+                          id: record.trackingInfo.pid,
+                        },
+                      }" class="search-item-link text-sky-600 hover:text-sky-900">
+                        <p>{{ record.trackingInfo.pid }}</p>
+                      </router-link>
                     </td>
                     <td class="px-6 py-4">
                       <span :class="getCssState(record.trackingInfo.status)">
@@ -67,8 +64,7 @@
         </div>
       </div>
     </div>
-    <section
-      class="
+    <section class="
         flex
         justify-end
         rounded-lg
@@ -78,28 +74,19 @@
         py-3
         text-gray-700
         font-montserrat
-      "
-    >
+      ">
       <ul class="flex items-center">
         <div class="flex flex-1 justify-around items-center">
           <li>
-            <button
-              class="pr-4 text-gray-700 font-medium"
-              aria-label="Previous"
-              @click="switchPage(-1)"
-              v-if="hasPreviousPage"
-            >
+            <button class="pr-4 text-gray-700 font-medium" aria-label="Previous"
+              @click="switchPage(-1)" v-if="hasPreviousPage">
               <span aria-hidden="true">&laquo; Previous</span>
               <span class="sr-only">Previous</span>
             </button>
           </li>
           <li>
-            <button
-              class="pr-4 text-gray-700 font-medium"
-              aria-label="Next"
-              @click="switchPage(1)"
-              v-if="hasNextPage"
-            >
+            <button class="pr-4 text-gray-700 font-medium" aria-label="Next" @click="switchPage(1)"
+              v-if="hasNextPage">
               <span aria-hidden="true">Next &raquo;</span>
               <span class="sr-only">Next</span>
             </button>

diff --git a/src/components/download-files/Download.vue b/src/components/download-files/Download.vue
@@ -41,10 +41,13 @@
             <b>{{ slotProps.node.label }} ({{ slotProps.node.children.length }})</b>
           </template>
           <template #leaf="slotProps">
-            {{ slotProps.node.label }} - <a :href="buildUrl(pid, slotProps.node.key)" target="_blank" class="text-sky-500 hover:text-slate-700">View</a>
+            {{ slotProps.node.label }}
+            <span v-if="!slotProps.node.isDisabled" >
+              - <a :href="buildUrl(pid, slotProps.node.key)" target="_blank" class="text-sky-500 hover:text-slate-700">View</a>
+            </span>
           </template>
         </Tree>
-        <button @click="download" class="
+        <button @click="download" :disabled="!isOpen" class="
             rounded
             border
             px-3
@@ -57,6 +60,8 @@
             dark:hover:bg-gray-700
             whitespace-nowrap
             max-h-9
+            disabled:bg-sky-200
+            disabled:border-sky-200
           ">
           <i class="fas fa-download" /> {{ "Download" }}
         </button>
@@ -83,6 +88,10 @@ export default {
       type: String,
       default: "",
     },
+    isUserLoggedIn: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -96,7 +105,8 @@ export default {
   },
   computed: {
     isOpen() {
-      return this.archiveInfo.state !== "archived";
+      return this.archiveInfo.state == "open"
+        || (this.archiveInfo.state == "locked" && this.isUserLoggedIn);
     },
     isDisabled() {
       return !this.isOpen || this.value.length < 1;
@@ -184,7 +194,7 @@ export default {
 
       try {
         while (true) {
-          let response = await lzaApi.getArchiveInfo(this.pid, limit, offset);
+          let response = await lzaApi.getArchiveInfo(this.pid, limit, offset, true);
           if (firstCall) {
             // Store all data for the first call
             this.archiveInfo = response.data;

diff --git a/src/pages/search-detail/index.vue b/src/pages/search-detail/index.vue
@@ -22,7 +22,8 @@
         </div>
       </div>
     </div>
-
+    <!-- Message if archived was just moved from tape to disk -->
+    <span v-if="moveTriggered">Request accepted. Data is being transferred from tape to hard drive.</span>
     <div class="row" v-if="loading">
       <div class="col text-center">
         <img src="@/assets/spin-1s-100px.gif" alt="Searching" />
@@ -60,7 +61,7 @@
         >
           <h4 class="text-base">{{ title }}</h4>
           <div>
-            <button @click="exportArchive" :class="buttonClass">
+            <button @click="exportArchive" :class="buttonClass" :disabled="!isOpen">
               <i class="fas fa-download mr-1" />
               {{ "Export" }}
             </button>
@@ -89,48 +90,65 @@
 
       <!-- File structure -->
       <section class="border rounded mt-4">
-        <download-files :pid="this.id" />
+        <Download :pid="this.id" :isUserLoggedIn="this.isUserLoggedIn"/>
       </section>
 
       <!-- Version -->
       <section class="border rounded mt-4 mb-4">
         <versions :pid="this.id" />
       </section>
-      <a target="_blank" class="text-sky-500 hover:text-sky-700" :href=linkToDfgviewer>
-        Open in DFG viewer
-      </a>
+
+      <div class="grid grid-cols-1 gap-2 content-start my-5">
+        <button v-show="showExportRequestButton" class="text-sky-500 hover:text-sky-700 w-fit"
+          @click="moveArchive" >
+            Move archive from tape to disk
+          </button>
+          <a target="_blank" class="text-sky-500 hover:text-sky-700" :href=linkToDfgviewer>
+            Open in DFG viewer
+        </a>
+      </div>
     </template>
   </div>
 </template>
 
 <script>
 import lzaApi from "@/services/lzaApi";
-import DownloadFiles from "../../components/download-files/Download.vue";
+import Download from "../../components/download-files/Download.vue";
 import Versions from "../../components/version/Versions.vue";
 import { WritableStream } from "web-streams-polyfill/ponyfill";
 import streamSaver from "streamsaver";
+import { authService } from "../../auth/auth";
 
 export default {
   components: {
-    DownloadFiles,
+    Download,
     Versions,
   },
   data() {
     return {
       versionInfo: {},
+      archiveInfo: {},
       error: null,
       error_msg: null,
       loading: true,
       response: null,
       isExpanded: false,
+      isUserLoggedIn: this,
+      listenerKey: -1,
+      moveTriggered: false,
     };
   },
+
   computed: {
     id() {
       return this.$route.query.id;
     },
     buttonClass() {
-      return "rounded border mr-4 px-3 py-1 border-sky-500 bg-sky-500 text-white dark:hover:bg-gray-700";
+      return "rounded border mr-4 px-3 py-1 border-sky-500 bg-sky-500 text-white " +
+        "dark:hover:bg-gray-700 disabled:bg-sky-200 disabled:border-sky-200";
+    },
+    showExportRequestButton() {
+      return this.archiveInfo.state == "archived" && this.isUserLoggedIn && !this.moveTriggered
     },
     info() {
       if (!this.response) {
@@ -183,8 +201,13 @@ export default {
     linkToDfgviewer() {
       var host = window.location.protocol + "//" + window.location.host;
       return 'https://dfg-viewer.de/show/?set[mets]=' + host + '/api/export/mets-web?id=' + this.id
-    }
+    },
+    isOpen() {
+      return this.archiveInfo.state == "open"
+        || (this.archiveInfo.state == "locked" && this.isUserLoggedIn);
+    },
   },
+
   methods: {
     toggleExpand() {
       this.isExpanded = !this.isExpanded;
@@ -193,7 +216,6 @@ export default {
       try {
         this.loading = true;
         const response = await lzaApi.getSearchDetailsById(this.id);
-
         this.response = response.data;
       } catch (error) {
         if (error && error.message && error.message.includes("404")) {
@@ -206,17 +228,46 @@ export default {
         this.loading = false;
       }
     },
+    async loadArchiveInfo() {
+      let response = await lzaApi.getArchiveInfo(this.id, 0, 0, false);
+      this.archiveInfo = response.data;
+    },
 
     exportArchive() {
-      lzaApi
-        .exportArchive(this.id)
-        .then((response) => {
-          this.consumeDownloadStream(response);
-        })
-        .catch((error) => {
-          this.error_msg = "Unknown error when exporting archive"
-          this.error = true;
-        });
+      if (this.archiveInfo.state == 'open') {
+        lzaApi
+          .exportArchive(this.id)
+          .then((response) => {
+            this.consumeDownloadStream(response);
+          })
+          .catch((error) => {
+            this.error_msg = "Unknown error when exporting archive"
+            this.error = true;
+          });
+      } else if (this.archiveInfo.state == 'locked' && this.isLoggedIn){
+        lzaApi
+          .exportFullArchive(this.id)
+          .then((response) => {
+            this.consumeDownloadStream(response);
+          })
+          .catch((error) => {
+            this.error_msg = "Unknown error when exporting full archive"
+            this.error = true;
+          });
+      }
+    },
+
+    moveArchive() {
+      if (!this.moveTriggered) {
+        lzaApi.exportRequest(this.id)
+          .then((response) => {
+            this.moveTriggered = true
+          })
+          .catch((error) => {
+            this.error_msg = "Moving archive from tape to disk failed"
+            this.error = true;
+          });
+      }
     },
 
     consumeDownloadStream(response) {
@@ -257,6 +308,17 @@ export default {
   },
   async created() {
     await this.loadData();
+    await this.loadArchiveInfo();
+  },
+  async unmounted() {
+    authService.removeLoggedInListener(this.listenerKey);
+  },
+  async mounted() {
+    var self = this
+    this.listenerKey = authService.addLoggedInListener((newVal) => {
+      self.isUserLoggedIn = newVal
+    })
+    this.isUserLoggedIn = await authService.isUserLoggedIn();
   },
   watch: {
     "$route.params.id": "loadData",

diff --git a/src/services/lzaApi.ts b/src/services/lzaApi.ts
@@ -15,11 +15,11 @@ export default {
         });
     },
 
-    getArchiveInfo(id: string, limit: number, offset: number) {
+    getArchiveInfo(id: string, limit: number, offset: number, withFile: boolean) {
         return axios.get(`/search-archive`, {
             params: {
                 id,
-                withFile: true,
+                withFile,
                 limit,
                 offset,
             },
@@ -53,6 +53,21 @@ export default {
         });
     },
 
+    exportFullArchive(pid: string) {
+        const url = `${this.getBaseUrl()}export-full?id=${pid}&isInternal=false`;
+        return fetch(url, {
+            method: 'GET',
+        });
+    },
+
+    exportRequest(pid: string) {
+        return axios.get(`/export-request`, {
+            params: {
+                id: pid,
+            },
+        });
+    },
+
     getBaseUrl() {
         let baseURL = axios.defaults.baseURL ? axios.defaults.baseURL : '/api/';
         baseURL += baseURL.endsWith('/') ? '' : '/';

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,8 @@
 {
+  "compileOptions": {
+    "alllowJs": true,
+    "noImplicitAny": false
+  },
   "files": [],
   "references": [
     {