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

satellite:{console, web}: remove old project dashboard

Browse Source 
Removed old project dashboard along with a feature flag.

Change-Id: I9292b19caf101a84042d8c3006c27bc44db8d6b5
This commit is contained in:
Vitalii 2023-03-07 13:34:56 +02:00
parent b6721633f1
commit a01d47b3ed
36 changed files with 13 additions and 942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
satellite/console/consoleweb/config.go
View File

@ -31,7 +31,6 @@ type FrontendConfig struct {
LinksharingURL string `json:"linksharingURL"`
PathwayOverviewEnabled bool `json:"pathwayOverviewEnabled"`
Captcha console.CaptchaConfig `json:"captcha"`
NewProjectDashboard bool `json:"newProjectDashboard"`
AllProjectsDashboard bool `json:"allProjectsDashboard"`
DefaultPaidStorageLimit memory.Size `json:"defaultPaidStorageLimit"`
DefaultPaidBandwidthLimit memory.Size `json:"defaultPaidBandwidthLimit"`

4
satellite/console/consoleweb/server.go
View File

@ -91,7 +91,6 @@ type Config struct {
CSPEnabled bool `help:"indicates if Content Security Policy is enabled" devDefault:"false" releaseDefault:"true"`
LinksharingURL string `help:"url link for linksharing requests" default:"https://link.storjshare.io" devDefault:"http://localhost:8001"`
PathwayOverviewEnabled bool `help:"indicates if the overview onboarding step should render with pathways" default:"true"`
NewProjectDashboard bool `help:"indicates if new project dashboard should be used" default:"true"`
AllProjectsDashboard bool `help:"indicates if all projects dashboard should be used" default:"false"`
NewBillingScreen bool `help:"indicates if new billing screens should be used" default:"true"`
NewAccessGrantFlow bool `help:"indicates if new access grant flow should be used" default:"false"`
@ -469,7 +468,6 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
LoginRecaptchaSiteKey string
LoginHcaptchaEnabled bool
LoginHcaptchaSiteKey string
NewProjectDashboard bool
AllProjectsDashboard bool
DefaultPaidStorageLimit memory.Size
DefaultPaidBandwidthLimit memory.Size
@ -515,7 +513,6 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
data.LoginRecaptchaSiteKey = server.config.Captcha.Login.Recaptcha.SiteKey
data.LoginHcaptchaEnabled = server.config.Captcha.Login.Hcaptcha.Enabled
data.LoginHcaptchaSiteKey = server.config.Captcha.Login.Hcaptcha.SiteKey
data.NewProjectDashboard = server.config.NewProjectDashboard
data.AllProjectsDashboard = server.config.AllProjectsDashboard
data.NewBillingScreen = server.config.NewBillingScreen
data.InactivityTimerEnabled = server.config.Session.InactivityTimerEnabled
@ -685,7 +682,6 @@ func (server *Server) frontendConfigHandler(w http.ResponseWriter, r *http.Reque
DefaultPaidStorageLimit: server.config.UsageLimits.Storage.Paid,
DefaultPaidBandwidthLimit: server.config.UsageLimits.Bandwidth.Paid,
Captcha: server.config.Captcha,
NewProjectDashboard: server.config.NewProjectDashboard,
AllProjectsDashboard: server.config.AllProjectsDashboard,
NewBillingScreen: server.config.NewBillingScreen,
InactivityTimerEnabled: server.config.Session.InactivityTimerEnabled,

3
scripts/testdata/satellite-config.yaml.lock vendored
View File

@ -268,9 +268,6 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
# indicates if new billing screens should be used
# console.new-billing-screen: true
# indicates if new project dashboard should be used
# console.new-project-dashboard: true
# how long oauth access tokens are issued for
# console.oauth-access-token-expiry: 24h0m0s

1
testsuite/ui/uitest/run.go
View File

@ -34,7 +34,6 @@ func configureSatellite(log *zap.Logger, index int, config *satellite.Config) {
if dir := os.Getenv("STORJ_TEST_SATELLITE_WEB"); dir != "" {
config.Console.StaticDir = dir
}
config.Console.NewProjectDashboard = true
config.Console.CouponCodeBillingUIEnabled = true
}

1
web/satellite/index.html
View File

@ -28,7 +28,6 @@
<meta name="login-recaptcha-site-key" content="{{ .LoginRecaptchaSiteKey }}">
<meta name="login-hcaptcha-enabled" content="{{ .LoginHcaptchaEnabled }}">
<meta name="login-hcaptcha-site-key" content="{{ .LoginHcaptchaSiteKey }}">
<meta name="new-project-dashboard" content="{{ .NewProjectDashboard }}">
<meta name="all-projects-dashboard" content="{{ .AllProjectsDashboard }}">
<meta name="default-paid-storage-limit" content="{{ .DefaultPaidStorageLimit }}">
<meta name="default-paid-bandwidth-limit" content="{{ .DefaultPaidBandwidthLimit }}">

5
web/satellite/src/App.vue
View File

@ -40,7 +40,6 @@ export default class App extends Vue {
const isBetaSatellite = MetaUtils.getMetaContent('is-beta-satellite');
const couponCodeBillingUIEnabled = MetaUtils.getMetaContent('coupon-code-billing-ui-enabled');
const couponCodeSignupUIEnabled = MetaUtils.getMetaContent('coupon-code-signup-ui-enabled');
const isNewProjectDashboard = MetaUtils.getMetaContent('new-project-dashboard');
const isNewAccessGrantFlow = MetaUtils.getMetaContent('new-access-grant-flow');
if (satelliteName) {
@ -70,10 +69,6 @@ export default class App extends Vue {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled === 'true');
}
if (isNewProjectDashboard) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_PROJECT_DASHBOARD_STATUS, isNewProjectDashboard === 'true');
}
if (isNewAccessGrantFlow) {
this.$store.commit(APP_STATE_MUTATIONS.SET_ACCESS_GRANT_FLOW_STATUS, isNewAccessGrantFlow === 'true');
}

15
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -273,13 +273,7 @@ export default class MobileNavigation extends Vue {
return;
}
if (this.$route.name === RouteConfig.ProjectDashboard.name || this.$route.name === RouteConfig.NewProjectDashboard.name) {
return;
}
if (this.isNewProjectDashboard) {
this.$router.push(RouteConfig.NewProjectDashboard.path);
if (this.$route.name === RouteConfig.ProjectDashboard.name) {
return;
}
@ -327,13 +321,6 @@ export default class MobileNavigation extends Vue {
window.scrollTo(0, document.querySelector('.navigation-area__container__wrap')?.scrollHeight || 0);
}
/**
* Indicates if new project dashboard should be used.
*/
public get isNewProjectDashboard(): boolean {
return this.$store.state.appStateModule.isNewProjectDashboard;
}
/**
* Indicates if all projects dashboard should be used.
*/

15
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -176,13 +176,7 @@ export default class NavigationArea extends Vue {
return;
}
if (this.$route.name === RouteConfig.ProjectDashboard.name || this.$route.name === RouteConfig.NewProjectDashboard.name) {
return;
}
if (this.isNewProjectDashboard) {
this.$router.push(RouteConfig.NewProjectDashboard.path);
if (this.$route.name === RouteConfig.ProjectDashboard.name) {
return;
}
@ -262,13 +256,6 @@ export default class NavigationArea extends Vue {
return this.$store.state.appStateModule.appState.activeDropdown === APP_STATE_DROPDOWNS.QUICK_START;
}
/**
* Indicates if new project dashboard should be used.
*/
public get isNewProjectDashboard(): boolean {
return this.$store.state.appStateModule.isNewProjectDashboard;
}
/**
* Indicates if all projects dashboard should be used.
*/

2
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -162,7 +162,7 @@ export default class ProjectSelection extends Vue {
return;
}
if (this.$route.name === RouteConfig.NewProjectDashboard.name) {
if (this.$route.name === RouteConfig.ProjectDashboard.name) {
const now = new Date();
const past = new Date();
past.setDate(past.getDate() - 30);

123
web/satellite/src/components/project/ProjectDashboard.vue
View File

@ -1,123 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="dashboard-area">
<div class="dashboard-area__header-wrapper">
<h1 class="dashboard-area__header-wrapper__title" aria-roledescription="title">{{ projectName }} Dashboard</h1>
<p class="dashboard-area__header-wrapper__message">
Expect a delay of a few hours between network activity and the latest dashboard stats.
</p>
</div>
<ProjectUsage />
<ProjectSummary :is-data-fetching="isSummaryDataFetching" />
<p class="dashboard-area__title">Buckets</p>
<BucketsTable :is-loading="areBucketsFetching" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
// @vue/component
@Component({
components: {
BucketsTable,
ProjectUsage,
ProjectSummary,
},
})
export default class ProjectDashboard extends Vue {
public areBucketsFetching = true;
public isSummaryDataFetching = true;
public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/**
* Lifecycle hook after initial render.
* Fetches buckets, usage rollup, project members and access grants.
*/
public async mounted(): Promise<void> {
if (!this.$store.getters.selectedProject.id) {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
this.analytics.pageVisit(onboardingPath);
await this.$router.push(onboardingPath);
return;
}
const FIRST_PAGE = 1;
try {
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE);
this.areBucketsFetching = false;
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
this.isSummaryDataFetching = false;
} catch (error) {
await this.$notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
}
}
/**
* Returns selected project name.
*/
public get projectName(): string {
return this.$store.getters.selectedProject.name;
}
}
</script>
<style scoped lang="scss">
.dashboard-area {
padding: 30px 30px 60px;
height: calc(100% - 90px);
font-family: 'font_regular', sans-serif;
&__header-wrapper {
display: flex;
flex-direction: column;
margin: 10px 0 30px;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 22px;
line-height: 27px;
color: #384b65;
margin: 0;
}
&__message {
font-size: 16px;
line-height: 20px;
color: #384b65;
margin: 10px 0 0;
}
}
&__title {
margin: 20px 0;
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 16px;
color: #1b2533;
}
}
</style>

0
web/satellite/src/components/project/newProjectDashboard/BandwidthChart.vue → web/satellite/src/components/project/dashboard/BandwidthChart.vue
View File

0
web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue → web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
View File

0
web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue → web/satellite/src/components/project/dashboard/DateRangeSelection.vue
View File

0
web/satellite/src/components/project/newProjectDashboard/InfoContainer.vue → web/satellite/src/components/project/dashboard/InfoContainer.vue
View File

13
web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue → web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -154,7 +154,6 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { computed } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
@ -171,12 +170,12 @@ import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/newProjectDashboard/InfoContainer.vue';
import StorageChart from '@/components/project/newProjectDashboard/StorageChart.vue';
import BandwidthChart from '@/components/project/newProjectDashboard/BandwidthChart.vue';
import DashboardFunctionalHeader from '@/components/project/newProjectDashboard/DashboardFunctionalHeader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
import StorageChart from '@/components/project/dashboard/StorageChart.vue';
import BandwidthChart from '@/components/project/dashboard/BandwidthChart.vue';
import DashboardFunctionalHeader from '@/components/project/dashboard/DashboardFunctionalHeader.vue';
import VButton from '@/components/common/VButton.vue';
import DateRangeSelection from '@/components/project/newProjectDashboard/DateRangeSelection.vue';
import DateRangeSelection from '@/components/project/dashboard/DateRangeSelection.vue';
import VInfo from '@/components/common/VInfo.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
@ -203,7 +202,7 @@ import InfoIcon from '@/../static/images/project/infoIcon.svg';
DashboardFunctionalHeader,
},
})
export default class NewProjectDashboard extends Vue {
export default class ProjectDashboard extends Vue {
public now = new Date().toLocaleDateString('en-US');
public isDataFetching = true;
public areBucketsFetching = true;

0
web/satellite/src/components/project/newProjectDashboard/StorageChart.vue → web/satellite/src/components/project/dashboard/StorageChart.vue
View File

118
web/satellite/src/components/project/summary/ProjectSummary.vue
View File

@ -1,118 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<section class="project-summary">
<h1 class="project-summary__title">Details</h1>
<VLoader v-if="isDataFetching" />
<div v-else class="project-summary__items">
<SummaryItem
class="right-indent"
background-color="#f5f6fa"
title-color="#1b2533"
value-color="#000"
title="Users"
:value="teamSize"
/>
<SummaryItem
class="right-indent"
background-color="#f5f6fa"
title-color="#1b2533"
value-color="#000"
title="Access Grants"
:value="accessGrantsAmount"
/>
<SummaryItem
class="right-indent"
background-color="#b1c1d9"
title-color="#1b2533"
value-color="#000"
title="Buckets"
:value="bucketsAmount"
/>
<SummaryItem
background-color="#0068DC"
title-color="#fff"
value-color="#fff"
title="Estimated Charges"
:value="estimatedCharges"
:is-money="true"
/>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VLoader from '@/components/common/VLoader.vue';
import SummaryItem from '@/components/project/summary/SummaryItem.vue';
// @vue/component
@Component({
components: {
SummaryItem,
VLoader,
},
})
export default class ProjectSummary extends Vue {
@Prop({ default: true })
public readonly isDataFetching: boolean;
/**
* teamSize returns project members amount for selected project.
*/
public get teamSize(): number {
return this.$store.state.projectMembersModule.page.totalCount;
}
/**
* accessGrantsAmount returns access grants' amount for selected project.
*/
public get accessGrantsAmount(): number {
return this.$store.state.accessGrantsModule.page.totalCount;
}
/**
* bucketsAmount returns buckets amount for selected project.
*/
public get bucketsAmount(): number {
return this.$store.state.bucketUsageModule.page.totalCount;
}
/**
* estimatedCharges returns estimated charges summary for selected project.
*/
public get estimatedCharges(): number {
return this.$store.state.paymentsModule.priceSummaryForSelectedProject;
}
}
</script>
<style scoped lang="scss">
.project-summary {
margin-top: 30px;
padding: 20px;
width: calc(100% - 40px);
background-color: #fff;
border-radius: 6px;
&__title {
font-family: 'font_bold', sans-serif;
font-style: normal;
font-size: 16px;
line-height: 16px;
color: #1b2533;
margin-bottom: 25px;
}
&__items {
display: flex;
align-items: center;
}
}
.right-indent {
margin-right: 20px;
}
</style>

54
web/satellite/src/components/project/summary/SummaryItem.vue
View File

@ -1,54 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="summary-item" :style="{ backgroundColor: backgroundColor }">
<p class="summary-item__title" :style="{ color: titleColor }">{{ title }}</p>
<p v-if="isMoney" class="summary-item__value" :style="{ color: valueColor }">{{ value | centsToDollars }}</p>
<p v-else class="summary-item__value" :style="{ color: valueColor }">{{ value }}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class SummaryItem extends Vue {
@Prop({ default: '#fff' })
public readonly backgroundColor: string;
@Prop({ default: '#1b2533' })
public readonly titleColor: string;
@Prop({ default: '#000' })
public readonly valueColor: string;
@Prop({ default: '' })
public readonly title: string;
@Prop({ default: 0 })
public readonly value: number;
@Prop({ default: false })
public readonly isMoney: boolean;
}
</script>
<style scoped lang="scss">
.summary-item {
padding: 25px 30px;
width: 100%;
border-radius: 6px;
&__title {
font-family: 'font_medium', sans-serif;
font-size: 14px;
line-height: 14px;
margin: 0 0 12px;
}
&__value {
font-family: 'font_bold', sans-serif;
font-size: 28px;
line-height: 23px;
letter-spacing: -1px;
margin: 0;
}
}
</style>

106
web/satellite/src/components/project/usage/ProjectUsage.vue
View File

@ -1,106 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="project-usage">
<UsageArea
class="project-usage__storage-used"
title="Storage"
:used="storageUsed"
:limit="storageLimit"
:is-data-fetching="isDataFetching"
/>
<UsageArea
class="project-usage__bandwidth-used"
title="Bandwidth"
:used="bandwidthUsed"
:limit="bandwidthLimit"
:is-data-fetching="isDataFetching"
/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import UsageArea from '@/components/project/usage/UsageArea.vue';
// @vue/component
@Component({
components: {
UsageArea,
},
})
export default class ProjectUsage extends Vue {
public isDataFetching = true;
/**
* Lifecycle hook after initial render.
* Fetches project limits.
*/
public async mounted(): Promise<void> {
if (!this.$store.getters.selectedProject.id) {
return;
}
try {
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
this.isDataFetching = false;
} catch (error) {
await this.$notify.error(error.message, AnalyticsErrorEventSource.PROJECT_USAGE_CONTAINER);
}
}
/**
* Returns bandwidth used amount from store.
*/
public get bandwidthUsed(): number {
return this.$store.state.projectsModule.currentLimits.bandwidthUsed;
}
/**
* Returns bandwidth limit amount from store.
*/
public get bandwidthLimit(): number {
return this.$store.state.projectsModule.currentLimits.bandwidthLimit;
}
/**
* Returns storage used amount from store.
*/
public get storageUsed(): number {
return this.$store.state.projectsModule.currentLimits.storageUsed;
}
/**
* Returns storage limit amount from store.
*/
public get storageLimit(): number {
return this.$store.state.projectsModule.currentLimits.storageLimit;
}
}
</script>
<style scoped lang="scss">
.project-usage {
width: 100%;
font-family: 'font_regular', sans-serif;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
&__storage-used,
&__bandwidth-used {
width: calc(50% - 20px);
}
&__storage-used {
margin-right: 40px;
}
}
</style>

139
web/satellite/src/components/project/usage/UsageArea.vue
View File

@ -1,139 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="usage-area">
<p class="usage-area__title">{{ title }}</p>
<VLoader v-if="isDataFetching" />
<template v-else>
<pre class="usage-area__remaining">{{ remainingFormatted }} Remaining</pre>
<VBar
:current="used"
:max="limit"
color="#0068DC"
/>
<div class="usage-area__limits-area">
<pre class="usage-area__limits-area__title">{{ title }} Used</pre>
<pre class="usage-area__limits-area__limits">{{ usedFormatted }} / {{ limitFormatted }}</pre>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Dimensions, Size } from '@/utils/bytesSize';
import VBar from '@/components/common/VBar.vue';
import VLoader from '@/components/common/VLoader.vue';
// @vue/component
@Component({
components: {
VBar,
VLoader,
},
})
export default class UsageArea extends Vue {
@Prop({ default: '' })
public readonly title: string;
@Prop({ default: 0 })
public readonly used: number;
@Prop({ default: 0 })
public readonly limit: number;
@Prop({ default: true })
public readonly isDataFetching: boolean;
/**
* Returns formatted remaining amount.
*/
public get remainingFormatted(): string {
const remaining = this.limit - this.used;
if (remaining < 0) {
return '0 Bytes';
}
return this.formattedValue(new Size(remaining, 2));
}
/**
* Returns formatted used amount.
*/
public get usedFormatted(): string {
return this.formattedValue(new Size(this.used, 2));
}
/**
* Returns formatted limit amount.
*/
public get limitFormatted(): string {
return this.formattedValue(new Size(this.limit, 2));
}
/**
* Formats value to needed form and returns it.
*/
private formattedValue(value: Size): string {
switch (value.label) {
case Dimensions.Bytes:
case Dimensions.KB:
return '0';
default:
return `${value.formattedBytes.replace(/\\.0+$/, '')}${value.label}`;
}
}
}
</script>
<style scoped lang="scss">
h1,
p,
pre {
margin: 0;
}
.usage-area {
padding: 20px;
border-radius: 6px;
background-color: #fff;
&__title {
font-size: 16px;
line-height: 16px;
color: #1b2533;
margin-bottom: 25px;
font-family: 'font_bold', sans-serif;
}
&__remaining {
font-size: 16px;
line-height: 16px;
color: #1b2533;
margin-bottom: 15px;
font-family: 'font_regular', sans-serif;
}
&__limits-area {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15px;
&__title {
font-size: 14px;
line-height: 14px;
color: #384761;
font-family: 'font_regular', sans-serif;
}
&__limits {
font-size: 14px;
line-height: 14px;
color: #1b2533;
font-family: 'font_regular', sans-serif;
}
}
}
</style>

14
web/satellite/src/router/index.ts
View File

@ -31,8 +31,7 @@ import OnbCLIStep from '@/components/onboardingTour/steps/CLIStep.vue';
import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import CreateProject from '@/components/project/CreateProject.vue';
import EditProjectDetails from '@/components/project/EditProjectDetails.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import NewProjectDashboard from '@/components/project/newProjectDashboard/NewProjectDashboard.vue';
import ProjectDashboard from '@/components/project/dashboard/ProjectDashboard.vue';
import ProjectsList from '@/components/projectsList/ProjectsList.vue';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import CLIInstall from '@/components/onboardingTour/steps/cliFlow/CLIInstall.vue';
@ -76,7 +75,6 @@ export abstract class RouteConfig {
public static Account = new NavigationLink('/account', 'Account');
public static AccountSettings = new NavigationLink('/account-settings', 'Account Settings');
public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
public static NewProjectDashboard = new NavigationLink('/new-project-dashboard', ' Dashboard');
public static Users = new NavigationLink('/project-members', 'Users');
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
public static CreateProject = new NavigationLink('/create-project', 'Create Project');
@ -137,11 +135,6 @@ export abstract class RouteConfig {
public static UploadFileChildren = new NavigationLink('*', 'Objects Upload Children');
}
const isNewProjectDashboard = MetaUtils.getMetaContent('new-project-dashboard') === 'true';
if (isNewProjectDashboard) {
RouteConfig.ProjectDashboard = RouteConfig.NewProjectDashboard;
}
if (MetaUtils.getMetaContent('pricing-packages-enabled') === 'true') {
RouteConfig.FirstOnboardingStep = RouteConfig.PricingPlanStep;
}
@ -269,11 +262,6 @@ export const router = new Router({
},
],
},
{
path: RouteConfig.NewProjectDashboard.path,
name: RouteConfig.NewProjectDashboard.name,
component: NewProjectDashboard,
},
{
path: RouteConfig.ProjectDashboard.path,
name: RouteConfig.ProjectDashboard.name,

4
web/satellite/src/store/index.ts
View File

@ -102,7 +102,7 @@ export default store;
relies on store state for the routing behavior.
*/
router.beforeEach(async (to, from, next) => {
if (to.name === RouteConfig.NewProjectDashboard.name && from.name === RouteConfig.Login.name) {
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.Login.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
}
@ -110,7 +110,7 @@ router.beforeEach(async (to, from, next) => {
// but since there is no project we then redirect user to onboarding flow.
// That's why we toggle this flag here back to false not show create project passphrase modal again
// if user clicks 'Continue in web'.
if (to.name === RouteConfig.NewProjectDashboard.name && from.name === RouteConfig.OverviewStep.name) {
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.OverviewStep.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
}

7
web/satellite/src/store/modules/appState.ts
View File

@ -38,7 +38,6 @@ class State {
public isBetaSatellite = false,
public couponCodeBillingUIEnabled = false,
public couponCodeSignupUIEnabled = false,
public isNewProjectDashboard = false,
public isAllProjectsDashboard = MetaUtils.getMetaContent('all-projects-dashboard') === 'true',
public isNewAccessGrantFlow = false,
) {}
@ -87,9 +86,6 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.SET_SATELLITE_STATUS](state: State, isBetaSatellite: boolean): void {
state.isBetaSatellite = isBetaSatellite;
},
[APP_STATE_MUTATIONS.SET_PROJECT_DASHBOARD_STATUS](state: State, isNewProjectDashboard: boolean): void {
state.isNewProjectDashboard = isNewProjectDashboard;
},
[APP_STATE_MUTATIONS.SET_ACCESS_GRANT_FLOW_STATUS](state: State, isNewAccessGrantFlow: boolean): void {
state.isNewAccessGrantFlow = isNewAccessGrantFlow;
},
@ -169,9 +165,6 @@ export const appStateModule = {
[APP_STATE_ACTIONS.SET_SATELLITE_STATUS]: function ({ commit }: AppContext, isBetaSatellite: boolean): void {
commit(APP_STATE_MUTATIONS.SET_SATELLITE_STATUS, isBetaSatellite);
},
[APP_STATE_ACTIONS.SET_PROJECT_DASHBOARD_STATUS]: function ({ commit }: AppContext, isNewProjectDashboard: boolean): void {
commit(APP_STATE_MUTATIONS.SET_PROJECT_DASHBOARD_STATUS, isNewProjectDashboard);
},
[APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS]: function ({ commit }: AppContext, couponCodeBillingUIEnabled: boolean): void {
commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled);
},

1
web/satellite/src/store/mutationConstants.ts
View File

@ -20,7 +20,6 @@ export const APP_STATE_MUTATIONS = {
SET_SATELLITE_STATUS: 'SET_SATELLITE_STATUS',
SET_COUPON_CODE_BILLING_UI_STATUS: 'SET_COUPON_CODE_BILLING_UI_STATUS',
SET_COUPON_CODE_SIGNUP_UI_STATUS: 'SET_COUPON_CODE_SIGNUP_UI_STATUS',
SET_PROJECT_DASHBOARD_STATUS: 'SET_PROJECT_DASHBOARD_STATUS',
SET_ACCESS_GRANT_FLOW_STATUS: 'SET_ACCESS_GRANT_FLOW_STATUS',
SET_ONB_AG_NAME_STEP_BACK_ROUTE: 'SET_ONB_AG_NAME_STEP_BACK_ROUTE',
SET_ONB_API_KEY_STEP_BACK_ROUTE: 'SET_ONB_API_KEY_STEP_BACK_ROUTE',

1
web/satellite/src/utils/constants/actionNames.ts
View File

@ -11,7 +11,6 @@ export const APP_STATE_ACTIONS = {
SET_SATELLITE_STATUS: 'SET_SATELLITE_STATUS',
SET_COUPON_CODE_BILLING_UI_STATUS: 'SET_COUPON_CODE_BILLING_UI_STATUS',
SET_COUPON_CODE_SIGNUP_UI_STATUS: 'SET_COUPON_CODE_SIGNUP_UI_STATUS',
SET_PROJECT_DASHBOARD_STATUS: 'SET_PROJECT_DASHBOARD_STATUS',
SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS: 'SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS',
TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
};

2
web/satellite/src/views/DashboardArea.vue
View File

@ -350,7 +350,7 @@ const isCreateProjectPage = computed((): boolean => {
* Indicates if current route is the dashboard page.
*/
const isDashboardPage = computed((): boolean => {
return router.history.current?.name === RouteConfig.NewProjectDashboard.name;
return router.history.current?.name === RouteConfig.ProjectDashboard.name;
});
/**

64
web/satellite/tests/unit/project/ProjectDashboard.spec.ts
View File

@ -1,64 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { AccessGrantsMock } from '../mock/api/accessGrants';
import { BucketsMock } from '../mock/api/buckets';
import { PaymentsMock } from '../mock/api/payments';
import { ProjectMembersApiMock } from '../mock/api/projectMembers';
import { ProjectsApiMock } from '../mock/api/projects';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { appStateModule } from '@/store/modules/appState';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectMembersModule } from '@/store/modules/projectMembers';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { AccessGrantsPage } from '@/types/accessGrants';
import { ProjectMembersPage } from '@/types/projectMembers';
import { Project } from '@/types/projects';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const bucketsApi = new BucketsMock();
const bucketsModule = makeBucketsModule(bucketsApi);
const paymentsApi = new PaymentsMock();
const paymentsModule = makePaymentsModule(paymentsApi);
const membersApi = new ProjectMembersApiMock();
const membersModule = makeProjectMembersModule(membersApi);
const grantsApi = new AccessGrantsMock();
const grantsModule = makeAccessGrantsModule(grantsApi);
const store = new Vuex.Store({ modules: { appStateModule, projectsModule, bucketsModule, paymentsModule, membersModule, grantsModule } });
const project = new Project('id', 'test', 'test', 'test', 'ownedId', false);
const membersPage = new ProjectMembersPage();
membersApi.setMockPage(membersPage);
const grantsPage = new AccessGrantsPage();
grantsApi.setMockAccessGrantsPage(grantsPage);
describe('ProjectDashboard.vue', () => {
it('renders correctly', async (): Promise<void> => {
store.commit(PROJECTS_MUTATIONS.ADD, project);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project.id);
const wrapper = shallowMount(ProjectDashboard, {
store,
localVue,
});
await wrapper.setData({
areBucketsFetching: false,
isSummaryDataFetching: false,
});
expect(wrapper).toMatchSnapshot();
});
});

16
web/satellite/tests/unit/project/__snapshots__/ProjectDashboard.spec.ts.snap
View File

@ -1,16 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectDashboard.vue renders correctly 1`] = `
<div class="dashboard-area">
<div class="dashboard-area__header-wrapper">
<h1 aria-roledescription="title" class="dashboard-area__header-wrapper__title">test Dashboard</h1>
<p class="dashboard-area__header-wrapper__message">
Expect a delay of a few hours between network activity and the latest dashboard stats.
</p>
</div>
<projectusage-stub></projectusage-stub>
<projectsummary-stub></projectsummary-stub>
<p class="dashboard-area__title">Buckets</p>
<bucketstable-stub></bucketstable-stub>
</div>
`;

56
web/satellite/tests/unit/project/summary/ProjectSummary.spec.ts
View File

@ -1,56 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils';
import { AccessGrantsMock } from '../../mock/api/accessGrants';
import { BucketsMock } from '../../mock/api/buckets';
import { PaymentsMock } from '../../mock/api/payments';
import { ProjectMembersApiMock } from '../../mock/api/projectMembers';
import { ProjectsApiMock } from '../../mock/api/projects';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectMembersModule } from '@/store/modules/projectMembers';
import { makeProjectsModule } from '@/store/modules/projects';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const paymentsApi = new PaymentsMock();
const paymentsModule = makePaymentsModule(paymentsApi);
const bucketsApi = new BucketsMock();
const bucketUsageModule = makeBucketsModule(bucketsApi);
const accessGrantsApi = new AccessGrantsMock();
const accessGrantsModule = makeAccessGrantsModule(accessGrantsApi);
const projectMembersApi = new ProjectMembersApiMock();
const projectMembersModule = makeProjectMembersModule(projectMembersApi);
const store = new Vuex.Store({ modules: { projectsModule, paymentsModule, bucketUsageModule, projectMembersModule, accessGrantsModule } });
localVue.use(new NotificatorPlugin(store));
localVue.filter('centsToDollars', (cents: number): string => {
return `$${(cents / 100).toFixed(2)}`;
});
describe('ProjectSummary.vue', (): void => {
it('renders correctly', (): void => {
const wrapper = mount(ProjectSummary, {
store,
localVue,
propsData: {
isDataFetching: false,
},
});
expect(wrapper).toMatchSnapshot();
});
});

46
web/satellite/tests/unit/project/summary/SummaryItem.spec.ts
View File

@ -1,46 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import { createLocalVue, mount } from '@vue/test-utils';
import SummaryItem from '@/components/project/summary/SummaryItem.vue';
const localVue = createLocalVue();
localVue.filter('centsToDollars', (cents: number): string => {
return `$${(cents / 100).toFixed(2)}`;
});
describe('SummaryItem.vue', (): void => {
it('renders correctly if not money', (): void => {
const wrapper = mount(SummaryItem, {
localVue,
propsData: {
backgroundColor: '#fff',
titleColor: '#1b2533',
valueColor: '#000',
title: 'test',
value: 100,
isMoney: false,
},
});
expect(wrapper).toMatchSnapshot();
});
it('renders correctly if money', (): void => {
const wrapper = mount(SummaryItem, {
localVue,
propsData: {
backgroundColor: '#fff',
titleColor: '#1b2533',
valueColor: '#000',
title: 'test',
value: 100,
isMoney: true,
},
});
expect(wrapper).toMatchSnapshot();
});
});

25
web/satellite/tests/unit/project/summary/__snapshots__/ProjectSummary.spec.ts.snap
View File

@ -1,25 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectSummary.vue renders correctly 1`] = `
<section class="project-summary">
<h1 class="project-summary__title">Details</h1>
<div class="project-summary__items">
<div class="summary-item right-indent" style="background-color: rgb(245, 246, 250);">
<p class="summary-item__title" style="color: rgb(27, 37, 51);">Users</p>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">0</p>
</div>
<div class="summary-item right-indent" style="background-color: rgb(245, 246, 250);">
<p class="summary-item__title" style="color: rgb(27, 37, 51);">Access Grants</p>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">0</p>
</div>
<div class="summary-item right-indent" style="background-color: rgb(177, 193, 217);">
<p class="summary-item__title" style="color: rgb(27, 37, 51);">Buckets</p>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">0</p>
</div>
<div class="summary-item" style="background-color: rgb(0, 104, 220);">
<p class="summary-item__title" style="color: rgb(255, 255, 255);">Estimated Charges</p>
<p class="summary-item__value" style="color: rgb(255, 255, 255);">$0.00</p>
</div>
</div>
</section>
`;

15
web/satellite/tests/unit/project/summary/__snapshots__/SummaryItem.spec.ts.snap
View File

@ -1,15 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SummaryItem.vue renders correctly if money 1`] = `
<div class="summary-item" style="background-color: rgb(255, 255, 255);">
<p class="summary-item__title" style="color: rgb(27, 37, 51);">test</p>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">$1.00</p>
</div>
`;
exports[`SummaryItem.vue renders correctly if not money 1`] = `
<div class="summary-item" style="background-color: rgb(255, 255, 255);">
<p class="summary-item__title" style="color: rgb(27, 37, 51);">test</p>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">100</p>
</div>
`;

38
web/satellite/tests/unit/project/usage/ProjectUsage.spec.ts
View File

@ -1,38 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '../../mock/api/projects';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { Project, ProjectLimits } from '@/types/projects';
import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectLimits = new ProjectLimits(1000, 100, 1000, 100);
const projectsApi = new ProjectsApiMock();
projectsApi.setMockLimits(projectLimits);
const projectsModule = makeProjectsModule(projectsApi);
const store = new Vuex.Store({ modules: { projectsModule } });
const project = new Project('id', 'test', 'test', 'test', 'ownedId', false);
describe('ProjectUsage.vue', () => {
it('renders correctly', (): void => {
store.commit(PROJECTS_MUTATIONS.ADD, project);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project.id);
store.commit(PROJECTS_MUTATIONS.SET_LIMITS, projectLimits);
const wrapper = shallowMount(ProjectUsage, {
store,
localVue,
});
expect(wrapper).toMatchSnapshot();
});
});

39
web/satellite/tests/unit/project/usage/UsageArea.spec.ts
View File

@ -1,39 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import { createLocalVue, shallowMount } from '@vue/test-utils';
import UsageArea from '@/components/project/usage/UsageArea.vue';
const localVue = createLocalVue();
describe('UsageArea.vue', () => {
it('renders correctly', (): void => {
const wrapper = shallowMount(UsageArea, {
localVue,
propsData: {
title: 'test Title',
used: 500000000,
limit: 1000000000,
isDataFetching: false,
},
});
expect(wrapper).toMatchSnapshot();
});
it('renders correctly if used > limit', (): void => {
const wrapper = shallowMount(UsageArea, {
localVue,
propsData: {
title: 'test Title',
used: 1000000000,
limit: 500000000,
isDataFetching: false,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.usage-area__remaining').text()).toMatch('0 Bytes Remaining');
});
});

8
web/satellite/tests/unit/project/usage/__snapshots__/ProjectUsage.spec.ts.snap
View File

@ -1,8 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectUsage.vue renders correctly 1`] = `
<div class="project-usage">
<usagearea-stub title="Storage" used="100" limit="1000" isdatafetching="true" class="project-usage__storage-used"></usagearea-stub>
<usagearea-stub title="Bandwidth" used="100" limit="1000" isdatafetching="true" class="project-usage__bandwidth-used"></usagearea-stub>
</div>
`;

19
web/satellite/tests/unit/project/usage/__snapshots__/UsageArea.spec.ts.snap
View File

@ -1,19 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UsageArea.vue renders correctly 1`] = `
<div class="usage-area">
<p class="usage-area__title">test Title</p> <pre class="usage-area__remaining">500.00MB Remaining</pre>
<vbar-stub current="500000000" max="1000000000" color="#0068DC"></vbar-stub>
<div class="usage-area__limits-area"><pre class="usage-area__limits-area__title">test Title Used</pre> <pre class="usage-area__limits-area__limits">500.00MB / 1.00GB</pre>
</div>
</div>
`;
exports[`UsageArea.vue renders correctly if used > limit 1`] = `
<div class="usage-area">
<p class="usage-area__title">test Title</p> <pre class="usage-area__remaining">0 Bytes Remaining</pre>
<vbar-stub current="1000000000" max="500000000" color="#0068DC"></vbar-stub>
<div class="usage-area__limits-area"><pre class="usage-area__limits-area__title">test Title Used</pre> <pre class="usage-area__limits-area__limits">1.00GB / 500.00MB</pre>
</div>
</div>
`;