web/storagenode: fix lint issues

After migrating to eslint some errors were disabled to make it easier to
migrate.

This enables all the lint rules and treats all warnings as a build
failure. Similarly, CI won't automatically try to fix mistakes.

Change-Id: Iff9c4a59401900fc395cd566dd328f3a9c688a12
This commit is contained in:
Egon Elbre 2021-08-05 14:46:48 +03:00
parent f87ad240ed
commit 19852a767b
35 changed files with 499 additions and 365 deletions

View File

@ -279,7 +279,7 @@ pipeline {
stage('web/storagenode') {
steps {
dir("web/storagenode") {
sh 'npm run lint'
sh 'npm run lint-ci'
sh script: 'npm audit', returnStatus: true
sh 'npm run test'
}

View File

@ -6,7 +6,7 @@ module.exports = {
env: {
node: true
},
'extends': [
extends: [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended',
@ -17,11 +17,19 @@ module.exports = {
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-empty-function": "off",
'@typescript-eslint/no-var-requires': 0,
"vue/require-v-for-key": "off",
"indent": ["error", 4],
"indent": ["warn", 4],
"@typescript-eslint/no-explicit-any": "off", // TODO: fix
"@typescript-eslint/no-unused-vars": [
"warn", {
"vars": "all",
"args": "all",
"argsIgnorePattern": "^_"
}],
'@typescript-eslint/no-empty-function': "off",
'@typescript-eslint/no-var-requires': "off",
},
}

View File

@ -0,0 +1,51 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
module.exports = {
"env": {
"es2020": true,
"node": true,
"jest": true
},
"plugins": [
"stylelint-scss"
],
"extends": "stylelint-config-standard",
"ignoreFiles": ["dist/**"],
"rules": {
"indentation": 4,
"string-quotes": "single",
"no-duplicate-selectors": true,
"selector-max-attribute": 1,
"selector-combinator-space-after": "always",
"selector-attribute-operator-space-before": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-brackets-space-inside": "never",
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"number-leading-zero": "always",
"function-url-quotes": "always",
"font-family-name-quotes": "always-unless-keyword",
"comment-whitespace-inside": "always",
"comment-empty-line-before": "always",
"rule-empty-line-before": "always-multi-line",
"selector-pseudo-element-colon-notation": "single",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-max-type": 3,
"font-family-no-missing-generic-family-keyword": true,
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"media-feature-range-operator-space-before": "always",
"media-feature-range-operator-space-after": "always",
"media-feature-parentheses-space-inside": "never",
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always",
"selector-pseudo-element-no-unknown": [
true,
{
"ignorePseudoElements": ["v-deep"]
}
]
}
}

View File

@ -1,47 +0,0 @@
{
"env": {
"es2020": true,
"node": true,
"jest": true
},
"plugins": [
"stylelint-scss"
],
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4,
"string-quotes": "single",
"no-duplicate-selectors": true,
"selector-max-attribute": 1,
"selector-combinator-space-after": "always",
"selector-attribute-operator-space-before": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-brackets-space-inside": "never",
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"number-leading-zero": "always",
"function-url-quotes": "always",
"font-family-name-quotes": "always-unless-keyword",
"comment-whitespace-inside": "always",
"comment-empty-line-before": "always",
"rule-empty-line-before": "always-multi-line",
"selector-pseudo-element-colon-notation": "single",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-max-type": 1,
"font-family-no-missing-generic-family-keyword": true,
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"media-feature-range-operator-space-before": "always",
"media-feature-range-operator-space-after": "always",
"media-feature-parentheses-space-inside": "never",
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always",
"selector-pseudo-element-no-unknown": [
true,
{
"ignorePseudoElements": ["v-deep"]
}
]
}
}

View File

@ -4,7 +4,8 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint && stylelint \"**/*.{vue,scss}\" --fix",
"lint": "vue-cli-service lint --max-warnings 0 && 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",
"test": "vue-cli-service test:unit"

View File

@ -20,8 +20,7 @@ import { Component } from 'vue-property-decorator';
import BaseChart from '@/app/components/BaseChart.vue';
import { ChartData } from '@/app/types/chartData';
import { Tooltip, TooltipParams } from '@/app/types/tooltip';
import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
import { ChartUtils } from '@/app/utils/chart';
import { Size } from '@/private/memory/size';
import { BandwidthUsed } from '@/storagenode/sno/sno';
@ -81,7 +80,7 @@ export default class BandwidthChart extends BaseChart {
return new ChartData(daysCount, chartBackgroundColor, chartBorderColor, chartBorderWidth, data);
}
public bandwidthTooltip(tooltipModel: any): void {
public bandwidthTooltip(tooltipModel: TooltipModel): void {
const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', 'bandwidth-tooltip',
'bandwidth-tooltip-arrow', 'bandwidth-tooltip-point', this.tooltipMarkUp(tooltipModel),
303, 125, 35, 24, 6, 4, `#1f49a3`);
@ -89,7 +88,7 @@ export default class BandwidthChart extends BaseChart {
Tooltip.custom(tooltipParams);
}
private tooltipMarkUp(tooltipModel: any): string {
private tooltipMarkUp(tooltipModel: TooltipModel): string {
if (!tooltipModel.dataPoints) {
return '';
}

View File

@ -20,8 +20,7 @@ import { Component } from 'vue-property-decorator';
import BaseChart from '@/app/components/BaseChart.vue';
import { ChartData } from '@/app/types/chartData';
import { Tooltip, TooltipParams } from '@/app/types/tooltip';
import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
import { ChartUtils } from '@/app/utils/chart';
import { Size } from '@/private/memory/size';
import { Stamp } from '@/storagenode/sno/sno';
@ -73,7 +72,7 @@ export default class DiskSpaceChart extends BaseChart {
return new ChartData(daysCount, chartBackgroundColor, chartBorderColor, chartBorderWidth, data);
}
public diskSpaceTooltip(tooltipModel): void {
public diskSpaceTooltip(tooltipModel: TooltipModel): void {
const tooltipParams = new TooltipParams(tooltipModel, 'disk-space-chart', 'disk-space-tooltip',
'disk-space-tooltip-arrow', 'disk-space-tooltip-point', this.tooltipMarkUp(tooltipModel),
125, 89, 38, 24, 6, 4, `#1f49a3`);
@ -81,7 +80,7 @@ export default class DiskSpaceChart extends BaseChart {
Tooltip.custom(tooltipParams);
}
private tooltipMarkUp(tooltipModel: any): string {
private tooltipMarkUp(tooltipModel: TooltipModel): string {
if (!tooltipModel.dataPoints) {
return '';
}

View File

@ -44,10 +44,7 @@ import { Component, Vue } from 'vue-property-decorator';
import DoughnutChart from '@/app/components/DoughnutChart.vue';
import {
DiskStatChartData,
DiskStatDataSet,
} from '@/app/types/chartData';
import {DiskStatChartData, DiskStatDataSet} from '@/app/types/chart';
import { Traffic } from '@/storagenode/sno/sno';
@Component({

View File

@ -4,19 +4,18 @@
<script lang="ts">
import * as VueChart from 'vue-chartjs';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { DiskStatChartData } from '@/app/types/chartData';
import { DiskStatChartData, RenderChart } from '@/app/types/chart';
@Component({
extends: VueChart.Doughnut,
})
export default class DoughnutChart extends Vue {
@Prop({default: () => new DiskStatChartData()})
@Prop({ default: () => new DiskStatChartData() })
private readonly chartData: DiskStatChartData;
@Watch('chartData')
private onDataChange(news: Record<string, unknown>, old: Record<string, unknown>): void {
(this as any).renderChart(this.chartData, {
private onDataChange(_news: Record<string, unknown>, _old: Record<string, unknown>): void {
(this as unknown as RenderChart).renderChart(this.chartData, {
hover: false,
tooltips: {
enabled: false,
@ -25,7 +24,7 @@ export default class DoughnutChart extends Vue {
}
public mounted(): void {
(this as any).renderChart(this.chartData, {
(this as unknown as RenderChart).renderChart(this.chartData, {
hover: false,
tooltips: {
enabled: false,

View File

@ -20,8 +20,7 @@ import { Component } from 'vue-property-decorator';
import BaseChart from '@/app/components/BaseChart.vue';
import { ChartData } from '@/app/types/chartData';
import { Tooltip, TooltipParams } from '@/app/types/tooltip';
import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
import { ChartUtils } from '@/app/utils/chart';
import { Size } from '@/private/memory/size';
import { EgressUsed } from '@/storagenode/sno/sno';
@ -77,7 +76,7 @@ export default class EgressChart extends BaseChart {
return new ChartData(daysCount, chartBackgroundColor, chartBorderColor, chartBorderWidth, data);
}
public egressTooltip(tooltipModel): void {
public egressTooltip(tooltipModel: TooltipModel): void {
const tooltipParams = new TooltipParams(tooltipModel, 'egress-chart', 'egress-tooltip',
'egress-tooltip-arrow', 'egress-tooltip-point', this.tooltipMarkUp(tooltipModel),
255, 94, 35, 24, 6, 4, `#48a77f`);
@ -85,7 +84,7 @@ export default class EgressChart extends BaseChart {
Tooltip.custom(tooltipParams);
}
private tooltipMarkUp(tooltipModel: any): string {
private tooltipMarkUp(tooltipModel: TooltipModel): string {
if (!tooltipModel.dataPoints) {
return '';
}

View File

@ -20,8 +20,7 @@ import { Component } from 'vue-property-decorator';
import BaseChart from '@/app/components/BaseChart.vue';
import { ChartData } from '@/app/types/chartData';
import { Tooltip, TooltipParams } from '@/app/types/tooltip';
import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
import { ChartUtils } from '@/app/utils/chart';
import { Size } from '@/private/memory/size';
import { IngressUsed } from '@/storagenode/sno/sno';
@ -75,7 +74,7 @@ export default class IngressChart extends BaseChart {
return new ChartData(daysCount, chartBackgroundColor, chartBorderColor, chartBorderWidth, data);
}
public ingressTooltip(tooltipModel): void {
public ingressTooltip(tooltipModel: TooltipModel): void {
const tooltipParams = new TooltipParams(tooltipModel, 'ingress-chart', 'ingress-tooltip',
'ingress-tooltip-arrow', 'ingress-tooltip-point', this.tooltipMarkUp(tooltipModel),
205, 94, 35, 24, 6, 4, `#e1a128`);
@ -83,7 +82,7 @@ export default class IngressChart extends BaseChart {
Tooltip.custom(tooltipParams);
}
private tooltipMarkUp(tooltipModel: any): string {
private tooltipMarkUp(tooltipModel: TooltipModel): string {
if (!tooltipModel.dataPoints) {
return '';
}

View File

@ -27,7 +27,7 @@
alt="Disqualified image"
/>
<p class="info-area__disqualified-info__info">
Your node has been disqualified on<span v-for="disqualified in disqualifiedSatellites"><b> {{ disqualified.id }}</b></span>. If you have any questions regarding this please check our Node Operators
Your node has been disqualified on<span v-for="disqualified in disqualifiedSatellites" :key="disqualified.id"><b> {{ disqualified.id }}</b></span>. If you have any questions regarding this please check our Node Operators
<a
class="info-area__disqualified-info__info__link"
href="https://forum.storj.io/c/sno-category"
@ -61,7 +61,7 @@
alt="Suspended image"
/>
<p class="info-area__suspended-info__info">
Your node has been suspended on<span v-for="suspended in suspendedSatellites"><b> {{ suspended.id }}</b></span>. If you have any questions regarding this please check our Node Operators
Your node has been suspended on<span v-for="suspended in suspendedSatellites" :key="suspended.id"><b> {{ suspended.id }}</b></span>. If you have any questions regarding this please check our Node Operators
<a
class="info-area__disqualified-info__info__link"
href="https://forum.storj.io/c/sno-category"

View File

@ -5,7 +5,7 @@
import * as VueChart from 'vue-chartjs';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { ChartData } from '@/app/types/chartData';
import { ChartData, RenderChart } from '@/app/types/chart';
class DayShowingConditions {
public readonly day: string;
@ -33,26 +33,26 @@ class DayShowingConditions {
extends: VueChart.Line,
})
export default class VChart extends Vue {
@Prop({default: '$'})
@Prop({ default: '$' })
private readonly currency: string;
@Prop({default: () => { console.error('Tooltip constructor is undefined'); } })
@Prop({ default: () => { console.error('Tooltip constructor is undefined'); } })
private tooltipConstructor: (tooltipModel) => void;
@Prop({default: {}})
@Prop({ default: {} })
private readonly chartData: ChartData;
@Watch('chartData')
private onDataChange(news: Record<string, unknown>, old: Record<string, unknown>) {
private onDataChange(_news: Record<string, unknown>, _old: Record<string, unknown>) {
/**
* renderChart method is inherited from BaseChart which is extended by VChart.Line
*/
(this as any).renderChart(this.chartData, this.chartOptions);
(this as unknown as RenderChart).renderChart(this.chartData, this.chartOptions);
}
public mounted(): void {
/**
* renderChart method is inherited from BaseChart which is extended by VChart.Line
*/
(this as any).renderChart(this.chartData, this.chartOptions);
(this as unknown as RenderChart).renderChart(this.chartData, this.chartOptions);
}
public get chartOptions(): Record<string, unknown> {
@ -105,9 +105,9 @@ export default class VChart extends Vue {
tooltips: {
enabled: false,
custom: ((tooltipModel) => {
custom: (tooltipModel) => {
this.tooltipConstructor(tooltipModel);
}),
},
labels: {
enabled: true,
@ -116,7 +116,7 @@ export default class VChart extends Vue {
};
}
private filterDaysDisplayed(day: string, dayIndex: string, labelArray: string[]): string | undefined {
private filterDaysDisplayed(day: string, _dayIndex: string, labelArray: string[]): string | undefined {
const eighthDayOfTheMonth = 8;
const isBeforeEighthDayOfTheMonth = labelArray.length <= eighthDayOfTheMonth;
const dayShowingConditions = new DayShowingConditions(day, labelArray);

View File

@ -68,7 +68,7 @@ export default class VPagination extends Vue {
/**
* Component initialization.
*/
public async mounted() {
public async mounted(): Promise<void> {
await this.populatePagesArray();
}
@ -112,7 +112,7 @@ export default class VPagination extends Vue {
* Method after total page count change.
*/
@Watch('totalPageCount')
public onPageCountChange() {
public onPageCountChange(): void {
this.resetPageIndex();
}

View File

@ -48,7 +48,7 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component } from 'vue-property-decorator';
import BaseHeldHistoryTable from '@/app/components/payments/BaseHeldHistoryTable.vue';
import HeldHistoryMonthlyBreakdownTableItemSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue';

View File

@ -39,57 +39,66 @@ const {
TOGGLE_PAYOUT_CALENDAR,
} = APPSTATE_MUTATIONS;
class AppState {
public constructor (
public isSatelliteSelectionShown = false,
public isBandwidthChartShown = true,
public isEgressChartShown = false,
public isIngressChartShown = false,
public isPayoutCalendarShown = false,
public isDarkMode = false,
public isNoPayoutData = false,
public isLoading = true,
public isPayoutHistoryCalendarShown = false,
) {}
}
interface AppContext {
state: AppState;
commit: any;
}
export const appStateModule = {
state: {
isSatelliteSelectionShown: false,
isBandwidthChartShown: true,
isEgressChartShown: false,
isIngressChartShown: false,
isPayoutCalendarShown: false,
isDarkMode: false,
isNoPayoutData: false,
isLoading: true,
isPayoutHistoryCalendarShown: false,
},
state: new AppState(),
mutations: {
[TOGGLE_SATELLITE_SELECTION](state: any): void {
[TOGGLE_SATELLITE_SELECTION](state: AppState): void {
state.isSatelliteSelectionShown = !state.isSatelliteSelectionShown;
},
[TOGGLE_BANDWIDTH_CHART](state: any): void {
[TOGGLE_BANDWIDTH_CHART](state: AppState): void {
state.isBandwidthChartShown = !state.isBandwidthChartShown;
},
[TOGGLE_EGRESS_CHART](state: any): void {
[TOGGLE_EGRESS_CHART](state: AppState): void {
state.isEgressChartShown = !state.isEgressChartShown;
},
[TOGGLE_INGRESS_CHART](state: any): void {
[TOGGLE_INGRESS_CHART](state: AppState): void {
state.isIngressChartShown = !state.isIngressChartShown;
},
[TOGGLE_PAYOUT_CALENDAR](state: any, value): void {
[TOGGLE_PAYOUT_CALENDAR](state: AppState, value: boolean): void {
state.isPayoutCalendarShown = value;
},
[CLOSE_ADDITIONAL_CHARTS](state: any): void {
[CLOSE_ADDITIONAL_CHARTS](state: AppState): void {
state.isBandwidthChartShown = true;
state.isIngressChartShown = false;
state.isEgressChartShown = false;
},
[APPSTATE_MUTATIONS.SET_DARK](state: any, value): void {
[APPSTATE_MUTATIONS.SET_DARK](state: AppState, value: boolean): void {
state.isDarkMode = value;
},
[APPSTATE_MUTATIONS.SET_NO_PAYOUT_INFO](state: any, value): void {
[APPSTATE_MUTATIONS.SET_NO_PAYOUT_INFO](state: AppState, value: boolean): void {
state.isNoPayoutData = value;
},
[APPSTATE_MUTATIONS.SET_LOADING_STATE](state: any, value): void {
[APPSTATE_MUTATIONS.SET_LOADING_STATE](state: AppState, value: boolean): void {
state.isLoading = value;
},
[CLOSE_ALL_POPUPS](state: any): void {
[CLOSE_ALL_POPUPS](state: AppState): void {
state.isSatelliteSelectionShown = false;
},
[APPSTATE_MUTATIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR](state: any, value): void {
[APPSTATE_MUTATIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR](state: AppState, value: boolean): void {
state.isPayoutHistoryCalendarShown = value;
},
},
actions: {
[APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION]: function ({commit, state}: any): void {
[APPSTATE_ACTIONS.TOGGLE_SATELLITE_SELECTION]: function ({commit, state}: AppContext): void {
if (!state.isSatelliteSelectionShown) {
commit(APPSTATE_MUTATIONS.TOGGLE_SATELLITE_SELECTION);
@ -98,10 +107,10 @@ export const appStateModule = {
commit(APPSTATE_MUTATIONS.CLOSE_ALL_POPUPS);
},
[APPSTATE_ACTIONS.TOGGLE_PAYOUT_CALENDAR]: function ({commit, state}: any, value: boolean): void {
[APPSTATE_ACTIONS.TOGGLE_PAYOUT_CALENDAR]: function ({commit}: AppContext, value: boolean): void {
commit(APPSTATE_MUTATIONS.TOGGLE_PAYOUT_CALENDAR, value);
},
[APPSTATE_ACTIONS.TOGGLE_EGRESS_CHART]: function ({commit, state}: any): void {
[APPSTATE_ACTIONS.TOGGLE_EGRESS_CHART]: function ({commit, state}: AppContext): void {
if (!state.isBandwidthChartShown) {
commit(APPSTATE_MUTATIONS.TOGGLE_EGRESS_CHART);
commit(APPSTATE_MUTATIONS.TOGGLE_INGRESS_CHART);
@ -112,7 +121,7 @@ export const appStateModule = {
commit(APPSTATE_MUTATIONS.TOGGLE_BANDWIDTH_CHART);
commit(APPSTATE_MUTATIONS.TOGGLE_EGRESS_CHART);
},
[APPSTATE_ACTIONS.TOGGLE_INGRESS_CHART]: function ({commit, state}: any): void {
[APPSTATE_ACTIONS.TOGGLE_INGRESS_CHART]: function ({commit, state}: AppContext): void {
if (!state.isBandwidthChartShown) {
commit(APPSTATE_MUTATIONS.TOGGLE_INGRESS_CHART);
commit(APPSTATE_MUTATIONS.TOGGLE_EGRESS_CHART);
@ -123,23 +132,23 @@ export const appStateModule = {
commit(APPSTATE_MUTATIONS.TOGGLE_BANDWIDTH_CHART);
commit(APPSTATE_MUTATIONS.TOGGLE_INGRESS_CHART);
},
[APPSTATE_ACTIONS.SET_DARK_MODE]: function ({commit}: any, value: boolean): void {
[APPSTATE_ACTIONS.SET_DARK_MODE]: function ({commit}: AppContext, value: boolean): void {
commit(APPSTATE_MUTATIONS.SET_DARK, value);
},
[APPSTATE_ACTIONS.SET_NO_PAYOUT_DATA]: function ({commit}: any, value: boolean): void {
[APPSTATE_ACTIONS.SET_NO_PAYOUT_DATA]: function ({commit}: AppContext, value: boolean): void {
commit(APPSTATE_MUTATIONS.SET_NO_PAYOUT_INFO, value);
},
[APPSTATE_ACTIONS.SET_LOADING]: function ({commit}: any, value: boolean): void {
[APPSTATE_ACTIONS.SET_LOADING]: function ({commit}: AppContext, value: boolean): void {
value ? commit(APPSTATE_MUTATIONS.SET_LOADING_STATE, value) :
setTimeout(() => { commit(APPSTATE_MUTATIONS.SET_LOADING_STATE, value); }, 1000);
},
[APPSTATE_ACTIONS.CLOSE_ADDITIONAL_CHARTS]: function ({commit}: any): void {
[APPSTATE_ACTIONS.CLOSE_ADDITIONAL_CHARTS]: function ({commit}: AppContext): void {
commit(APPSTATE_MUTATIONS.CLOSE_ADDITIONAL_CHARTS);
},
[APPSTATE_ACTIONS.CLOSE_ALL_POPUPS]: function ({commit}: any): void {
[APPSTATE_ACTIONS.CLOSE_ALL_POPUPS]: function ({commit}: AppContext): void {
commit(APPSTATE_MUTATIONS.CLOSE_ALL_POPUPS);
},
[APPSTATE_ACTIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR]: function ({commit, state}: any, value: boolean): void {
[APPSTATE_ACTIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR]: function ({commit}: AppContext, value: boolean): void {
commit(APPSTATE_MUTATIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR, value);
},
},

View File

@ -39,11 +39,16 @@ const {
const STATUS_TRESHHOLD_MINUTES = 120;
interface StorageNodeContext {
state: StorageNodeState;
commit: any;
}
export function newNodeModule(service: StorageNodeService): StoreModule<StorageNodeState> {
return {
state: new StorageNodeState(),
mutations: {
[POPULATE_STORE](state: any, nodeInfo: Dashboard): void {
[POPULATE_STORE](state: StorageNodeState, nodeInfo: Dashboard): void {
const minutesPassed = Duration.difference(new Date(), new Date(nodeInfo.lastPinged)) / millisecondsInSecond / secondsInMinute;
const status = minutesPassed < STATUS_TRESHHOLD_MINUTES ? StatusOnline : StatusOffline;
state.info = new Node(
@ -68,7 +73,7 @@ export function newNodeModule(service: StorageNodeService): StoreModule<StorageN
state.satellites = nodeInfo.satellites;
},
[SELECT_SATELLITE](state: any, satelliteInfo: Satellite): void {
[SELECT_SATELLITE](state: StorageNodeState, satelliteInfo: Satellite): void {
const selectedSatellite = state.satellites.find(satellite => satelliteInfo.id === satellite.id);
if (!selectedSatellite) {
@ -85,7 +90,7 @@ export function newNodeModule(service: StorageNodeService): StoreModule<StorageN
state.audits = satelliteInfo.audits;
},
[SELECT_ALL_SATELLITES](state: any, satelliteInfo: Satellites): void {
[SELECT_ALL_SATELLITES](state: StorageNodeState, satelliteInfo: Satellites): void {
state.selectedSatellite = new SatelliteInfo(
'',
'',
@ -95,7 +100,7 @@ export function newNodeModule(service: StorageNodeService): StoreModule<StorageN
);
state.satellitesScores = satelliteInfo.satellitesScores;
},
[SET_DAILY_DATA](state: any, satelliteInfo: Satellite): void {
[SET_DAILY_DATA](state: StorageNodeState, satelliteInfo: Satellite): void {
state.bandwidthChartData = satelliteInfo.bandwidthDaily;
state.egressChartData = satelliteInfo.egressDaily;
state.ingressChartData = satelliteInfo.ingressDaily;
@ -107,12 +112,12 @@ export function newNodeModule(service: StorageNodeService): StoreModule<StorageN
},
},
actions: {
[NODE_ACTIONS.GET_NODE_INFO]: async function ({commit}: any): Promise<void> {
[NODE_ACTIONS.GET_NODE_INFO]: async function ({commit}: StorageNodeContext): Promise<void> {
const dashboard = await service.dashboard();
commit(NODE_MUTATIONS.POPULATE_STORE, dashboard);
},
[NODE_ACTIONS.SELECT_SATELLITE]: async function ({commit}, id?: string): Promise<void> {
[NODE_ACTIONS.SELECT_SATELLITE]: async function ({commit}: StorageNodeContext, id?: string): Promise<void> {
let response: Satellite | Satellites;
if (id) {
response = await service.satellite(id);

View File

@ -1,6 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { StoreModule } from '@/app/store';
import { NotificationsState, UINotification } from '@/app/types/notifications';
import { NotificationsService } from '@/storagenode/notifications/service';
@ -17,12 +18,17 @@ export const NOTIFICATIONS_ACTIONS = {
READ_ALL: 'readAll',
};
interface NotificationsContext {
state: NotificationsState;
commit: any;
}
/**
* creates notifications module with all dependencies
*
* @param service - payments service
*/
export function newNotificationsModule(service: NotificationsService) {
export function newNotificationsModule(service: NotificationsService): StoreModule<NotificationsState> {
return {
state: new NotificationsState(),
mutations: {
@ -54,7 +60,7 @@ export function newNotificationsModule(service: NotificationsService) {
},
},
actions: {
[NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS]: async function ({commit}: any, pageIndex: number): Promise<void> {
[NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS]: async function ({commit}: NotificationsContext, pageIndex: number): Promise<void> {
const notificationsResponse = await service.notifications(pageIndex);
const notifications = notificationsResponse.page.notifications.map(notification => new UINotification(notification));
@ -67,12 +73,12 @@ export function newNotificationsModule(service: NotificationsService) {
commit(NOTIFICATIONS_MUTATIONS.SET_LATEST, notificationState);
}
},
[NOTIFICATIONS_ACTIONS.MARK_AS_READ]: async function ({commit}: any, id: string): Promise<void> {
[NOTIFICATIONS_ACTIONS.MARK_AS_READ]: async function ({commit}: NotificationsContext, id: string): Promise<void> {
await service.readSingeNotification(id);
commit(NOTIFICATIONS_MUTATIONS.MARK_AS_READ, id);
},
[NOTIFICATIONS_ACTIONS.READ_ALL]: async function ({commit}: any): Promise<void> {
[NOTIFICATIONS_ACTIONS.READ_ALL]: async function ({commit}: NotificationsContext): Promise<void> {
await service.readAllNotifications();
commit(NOTIFICATIONS_MUTATIONS.READ_ALL);

View File

@ -0,0 +1,309 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* ChartData class holds info for ChartData entity.
*/
export class ChartData {
public labels: string[];
public datasets: DataSets[] = [];
public constructor(labels: string[], backgroundColor: string, borderColor: string, borderWidth: number, data: number[]) {
this.labels = labels;
for (let i = 0; i < this.labels.length; i++) {
this.datasets[i] = new DataSets(backgroundColor, borderColor, borderWidth, data);
}
}
}
/**
* DiskStatChartData class holds info for Disk Stat Chart.
*/
export class DiskStatChartData {
public constructor(
public datasets: DiskStatDataSet[] = [new DiskStatDataSet()],
) {}
}
/**
* DiskStatDataSet describes all required data for disk stat chart dataset.
*/
export class DiskStatDataSet {
public constructor(
public label: string = '',
public backgroundColor: string[] = ['#D6D6D6', '#0059D0', '#8FA7C6'],
public data: number[] = [],
) {}
}
/**
* DataSets class holds info for chart's DataSets entity.
*/
class DataSets {
public backgroundColor: string;
public borderColor: string;
public borderWidth: number;
public data: number[];
public constructor(backgroundColor: string, borderColor: string, borderWidth: number, data: number[]) {
this.backgroundColor = backgroundColor;
this.borderColor = borderColor;
this.borderWidth = borderWidth;
this.data = data;
}
}
/**
* StylingConstants holds tooltip styling constants
*/
class StylingConstants {
public static tooltipOpacity = '1';
public static tooltipPosition = 'absolute';
public static pointWidth = '10px';
public static pointHeight = '10px';
public static borderRadius = '20px';
}
/**
* Styling holds tooltip's styling configuration
*/
class Styling {
public constructor(
public tooltipModel: TooltipModel,
public element: HTMLElement,
public topPosition: number,
public leftPosition: number,
public chartPosition: ClientRect,
) {}
}
/**
* TooltipParams holds tooltip's configuration
*/
export class TooltipParams {
public constructor(
public tooltipModel: TooltipModel,
public chartId: string,
public tooltipId: string,
public arrowId: string,
public pointId: string,
public markUp: string,
public tooltipTop: number,
public tooltipLeft: number,
public arrowTop: number,
public arrowLeft: number,
public pointTop: number,
public pointLeft: number,
public color: string,
) {}
}
/**
* Color is a color definition.
*/
export type Color = string
/**
* TooltipItem contains datapoint information.
*/
export interface TooltipItem {
// Label for the tooltip
label: string,
// Value for the tooltip
value: string,
// X Value of the tooltip
// (deprecated) use `value` or `label` instead
xLabel: number | string,
// Y value of the tooltip
// (deprecated) use `value` or `label` instead
yLabel: number | string,
// Index of the dataset the item comes from
datasetIndex: number,
// Index of this data item in the dataset
index: number,
// X position of matching point
x: number,
// Y position of matching point
y: number
}
/**
* TooltipModel contains parameters that can be used to render the tooltip.
*/
export interface TooltipModel {
// The items that we are rendering in the tooltip. See Tooltip Item Interface section
dataPoints: TooltipItem[],
// Positioning
xPadding: number,
yPadding: number,
xAlign: string,
yAlign: string,
// X and Y properties are the top left of the tooltip
x: number,
y: number,
width: number,
height: number,
// Where the tooltip points to
caretX: number,
caretY: number,
// Body
// The body lines that need to be rendered
// Each object contains 3 parameters
// before: string[] // lines of text before the line with the color square
// lines: string[], // lines of text to render as the main item with color square
// after: string[], // lines of text to render after the main lines
body: {before: string[]; lines: string[], after: string[]}[],
// lines of text that appear after the title but before the body
beforeBody: string[],
// line of text that appear after the body and before the footer
afterBody: string[],
bodyFontColor: Color,
_bodyFontFamily: string,
_bodyFontStyle: string,
_bodyAlign: string,
bodyFontSize: number,
bodySpacing: number,
// Title
// lines of text that form the title
title: string[],
titleFontColor: Color,
_titleFontFamily: string,
_titleFontStyle: string,
titleFontSize: number,
_titleAlign: string,
titleSpacing: number,
titleMarginBottom: number,
// Footer
// lines of text that form the footer
footer: string[],
footerFontColor: Color,
_footerFontFamily: string,
_footerFontStyle: string,
footerFontSize: number,
_footerAlign: string,
footerSpacing: number,
footerMarginTop: number,
// Appearance
caretSize: number,
caretPadding: number,
cornerRadius: number,
backgroundColor: Color,
// colors to render for each item in body[]. This is the color of the squares in the tooltip
labelColors: Color[],
labelTextColors: Color[],
// 0 opacity is a hidden tooltip
opacity: number,
legendColorBackground: Color,
displayColors: boolean,
borderColor: Color,
borderWidth: number
}
/**
* Tooltip provides custom tooltip rendering
*/
export class Tooltip {
public static custom(params: TooltipParams): void {
const chart = document.getElementById(params.chartId);
if (!chart) {
return;
}
const tooltip: HTMLElement = Tooltip.createTooltip(params.tooltipId);
const point: HTMLElement = Tooltip.createPoint(params.pointId);
if (!params.tooltipModel.opacity) {
Tooltip.remove(tooltip, point);
return;
}
if (params.tooltipModel.body) {
Tooltip.render(tooltip, params.markUp);
}
const position = chart.getBoundingClientRect();
const tooltipStyling = new Styling(params.tooltipModel, tooltip, params.tooltipTop, params.tooltipLeft, position);
Tooltip.elemStyling(tooltipStyling);
const pointStyling = new Styling(params.tooltipModel, point, params.pointTop, params.pointLeft, position);
Tooltip.elemStyling(pointStyling);
Tooltip.pointStyling(point, params.color);
}
private static createTooltip(id: string): HTMLElement {
let tooltipEl = document.getElementById(id);
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = id;
document.body.appendChild(tooltipEl);
}
return tooltipEl;
}
private static createPoint(id: string): HTMLElement {
let tooltipPoint = document.getElementById(id);
if (!tooltipPoint) {
tooltipPoint = document.createElement('div');
tooltipPoint.id = id;
document.body.appendChild(tooltipPoint);
}
return tooltipPoint;
}
private static remove(tooltipEl: HTMLElement, tooltipPoint: HTMLElement) {
document.body.removeChild(tooltipEl);
document.body.removeChild(tooltipPoint);
}
private static render(tooltip: HTMLElement, markUp: string) {
tooltip.innerHTML = markUp;
}
private static elemStyling(elemStyling: Styling) {
elemStyling.element.style.opacity = StylingConstants.tooltipOpacity;
elemStyling.element.style.position = StylingConstants.tooltipPosition;
elemStyling.element.style.left = `${elemStyling.chartPosition.left + elemStyling.tooltipModel.caretX - elemStyling.leftPosition}px`;
elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.pageYOffset + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`;
}
private static pointStyling(point: HTMLElement, color: string) {
point.style.width = StylingConstants.pointWidth;
point.style.height = StylingConstants.pointHeight;
point.style.backgroundColor = color;
point.style.borderRadius = StylingConstants.borderRadius;
}
}
/**
* RenderChart contains definition for renderChart, that can be used to cast
* a derived chart type, with `(this as unknown as RenderChart).renderChart`
*/
export interface RenderChart {
renderChart<A, B>(A, B): void
}

View File

@ -1,55 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* ChartData class holds info for ChartData entity.
*/
export class ChartData {
public labels: string[];
public datasets: DataSets[] = [];
public constructor(labels: string[], backgroundColor: string, borderColor: string, borderWidth: number, data: number[]) {
this.labels = labels;
for (let i = 0; i < this.labels.length; i++) {
this.datasets[i] = new DataSets(backgroundColor, borderColor, borderWidth, data);
}
}
}
/**
* DiskStatChartData class holds info for Disk Stat Chart.
*/
export class DiskStatChartData {
public constructor(
public datasets: DiskStatDataSet[] = [new DiskStatDataSet()],
) {}
}
/**
* DiskStatDataSet describes all required data for disk stat chart dataset.
*/
export class DiskStatDataSet {
public constructor(
public label: string = '',
public backgroundColor: string[] = ['#D6D6D6', '#0059D0', '#8FA7C6'],
public data: number[] = [],
) {}
}
/**
* DataSets class holds info for chart's DataSets entity.
*/
class DataSets {
public backgroundColor: string;
public borderColor: string;
public borderWidth: number;
public data: number[];
public constructor(backgroundColor: string, borderColor: string, borderWidth: number, data: number[]) {
this.backgroundColor = backgroundColor;
this.borderColor = borderColor;
this.borderWidth = borderWidth;
this.data = data;
}
}

View File

@ -4,7 +4,7 @@
/**
* Describes callback for pagination page click.
*/
export type OnPageClickCallback = (index: number) => Promise<any>;
export type OnPageClickCallback = (index: number) => Promise<void>;
export type CheckSelected = (index: number) => boolean;
@ -20,7 +20,7 @@ export class Page {
this.onClick = callback;
}
public get index() {
public get index(): number {
return this.pageIndex;
}

View File

@ -3,7 +3,6 @@
import {
BandwidthUsed,
Checks,
EgressUsed,
IngressUsed,
Node,

View File

@ -2,6 +2,7 @@
// See LICENSE for copying information.
declare module '*.svg' {
const content: any;
import Vue, {VueConstructor} from 'vue';
const content: VueConstructor<Vue>;
export default content;
}

View File

@ -1,143 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* StylingConstants holds tooltip styling constants
*/
class StylingConstants {
public static tooltipOpacity = '1';
public static tooltipPosition = 'absolute';
public static pointWidth = '10px';
public static pointHeight = '10px';
public static borderRadius = '20px';
}
/**
* Styling holds tooltip's styling configuration
*/
class Styling {
public constructor(
public tooltipModel: any,
public element: HTMLElement,
public topPosition: number,
public leftPosition: number,
public chartPosition: ClientRect,
) {}
}
/**
* TooltipParams holds tooltip's configuration
*/
export class TooltipParams {
public constructor(
public tooltipModel: any,
public chartId: string,
public tooltipId: string,
public arrowId: string,
public pointId: string,
public markUp: string,
public tooltipTop: number,
public tooltipLeft: number,
public arrowTop: number,
public arrowLeft: number,
public pointTop: number,
public pointLeft: number,
public color: string,
) {}
}
/**
* Tooltip provides custom tooltip rendering
*/
export class Tooltip {
public static custom(params: TooltipParams): void {
const chart = document.getElementById(params.chartId);
if (!chart) {
return;
}
const tooltip: HTMLElement = Tooltip.createTooltip(params.tooltipId);
const arrow: HTMLElement = Tooltip.createArrow(params.arrowId);
const point: HTMLElement = Tooltip.createPoint(params.pointId);
if (!params.tooltipModel.opacity) {
Tooltip.remove(tooltip, arrow, point);
return;
}
if (params.tooltipModel.body) {
Tooltip.render(tooltip, params.markUp);
}
const position = chart.getBoundingClientRect();
const tooltipStyling = new Styling(params.tooltipModel, tooltip, params.tooltipTop, params.tooltipLeft, position);
Tooltip.elemStyling(tooltipStyling);
const arrowStyling = new Styling(params.tooltipModel, arrow, params.arrowTop, params.arrowLeft, position);
Tooltip.elemStyling(arrowStyling);
const pointStyling = new Styling(params.tooltipModel, point, params.pointTop, params.pointLeft, position);
Tooltip.elemStyling(pointStyling);
Tooltip.pointStyling(point, params.color);
}
private static createTooltip(id: string): HTMLElement {
let tooltipEl = document.getElementById(id);
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = id;
document.body.appendChild(tooltipEl);
}
return tooltipEl;
}
private static createArrow(id: string): HTMLElement {
let tooltipArrow = document.getElementById(id);
if (!tooltipArrow) {
tooltipArrow = document.createElement('div');
tooltipArrow.id = id;
document.body.appendChild(tooltipArrow);
}
return tooltipArrow;
}
private static createPoint(id: string): HTMLElement {
let tooltipPoint = document.getElementById(id);
if (!tooltipPoint) {
tooltipPoint = document.createElement('div');
tooltipPoint.id = id;
document.body.appendChild(tooltipPoint);
}
return tooltipPoint;
}
private static remove(tooltipEl: HTMLElement, tooltipArrow: HTMLElement, tooltipPoint: HTMLElement) {
document.body.removeChild(tooltipEl);
document.body.removeChild(tooltipArrow);
document.body.removeChild(tooltipPoint);
}
private static render(tooltip: HTMLElement, markUp: string) {
tooltip.innerHTML = markUp;
}
private static elemStyling(elemStyling: Styling) {
elemStyling.element.style.opacity = StylingConstants.tooltipOpacity;
elemStyling.element.style.position = StylingConstants.tooltipPosition;
elemStyling.element.style.left = `${elemStyling.chartPosition.left + elemStyling.tooltipModel.caretX - elemStyling.leftPosition}px`;
elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.pageYOffset + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`;
}
private static pointStyling(point: HTMLElement, color: string) {
point.style.width = StylingConstants.pointWidth;
point.style.height = StylingConstants.pointHeight;
point.style.backgroundColor = color;
point.style.borderRadius = StylingConstants.borderRadius;
}
}

View File

@ -45,4 +45,4 @@ export type LoadScriptOnSuccessCallback = () => void;
* LoadScriptOnErrorCallback describes signature of onError callback.
* @param err - error occurred during script loading.
*/
export type LoadScriptOnErrorCallback = (err: Error) => any;
export type LoadScriptOnErrorCallback = (err: Error) => void;

View File

@ -64,7 +64,6 @@ import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
import { NODE_ACTIONS } from '@/app/store/modules/node';
import { NOTIFICATIONS_ACTIONS } from '@/app/store/modules/notifications';
import { PAYOUT_ACTIONS } from '@/app/store/modules/payout';
import { monthNames } from '@/app/types/payout';
import { PayoutPeriod, SatelliteHeldHistory, TotalPayments } from '@/storagenode/payouts/payouts';
@Component ({
@ -85,7 +84,7 @@ export default class PayoutArea extends Vue {
* Lifecycle hook after initial render.
* Fetches payout information.
*/
public async mounted(): Promise<any> {
public async mounted(): Promise<void> {
await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, true);
try {

View File

@ -105,7 +105,7 @@ export class PayoutHttpApi implements PayoutApi {
* @returns payout information
* @throws Error
*/
public async getPayoutHistory(period): Promise<SatellitePayoutForPeriod[]> {
public async getPayoutHistory(period: string): Promise<SatellitePayoutForPeriod[]> {
const path = `${this.ROOT_PATH}/payout-history/${period}`;
const response = await this.client.get(path);

View File

@ -3,7 +3,6 @@
import {
Dashboard,
Metric,
Satellite,
SatelliteByDayInfo,
SatelliteInfo,

View File

@ -360,9 +360,10 @@ export class SatelliteByDayInfo {
public egressDaily: EgressUsed[];
public ingressDaily: IngressUsed[];
public constructor(json) {
const storageDailyJson = json.storageDaily || [];
const bandwidthDailyJson = json.bandwidthDaily || [];
public constructor(json: unknown) {
const data = json as any;
const storageDailyJson = data.storageDaily || [];
const bandwidthDailyJson = data.bandwidthDaily || [];
this.storageDaily = storageDailyJson.map((stamp: any) => {
return new Stamp(stamp.atRestTotal, new Date(stamp.intervalStart));

View File

@ -47,27 +47,27 @@ export class HttpClient {
* Performs PUT http request with JSON body.
* @param path
* @param body serialized JSON
* @param auth indicates if authentication is needed
* @param _auth indicates if authentication is needed
*/
public async put(path: string, body: string | null, auth = true): Promise<Response> {
public async put(path: string, body: string | null, _auth = true): Promise<Response> {
return this.sendJSON('PUT', path, body);
}
/**
* Performs GET http request.
* @param path
* @param auth indicates if authentication is needed
* @param _auth indicates if authentication is needed
*/
public async get(path: string, auth = true): Promise<Response> {
public async get(path: string, _auth = true): Promise<Response> {
return this.sendJSON('GET', path, null);
}
/**
* Performs DELETE http request.
* @param path
* @param auth indicates if authentication is needed
* @param _auth indicates if authentication is needed
*/
public async delete(path: string, auth = true): Promise<Response> {
public async delete(path: string, _auth = true): Promise<Response> {
return this.sendJSON('DELETE', path, null);
}
}

View File

@ -12,7 +12,6 @@ import { StorageNodeApi } from '@/storagenode/api/storagenode';
import { StorageNodeService } from '@/storagenode/sno/service';
import {
Dashboard,
Metric,
Satellite,
SatelliteInfo, SatelliteScores,
Stamp,

View File

@ -12,7 +12,7 @@ import { StorageNodeApi } from '@/storagenode/api/storagenode';
import { Paystub, TotalPayments } from '@/storagenode/payouts/payouts';
import { PayoutService } from '@/storagenode/payouts/service';
import { StorageNodeService } from '@/storagenode/sno/service';
import { Metric, Satellite, SatelliteScores, Stamp } from '@/storagenode/sno/sno';
import { Satellite, SatelliteScores, Stamp } from '@/storagenode/sno/sno';
import { createLocalVue, shallowMount } from '@vue/test-utils';
const localVue = createLocalVue();

View File

@ -29,9 +29,8 @@ const nodeModule = newNodeModule(nodeService);
Vue.use(Vuex);
const store = new Vuex.Store({ modules: { node: nodeModule } });
const state = store.state as any;
const store = new Vuex.Store<{node: typeof nodeModule.state}>({ modules: { node: nodeModule } });
const state = store.state;
describe('mutations', () => {
beforeEach(() => {

View File

@ -24,9 +24,8 @@ const notificationsModule = newNotificationsModule(notificationsService);
Vue.use(Vuex);
const store = new Vuex.Store({ modules: { notificationsModule } });
const state = store.state as any;
const store = new Vuex.Store<{notificationsModule: typeof notificationsModule.state}>({ modules: { notificationsModule } });
const state = store.state;
let notifications;

View File

@ -34,9 +34,11 @@ const nodeModule = newNodeModule(nodeService);
Vue.use(Vuex);
const store = new Vuex.Store({ modules: { payoutModule, node: nodeModule } });
const state = store.state as any;
const store = new Vuex.Store<{
payoutModule: typeof payoutModule.state,
node: typeof nodeModule.state,
}>({ modules: { payoutModule, node: nodeModule } });
const state = store.state;
describe('mutations', (): void => {
beforeEach(() => {