2019-04-05 16:08:14 +01:00
|
|
|
import {AppState} from "../utils/constants/appStateEnum";
|
2019-01-24 20:15:10 +00:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
2018-11-27 10:51:33 +00:00
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
2018-11-14 14:00:01 +00:00
|
|
|
<template>
|
2018-11-19 15:32:50 +00:00
|
|
|
<div class="dashboard-container">
|
2019-04-05 16:08:14 +01:00
|
|
|
<div v-if="isLoading" class="loading-overlay active">
|
|
|
|
<img src="../../static/images/register/Loading.gif">
|
|
|
|
</div>
|
2018-12-05 16:39:03 +00:00
|
|
|
<div class="dashboard-container__wrap">
|
|
|
|
<NavigationArea />
|
2019-03-26 16:56:38 +00:00
|
|
|
<div class="dashboard-container__wrap__column">
|
|
|
|
<DashboardHeader />
|
|
|
|
<div class="dashboard-container__main-area">
|
2019-07-05 14:49:10 +01:00
|
|
|
<router-view />
|
2019-03-26 16:56:38 +00:00
|
|
|
</div>
|
2018-12-05 16:39:03 +00:00
|
|
|
</div>
|
2018-11-14 14:00:01 +00:00
|
|
|
</div>
|
2019-02-21 14:14:18 +00:00
|
|
|
<ProjectCreationSuccessPopup/>
|
2018-11-14 14:00:01 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2019-04-05 16:08:14 +01:00
|
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
import DashboardHeader from '@/components/header/Header.vue';
|
|
|
|
import NavigationArea from '@/components/navigation/NavigationArea.vue';
|
|
|
|
import { removeToken } from '@/utils/tokenManager';
|
|
|
|
import {
|
|
|
|
API_KEYS_ACTIONS,
|
|
|
|
APP_STATE_ACTIONS,
|
|
|
|
NOTIFICATION_ACTIONS,
|
|
|
|
PM_ACTIONS,
|
|
|
|
PROJETS_ACTIONS,
|
|
|
|
USER_ACTIONS,
|
|
|
|
PROJECT_USAGE_ACTIONS,
|
2019-05-16 11:43:46 +01:00
|
|
|
BUCKET_USAGE_ACTIONS
|
2019-04-05 16:08:14 +01:00
|
|
|
} from '@/utils/constants/actionNames';
|
|
|
|
import ROUTES from '@/utils/constants/routerConstants';
|
|
|
|
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
|
|
|
|
import { AppState } from '../utils/constants/appStateEnum';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
mounted: async function() {
|
|
|
|
setTimeout(async () => {
|
|
|
|
let response: RequestResponse<User> = await this.$store.dispatch(USER_ACTIONS.GET);
|
|
|
|
if (!response.isSuccess) {
|
|
|
|
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.ERROR);
|
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
|
|
|
|
this.$router.push(ROUTES.LOGIN);
|
|
|
|
removeToken();
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
2018-12-24 12:52:52 +00:00
|
|
|
|
2019-04-05 16:08:14 +01:00
|
|
|
let getProjectsResponse: RequestResponse<Project[]> = await this.$store.dispatch(PROJETS_ACTIONS.FETCH);
|
|
|
|
if (!getProjectsResponse.isSuccess || getProjectsResponse.data.length < 1) {
|
|
|
|
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED_EMPTY);
|
2019-01-09 15:40:21 +00:00
|
|
|
|
2019-04-05 16:08:14 +01:00
|
|
|
return;
|
|
|
|
}
|
2019-01-09 15:40:21 +00:00
|
|
|
|
2019-04-08 18:19:57 +01:00
|
|
|
await this.$store.dispatch(PROJETS_ACTIONS.SELECT, getProjectsResponse.data[0].id);
|
2019-01-09 15:40:21 +00:00
|
|
|
|
2019-04-11 02:27:55 +01:00
|
|
|
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
|
2019-04-05 16:08:14 +01:00
|
|
|
const projectMembersResponse = await this.$store.dispatch(PM_ACTIONS.FETCH);
|
|
|
|
if (!projectMembersResponse.isSuccess) {
|
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
|
|
|
|
}
|
2019-01-09 15:40:21 +00:00
|
|
|
|
2019-04-05 16:08:14 +01:00
|
|
|
const keysResponse = await this.$store.dispatch(API_KEYS_ACTIONS.FETCH);
|
|
|
|
if (!keysResponse.isSuccess) {
|
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch api keys');
|
|
|
|
}
|
2019-01-09 15:40:21 +00:00
|
|
|
|
2019-05-16 15:38:55 +01:00
|
|
|
const usageResponse = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
|
2019-04-05 16:08:14 +01:00
|
|
|
if (!usageResponse.isSuccess) {
|
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
|
|
|
|
}
|
2019-04-05 12:24:34 +01:00
|
|
|
|
2019-05-16 11:43:46 +01:00
|
|
|
const bucketsResponse = await this.$store.dispatch(BUCKET_USAGE_ACTIONS.FETCH, 1);
|
|
|
|
if (!bucketsResponse.isSuccess) {
|
|
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch buckets: ' + bucketsResponse.errorMessage);
|
|
|
|
}
|
|
|
|
|
2019-04-05 16:08:14 +01:00
|
|
|
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
|
|
|
|
}, 800);
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
isLoading: function() {
|
|
|
|
return this.$store.state.appStateModule.appState.fetchState === AppState.LOADING;
|
2019-04-05 12:24:34 +01:00
|
|
|
}
|
2018-12-20 16:18:08 +00:00
|
|
|
},
|
2018-12-18 14:43:23 +00:00
|
|
|
components: {
|
2019-02-21 14:14:18 +00:00
|
|
|
ProjectCreationSuccessPopup,
|
2018-11-14 14:00:01 +00:00
|
|
|
NavigationArea,
|
2018-12-18 14:43:23 +00:00
|
|
|
DashboardHeader
|
|
|
|
}
|
2018-11-14 14:00:01 +00:00
|
|
|
})
|
2018-12-18 14:43:23 +00:00
|
|
|
export default class Dashboard extends Vue {
|
|
|
|
}
|
2018-11-14 14:00:01 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2018-11-19 15:32:50 +00:00
|
|
|
.dashboard-container {
|
2018-11-14 14:00:01 +00:00
|
|
|
position: fixed;
|
2018-11-23 15:48:11 +00:00
|
|
|
max-width: 100%;
|
2018-11-14 14:00:01 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
background-color: #F5F6FA;
|
|
|
|
z-index: 10;
|
2018-11-19 15:32:50 +00:00
|
|
|
|
2018-12-05 16:39:03 +00:00
|
|
|
&__wrap {
|
|
|
|
display: flex;
|
2019-03-26 16:56:38 +00:00
|
|
|
|
|
|
|
&__column {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2018-12-05 16:39:03 +00:00
|
|
|
}
|
|
|
|
|
2018-11-19 15:32:50 +00:00
|
|
|
&__main-area {
|
2018-12-05 16:39:03 +00:00
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
2018-11-19 15:32:50 +00:00
|
|
|
height: 100%;
|
|
|
|
}
|
2018-11-14 14:00:01 +00:00
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2018-11-23 15:48:11 +00:00
|
|
|
@media screen and (max-width: 720px) {
|
|
|
|
.dashboard-container {
|
|
|
|
&__main-area{
|
|
|
|
left: 60px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-07-10 10:55:40 +01:00
|
|
|
|
2019-04-05 16:08:14 +01:00
|
|
|
.loading-overlay {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
left: 0;
|
|
|
|
height: 100vh;
|
|
|
|
z-index: 100;
|
|
|
|
background-color: rgba(134, 134, 148, 1);
|
|
|
|
visibility: hidden;
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transition: all 0.5s linear;
|
|
|
|
-moz-transition: all 0.5s linear;
|
|
|
|
-o-transition: all 0.5s linear;
|
|
|
|
transition: all 0.5s linear;
|
|
|
|
|
|
|
|
img {
|
|
|
|
z-index: 200;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.loading-overlay.active {
|
|
|
|
visibility: visible;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2019-03-26 16:56:38 +00:00
|
|
|
</style>
|