fix: concurrency issues

Signed-off-by: Olivier Vernin <[email protected]>
updatecli · Nov 21, 2024 · e89d758 · e89d758
1 parent ce54ad7
commit e89d758
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 102 deletions.
diff --git a/src/components/pipeline/report.vue b/src/components/pipeline/report.vue
@@ -5,10 +5,11 @@
       <v-overlay
       :model-value="isLoading"
       class="align-center justify-center"
-      disabled="True"
-      eager="True"
-      no-click-animation="True"
-      persistent="True"
+      :disabled="true"
+      :eager="true"
+      :no-click-animation="true"
+      :persistent="true"
+      :opacity="0"
     >
       <v-progress-circular
         color="black"
@@ -182,7 +183,7 @@ import TargetComponent from './_target.vue';
 
 export default {
   name: 'PipelineReportView',
-  
+
   components: {
     SourceComponent,
     ConditionComponent,

diff --git a/src/components/pipeline/reports.vue b/src/components/pipeline/reports.vue
@@ -3,21 +3,6 @@
       class="py-8 px-6"
       fluid
   >
-    <v-overlay
-      :model-value="isLoading"
-      class="align-center justify-center"
-      :disabled=true
-      :eager=true
-      :no-click-animation=true
-      :persistent=true
-    >
-      <v-progress-circular
-        color="black"
-        indeterminate
-        size="64"
-      ></v-progress-circular>
-    </v-overlay>
-
     <!-- Show Project Description -->
     <v-container>
       <!--
@@ -62,14 +47,9 @@
 </template>
 
 <script>
-import router from '../../router'
-//import SCMSummary from '../scm/_summary.vue'
 
 export default {
   name: 'PipelinesTable',
-  //components: {
-  //  SCMSummary,
-  //},
 
   props: {
     scmid: {},
@@ -89,17 +69,18 @@ export default {
       { key: 'ID', sortable: false}
     ],
     pipelines: [],
-    isLoading: true,
     itemsPerPage: 25,
   }),
 
-  beforeUnmount() {
-    this.cancelAutoUpdate();
+  watch: {
+    scmid() {
+        this.getReportsData()
+    }
   },
 
   methods: {
     async getReportsData() {
-
+      this.$emit('loaded', false)
       let queryURL = `/api/pipeline/reports`
 
       if (this.scmid != undefined && this.scmid != '' && this.scmid != null) {
@@ -116,21 +97,17 @@ export default {
           }
         });
         const data = await response.json();
-        this.isLoading = false
         this.pipelines = data.data
       } else {
         const response = await fetch(queryURL);
         const data = await response.json();
-        this.isLoading = false
         this.pipelines = data.data
       }
+      this.$emit('loaded', true)
     },
     getPipelineLink: function(id){
       return `/pipeline/reports/${id}`
     },
-    cancelAutoUpdate() {
-      clearInterval(this.timer);
-    },
     getStatusColor: function(status){
       switch (status) {
         case "✔":
@@ -161,23 +138,9 @@ export default {
     },
   },
 
-  watch: {
-      isLoading (val) {
-        val && setTimeout(() => {
-          this.isLoading = false
-        }, 3000)
-      },
-
-      scmid () {
-        this.getReportsData()
-      },
-  },
-
   async created() {
     try {
-      if (router.currentRoute.value.query.scmid != undefined) {
-          this.$emit('update-scmid', router.currentRoute.value.query.scmid)
-      }
+      this.getReportsData()
     } catch (error) {
       console.log(error);
     }

diff --git a/src/components/scm/_filter.vue b/src/components/scm/_filter.vue
@@ -51,11 +51,13 @@ export default {
   name: 'PipelineSCMS',
 
   props: {
-    scmid: {},
+    scmid: {
+      type: String,
+      default: ""
+    },
   },
 
   data: () => ({
-    isLoading: true,
     filterForm: false,
     scms: [],
     repository: "",
@@ -74,33 +76,29 @@ export default {
 
   methods: {
     async getSCMSData() {
+      this.$emit('loaded', false)
       const auth_enabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
 
+      let query = `/api/pipeline/scms`;
+
+      if (this.restrictedSCM != "") {
+        query = query + `?scmid=${this.restrictedSCM}`
+      }
+
       if (auth_enabled) {
         const token = await this.$auth0.getAccessTokenSilently();
-        let query = `/api/pipeline/scms`;
-        if (this.restrictedSCM != "") {
-          query = query + `?scmid=${this.restrictedSCM}`
-        }
 
         const response = await fetch(query, {
             headers: {
             Authorization: `Bearer ${token}`
           }
         });
         const data = await response.json();
-        this.isLoading = false
         this.scms = data.scms
       } else {
 
-        let query = `/api/pipeline/scms`;
-        if (this.restrictedSCM != "") {
-          query = query + `?scmid=${this.restrictedSCM}`
-        }
-
         const response = await fetch(query);
         const data = await response.json();
-        this.isLoading = false
         this.scms = data.scms
       }
 
@@ -116,11 +114,15 @@ export default {
           id: this.scms[i].URL,
           text: this.prettifyURL(this.scms[i].URL)
         })
-      }
 
-      if (this.repositories.length > 0 && this.repository == "" ){
-        this.repository = this.repositories[0].id
+        if ( i == 0) {
+          this.repository = this.scms[i].URL
+          this.branch = this.scms[i].Branch
+          this.applyFilter()
+          this.$emit('loaded', true)
+        }
       }
+
     },
 
     isRestrictedSCM() {
@@ -165,42 +167,44 @@ export default {
   },
 
   watch: {
-      isLoading (val) {
-        val && setTimeout(() => {
-          this.isLoading = false
-        }, 3000)
-      },
-
       repository (val) {
-        var b = []
+        var newRepositoryBranches = []
         for (var i =0 ; i < this.scms.length; i++) {
           if (this.scms[i].URL == val) {
-              if (this.scms[i].Branch == "main") {
-                this.branch = "main"
-              }
-
-              if (this.scms[i].Branch == "master" && this.branch == "" ){  
-                this.branch = "master"
-              }
-            b.push(this.scms[i].Branch)
+            if (newRepositoryBranches.includes(this.scms[i].Branch)) {
+              continue
+            }
+              newRepositoryBranches.push(this.scms[i].Branch)
           }
         }
 
-        this.branches = b
+        if (newRepositoryBranches.length == 0) {
+          this.branches = []
+          this.branch = ""
+          return
+        }else {
+          this.branches = newRepositoryBranches
+          this.branch = newRepositoryBranches[0]
+        }
+
         this.applyFilter()
       },
 
       branch () {
         this.applyFilter()
       },
+      restrictedSCM () {
+        this.getSCMSData()
+      }
   },
 
   async created() {
     try {
-      if (router.currentRoute.value.query.scmid != undefined) {
-        this.restrictedSCM = router.currentRoute.value.query.scmid
-      }
-      this.getSCMSData()
+        if (router.currentRoute.value.query.scmid != undefined) {
+          this.restrictedSCM = router.currentRoute.value.query.scmid
+        } else {
+          this.getSCMSData()
+        }
     } catch (error) {
       console.log(error);
     }

diff --git a/src/components/scm/_summary.vue b/src/components/scm/_summary.vue
@@ -124,7 +124,10 @@ export default {
     },
     name: "SCMSummary",
     props: {
-        scmid: {},
+        scmid: {
+            type: String,
+            default: ''
+        },
         hideButton: {
             type: Boolean,
             default: false
@@ -154,19 +157,23 @@ export default {
 
     methods: {
         async getSummaryData() {
+            this.$emit('loaded', false)
             const auth_enabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
             const restrictedSCM = router.currentRoute.value.query.scmid
 
             let query = `/api/pipeline/scms?summary=true`;
             if (restrictedSCM != undefined) {
                 query = query + `&&scmid=${restrictedSCM}`
+            } else if ( this.scmid != "" ){
+                query = query + `&&scmid=${this.scmid}`
+            }
+
+            if (this.scmid != undefined && this.scmid != '' && this.scmid != null) {
+                query += `&&scmid=${this.scmid}`;
             }
 
             if (auth_enabled) {
                 const token = await this.$auth0.getAccessTokenSilently();
-                if (this.scmid != undefined && this.scmid != '' && this.scmid != null) {
-                    query += `&&scmid=${this.scmid}`;
-                }
                 const response = await fetch(query, {
                     headers: {
                         Authorization: `Bearer ${token}`
@@ -176,15 +183,13 @@ export default {
                 this.data = data.data;
                 this.updatePolarAreaData();
             } else {
-                if (this.scmid != undefined && this.scmid != '' && this.scmid != null) {
-                    query += `&&scmid=${this.scmid}`;
-                }
                 const response = await fetch(query);
                 const data = await response.json();
                 this.data = data.data;
                 this.updatePolarAreaData();
             }
 
+            this.$emit('loaded', true)
         },
 
         resetFilter: function() {
@@ -316,13 +321,12 @@ export default {
             }
         },
     },
-
     async created() {
         try {
             this.getSummaryData();
-        } catch (error) {
-            console.error(error);
+        } catch(error) {
+            console.log(error);
         }
-    },
+    }
 }
 </script>