From 895eac17113f74f7a6364cdf2fdbcea1b8d93ccc Mon Sep 17 00:00:00 2001 From: NickolaiYurchenko Date: Wed, 22 Apr 2020 23:45:46 +0300 Subject: [PATCH] web/storagenode: api calls ungrouped, removed extra current period call Change-Id: Id3af8822b6d80c29c94976d96e0a490459358f8a --- .../components/SatelliteSelectionDropdown.vue | 97 ++++++++++++++----- .../components/payments/EstimationArea.vue | 13 --- .../src/app/store/modules/payout.ts | 8 +- web/storagenode/src/app/types/payout.ts | 1 - .../src/app/views/DashboardArea.vue | 17 +++- web/storagenode/src/app/views/PayoutArea.vue | 15 ++- 6 files changed, 105 insertions(+), 46 deletions(-) diff --git a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue index fb7bf8711..1fc1c7623 100644 --- a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue +++ b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue @@ -38,6 +38,7 @@ import SuspensionIcon from '@/../static/images/suspend.svg'; import { APPSTATE_ACTIONS } from '@/app/store/modules/appState'; import { NODE_ACTIONS } from '@/app/store/modules/node'; import { PAYOUT_ACTIONS } from '@/app/store/modules/payout'; +import { PayoutInfoRange, PayoutPeriod } from '@/app/types/payout'; import { SatelliteInfo } from '@/storagenode/dashboard'; @Component({ @@ -47,39 +48,85 @@ import { SatelliteInfo } from '@/storagenode/dashboard'; }, }) export default class SatelliteSelectionDropdown extends Vue { - public async onSatelliteClick(id: string): Promise { - try { - await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, id); - await this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO, id); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, id); - } catch (error) { - console.error(`${error.message} satellite data.`); - } - } - - public async onAllSatellitesClick(): Promise { - try { - await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null); - await this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL); - } catch (error) { - console.error(`${error.message} satellite data.`); - } - } - - public closePopup(): void { - this.$store.dispatch(APPSTATE_ACTIONS.CLOSE_ALL_POPUPS); - } + private now: Date = new Date(); + /** + * Returns node satellites list from store. + */ public get satellites(): SatelliteInfo[] { return this.$store.state.node.satellites; } + /** + * Returns selected satellite id from store. + */ public get selectedSatellite(): string { return this.$store.state.node.selectedSatellite.id; } + + /** + * Indicates if current month selected. + */ + public get isCurrentPeriod(): boolean { + const end = this.$store.state.payoutModule.periodRange.end; + const isCurrentMonthSelected = end.year === this.now.getUTCFullYear() && end.month === this.now.getUTCMonth(); + + return !this.$store.state.payoutModule.periodRange.start && isCurrentMonthSelected; + } + + /** + * Fires on satellite click and selects it. + */ + public async onSatelliteClick(id: string): Promise { + try { + await this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION); + await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, id); + this.fetchPayoutInfo(id); + } catch (error) { + console.error(error.message); + } + } + + /** + * Fires on all satellites click and sets selected satellite id to null. + */ + public async onAllSatellitesClick(): Promise { + try { + await this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION); + await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null); + this.fetchPayoutInfo(); + } catch (error) { + console.error(error.message); + } + } + + /** + * Closes dropdown. + */ + public closePopup(): void { + this.$store.dispatch(APPSTATE_ACTIONS.CLOSE_ALL_POPUPS); + } + + /** + * Fetches payout information depends on selected satellite. + */ + private async fetchPayoutInfo(id: string = ''): Promise { + await this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_PAYOUT_CALENDAR, false); + + if (!this.isCurrentPeriod) { + try { + await this.$store.dispatch(PAYOUT_ACTIONS.SET_PERIODS_RANGE, new PayoutInfoRange(null, new PayoutPeriod())); + } catch (error) { + console.error(error.message); + } + } + + try { + await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, id); + } catch (error) { + console.error(error.message); + } + } } diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue index fe4de4f04..93d947063 100644 --- a/web/storagenode/src/app/components/payments/EstimationArea.vue +++ b/web/storagenode/src/app/components/payments/EstimationArea.vue @@ -218,19 +218,6 @@ export default class EstimationArea extends Vue { return this.$store.state.node.storageChartData.map(data => data.atRestTotal).reduce((previous, current) => previous + current, 0); } - /** - * Lifecycle hook after initial render. - * Builds estimated payout table. - */ - public async beforeMount(): Promise { - try { - await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO, this.$store.state.node.selectedSatellite.id); - } catch (error) { - console.error(error.message); - } - } - /** * Builds estimated payout table depends on selected period. */ diff --git a/web/storagenode/src/app/store/modules/payout.ts b/web/storagenode/src/app/store/modules/payout.ts index 948e58818..932aebb27 100644 --- a/web/storagenode/src/app/store/modules/payout.ts +++ b/web/storagenode/src/app/store/modules/payout.ts @@ -14,6 +14,7 @@ export const PAYOUT_MUTATIONS = { SET_HELD_INFO: 'SET_HELD_INFO', SET_RANGE: 'SET_RANGE', SET_TOTAL: 'SET_TOTAL', + SET_HELD_PERCENT: 'SET_HELD_PERCENT', }; export const PAYOUT_ACTIONS = { @@ -45,6 +46,9 @@ export function makePayoutModule(api: PayoutApi) { [PAYOUT_MUTATIONS.SET_RANGE](state: PayoutState, periodRange: PayoutInfoRange): void { state.periodRange = periodRange; }, + [PAYOUT_MUTATIONS.SET_HELD_PERCENT](state: PayoutState, heldPercentage: number): void { + state.heldPercentage = heldPercentage; + }, }, actions: { [PAYOUT_ACTIONS.GET_HELD_INFO]: async function ({commit, state, rootState}: any, satelliteId: string = ''): Promise { @@ -58,8 +62,7 @@ export function makePayoutModule(api: PayoutApi) { satelliteId, )); - heldInfo.heldPercentage = getHeldPercentage(rootState.node.selectedSatellite.joinDate); - + commit(PAYOUT_MUTATIONS.SET_HELD_PERCENT, getHeldPercentage(rootState.node.selectedSatellite.joinDate)); commit(PAYOUT_MUTATIONS.SET_HELD_INFO, heldInfo); }, [PAYOUT_ACTIONS.GET_TOTAL]: async function ({commit, rootState}: any, satelliteId: string = ''): Promise { @@ -87,6 +90,7 @@ export function makePayoutModule(api: PayoutApi) { + currentBandwidthAuditAndRepair * BANDWIDTH_REPAIR_PRICE_PER_TB + currentDiskSpace * DISK_SPACE_PRICE_PER_TB) / TB; + commit(PAYOUT_MUTATIONS.SET_HELD_PERCENT, getHeldPercentage(rootState.node.selectedSatellite.joinDate)); commit(PAYOUT_MUTATIONS.SET_TOTAL, new TotalPayoutInfo(totalPayoutInfo.totalHeldAmount, thisMonthEarnings)); }, [PAYOUT_ACTIONS.SET_PERIODS_RANGE]: function ({commit}: any, periodRange: PayoutInfoRange): void { diff --git a/web/storagenode/src/app/types/payout.ts b/web/storagenode/src/app/types/payout.ts index 93c5f30c9..d0056b371 100644 --- a/web/storagenode/src/app/types/payout.ts +++ b/web/storagenode/src/app/types/payout.ts @@ -34,7 +34,6 @@ export class HeldInfo { public owed: number = 0, public disposed: number = 0, public paid: number = 0, - public heldPercentage: number = 0, ) {} } diff --git a/web/storagenode/src/app/views/DashboardArea.vue b/web/storagenode/src/app/views/DashboardArea.vue index 9f1a9a6f2..498619996 100644 --- a/web/storagenode/src/app/views/DashboardArea.vue +++ b/web/storagenode/src/app/views/DashboardArea.vue @@ -28,11 +28,24 @@ import { NotificationsCursor } from '@/app/types/notifications'; }, }) export default class Dashboard extends Vue { + /** + * Lifecycle hook after initial render. + * Fetches notifications and total payout information for all satellites. + */ public async mounted(): Promise { try { - await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1)); await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO); + } catch (error) { + console.error(error); + } + + try { + await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1)); + } catch (error) { + console.error(error); + } + + try { await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL); } catch (error) { console.error(error); diff --git a/web/storagenode/src/app/views/PayoutArea.vue b/web/storagenode/src/app/views/PayoutArea.vue index 4a1879cff..b3924672b 100644 --- a/web/storagenode/src/app/views/PayoutArea.vue +++ b/web/storagenode/src/app/views/PayoutArea.vue @@ -72,9 +72,18 @@ export default class PayoutArea extends Vue { */ public async mounted(): Promise { try { - await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1)); await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO, this.$store.state.node.selectedSatellite.id); + } catch (error) { + console.error(error); + } + + try { + await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1)); + } catch (error) { + console.error(error); + } + + try { await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL); } catch (error) { console.error(error); @@ -86,7 +95,7 @@ export default class PayoutArea extends Vue { } public get heldPercentage(): number { - return this.$store.state.payoutModule.heldInfo.heldPercentage; + return this.$store.state.payoutModule.heldPercentage; } /**