Abort ongoing backend request on a record list block when page is swi…

…tched
cortezaproject · Aug 21, 2023 · 638ba17 · 638ba17
1 parent 95cf245
commit 638ba17
Show file tree

Hide file tree

Showing 22 changed files with 3,893 additions and 51 deletions.
diff --git a/client/web/compose/src/components/PageBlocks/AutomationBase.vue b/client/web/compose/src/components/PageBlocks/AutomationBase.vue
@@ -40,6 +40,8 @@ export default {
       processing: false,
 
       automationScripts: [],
+
+      abortRequests: [],
     }
   },
 
@@ -49,19 +51,37 @@ export default {
     },
   },
 
+  beforeDestroy () {
+    this.abortRequests.forEach((cancel) => {
+      cancel()
+    })
+  },
+
   created () {
     if (this.$UIHooks.set && !!this.$UIHooks.set.length) {
       return
     }
 
-    this.processing = true
-    return this.$ComposeAPI.automationList({ eventTypes: ['onManual'], excludeInvalid: true })
-      .then(({ set = [] }) => {
-        this.automationScripts = set
-      })
-      .finally(() => {
-        this.processing = false
-      })
+    this.fetchAutomationLists()
+  },
+
+  methods: {
+    fetchAutomationLists () {
+      this.processing = true
+
+      const { response, cancel } = this.$ComposeAPI
+        .automationListCancellable({ eventTypes: ['onManual'], excludeInvalid: true })
+
+      this.abortRequests.push(cancel)
+
+      return response()
+        .then(({ set = [] }) => {
+          this.automationScripts = set
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
   },
 
   beforeDestroy () {

diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
@@ -102,6 +102,7 @@
 <script>
 import moment from 'moment'
 import { mapGetters, mapActions } from 'vuex'
+import axios from 'axios'
 import base from './base'
 import FullCalendar from '@fullcalendar/vue'
 import dayGridPlugin from '@fullcalendar/daygrid'
@@ -158,6 +159,8 @@ export default {
       },
 
       refreshing: false,
+
+      cancelTokenSource: axios.CancelToken.source(),
     }
   },
 
@@ -232,6 +235,7 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+    this.abortRequests()
   },
 
   methods: {
@@ -310,7 +314,7 @@ export default {
                   })
                 }
 
-                return compose.PageBlockCalendar.RecordFeed(this.$ComposeAPI, module, this.namespace, ff, this.loaded)
+                return compose.PageBlockCalendar.RecordFeed(this.$ComposeAPI, module, this.namespace, ff, this.loaded, { cancelToken: this.cancelTokenSource.token })
                   .then(events => {
                     events = this.setEventColors(events, ff)
                     this.events.push(...events)
@@ -391,6 +395,10 @@ export default {
       this.loaded = {}
       this.refreshing = false
     },
+
+    abortRequests () {
+      this.cancelTokenSource.cancel(`cancel-record-list-request-${this.block.blockID}`)
+    },
   },
 }
 </script>

diff --git a/client/web/compose/src/components/PageBlocks/CommentBase.vue b/client/web/compose/src/components/PageBlocks/CommentBase.vue
@@ -123,6 +123,8 @@ export default {
         title: '',
         content: '',
       },
+
+      abortRequests: [],
     }
   },
 
@@ -217,6 +219,10 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+
+    this.abortRequests.forEach((cancel) => {
+      cancel()
+    })
   },
 
   methods: {
@@ -338,8 +344,11 @@ export default {
         sort,
       }
 
-      return this.$ComposeAPI
-        .recordList(params)
+      const { response, cancel } = this.$ComposeAPI
+        .recordListCancellable(params)
+      this.abortRequests.push(cancel)
+
+      return response()
         .then(({ set }) => set.map(r => Object.freeze(new compose.Record(module, r))))
     },
 

diff --git a/client/web/compose/src/components/PageBlocks/GeometryBase.vue b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
@@ -65,6 +65,7 @@
 </template>
 
 <script>
+import axios from 'axios'
 import { divIcon, latLng, latLngBounds } from 'leaflet'
 import { LPolygon, LControl } from 'vue2-leaflet'
 import { compose, NoID } from '@cortezaproject/corteza-js'
@@ -96,6 +97,8 @@ export default {
       geometries: [],
       colors: [],
       markers: [],
+
+      cancelTokenSource: axios.CancelToken.source(),
     }
   },
 
@@ -155,6 +158,7 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+    this.abortRequests()
   },
 
   methods: {
@@ -198,7 +202,7 @@ export default {
               })
             }
 
-            return compose.PageBlockGeometry.RecordFeed(this.$ComposeAPI, module, this.namespace, feed)
+            return compose.PageBlockGeometry.RecordFeed(this.$ComposeAPI, module, this.namespace, feed, { cancelToken: this.cancelTokenSource.token })
               .then(records => {
                 const mapModuleField = module.fields.find(f => f.name === feed.geometryField)
 
@@ -312,6 +316,10 @@ export default {
       this.colors = []
       this.markers = []
     },
+
+    abortRequests () {
+      this.cancelTokenSource.cancel(`abort-request-${this.block.blockID}`)
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/MetricBase.vue b/client/web/compose/src/components/PageBlocks/MetricBase.vue
@@ -66,6 +66,8 @@ export default {
     return {
       processing: false,
       reports: [],
+
+      abortRequests: [],
     }
   },
 
@@ -94,6 +96,12 @@ export default {
   beforeDestroy () {
     this.setDefaultValues()
     this.destroyEvents()
+    this.$root.$off('metric.update', this.refresh)
+    this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`)
+
+    this.abortRequests.forEach((cancel) => {
+      cancel()
+    })
   },
 
   created () {
@@ -135,7 +143,14 @@ export default {
       try {
         const rtr = []
         const namespaceID = this.namespace.namespaceID
-        const reporter = r => this.$ComposeAPI.recordReport({ ...r, namespaceID })
+        const reporter = r => {
+          const { response, cancel } = this.$ComposeAPI
+            .recordReportCancellable({ ...r, namespaceID })
+
+          this.abortRequests.push(cancel)
+
+          return response()
+        }
 
         for (const m of this.options.metrics) {
           if (m.moduleID) {

diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -101,6 +101,7 @@
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { mapActions } from 'vuex'
+import axios from 'axios'
 import base from './base'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
 import BulkEditModal from 'corteza-webapp-compose/src/components/Public/Record/BulkEdit'
@@ -137,6 +138,8 @@ export default {
         recordIDs: [],
         initialRecord: {},
       },
+
+      abortRequests: [],
     }
   },
 
@@ -214,6 +217,9 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+    this.abortRequests.forEach((cancel) => {
+      cancel()
+    })
   },
 
   methods: {
@@ -256,13 +262,20 @@ export default {
         return
       }
 
-      this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID })
+      const { response, cancel } = this.$ComposeAPI
+        .recordReadCancellable({ namespaceID, moduleID, recordID })
+
+      this.abortRequests.push(cancel)
+
+      response()
         .then(record => {
           this.referenceRecord = new compose.Record(this.fieldModule, { ...record })
         })
-        .catch((e) => {
-          this.referenceRecord = new compose.Record(this.fieldModule, {})
-          this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
+        .catch(e => {
+          if (!axios.isCancel(e)) {
+            this.referenceRecord = new compose.Record(this.fieldModule, {})
+            this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
+          }
         })
     },
 

diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -722,6 +722,7 @@
   </wrap>
 </template>
 <script>
+import axios from 'axios'
 import { debounce, isEqual } from 'lodash'
 import { mapGetters, mapActions } from 'vuex'
 import base from './base'
@@ -828,6 +829,8 @@ export default {
       currentCustomPresetFilter: undefined,
       showCustomPresetFilterModal: false,
       selectedAllRecords: false,
+
+      abortRequests: [],
     }
   },
 
@@ -1093,6 +1096,10 @@ export default {
       this.$root.$off(`page-block:validate:${this.uniqueID}`)
       this.$root.$off(`drill-down-recordList:${this.uniqueID}`)
       this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`)
+
+      this.abortRequests.forEach((cancel) => {
+        cancel()
+      })
     },
 
     onFilter (filter = []) {
@@ -1495,8 +1502,12 @@ export default {
         const query = recordID ? `recordID = ${recordID}` : this.bulkQuery
         const { moduleID, namespaceID } = this.filter
 
-        this.$ComposeAPI
-          .recordBulkUndelete({ moduleID, namespaceID, query })
+        const { response, cancel } = this.$ComposeAPI
+          .recordBulkUndeleteCancellable({ moduleID, namespaceID, query })
+
+        this.abortRequests.push(cancel)
+
+        response()
           .then(() => {
             this.refresh(true)
             this.toastSuccess(this.$t('notification:record.restoreBulkSuccess'))
@@ -1525,8 +1536,12 @@ export default {
         // Pick module and namespace ID from the filter
         const { moduleID, namespaceID } = this.filter
 
-        this.$ComposeAPI
-          .recordBulkDelete({ moduleID, namespaceID, query })
+        const { response, cancel } = this.$ComposeAPI
+          .recordBulkDeleteCancellable({ moduleID, namespaceID, query })
+
+        this.abortRequests.push(cancel)
+
+        response()
           .then(() => this.refresh(true))
           .then(() => {
             this.toastSuccess(this.$t('notification:record.deleteBulkSuccess'))
@@ -1585,7 +1600,10 @@ export default {
       // Filter's out deleted records when filter.deleted is 2, and undeleted records when filter.deleted is 0
       this.showingDeletedRecords ? this.filter.deleted = 2 : this.filter.deleted = 0
 
-      return this.$ComposeAPI.recordList({ ...this.filter, moduleID, namespaceID, query, ...paginationOptions })
+      const { response, cancel } = this.$ComposeAPI.recordListCancellable({ ...this.filter, moduleID, namespaceID, query, ...paginationOptions })
+      this.abortRequests.push(cancel)
+
+      return response()
         .then(({ set, filter }) => {
           const records = set.map(r => new compose.Record(r, this.recordListModule))
 
@@ -1631,7 +1649,11 @@ export default {
             this.items = records.map(r => this.wrapRecord(r))
           })
         })
-        .catch(this.toastErrorHandler(this.$t('notification:record.listLoadFailed')))
+        .catch((e) => {
+          if (!axios.isCancel(e)) {
+            this.toastErrorHandler(this.$t('notification:record.listLoadFailed'))(e)
+          }
+        })
         .finally(() => {
           this.processing = false
         })