Abort large number of fetch requests.

Loading tags is unnecessary when navigating to another page, and it
keeps browser resources busy. This change cancels those requests when
browsing away.

swift_browser_ui_frontend/src/common/api.js

@@ -77,14 +77,15 @@ export async function getBuckets() {
 
 export async function getBucketMeta(
   container,
+  signal,
 ){
   let url = new URL(
     "/api/bucket/meta?container=".concat(encodeURI(container)),
     document.location.origin,
   );
 
   let ret = await fetch(
-    url, {method: "GET", credentials: "same-origin"},
+    url, {method: "GET", credentials: "same-origin", signal},
   );
   return ret.json();
 }
@@ -109,15 +110,15 @@ export async function updateBucketMeta(
   return ret;
 }
 
-export async function getObjects(container) {
+export async function getObjects(container, signal) {
   // Fetch objects contained in a container from the API for the user
   // that's currently logged in.
   let objUrl = new URL("/api/bucket/objects", document.location.origin);
   // Search parameter named bucket to avoid changing the API after changing
   // over from S3 to Swift
   objUrl.searchParams.append("bucket", container);
   let objects = fetch(
-    objUrl, { method: "GET", credentials: "same-origin" },
+    objUrl, { method: "GET", credentials: "same-origin", signal },
   ).then(
     function (resp) { return resp.json(); },
   ).then(
@@ -138,13 +139,14 @@ export async function getObjectsMeta (
   container,
   objects,
   url,
+  signal,
 ){
   if (url === undefined) {  
     url = makeGetObjectsMetaURL(container, objects);
   }
 
   let ret = await fetch(
-    url, {method: "GET", credentials: "same-origin"},
+    url, {method: "GET", credentials: "same-origin", signal},
   );
   return ret.json();
 }

swift_browser_ui_frontend/src/common/conv.js

@@ -162,13 +162,18 @@ function extractTags(meta) {
   return [];
 }
 
-export async function getTagsForContainer(containerName) {
-  let meta = await getBucketMeta(containerName);
+export async function getTagsForContainer(containerName, signal) {
+  let meta = await getBucketMeta(containerName, signal);
   return extractTags(meta);
 }
 
-export async function getTagsForObjects(containerName, objectList, url) {
-  let meta = await getObjectsMeta(containerName, objectList, url);
+export async function getTagsForObjects(
+  containerName, 
+  objectList, 
+  url, 
+  signal,
+) {
+  let meta = await getObjectsMeta(containerName, objectList, url, signal);
   meta.map(item => item[1] = extractTags(item));
   return meta;
 }

swift_browser_ui_frontend/src/common/store.js

@@ -124,7 +124,7 @@ const store = new Vuex.Store({
     },
   },
   actions: {
-    updateContainers: async function ({ commit, dispatch }) {
+    updateContainers: async function ({ commit, dispatch }, signal) {
       commit("loading", true);
       let containers = [];
       await getBuckets().then((ret) => {
@@ -137,19 +137,22 @@ const store = new Vuex.Store({
       }).catch(() => {
         commit("loading", false);
       });
-      dispatch("updateContainerTags", containers);
+      dispatch("updateContainerTags", {containers, signal});
       return containers;
     },
-    updateContainerTags: function ({ commit }, containers) {
+    updateContainerTags: function ({ commit }, {containers, signal}) {
       containers.map(async container => {
-        const tags = await getTagsForContainer(container.name);
+        const tags = await getTagsForContainer(container.name, signal);
         commit(
           "updateContainerTags", 
           {containerName: container.name, tags},
         );
       });
     },
-    updateObjects: async function ({ commit, dispatch, client }, route) {
+    updateObjects: async function (
+      { commit, dispatch, client }, 
+      {route, signal},
+    ) {
       let container = route.params.container;
       commit("loading", true);
       if (route.name == "SharedObjects") {
@@ -175,7 +178,10 @@ const store = new Vuex.Store({
           commit("loading", false);
         });
       } else {
-        await getObjects(container).then((ret) => {
+        await getObjects(
+          container,
+          signal,
+        ).then((ret) => {
           if (ret.status != 200) {
             commit("loading", false);
           }
@@ -186,9 +192,9 @@ const store = new Vuex.Store({
           commit("loading", false);
         });
       }
-      dispatch("updateObjectTags", route);
+      dispatch("updateObjectTags", {route, signal});
     },
-    updateObjectTags: async function ({ commit, state }, route) {
+    updateObjectTags: async function ({ commit, state }, {route, signal}) {
       if (!state.objectCache.length) {
         return;
       }
@@ -204,7 +210,12 @@ const store = new Vuex.Store({
           i === state.objectCache.length - 1
           || url.href.length > 2000
         ) {
-          getTagsForObjects(route.params.container, objectList, url)
+          getTagsForObjects(
+            route.params.container, 
+            objectList, 
+            url,
+            signal,
+          )
             .then(tags => 
               tags.map(item => {
                 commit(

swift_browser_ui_frontend/src/components/ObjectDeleteButton.vue

@@ -53,7 +53,7 @@ export default {
         this.$route.params.container,
         to_remove,
       ).then(() => {
-        this.$store.dispatch("updateObjects", this.$route);
+        this.$store.dispatch("updateObjects", {route: this.$route});
       });
     },
   },

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -362,6 +362,7 @@ export default {
       searchQuery: "",
       currentPage: 1,
       checkedRows: [],
+      abortController: null,
     };
   },
   computed: {
@@ -419,16 +420,23 @@ export default {
     this.debounceFilter = debounce(this.filter, 400);
   },
   beforeMount () {
+    this.abortController = new AbortController();
     this.getDirectCurrentPage();
     this.checkLargeDownloads();
   },
   mounted () {
     this.updateObjects();
   },
+  beforeDestroy () {
+    this.abortController.abort();
+  },
   methods: {
     updateObjects: function () {
       // Update current object listing in Vuex if length is too little
-      this.$store.dispatch("updateObjects", this.$route);
+      this.$store.dispatch(
+        "updateObjects", 
+        {route: this.$route, signal: this.abortController.signal},
+      );
     },
     isRowCheckable: function (row) {
       return this.renderFolders ? this.isFile(row.name) : true;

swift_browser_ui_frontend/src/entries/main.js

@@ -170,7 +170,7 @@ new Vue({
         type: "is-success",
       });
       if (this.$route.params.container != undefined) {
-        this.$store.dispatch("updateObjects", this.$route);
+        this.$store.dispatch("updateObjects", {route: this.$route});
       }
     },
     fileFailureToast: function (file) {

swift_browser_ui_frontend/src/views/Containers.vue

@@ -317,6 +317,7 @@ export default {
       currentPage: 1,
       shareModalIsActive: false,
       showTags: true,
+      abortController: null,
     };
   },
   computed: {
@@ -348,17 +349,24 @@ export default {
     this.debounceFilter = debounce(this.filter, 400);
   },
   beforeMount () {
+    this.abortController = new AbortController();
     this.getDirectCurrentPage();
   },
   mounted() {
     this.fetchContainers();
   },
+  beforeDestroy () {
+    this.abortController.abort();
+  },
   methods: {
     fetchContainers: async function () {
       // Get the container listing from the API if the listing hasn't yet
       // been cached.
       if(this.bList.length < 1) {
-        await this.$store.dispatch("updateContainers");
+        await this.$store.dispatch(
+          "updateContainers", 
+          this.abortController.signal,
+        );
       }
     },
     checkPageFromRoute: function () {