From e89d758908d324fef099daa131e08064c0bbb078 Mon Sep 17 00:00:00 2001
From: Olivier Vernin <olivier.vernin@suse.com>
Date: Thu, 21 Nov 2024 16:47:30 +0100
Subject: [PATCH] fix: concurrency issues

Signed-off-by: Olivier Vernin <olivier.vernin@suse.com>
---
 src/components/pipeline/report.vue  | 11 ++--
 src/components/pipeline/reports.vue | 51 +++---------------
 src/components/scm/_filter.vue      | 76 +++++++++++++-------------
 src/components/scm/_summary.vue     | 26 +++++----
 src/views/HomeView.vue              | 40 +++++++++++++-
 src/views/pipeline/ReportsView.vue  | 83 +++++++++++++++++++++++++++--
 6 files changed, 185 insertions(+), 102 deletions(-)

diff --git a/src/components/pipeline/report.vue b/src/components/pipeline/report.vue
index 27a17a39f..c07631036 100644
--- 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
index 1f674acc8..ff143a441 100644
--- 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
index c4e2470a8..9265d3f3a 100644
--- 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,14 +76,17 @@ 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: {
@@ -89,18 +94,11 @@ export default {
           }
         });
         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
index 4cd220adf..8c4b183be 100644
--- 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>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 48ab061ac..9013ba37a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,21 @@
 
     <v-main>
       <v-container>
+        <v-overlay
+        :model-value="isLoading"
+        class="align-center justify-center"
+        :disabled=false
+        :eager=true
+        :no-click-animation=true
+        :persistent=false
+        :opacity="0"
+        >
+        <v-progress-circular
+          color="black"
+          indeterminate
+          size="64"
+        ></v-progress-circular>
+      </v-overlay>
         <v-row>
           <v-col
             class="text-right"
@@ -61,7 +76,9 @@
             md="12"
             sm="12"
           >
-            <PipelineSCMSSummary/>
+            <PipelineSCMSSummary
+              @loaded="setSummaryLoaded"
+            />
           </v-col>
         </v-row>
       </v-container>
@@ -85,7 +102,11 @@ export default {
     HeadNavigation,
     PipelineSCMSSummary,
   },
+  beforeUnmount() {
+    this.cancelAutoUpdate();
+  },
   data: () => ({
+    isLoading: true,
     links:[
       {
         name: "QuickStart",
@@ -98,6 +119,21 @@ export default {
         icon: "mdi-arrow-right-circle",
       },
   ]
-  })
+  }),
+  watch: {
+    isLoading: function (val) {
+      val && setTimeout(() => {
+        this.isLoading = false
+      }, 10000)
+    }
+  },
+  methods: {
+    cancelAutoUpdate: function() {
+      clearInterval(this.timer);
+    },
+    setSummaryLoaded: function(val) {
+      this.isLoading = !val
+    },
+  }
 }
 </script>
diff --git a/src/views/pipeline/ReportsView.vue b/src/views/pipeline/ReportsView.vue
index 620362c44..08b779499 100644
--- a/src/views/pipeline/ReportsView.vue
+++ b/src/views/pipeline/ReportsView.vue
@@ -4,6 +4,21 @@
     <SideNavigation/>
 
     <v-main>
+      <v-overlay
+        :model-value="isLoading"
+        class="align-center justify-center"
+        :disabled=true
+        :eager=true
+        :no-click-animation=true
+        :persistent=true
+        :opacity="0"
+      >
+        <v-progress-circular
+          color="black"
+          indeterminate
+          size="64"
+        ></v-progress-circular>
+      </v-overlay>
       <v-container>
         <v-row>
           <v-col
@@ -19,15 +34,26 @@
           </v-col>
         </v-row>
       </v-container>
-      <PipelineSCMFilter :scmid="scmid" @update-scmid="updateSCMID"/>
+      <PipelineSCMFilter
+        :scmid="scmid"
+        @update-scmid="updateSCMID"
+        @loaded="setFilterLoaded"
+      />
       <PipelineSCMSummary
+        v-if="isFilterLoaded"
         :hideButton=true
         :expanded-summary="[0]"
         :scmid="scmid"
         @update-scmid="updateSCMID"
+        @loaded="setSummaryLoaded"
         class="align-center justify-center"
       />
-      <PipelineReports :scmid="scmid" @update-scmid="updateSCMID"/>
+      <PipelineReports
+        v-if="isFilterLoaded"
+        :scmid="scmid"
+        @update-scmid="updateSCMID"
+        @loaded="setReportsLoaded"
+      />
     </v-main>
 
     <ReleaseFooter/>
@@ -46,6 +72,9 @@ import PipelineSCMFilter from '../../components/scm/_filter.vue';
 
 export default {
   name: 'PipelineReportsView',
+  beforeUnmount() {
+    this.cancelAutoUpdate();
+  },
   components: {
     ReleaseFooter,
     SideNavigation,
@@ -61,14 +90,60 @@ export default {
       to: "https://www.updatecli.io",
       icon: "mdi-arrow-right-circle",
       },
-  ],
+    ],
+    isFilterLoaded: false,
+    isSummaryLoaded: false,
+    isReportsLoaded: false,
+    isLoading: true,
     scmid: "",
   }),
 
+  watch: {
+    isFilterLoaded: function() {
+      this.isLoading = !this.isAllComponentsLoaded()
+    },
+    isSummaryLoaded: function() {
+      this.isLoading = !this.isAllComponentsLoaded()
+    },
+    isReportsLoaded: function() {
+      this.isLoading = !this.isAllComponentsLoaded()
+    },
+    isLoading: function (val) {
+      val && setTimeout(() => {
+        this.isLoading = false
+      }, 10000)
+    },
+    scmid: function() {
+      // IF the scmid is changed, we need to wait for the summary and reports to be updated
+      this.setSummaryLoaded(false)
+      this.setReportsLoaded(false)
+    }
+  },
+
   methods: {
-    updateSCMID(scmid) {
+    cancelAutoUpdate: function() {
+      clearInterval(this.timer);
+    },
+    setFilterLoaded: function(state) {
+      this.isFilterLoaded = state;
+      this.isSummaryLoaded = false;
+      this.isReportsLoaded = false;
+    },
+    setSummaryLoaded: function(state) {
+      this.isSummaryLoaded = state;
+    },
+    setReportsLoaded: function(state) {
+      this.isReportsLoaded = state;
+    },
+    updateSCMID: function(scmid) {
       this.scmid = scmid;
     },
+    isAllComponentsLoaded: function() {
+      if (this.isFilterLoaded && this.isSummaryLoaded && this.isReportsLoaded) {
+        return true
+      }
+      return false
+    },
   }
 }
 </script>