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

web/storagenode: vue files renamed (#3121)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-09-30 18:17:30 +03:00 committed by GitHub
parent bd8807e43f
commit 09c3efa51f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 152 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/storagenode/src/app/components/BandwidthChart.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="chart">
<Chart
<VChart
id="bandwidth-chart"
:chart-data="chartData"
:width="400"
@ -15,7 +15,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Chart from '@/app/components/Chart.vue';
import VChart from '@/app/components/VChart.vue';
import { ChartData } from '@/app/types/chartData';
import { ChartUtils } from '@/app/utils/chartUtils';
import { formatBytes } from '@/app/utils/converter';
@ -44,7 +44,7 @@ class BandwidthTooltip {
@Component ({
components: {
Chart,
VChart,
},
})
export default class BandwidthChart extends Vue {

61
web/storagenode/src/app/components/Bar.vue
View File

@ -1,61 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="bar-container">
<div class="bar-container__fill" :style="barFillStyle"></div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
/**
* BarFillStyle class holds info for BarFillStyle entity.
*/
class BarFillStyle {
'background-color': string;
width: string;
public constructor(backgroundColor: string, width: string) {
this['background-color'] = backgroundColor;
this.width = width;
}
}
@Component
export default class Bar extends Vue {
@Prop({default: ''})
private readonly current: string;
@Prop({default: ''})
private readonly max: string;
@Prop({default: '#224CA5'})
private readonly color: string;
public get barFillStyle(): BarFillStyle {
const width = (parseFloat(this.current) / parseFloat(this.max)) * 100 + '%';
return new BarFillStyle(this.color, width);
}
}
</script>
<style scoped lang="scss">
.bar-container {
width: 100%;
height: 8px;
margin-top: 11px;
border-radius: 4px;
background-color: #F4F6F9;
position: relative;
&__fill {
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
}
}
</style>

16
web/storagenode/src/app/components/BarInfoContainer.vue → web/storagenode/src/app/components/BarInfo.vue
View File

@ -6,9 +6,9 @@
<p class="remaining-space-container__title">{{label}}</p>
<p class="remaining-space-container__amount"><b>{{remaining}}GB</b></p>
<div class="remaining-space-container__bar">
<InfoComponent :text="infoMessage">
<Bar :current="currentBarAmount" :max="maxBarAmount" color="#224CA5"/>
</InfoComponent>
<VInfo :text="infoMessage">
<VBar :current="currentBarAmount" :max="maxBarAmount" color="#224CA5"/>
</VInfo>
</div>
</div>
</template>
@ -16,16 +16,16 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Bar from '@/app/components/Bar.vue';
import InfoComponent from '@/app/components/InfoComponent.vue';
import VBar from '@/app/components/VBar.vue';
import VInfo from '@/app/components/VInfo.vue';
@Component ({
components: {
Bar,
InfoComponent,
VBar,
VInfo,
},
})
export default class BarInfoContainer extends Vue {
export default class BarInfo extends Vue {
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})

10
web/storagenode/src/app/components/ChecksAreaContainer.vue → web/storagenode/src/app/components/ChecksArea.vue
View File

@ -5,7 +5,7 @@
<div class="checks-area-container">
<div class="checks-area-container__header">
<p class="checks-area-container__header__title">{{label}}</p>
<InfoComponent :text="infoText" is-extra-padding="true" is-custom-position="true">
<VInfo :text="infoText" is-extra-padding="true" is-custom-position="true">
<div>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="info image">
<rect width="18" height="18" rx="9" fill="#5A667C"/>
@ -13,7 +13,7 @@
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
</svg>
</div>
</InfoComponent>
</VInfo>
</div>
<p class="checks-area-container__amount"><b>{{value}}%</b></p>
</div>
@ -22,14 +22,14 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import InfoComponent from '@/app/components/InfoComponent.vue';
import VInfo from '@/app/components/VInfo.vue';
@Component ({
components: {
InfoComponent,
VInfo,
},
})
export default class ChecksAreaContainer extends Vue {
export default class ChecksArea extends Vue {
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})

6
web/storagenode/src/app/components/DiskSpaceChart.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="chart">
<Chart
<VChart
id="disk-space-chart"
:chart-data="chartData"
:width="400"
@ -15,7 +15,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Chart from '@/app/components/Chart.vue';
import VChart from '@/app/components/VChart.vue';
import { ChartData } from '@/app/types/chartData';
import { ChartUtils } from '@/app/utils/chartUtils';
import { formatBytes } from '@/app/utils/converter';
@ -36,7 +36,7 @@ class StampTooltip {
@Component ({
components: {
Chart,
VChart,
},
})
export default class DiskSpaceChart extends Vue {

16
web/storagenode/src/app/components/PayoutContainer.vue → web/storagenode/src/app/components/PayoutArea.vue
View File

@ -18,15 +18,15 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class PayoutContainer extends Vue {
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})
private readonly walletAddress: string;
}
@Component
export default class PayoutArea extends Vue {
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})
private readonly walletAddress: string;
}
</script>
<style lang="scss">

28
web/storagenode/src/app/components/SNOContentFilling.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="info-area">
<SatelliteSelectionContainer />
<SatelliteSelection />
<div v-if="selectedSatellite.id && selectedSatellite.disqualified" class="info-area__disqualified-info">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
<path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
@ -36,21 +36,21 @@
<div v-if="selectedSatellite.id">
<p class="info-area__title">Uptime & Audit Checks by Satellite</p>
<div class="info-area__checks-area">
<ChecksAreaContainer label="Uptime Checks" :amount="checks.uptime" info-text="Uptime checks occur to make sure your node is still online. This is the percentage of uptime checks you’ve passed."/>
<ChecksAreaContainer label="Audit Checks" :amount="checks.audit" info-text="Percentage of successful pings/communication between the node & satellite."/>
<ChecksArea label="Uptime Checks" :amount="checks.uptime" info-text="Uptime checks occur to make sure your node is still online. This is the percentage of uptime checks you’ve passed."/>
<ChecksArea label="Audit Checks" :amount="checks.audit" info-text="Percentage of successful pings/communication between the node & satellite."/>
</div>
</div>
<div>
<p class="info-area__title">Remaining on the Node</p>
<div class="info-area__remaining-space-area">
<BarInfoContainer label="Bandwidth Remaining" :amount="bandwidth.remaining"
<BarInfo label="Bandwidth Remaining" :amount="bandwidth.remaining"
info-text="of bandwidth left" :current-bar-amount="bandwidth.used" :max-bar-amount="bandwidth.available" />
<BarInfoContainer label="Disk Space Remaining" :amount="diskSpace.remaining"
<BarInfo label="Disk Space Remaining" :amount="diskSpace.remaining"
info-text="of disk space left" :current-bar-amount="diskSpace.used" :max-bar-amount="diskSpace.available" />
</div>
</div>
<p class="info-area__title">Payout</p>
<PayoutContainer label="STORJ Wallet Address" :wallet-address="wallet" />
<PayoutArea label="STORJ Wallet Address" :wallet-address="wallet" />
</div>
</template>
@ -58,11 +58,11 @@
import { Component, Vue } from 'vue-property-decorator';
import BandwidthChart from '@/app/components/BandwidthChart.vue';
import BarInfoContainer from '@/app/components/BarInfoContainer.vue';
import ChecksAreaContainer from '@/app/components/ChecksAreaContainer.vue';
import BarInfo from '@/app/components/BarInfo.vue';
import ChecksArea from '@/app/components/ChecksArea.vue';
import DiskSpaceChart from '@/app/components/DiskSpaceChart.vue';
import PayoutContainer from '@/app/components/PayoutContainer.vue';
import SatelliteSelectionContainer from '@/app/components/SatelliteSelectionContainer.vue';
import PayoutArea from '@/app/components/PayoutArea.vue';
import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
import { formatBytes } from '@/app/utils/converter';
import { BandwidthInfo, DiskSpaceInfo, SatelliteInfo } from '@/storagenode/dashboard';
@ -81,12 +81,12 @@ class Checks {
@Component ({
components: {
SatelliteSelectionContainer,
SatelliteSelection,
BandwidthChart,
DiskSpaceChart,
BarInfoContainer,
ChecksAreaContainer,
PayoutContainer,
BarInfo,
ChecksArea,
PayoutArea,
},
})
export default class SNOContentFilling extends Vue {

12
web/storagenode/src/app/components/SNOContentTitle.vue
View File

@ -24,22 +24,22 @@
<p class="online-status"><b>{{info.status}}</b></p>
<p><b>Node Version</b></p>
<p class="version">{{version}}</p>
<InfoComponent v-if="info.isLastVersion" text="Running the minimal allowed version:" bold-text="v.0.0.0" is-custom-position="true">
<VInfo v-if="info.isLastVersion" text="Running the minimal allowed version:" bold-text="v.0.0.0" is-custom-position="true">
<div class="version-svg-container">
<svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
<path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.35717 9.90354C3.30671 8.7687 5.03287 7.1697 6.08406 8.30604L7.78632 10.144L11.8784 5.31912C12.8797 4.13577 14.6803 5.66083 13.6792 6.84279L8.7531 12.6514C8.28834 13.1977 7.4706 13.2659 6.96364 12.7182L4.35717 9.90354Z" fill="#F4F6F9"/>
</svg>
</div>
</InfoComponent>
<InfoComponent v-else text="Your node is outdated. Please update to:" bold-text="v.0.0.0" is-custom-position="true">
</VInfo>
<VInfo v-else text="Your node is outdated. Please update to:" bold-text="v.0.0.0" is-custom-position="true">
<div class="version-svg-container">
<svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
<path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>
<path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</InfoComponent>
</VInfo>
</div>
</div>
</template>
@ -47,7 +47,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import InfoComponent from '@/app/components/InfoComponent.vue';
import VInfo from '@/app/components/VInfo.vue';
import { StatusOnline } from '@/app/store/modules/node';
/**
@ -71,7 +71,7 @@ class NodeInfo {
@Component ({
components: {
InfoComponent,
VInfo,
},
})
export default class SNOContentTitle extends Vue {

6
web/storagenode/src/app/components/SNOFooter.vue
View File

@ -14,10 +14,10 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class SNOFooter extends Vue {}
@Component
export default class SNOFooter extends Vue {}
</script>
<style lang="scss">

2
web/storagenode/src/app/components/SatelliteSelectionContainer.vue → web/storagenode/src/app/components/SatelliteSelection.vue
View File

@ -24,7 +24,7 @@ import SatelliteSelectionDropdown from './SatelliteSelectionDropdown.vue';
SatelliteSelectionDropdown,
},
})
export default class SatelliteSelectionContainer extends Vue {
export default class SatelliteSelection extends Vue {
@Prop({default: ''})
private readonly label: string;

61
web/storagenode/src/app/components/VBar.vue Normal file
View File

@ -0,0 +1,61 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="bar-container">
<div class="bar-container__fill" :style="barFillStyle"></div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
/**
* BarFillStyle class holds info for BarFillStyle entity.
*/
class BarFillStyle {
'background-color': string;
width: string;
public constructor(backgroundColor: string, width: string) {
this['background-color'] = backgroundColor;
this.width = width;
}
}
@Component
export default class VBar extends Vue {
@Prop({default: ''})
private readonly current: string;
@Prop({default: ''})
private readonly max: string;
@Prop({default: '#224CA5'})
private readonly color: string;
public get barFillStyle(): BarFillStyle {
const width = (parseFloat(this.current) / parseFloat(this.max)) * 100 + '%';
return new BarFillStyle(this.color, width);
}
}
</script>
<style scoped lang="scss">
.bar-container {
width: 100%;
height: 8px;
margin-top: 11px;
border-radius: 4px;
background-color: #F4F6F9;
position: relative;
&__fill {
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
}
}
</style>

6
web/storagenode/src/app/components/Chart.vue → web/storagenode/src/app/components/VChart.vue
View File

@ -2,15 +2,15 @@
// See LICENSE for copying information.
<script lang="ts">
import * as VChart from 'vue-chartjs';
import * as VueChart from 'vue-chartjs';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { ChartData } from '@/app/types/chartData';
@Component({
extends: VChart.Line
extends: VueChart.Line
})
export default class Chart extends Vue {
export default class VChart extends Vue {
@Prop({default: '$'})
private readonly currency: string;
@Prop({default: () => { console.error('Tooltip constructor is undefined'); }, })

70
web/storagenode/src/app/components/InfoComponent.vue → web/storagenode/src/app/components/VInfo.vue
View File

@ -14,51 +14,51 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
declare interface MessageBoxStyle {
bottom: string;
declare interface MessageBoxStyle {
bottom: string;
}
@Component
export default class VInfo extends Vue {
private isVisible: boolean = false;
private height: string = '5px';
@Prop({default: ''})
private readonly text: string;
@Prop({default: ''})
private readonly boldText: string;
@Prop({default: false})
private readonly isExtraPadding: boolean;
@Prop({default: false})
private readonly isCustomPosition: boolean;
public toggleVisibility(): void {
this.isVisible = !this.isVisible;
}
@Component
export default class InfoComponent extends Vue {
private isVisible: boolean = false;
private height: string = '5px';
public get messageBoxStyle(): MessageBoxStyle {
return { bottom: this.height };
}
@Prop({default: ''})
private readonly text: string;
@Prop({default: ''})
private readonly boldText: string;
@Prop({default: false})
private readonly isExtraPadding: boolean;
@Prop({default: false})
private readonly isCustomPosition: boolean;
public toggleVisibility(): void {
this.isVisible = !this.isVisible;
public mounted(): void {
const infoComponent = document.querySelector('.info');
if (!infoComponent) {
return;
}
public get messageBoxStyle(): MessageBoxStyle {
return { bottom: this.height };
const slots = this.$slots.default;
if (!slots) {
return;
}
public mounted(): void {
const infoComponent = document.querySelector('.info');
if (!infoComponent) {
return;
}
const slots = this.$slots.default;
if (!slots) {
return;
}
const slot = slots[0];
if (slot && slot.elm) {
this.height = (slot.elm as HTMLElement).offsetHeight + 'px';
}
const slot = slots[0];
if (slot && slot.elm) {
this.height = (slot.elm as HTMLElement).offsetHeight + 'px';
}
}
}
</script>
<style scoped lang="scss">

4
web/storagenode/src/app/router/index.ts
View File

@ -5,7 +5,7 @@ import Vue from 'vue';
import Router from 'vue-router';
import { NavigationLink } from '@/app/types/navigation';
import Dashboard from '@/app/views/Dashboard.vue';
import DashboardArea from '@/app/views/DashboardArea.vue';
Vue.use(Router);
@ -19,7 +19,7 @@ const router = new Router({
{
path: RouteConfig.Root.path,
name: RouteConfig.Root.name,
component: Dashboard
component: DashboardArea
},
]
});

0
web/storagenode/src/app/views/Dashboard.vue → web/storagenode/src/app/views/DashboardArea.vue
View File