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

web/multinode: enable vue/recommended linting

Browse Source 
Change-Id: Ice51a66d8c73596133e10aa969a6ca973441e46e
This commit is contained in:
Egon Elbre 2021-08-10 16:05:40 +03:00
parent 59b8422318
commit 5d8cbf0871
45 changed files with 174 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/multinode/.eslintrc.js
View File

@ -7,7 +7,7 @@ module.exports = {
node: true
},
extends: [
'plugin:vue/essential',
'plugin:vue/recommended',
'eslint:recommended',
'@vue/typescript/recommended',
],
@ -19,6 +19,7 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"indent": ["warn", 4],
"vue/html-indent": ["warn", 4],
"@typescript-eslint/no-unused-vars": [
"warn", {
@ -29,5 +30,8 @@ module.exports = {
'@typescript-eslint/no-empty-function': "off",
'@typescript-eslint/no-var-requires': "off",
"vue/max-attributes-per-line": ["off"],
"vue/singleline-html-element-content-newline": ["off"],
},
}

2
web/multinode/package.json
View File

@ -4,7 +4,7 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint --max-warnings 0 && stylelint --max-warnings 0 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
"lint": "vue-cli-service lint --max-warnings 0 --fix && stylelint --max-warnings 0 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
"lint-ci": "vue-cli-service lint --max-warnings 0 --no-fix && stylelint --max-warnings 0 --no-fix \"**/*.{vue,css,sss,less,scss,sass}\"",
"build": "vue-cli-service build",
"dev": "vue-cli-service build --mode development --watch",

2
web/multinode/src/app/App.vue
View File

@ -3,7 +3,7 @@
<template>
<div id="app">
<router-view/>
<router-view />
</div>
</template>

2
web/multinode/src/app/components/bandwidth/BandwidthChart.vue
View File

@ -6,11 +6,11 @@
<p class="bandwidth-chart__data-dimension">{{ chartDataDimension }}</p>
<VChart
id="bandwidth-chart"
:key="chartKey"
:chart-data="chartData"
:width="chartWidth"
:height="chartHeight"
:tooltip-constructor="bandwidthTooltip"
:key="chartKey"
/>
</div>
</template>

2
web/multinode/src/app/components/bandwidth/EgressChart.vue
View File

@ -6,11 +6,11 @@
<p class="egress-chart__data-dimension">{{ chartDataDimension }}</p>
<VChart
id="egress-chart"
:key="chartKey"
:chart-data="chartData"
:width="chartWidth"
:height="chartHeight"
:tooltip-constructor="egressTooltip"
:key="chartKey"
/>
</div>
</template>

2
web/multinode/src/app/components/bandwidth/IngressChart.vue
View File

@ -6,11 +6,11 @@
<p class="ingress-chart__data-dimension">{{ chartDataDimension }}</p>
<VChart
id="ingress-chart"
:key="chartKey"
:chart-data="chartData"
:width="chartWidth"
:height="chartHeight"
:tooltip-constructor="ingressTooltip"
:key="chartKey"
/>
</div>
</template>

4
web/multinode/src/app/components/common/BaseTable.vue
View File

@ -3,8 +3,8 @@
<template>
<table class="base-table" border="0" cellpadding="0" cellspacing="0">
<slot name="head"></slot>
<slot name="body"></slot>
<slot name="head" />
<slot name="body" />
</table>
</template>

46
web/multinode/src/app/components/common/HeaderedInput.vue
View File

@ -7,49 +7,49 @@
<div class="label-container__main">
<div v-if="error" class="label-container__main__error-icon-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#EB5757"/>
<path d="M10.0012 11.7364C10.612 11.7364 11.1117 11.204 11.1117 10.5532V5.81218C11.1117 5.75302 11.108 5.68991 11.1006 5.63074C11.0192 5.06672 10.5565 4.62891 10.0012 4.62891C9.39037 4.62891 8.89062 5.16138 8.89062 5.81218V10.5492C8.89062 11.204 9.39037 11.7364 10.0012 11.7364Z" fill="white"/>
<path d="M10.0001 12.8906C9.13977 12.8906 8.44531 13.5851 8.44531 14.4454C8.44531 15.3057 9.13977 16.0002 10.0001 16.0002C10.8604 16.0002 11.5548 15.3057 11.5548 14.4454C11.5583 13.5851 10.8638 12.8906 10.0001 12.8906Z" fill="white"/>
<rect width="20" height="20" rx="10" fill="#EB5757" />
<path d="M10.0012 11.7364C10.612 11.7364 11.1117 11.204 11.1117 10.5532V5.81218C11.1117 5.75302 11.108 5.68991 11.1006 5.63074C11.0192 5.06672 10.5565 4.62891 10.0012 4.62891C9.39037 4.62891 8.89062 5.16138 8.89062 5.81218V10.5492C8.89062 11.204 9.39037 11.7364 10.0012 11.7364Z" fill="white" />
<path d="M10.0001 12.8906C9.13977 12.8906 8.44531 13.5851 8.44531 14.4454C8.44531 15.3057 9.13977 16.0002 10.0001 16.0002C10.8604 16.0002 11.5548 15.3057 11.5548 14.4454C11.5583 13.5851 10.8638 12.8906 10.0001 12.8906Z" fill="white" />
</svg>
</div>
<h3 v-if="!error" class="label-container__main__label">{{label}}</h3>
<h3 v-if="!error" class="label-container__main__label add-label">{{additionalLabel}}</h3>
<h3 class="label-container__main__error" v-if="error">{{error}}</h3>
<h3 v-if="!error" class="label-container__main__label">{{ label }}</h3>
<h3 v-if="!error" class="label-container__main__label add-label">{{ additionalLabel }}</h3>
<h3 v-if="error" class="label-container__main__error">{{ error }}</h3>
</div>
<h3 v-if="isLimitShown" class="label-container__limit">{{currentLimit}}/{{maxSymbols}}</h3>
<h3 v-if="isLimitShown" class="label-container__limit">{{ currentLimit }}/{{ maxSymbols }}</h3>
</div>
<div v-if="isOptional" class="optional-label-container">
<h3 class="label-container__label">{{label}}</h3>
<h3 class="label-container__label">{{ label }}</h3>
<h4 class="optional-label-container__optional">Optional</h4>
</div>
<textarea
class="headered-textarea"
v-if="isMultiline"
:id="this.label"
:placeholder="this.placeholder"
:id="label"
v-model="value"
class="headered-textarea"
:placeholder="placeholder"
:style="style.inputStyle"
:rows="5"
:cols="40"
wrap="hard"
@input="onInput"
@change="onInput"
@paste.prevent="onPaste"
autocomplete="off"
v-model="value">
</textarea>
<input
class="headered-input"
v-if="!isMultiline"
:id="this.label"
:placeholder="this.placeholder"
:type="[isPassword ? 'password': 'text']"
@input="onInput"
@change="onInput"
@paste.prevent="onPaste"
/>
<input
v-if="!isMultiline"
:id="label"
v-model="value"
class="headered-input"
:placeholder="placeholder"
:type="[isPassword ? 'password': 'text']"
autocomplete="off"
:style="style.inputStyle"
/>
@input="onInput"
@change="onInput"
@paste.prevent="onPaste"
>
</div>
</template>

40
web/multinode/src/app/components/common/HeaderlessInput.vue
View File

@ -4,57 +4,57 @@
<template>
<div class="input-wrap">
<div class="label-container">
<div class="icon" v-if="error">
<div v-if="error" class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#EB5757"/>
<path d="M10.0012 11.7364C10.612 11.7364 11.1117 11.204 11.1117 10.5532V5.81218C11.1117 5.75302 11.108 5.68991 11.1006 5.63074C11.0192 5.06672 10.5565 4.62891 10.0012 4.62891C9.39037 4.62891 8.89062 5.16138 8.89062 5.81218V10.5492C8.89062 11.204 9.39037 11.7364 10.0012 11.7364Z" fill="white"/>
<path d="M10.0001 12.8906C9.13977 12.8906 8.44531 13.5851 8.44531 14.4454C8.44531 15.3057 9.13977 16.0002 10.0001 16.0002C10.8604 16.0002 11.5548 15.3057 11.5548 14.4454C11.5583 13.5851 10.8638 12.8906 10.0001 12.8906Z" fill="white"/>
<rect width="20" height="20" rx="10" fill="#EB5757" />
<path d="M10.0012 11.7364C10.612 11.7364 11.1117 11.204 11.1117 10.5532V5.81218C11.1117 5.75302 11.108 5.68991 11.1006 5.63074C11.0192 5.06672 10.5565 4.62891 10.0012 4.62891C9.39037 4.62891 8.89062 5.16138 8.89062 5.81218V10.5492C8.89062 11.204 9.39037 11.7364 10.0012 11.7364Z" fill="white" />
<path d="M10.0001 12.8906C9.13977 12.8906 8.44531 13.5851 8.44531 14.4454C8.44531 15.3057 9.13977 16.0002 10.0001 16.0002C10.8604 16.0002 11.5548 15.3057 11.5548 14.4454C11.5583 13.5851 10.8638 12.8906 10.0001 12.8906Z" fill="white" />
</svg>
</div>
<p class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</p>
<p class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</p>
<p v-if="isLabelShown" class="label-container__label" :style="style.labelStyle">{{ label }}</p>
<p v-if="error" class="label-container__error" :style="style.errorStyle">{{ error }}</p>
</div>
<div
class="headerless-input-container"
:style="style.inputStyle"
>
<input
v-model="value"
class="headerless-input"
:class="{'inputError' : error, 'password': isPassword}"
:placeholder="placeholder"
:type="type"
@input="onInput"
@change="onInput"
@paste.prevent="onPaste"
v-model="value"
:placeholder="placeholder"
:type="type"
@focus="showPasswordStrength"
@blur="hidePasswordStrength"
/>
>
<!--2 conditions of eye image (crossed or not) -->
<div
class="input-wrap__image icon"
v-if="isPasswordHiddenState"
class="input-wrap__image icon"
@click="changeVision"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1" />
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1" />
</svg>
</div>
<div
class="input-wrap__image icon"
v-if="isPasswordShownState"
class="input-wrap__image icon"
@click="changeVision"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
<path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1" />
<path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1" />
<mask id="path-3-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" />
</mask>
<path class="input-wrap__image__path" fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white"/>
<path class="input-wrap__image__path" d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1"/>
<path class="input-wrap__image__path" fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white" />
<path class="input-wrap__image__path" d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1" />
</svg>
</div>
<!-- end of image-->

2
web/multinode/src/app/components/common/InfoBlock.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="info-block">
<slot name="body"></slot>
<slot name="body" />
</div>
</template>

4
web/multinode/src/app/components/common/NodeOptions.vue
View File

@ -4,8 +4,8 @@
<template>
<div class="options-button" @click.stop="openOptions">
<more-icon />
<div class="options" v-if="areOptionsShown" v-click-outside="closeOptions">
<div @click.stop="onCopy" class="options__item">Copy Node ID</div>
<div v-if="areOptionsShown" v-click-outside="closeOptions" class="options">
<div class="options__item" @click.stop="onCopy">Copy Node ID</div>
<delete-node :node-id="id" @closeOptions="closeOptions" />
<update-name :node-id="id" @closeOptions="closeOptions" />
</div>

5
web/multinode/src/app/components/common/PagesBlock.vue
View File

@ -4,11 +4,12 @@
<template>
<div class="pages-container">
<span
class="pages-container__pages"
v-for="page in pages"
:key="page.index"
class="pages-container__pages"
:class="{ 'selected': isSelected(page.index) }"
@click="page.select()"
:key="page.index">{{ page.index }}</span>
>{{ page.index }}</span>
</div>
</template>

4
web/multinode/src/app/components/common/VButton.vue
View File

@ -10,8 +10,8 @@
@click="onPress"
>
<svg v-if="withPlus" class="plus" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M10 4.1665V15.8332" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.16797 10H15.8346" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 4.1665V15.8332" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.16797 10H15.8346" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="label">{{ label }}</span>
</div>

10
web/multinode/src/app/components/common/VDropdown.vue
View File

@ -3,16 +3,16 @@
<template>
<div
class="dropdown"
@click.stop="toggleOptions"
:class="{ active: areOptionsShown }"
v-if="options.length"
class="dropdown"
:class="{ active: areOptionsShown }"
@click.stop="toggleOptions"
>
<span class="label">{{ selectedOption.label }}</span>
<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="#131D3A"/>
<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="#131D3A" />
</svg>
<div class="dropdown__selection" v-if="areOptionsShown" v-click-outside="closeOptions">
<div v-if="areOptionsShown" v-click-outside="closeOptions" class="dropdown__selection">
<div class="dropdown__selection__overflow-container">
<div v-for="option in options" :key="option.label" class="dropdown__selection__option" @click="onOptionClick(option)">
<span class="label">{{ option.label }}</span>

4
web/multinode/src/app/components/common/VLink.vue
View File

@ -5,8 +5,8 @@
<a class="link" :href="uri" rel="noopener noreferrer" target="_blank">
{{ label }}
<svg class="link__icon" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 5.33333C11.1565 5.33333 10.987 5.40357 10.8619 5.5286C10.7369 5.65362 10.6667 5.82319 10.6667 6V10C10.6667 10.1768 10.5964 10.3464 10.4714 10.4714C10.3464 10.5964 10.1768 10.6667 10 10.6667H2C1.82319 10.6667 1.65362 10.5964 1.5286 10.4714C1.40357 10.3464 1.33333 10.1768 1.33333 10V2C1.33333 1.82319 1.40357 1.65362 1.5286 1.5286C1.65362 1.40357 1.82319 1.33333 2 1.33333H6C6.17681 1.33333 6.34638 1.2631 6.4714 1.13807C6.59643 1.01305 6.66667 0.843478 6.66667 0.666667C6.66667 0.489856 6.59643 0.320286 6.4714 0.195262C6.34638 0.0702379 6.17681 0 6 0H2C1.46957 0 0.960859 0.210714 0.585787 0.585787C0.210714 0.960859 0 1.46957 0 2V10C0 10.5304 0.210714 11.0391 0.585787 11.4142C0.960859 11.7893 1.46957 12 2 12H10C10.5304 12 11.0391 11.7893 11.4142 11.4142C11.7893 11.0391 12 10.5304 12 10V6C12 5.82319 11.9298 5.65362 11.8047 5.5286C11.6797 5.40357 11.5101 5.33333 11.3333 5.33333Z" fill="#0059D0"/>
<path d="M8.66923 1.33333H9.72256L5.52923 5.52C5.46674 5.58198 5.41715 5.65571 5.3833 5.73695C5.34946 5.81819 5.33203 5.90533 5.33203 5.99333C5.33203 6.08134 5.34946 6.16848 5.3833 6.24972C5.41715 6.33096 5.46674 6.40469 5.52923 6.46667C5.59121 6.52915 5.66494 6.57875 5.74618 6.61259C5.82742 6.64644 5.91456 6.66387 6.00256 6.66387C6.09057 6.66387 6.17771 6.64644 6.25895 6.61259C6.34019 6.57875 6.41392 6.52915 6.4759 6.46667L10.6692 2.28V3.33333C10.6692 3.51014 10.7395 3.67971 10.8645 3.80474C10.9895 3.92976 11.1591 4 11.3359 4C11.5127 4 11.6823 3.92976 11.8073 3.80474C11.9323 3.67971 12.0026 3.51014 12.0026 3.33333V0.666667C12.0026 0.489856 11.9323 0.320286 11.8073 0.195262C11.6823 0.0702379 11.5127 0 11.3359 0H8.66923C8.49242 0 8.32285 0.0702379 8.19783 0.195262C8.0728 0.320286 8.00256 0.489856 8.00256 0.666667C8.00256 0.843478 8.0728 1.01305 8.19783 1.13807C8.32285 1.2631 8.49242 1.33333 8.66923 1.33333Z" fill="#0059D0"/>
<path d="M11.3333 5.33333C11.1565 5.33333 10.987 5.40357 10.8619 5.5286C10.7369 5.65362 10.6667 5.82319 10.6667 6V10C10.6667 10.1768 10.5964 10.3464 10.4714 10.4714C10.3464 10.5964 10.1768 10.6667 10 10.6667H2C1.82319 10.6667 1.65362 10.5964 1.5286 10.4714C1.40357 10.3464 1.33333 10.1768 1.33333 10V2C1.33333 1.82319 1.40357 1.65362 1.5286 1.5286C1.65362 1.40357 1.82319 1.33333 2 1.33333H6C6.17681 1.33333 6.34638 1.2631 6.4714 1.13807C6.59643 1.01305 6.66667 0.843478 6.66667 0.666667C6.66667 0.489856 6.59643 0.320286 6.4714 0.195262C6.34638 0.0702379 6.17681 0 6 0H2C1.46957 0 0.960859 0.210714 0.585787 0.585787C0.210714 0.960859 0 1.46957 0 2V10C0 10.5304 0.210714 11.0391 0.585787 11.4142C0.960859 11.7893 1.46957 12 2 12H10C10.5304 12 11.0391 11.7893 11.4142 11.4142C11.7893 11.0391 12 10.5304 12 10V6C12 5.82319 11.9298 5.65362 11.8047 5.5286C11.6797 5.40357 11.5101 5.33333 11.3333 5.33333Z" fill="#0059D0" />
<path d="M8.66923 1.33333H9.72256L5.52923 5.52C5.46674 5.58198 5.41715 5.65571 5.3833 5.73695C5.34946 5.81819 5.33203 5.90533 5.33203 5.99333C5.33203 6.08134 5.34946 6.16848 5.3833 6.24972C5.41715 6.33096 5.46674 6.40469 5.52923 6.46667C5.59121 6.52915 5.66494 6.57875 5.74618 6.61259C5.82742 6.64644 5.91456 6.66387 6.00256 6.66387C6.09057 6.66387 6.17771 6.64644 6.25895 6.61259C6.34019 6.57875 6.41392 6.52915 6.4759 6.46667L10.6692 2.28V3.33333C10.6692 3.51014 10.7395 3.67971 10.8645 3.80474C10.9895 3.92976 11.1591 4 11.3359 4C11.5127 4 11.6823 3.92976 11.8073 3.80474C11.9323 3.67971 12.0026 3.51014 12.0026 3.33333V0.666667C12.0026 0.489856 11.9323 0.320286 11.8073 0.195262C11.6823 0.0702379 11.5127 0 11.3359 0H8.66923C8.49242 0 8.32285 0.0702379 8.19783 0.195262C8.0728 0.320286 8.00256 0.489856 8.00256 0.666667C8.00256 0.843478 8.0728 1.01305 8.19783 1.13807C8.32285 1.2631 8.49242 1.33333 8.66923 1.33333Z" fill="#0059D0" />
</svg>
</a>
</template>

10
web/multinode/src/app/components/common/VModal.vue
View File

@ -5,18 +5,18 @@
<div class="modal-wrap" @click.self.stop="close">
<div class="modal">
<div class="modal__header">
<slot name="header"></slot>
<slot name="header" />
</div>
<div class="modal__body">
<slot name="body"></slot>
<slot name="body" />
</div>
<div class="modal__footer">
<slot name="footer"></slot>
<slot name="footer" />
</div>
<div class="modal__cross" @click.stop="close">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M24 8L8 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 8L24 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 8L8 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 8L24 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>

8
web/multinode/src/app/components/common/VPagination.vue
View File

@ -6,7 +6,7 @@
<div class="pagination-container__pages">
<div class="pagination-container__button" @click="prevPage">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.80078 9.2625L15.5258 15L9.80078 20.7375L11.5633 22.5L19.0633 15L11.5633 7.5L9.80078 9.2625Z" fill="#586474"/>
<path d="M9.80078 9.2625L15.5258 15L9.80078 20.7375L11.5633 22.5L19.0633 15L11.5633 7.5L9.80078 9.2625Z" fill="#586474" />
</svg>
</div>
<div class="pagination-container__items">
@ -14,12 +14,12 @@
:pages="firstBlockPages"
:is-selected="isSelected"
/>
<span class="pages-divider" v-if="isFirstDotsShown">...</span>
<span v-if="isFirstDotsShown" class="pages-divider">...</span>
<PagesBlock
:pages="middleBlockPages"
:is-selected="isSelected"
/>
<span class="pages-divider" v-if="isSecondDotsShown">...</span>
<span v-if="isSecondDotsShown" class="pages-divider">...</span>
<PagesBlock
:pages="lastBlockPages"
:is-selected="isSelected"
@ -27,7 +27,7 @@
</div>
<div class="pagination-container__button" @click="nextPage">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.80078 9.2625L15.5258 15L9.80078 20.7375L11.5633 22.5L19.0633 15L11.5633 7.5L9.80078 9.2625Z" fill="#586474"/>
<path d="M9.80078 9.2625L15.5258 15L9.80078 20.7375L11.5633 22.5L19.0633 15L11.5633 7.5L9.80078 9.2625Z" fill="#586474" />
</svg>
</div>
</div>

7
web/multinode/src/app/components/modals/AddNewNode.vue
View File

@ -6,7 +6,7 @@
<v-button :with-plus="true" label="New Node" :on-press="openModal" width="152px" />
<v-modal v-if="isAddNewNodeModalShown" @onClose="closeModal">
<h2 slot="header">Add New Node</h2>
<div class="add-new-node__body" slot="body">
<div slot="body" class="add-new-node__body">
<headered-input
class="add-new-node__body__input"
label="Node ID"
@ -29,13 +29,12 @@
@setData="setApiKey"
/>
</div>
<div class="add-new-node__footer" slot="footer">
<div slot="footer" class="add-new-node__footer">
<v-button label="Cancel" :is-white="true" width="205px" :on-press="closeModal" />
<v-button label="Create" width="205px" :on-press="onCreate"/>
<v-button label="Create" width="205px" :on-press="onCreate" />
</div>
</v-modal>
</div>
</template>
<script lang="ts">

8
web/multinode/src/app/components/modals/DeleteNode.vue
View File

@ -3,17 +3,17 @@
<template>
<div class="delete-node">
<div @click.stop="openModal" class="delete-node__button">Delete Node</div>
<div class="delete-node__button" @click.stop="openModal">Delete Node</div>
<v-modal v-if="isModalShown" @onClose="closeModal">
<h2 slot="header">Delete this node?</h2>
<div class="delete-node__body" slot="body">
<div slot="body" class="delete-node__body">
<div class="delete-node__body__node-id-container">
<span>{{ nodeId }}</span>
</div>
</div>
<div class="delete-node__footer" slot="footer">
<div slot="footer" class="delete-node__footer">
<v-button label="Cancel" :is-white="true" width="205px" :on-press="closeModal" />
<v-button label="Delete" width="205px" :on-press="onDelete"/>
<v-button label="Delete" width="205px" :on-press="onDelete" />
</div>
</v-modal>
</div>

8
web/multinode/src/app/components/modals/UpdateName.vue
View File

@ -3,10 +3,10 @@
<template>
<div class="update-name">
<div @click.stop="openModal" class="update-name__button">Update Name</div>
<div class="update-name__button" @click.stop="openModal">Update Name</div>
<v-modal v-if="isModalShown" @onClose="closeModal">
<h2 slot="header">Set name for node</h2>
<div class="update-name__body" slot="body">
<div slot="body" class="update-name__body">
<div class="update-name__body__node-id-container">
<span>{{ nodeId }}</span>
</div>
@ -18,9 +18,9 @@
@setData="setNodeName"
/>
</div>
<div class="delete-node__footer" slot="footer">
<div slot="footer" class="delete-node__footer">
<v-button label="Cancel" :is-white="true" width="205px" :on-press="closeModal" />
<v-button label="Set Name" width="205px" :on-press="onSetName"/>
<v-button label="Set Name" width="205px" :on-press="onSetName" />
</div>
</v-modal>
</div>

2
web/multinode/src/app/components/myNodes/tables/NodesTable.vue
View File

@ -19,7 +19,7 @@
<th>EARNED</th>
<th>VERSION</th>
<th>STATUS</th>
<th></th>
<th />
</tr>
</thead>
<tbody slot="body">

6
web/multinode/src/app/components/navigation/NavigationArea.vue
View File

@ -5,14 +5,14 @@
<div class="navigation-area">
<storj-logo class="navigation-area__logo" />
<router-link
:aria-label="navItem.name"
class="navigation-area__item-container"
v-for="navItem in navigation"
:key="navItem.name"
:aria-label="navItem.name"
class="navigation-area__item-container"
:to="navItem.path"
>
<div class="navigation-area__item-container__link">
<component :is="navItem.icon"></component>
<component :is="navItem.icon" />
<p class="navigation-area__item-container__link__title">{{ navItem.name }}</p>
</div>
</router-link>

2
web/multinode/src/app/components/payouts/BalanceArea.vue
View File

@ -3,7 +3,7 @@
<template>
<info-block>
<div class="balance-area" slot="body">
<div slot="body" class="balance-area">
<header class="balance-area__header">
<h3 class="balance-area__header__title">Balance</h3>
</header>

2
web/multinode/src/app/components/payouts/DetailsArea.vue
View File

@ -3,7 +3,7 @@
<template>
<info-block>
<div class="details-area" slot="body">
<div slot="body" class="details-area">
<header class="details-area__header">
<h3 class="details-area__header__title">Details</h3>
<p class="details-area__header__period">{{ period }}</p>

2
web/multinode/src/app/components/payouts/PayoutHistoryBlock.vue
View File

@ -3,7 +3,7 @@
<template>
<info-block>
<div class="payouts-history-block" slot="body">
<div slot="body" class="payouts-history-block">
<h3 class="payouts-history-block__title">Payout History</h3>
<v-button class="payouts-history-block__button" label="Download" :is-white="true" width="100%" />
</div>

8
web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="payout-period-calendar" v-click-outside="close">
<div v-click-outside="close" class="payout-period-calendar">
<div class="payout-period-calendar__header">
<div class="payout-period-calendar__header__year-selection">
<div class="payout-period-calendar__header__year-selection__prev" @click.stop="decrementYear">
@ -13,14 +13,14 @@
<GrayArrowLeftIcon />
</div>
</div>
<p class="payout-period-calendar__header__all-time" @click="selectAllTime" >All time</p>
<p class="payout-period-calendar__header__all-time" @click="selectAllTime">All time</p>
</div>
<div class="payout-period-calendar__months-area">
<div
class="month-item"
:class="{ selected: item.selected, disabled: !item.active }"
v-for="item in currentDisplayedMonths"
:key="item.name"
class="month-item"
:class="{ selected: item.selected, disabled: !item.active }"
@click.stop="checkMonth(item)"
>
<p class="month-item__label">{{ item.name }}</p>

4
web/multinode/src/app/components/payouts/PayoutPeriodCalendarButton.vue
View File

@ -8,9 +8,9 @@
>
<span class="label">{{ period }}</span>
<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="#131D3A"/>
<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="#131D3A" />
</svg>
<payout-period-calendar class="calendar-button__calendar" v-if="isCalendarShown" @onClose="closeCalendar"/>
<payout-period-calendar v-if="isCalendarShown" class="calendar-button__calendar" @onClose="closeCalendar" />
</div>
</template>

4
web/multinode/src/app/components/payouts/tables/heldHistory/HeldHistory.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<base-table >
<base-table>
<thead slot="head">
<tr>
<th class="align-left">SATELLITE</th>
@ -12,7 +12,7 @@
</tr>
</thead>
<tbody slot="body">
<tr class="table-item" v-for="(heldHistoryItem, index) in heldHistory" :key="index">
<tr v-for="(heldHistoryItem, index) in heldHistory" :key="index" class="table-item">
<th class="align-left">
<p class="table-item__name">{{ heldHistoryItem.satelliteAddress }}</p>
<p class="table-item__months">{{ heldHistoryItem.monthsCount }}</p>

4
web/multinode/src/app/components/payouts/tables/payoutSummary/PayoutsSummaryTable.vue
View File

@ -8,11 +8,11 @@
<th class="align-left">NODE</th>
<th>HELD</th>
<th>PAID</th>
<th class="options"></th>
<th class="options" />
</tr>
</thead>
<tbody slot="body">
<payouts-summary-item v-for="payoutSummary in nodePayoutsSummary" :key="payoutSummary.nodeId" :payouts-summary="payoutSummary"/>
<payouts-summary-item v-for="payoutSummary in nodePayoutsSummary" :key="payoutSummary.nodeId" :payouts-summary="payoutSummary" />
</tbody>
</base-table>
</template>

10
web/multinode/src/app/components/payouts/tables/payoutsByNode/PayoutsByNodeTable.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<base-table >
<base-table>
<thead slot="head">
<tr>
<th class="align-left">NAME</th>
@ -32,22 +32,22 @@
</tr>
<tr class="table-item">
<th class="align-left">Gross Total</th>
<th></th><th></th>
<th /><th />
<th>{{ paystub.gross | centsToDollars }}</th>
</tr>
<tr class="table-item">
<th class="align-left">Held amount</th>
<th></th><th></th>
<th /><th />
<th>{{ paystub.held | centsToDollars }}</th>
</tr>
<tr class="table-item">
<th class="align-left">NET TOTAL</th>
<th></th><th></th>
<th /><th />
<th>{{ paystub.paid | centsToDollars }}</th>
</tr>
<tr class="table-item">
<th class="align-left">Distributed</th>
<th></th><th></th>
<th /><th />
<th>{{ paystub.distributed | centsToDollars }}</th>
</tr>
</tbody>

2
web/multinode/src/app/components/storage/DiskSpaceChart.vue
View File

@ -6,11 +6,11 @@
<p class="disk-space-chart__data-dimension">{{ chartDataDimension }}*h</p>
<VChart
id="disk-space-chart"
:key="chartKey"
:chart-data="chartData"
:width="chartWidth"
:height="chartHeight"
:tooltip-constructor="diskSpaceTooltip"
:key="chartKey"
/>
</div>
</template>

8
web/multinode/src/app/components/storage/DiskStatChart.vue
View File

@ -9,28 +9,28 @@
<div class="disk-stat-area__info-area">
<div class="disk-stat-area__info-area__item">
<div class="disk-stat-area__info-area__item__labels-area">
<div class="disk-stat-area__info-area__item__labels-area__circle used"></div>
<div class="disk-stat-area__info-area__item__labels-area__circle used" />
<p class="disk-stat-area__info-area__item__labels-area__label">Used</p>
</div>
<p class="disk-stat-area__info-area__item__labels-area__amount">{{ diskSpace.usedPieces | bytesToBase10String }}</p>
</div>
<div class="disk-stat-area__info-area__item">
<div class="disk-stat-area__info-area__item__labels-area">
<div class="disk-stat-area__info-area__item__labels-area__circle free"></div>
<div class="disk-stat-area__info-area__item__labels-area__circle free" />
<p class="disk-stat-area__info-area__item__labels-area__label">Free</p>
</div>
<p class="disk-stat-area__info-area__item__labels-area__amount">{{ diskSpace.free | bytesToBase10String }}</p>
</div>
<div class="disk-stat-area__info-area__item">
<div class="disk-stat-area__info-area__item__labels-area">
<div class="disk-stat-area__info-area__item__labels-area__circle trash"></div>
<div class="disk-stat-area__info-area__item__labels-area__circle trash" />
<p class="disk-stat-area__info-area__item__labels-area__label">Trash</p>
</div>
<p class="disk-stat-area__info-area__item__labels-area__amount">{{ diskSpace.usedTrash | bytesToBase10String }}</p>
</div>
<div class="disk-stat-area__info-area__item">
<div class="disk-stat-area__info-area__item__labels-area">
<div class="disk-stat-area__info-area__item__labels-area__circle overused"></div>
<div class="disk-stat-area__info-area__item__labels-area__circle overused" />
<p class="disk-stat-area__info-area__item__labels-area__label">Overused</p>
</div>
<p class="disk-stat-area__info-area__item__labels-area__amount">{{ diskSpace.overused | bytesToBase10String }}</p>

2
web/multinode/src/app/components/wallets/tables/walletDetails/WalletDetailsTable.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<base-table >
<base-table>
<thead slot="head">
<tr>
<th class="align-left">NODE</th>

6
web/multinode/src/app/components/wallets/tables/walletsSummary/WalletsTable.vue
View File

@ -20,14 +20,14 @@
<div class="table-item__wallet-feature" :class="{ 'active': operator.areWalletFeaturesEnabled }">
<template v-if="operator.areWalletFeaturesEnabled">
<svg class="table-item__wallet-feature__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 8C15.5 9.98912 14.7098 11.8968 13.3033 13.3033C11.8968 14.7098 9.98912 15.5 8 15.5C6.01088 15.5 4.10322 14.7098 2.6967 13.3033C1.29018 11.8968 0.5 9.98912 0.5 8C0.5 6.01088 1.29018 4.10322 2.6967 2.6967C4.10322 1.29018 6.01088 0.5 8 0.5C9.98912 0.5 11.8968 1.29018 13.3033 2.6967C14.7098 4.10322 15.5 6.01088 15.5 8ZM11.7781 5.15937C11.7112 5.09264 11.6314 5.0401 11.5437 5.00489C11.4559 4.96968 11.362 4.95252 11.2675 4.95445C11.173 4.95637 11.0798 4.97734 10.9936 5.0161C10.9073 5.05485 10.8298 5.1106 10.7656 5.18L7.50969 9.32844L5.5475 7.36531C5.41421 7.24111 5.23792 7.1735 5.05576 7.17671C4.8736 7.17992 4.6998 7.25372 4.57098 7.38254C4.44215 7.51137 4.36836 7.68517 4.36515 7.86732C4.36193 8.04948 4.42955 8.22577 4.55375 8.35906L7.03437 10.8406C7.1012 10.9073 7.18078 10.9599 7.26836 10.9952C7.35594 11.0305 7.44973 11.0477 7.54414 11.046C7.63854 11.0442 7.73163 11.0235 7.81784 10.985C7.90405 10.9465 7.98163 10.891 8.04594 10.8219L11.7884 6.14375C11.916 6.01109 11.9865 5.8337 11.9848 5.64965C11.983 5.4656 11.9092 5.28958 11.7791 5.15937H11.7781Z" fill="#00CE7D"/>
<path d="M15.5 8C15.5 9.98912 14.7098 11.8968 13.3033 13.3033C11.8968 14.7098 9.98912 15.5 8 15.5C6.01088 15.5 4.10322 14.7098 2.6967 13.3033C1.29018 11.8968 0.5 9.98912 0.5 8C0.5 6.01088 1.29018 4.10322 2.6967 2.6967C4.10322 1.29018 6.01088 0.5 8 0.5C9.98912 0.5 11.8968 1.29018 13.3033 2.6967C14.7098 4.10322 15.5 6.01088 15.5 8ZM11.7781 5.15937C11.7112 5.09264 11.6314 5.0401 11.5437 5.00489C11.4559 4.96968 11.362 4.95252 11.2675 4.95445C11.173 4.95637 11.0798 4.97734 10.9936 5.0161C10.9073 5.05485 10.8298 5.1106 10.7656 5.18L7.50969 9.32844L5.5475 7.36531C5.41421 7.24111 5.23792 7.1735 5.05576 7.17671C4.8736 7.17992 4.6998 7.25372 4.57098 7.38254C4.44215 7.51137 4.36836 7.68517 4.36515 7.86732C4.36193 8.04948 4.42955 8.22577 4.55375 8.35906L7.03437 10.8406C7.1012 10.9073 7.18078 10.9599 7.26836 10.9952C7.35594 11.0305 7.44973 11.0477 7.54414 11.046C7.63854 11.0442 7.73163 11.0235 7.81784 10.985C7.90405 10.9465 7.98163 10.891 8.04594 10.8219L11.7884 6.14375C11.916 6.01109 11.9865 5.8337 11.9848 5.64965C11.983 5.4656 11.9092 5.28958 11.7791 5.15937H11.7781Z" fill="#00CE7D" />
</svg>
<p class="table-item__wallet-feature__label">zkSync is opted-in</p>
</template>
<template v-else>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9C16.5 10.9891 15.7098 12.8968 14.3033 14.3033C12.8968 15.7098 10.9891 16.5 9 16.5C7.01088 16.5 5.10322 15.7098 3.6967 14.3033C2.29018 12.8968 1.5 10.9891 1.5 9C1.5 7.01088 2.29018 5.10322 3.6967 3.6967C5.10322 2.29018 7.01088 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9Z" fill="#586474"/>
<rect x="5" y="8.30078" width="8" height="1.5" rx="0.75" fill="white"/>
<path d="M16.5 9C16.5 10.9891 15.7098 12.8968 14.3033 14.3033C12.8968 15.7098 10.9891 16.5 9 16.5C7.01088 16.5 5.10322 15.7098 3.6967 14.3033C2.29018 12.8968 1.5 10.9891 1.5 9C1.5 7.01088 2.29018 5.10322 3.6967 3.6967C5.10322 2.29018 7.01088 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9Z" fill="#586474" />
<rect x="5" y="8.30078" width="8" height="1.5" rx="0.75" fill="white" />
</svg>
<p class="table-item__wallet-feature__label">zkSync is opted-out</p>
</template>

4
web/multinode/src/app/views/AddFirstNode.vue
View File

File diff suppressed because one or more lines are too long

26
web/multinode/src/app/views/Dashboard.vue
View File

@ -2,19 +2,19 @@
// See LICENSE for copying information.
<template>
<div class="dashboard-area">
<nav class="dashboard-area__navigation-area">
<navigation-area />
</nav>
<div class="dashboard-area__right-area">
<header class="dashboard-area__right-area__header">
<add-new-node />
</header>
<div class="dashboard-area__right-area__content">
<router-view />
</div>
</div>
</div>
<div class="dashboard-area">
<nav class="dashboard-area__navigation-area">
<navigation-area />
</nav>
<div class="dashboard-area__right-area">
<header class="dashboard-area__right-area__header">
<add-new-node />
</header>
<div class="dashboard-area__right-area__content">
<router-view />
</div>
</div>
</div>
</template>
<script lang="ts">

4
web/multinode/src/app/views/WelcomeScreen.vue
View File

File diff suppressed because one or more lines are too long

18
web/multinode/src/app/views/bandwidth/BandwidthPage.vue
View File

@ -38,13 +38,13 @@
</button>
</div>
</div>
<p class="chart-container__amount" v-if="isEgressChartShown"><b>{{ bandwidth.egressSummary | bytesToBase10String }}</b></p>
<p class="chart-container__amount" v-else-if="isIngressChartShown"><b>{{ bandwidth.ingressSummary | bytesToBase10String }}</b></p>
<p class="chart-container__amount" v-else><b>{{ bandwidth.bandwidthSummary | bytesToBase10String }}</b></p>
<div class="chart-container__chart" ref="chart" onresize="recalculateChartDimensions()" >
<egress-chart v-if="isEgressChartShown" :height="chartHeight" :width="chartWidth"/>
<ingress-chart v-else-if="isIngressChartShown" :height="chartHeight" :width="chartWidth"/>
<bandwidth-chart v-else :height="chartHeight" :width="chartWidth"/>
<p v-if="isEgressChartShown" class="chart-container__amount"><b>{{ bandwidth.egressSummary | bytesToBase10String }}</b></p>
<p v-else-if="isIngressChartShown" class="chart-container__amount"><b>{{ bandwidth.ingressSummary | bytesToBase10String }}</b></p>
<p v-else class="chart-container__amount"><b>{{ bandwidth.bandwidthSummary | bytesToBase10String }}</b></p>
<div ref="chart" class="chart-container__chart" onresize="recalculateChartDimensions()">
<egress-chart v-if="isEgressChartShown" :height="chartHeight" :width="chartWidth" />
<ingress-chart v-else-if="isIngressChartShown" :height="chartHeight" :width="chartWidth" />
<bandwidth-chart v-else :height="chartHeight" :width="chartWidth" />
</div>
</div>
<section class="bandwidth__chart-area">
@ -53,8 +53,8 @@
<p class="chart-container__title-area__title">Disk Space Used This Month</p>
</div>
<p class="chart-container__amount disk-space-amount"><b>{{ diskSpaceUsageSummary | bytesToBase10String }}*h</b></p>
<div class="chart-container__chart" ref="diskSpaceChart" onresize="recalculateChartDimensions()" >
<disk-space-chart :height="diskSpaceChartHeight" :width="diskSpaceChartWidth"/>
<div ref="diskSpaceChart" class="chart-container__chart" onresize="recalculateChartDimensions()">
<disk-space-chart :height="diskSpaceChartHeight" :width="diskSpaceChartWidth" />
</div>
</section>
<section class="disk-stat-chart">

2
web/multinode/src/app/views/myNodes/MyNodes.vue
View File

@ -5,7 +5,7 @@
<div class="my-nodes">
<h1 class="my-nodes__title">My Nodes</h1>
<satellite-selection-dropdown />
<nodes-table class="table"/>
<nodes-table class="table" />
</div>
</template>

30
web/multinode/src/app/views/payouts/PayoutsByNode.vue
View File

@ -8,25 +8,25 @@
<div class="payouts-by-node__top-area__left-area__title-area">
<div class="payouts-by-node__top-area__left-area__title-area__arrow" @click="redirectToPayoutSummary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3398 0.554956C14.0797 1.2949 14.0797 2.49458 13.3398 3.23452L6.46904 10.1053H22.1053C23.1517 10.1053 24 10.9536 24 12C24 13.0464 23.1517 13.8947 22.1053 13.8947H6.46904L13.3398 20.7655C14.0797 21.5054 14.0797 22.7051 13.3398 23.445C12.5998 24.185 11.4002 24.185 10.6602 23.445L0.554956 13.3398C-0.184985 12.5998 -0.184985 11.4002 0.554956 10.6602L10.6602 0.554956C11.4002 -0.184985 12.5998 -0.184985 13.3398 0.554956Z" fill="#252A32"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3398 0.554956C14.0797 1.2949 14.0797 2.49458 13.3398 3.23452L6.46904 10.1053H22.1053C23.1517 10.1053 24 10.9536 24 12C24 13.0464 23.1517 13.8947 22.1053 13.8947H6.46904L13.3398 20.7655C14.0797 21.5054 14.0797 22.7051 13.3398 23.445C12.5998 24.185 11.4002 24.185 10.6602 23.445L0.554956 13.3398C-0.184985 12.5998 -0.184985 11.4002 0.554956 10.6602L10.6602 0.554956C11.4002 -0.184985 12.5998 -0.184985 13.3398 0.554956Z" fill="#252A32" />
</svg>
</div>
<h1 class="payouts-by-node__top-area__left-area__title-area__title">{{ nodeTitle }}</h1>
</div>
<!-- TODO: implement wallet info-->
<!-- <p class="payouts-by-node__top-area__left-area__wallet">0xb64ef51c888972c908cfacf59b47c1afbc0ab8ac</p>-->
<!-- <div class="payouts-by-node__top-area__left-area__links">-->
<!-- <v-link uri="#" label="View on Etherscan (L1 payouts)" />-->
<!-- <v-link uri="#" label="View on zkScan (L2 payouts)" />-->
<!-- </div>-->
<!-- TODO: implement wallet info-->
<!-- <p class="payouts-by-node__top-area__left-area__wallet">0xb64ef51c888972c908cfacf59b47c1afbc0ab8ac</p>-->
<!-- <div class="payouts-by-node__top-area__left-area__links">-->
<!-- <v-link uri="#" label="View on Etherscan (L1 payouts)" />-->
<!-- <v-link uri="#" label="View on zkScan (L2 payouts)" />-->
<!-- </div>-->
</div>
<info-block>
<div class="payouts-by-node__top-area__balance" slot="body">
<div slot="body" class="payouts-by-node__top-area__balance">
<div class="payouts-by-node__top-area__balance__item">
<h3 class="payouts-by-node__top-area__balance__item__label">Undistributed Balance</h3>
<h2 class="payouts-by-node__top-area__balance__item__value">{{ selectedNodePayouts.expectations.undistributed | centsToDollars }}</h2>
</div>
<div class="payouts-by-node__top-area__balance__divider"></div>
<div class="payouts-by-node__top-area__balance__divider" />
<div class="payouts-by-node__top-area__balance__item">
<h3 class="payouts-by-node__top-area__balance__item__label">Estimated Earnings (Apr)</h3>
<h2 class="payouts-by-node__top-area__balance__item__value">{{ selectedNodePayouts.expectations.currentMonthEstimation | centsToDollars }}</h2>
@ -40,31 +40,31 @@
<payout-period-calendar-button :period="period" />
</div>
<section class="payouts-by-node__content-area__main-info">
<payouts-by-node-table class="payouts-by-node__content-area__main-info__table" :paystub="selectedNodePayouts.paystubForPeriod"/>
<payouts-by-node-table class="payouts-by-node__content-area__main-info__table" :paystub="selectedNodePayouts.paystubForPeriod" />
<div class="payouts-by-node__content-area__main-info__totals-area">
<info-block>
<div class="payouts-by-node__content-area__main-info__totals-area__item" slot="body">
<div slot="body" class="payouts-by-node__content-area__main-info__totals-area__item">
<p class="payouts-by-node__content-area__main-info__totals-area__item__label">TOTAL PAID</p>
<p class="payouts-by-node__content-area__main-info__totals-area__item__value">{{ selectedNodePayouts.totalPaid | centsToDollars }}</p>
</div>
</info-block>
<info-block>
<div class="payouts-by-node__content-area__main-info__totals-area__item" slot="body">
<div slot="body" class="payouts-by-node__content-area__main-info__totals-area__item">
<p class="payouts-by-node__content-area__main-info__totals-area__item__label">TOTAL HELD</p>
<p class="payouts-by-node__content-area__main-info__totals-area__item__value">{{ selectedNodePayouts.totalHeld | centsToDollars }}</p>
</div>
</info-block>
<info-block>
<div class="payouts-by-node__content-area__main-info__totals-area__item" slot="body">
<div slot="body" class="payouts-by-node__content-area__main-info__totals-area__item">
<p class="payouts-by-node__content-area__main-info__totals-area__item__label">TOTAL EARNED</p>
<p class="payouts-by-node__content-area__main-info__totals-area__item__value">{{ selectedNodePayouts.totalEarned | centsToDollars }}</p>
</div>
</info-block>
<info-block class="information">
<div class="payouts-by-node__content-area__main-info__totals-area__information" slot="body">
<div slot="body" class="payouts-by-node__content-area__main-info__totals-area__information">
<h3 class="payouts-by-node__content-area__main-info__totals-area__information__title">Minimal threshold & distributed payout system</h3>
<p class="payouts-by-node__content-area__main-info__totals-area__information__description">Short description how minimal threshold system works.</p>
<!-- TODO: consider moving link to config-->
<!-- TODO: consider moving link to config-->
<a href="https://forum.storj.io/t/minimum-threshold-for-storage-node-operator-payouts/11064"
class="payouts-by-node__content-area__main-info__totals-area__information__link"
>

4
web/multinode/src/app/views/payouts/PayoutsPage.vue
View File

@ -11,8 +11,8 @@
<payout-period-calendar-button :period="period" />
</div>
<payouts-summary-table
class="payouts__left-area__table"
v-if="payouts.summary.nodeSummary"
class="payouts__left-area__table"
:node-payouts-summary="payouts.summary.nodeSummary"
/>
</div>
@ -27,7 +27,7 @@
:current-month-estimation="payouts.totalExpectations.currentMonthEstimation"
:undistributed="payouts.totalExpectations.undistributed"
/>
<!-- <payout-history-block />-->
<!-- <payout-history-block />-->
</div>
</div>
</div>

2
web/multinode/src/app/views/payouts/PayoutsRoot.vue
View File

@ -3,7 +3,7 @@
<template>
<div id="payouts-root">
<router-view/>
<router-view />
</div>
</template>

8
web/multinode/src/app/views/wallets/WalletDetailsPage.vue
View File

@ -8,7 +8,7 @@
<div class="wallet-details__header__left-area__title-area">
<div class="wallet-details__header__left-area__title-area__arrow" @click="redirectToWalletsSummary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3398 0.554956C14.0797 1.2949 14.0797 2.49458 13.3398 3.23452L6.46904 10.1053H22.1053C23.1517 10.1053 24 10.9536 24 12C24 13.0464 23.1517 13.8947 22.1053 13.8947H6.46904L13.3398 20.7655C14.0797 21.5054 14.0797 22.7051 13.3398 23.445C12.5998 24.185 11.4002 24.185 10.6602 23.445L0.554956 13.3398C-0.184985 12.5998 -0.184985 11.4002 0.554956 10.6602L10.6602 0.554956C11.4002 -0.184985 12.5998 -0.184985 13.3398 0.554956Z" fill="#252A32"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3398 0.554956C14.0797 1.2949 14.0797 2.49458 13.3398 3.23452L6.46904 10.1053H22.1053C23.1517 10.1053 24 10.9536 24 12C24 13.0464 23.1517 13.8947 22.1053 13.8947H6.46904L13.3398 20.7655C14.0797 21.5054 14.0797 22.7051 13.3398 23.445C12.5998 24.185 11.4002 24.185 10.6602 23.445L0.554956 13.3398C-0.184985 12.5998 -0.184985 11.4002 0.554956 10.6602L10.6602 0.554956C11.4002 -0.184985 12.5998 -0.184985 13.3398 0.554956Z" fill="#252A32" />
</svg>
</div>
<h1 class="wallet-details__header__left-area__title-area__title">Wallet</h1>
@ -17,14 +17,14 @@
<div class="wallet-details__header__left-area__wallet-feature" :class="{ 'active': false }">
<template v-if="false">
<svg class="wallet-details__header__left-area__wallet-feature__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 8C15.5 9.98912 14.7098 11.8968 13.3033 13.3033C11.8968 14.7098 9.98912 15.5 8 15.5C6.01088 15.5 4.10322 14.7098 2.6967 13.3033C1.29018 11.8968 0.5 9.98912 0.5 8C0.5 6.01088 1.29018 4.10322 2.6967 2.6967C4.10322 1.29018 6.01088 0.5 8 0.5C9.98912 0.5 11.8968 1.29018 13.3033 2.6967C14.7098 4.10322 15.5 6.01088 15.5 8ZM11.7781 5.15937C11.7112 5.09264 11.6314 5.0401 11.5437 5.00489C11.4559 4.96968 11.362 4.95252 11.2675 4.95445C11.173 4.95637 11.0798 4.97734 10.9936 5.0161C10.9073 5.05485 10.8298 5.1106 10.7656 5.18L7.50969 9.32844L5.5475 7.36531C5.41421 7.24111 5.23792 7.1735 5.05576 7.17671C4.8736 7.17992 4.6998 7.25372 4.57098 7.38254C4.44215 7.51137 4.36836 7.68517 4.36515 7.86732C4.36193 8.04948 4.42955 8.22577 4.55375 8.35906L7.03437 10.8406C7.1012 10.9073 7.18078 10.9599 7.26836 10.9952C7.35594 11.0305 7.44973 11.0477 7.54414 11.046C7.63854 11.0442 7.73163 11.0235 7.81784 10.985C7.90405 10.9465 7.98163 10.891 8.04594 10.8219L11.7884 6.14375C11.916 6.01109 11.9865 5.8337 11.9848 5.64965C11.983 5.4656 11.9092 5.28958 11.7791 5.15937H11.7781Z" fill="#00CE7D"/>
<path d="M15.5 8C15.5 9.98912 14.7098 11.8968 13.3033 13.3033C11.8968 14.7098 9.98912 15.5 8 15.5C6.01088 15.5 4.10322 14.7098 2.6967 13.3033C1.29018 11.8968 0.5 9.98912 0.5 8C0.5 6.01088 1.29018 4.10322 2.6967 2.6967C4.10322 1.29018 6.01088 0.5 8 0.5C9.98912 0.5 11.8968 1.29018 13.3033 2.6967C14.7098 4.10322 15.5 6.01088 15.5 8ZM11.7781 5.15937C11.7112 5.09264 11.6314 5.0401 11.5437 5.00489C11.4559 4.96968 11.362 4.95252 11.2675 4.95445C11.173 4.95637 11.0798 4.97734 10.9936 5.0161C10.9073 5.05485 10.8298 5.1106 10.7656 5.18L7.50969 9.32844L5.5475 7.36531C5.41421 7.24111 5.23792 7.1735 5.05576 7.17671C4.8736 7.17992 4.6998 7.25372 4.57098 7.38254C4.44215 7.51137 4.36836 7.68517 4.36515 7.86732C4.36193 8.04948 4.42955 8.22577 4.55375 8.35906L7.03437 10.8406C7.1012 10.9073 7.18078 10.9599 7.26836 10.9952C7.35594 11.0305 7.44973 11.0477 7.54414 11.046C7.63854 11.0442 7.73163 11.0235 7.81784 10.985C7.90405 10.9465 7.98163 10.891 8.04594 10.8219L11.7884 6.14375C11.916 6.01109 11.9865 5.8337 11.9848 5.64965C11.983 5.4656 11.9092 5.28958 11.7791 5.15937H11.7781Z" fill="#00CE7D" />
</svg>
<p class="wallet-details__header__left-area__wallet-feature__label">zkSync is opted-in</p>
</template>
<template v-else>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9C16.5 10.9891 15.7098 12.8968 14.3033 14.3033C12.8968 15.7098 10.9891 16.5 9 16.5C7.01088 16.5 5.10322 15.7098 3.6967 14.3033C2.29018 12.8968 1.5 10.9891 1.5 9C1.5 7.01088 2.29018 5.10322 3.6967 3.6967C5.10322 2.29018 7.01088 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9Z" fill="#586474"/>
<rect x="5" y="8.30078" width="8" height="1.5" rx="0.75" fill="white"/>
<path d="M16.5 9C16.5 10.9891 15.7098 12.8968 14.3033 14.3033C12.8968 15.7098 10.9891 16.5 9 16.5C7.01088 16.5 5.10322 15.7098 3.6967 14.3033C2.29018 12.8968 1.5 10.9891 1.5 9C1.5 7.01088 2.29018 5.10322 3.6967 3.6967C5.10322 2.29018 7.01088 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9Z" fill="#586474" />
<rect x="5" y="8.30078" width="8" height="1.5" rx="0.75" fill="white" />
</svg>
<p class="wallet-details__header__left-area__wallet-feature__label">zkSync is opted-out</p>
</template>

6
web/multinode/src/app/views/wallets/WalletsPage.vue
View File

@ -14,15 +14,15 @@
</div>
<div class="wallets__right-area">
<info-block class="information">
<div class="wallets__information" slot="body">
<div slot="body" class="wallets__information">
<h3 class="wallets__information__title">Payouts with zkSync</h3>
<p class="wallets__information__description">Short description how minimal threshold system works.</p>
<v-link uri="https://forum.storj.io/t/minimum-threshold-for-storage-node-operator-payouts/11064" label="Learn more" />
<v-link uri="https://forum.storj.io/t/minimum-threshold-for-storage-node-operator-payouts/11064" label="Learn more" />
</div>
</info-block>
</div>
</div>
<div class="wallets__pagination" v-if="operatorsState.pageCount > 1">
<div v-if="operatorsState.pageCount > 1" class="wallets__pagination">
<v-pagination
:total-page-count="operatorsState.pageCount"
:preselected-current-page-number="operatorsState.currentPage"

2
web/multinode/src/app/views/wallets/WalletsRoot.vue
View File

@ -3,7 +3,7 @@
<template>
<div id="wallets-root">
<router-view/>
<router-view />
</div>
</template>