2019-05-15 16:01:41 +01:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
|
|
|
<template>
|
2020-03-18 17:07:29 +00:00
|
|
|
<div class="dashboard-area">
|
2020-12-08 17:01:51 +00:00
|
|
|
<div class="dashboard-area__header-wrapper">
|
|
|
|
<h1 class="dashboard-area__title">{{projectName}} Dashboard</h1>
|
|
|
|
<VInfo
|
|
|
|
class="dashboard-area__tooltip__wrapper"
|
|
|
|
bold-text="Expect a delay of a few hours between network activity and the latest dashboard stats.">
|
|
|
|
<InfoIcon class="dashboard-area__tooltip__icon"/>
|
|
|
|
</VInfo>
|
|
|
|
</div>
|
2020-05-06 13:47:39 +01:00
|
|
|
<ProjectUsage/>
|
2020-09-28 14:44:01 +01:00
|
|
|
<ProjectSummary/>
|
2020-03-18 17:07:29 +00:00
|
|
|
<BucketArea/>
|
2019-05-15 16:01:41 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2019-09-09 11:33:39 +01:00
|
|
|
import { Component, Vue } from 'vue-property-decorator';
|
2019-07-18 14:39:39 +01:00
|
|
|
|
2020-12-08 17:01:51 +00:00
|
|
|
import VInfo from '@/components/common/VInfo.vue';
|
2020-03-18 17:07:29 +00:00
|
|
|
import BucketArea from '@/components/project/buckets/BucketArea.vue';
|
2020-09-28 14:44:01 +01:00
|
|
|
import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
|
2020-03-18 17:07:29 +00:00
|
|
|
import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
|
2019-09-09 11:33:39 +01:00
|
|
|
|
2020-12-08 17:01:51 +00:00
|
|
|
import InfoIcon from '@/../static/images/common/infoTooltipSm.svg';
|
|
|
|
|
2020-04-22 17:21:12 +01:00
|
|
|
import { RouteConfig } from '@/router';
|
2020-07-15 17:49:37 +01:00
|
|
|
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
2020-03-18 17:07:29 +00:00
|
|
|
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
|
2020-07-15 17:49:37 +01:00
|
|
|
import { MetaUtils } from '@/utils/meta';
|
2019-09-09 11:33:39 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: {
|
2020-03-18 17:07:29 +00:00
|
|
|
BucketArea,
|
2020-12-08 17:01:51 +00:00
|
|
|
InfoIcon,
|
2020-03-18 17:07:29 +00:00
|
|
|
ProjectUsage,
|
2020-09-28 14:44:01 +01:00
|
|
|
ProjectSummary,
|
2020-12-08 17:01:51 +00:00
|
|
|
VInfo,
|
2019-09-13 15:58:18 +01:00
|
|
|
},
|
2019-09-09 11:33:39 +01:00
|
|
|
})
|
2020-03-16 12:08:38 +00:00
|
|
|
export default class ProjectDashboard extends Vue {
|
2020-02-28 16:33:11 +00:00
|
|
|
/**
|
2020-03-18 17:07:29 +00:00
|
|
|
* Lifecycle hook after initial render.
|
|
|
|
* Segment tracking is processed.
|
2020-02-28 16:33:11 +00:00
|
|
|
*/
|
2020-03-18 17:07:29 +00:00
|
|
|
public mounted(): void {
|
2020-04-22 17:21:12 +01:00
|
|
|
if (!this.$store.getters.selectedProject.id) {
|
2020-12-04 15:38:28 +00:00
|
|
|
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
|
2020-04-22 17:21:12 +01:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-10-05 18:33:16 +01:00
|
|
|
const projectLimit: number = this.$store.getters.user.projectLimit;
|
|
|
|
if (projectLimit && this.$store.getters.projectsCount < projectLimit) {
|
2020-07-15 17:49:37 +01:00
|
|
|
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
|
|
|
|
}
|
|
|
|
|
2020-03-18 17:07:29 +00:00
|
|
|
this.$segment.track(SegmentEvent.PROJECT_VIEWED, {
|
|
|
|
project_id: this.$store.getters.selectedProject.id,
|
|
|
|
});
|
2019-09-09 11:33:39 +01:00
|
|
|
}
|
2020-09-04 14:58:50 +01:00
|
|
|
|
2020-09-28 14:44:01 +01:00
|
|
|
/**
|
|
|
|
* Returns selected project name.
|
|
|
|
*/
|
|
|
|
public get projectName(): string {
|
|
|
|
return this.$store.getters.selectedProject.name;
|
|
|
|
}
|
|
|
|
|
2020-09-04 14:58:50 +01:00
|
|
|
/**
|
|
|
|
* Returns project limits increase request url from config.
|
|
|
|
*/
|
|
|
|
public get projectLimitsIncreaseRequestURL(): string {
|
|
|
|
return MetaUtils.getMetaContent('project-limits-increase-request-url');
|
|
|
|
}
|
2019-09-09 11:33:39 +01:00
|
|
|
}
|
2019-05-15 16:01:41 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2020-03-18 17:07:29 +00:00
|
|
|
.dashboard-area {
|
2020-09-10 10:32:35 +01:00
|
|
|
padding: 50px 30px 30px 30px;
|
2020-05-06 13:47:39 +01:00
|
|
|
font-family: 'font_regular', sans-serif;
|
2020-03-18 17:07:29 +00:00
|
|
|
|
2020-09-28 14:44:01 +01:00
|
|
|
&__title {
|
|
|
|
font-family: 'font_bold', sans-serif;
|
|
|
|
font-size: 22px;
|
|
|
|
line-height: 27px;
|
|
|
|
color: #384b65;
|
|
|
|
margin: 0 0 30px 0;
|
2019-09-20 11:21:22 +01:00
|
|
|
}
|
2020-12-08 17:01:51 +00:00
|
|
|
|
|
|
|
&__header-wrapper {
|
|
|
|
display: flex;
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip {
|
|
|
|
|
|
|
|
&__wrapper {
|
|
|
|
margin: 7px 0 0 10px;
|
|
|
|
|
|
|
|
/deep/ .info__message-box {
|
|
|
|
background-image: url('../../../static/images/tooltipMessageBg.png');
|
|
|
|
min-width: 300px;
|
|
|
|
text-align: left;
|
|
|
|
left: 195px;
|
|
|
|
bottom: 15px;
|
|
|
|
padding: 10px 10px 10px 35px;
|
|
|
|
|
|
|
|
&__text {
|
|
|
|
|
|
|
|
&__bold-text {
|
|
|
|
font-family: 'font_medium', sans-serif;
|
|
|
|
color: #354049;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-09-20 11:21:22 +01:00
|
|
|
}
|
2019-05-15 16:01:41 +01:00
|
|
|
</style>
|