Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
web/satellite/v2: allow user to download historical usage report
Added the ability to download historical usage report for past month, past year or custom date range (not bigger than 13 month). Issue: #6513 Change-Id: I23a2a33489fa4d41020f27447ea582b945a6201d
- Loading branch information
1 parent
f502f50
commit 2414386
Showing
3 changed files
with
204 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
194 changes: 194 additions & 0 deletions
194
web/satellite/vuetify-poc/src/components/dialogs/DetailedUsageReportDialog.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| // Copyright (C) 2024 Storj Labs, Inc. | ||
| // See LICENSE for copying information. | ||
|
|
||
| <template> | ||
| <v-dialog | ||
| v-model="dialog" | ||
| activator="parent" | ||
| width="auto" | ||
| min-width="400px" | ||
| transition="fade-transition" | ||
| > | ||
| <v-card rounded="xlg"> | ||
| <v-sheet> | ||
| <v-card-item class="pl-7 py-4"> | ||
| <template #prepend> | ||
| <v-card-title class="font-weight-bold"> | ||
| Get Detailed Usage Report | ||
| </v-card-title> | ||
| </template> | ||
|
|
||
| <template #append> | ||
| <v-btn | ||
| icon="$close" | ||
| variant="text" | ||
| size="small" | ||
| color="default" | ||
| @click="dialog = false" | ||
| /> | ||
| </template> | ||
| </v-card-item> | ||
| </v-sheet> | ||
|
|
||
| <v-divider /> | ||
|
|
||
| <v-form class="pa-8"> | ||
| <p class="text-subtitle-2 mb-2">Select date range to generate your report:</p> | ||
| <v-chip-group v-model="option" mandatory filter color="primary"> | ||
| <v-chip :value="Options.Month">Past Month</v-chip> | ||
| <v-chip :value="Options.Year">Past Year</v-chip> | ||
| <v-chip :value="Options.Custom">Choose Dates</v-chip> | ||
| </v-chip-group> | ||
| <v-date-picker | ||
| v-if="option === Options.Custom" | ||
| v-model="customRange" | ||
| header="Choose Dates" | ||
| multiple | ||
| show-adjacent-months | ||
| border | ||
| elevation="0" | ||
| rounded="lg" | ||
| /> | ||
| </v-form> | ||
|
|
||
| <v-divider /> | ||
|
|
||
| <v-card-actions class="pa-7"> | ||
| <v-row> | ||
| <v-col> | ||
| <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn> | ||
| </v-col> | ||
| <v-col> | ||
| <v-btn color="primary" variant="flat" block @click="downloadReport">Download Report</v-btn> | ||
| </v-col> | ||
| </v-row> | ||
| </v-card-actions> | ||
| </v-card> | ||
| </v-dialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch } from 'vue'; | ||
| import { | ||
| VDialog, | ||
| VBtn, | ||
| VRow, | ||
| VCol, | ||
| VSheet, | ||
| VCard, | ||
| VCardItem, | ||
| VCardTitle, | ||
| VCardActions, | ||
| VDivider, | ||
| VChipGroup, | ||
| VChip, | ||
| VForm, | ||
| VDatePicker, | ||
| } from 'vuetify/components'; | ||
| import { Download } from '@/utils/download'; | ||
| import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; | ||
| import { useProjectsStore } from '@/store/modules/projectsStore'; | ||
| import { useNotify } from '@/utils/hooks'; | ||
| enum Options { | ||
| Month = 0, | ||
| Year, | ||
| Custom, | ||
| } | ||
| const projectsStore = useProjectsStore(); | ||
| const notify = useNotify(); | ||
| const props = withDefaults(defineProps<{ | ||
| projectID: string | ||
| }>(), { | ||
| projectID: '', | ||
| }); | ||
| const dialog = ref<boolean>(false); | ||
| const option = ref<Options>(Options.Month); | ||
| const since = ref<Date>(); | ||
| const before = ref<Date>(); | ||
| const customRange = ref<Date[]>([]); | ||
| /** | ||
| * Sets past month as active option. | ||
| */ | ||
| function setPastMonth(): void { | ||
| const now = new Date(); | ||
| since.value = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 1, now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes())); | ||
| before.value = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes())); | ||
| option.value = Options.Month; | ||
| } | ||
| /** | ||
| * Sets past year as active option. | ||
| */ | ||
| function setPastYear(): void { | ||
| const now = new Date(); | ||
| since.value = new Date(Date.UTC(now.getUTCFullYear() - 1, now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes())); | ||
| before.value = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes())); | ||
| option.value = Options.Year; | ||
| } | ||
| /** | ||
| * Sets custom date range as active option. | ||
| */ | ||
| function setChooseDates(): void { | ||
| since.value = undefined; | ||
| before.value = undefined; | ||
| option.value = Options.Custom; | ||
| } | ||
| function downloadReport(): void { | ||
| if (!(since.value && before.value)) { | ||
| notify.error('Please select date range', AnalyticsErrorEventSource.DETAILED_USAGE_REPORT_MODAL); | ||
| return; | ||
| } | ||
| try { | ||
| const link = projectsStore.getUsageReportLink(since.value, before.value, props.projectID); | ||
| Download.fileByLink(link); | ||
| notify.success('Usage report download started successfully.'); | ||
| } catch (error) { | ||
| notify.notifyError(error, AnalyticsErrorEventSource.DETAILED_USAGE_REPORT_MODAL); | ||
| } | ||
| } | ||
| watch(customRange, () => { | ||
| if (customRange.value.length > 2) { | ||
| customRange.value = customRange.value.slice(0, 2); | ||
| return; | ||
| } | ||
| if (customRange.value.length < 2) { | ||
| since.value = undefined; | ||
| before.value = undefined; | ||
| return; | ||
| } | ||
| let [start, end] = customRange.value; | ||
| if (start.getTime() > end.getTime()) { | ||
| [start, end] = [end, start]; | ||
| } | ||
| since.value = new Date(Date.UTC(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours(), start.getMinutes())); | ||
| before.value = new Date(Date.UTC(end.getFullYear(), end.getMonth(), end.getDate(), end.getHours(), end.getMinutes())); | ||
| }); | ||
| watch(option, () => { | ||
| switch (option.value) { | ||
| case Options.Month: | ||
| setPastMonth(); | ||
| break; | ||
| case Options.Year: | ||
| setPastYear(); | ||
| break; | ||
| case Options.Custom: | ||
| setChooseDates(); | ||
| } | ||
| }, { immediate: true }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters