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 @@
@@ -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`