Merge pull request #791 from IATI/show_maintenance_mode_msg

feat: show detailed message from validator-services
IATI · Nov 7, 2024 · a4795c7 · a4795c7
2 parents 666e157 + 228f826
commit a4795c7
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,13 @@
-Summary
-=======
-
-Product  |  Validator Web Frontend
---- | ---
-Description | Vue.js app website for the IATI Validator.
-Website |  [https://validator.iatistandard.org/](https://validator.iatistandard.org)
-Related | [js-validator-api](https://github.com/IATI/js-validator-api), [validator-services](https://github.com/IATI/validator-services)
-Documentation | [https://developer.iatistandard.org/](https://developer.iatistandard.org/)
-Technical Issues | https://github.com/IATI/validator-web/issues
-Support | https://iatistandard.org/en/guidance/get-support/
+# Summary
+
+| Product          | Validator Web Frontend                                                                                                         |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Description      | Vue.js app website for the IATI Validator.                                                                                     |
+| Website          | [https://validator.iatistandard.org/](https://validator.iatistandard.org)                                                      |
+| Related          | [js-validator-api](https://github.com/IATI/js-validator-api), [validator-services](https://github.com/IATI/validator-services) |
+| Documentation    | [https://developer.iatistandard.org/](https://developer.iatistandard.org/)                                                     |
+| Technical Issues | https://github.com/IATI/validator-web/issues                                                                                   |
+| Support          | https://iatistandard.org/en/guidance/get-support/                                                                              |
 
 # Vue Template
 

diff --git a/cypress/integration/checkData.spec.js b/cypress/integration/checkData.spec.js
@@ -73,4 +73,28 @@ describe("The Ad Hoc Validate Check Data page", () => {
     cy.contains("a", "View Progress and Reports").click();
     cy.contains("Failed to load iati data please try again later");
   });
+  it("displays error message uploading a file when validator-services is in maintenance mode", () => {
+    cy.intercept("POST", "https://*api.iatistandard.org/vs/pvt/adhoc/upload?*", {
+      statusCode: 503,
+      body: { message: "Validator services is in read-only mode for maintenance" },
+    });
+    cy.get("input[type=file").selectFile("cypress/fixtures/iati-act-no-errors.xml", { force: true });
+    cy.contains("iati-act-no-errors.xml");
+    cy.contains("button", "Upload").should("not.be.disabled").click();
+    cy.contains("Validator services is in read-only mode for maintenance", { timeout: 20000 });
+    cy.contains("a", "View Progress and Reports").parent().should("have.class", "pointer-events-none");
+  });
+  it("displays error message fetching a url when validator-services is in maintenance mode", () => {
+    cy.intercept("POST", "https://*api.iatistandard.org/vs/pvt/adhoc/url?**/**", {
+      statusCode: 503,
+      body: { message: "Validator services is in read-only mode for maintenance" },
+    });
+    cy.contains("URL to a remote file").click();
+    cy.get("#url").type(
+      "https://raw.githubusercontent.com/IATI/IATI-Extra-Documentation/version-2.03/en/activity-standard/activity-standard.xml",
+    );
+    cy.contains("button", "Fetch").should("not.be.disabled").click();
+    cy.contains("Validator services is in read-only mode for maintenance", { timeout: 20000 });
+    cy.contains("a", "View Progress and Reports").parent().should("have.class", "pointer-events-none");
+  });
 });
diff --git a/src/components/LocalFilesValidator.vue b/src/components/LocalFilesValidator.vue
@@ -13,6 +13,7 @@
   const activeStep = ref(1);
   const files = ref([]);
   const requestStatus = ref(""); // 'pending' | 'draft' | 'success' | 'error' = 'draft'
+  const uploadErrorMessage = ref("");
 
   const onAddFiles = (_files) => {
     files.value = _files;
@@ -24,7 +25,14 @@
 
   const uploadFiles = () => {
     const handleError = (error) => {
-      console.error(error);
+      if (typeof error === "object" && typeof error.message === "string") {
+        try {
+          const errorResponse = JSON.parse(error.message);
+          uploadErrorMessage.value = errorResponse.message;
+        } catch (err) {
+          console.error(err);
+        }
+      }
       requestStatus.value = "error";
     };
 
@@ -62,7 +70,12 @@
       <p class="mb-4 text-center">Upload your IATI files and start validation.</p>
       <div v-if="requestStatus && requestStatus !== 'draft'" class="mb-3 text-sm">
         <AppAlert v-if="requestStatus === 'error'" variant="error">
-          File(s) uploading failed. Check your files and try again.
+          <template v-if="uploadErrorMessage === ''">
+            File(s) uploading failed. Check your files and try again.
+          </template>
+          <template v-else>
+            {{ uploadErrorMessage }}
+          </template>
         </AppAlert>
         <AppAlert v-else-if="requestStatus === 'success'" variant="success">
           File(s) have been uploaded successfully

diff --git a/src/components/RemoteFIlesValidator.vue b/src/components/RemoteFIlesValidator.vue
@@ -11,6 +11,7 @@
   const props = defineProps({ workspaceID: { type: String, default: "" } });
   const activeStep = ref(1);
   const requestStatus = ref(""); // 'pending' | 'draft' | 'success' | 'error' = 'draft'
+  const includeGenericErrorMessage = ref(true);
   const requestErrorMessage = ref("");
   const urls = ref("");
   const incorrectURLs = ref([]);
@@ -51,22 +52,19 @@
         requestStatus.value = "error";
         if (error && error.message) {
           requestErrorMessage.value = error.message;
+          if (error.cause.status === 503) {
+            includeGenericErrorMessage.value = false;
+          }
         } else {
-          console.log("Error: ", error);
+          console.log(`Error received from IATI Validator Services: ${error}`);
         }
       };
 
       requestStatus.value = "pending";
       parallelUpload(correctURLs).subscribe({
-        next: (response) => {
-          const responseText = Array.isArray(response) && response.length ? response[0] : response;
-          if (responseText === "success") {
-            activeStep.value = 3;
-            requestStatus.value = "success";
-          } else {
-            requestStatus.value = "error";
-            requestErrorMessage.value = responseText;
-          }
+        next: () => {
+          activeStep.value = 3;
+          requestStatus.value = "success";
         },
         error: handleError,
       });
@@ -98,7 +96,10 @@
       <p class="mb-4 text-center">Fetch the files from the web.</p>
       <div v-if="requestStatus && requestStatus !== 'draft'" class="mb-3 text-sm">
         <AppAlert v-if="requestStatus === 'error'" variant="error">
-          File(s) uploading failed. Check your files and try again.<br />{{ requestErrorMessage }}
+          <template v-if="includeGenericErrorMessage">
+            File(s) uploading failed. Check your files and try again.<br />
+          </template>
+          {{ requestErrorMessage }}
         </AppAlert>
         <AppAlert v-else-if="requestStatus === 'success'" variant="success">
           File(s) have been uploaded successfully

diff --git a/src/utils/api/validate.js b/src/utils/api/validate.js
@@ -33,11 +33,18 @@ export const fetchFileFromURL = async (fileUrl, workspaceID) => {
   });
 
   if (req.status === 200) return "success";
+
+  let errorMessage = "";
   if (req.status === 422) {
     const error = await req.json();
-
-    return error.message.includes(fileUrl) ? error.message : `${error.url} - ${error.message}`;
+    errorMessage = error.message.includes(fileUrl) ? error.message : `${error.url} - ${error.message}`;
+  } else if (req.status === 503) {
+    const error = await req.json();
+    errorMessage = error.message;
+  } else {
+    errorMessage = req.text;
   }
+  throw new Error(errorMessage, { cause: { status: req.status } });
 };
 
 export const getTempWorkspaceURL = (workspaceID) => `${SERVICES_URL}/pvt/adhoc/session/?sessionId=${workspaceID}`;