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

web/satellite/vuetify-poc: add geographic distribution dialog

Browse Source 
Added geographic distribution dialog to object browser preview.

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

Change-Id: Ia3d89a3c27ce8100a3a0a4e5fff91f0c41d0595e
This commit is contained in:
Vitalii 2023-09-25 15:12:34 +03:00 committed by Storj Robot
parent f78cde93ac
commit f5af0f2268
5 changed files with 171 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/browser/galleryView/modals/Distribution.vue
View File

@ -18,7 +18,7 @@
</p>
<div class="modal__buttons">
<VButton
link="https://docs.storj.io/dcs/concepts/overview#t1eR9"
link="https://docs.storj.io/learn#what-happens-when-you-upload"
label="Learn More"
height="52px"
width="100%"

3
web/satellite/vuetify-poc/src/assets/icon-geo-distribution.svg
View File

@ -1,3 +0,0 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 1.2002C15.9833 1.2002 19.0814 2.84925 21.0563 5.40926C20.6658 5.24878 20.2382 5.1602 19.79 5.1602C19.2217 5.1602 18.6868 5.30251 18.2187 5.55344C18.2762 5.51368 18.3349 5.47577 18.395 5.43974C16.8329 4.03495 14.7663 3.1802 12.5 3.1802C10.5465 3.1802 8.74137 3.81525 7.27976 4.89018L9.34995 4.8902C11.3879 4.8902 13.04 6.54226 13.04 8.58019C13.04 10.5973 11.4214 12.2364 9.41221 12.2697L9.34995 12.2702H7.72995C7.23289 12.2702 6.82995 12.6731 6.82995 13.1702C6.82995 13.6542 7.21197 14.0489 7.69091 14.0694L7.72995 14.0702H8.04495C9.78967 14.0702 11.2078 15.4687 11.2394 17.2058L11.24 17.3102C11.24 18.6106 10.4739 19.732 9.36842 20.2479C10.3415 20.6178 11.3971 20.8202 12.5 20.8202C13.5225 20.8202 14.5044 20.6462 15.4177 20.3262C14.1228 19.7533 13.2193 18.4573 13.2193 16.9502C13.2193 14.9331 14.8378 13.294 16.847 13.2607L16.9093 13.2602H20.3293C20.8263 13.2602 21.2293 12.8573 21.2293 12.3602C21.2293 12.0662 21.0883 11.805 20.8702 11.6408C21.8908 11.2912 22.6876 10.4595 22.9891 9.41746C23.1922 10.245 23.3 11.11 23.3 12.0002C23.3 17.9649 18.4646 22.8002 12.5 22.8002C6.53528 22.8002 1.69995 17.9649 1.69995 12.0002C1.69995 6.03552 6.53528 1.2002 12.5 1.2002ZM20.716 15.2144L20.6685 15.2204C20.5756 15.2313 20.4814 15.2378 20.386 15.2396L20.3293 15.2402H16.9093C15.9649 15.2402 15.1993 16.0058 15.1993 16.9502C15.1993 17.8783 15.9387 18.6337 16.8606 18.6595L16.9093 18.6602L18.2825 18.6603C19.3497 17.7329 20.1917 16.5534 20.716 15.2144ZM9.34995 6.8702L5.32447 6.8702C4.28927 8.31559 3.67995 10.0867 3.67995 12.0002C3.67995 14.6103 4.81368 16.9555 6.61555 18.5704L7.99995 18.5702C8.68133 18.5702 9.23639 18.0293 9.25922 17.3535L9.25995 17.3102V17.2652C9.25995 16.6084 8.73888 16.0734 8.08761 16.0509L8.04495 16.0502H7.72995C6.13937 16.0502 4.84995 14.7608 4.84995 13.1702C4.84995 11.5986 6.10885 10.3209 7.67327 10.2907L7.72995 10.2902H9.34995C10.2944 10.2902 11.06 9.5246 11.06 8.58019C11.06 7.65207 10.3205 6.89665 9.39864 6.87087L9.34995 6.8702ZM19.7279 6.51134C20.8214 6.51134 21.7079 7.39781 21.7079 8.49134C21.7079 9.58486 20.8214 10.4713 19.7279 10.4713C18.6344 10.4713 17.7479 9.58486 17.7479 8.49134C17.7479 7.39781 18.6344 6.51134 19.7279 6.51134Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

8
web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
View File

@ -53,8 +53,8 @@
Share
</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-geo-distribution.svg" width="22" alt="Geographic Distribution">
<v-btn icon size="small" color="white" @click="isGeographicDistributionDialogShown = true">
<icon-distribution size="22" />
<v-tooltip
activator="parent"
location="bottom"
@ -94,6 +94,7 @@
</v-dialog>
<share-dialog v-model="isShareDialogShown" :bucket-name="bucketName" :file="currentFile" />
<geographic-distribution-dialog v-model="isGeographicDistributionDialogShown" />
</template>
<script setup lang="ts">
@ -116,8 +117,10 @@ import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import IconShare from '@poc/components/icons/IconShare.vue';
import IconDistribution from '@poc/components/icons/IconDistribution.vue';
import FilePreviewItem from '@poc/components/dialogs/filePreviewComponents/FilePreviewItem.vue';
import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
import GeographicDistributionDialog from '@poc/components/dialogs/GeographicDistributionDialog.vue';
const obStore = useObjectBrowserStore();
const bucketsStore = useBucketsStore();
@ -125,6 +128,7 @@ const notify = useNotify();
const isDownloading = ref<boolean>(false);
const isShareDialogShown = ref<boolean>(false);
const isGeographicDistributionDialogShown = ref<boolean>(false);
const folderType = 'folder';

148
web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue Normal file
View File

@ -0,0 +1,148 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-dialog
v-model="model"
width="410px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4 pos-relative">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"
>
<icon-distribution size="18" />
</v-sheet>
</template>
<v-card-title class="font-weight-bold">
Geographic Distribution
</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="model = false"
/>
</template>
</v-card-item>
<v-divider />
<div class="pa-7">
<img class="w-100" :src="mapURL" alt="map">
<p class="font-weight-bold my-4">
You're getting this file from all over the world on the Storj network.
</p>
<p>
Storj Decentralized Cloud Storage splits files into smaller pieces, then distributes those pieces
over a global network of Nodes and recompiles them securely on download. This map shows the
real-time locations of this file’s pieces.
</p>
</div>
<v-divider />
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn
variant="outlined"
block
color="default"
link
href="https://docs.storj.io/learn#what-happens-when-you-upload"
target="_blank"
rel="noopener noreferrer"
>
Learn more
</v-btn>
</v-col>
<v-col>
<v-btn 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 {
VDialog,
VCard,
VCardItem,
VSheet,
VCardTitle,
VDivider,
VCardActions,
VRow,
VCol,
VBtn,
} from 'vuetify/components';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import { useNotify } from '@/utils/hooks';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { PreviewCache, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import IconDistribution from '@poc/components/icons/IconDistribution.vue';
const props = defineProps<{
modelValue: boolean,
}>();
const emit = defineEmits<{
'update:modelValue': [value: boolean];
}>();
const model = computed<boolean>({
get: () => props.modelValue,
set: value => emit('update:modelValue', value),
});
const analyticsStore = useAnalyticsStore();
const obStore = useObjectBrowserStore();
const bucketsStore = useBucketsStore();
const notify = useNotify();
/**
* Returns bucket name from store.
*/
const bucket = computed<string>(() => {
return bucketsStore.state.fileComponentBucketName;
});
/**
* Retrieve the encoded filepath.
*/
const encodedFilePath = computed<string>(() => {
return encodeURIComponent(`${bucket.value}/${obStore.state.objectPathForModal.trim()}`);
});
/**
* Returns object preview URLs cache from store.
*/
const cachedObjectPreviewURLs = computed<Map<string, PreviewCache>>(() => {
return obStore.state.cachedObjectPreviewURLs;
});
/**
* Returns object map URL.
*/
const mapURL = computed<string>(() => {
const cache = cachedObjectPreviewURLs.value.get(encodedFilePath.value);
const url = cache?.url || '';
return `${url}?map=1`;
});
</script>

16
web/satellite/vuetify-poc/src/components/icons/IconDistribution.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 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 1.2002C15.9833 1.2002 19.0814 2.84925 21.0563 5.40926C20.6658 5.24878 20.2382 5.1602 19.79 5.1602C19.2217 5.1602 18.6868 5.30251 18.2187 5.55344C18.2762 5.51368 18.3349 5.47577 18.395 5.43974C16.8329 4.03495 14.7663 3.1802 12.5 3.1802C10.5465 3.1802 8.74137 3.81525 7.27976 4.89018L9.34995 4.8902C11.3879 4.8902 13.04 6.54226 13.04 8.58019C13.04 10.5973 11.4214 12.2364 9.41221 12.2697L9.34995 12.2702H7.72995C7.23289 12.2702 6.82995 12.6731 6.82995 13.1702C6.82995 13.6542 7.21197 14.0489 7.69091 14.0694L7.72995 14.0702H8.04495C9.78967 14.0702 11.2078 15.4687 11.2394 17.2058L11.24 17.3102C11.24 18.6106 10.4739 19.732 9.36842 20.2479C10.3415 20.6178 11.3971 20.8202 12.5 20.8202C13.5225 20.8202 14.5044 20.6462 15.4177 20.3262C14.1228 19.7533 13.2193 18.4573 13.2193 16.9502C13.2193 14.9331 14.8378 13.294 16.847 13.2607L16.9093 13.2602H20.3293C20.8263 13.2602 21.2293 12.8573 21.2293 12.3602C21.2293 12.0662 21.0883 11.805 20.8702 11.6408C21.8908 11.2912 22.6876 10.4595 22.9891 9.41746C23.1922 10.245 23.3 11.11 23.3 12.0002C23.3 17.9649 18.4646 22.8002 12.5 22.8002C6.53528 22.8002 1.69995 17.9649 1.69995 12.0002C1.69995 6.03552 6.53528 1.2002 12.5 1.2002ZM20.716 15.2144L20.6685 15.2204C20.5756 15.2313 20.4814 15.2378 20.386 15.2396L20.3293 15.2402H16.9093C15.9649 15.2402 15.1993 16.0058 15.1993 16.9502C15.1993 17.8783 15.9387 18.6337 16.8606 18.6595L16.9093 18.6602L18.2825 18.6603C19.3497 17.7329 20.1917 16.5534 20.716 15.2144ZM9.34995 6.8702L5.32447 6.8702C4.28927 8.31559 3.67995 10.0867 3.67995 12.0002C3.67995 14.6103 4.81368 16.9555 6.61555 18.5704L7.99995 18.5702C8.68133 18.5702 9.23639 18.0293 9.25922 17.3535L9.25995 17.3102V17.2652C9.25995 16.6084 8.73888 16.0734 8.08761 16.0509L8.04495 16.0502H7.72995C6.13937 16.0502 4.84995 14.7608 4.84995 13.1702C4.84995 11.5986 6.10885 10.3209 7.67327 10.2907L7.72995 10.2902H9.34995C10.2944 10.2902 11.06 9.5246 11.06 8.58019C11.06 7.65207 10.3205 6.89665 9.39864 6.87087L9.34995 6.8702ZM19.7279 6.51134C20.8214 6.51134 21.7079 7.39781 21.7079 8.49134C21.7079 9.58486 20.8214 10.4713 19.7279 10.4713C18.6344 10.4713 17.7479 9.58486 17.7479 8.49134C17.7479 7.39781 18.6344 6.51134 19.7279 6.51134Z" fill="currentColor" />
</svg>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
size: number | string;
}>(), {
size: 18,
});
</script>