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:
parent
f87ad240ed
commit
19852a767b
@ -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'
|
||||
}
|
||||
|
@ -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",
|
||||
},
|
||||
}
|
51
web/storagenode/.stylelintrc.js
Normal file
51
web/storagenode/.stylelintrc.js
Normal 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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
@ -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"
|
||||
|
@ -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 '';
|
||||
}
|
||||
|
@ -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 '';
|
||||
}
|
||||
|
@ -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({
|
||||
|
@ -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,
|
||||
|
@ -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 '';
|
||||
}
|
||||
|
@ -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 '';
|
||||
}
|
||||
|
@ -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"
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
|
@ -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';
|
||||
|
@ -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);
|
||||
},
|
||||
},
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
309
web/storagenode/src/app/types/chart.ts
Normal file
309
web/storagenode/src/app/types/chart.ts
Normal 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
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -3,7 +3,6 @@
|
||||
|
||||
import {
|
||||
BandwidthUsed,
|
||||
Checks,
|
||||
EgressUsed,
|
||||
IngressUsed,
|
||||
Node,
|
||||
|
3
web/storagenode/src/app/types/svg.d.ts
vendored
3
web/storagenode/src/app/types/svg.d.ts
vendored
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -3,7 +3,6 @@
|
||||
|
||||
import {
|
||||
Dashboard,
|
||||
Metric,
|
||||
Satellite,
|
||||
SatelliteByDayInfo,
|
||||
SatelliteInfo,
|
||||
|
@ -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));
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -12,7 +12,6 @@ import { StorageNodeApi } from '@/storagenode/api/storagenode';
|
||||
import { StorageNodeService } from '@/storagenode/sno/service';
|
||||
import {
|
||||
Dashboard,
|
||||
Metric,
|
||||
Satellite,
|
||||
SatelliteInfo, SatelliteScores,
|
||||
Stamp,
|
||||
|
@ -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();
|
||||
|
@ -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(() => {
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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(() => {
|
||||
|
Loading…
Reference in New Issue
Block a user