web/multinode: 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: I6d5ef39d476a38dd9a6ab98e3fb94da4c3ab2e57

Jenkinsfile.public

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

web/multinode/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     env: {
         node: true
     },
-    'extends': [
+    extends: [
         'plugin:vue/essential',
         'eslint:recommended',
         '@vue/typescript/recommended',
@@ -17,10 +17,17 @@ 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,
 
         "indent": ["error", 4],
+
+        "@typescript-eslint/no-unused-vars": [
+            "error", {
+                "vars": "all",
+                "args": "all",
+                "argsIgnorePattern": "^_"
+            }],
+
+        '@typescript-eslint/no-empty-function': "off",
+        '@typescript-eslint/no-var-requires': "off",
     },
 }

web/multinode/.stylelintrc.js

@@ -0,0 +1,45 @@
+// 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"
+    }
+}

web/multinode/.stylelintrc.json

@@ -1,41 +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": 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"
-  }
-}

web/multinode/package.json

@@ -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"

web/multinode/src/app/components/bandwidth/BandwidthChart.vue

@@ -20,7 +20,7 @@ import { Component } from 'vue-property-decorator';
 
 import BaseChart from '@/app/components/common/BaseChart.vue';
 
-import { ChartData, Tooltip, TooltipParams } from '@/app/types/chart';
+import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
 import { Chart as ChartUtils } from '@/app/utils/chart';
 import { BandwidthRollup } from '@/bandwidth';
 import { Size } from '@/private/memory/size';
@@ -76,7 +76,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-point', this.tooltipMarkUp(tooltipModel),
             285, 125, 6, 4, '#1f49a3');
@@ -84,7 +84,7 @@ export default class BandwidthChart extends BaseChart {
         Tooltip.custom(tooltipParams);
     }
 
-    private tooltipMarkUp(tooltipModel: any): string {
+    private tooltipMarkUp(tooltipModel: TooltipModel): string {
         if (!tooltipModel.dataPoints) {
             return '';
         }

web/multinode/src/app/components/bandwidth/EgressChart.vue

@@ -20,7 +20,7 @@ import { Component } from 'vue-property-decorator';
 
 import BaseChart from '@/app/components/common/BaseChart.vue';
 
-import { ChartData, Tooltip, TooltipParams } from '@/app/types/chart';
+import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
 import { Chart as ChartUtils } from '@/app/utils/chart';
 import { BandwidthRollup } from '@/bandwidth';
 import { Size } from '@/private/memory/size';
@@ -70,7 +70,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-point', this.tooltipMarkUp(tooltipModel),
             235, 94, 6, 4, '#48a77f');
@@ -78,7 +78,7 @@ export default class EgressChart extends BaseChart {
         Tooltip.custom(tooltipParams);
     }
 
-    private tooltipMarkUp(tooltipModel: any): string {
+    private tooltipMarkUp(tooltipModel: TooltipModel): string {
         if (!tooltipModel.dataPoints) {
             return '';
         }

web/multinode/src/app/components/bandwidth/IngressChart.vue

@@ -20,7 +20,7 @@ import { Component } from 'vue-property-decorator';
 
 import BaseChart from '@/app/components/common/BaseChart.vue';
 
-import { ChartData, Tooltip, TooltipParams } from '@/app/types/chart';
+import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
 import { Chart as ChartUtils } from '@/app/utils/chart';
 import { BandwidthRollup } from '@/bandwidth';
 import { Size } from '@/private/memory/size';
@@ -68,7 +68,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-point', this.tooltipMarkUp(tooltipModel),
             185, 94, 6, 4, '#e1a128');
@@ -76,7 +76,7 @@ export default class IngressChart extends BaseChart {
         Tooltip.custom(tooltipParams);
     }
 
-    private tooltipMarkUp(tooltipModel: any): string {
+    private tooltipMarkUp(tooltipModel: TooltipModel): string {
         if (!tooltipModel.dataPoints) {
             return '';
         }

web/multinode/src/app/components/common/DoughnutChart.vue

@@ -4,8 +4,7 @@
 <script lang="ts">
 import * as VueChart from 'vue-chartjs';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-
-import { DiskStatChartData } from '@/app/types/chart';
+import { DiskStatChartData, RenderChart } from '@/app/types/chart';
 
 @Component({
     extends: VueChart.Doughnut,
@@ -15,8 +14,8 @@ export default class DoughnutChart extends Vue {
     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,

web/multinode/src/app/components/common/HeaderlessInput.vue

@@ -121,8 +121,9 @@ export default class HeaderlessInput extends Vue {
     /**
      * triggers on input.
      */
-    // @ts-ignore
-    public onInput({ target }): void {
+    public onInput(event: Event): void {
+        if(!event.target) { return; }
+        const target = event.target as HTMLInputElement;
         if (!target || !target.value) { return; }
 
         if (target.value.length > this.maxSymbols) {
@@ -134,7 +135,8 @@ export default class HeaderlessInput extends Vue {
         this.$emit('setData', this.value);
     }
 
-    public onPaste(event): void {
+    public onPaste(event: ClipboardEvent): void {
+        if(!event || !event.clipboardData) { return; }
         const clipped: string = event.clipboardData.getData('text');
 
         if (clipped.length > this.maxSymbols) {

web/multinode/src/app/components/common/VButton.vue

@@ -45,8 +45,8 @@ export default class VButton extends Vue {
     private withPlus: boolean;
     @Prop({ default: false })
     private inactive: boolean;
-    @Prop({ default: () => { } })
-    private readonly onPress: () => any;
+    @Prop({ default: () => {} })
+    private readonly onPress: () => void;
 
     public get style(): Record<string, unknown> {
         return { width: this.width, height: this.height };

web/multinode/src/app/components/common/VChart.vue

@@ -5,7 +5,7 @@
 import * as VueChart from 'vue-chartjs';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-import { ChartData } from '@/app/types/chart';
+import { ChartData, RenderChart } from '@/app/types/chart';
 
 class DayShowingConditions {
     public readonly day: string;
@@ -41,18 +41,18 @@ export default class VChart extends Vue {
     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> {
@@ -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);

web/multinode/src/app/components/common/VDropdown.vue

@@ -36,7 +36,7 @@ export type OptionClick = (id?: string) => Promise<void>;
 export class Option {
     public constructor(
         public label: string = 'no options',
-        public onClick: OptionClick = async(id) => Promise.resolve(),
+        public onClick: OptionClick = async(_id) => Promise.resolve(),
     ) {}
 }
 

web/multinode/src/app/components/common/VPagination.vue

@@ -68,7 +68,7 @@ export default class VPagination extends Vue {
     /**
      * Component initialization.
      */
-    public mounted() {
+    public mounted(): void {
         this.populatePages();
         this.currentPageNumber = this.preselectedCurrentPageNumber;
     }
@@ -113,7 +113,7 @@ export default class VPagination extends Vue {
      * Method after total page count change.
      */
     @Watch('totalPageCount')
-    public onPageCountChange(val: number, oldVal: number) {
+    public onPageCountChange(_val: number, _oldVal: number): void {
         this.resetPageIndex();
     }
 

web/multinode/src/app/components/modals/UpdateName.vue

@@ -33,7 +33,7 @@ import HeaderedInput from '@/app/components/common/HeaderedInput.vue';
 import VButton from '@/app/components/common/VButton.vue';
 import VModal from '@/app/components/common/VModal.vue';
 
-import { CreateNodeFields, UpdateNodeModel } from '@/nodes';
+import { UpdateNodeModel } from '@/nodes';
 
 @Component({
     components: {

web/multinode/src/app/components/navigation/NavigationArea.vue

@@ -20,7 +20,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component } from 'vue-property-decorator';
+import Vue, {VueConstructor} from 'vue';
 
 import MyNodesIcon from '@/../static/images/icons/navigation/nodes.svg';
 import NotificationIcon from '@/../static/images/icons/navigation/notifications.svg';
@@ -33,9 +34,9 @@ import { Config as RouterConfig } from '@/app/router';
 
 export class NavigationLink {
     constructor(
-        public name: string = '',
-        public path: string = '',
-        public icon: Vue = new Vue(),
+        public name: string,
+        public path: string,
+        public icon: VueConstructor<Vue>,
     ) {}
 }
 

web/multinode/src/app/components/storage/DiskSpaceChart.vue

@@ -20,7 +20,7 @@ import { Component } from 'vue-property-decorator';
 
 import BaseChart from '@/app/components/common/BaseChart.vue';
 
-import { ChartData, Tooltip, TooltipParams } from '@/app/types/chart';
+import { ChartData, Tooltip, TooltipParams, TooltipModel } from '@/app/types/chart';
 import { Chart as ChartUtils } from '@/app/utils/chart';
 import { Size } from '@/private/memory/size';
 import { Stamp } from '@/storage';
@@ -66,14 +66,14 @@ 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-point', this.tooltipMarkUp(tooltipModel),
             125, 89, 6, 4, '#1f49a3');
 
         Tooltip.custom(tooltipParams);
     }
 
-    private tooltipMarkUp(tooltipModel: any): string {
+    private tooltipMarkUp(tooltipModel: TooltipModel): string {
         if (!tooltipModel.dataPoints) {
             return '';
         }

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

@@ -64,7 +64,7 @@ export default class WalletsTable extends Vue {
     @Prop({ default: () => [] })
     private readonly operators: Operator[];
 
-    public redirectToWalletDetailsPage(walletAddress: string): void {
+    public redirectToWalletDetailsPage(_walletAddress: string): void {
         // TODO: uncomment when undistributed will be added.
         // this.$router.push({
         //     name: RouterConfig.Wallets.with(RouterConfig.WalletDetails).name,

web/multinode/src/app/router/index.ts

@@ -136,7 +136,7 @@ const allowedRoutesNames = [Config.AddFirstNode.name, Config.Welcome.name];
  * Checks if redirect to some of internal routes and no nodes added so far.
  * Redirect to Add first node screen if so.
  */
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async(to, _from, next) => {
     if (store.state.nodes.nodes.length) {
         next();
     }

web/multinode/src/app/store/nodes.ts

@@ -67,7 +67,7 @@ export class NodesModule implements Module<NodesState, RootState> {
      * @param state
      * @param trustedSatellites
      */
-    public saveTrustedSatellites(state: NodesState, trustedSatellites: NodeURL[]) {
+    public saveTrustedSatellites(state: NodesState, trustedSatellites: NodeURL[]): void {
         state.trustedSatellites = trustedSatellites;
     }
 
@@ -76,7 +76,7 @@ export class NodesModule implements Module<NodesState, RootState> {
      * @param state
      * @param satelliteId - id of the satellite to select.
      */
-    public setSelectedSatellite(state: NodesState, satelliteId: string) {
+    public setSelectedSatellite(state: NodesState, satelliteId: string): void {
         state.selectedSatellite = state.trustedSatellites.find((satellite: NodeURL) => satellite.id === satelliteId) || null;
     }
 
@@ -85,7 +85,7 @@ export class NodesModule implements Module<NodesState, RootState> {
      * @param state
      * @param nodeId - node id to select.
      */
-    public setSelectedNode(state: NodesState, nodeId: string | null) {
+    public setSelectedNode(state: NodesState, nodeId: string | null): void {
         state.selectedNode = state.nodes.find((node: Node) => node.id === nodeId) || null;
     }
 

web/multinode/src/app/store/payouts.ts

@@ -29,7 +29,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
     public readonly actions: ActionTree<PayoutsState, RootState>;
     public readonly mutations: MutationTree<PayoutsState>;
 
-    private readonly payouts: any;
+    private readonly payouts: Payouts;
 
     public constructor(payouts: Payouts) {
         this.payouts = payouts;
@@ -75,7 +75,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param state
      * @param period representation of month and year
      */
-    public setPayoutPeriod(state: PayoutsState, period: string | null) {
+    public setPayoutPeriod(state: PayoutsState, period: string | null): void {
         state.selectedPayoutPeriod = period;
     }
 
@@ -93,7 +93,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param state
      * @param paystub for all time
      */
-    public setNodeTotals(state: PayoutsState, paystub: Paystub) {
+    public setNodeTotals(state: PayoutsState, paystub: Paystub) : void{
         state.selectedNodePayouts = { ...state.selectedNodePayouts, totalPaid: paystub.distributed, totalEarned: paystub.paid, totalHeld: paystub.held };
     }
 
@@ -102,7 +102,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param state
      * @param paystub
      */
-    public setNodePaystub(state: PayoutsState, paystub: Paystub) {
+    public setNodePaystub(state: PayoutsState, paystub: Paystub): void {
         state.selectedNodePayouts = { ...state.selectedNodePayouts, paystubForPeriod: paystub };
     }
 
@@ -111,7 +111,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param state
      * @param heldHistory
      */
-    public setNodeHeldHistory(state: PayoutsState, heldHistory: HeldAmountSummary[]) {
+    public setNodeHeldHistory(state: PayoutsState, heldHistory: HeldAmountSummary[]): void {
         state.selectedNodePayouts = { ...state.selectedNodePayouts, heldHistory };
     }
 
@@ -120,7 +120,7 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param state
      * @param expectations
      */
-    public setCurrentNodeExpectations(state: PayoutsState, expectations: any) {
+    public setCurrentNodeExpectations(state: PayoutsState, expectations: Expectation): void {
         state.selectedNodePayouts = { ...state.selectedNodePayouts, expectations };
     }
 
@@ -130,7 +130,6 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param ctx - context of the Vuex action.
      */
     public async summary(ctx: ActionContext<PayoutsState, RootState>): Promise<void> {
-        // @ts-ignore
         const selectedSatelliteId = ctx.rootState.nodes.selectedSatellite ? ctx.rootState.nodes.selectedSatellite.id : null;
         const summary = await this.payouts.summary(selectedSatelliteId, ctx.state.selectedPayoutPeriod);
 
@@ -154,7 +153,6 @@ export class PayoutsModule implements Module<PayoutsState, RootState> {
      * @param nodeId
      */
     public async paystub(ctx: ActionContext<PayoutsState, RootState>, nodeId: string): Promise<void> {
-        // @ts-ignore
         const selectedSatelliteId = ctx.rootState.nodes.selectedSatellite ? ctx.rootState.nodes.selectedSatellite.id : null;
         const paystub = await this.payouts.paystub(selectedSatelliteId, ctx.state.selectedPayoutPeriod, nodeId);
 

web/multinode/src/app/store/storage.ts

@@ -4,7 +4,7 @@
 import { ActionContext, ActionTree, GetterTree, Module, MutationTree } from 'vuex';
 
 import { RootState } from '@/app/store/index';
-import { DiskSpace, DiskSpaceUsage, Stamp } from '@/storage';
+import { DiskSpace, DiskSpaceUsage } from '@/storage';
 import { StorageService } from '@/storage/service';
 
 /**

web/multinode/src/app/types/chart.ts

@@ -70,7 +70,7 @@ class StylingConstants {
  */
 class Styling {
     public constructor(
-        public tooltipModel: any,
+        public tooltipModel: TooltipModel,
         public element: HTMLElement,
         public topPosition: number,
         public leftPosition: number,
@@ -83,7 +83,7 @@ class Styling {
  */
 export class TooltipParams {
     public constructor(
-        public tooltipModel: any,
+        public tooltipModel: TooltipModel,
         public chartId: string,
         public tooltipId: string,
         public pointId: string,
@@ -96,6 +96,122 @@ export class TooltipParams {
     ) {}
 }
 
+/**
+ * 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
  */
@@ -180,3 +296,11 @@ export class Tooltip {
         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
+}

web/multinode/src/app/types/pagination.ts

@@ -17,7 +17,7 @@ export class Page {
         this.onClick = callback;
     }
 
-    public get index() {
+    public get index(): number {
         return this.pageNumber;
     }
 

web/multinode/src/app/types/svg.d.ts

@@ -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;
 }

web/multinode/src/private/http/client.ts

@@ -28,27 +28,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.do('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.do('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.do('DELETE', path, null);
     }
 

web/multinode/tests/unit/store/nodes.spec.ts

@@ -37,8 +37,9 @@ describe('mutations', () => {
     it('saves selected satellite', () => {
         store.commit('nodes/setSelectedSatellite', satellite.id);
 
-        // @ts-ignore
-        expect(state.nodes.selectedSatellite.address).toBe(satellite.address);
+        const selectedSatellite = state.nodes.selectedSatellite;
+        expect(selectedSatellite).toBeDefined();
+        if(selectedSatellite) expect(selectedSatellite.address).toBe(satellite.address);
     });
 
     it('saves selected node', () => {
@@ -46,8 +47,9 @@ describe('mutations', () => {
 
         store.commit('nodes/setSelectedNode', node.id);
 
-        // @ts-ignore
-        expect(state.nodes.selectedNode.id).toBe(node.id);
+        const selectedNode = state.nodes.selectedNode;
+        expect(selectedNode).toBeDefined();
+        if(selectedNode) expect(selectedNode.id).toBe(node.id);
     });
 });
 
@@ -184,8 +186,10 @@ describe('actions', () => {
 
         await store.dispatch('nodes/selectSatellite', satellite.id);
 
-        // @ts-ignore
-        expect(state.nodes.selectedSatellite.address).toBe(satellite.address);
+        const selectedSatellite = state.nodes.selectedSatellite;
+        expect(selectedSatellite).toBeDefined();
+        if(selectedSatellite) expect(selectedSatellite.address).toBe(satellite.address);
+
         expect(state.nodes.nodes.length).toBe(1);
     });
 
@@ -194,7 +198,8 @@ describe('actions', () => {
 
         await store.dispatch('nodes/selectNode', node.id);
 
-        // @ts-ignore
-        expect(state.nodes.selectedNode.id).toBe(node.id);
+        const selectedNode = state.nodes.selectedNode;
+        expect(selectedNode).toBeDefined();
+        if(selectedNode) expect(selectedNode.id).toBe(node.id);
     });
 });