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

Satellite console frontend data reload (#2457)

Browse Source 
* Satellite console frontend data reload

* removing deleted projects, code formatted

* usage report code formatted

* removing commented code
This commit is contained in:
Yehor Butko 2019-07-05 16:49:10 +03:00 committed by Vitalii Shpital
parent e0a8937c6c
commit b5f8a536e5
8 changed files with 140 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/satellite/src/components/account/Profile.vue
View File

@ -70,13 +70,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_ACTIONS, USER_ACTIONS } from '@/utils/constants/actionNames';
import DeleteAccountPopup from '@/components/account/DeleteAccountPopup.vue';
import ChangePasswordPopup from '@/components/account/ChangePasswordPopup.vue';
import EditProfilePopup from '@/components/account/EditProfilePopup.vue';
@Component(
{
{
mounted: function() {
this.$store.dispatch(USER_ACTIONS.GET);
},
methods: {
toggleDeleteAccountPopup: function(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);

3
web/satellite/src/components/apiKeys/ApiKeysArea.vue
View File

@ -39,6 +39,9 @@ import Footer from '@/components/apiKeys/footerArea/Footer.vue';
import { API_KEYS_ACTIONS, APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
@Component({
mounted: function() {
this.$store.dispatch(API_KEYS_ACTIONS.FETCH);
},
data: function () {
return {
emptyImage: EMPTY_STATE_IMAGES.API_KEY,

4
web/satellite/src/components/buckets/BucketArea.vue
View File

@ -34,8 +34,12 @@
import SortingHeader from '@/components/buckets/SortingHeader.vue';
import NoBucketArea from '@/components/buckets/NoBucketsArea.vue';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import { BUCKET_USAGE_ACTIONS } from '@/utils/constants/actionNames';
@Component({
mounted: function() {
this.$store.dispatch(BUCKET_USAGE_ACTIONS.FETCH, 1)
},
data: function () {
return {
emptyImage: EMPTY_STATE_IMAGES.API_KEY

3
web/satellite/src/components/project/ProjectDetails.vue
View File

@ -58,6 +58,9 @@
@Component(
{
mounted: function() {
this.$store.dispatch(PROJETS_ACTIONS.FETCH);
},
data: function () {
return {
isEditing: false,

209
web/satellite/src/components/project/UsageReport.vue
View File

@ -63,137 +63,140 @@ import Datepicker from '@/components/project/DatePicker.vue';
import { NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS } from '@/utils/constants/actionNames';
import { toUnixTimestamp } from '@/utils/time';
@Component(
{
data: function () {
return {
startTime: {
time: '',
},
};
},
components: {
Datepicker,
},
beforeRouteLeave: function(to, from, next) {
this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP, this.$data.dateRange);
@Component(
{
mounted: function() {
this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
},
data: function () {
return {
startTime: {
time: '',
},
};
},
components: {
Datepicker,
},
beforeRouteLeave: function(to, from, next) {
this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP, this.$data.dateRange);
const buttons = [...(document as any).querySelectorAll('.usage-report-container__options-area__option')];
buttons.forEach(option => {
option.classList.remove('active');
});
buttons[0].classList.add('active');
const buttons = [...(document as any).querySelectorAll('.usage-report-container__options-area__option')];
buttons.forEach(option => {
option.classList.remove('active');
});
buttons[0].classList.add('active');
next();
},
methods: {
getDates: async function(datesArray: string[]) {
const now = new Date();
const firstDate = new Date(datesArray[0]);
const secondDate = new Date(datesArray[1]);
next();
},
methods: {
getDates: async function(datesArray: string[]) {
const now = new Date();
const firstDate = new Date(datesArray[0]);
const secondDate = new Date(datesArray[1]);
const isInverted = firstDate > secondDate;
const isInverted = firstDate > secondDate;
let startDate = isInverted ? secondDate : firstDate;
let endDate = isInverted ? firstDate : secondDate;
let startDate = isInverted ? secondDate : firstDate;
let endDate = isInverted ? firstDate : secondDate;
endDate = new Date(Date.UTC(endDate.getUTCFullYear(), endDate.getUTCMonth(), endDate.getUTCDate(), 23, 59, 59));
endDate = new Date(Date.UTC(endDate.getUTCFullYear(), endDate.getUTCMonth(), endDate.getUTCDate(), 23, 59, 59));
if (now.getUTCFullYear() === endDate.getUTCFullYear()
if (now.getUTCFullYear() === endDate.getUTCFullYear()
&& now.getUTCMonth() === endDate.getUTCMonth()
&& now.getUTCDate() === endDate.getUTCDate()
) {
endDate = now;
}
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH, {startDate, endDate});
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onBackClick: function (): void {
this.$router.push(ROUTES.PROJECT_OVERVIEW);
},
onCurrentRollupClick: async function (event: any) {
(this as any).onButtonClickAction(event);
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH, {startDate, endDate});
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onBackClick: function (): void {
this.$router.push(ROUTES.PROJECT_OVERVIEW);
},
onCurrentRollupClick: async function (event: any) {
(this as any).onButtonClickAction(event);
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onPreviousRollupClick: async function (event: any) {
(this as any).onButtonClickAction(event);
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onPreviousRollupClick: async function (event: any) {
(this as any).onButtonClickAction(event);
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_PREVIOUS_ROLLUP);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onCustomDateClick: function (event: any) {
(this as any).$refs.datePicker.showCheck();
(this as any).onButtonClickAction(event);
},
onButtonClickAction: function (event: any) {
let eventTarget = event.target;
const response = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_PREVIOUS_ROLLUP);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project usage');
}
},
onCustomDateClick: function (event: any) {
(this as any).$refs.datePicker.showCheck();
(this as any).onButtonClickAction(event);
},
onButtonClickAction: function (event: any) {
let eventTarget = event.target;
if (eventTarget.children.length === 0) {
eventTarget = eventTarget.parentNode;
}
if (eventTarget.children.length === 0) {
eventTarget = eventTarget.parentNode;
}
if (eventTarget.classList.contains('active')) {
return;
}
if (eventTarget.classList.contains('active')) {
return;
}
(this as any).changeActiveClass(eventTarget);
},
changeActiveClass: function (target: any): void {
(this as any).removeActiveClass();
(this as any).changeActiveClass(eventTarget);
},
changeActiveClass: function (target: any): void {
(this as any).removeActiveClass();
target.classList.add('active');
},
removeActiveClass: function(): void {
const buttons = [...(document as any).querySelectorAll('.usage-report-container__options-area__option')];
buttons.forEach(option => {
option.classList.remove('active');
});
},
onReportClick: function (): void {
const projectID = this.$store.getters.selectedProject.id;
const startDate = this.$store.state.usageModule.startDate;
const endDate = this.$store.state.usageModule.endDate;
target.classList.add('active');
},
removeActiveClass: function(): void {
const buttons = [...(document as any).querySelectorAll('.usage-report-container__options-area__option')];
buttons.forEach(option => {
option.classList.remove('active');
});
},
onReportClick: function (): void {
const projectID = this.$store.getters.selectedProject.id;
const startDate = this.$store.state.usageModule.startDate;
const endDate = this.$store.state.usageModule.endDate;
let url = new URL(location.origin);
url.pathname = 'usage-report';
url.searchParams.append('projectID', projectID);
url.searchParams.append('since', toUnixTimestamp(startDate).toString());
url.searchParams.append('before', toUnixTimestamp(endDate).toString());
let url = new URL(location.origin);
url.pathname = 'usage-report';
url.searchParams.append('projectID', projectID);
url.searchParams.append('since', toUnixTimestamp(startDate).toString());
url.searchParams.append('before', toUnixTimestamp(endDate).toString());
window.open(url.href, '_blank');
},
window.open(url.href, '_blank');
},
toLocaleDateString: function (d: Date): string {
return d.toLocaleDateString("en-US", {timeZone: "UTC"});
}
},
computed: {
startDate: function (): Date {
},
computed: {
startDate: function (): Date {
return this.$store.state.usageModule.startDate;
},
endDate: function (): Date {
return this.$store.state.usageModule.endDate;
},
storage: function (): string {
return this.$store.state.usageModule.projectUsage.storage.toPrecision(5);
},
egress: function (): string {
return this.$store.state.usageModule.projectUsage.egress.toPrecision(5);
},
objectsCount: function (): string {
return this.$store.state.usageModule.projectUsage.objectCount.toPrecision(5);
}
}
}
)
storage: function (): string {
return this.$store.state.usageModule.projectUsage.storage.toPrecision(5);
},
egress: function (): string {
return this.$store.state.usageModule.projectUsage.egress.toPrecision(5);
},
objectsCount: function (): string {
return this.$store.state.usageModule.projectUsage.objectCount.toPrecision(5);
}
}
}
)
export default class UsageReport extends Vue {}
</script>

3
web/satellite/src/components/team/TeamArea.vue
View File

@ -36,6 +36,9 @@ import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
@Component({
mounted: function() {
this.$store.dispatch(PM_ACTIONS.FETCH);
},
data: function () {
return {
emptyImage: EMPTY_STATE_IMAGES.TEAM,

15
web/satellite/src/store/modules/projects.ts
View File

@ -23,6 +23,21 @@ export const projectsModule = {
},
[PROJECTS_MUTATIONS.FETCH](state: any, projects: Project[]): void {
state.projects = projects;
if (state.selectedProject.id) {
let projectsCount = state.projects.length;
for (let i = 0; i < projectsCount; i++) {
let project = state.projects[i];
if (project.id === state.selectedProject.id) {
state.selectedProject = project;
return;
}
}
state.selectedProject = defaultSelectedProject
}
},
[PROJECTS_MUTATIONS.SELECT](state: any, projectID: string): void {
const selected = state.projects.find((project: any) => project.id === projectID);

5
web/satellite/src/views/Dashboard.vue
View File

@ -12,9 +12,7 @@ import {AppState} from "../utils/constants/appStateEnum";
<div class="dashboard-container__wrap__column">
<DashboardHeader />
<div class="dashboard-container__main-area">
<keep-alive>
<router-view />
</keep-alive>
<router-view />
</div>
</div>
</div>
@ -55,7 +53,6 @@ import {AppState} from "../utils/constants/appStateEnum";
}
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);