added abort request for when user changes filter and a request is already in progress. added delay to client helpers. (#395)

Author: just-at-uber

client/containers/workflow-list/component.vue

@@ -51,7 +51,7 @@ import {
   TextInput,
   WorkflowGrid,
 } from '~components';
-import { getEndTimeIsoString, getStartTimeIsoString } from '~helpers';
+import { delay, getEndTimeIsoString, getStartTimeIsoString } from '~helpers';
 import { httpService } from '~services';
 
 export default {
@@ -76,6 +76,7 @@ export default {
   ],
   data() {
     return {
+      abortController: undefined,
       isCronList: IS_CRON_LIST,
       loading: false,
       results: [],
@@ -207,28 +208,45 @@ export default {
         return { workflows, nextPageToken };
       }
 
-      this.loading = true;
-      this.error = undefined;
-
       const includeStatus = ![STATUS_ALL, STATUS_OPEN, STATUS_CLOSED].includes(
         queryWithStatus.status
       );
       const { status, ...queryWithoutStatus } = queryWithStatus;
       const query = includeStatus ? queryWithStatus : queryWithoutStatus;
 
       try {
-        const res = await httpService.get(url, { query });
+        if (this.abortController) {
+          this.abortController.abort();
+          await delay();
+        }
 
-        workflows = res.executions;
+        this.error = undefined;
+        this.loading = true;
 
-        nextPageToken = res.nextPageToken;
-      } catch (e) {
-        this.error = (e.json && e.json.message) || e.status || e.message;
-      }
+        this.abortController = new AbortController();
+        const { signal } = this.abortController;
 
-      this.loading = false;
+        const request = await httpService.get(url, { query, signal });
+
+        this.abortController = undefined;
+
+        workflows = request.executions;
+
+        nextPageToken = request.nextPageToken;
+      } catch (error) {
+        if (error.name === 'AbortError') {
+          return { status: 'aborted' };
+        }
+
+        this.error =
+          (error.json && error.json.message) || error.status || error.message;
 
-      return { workflows, nextPageToken };
+        return { status: 'error' };
+      } finally {
+        this.loading = false;
+      }
+
+      return { status: 'success', workflows, nextPageToken };
     },
     fetchDomain() {
       const { domain, now } = this;
@@ -284,33 +302,50 @@ export default {
           query.queryString = decodeURI(query.queryString);
         }
 
-        const { workflows: wfs, nextPageToken } = await this.fetch(
+        const { status, workflows: wfs, nextPageToken } = await this.fetch(
           this.fetchWorkflowListUrl,
           query
         );
 
+        if (status !== 'success') {
+          return;
+        }
+
         workflows = wfs;
         this.npt = nextPageToken;
       } else {
         const { domain } = this;
         const queryOpen = { ...this.criteria, nextPageToken: this.npt };
         const queryClosed = { ...this.criteria, nextPageToken: this.nptAlt };
 
-        const { workflows: wfsOpen, nextPageToken: nptOpen } = await this.fetch(
+        const {
+          status: openStatus,
+          workflows: wfsOpen,
+          nextPageToken: nptOpen,
+        } = await this.fetch(
           `/api/domains/${domain}/workflows/open`,
           queryOpen
         );
 
+        if (openStatus !== 'success') {
+          return;
+        }
+
         this.npt = nptOpen;
 
         const {
+          status: closedStatus,
           workflows: wfsClosed,
           nextPageToken: nptClosed,
         } = await this.fetch(
           `/api/domains/${domain}/workflows/closed`,
           queryClosed
         );
 
+        if (closedStatus !== 'success') {
+          return;
+        }
+
         this.nptAlt = nptClosed;
 
         workflows = [...wfsOpen, ...wfsClosed];

client/helpers/delay.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2021 Uber Technologies Inc.
+//
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const delay = time => new Promise(resolve => setTimeout(resolve, time));
+
+export default delay;

client/helpers/index.js

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 
 export { default as combine } from './combine';
+export { default as delay } from './delay';
 export { default as getDatetimeFormattedString } from './get-datetime-formatted-string';
 export { default as getEndTimeIsoString } from './get-end-time-iso-string';
 export { default as getEnvironment } from './get-environment';