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

web/storagenode: vue-svg-loader implemented (#3347)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-10-25 12:53:35 +03:00 committed by GitHub
parent d9d82b0336
commit 3880f7a60e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 190 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/storagenode/package-lock.json generated
View File

@ -13129,6 +13129,15 @@
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
"dev": true "dev": true
}, },
"svg-to-vue": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.4.0.tgz",
"integrity": "sha512-g/ZHtEFf4QDsDtTk9tuYX/MJ2HESTUBMTkuLoffQGQ3xMtlmD9Ec4YyTgmMkP1P8QJtWWu2FiGdOnlKaXc/X/Q==",
"dev": true,
"requires": {
"svgo": "^1.1.1"
}
},
"svgo": { "svgo": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
@ -14200,6 +14209,16 @@
"loader-utils": "^1.0.2" "loader-utils": "^1.0.2"
} }
}, },
"vue-svg-loader": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.12.0.tgz",
"integrity": "sha512-pg8H6iKCj+DAC7FZuxdfGJMHiFpJPv/YyoN1M7Iqlf+Hu4eU6Q/W/sEFx978syQA+aOx0NXrp+uQUAajqQvXbQ==",
"dev": true,
"requires": {
"loader-utils": "^1.2.3",
"svg-to-vue": "^0.4.0"
}
},
"vue-template-compiler": { "vue-template-compiler": {
"version": "2.6.10", "version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",

1
web/storagenode/package.json
View File

@ -32,6 +32,7 @@
"tslint-consistent-codestyle": "1.15.1", "tslint-consistent-codestyle": "1.15.1",
"tslint-loader": "3.5.4", "tslint-loader": "3.5.4",
"typescript": "3.5.3", "typescript": "3.5.3",
"vue-svg-loader": "0.12.0",
"vue-template-compiler": "2.6.10", "vue-template-compiler": "2.6.10",
"vue-tslint": "0.3.2", "vue-tslint": "0.3.2",
"vue-tslint-loader": "3.5.6", "vue-tslint-loader": "3.5.6",

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

@ -18,6 +18,7 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import VChart from '@/app/components/VChart.vue'; import VChart from '@/app/components/VChart.vue';
import { ChartData } from '@/app/types/chartData'; import { ChartData } from '@/app/types/chartData';
import { ChartUtils } from '@/app/utils/chart'; import { ChartUtils } from '@/app/utils/chart';
import { formatBytes } from '@/app/utils/converter'; import { formatBytes } from '@/app/utils/converter';

1
web/storagenode/src/app/components/BarInfo.vue
View File

@ -22,6 +22,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import VBar from '@/app/components/VBar.vue'; import VBar from '@/app/components/VBar.vue';
import VInfo from '@/app/components/VInfo.vue'; import VInfo from '@/app/components/VInfo.vue';
import { formatBytes } from '@/app/utils/converter'; import { formatBytes } from '@/app/utils/converter';
@Component ({ @Component ({

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

@ -11,11 +11,10 @@
is-custom-position="true" is-custom-position="true"
> >
<div> <div>
<svg class="checks-area-image" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Blue info icon with question mark"> <ChecksInfoIcon
<rect class="checks-area-svg-rect" width="18" height="18" rx="9" fill="#5A667C"/> class="checks-area-image"
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/> alt="Blue info icon with question mark"
<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> </div>
</VInfo> </VInfo>
</div> </div>
@ -28,9 +27,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import VInfo from '@/app/components/VInfo.vue'; import VInfo from '@/app/components/VInfo.vue';
import ChecksInfoIcon from '@/../static/images/checksInfo.svg';
@Component ({ @Component ({
components: { components: {
VInfo, VInfo,
ChecksInfoIcon,
}, },
}) })
export default class ChecksArea extends Vue { export default class ChecksArea extends Vue {

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

@ -18,6 +18,7 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import VChart from '@/app/components/VChart.vue'; import VChart from '@/app/components/VChart.vue';
import { ChartData } from '@/app/types/chartData'; import { ChartData } from '@/app/types/chartData';
import { ChartUtils } from '@/app/utils/chart'; import { ChartUtils } from '@/app/utils/chart';
import { formatBytes } from '@/app/utils/converter'; import { formatBytes } from '@/app/utils/converter';

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

@ -3,10 +3,10 @@
<template> <template>
<div class="payout-container"> <div class="payout-container">
<svg class="payout-container__image" width="40" height="35" viewBox="0 0 40 35" fill="none" xmlns="http://www.w3.org/2000/svg" alt="wallet image"> <WalletIcon
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 7C2.57391 7.33667 3.23903 7.53563 3.94595 7.53563C14.9031 7.52607 27.1226 7.53563 36.5405 7.53563C37.3653 7.53563 38 8.17454 38 9.00473V13.9017H23.8919C22.5616 13.9017 21.4595 15.0112 21.4595 16.3502V24.1854C21.4595 25.5244 22.5616 26.6339 23.8919 26.6339H38V31.5309C38 32.3611 37.3653 33 36.5405 33H3.45946C2.63472 33 2 32.3611 2 31.5309V7Z" fill="#A5C7EF"/> class="payout-container__image"
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90244 0C1.75688 0 0 1.75078 0 3.88889V31.5972C0 33.4657 1.53961 35 3.41463 35H36.5854C38.4604 35 40 33.4657 40 31.5972V9.23611C40 7.3676 38.4604 5.83333 36.5854 5.83333H34.1463V0.972222C34.1463 0.463313 33.6814 0 33.1707 0H3.90244ZM3.90244 1.94444H32.1951V5.83333H3.90244C2.80488 5.83333 1.95122 4.98264 1.95122 3.88889C1.95122 2.79514 2.80488 1.94444 3.90244 1.94444ZM3.90244 7.77768C3.19361 7.77768 2.52668 7.58017 1.95122 7.24597V31.5971C1.95122 32.4212 2.58766 33.0555 3.41463 33.0555H36.5854C37.4123 33.0555 38.0488 32.4212 38.0488 31.5971V26.736H23.9024C22.5686 26.736 21.4634 25.6347 21.4634 24.3055V16.5277C21.4634 15.1985 22.5686 14.0971 23.9024 14.0971H38.0488V9.23601C38.0488 8.41191 37.4123 7.77768 36.5854 7.77768C33.5841 7.77768 30.2991 7.77672 26.8612 7.77572C19.4816 7.77356 11.3975 7.7712 3.90244 7.77768ZM23.9024 16.0417H38.0488V24.7917H23.9024C23.6147 24.7917 23.4146 24.5923 23.4146 24.3056V16.5278C23.4146 16.241 23.6147 16.0417 23.9024 16.0417ZM26.8293 20.4167C26.8293 19.3419 27.702 18.4722 28.7805 18.4722C29.859 18.4722 30.7317 19.3419 30.7317 20.4167C30.7317 21.4914 29.859 22.3611 28.7805 22.3611C27.702 22.3611 26.8293 21.4914 26.8293 20.4167Z" fill="#224CA5"/> alt="wallet image"
</svg> />
<div class="payout-container__wallet-address-section"> <div class="payout-container__wallet-address-section">
<p class="payout-container__wallet-address-section__label">{{label}}</p> <p class="payout-container__wallet-address-section__label">{{label}}</p>
<p><b class="payout-container__wallet-address-section__bold-text">{{walletAddress}}</b></p> <p><b class="payout-container__wallet-address-section__bold-text">{{walletAddress}}</b></p>
@ -20,7 +20,13 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
@Component import WalletIcon from '@/../static/images/wallet.svg';
@Component({
components: {
WalletIcon
},
})
export default class PayoutArea extends Vue { export default class PayoutArea extends Vue {
@Prop({default: ''}) @Prop({default: ''})
private readonly label: string; private readonly label: string;

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

@ -5,15 +5,17 @@
<div class="info-area"> <div class="info-area">
<SatelliteSelection/> <SatelliteSelection/>
<div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info"> <div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info">
<svg class="info-area__disqualified-info__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Disqualified image"> <LargeDisqualificationIcon
<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"/> class="info-area__disqualified-info__image"
</svg> alt="Disqualified image"
/>
<p class="info-area__disqualified-info__info">Your node has been paused on <b>{{getDisqualificationDate}}</b>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p> <p class="info-area__disqualified-info__info">Your node has been paused on <b>{{getDisqualificationDate}}</b>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
</div> </div>
<div v-else-if="doDisqualifiedSatellitesExist" class="info-area__disqualified-info"> <div v-else-if="doDisqualifiedSatellitesExist" class="info-area__disqualified-info">
<svg class="info-area__disqualified-info__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Disqualified image"> <LargeDisqualificationIcon
<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"/> class="info-area__disqualified-info__image"
</svg> alt="Disqualified image"
/>
<p class="info-area__disqualified-info__info">Your node has been paused on<span v-for="disqualified in disqualifiedSatellites"><b> {{disqualified.id}}</b></span>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p> <p class="info-area__disqualified-info__info">Your node has been paused on<span v-for="disqualified in disqualifiedSatellites"><b> {{disqualified.id}}</b></span>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
</div> </div>
<p class="info-area__title">Utilization & Remaining</p> <p class="info-area__title">Utilization & Remaining</p>
@ -84,6 +86,9 @@ import ChecksArea from '@/app/components/ChecksArea.vue';
import DiskSpaceChart from '@/app/components/DiskSpaceChart.vue'; import DiskSpaceChart from '@/app/components/DiskSpaceChart.vue';
import PayoutArea from '@/app/components/PayoutArea.vue'; import PayoutArea from '@/app/components/PayoutArea.vue';
import SatelliteSelection from '@/app/components/SatelliteSelection.vue'; import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
import LargeDisqualificationIcon from '@/../static/images/largeDisqualify.svg';
import { formatBytes } from '@/app/utils/converter'; import { formatBytes } from '@/app/utils/converter';
import { BandwidthInfo, DiskSpaceInfo, SatelliteInfo } from '@/storagenode/dashboard'; import { BandwidthInfo, DiskSpaceInfo, SatelliteInfo } from '@/storagenode/dashboard';
@ -108,6 +113,7 @@ class Checks {
BarInfo, BarInfo,
ChecksArea, ChecksArea,
PayoutArea, PayoutArea,
LargeDisqualificationIcon,
}, },
}) })
export default class SNOContentFilling extends Vue { export default class SNOContentFilling extends Vue {

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

@ -19,16 +19,17 @@
is-custom-position="true" is-custom-position="true"
> >
<div class="node-status-svg-container" @mouseenter.stop="refreshTime"> <div class="node-status-svg-container" @mouseenter.stop="refreshTime">
<svg class="check-if-online-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="online status image"> <OnlineIcon
<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"/> class="check-if-online-svg"
<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"/> alt="online status image"
</svg> />
</div> </div>
</VInfo> </VInfo>
<svg class="check-if-offline-svg" v-if="!online" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="offline status image"> <OfflineIcon
<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"/> class="check-if-offline-svg"
<path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> v-if="!online"
</svg> alt="offline status image"
/>
<p class="title__info__version-title"><b>Node Version</b></p> <p class="title__info__version-title"><b>Node Version</b></p>
<p class="title__info__version-value">{{version}}</p> <p class="title__info__version-value">{{version}}</p>
<VInfo <VInfo
@ -38,10 +39,10 @@
is-custom-position="true" is-custom-position="true"
> >
<div class="version-svg-container"> <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"> <VersionIcon
<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"/> class="version-svg"
<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"/> alt="version status image"
</svg> />
</div> </div>
</VInfo> </VInfo>
<VInfo <VInfo
@ -51,10 +52,10 @@
is-custom-position="true" is-custom-position="true"
> >
<div class="version-svg-container"> <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"> <VersionIcon
<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"/> class="version-svg"
<path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> alt="version status image"
</svg> />
</div> </div>
</VInfo> </VInfo>
</div> </div>
@ -65,6 +66,11 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import VInfo from '@/app/components/VInfo.vue'; import VInfo from '@/app/components/VInfo.vue';
import OfflineIcon from '@/../static/images/offline.svg';
import OnlineIcon from '@/../static/images/online.svg';
import VersionIcon from '@/../static/images/version.svg';
import { StatusOnline } from '@/app/store/modules/node'; import { StatusOnline } from '@/app/store/modules/node';
import { datesDiffInHoursAndMinutes } from '@/app/utils/date'; import { datesDiffInHoursAndMinutes } from '@/app/utils/date';
@ -90,6 +96,9 @@ class NodeInfo {
@Component ({ @Component ({
components: { components: {
VInfo, VInfo,
OnlineIcon,
OfflineIcon,
VersionIcon,
}, },
}) })
export default class SNOContentTitle extends Vue { export default class SNOContentTitle extends Vue {

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

File diff suppressed because one or more lines are too long

22
web/storagenode/src/app/components/SNOHeader.vue
View File

File diff suppressed because one or more lines are too long

10
web/storagenode/src/app/components/SatelliteSelection.vue
View File

@ -4,9 +4,10 @@
<template> <template>
<div class="satellite-selection-toggle-container" v-if="satellites" @click="toggleDropDown"> <div class="satellite-selection-toggle-container" v-if="satellites" @click="toggleDropDown">
<p><b class="satellite-selection-toggle-container__bold-text">Choose your satellite: </b>{{selectedSatellite ? selectedSatellite : 'All satellites'}}</p> <p><b class="satellite-selection-toggle-container__bold-text">Choose your satellite: </b>{{selectedSatellite ? selectedSatellite : 'All satellites'}}</p>
<svg class="satellite-selection-toggle-container__image" width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Arrow down"> <DropdownArrowIcon
<path d="M3.33657 3.73107C3.70296 4.09114 4.29941 4.08814 4.66237 3.73107L7.79796 0.650836C8.16435 0.291517 8.01864 0 7.47247 0L0.526407 0C-0.0197628 0 -0.16292 0.294525 0.200917 0.650836L3.33657 3.73107Z" fill="#535F77"/> class="satellite-selection-toggle-container__image"
</svg> alt="Arrow down"
/>
<SatelliteSelectionDropdown v-if="isPopupShown"/> <SatelliteSelectionDropdown v-if="isPopupShown"/>
</div> </div>
</template> </template>
@ -14,6 +15,8 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import DropdownArrowIcon from '@/../static/images/dropdownArrow.svg';
import { APPSTATE_ACTIONS } from '@/app/store/modules/appState'; import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
import { SatelliteInfo } from '@/storagenode/dashboard'; import { SatelliteInfo } from '@/storagenode/dashboard';
@ -22,6 +25,7 @@ import SatelliteSelectionDropdown from './SatelliteSelectionDropdown.vue';
@Component({ @Component({
components: { components: {
SatelliteSelectionDropdown, SatelliteSelectionDropdown,
DropdownArrowIcon,
}, },
}) })
export default class SatelliteSelection extends Vue { export default class SatelliteSelection extends Vue {

18
web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
View File

@ -8,9 +8,11 @@
<div class="satellite-selection-overflow-container__satellite-choice" <div class="satellite-selection-overflow-container__satellite-choice"
v-for="satellite in satellites" :key="satellite.id" v-for="satellite in satellites" :key="satellite.id"
@click.stop="onSatelliteClick(satellite.id)"> @click.stop="onSatelliteClick(satellite.id)">
<svg class="satellite-selection-overflow-container__satellite-choice__image" v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image"> <DisqualificationIcon
<path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/> class="satellite-selection-overflow-container__satellite-choice__image"
</svg> v-if="satellite.disqualified"
alt="disqualified image"
/>
<p class="satellite-selection-overflow-container__satellite-choice__name" :class="{disqualified: satellite.disqualified}">{{satellite.id}}</p> <p class="satellite-selection-overflow-container__satellite-choice__name" :class="{disqualified: satellite.disqualified}">{{satellite.id}}</p>
</div> </div>
<div class="satellite-selection-choice-container__all-satellites"> <div class="satellite-selection-choice-container__all-satellites">
@ -25,11 +27,17 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import DisqualificationIcon from '@/../static/images/disqualify.svg';
import { APPSTATE_ACTIONS } from '@/app/store/modules/appState'; import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
import { NODE_ACTIONS } from '@/app/store/modules/node'; import { NODE_ACTIONS } from '@/app/store/modules/node';
import { SatelliteInfo } from '@/storagenode/dashboard'; import { SatelliteInfo } from '@/storagenode/dashboard';
@Component @Component({
components: {
DisqualificationIcon,
},
})
export default class SatelliteSelectionDropdown extends Vue { export default class SatelliteSelectionDropdown extends Vue {
public async onSatelliteClick(id: string): Promise<void> { public async onSatelliteClick(id: string): Promise<void> {
try { try {
@ -80,7 +88,7 @@ export default class SatelliteSelectionDropdown extends Vue {
&__image { &__image {
position: absolute; position: absolute;
top: 13px; top: 10px;
left: 10px; left: 10px;
} }

1
web/storagenode/src/app/components/VChart.vue
View File

@ -57,6 +57,7 @@ export default class VChart extends Vue {
public get chartOptions(): object { public get chartOptions(): object {
const filterCallback = this.filterDaysDisplayed; const filterCallback = this.filterDaysDisplayed;
return { return {
responsive: false, responsive: false,
maintainAspectRatios: false, maintainAspectRatios: false,

7
web/storagenode/src/app/types/svg.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
declare module '*.svg' {
const content: any;
export default content;
}

1
web/storagenode/src/app/views/DashboardArea.vue
View File

@ -19,6 +19,7 @@ import SNOContentFilling from '@/app/components/SNOContentFilling.vue';
import SNOContentTitle from '@/app/components/SNOContentTitle.vue'; import SNOContentTitle from '@/app/components/SNOContentTitle.vue';
import SNOFooter from '@/app/components/SNOFooter.vue'; import SNOFooter from '@/app/components/SNOFooter.vue';
import SNOHeader from '@/app/components/SNOHeader.vue'; import SNOHeader from '@/app/components/SNOHeader.vue';
import { NODE_ACTIONS } from '@/app/store/modules/node'; import { NODE_ACTIONS } from '@/app/store/modules/node';
const { const {

5
web/storagenode/static/images/checksInfo.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="checks-area-svg-rect" width="18" height="18" rx="9" fill="#5A667C"/>
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
<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>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

3
web/storagenode/static/images/disqualify.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
web/storagenode/static/images/dropdownArrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33657 3.73107C3.70296 4.09114 4.29941 4.08814 4.66237 3.73107L7.79796 0.650836C8.16435 0.291517 8.01864 0 7.47247 0L0.526407 0C-0.0197628 0 -0.16292 0.294525 0.200917 0.650836L3.33657 3.73107Z" fill="#535F77"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

3
web/storagenode/static/images/largeDisqualify.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
web/storagenode/static/images/offline.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

4
web/storagenode/static/images/online.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

4
web/storagenode/static/images/refresh.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="refresh-button-svg-rect" x="1" y="1" width="40" height="40" rx="20" fill="#F4F6F9" stroke="#E8E8E8"/>
<path class="refresh-button-svg-path" d="M31 18.0586V12.1768L28.8784 14.2359C27 12.2353 24.2727 11 21.3034 11C15.6068 11 11 15.4712 11 21C11 26.5288 15.6057 31 21.3034 31C24.2125 31 26.8182 29.8232 28.6977 27.9417L27.0012 26.2355C25.6068 27.7056 23.5455 28.6464 21.3034 28.6464C16.9398 28.6464 13.425 25.2352 13.425 21C13.425 16.7649 16.9398 13.3536 21.3034 13.3536C23.6068 13.3536 25.7273 14.354 27.1818 15.8826L24.9398 18.0586L31 18.0586Z" fill="#133E9C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 684 B

3
web/storagenode/static/images/storjIcon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

4
web/storagenode/static/images/version.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

4
web/storagenode/static/images/wallet.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="35" viewBox="0 0 40 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 7C2.57391 7.33667 3.23903 7.53563 3.94595 7.53563C14.9031 7.52607 27.1226 7.53563 36.5405 7.53563C37.3653 7.53563 38 8.17454 38 9.00473V13.9017H23.8919C22.5616 13.9017 21.4595 15.0112 21.4595 16.3502V24.1854C21.4595 25.5244 22.5616 26.6339 23.8919 26.6339H38V31.5309C38 32.3611 37.3653 33 36.5405 33H3.45946C2.63472 33 2 32.3611 2 31.5309V7Z" fill="#A5C7EF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90244 0C1.75688 0 0 1.75078 0 3.88889V31.5972C0 33.4657 1.53961 35 3.41463 35H36.5854C38.4604 35 40 33.4657 40 31.5972V9.23611C40 7.3676 38.4604 5.83333 36.5854 5.83333H34.1463V0.972222C34.1463 0.463313 33.6814 0 33.1707 0H3.90244ZM3.90244 1.94444H32.1951V5.83333H3.90244C2.80488 5.83333 1.95122 4.98264 1.95122 3.88889C1.95122 2.79514 2.80488 1.94444 3.90244 1.94444ZM3.90244 7.77768C3.19361 7.77768 2.52668 7.58017 1.95122 7.24597V31.5971C1.95122 32.4212 2.58766 33.0555 3.41463 33.0555H36.5854C37.4123 33.0555 38.0488 32.4212 38.0488 31.5971V26.736H23.9024C22.5686 26.736 21.4634 25.6347 21.4634 24.3055V16.5277C21.4634 15.1985 22.5686 14.0971 23.9024 14.0971H38.0488V9.23601C38.0488 8.41191 37.4123 7.77768 36.5854 7.77768C33.5841 7.77768 30.2991 7.77672 26.8612 7.77572C19.4816 7.77356 11.3975 7.7712 3.90244 7.77768ZM23.9024 16.0417H38.0488V24.7917H23.9024C23.6147 24.7917 23.4146 24.5923 23.4146 24.3056V16.5278C23.4146 16.241 23.6147 16.0417 23.9024 16.0417ZM26.8293 20.4167C26.8293 19.3419 27.702 18.4722 28.7805 18.4722C29.859 18.4722 30.7317 19.3419 30.7317 20.4167C30.7317 21.4914 29.859 22.3611 28.7805 22.3611C27.702 22.3611 26.8293 21.4914 26.8293 20.4167Z" fill="#224CA5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
web/storagenode/tsconfig.json
View File

@ -31,7 +31,8 @@
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.tsx", "src/**/*.tsx",
"src/**/*.vue" "src/**/*.vue",
"src/app/types/svg.d.ts"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"

8
web/storagenode/tslint.json
View File

@ -51,12 +51,16 @@
"order": 1 "order": 1
}, { }, {
"name": "internal components", "name": "internal components",
"match": "^@/components", "match": "^@/app/components",
"order": 2 "order": 2
}, {
"name": "internal images",
"match": "^@/../static/images",
"order": 3
}, { }, {
"name": "internal else", "name": "internal else",
"match": "^@", "match": "^@",
"order": 3 "order": 4
}] }]
}], }],
"prefer-const": true, "prefer-const": true,

8
web/storagenode/vue.config.js
View File

@ -20,5 +20,13 @@ module.exports = {
args[0].template = './index.html'; args[0].template = './index.html';
return args return args
}); });
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader');
} }
}; };