From 82fb0fce0436c5a5b9b74f15c7ff18f27979cfae Mon Sep 17 00:00:00 2001
From: Vitalii Shpital
Date: Tue, 30 Nov 2021 12:47:52 +0200
Subject: [PATCH] web/satellite: added charts date range picker for new project
dashboard
Created common VDateRangePicker component to be reused.
Reworked it's styling.
Added date range selection logic for new project dashboard.
Change-Id: Ie9bdd173527514924e437ca5bcc9cfbf7793e4dd
---
.../permissions/DurationPicker.vue | 61 ++------
.../permissions/DurationSelection.vue | 4 +-
.../src/components/common/VButton.vue | 8 +-
.../components/common/VDateRangePicker.vue | 108 ++++++++++++++
.../DateRangeSelection.vue | 133 ++++++++++++++++++
.../NewProjectDashboard.vue | 78 ++++++++--
web/satellite/src/store/modules/appState.ts | 26 +++-
web/satellite/src/store/modules/projects.ts | 21 +++
web/satellite/src/store/mutationConstants.ts | 3 +-
web/satellite/src/types/projects.ts | 10 ++
.../src/utils/constants/actionNames.ts | 3 +-
.../static/images/project/datepicker.svg | 3 +
.../static/images/project/newProject.svg | 3 +
.../__snapshots__/CouponArea.spec.ts.snap | 2 +-
.../__snapshots__/AddStorjForm.spec.ts.snap | 4 +-
.../__snapshots__/PaymentMethods.spec.ts.snap | 10 +-
.../common/__snapshots__/VButton.spec.ts.snap | 6 +-
.../__snapshots__/OverviewStep.spec.ts.snap | 4 +-
.../__snapshots__/CreateProject.spec.ts.snap | 4 +-
.../EditProjectDetails.spec.ts.snap | 20 +--
.../__snapshots__/NoBucketsArea.spec.ts.snap | 2 +-
.../__snapshots__/HeaderArea.spec.ts.snap | 16 +--
22 files changed, 422 insertions(+), 107 deletions(-)
create mode 100644 web/satellite/src/components/common/VDateRangePicker.vue
create mode 100644 web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
create mode 100644 web/satellite/static/images/project/datepicker.svg
create mode 100644 web/satellite/static/images/project/newProject.svg
diff --git a/web/satellite/src/components/accessGrants/permissions/DurationPicker.vue b/web/satellite/src/components/accessGrants/permissions/DurationPicker.vue
index 91f64056d..967ca8f0b 100644
--- a/web/satellite/src/components/accessGrants/permissions/DurationPicker.vue
+++ b/web/satellite/src/components/accessGrants/permissions/DurationPicker.vue
@@ -16,32 +16,25 @@
-
+
+
diff --git a/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue b/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
new file mode 100644
index 000000000..8b972cb1b
--- /dev/null
+++ b/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
@@ -0,0 +1,133 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
{{ dateRangeLabel }}
+
+
+
+
+
+
+
+
diff --git a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
index b581a6199..a84f11652 100644
--- a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
@@ -27,22 +27,34 @@
@@ -129,16 +141,20 @@
@@ -368,8 +416,8 @@ export default class NewProjectDashboard extends Vue {
display: flex;
align-items: center;
- > *:last-child {
- margin-left: 25px;
+ > .container {
+ margin-left: 16px;
}
}
}
@@ -438,6 +486,20 @@ export default class NewProjectDashboard extends Vue {
}
}
+ .new-project-button {
+
+ svg {
+ margin-right: 9px;
+ }
+
+ &:hover {
+
+ svg path {
+ fill: #fff;
+ }
+ }
+ }
+
@media screen and (max-width: 1280px) {
.project-dashboard {
diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts
index 038998207..679183046 100644
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@@ -22,7 +22,8 @@ class ViewsState {
public isAvailableBalanceDropdownShown = false,
public isPeriodsDropdownShown = false,
public isBucketNamesDropdownShown = false,
- public isDatePickerShown = false,
+ public isAGDatePickerShown = false,
+ public isChartsDatePickerShown = false,
public isPermissionsDropdownShown = false,
public isEditProfilePopupShown = false,
public isChangePasswordPopupShown = false,
@@ -92,8 +93,11 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
},
- [APP_STATE_MUTATIONS.TOGGLE_DATEPICKER_DROPDOWN](state: State): void {
- state.appState.isDatePickerShown = !state.appState.isDatePickerShown;
+ [APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN](state: State): void {
+ state.appState.isAGDatePickerShown = !state.appState.isAGDatePickerShown;
+ },
+ [APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN](state: State): void {
+ state.appState.isChartsDatePickerShown = !state.appState.isChartsDatePickerShown;
},
[APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN](state: State): void {
state.appState.isBucketNamesDropdownShown = !state.appState.isBucketNamesDropdownShown;
@@ -131,7 +135,8 @@ export const appStateModule = {
state.appState.isPermissionsDropdownShown = false;
state.appState.isPeriodsDropdownShown = false;
state.appState.isPaymentSelectionShown = false;
- state.appState.isDatePickerShown = false;
+ state.appState.isAGDatePickerShown = false;
+ state.appState.isChartsDatePickerShown = false;
state.appState.isBucketNamesDropdownShown = false;
},
[APP_STATE_MUTATIONS.CHANGE_STATE](state: State, newFetchState: AppState): void {
@@ -254,12 +259,19 @@ export const appStateModule = {
commit(APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN);
},
- [APP_STATE_ACTIONS.TOGGLE_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
- if (!state.appState.isDatePickerShown) {
+ [APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
+ if (!state.appState.isAGDatePickerShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
- commit(APP_STATE_MUTATIONS.TOGGLE_DATEPICKER_DROPDOWN);
+ commit(APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
+ },
+ [APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
+ if (!state.appState.isChartsDatePickerShown) {
+ commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+ }
+
+ commit(APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN]: function ({commit, state}: AppContext): void {
if (!state.appState.isBucketNamesDropdownShown) {
diff --git a/web/satellite/src/store/modules/projects.ts b/web/satellite/src/store/modules/projects.ts
index e1503eed5..b5cd09f0d 100644
--- a/web/satellite/src/store/modules/projects.ts
+++ b/web/satellite/src/store/modules/projects.ts
@@ -11,6 +11,7 @@ import {
ProjectsCursor,
ProjectsPage,
ProjectsStorageBandwidthDaily,
+ ProjectUsageDateRange,
} from '@/types/projects';
export const PROJECTS_ACTIONS = {
@@ -45,6 +46,7 @@ export const PROJECTS_MUTATIONS = {
SET_PAGE_NUMBER: 'SET_PAGE_NUMBER',
SET_PAGE: 'SET_PAGE',
SET_DAILY_DATA: 'SET_DAILY_DATA',
+ SET_CHARTS_DATE_RANGE: 'SET_CHARTS_DATE_RANGE',
};
const defaultSelectedProject = new Project('', '', '', '', '', true, 0);
@@ -58,6 +60,8 @@ export class ProjectsState {
public page: ProjectsPage = new ProjectsPage();
public bandwidthChartData: DataStamp[] = [];
public storageChartData: DataStamp[] = [];
+ public chartDataSince: Date | null = null;
+ public chartDataBefore: Date | null = null;
}
interface ProjectsContext {
@@ -103,6 +107,7 @@ const {
SET_PAGE_NUMBER,
SET_PAGE,
SET_DAILY_DATA,
+ SET_CHARTS_DATE_RANGE,
} = PROJECTS_MUTATIONS;
const projectsPageLimit = 7;
@@ -174,6 +179,11 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule
{
@@ -343,6 +357,13 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule {
+ if (!state.chartDataSince || !state.chartDataBefore) {
+ return null
+ }
+
+ return new ProjectUsageDateRange(state.chartDataSince, state.chartDataBefore);
+ },
},
};
}
diff --git a/web/satellite/src/store/mutationConstants.ts b/web/satellite/src/store/mutationConstants.ts
index 7bfd8ee01..f4b204253 100644
--- a/web/satellite/src/store/mutationConstants.ts
+++ b/web/satellite/src/store/mutationConstants.ts
@@ -20,7 +20,8 @@ export const APP_STATE_MUTATIONS = {
TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',
- TOGGLE_DATEPICKER_DROPDOWN: 'TOGGLE_DATEPICKER_DROPDOWN',
+ TOGGLE_AG_DATEPICKER_DROPDOWN: 'TOGGLE_AG_DATEPICKER_DROPDOWN',
+ TOGGLE_CHARTS_DATEPICKER_DROPDOWN: 'TOGGLE_CHARTS_DATEPICKER_DROPDOWN',
TOGGLE_BUCKET_NAMES_DROPDOWN: 'TOGGLE_BUCKET_NAMES_DROPDOWN',
TOGGLE_PERMISSIONS_DROPDOWN: 'TOGGLE_PERMISSIONS_DROPDOWN',
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index 34943e49d..4ae607df0 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -215,3 +215,13 @@ export class ProjectsStorageBandwidthDaily {
public storage: DataStamp[] = [],
) {}
}
+
+/**
+ * ProjectUsageDateRange is used to describe project's usage by date range.
+ */
+export class ProjectUsageDateRange {
+ public constructor(
+ public since: Date,
+ public before: Date,
+ ) {}
+}
diff --git a/web/satellite/src/utils/constants/actionNames.ts b/web/satellite/src/utils/constants/actionNames.ts
index 9b8da0883..d2b53ef9a 100644
--- a/web/satellite/src/utils/constants/actionNames.ts
+++ b/web/satellite/src/utils/constants/actionNames.ts
@@ -12,7 +12,8 @@ export const APP_STATE_ACTIONS = {
TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
- TOGGLE_DATEPICKER_DROPDOWN: 'toggleDatepickerDropdown',
+ TOGGLE_AG_DATEPICKER_DROPDOWN: 'toggleAGDatepickerDropdown',
+ TOGGLE_CHARTS_DATEPICKER_DROPDOWN: 'toggleChartsDatepickerDropdown',
TOGGLE_BUCKET_NAMES_DROPDOWN: 'toggleBucketNamesDropdown',
TOGGLE_PERMISSIONS_DROPDOWN: 'togglePermissionsDropdown',
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
diff --git a/web/satellite/static/images/project/datepicker.svg b/web/satellite/static/images/project/datepicker.svg
new file mode 100644
index 000000000..7c521f8d5
--- /dev/null
+++ b/web/satellite/static/images/project/datepicker.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/web/satellite/static/images/project/newProject.svg b/web/satellite/static/images/project/newProject.svg
new file mode 100644
index 000000000..d6a0f143b
--- /dev/null
+++ b/web/satellite/static/images/project/newProject.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap b/web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap
index 72ccef127..be374a1fe 100644
--- a/web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap
+++ b/web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`CouponArea renders correctly 1`] = `
Coupon
-
+
diff --git a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap
index 544d58aea..c1d2c7841 100644
--- a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap
+++ b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`AddStorjForm renders correctly 1`] = `
-
Continue to Coin Payments
+
Continue to Coin Payments
`;
@@ -32,7 +32,7 @@ exports[`AddStorjForm renders correctly after continue To Coin Payments click 1`
-
+
`;
diff --git a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap
index 9bd9e808d..d87c6d227 100644
--- a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap
+++ b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap
@@ -63,7 +63,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
-
Continue to Coin Payments
+
Continue to Coin Payments
@@ -83,7 +83,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 2`] =
Payment Method
@@ -153,7 +153,7 @@ exports[`PaymentMethods renders correctly after add card and cancel click 2`] =
Payment Method
@@ -179,7 +179,7 @@ exports[`PaymentMethods renders correctly with card 1`] = `
Payment Method
@@ -263,7 +263,7 @@ exports[`PaymentMethods renders correctly without card 1`] = `
Payment Method
diff --git a/web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap b/web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap
index 0d70605df..ef1f7e0d4 100644
--- a/web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap
+++ b/web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Button.vue renders correctly 1`] = `Default
`;
+exports[`Button.vue renders correctly 1`] = ` Default
`;
-exports[`Button.vue renders correctly with isDisabled prop 1`] = `Default
`;
+exports[`Button.vue renders correctly with isDisabled prop 1`] = ` Default
`;
-exports[`Button.vue renders correctly with isWhite prop 1`] = `Default
`;
+exports[`Button.vue renders correctly with isWhite prop 1`] = ` Default
`;
diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap
index c2497839f..d1d26ddb7 100644
--- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap
+++ b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap
@@ -51,7 +51,7 @@ exports[`OverviewStep.vue renders correctly 1`] = `
By using the web browser you are opting in to
server-side encryption .
- Continue in web
+ Continue in web
@@ -74,7 +74,7 @@ exports[`OverviewStep.vue renders correctly 1`] = `
The Uplink CLI uses
end-to-end encryption for object data, metadata and path data.
- Continue in cli
+ Continue in cli
Skip and go directly to dashboard
diff --git a/web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap b/web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
index 0db52939a..f5c39b83e 100644
--- a/web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
+++ b/web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
@@ -34,8 +34,8 @@ exports[`CreateProject.vue renders correctly 1`] = `
diff --git a/web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap b/web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap
index ee1775878..9355b3f77 100644
--- a/web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap
+++ b/web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap
@@ -9,13 +9,13 @@ exports[`EditProjectDetails.vue editing description works correctly 1`] = `
Name
Description
@@ -32,13 +32,13 @@ exports[`EditProjectDetails.vue editing description works correctly 2`] = `
Name
Description
new description
-
Edit
+
Edit
@@ -56,12 +56,12 @@ exports[`EditProjectDetails.vue editing name works correctly 1`] = `
Name
Description
@@ -79,13 +79,13 @@ exports[`EditProjectDetails.vue editing name works correctly 2`] = `
Name
Description
@@ -103,13 +103,13 @@ exports[`EditProjectDetails.vue renders correctly 1`] = `
Name
Description
diff --git a/web/satellite/tests/unit/project/buckets/__snapshots__/NoBucketsArea.spec.ts.snap b/web/satellite/tests/unit/project/buckets/__snapshots__/NoBucketsArea.spec.ts.snap
index 400fc503b..2dc4e0328 100644
--- a/web/satellite/tests/unit/project/buckets/__snapshots__/NoBucketsArea.spec.ts.snap
+++ b/web/satellite/tests/unit/project/buckets/__snapshots__/NoBucketsArea.spec.ts.snap
@@ -3,7 +3,7 @@
exports[`NoBucketsArea.vue renders correctly 1`] = `
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
index 125602b5a..379e678c5 100644
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
+++ b/web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`Team HeaderArea renders correctly 1`] = `