Synop raw or url (#2)

* deal with raw data or file-url returned by API * deal with raw data or file-url returned by API * add post-merge fix * check failed tests, add sleep * sleeep
wmo-im · Aug 30, 2023 · 802d936 · 802d936
1 parent aeaf5e2
commit 802d936
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 52 deletions.
diff --git a/.github/workflows/basic_test.yml b/.github/workflows/basic_test.yml
@@ -17,7 +17,7 @@ jobs:
         run: docker-compose -f test/docker-compose.yml up -d
 
       - name: Wait for service to start
-        run: sleep 20
+        run: sleep 30
 
       - name: Check status code
         run: |
@@ -27,4 +27,10 @@ jobs:
             echo "Request failed with status code:"
             echo ${status_code}
             exit 1
-          fi
+          fi
+      
+      - name: failed tests 🚩
+        if: ${{ failure() }}
+        run: |
+          echo "check docker logs"
+          docker-compose -f test/docker-compose.yml logs
diff --git a/webapp/src/components/DownloadButton.vue b/webapp/src/components/DownloadButton.vue
@@ -9,29 +9,58 @@ import { VBtn } from 'vuetify/lib/components/index.mjs';
 export default defineComponent({
     name: 'DownloadButton',
     props: {
-        fileUrl: {
+        fileName: {
             type: String,
             required: true,
         },
+        fileUrl: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        data: {
+            type: String,
+            required: false,
+            default: '',
+        },
     },
     components: {
         VBtn
     },
     setup(props) {
-        // Extract the file name from the URL
-        const fileName = props.fileUrl.split('/').pop();
-
         // function to download file
         const downloadFile = () => {
             // Create a temporary anchor element to initiate the download
             const link = document.createElement('a');
-            link.href = props.fileUrl;
-            link.target = '_blank';
-            // Programmatically trigger the click event on the link to start the download
-            link.click();
+            if( props.fileUrl != '' ) {
+                //console.log("Downloading file from URL: " + props.fileUrl)
+                link.href = props.fileUrl;
+                link.target = '_blank';
+                // Programmatically trigger the click event on the link to start the download
+                link.click();
+                // Clean up
+                URL.revokeObjectURL(link.href);
+            }
+            else {
+                //console.log("Downloading file from data: " + props.data)
+                // Decode the base64 encoded data
+                const decodedData = atob(props.data);
+                // Convert the decoded data to a Uint8Array
+                const uint8Array = new Uint8Array(decodedData.length);
+                for (let i = 0; i < decodedData.length; ++i) {
+                    uint8Array[i] = decodedData.charCodeAt(i);
+                }
+                // Create a Blob with the Uint8Array data
+                const blob = new Blob([uint8Array], { type: 'application/octet-stream' });
+                link.href = URL.createObjectURL(blob);
+                link.download = props.fileName;
+                // Programmatically trigger the click event on the link to start the download
+                link.click();
+                // Clean up
+                URL.revokeObjectURL(link.href);
+            }
         };
         return {
-            fileName,
             downloadFile
         };
     },

diff --git a/webapp/src/components/InspectBufrButton.vue b/webapp/src/components/InspectBufrButton.vue
@@ -26,10 +26,20 @@ import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VSelec
 export default defineComponent({
     name: 'InspectBufrButton',
     props: {
-        fileUrl: {
+        fileName: {
             type: String,
             required: true,
         },
+        fileUrl: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        data: {
+            type: String,
+            required: false,
+            default: '',
+        },
     },
     components: {
         VCard,
@@ -42,8 +52,6 @@ export default defineComponent({
         VSelect,
     },
     setup(props) {
-        // Extract the file name from the URL
-        const fileName = props.fileUrl.split('/').pop();
         const itemsInBufr = ref([]);
         const dialog = ref(false);
         // function to create new object and to add to store
@@ -91,11 +99,20 @@ export default defineComponent({
         const callInspect = async () => {
             // set items_from_bufr back to empty array
             itemsInBufr.value = [];
-            var payload = {
+            let payload;
+            if (props.fileUrl !== '') {
+              payload = {
+                inputs: {
+                  data_url: props.fileUrl
+                }
+              };
+            } else {
+              payload = {
                 inputs: {
-                    data_url: props.fileUrl
+                  data: props.data
                 }
-            };      
+              };
+            }  
             const inspectUrl = `${import.meta.env.VITE_API_URL}/processes/wis2box-bufr2geojson/execution`
             const response = await fetch(inspectUrl, {
                 method: 'POST',
@@ -110,23 +127,23 @@ export default defineComponent({
                 console.error('HTTP error', response.status);
             } else {
                 const data = await response.json();
-                console.log(data);
+                //console.log(data);
                 if (data.items) {
                 // Use Array.map to create a new array of the items in the bufr file
                 itemsInBufr.value = data.items.map(item => {
                 if (item.properties) {
                     return item.properties;
                 }
                 });
-                console.log(itemsInBufr.value);
+                //console.log(itemsInBufr.value);
                 }
             }
         };
         return {
-            fileName,
             itemsInBufr,
             inspectFile,
-            dialog
+            dialog,
+            fileName: props.fileName
         };
     },
 });  

diff --git a/webapp/src/components/SynopForm.vue b/webapp/src/components/SynopForm.vue
@@ -130,44 +130,52 @@
 
           <!-- OUTPUT BUFR -->
           <!-- BUFR files drop-down if there are any output files -->
-          <v-list-group v-if="result.files && result.files.length > 0" ref="fileList" value="Files"
+          <v-list-group v-if="result.data_items && result.data_items.length > 0" ref="fileList" value="Files"
             @click="scrollToRef('fileList')">
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" prepend-icon="mdi-check-circle">
                 <template v-slot:prepend>
                   <v-icon color="#00BD9D"></v-icon>
                 </template>
                 <!-- If number of BUFR files > 0, set text to green -->
-                <span :style="{ color: '#00BD9D' }">Output BUFR files: {{ result.files.length }}</span>
+                <span :style="{ color: '#00BD9D' }">Output BUFR files: {{ result.data_items.length }}</span>
               </v-list-item>
 
             </template>
-            <v-list-item v-for="(file_url, index) in result.files" :key="index">
+            <v-list-item v-for="(data_item, index) in result.data_items" :key="index">
               <!-- Place download and inspect buttons on the right of the file names for tablet and desktop -->
               <div class="hidden-xs">
                 <div class="file-actions">
                   <div>
-                    {{ getFileName(file_url) }}
+                    {{ data_item.filename }}
                   </div>
-                  <div class="file-actions">
-                    <DownloadButton :fileUrl="file_url" />
-                    <InspectBufrButton :fileUrl="file_url" />
+                  <div class="file-actions" v-if="data_item.file_url">
+                    <DownloadButton :fileName="data_item.filename" :fileUrl="data_item.file_url"/>
+                    <InspectBufrButton :fileName="data_item.filename" :fileUrl="data_item.file_url"/>
+                  </div>
+                  <div class="file-actions" v-if="data_item.data">
+                    <DownloadButton :fileName="data_item.filename" :data="data_item.data"/>
+                    <InspectBufrButton :fileName="data_item.filename" :data="data_item.data"/>
                   </div>
                 </div>
               </div>
               <!-- Place download and inspect buttons below the file names for mobile -->
               <div class="hidden-sm-and-up">
                 <div>
                   <div>
-                    {{ getFileName(file_url) }}
+                    {{ data_item.filename }}
+                  </div>
+                  <div class="file-actions" v-if="data_item.file_url">
+                    <DownloadButton :fileName="data_item.filename" :fileUrl="data_item.file_url"/>
+                    <InspectBufrButton :fileName="data_item.filename" :fileUrl="data_item.file_url"/>
                   </div>
-                  <div class="file-actions">
-                    <DownloadButton :fileUrl="file_url" />
-                    <InspectBufrButton :fileUrl="file_url" />
+                  <div class="file-actions" v-if="data_item.data">
+                    <DownloadButton :fileName="data_item.filename" :data="data_item.data"/>
+                    <InspectBufrButton :fileName="data_item.filename" :data="data_item.data"/>
                   </div>
                 </div>
               </div>
-              <v-divider v-if="index < result.files.length - 1" class="divider-spacing"></v-divider>
+              <v-divider v-if="index < result.data_items.length - 1" class="divider-spacing"></v-divider>
             </v-list-item>
           </v-list-group>
 
@@ -261,15 +269,13 @@ export default defineComponent({
     // Allows us to get the current topic hierarchies available
     async fetchTopics() {
       const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
-      // check if TEST=True is set in .env file
-      console.log(import.meta.env);
       // check if TEST_MODE is set in .env file or if VITE_API_URL is not set
       if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
         console.log("TEST_MODE is enabled");
         this.topicList = ["test1", "test2", "test3"];
       }
       else {
-        console.log("Fetching topic hierarchy from:", apiUrl);
+        //console.log("Fetching topic hierarchy from:", apiUrl);
         try {
           const response = await fetch(apiUrl);
           if (!response.ok) {
@@ -311,9 +317,15 @@ export default defineComponent({
         "result": "Success",
         "messages transformed": 2,
         "messages published": 2,
-        "files": [
-          "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15015_20231217T120000.bufr4",
-          "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15020_20231217T120000.bufr4"
+        "data_items": [
+          {
+            "file_url": "http://3.127.235.197/data/2023-01-19/wis/synop/test/WIGOS_0-20000-0-64400_20230119T060000.bufr4",
+            "filename": "WIGOS_0-20000-0-64400_20230119T060000.bufr4"
+          },
+          {
+            "data": "QlVGUgABgAQAABYAAAAAAAAAAAJuHgAH5wETBgAAAAALAAABgMGWx2AAAVMABOIAAANjQ0MDAAAAAAAAAAAAAAAIDIGxoaGBgAAAAAAAAAAAAAAAAAAAAPzimYBA/78kmTlBBU//////////////////////////////+dUnxn1P///////////26vbYOl////////////////////////////////////////////////////////////////AR////gJH///+T/x/+R/yf////////////7///v9f/////////////////////////////////+J/b/gAff2/4Dz/X/////////////////////////////////////7+kAH//v6QANnH////////////9+j//////////////v0f//////f//+/R/+////////////////////fo//////////////////3+oAP///////////////////8A3Nzc3",
+            "filename": "WIGOS_0-20000-0-64400_20230119T060000.bufr4"
+          }
         ],
         "warnings": [],
         "errors": []
@@ -326,10 +338,17 @@ export default defineComponent({
     testPartialSuccessResult() {
       const testData = {
         "result": "Partial Success",
-        "messages transformed": 1,
+        "messages transformed": 2,
         "messages published": 1,
-        "files": [
-          "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15015_20231217T120000.bufr4"
+        "data_items": [
+          {
+            "file_url": "http://3.127.235.197/data/2023-01-19/wis/synop/test/WIGOS_0-20000-0-64400_20230119T060000.bufr4",
+            "filename": "WIGOS_0-20000-0-64400_20230119T060000.bufr4"
+          },
+          {
+            "data": "QlVGUgABgAQAABYAAAAAAAAAAAJuHgAH5wETBgAAAAALAAABgMGWx2AAAVMABOIAAANjQ0MDAAAAAAAAAAAAAAAIDIGxoaGBgAAAAAAAAAAAAAAAAAAAAPzimYBA/78kmTlBBU//////////////////////////////+dUnxn1P///////////26vbYOl////////////////////////////////////////////////////////////////AR////gJH///+T/x/+R/yf////////////7///v9f/////////////////////////////////+J/b/gAff2/4Dz/X/////////////////////////////////////7+kAH//v6QANnH////////////9+j//////////////v0f//////f//+/R/+////////////////////fo//////////////////3+oAP///////////////////8A3Nzc3",
+            "filename": "WIGOS_0-20000-0-64400_20230119T060000.bufr4"
+          }
         ],
         "warnings": [
           "Missing station height for station 15090",
@@ -346,7 +365,7 @@ export default defineComponent({
         "result": "Failure",
         "messages transformed": 0,
         "messages published": 0,
-        "files": [],
+        "data_items": [],
         "warnings": [],
         "errors": [
           "Error converting to BUFR: local variable 'messages' referenced before assignment",
@@ -371,8 +390,8 @@ export default defineComponent({
 
       const synopUrl = `${import.meta.env.VITE_API_URL}/processes/wis2box-synop-process/execution`
 
-      console.log(payload);
-      console.log(synopUrl);
+      //console.log(payload);
+      //console.log(synopUrl);
       this.input = payload;
 
       const response = await fetch(synopUrl, {
@@ -395,8 +414,8 @@ export default defineComponent({
       } else {
         const data = await response.json();
         this.result = data;
-        console.log("Result:"); // TODO: Remove this line
-        console.log(this.result); // TODO: Remove this line
+        //console.log("Result:"); // TODO: Remove this line
+        //console.log(this.result); // TODO: Remove this line
       }
     },
     // Method for when the user presses the submit button, including
@@ -427,11 +446,6 @@ export default defineComponent({
 
       // End loading animation
       this.loading = false;
-    },
-    // Get filename from output BUFR files so it can be displayed on screen
-    getFileName(url) {
-      const urlParts = url.split('/');
-      return urlParts[urlParts.length - 1];
     }
   },
   watch: {