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

web/satellite: add bucket details dialog

Browse Source 
issue https://github.com/storj/storj/issues/6115

Change-Id: I4dd3b93bd43f4871cd28ab595bace9e8ce59b7c2
This commit is contained in:
Cameron 2023-08-24 16:38:44 -04:00 committed by Storj Robot
parent b26df035f9
commit ec42fdae6d
8 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/vuetify-poc/src/assets/icon-bookmark-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M24.4016 12.8C25.3249 12.8 26.0733 13.5484 26.0733 14.4717V26.6856C26.0733 26.9697 25.843 27.2 25.559 27.2C25.418 27.2 25.2832 27.1421 25.1861 27.0399L20.396 21.9983C20.1025 21.6894 19.6141 21.6769 19.3052 21.9704C19.2957 21.9795 19.2864 21.9888 19.2773 21.9983L14.4872 27.0399C14.2916 27.2459 13.966 27.2542 13.7601 27.0585C13.6578 26.9614 13.6 26.8266 13.6 26.6856V14.4717C13.6 13.5484 14.3484 12.8 15.2717 12.8H24.4016ZM24.4016 14.2145H15.2717C15.1361 14.2145 15.025 14.3194 15.0152 14.4525L15.0145 14.4717V24.4315L18.2519 21.024C18.2647 21.0105 18.2777 20.9972 18.2909 20.984L18.3309 20.9449C19.1947 20.1243 20.5535 20.148 21.3883 20.9899L21.4215 21.024L24.6588 24.4313V14.4717C24.6588 14.3361 24.5539 14.225 24.4208 14.2152L24.4016 14.2145Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 924 B

4
web/satellite/vuetify-poc/src/assets/icon-calendar-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M23.6297 12.8C23.9824 12.8 24.2699 13.0789 24.2838 13.4282L24.2843 13.4545L24.2844 13.9504C24.7134 14.0334 25.0124 14.1565 25.3126 14.3171C25.9139 14.6386 26.3857 15.1105 26.7072 15.7117L26.7348 15.764L26.7753 15.8439C27.0529 16.4057 27.2 17.0295 27.2 18.5537V22.1858C27.2 23.8303 27.0288 24.4267 26.7072 25.0279C26.3857 25.6291 25.9139 26.1009 25.3126 26.4225L25.2604 26.4501L25.1804 26.4906C24.6186 26.7681 23.9948 26.9152 22.4706 26.9152H17.5294C15.8849 26.9152 15.2885 26.744 14.6873 26.4225C14.0861 26.1009 13.6143 25.6291 13.2927 25.0279L13.2643 24.974L13.2239 24.8941C12.9512 24.3415 12.8046 23.7282 12.8 22.2567V18.5537C12.8 16.9092 12.9712 16.3129 13.2927 15.7117C13.6143 15.1105 14.0861 14.6386 14.6873 14.3171L14.7412 14.2887C15.0375 14.1348 15.3403 14.0175 15.7752 13.9393L15.7752 13.4545C15.7752 13.0931 16.0682 12.8 16.4297 12.8C16.7824 12.8 17.0699 13.0789 17.0838 13.4282L17.0843 13.4545L17.0842 13.8289L17.2292 13.8263C17.3033 13.8252 17.3797 13.8246 17.4586 13.8243H22.4706C22.651 13.8243 22.8188 13.8264 22.9754 13.8305L22.9752 13.4545C22.9752 13.0931 23.2682 12.8 23.6297 12.8ZM25.8908 19.0607H14.109L14.1091 22.2526L14.1099 22.3773C14.1192 23.5361 14.2091 23.9654 14.4471 24.4105C14.6466 24.7836 14.9316 25.0686 15.3047 25.2681L15.3515 25.2926L15.3992 25.3164C15.814 25.5182 16.2642 25.5975 17.3404 25.6055L17.5294 25.6061H22.4706C23.7723 25.6061 24.2276 25.5182 24.6953 25.2681C25.0684 25.0686 25.3533 24.7836 25.5529 24.4105L25.5773 24.3638L25.6012 24.316C25.803 23.9012 25.8823 23.4511 25.8902 22.3748L25.8909 22.1858L25.8908 19.0607ZM22.4706 15.1334H17.4626L17.3379 15.1342C17.2491 15.1349 17.1647 15.1361 17.0842 15.1378L17.0843 15.9792C17.0843 16.3407 16.7912 16.6338 16.4297 16.6338C16.0771 16.6338 15.7895 16.3548 15.7757 16.0055L15.7752 15.9792L15.7752 15.2794C15.6014 15.3285 15.4539 15.3916 15.3047 15.4715C14.9316 15.671 14.6466 15.956 14.4471 16.329L14.4226 16.3758C14.2486 16.7158 14.159 17.0645 14.1253 17.7515H25.8747C25.8394 17.033 25.743 16.6846 25.5529 16.329C25.3533 15.956 25.0684 15.671 24.6953 15.4715L24.6485 15.447C24.5325 15.3876 24.4155 15.3381 24.2843 15.2972L24.2843 15.9792C24.2843 16.3407 23.9912 16.6338 23.6297 16.6338C23.2771 16.6338 22.9895 16.3548 22.9757 16.0055L22.9752 15.9792L22.9754 15.1389C22.8764 15.1365 22.7714 15.1349 22.6596 15.1341L22.4706 15.1334Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
web/satellite/vuetify-poc/src/assets/icon-clock-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M20 12.8C23.9764 12.8 27.2 16.0236 27.2 20C27.2 23.9765 23.9764 27.2 20 27.2C16.0235 27.2 12.8 23.9765 12.8 20C12.8 16.0236 16.0235 12.8 20 12.8ZM20 14.12C16.7526 14.12 14.12 16.7526 14.12 20C14.12 23.2474 16.7526 25.88 20 25.88C23.2474 25.88 25.88 23.2474 25.88 20C25.88 16.7526 23.2474 14.12 20 14.12ZM20.06 15.56C20.4156 15.56 20.7055 15.8413 20.7195 16.1935L20.72 16.22L20.7201 19.4984H23.5184C23.8829 19.4984 24.1784 19.7939 24.1784 20.1584C24.1784 20.514 23.8971 20.8039 23.5449 20.8179L23.5184 20.8184H20.1259C19.9888 20.8184 19.8609 20.7779 19.7538 20.7082C19.5508 20.6068 19.4084 20.4003 19.4003 20.1577L19.4001 20.1471L19.4 16.22C19.4 15.8555 19.6955 15.56 20.06 15.56Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

4
web/satellite/vuetify-poc/src/assets/icon-file-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M20.7562 12.8C21.1349 12.8 21.4981 12.9505 21.766 13.2183L25.5255 16.9777C25.7933 17.2455 25.9438 17.6087 25.9438 17.9875V24.9389C25.9438 26.1877 24.9314 27.2 23.6826 27.2H16.6612C15.4124 27.2 14.4 26.1877 14.4 24.9389V15.0612C14.4 13.8124 15.4124 12.8 16.6612 12.8H20.7562ZM20.1718 14.1091H16.6612C16.1453 14.1091 15.7252 14.5195 15.7096 15.0316L15.7091 15.0612V24.9389C15.7091 25.4547 16.1194 25.8748 16.6315 25.8905L16.6612 25.8909H23.6826C24.1985 25.8909 24.6185 25.4806 24.6342 24.9685L24.6347 24.9389V18.5719L20.8264 18.572C20.4738 18.572 20.1862 18.293 20.1724 17.9437L20.1719 17.9174L20.1718 14.1091ZM23.9593 17.2628L21.4809 14.7844L21.481 17.2629L23.9593 17.2628Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 851 B

4
web/satellite/vuetify-poc/src/assets/icon-globe-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M20.06 12.8L20.1035 12.8004L20.1469 12.8015C20.4721 12.808 20.792 12.8361 21.1053 12.8843C20.878 13.308 20.7419 13.7862 20.7224 14.2936L20.7201 14.2924V25.7076C21.9236 25.0837 23 22.8308 23 20C23 19.0649 22.8825 18.1928 22.6818 17.4217C23.1075 17.6132 23.5811 17.72 24.08 17.72L24.1019 17.7197C24.2434 18.4363 24.32 19.203 24.32 20C24.32 21.928 23.8716 23.679 23.1415 24.9714C24.7873 23.9291 25.88 22.0922 25.88 20C25.88 19.1015 25.6785 18.2501 25.3182 17.4885C25.7397 17.3245 26.1194 17.0789 26.4372 16.7716C26.9253 17.7425 27.2 18.8392 27.2 20C27.2 23.8881 24.1181 27.0563 20.264 27.1952L20.1469 27.1985C20.118 27.1995 20.089 27.2 20.06 27.2H20C16.0235 27.2 12.8 23.9764 12.8 20C12.8 16.0235 16.0235 12.8 20 12.8H20.06ZM19.4 14.2924C18.1964 14.9161 17.12 17.1691 17.12 20C17.12 22.8309 18.1964 25.0839 19.4 25.7076V14.2924ZM17.0433 14.9163L16.9801 14.9537C15.2667 15.9812 14.12 17.8567 14.12 20C14.12 22.1695 15.2949 24.0646 17.0432 25.0836C16.275 23.7813 15.8 21.9844 15.8 20C15.8 18.0156 16.275 16.2187 17.0433 14.9163ZM24.14 12.8C25.0678 12.8 25.82 13.5253 25.82 14.42C25.82 15.3147 25.0678 16.04 24.14 16.04C23.2121 16.04 22.46 15.3147 22.46 14.42C22.46 13.5253 23.2121 12.8 24.14 12.8Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
View File

@ -77,6 +77,15 @@
/>
</template>
<v-list class="pa-0">
<v-list-item link @click="() => showBucketDetailsModal(item.raw.name)">
<template #prepend>
<icon-details size="18" />
</template>
<v-list-item-title class="text-body-2 ml-3">
View Bucket Details
</v-list-item-title>
</v-list-item>
<v-divider />
<v-list-item link @click="() => showShareBucketDialog(item.raw.name)">
<template #prepend>
<icon-share size="18" />
@ -102,6 +111,7 @@
<delete-bucket-dialog v-model="isDeleteBucketDialogShown" :bucket-name="bucketToDelete" />
<enter-bucket-passphrase-dialog v-model="isBucketPassphraseDialogOpen" @passphraseEntered="passphraseDialogCallback" />
<share-dialog v-model="isShareBucketDialogShown" :bucket-name="shareBucketName" />
<bucket-details-dialog v-model="isBucketDetailsDialogShown" :bucket-name="bucketDetailsName" />
</template>
<script setup lang="ts">
@ -123,9 +133,11 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import IconTrash from '@poc/components/icons/IconTrash.vue';
import IconShare from '@poc/components/icons/IconShare.vue';
import IconDetails from '@poc/components/icons/IconDetails.vue';
import DeleteBucketDialog from '@poc/components/dialogs/DeleteBucketDialog.vue';
import EnterBucketPassphraseDialog from '@poc/components/dialogs/EnterBucketPassphraseDialog.vue';
import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
import BucketDetailsDialog from '@poc/components/dialogs/BucketDetailsDialog.vue';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore();
@ -139,11 +151,13 @@ const search = ref<string>('');
const searchTimer = ref<NodeJS.Timeout>();
const selected = ref([]);
const bucketDetailsName = ref<string>('');
const shareBucketName = ref<string>('');
const isDeleteBucketDialogShown = ref<boolean>(false);
const bucketToDelete = ref<string>('');
const isBucketPassphraseDialogOpen = ref(false);
const isShareBucketDialogShown = ref<boolean>(false);
const isBucketDetailsDialogShown = ref<boolean>(false);
let passphraseDialogCallback: () => void = () => {};
@ -249,6 +263,14 @@ async function openBucket(bucketName: string): Promise<void> {
isBucketPassphraseDialogOpen.value = true;
}
/**
* Displays the Bucket Details dialog.
*/
function showBucketDetailsModal(bucketName: string): void {
bucketDetailsName.value = bucketName;
isBucketDetailsDialogShown.value = true;
}
/**
* Displays the Delete Bucket dialog.
*/

150
web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue Normal file
View File

@ -0,0 +1,150 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-dialog
v-model="model"
width="auto"
min-width="320px"
max-width="460px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="py-4 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/buckets/createBucket.svg">
</template>
<v-card-title class="font-weight-bold">
Bucket Details
</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="model = false"
/>
</template>
</v-card-item>
<v-divider />
<v-card-item class="pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-bookmark-circle.svg">
</template>
<h4>Name</h4>
<p>{{ bucket.name }}</p>
</v-card-item>
<v-card-item class="pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-file-circle.svg">
</template>
<h4>Objects</h4>
<p>{{ bucket.objectCount }}</p>
</v-card-item>
<v-card-item class="pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-globe-circle.svg">
</template>
<h4>Segments</h4>
<p>{{ bucket.segmentCount }}</p>
</v-card-item>
<v-card-item class="pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-calendar-circle.svg">
</template>
<h4>Date Created</h4>
<p>{{ bucket.since.toUTCString() }}</p>
</v-card-item>
<v-card-item class="mb-4 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-clock-circle.svg">
</template>
<h4>Last Updated</h4>
<p>{{ bucket.before.toUTCString() }}</p>
</v-card-item>
<v-divider />
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn color="primary" variant="flat" block @click="model = false">Close</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import {
VDialog,
VCard,
VCardItem,
VCardTitle,
VDivider,
VCardActions,
VRow,
VCol,
VBtn,
VForm,
VTextField,
} from 'vuetify/components';
import { useLoading } from '@/composables/useLoading';
import { Bucket } from '@/types/buckets';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
const isLoading = useLoading();
const bucketsStore = useBucketsStore();
const projectsStore = useProjectsStore();
const router = useRouter();
const emit = defineEmits<{
(event: 'update:modelValue', value: boolean): void,
}>();
const props = defineProps<{
modelValue: boolean,
bucketName: string,
}>();
const model = computed<boolean>({
get: () => props.modelValue,
set: value => emit('update:modelValue', value),
});
function redirectToBucketsPage(): void {
router.push(`/projects/${projectsStore.state.selectedProject.id}/buckets`);
}
const bucket = computed((): Bucket => {
if (!projectsStore.state.selectedProject.id) return new Bucket();
const data = bucketsStore.state.page.buckets.find(
(bucket: Bucket) => bucket.name === props.bucketName,
);
if (!data) {
redirectToBucketsPage();
return new Bucket();
}
return data;
});
</script>

16
web/satellite/vuetify-poc/src/components/icons/IconDetails.vue Normal file
View File

@ -0,0 +1,16 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M16.7748 8.32493C18.3965 9.94665 18.4113 12.5666 16.8012 14.1767C16.1488 14.8291 15.3306 15.2148 14.4801 15.3348L14.1882 16.9886C14.1668 18.2862 11.5111 19.3354 8.23832 19.3354C4.98514 19.3354 2.34176 18.2987 2.28922 17.012L2.28873 16.9886L0.0514784 4.31336C0.0262905 4.22372 0.0101765 4.13299 0.00351078 4.04131L0 4.0209L0.00219073 4.02102C0.000732884 3.99563 0 3.97016 0 3.94462C0 2.13309 3.68842 0.664551 8.23832 0.664551C12.7882 0.664551 16.4766 2.13309 16.4766 3.94462C16.4766 3.97016 16.4759 3.99563 16.4744 4.02102L16.4766 4.0209L16.473 4.04268C16.4663 4.13332 16.4504 4.22304 16.4256 4.31169L15.8759 7.42592L16.7748 8.32493ZM14.4021 6.12099C12.8929 6.79804 10.6908 7.22469 8.23832 7.22469C5.78597 7.22469 3.58388 6.79807 2.07471 6.12105L3.69641 15.3105L3.96156 16.7175L3.98613 16.7366C4.1248 16.8406 4.33942 16.9578 4.61812 17.0708L4.67471 17.0933C5.57304 17.4446 6.85312 17.6572 8.23832 17.6572C9.63152 17.6572 10.9181 17.4421 11.8165 17.0876C12.1403 16.9598 12.3817 16.8255 12.5234 16.7112L12.5349 16.7017L12.7952 15.2264C12.1404 15.0465 11.52 14.7036 10.9984 14.1985L10.9494 14.1503L7.5777 10.7786C7.25001 10.4509 7.25001 9.9196 7.5777 9.59192C7.89739 9.27222 8.41087 9.26443 8.74001 9.56852L8.76435 9.59192L12.1361 12.9637C12.4146 13.2422 12.7417 13.4414 13.0891 13.5613L14.4021 6.12099ZM15.5199 9.44324L14.7993 13.5264C15.0968 13.4085 15.3749 13.2297 15.6146 12.99C16.555 12.0496 16.5576 10.5179 15.6224 9.54645L15.5882 9.51158L15.5199 9.44324ZM8.23832 2.34273C6.22507 2.34273 4.35798 2.65715 3.03372 3.1844C2.46469 3.41096 2.04133 3.66046 1.79767 3.88983C1.78214 3.90444 1.76797 3.91837 1.75511 3.93156L1.74286 3.94447L1.765 3.96771L1.79767 3.99942C2.04133 4.22878 2.46469 4.47829 3.03372 4.70484C4.35798 5.2321 6.22507 5.54652 8.23832 5.54652C10.2516 5.54652 12.1187 5.2321 13.4429 4.70484C14.0119 4.47829 14.4353 4.22878 14.679 3.99942C14.6945 3.9848 14.7087 3.97087 14.7215 3.95768L14.7339 3.94447L14.7116 3.92153L14.679 3.88983C14.4353 3.66046 14.0119 3.41096 13.4429 3.1844C12.1187 2.65715 10.2516 2.34273 8.23832 2.34273Z" fill="#56606D" />
</svg>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
size: number | string;
}>(), {
size: 18,
});
</script>