web/satellite: abort request to get object count in 10 seconds

When entering passphrase to open bucket we make a ListObjectsV2Command request to figure out if there are objects encrypted with different passphrase.
If there are a lot of objects then this request takes forever to process.
By this change I added 10 seconds timeout for that request to not block user.

Issue:
https://github.com/storj/storj/issues/5954

Change-Id: I5243fba68d0b56dff2fb2b3a608a5e71860724c2
This commit is contained in:
Vitalii 2023-06-29 16:34:57 +03:00 committed by Storj Robot
parent d38b8fa2c4
commit cb41c51692
2 changed files with 49 additions and 6 deletions

View File

@ -52,6 +52,10 @@
:is-transparent="isWarningState"
/>
</div>
<div v-if="isLoading" class="modal__loading-wrap">
<VLoader width="50px" height="50px" is-white />
<p class="modal__loading-wrap__label">Counting objects...</p>
</div>
</div>
</template>
</VModal>
@ -73,6 +77,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
@ -148,9 +153,9 @@ async function onContinue(): Promise<void> {
closeModal();
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.OPEN_BUCKET_MODAL);
notify.error(error.message, AnalyticsErrorEventSource.OPEN_BUCKET_MODAL);
isLoading.value = false;
}
}
@ -182,6 +187,7 @@ function setPassphrase(value: string): void {
flex-direction: column;
padding: 32px;
max-width: 350px;
position: relative;
&__header {
display: flex;
@ -250,6 +256,23 @@ function setPassphrase(value: string): void {
row-gap: 20px;
}
}
&__loading-wrap {
position: absolute;
inset: 0;
background: rgb(27 37 51 / 40%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&__label {
font-family: 'font_medium', sans-serif;
font-size: 18px;
margin-top: 16px;
color: var(--c-white);
}
}
}
.orange-border {

View File

@ -220,11 +220,31 @@ export const useBucketsStore = defineStore('buckets', () => {
}
async function getObjectsCount(name: string): Promise<number> {
const response = await state.s3Client.send(new ListObjectsV2Command({
Bucket: name,
}));
const abortController = new AbortController();
return response.KeyCount === undefined ? 0 : response.KeyCount;
const request = state.s3Client.send(new ListObjectsV2Command({
Bucket: name,
}), { abortSignal: abortController.signal });
const timeout = setTimeout(() => {
abortController.abort();
}, 10000); // abort request in 10 seconds.
let response;
try {
response = await request;
clearTimeout(timeout);
} catch (error) {
clearTimeout(timeout);
if (abortController.signal.aborted) {
return 0;
}
throw error;
}
return (!response || response.KeyCount === undefined) ? 0 : response.KeyCount;
}
function clearS3Data(): void {