JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: fix for too many objects banner in object browser

Browse Source 
Fixed 'Too may objects' objects banner being displayed in a wrong place.
I made it simpler and more correct because it's impossible to know the exact count of objects for each path/prefix because s3 client can list only 1000 objects (for now) and our API at the same time calculates object count for the whole bucket (not for particular passphrase).
Added message that user can list all objects using Uplink CLI.

Also removed unused legacy css file.

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

Change-Id: I4b3cff47763ebdb631119b690de876ecf6a22e9d
This commit is contained in:
Vitalii 2023-06-26 14:34:48 +03:00
parent 706cd0b9fb
commit 0d0e8cc8cf
5 changed files with 111 additions and 11135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -93,8 +93,14 @@
<div class="hr-divider" />
<MultiplePassphraseBanner
v-if="lockedFilesNumber > 0 && isBannerShown && !fetchingFilesSpinner && !currentPath"
:on-close="closeBanner"
v-if="lockedFilesEntryDisplayed && isLockedBanner"
:locked-files-count="lockedFilesCount"
:on-close="closeLockedBanner"
/>
<TooManyObjectsBanner
v-if="files.length >= NUMBER_OF_DISPLAYED_OBJECTS && isTooManyObjectsBanner"
:on-close="closeTooManyObjectsBanner"
/>
<v-table items-label="objects" :total-items-count="files.length" selectable :selected="allFilesSelected" show-select class="file-browser-table" @selectAllClicked="toggleSelectAllFiles">
@ -220,6 +226,7 @@ import VButton from '@/components/common/VButton.vue';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
import VTable from '@/components/common/VTable.vue';
import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
import TooManyObjectsBanner from '@/components/browser/TooManyObjectsBanner.vue';
import UpEntry from '@/components/browser/UpEntry.vue';
import Dropzone from '@/components/browser/Dropzone.vue';
@ -241,7 +248,8 @@ const fileInput = ref<HTMLInputElement>();
const fetchingFilesSpinner = ref<boolean>(false);
const isUploadDropDownShown = ref<boolean>(false);
const isBannerShown = ref<boolean>(true);
const isLockedBanner = ref<boolean>(true);
const isTooManyObjectsBanner = ref<boolean>(true);
const isOver = ref<boolean>(false);
/**
* Retrieve the pathMatch from the current route.
@ -289,7 +297,7 @@ const currentPath = computed((): string => {
/**
* Return locked files number.
*/
const lockedFilesNumber = computed((): number => {
const lockedFilesCount = computed((): number => {
const ownObjectsCount = obStore.state.objectsCount;
return objectsCount.value - ownObjectsCount;
@ -309,7 +317,7 @@ const objectsCount = computed((): number => {
* Indicates if locked files entry is displayed.
*/
const lockedFilesEntryDisplayed = computed((): boolean => {
return lockedFilesNumber.value > 0 &&
return lockedFilesCount.value > 0 &&
objectsCount.value <= NUMBER_OF_DISPLAYED_OBJECTS &&
!fetchingFilesSpinner.value &&
!currentPath.value;
@ -392,8 +400,15 @@ const bucket = computed((): string => {
/**
* Closes multiple passphrase banner.
*/
function closeBanner(): void {
isBannerShown.value = false;
function closeLockedBanner(): void {
isLockedBanner.value = false;
}
/**
* Closes too many objects banner.
*/
function closeTooManyObjectsBanner(): void {
isTooManyObjectsBanner.value = false;
}
function calculateRoutePath(): string {

1
web/satellite/src/components/browser/FileBrowserHeader.vue
View File

@ -283,5 +283,4 @@ function cancelDeleteSelection(): void {
}
}
}
</style>

57
web/satellite/src/components/browser/MultiplePassphrasesBanner.vue
View File

@ -6,23 +6,15 @@
<div class="banner__left">
<LockedIcon class="banner__left__icon" />
<div class="banner__left__labels">
<template v-if="objectsCount <= NUMBER_OF_DISPLAYED_OBJECTS">
<h2 class="banner__left__labels__title">
You have at least {{ lockedFilesNumber }} object{{ lockedFilesNumber > 1 ? 's' : '' }} locked with a
different passphrase.
</h2>
<p class="banner__left__labels__subtitle">Enter your other passphrase to access these files.</p>
</template>
<template v-else>
<h2 class="banner__left__labels__title">
Due to the number of objects you have uploaded to this bucket, {{ lockedFilesNumber }} files are
not displayed.
</h2>
</template>
<h2 class="banner__left__labels__title">
You have at least {{ lockedFilesCount }} object{{ lockedFilesCount > 1 ? 's' : '' }} locked with a
different passphrase.
</h2>
<p class="banner__left__labels__subtitle">Enter your other passphrase to access these files.</p>
</div>
</div>
<div class="banner__right">
<p v-if="objectsCount <= NUMBER_OF_DISPLAYED_OBJECTS" class="banner__right__unlock" @click="openManageModal">
<p class="banner__right__unlock" @click="openManageModal">
Unlock now
</p>
<CloseIcon class="banner__right__close" @click="onClose" />
@ -31,48 +23,19 @@
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { Bucket } from '@/types/buckets';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import LockedIcon from '@/../static/images/browser/locked.svg';
import CloseIcon from '@/../static/images/browser/close.svg';
const props = withDefaults(defineProps<{
onClose?: () => void;
}>(), {
onClose: () => {},
});
const props = defineProps<{
lockedFilesCount: number
onClose: () => void
}>();
const appStore = useAppStore();
const bucketsStore = useBucketsStore();
const obStore = useObjectBrowserStore();
const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
/**
* Returns locked files number.
*/
const lockedFilesNumber = computed((): number => {
const ownObjectsCount = obStore.state.objectsCount;
return objectsCount.value - ownObjectsCount;
});
/**
* Returns bucket objects count from store.
*/
const objectsCount = computed((): number => {
const name: string = obStore.state.bucket;
const data: Bucket | undefined = bucketsStore.state.page.buckets.find((bucket: Bucket) => bucket.name === name);
return data?.objectCount || 0;
});
/**
* Opens switch passphrase modal.

79
web/satellite/src/components/browser/TooManyObjectsBanner.vue Normal file
View File

@ -0,0 +1,79 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="banner">
<div class="banner__left">
<LockedIcon class="banner__left__icon" />
<p class="banner__left__title">
Due to the number of objects you have uploaded, some files may not be displayed.
To list all objects you can use
<a
class="banner__left__title__link"
href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/prerequisites"
target="_blank"
rel="noopener noreferrer"
>
Uplink CLI
</a>
tool.
</p>
</div>
<CloseIcon class="banner__close" @click="onClose" />
</div>
</template>
<script setup lang="ts">
import LockedIcon from '@/../static/images/browser/locked.svg';
import CloseIcon from '@/../static/images/browser/close.svg';
const props = defineProps<{
onClose: () => void
}>();
</script>
<style scoped lang="scss">
.banner {
padding: 16px;
background: #fec;
border: 1px solid var(--c-yellow-2);
box-shadow: 0 7px 20px rgb(0 0 0 / 15%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'font_regular', sans-serif;
margin-bottom: 21px;
&__left {
display: flex;
align-items: center;
margin-right: 15px;
&__icon {
margin-right: 16px;
min-width: 32px;
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-black);
&__link {
color: var(--c-blue-3);
&:visited {
color: var(--c-blue-3);
}
}
}
}
&__close {
min-width: 12px;
cursor: pointer;
}
}
</style>

11080
web/satellite/src/components/browser/scoped-bootstrap.css
View File

File diff suppressed because it is too large Load Diff