web/storagenode: update dependencies

Also pin all web/multinode dependencies, which was missing from
the other change.

Change-Id: Id78749076af6d80e59949efd73c1e10f5b52589c

web/multinode/package-lock.json

@@ -8,46 +8,46 @@
       "name": "multinode",
       "version": "0.0.1",
       "dependencies": {
-        "chart.js": "^2.9.4",
+        "chart.js": "2.9.4",
-        "core-js": "^3.21.1",
+        "core-js": "3.21.1",
-        "vue": "^2.6.14",
+        "vue": "2.6.14",
-        "vue-chartjs": "^3.5.1",
+        "vue-chartjs": "3.5.1",
-        "vue-class-component": "^7.2.6",
+        "vue-class-component": "7.2.6",
-        "vue-clipboard2": "^0.3.3",
+        "vue-clipboard2": "0.3.3",
-        "vue-property-decorator": "^9.1.2",
+        "vue-property-decorator": "9.1.2",
-        "vue-router": "^3.5.3",
+        "vue-router": "3.5.3",
-        "vuex": "^3.6.2"
+        "vuex": "3.6.2"
       },
       "devDependencies": {
-        "@types/jest": "^27.4.1",
+        "@types/jest": "27.4.1",
-        "@typescript-eslint/eslint-plugin": "^5.17.0",
+        "@typescript-eslint/eslint-plugin": "5.17.0",
-        "@typescript-eslint/parser": "^5.17.0",
+        "@typescript-eslint/parser": "5.17.0",
-        "@vue/cli-plugin-babel": "^5.0.4",
+        "@vue/cli-plugin-babel": "5.0.4",
-        "@vue/cli-plugin-eslint": "^5.0.4",
+        "@vue/cli-plugin-eslint": "5.0.4",
-        "@vue/cli-plugin-typescript": "^5.0.4",
+        "@vue/cli-plugin-typescript": "5.0.4",
-        "@vue/cli-plugin-unit-jest": "^5.0.4",
+        "@vue/cli-plugin-unit-jest": "5.0.4",
-        "@vue/cli-service": "^5.0.4",
+        "@vue/cli-service": "5.0.4",
-        "@vue/eslint-config-typescript": "^10.0.0",
+        "@vue/eslint-config-typescript": "10.0.0",
-        "@vue/test-utils": "^1.3.0",
+        "@vue/test-utils": "1.3.0",
-        "@vue/vue2-jest": "^27.0.0-alpha.2",
+        "@vue/vue2-jest": "27.0.0-alpha.4",
-        "babel-core": "^7.0.0-bridge.0",
+        "babel-core": "7.0.0-bridge.0",
-        "babel-jest": "^27.5.1",
+        "babel-jest": "27.5.1",
-        "compression-webpack-plugin": "^9.2.0",
+        "compression-webpack-plugin": "9.2.0",
-        "eslint": "^8.12.0",
+        "eslint": "8.12.0",
-        "eslint-plugin-import": "^2.25.4",
+        "eslint-plugin-import": "2.25.4",
         "eslint-plugin-storj": "github:storj/eslint-storj",
-        "eslint-plugin-vue": "^8.5.0",
+        "eslint-plugin-vue": "8.5.0",
-        "jest": "^27.5.1",
+        "jest": "27.5.1",
-        "jest-fetch-mock": "^3.0.3",
+        "jest-fetch-mock": "3.0.3",
-        "sass": "^1.49.10",
+        "sass": "1.49.10",
-        "sass-loader": "^12.6.0",
+        "sass-loader": "12.6.0",
-        "stylelint": "^13.13.1",
+        "stylelint": "13.13.1",
-        "stylelint-config-standard": "^19.0.0",
+        "stylelint-config-standard": "19.0.0",
-        "stylelint-scss": "^3.21.0",
+        "stylelint-scss": "3.21.0",
-        "ts-jest": "^27.1.4",
+        "ts-jest": "27.1.4",
-        "typescript": "^4.6.3",
+        "typescript": "4.6.3",
-        "vue-svg-loader": "^0.17.0-beta.2",
+        "vue-svg-loader": "0.17.0-beta.2",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "2.6.14"
       }
     },
     "node_modules/@achrinza/node-ipc": {

web/multinode/package.json

@@ -11,45 +11,45 @@
     "test": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "chart.js": "^2.9.4",
+    "chart.js": "2.9.4",
-    "core-js": "^3.21.1",
+    "core-js": "3.21.1",
-    "vue": "^2.6.14",
+    "vue": "2.6.14",
-    "vue-chartjs": "^3.5.1",
+    "vue-chartjs": "3.5.1",
-    "vue-class-component": "^7.2.6",
+    "vue-class-component": "7.2.6",
-    "vue-clipboard2": "^0.3.3",
+    "vue-clipboard2": "0.3.3",
-    "vue-property-decorator": "^9.1.2",
+    "vue-property-decorator": "9.1.2",
-    "vue-router": "^3.5.3",
+    "vue-router": "3.5.3",
-    "vuex": "^3.6.2"
+    "vuex": "3.6.2"
   },
   "devDependencies": {
-    "@types/jest": "^27.4.1",
+    "@types/jest": "27.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/parser": "5.17.0",
-    "@vue/cli-plugin-babel": "^5.0.4",
+    "@vue/cli-plugin-babel": "5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-plugin-eslint": "5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
+    "@vue/cli-plugin-typescript": "5.0.4",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
+    "@vue/cli-plugin-unit-jest": "5.0.4",
-    "@vue/cli-service": "^5.0.4",
+    "@vue/cli-service": "5.0.4",
-    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "^1.3.0",
+    "@vue/test-utils": "1.3.0",
-    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@vue/vue2-jest": "27.0.0-alpha.4",
-    "babel-core": "^7.0.0-bridge.0",
+    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "27.5.1",
-    "compression-webpack-plugin": "^9.2.0",
+    "compression-webpack-plugin": "9.2.0",
-    "eslint": "^8.12.0",
+    "eslint": "8.12.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-storj": "github:storj/eslint-storj",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "8.5.0",
-    "jest": "^27.5.1",
+    "jest": "27.5.1",
-    "jest-fetch-mock": "^3.0.3",
+    "jest-fetch-mock": "3.0.3",
-    "sass": "^1.49.10",
+    "sass": "1.49.10",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "12.6.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "13.13.1",
-    "stylelint-config-standard": "^19.0.0",
+    "stylelint-config-standard": "19.0.0",
-    "stylelint-scss": "^3.21.0",
+    "stylelint-scss": "3.21.0",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "27.1.4",
-    "typescript": "^4.6.3",
+    "typescript": "4.6.3",
-    "vue-svg-loader": "^0.17.0-beta.2",
+    "vue-svg-loader": "0.17.0-beta.2",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "2.6.14"
   }
 }

web/storagenode/.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
         '@typescript-eslint/no-empty-function': "off",
         '@typescript-eslint/no-var-requires': "off",
 
+        "vue/multi-word-component-names": ["off"],
         "vue/max-attributes-per-line": ["off"],
         "vue/singleline-html-element-content-newline": ["off"],
 

web/storagenode/babel.config.js

@@ -1,6 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-module.exports = {
-    presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]
-};

web/storagenode/index.html

@@ -3,7 +3,6 @@
     <head>
         <meta charset="utf-8">
         <link rel="apple-touch-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL8SURBVHgBxVcxTFNRFL01JvylrRsmNWETWWSybg5I3NTQBCdRFyfrDuoKMgMyOQgdTcDAJmrUrWWCgQIbhJKy0TJQpsc73P/S9/tfP+8/GnqSn1fo77/3nnPufe8nhAR1ETeoy7hJjpj93/ycu0+UuUVuEA5Y2xaifirEVpX/nvknnBFbgpMGUfmIKOkRLRT578oxXy6IJcFCialH0EyaaPoZBy7tEQ3NEY1IKd4/iidHwqYLijLA559cuY6dT0RjBU5AAYm9fiivLFnBKMGBTyeqQ4BXhXDwdqjUiKZkskOzREsbzeeBNRMCEiDgr12uYl1WNbnW/oc2iUys8jrQyyxhHRkM3hdgAMFBHQyGG/GDqyDlsSeS/npQC99jlEBpOnyX2XCF8sGhZLbeMLMZkCDbJ1nYYTfDeMP9fMH5y5vmIKYE8RxUjBXPedDH1Zu6I9QFSzLQxErz4Xn5oNwg+2NSmuv3Lkvz4QlTi8rupDlBmA6tqQLrnYNCvoxSNAOtUEaakwzMv+ALidTP2OlKKiSK75Cs6hy9NYFkjzmG1SBCIuUq0Za8pgydge8R9E+e10qNrGE1ikH5435mo11bQgr4B9LEgVUC0Npm1o+vcuvBxB1NYFsaaeC2XUuW/Xs7msC9Xqa+MMa9jQr1KtXAQoKYHakeskbIhDrVasdTbbVY4s8ZYld/9PWuyeTSHksFBjBFcZ+aH/j/yZk5gcAcgImgIX6MNsKKhKBta1sB2A3HV5pD6iJQIzw/MICwoohc1F6ALBH03XemFYPl+VdzcBNUh6j5gZZEcP341opAAnX/AXl/A0FlrrshgMRR+YUvPPN8CHgAxlqWVYuEdH7V/ZilA6cosFDa53EcmUDKC+7X+IwxHEVhO0DK6aeXH88uHcWQA8xE7Yg69M6xgdWZUEFtNNDyx1s2KnyDIxu22zdZTjgWhANm/vL6clGIsnw3+Fbk94RreS8AMGrBxvwoT0lMPnSNC2JJoAPdgnMBJLjKq5lzAp1C19+OzwFiYzAU5f7eeQAAAABJRU5ErkJggg==" type="image/x-icon">
-        <meta name="segment-io" content="{{ .SegmentIOPublicKey }}">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

web/storagenode/jest.config.js

@@ -0,0 +1,11 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+module.exports = {
+    preset: '@vue/cli-plugin-unit-jest/presets/typescript',
+    setupFiles: ["./jest.setup.ts"],
+    testEnvironment: 'jsdom',
+    transform: {
+        "^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
+    }
+}

web/storagenode/jest.setup.ts

@@ -3,7 +3,8 @@
 
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 
-const customGlobal: GlobalWithFetchMock = global as unknown as GlobalWithFetchMock;
+const customGlobal = (global as unknown) as
+    (GlobalWithFetchMock & { console: Record<any,unknown> });
 
 customGlobal.fetch = require('jest-fetch-mock');
 customGlobal.fetchMock = customGlobal.fetch;

web/storagenode/package.json

@@ -12,95 +12,49 @@
   },
   "dependencies": {
     "chart.js": "2.9.4",
-    "vue": "2.6.11",
+    "core-js": "3.21.1",
+    "vue": "2.6.14",
     "vue-chartjs": "3.5.1",
     "vue-class-component": "7.2.6",
-    "vue-clipboard2": "0.3.1",
+    "vue-clipboard2": "0.3.3",
     "vue-property-decorator": "9.1.2",
-    "vue-router": "3.4.9",
+    "vue-router": "3.5.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "7.14.8",
+    "@types/jest": "27.4.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.8.3",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
-    "@types/segment-analytics": "0.0.32",
+    "@typescript-eslint/parser": "5.17.0",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@vue/cli-plugin-babel": "5.0.4",
-    "@typescript-eslint/parser": "4.28.5",
+    "@vue/cli-plugin-eslint": "5.0.4",
-    "@vue/cli-plugin-babel": "4.1.1",
+    "@vue/cli-plugin-typescript": "5.0.4",
-    "@vue/cli-plugin-eslint": "4.5.13",
+    "@vue/cli-plugin-unit-jest": "5.0.4",
-    "@vue/cli-plugin-typescript": "4.5.13",
+    "@vue/cli-service": "5.0.4",
-    "@vue/cli-plugin-unit-jest": "4.1.1",
+    "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/cli-service": "4.5.13",
+    "@vue/test-utils": "1.3.0",
-    "@vue/eslint-config-typescript": "7.0.0",
+    "@vue/vue2-jest": "27.0.0-alpha.4",
-    "@vue/test-utils": "1.0.0-beta.30",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.1.0",
+    "babel-jest": "27.5.1",
-    "compression-webpack-plugin": "6.0.0",
+    "compression-webpack-plugin": "9.2.0",
-    "core-js": "3.6.5",
+    "eslint": "8.12.0",
-    "eslint": "6.7.2",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-storj": "github:storj/eslint-storj",
-    "eslint-plugin-vue": "7.16.0",
+    "eslint-plugin-vue": "8.5.0",
-    "jest-fetch-mock": "3.0.0",
+    "jest": "27.5.1",
-    "sass": "1.37.0",
+    "jest-fetch-mock": "3.0.3",
-    "sass-loader": "8.0.0",
+    "sass": "1.49.10",
-    "sinon": "7.5.0",
+    "sass-loader": "12.6.0",
-    "stylelint": "13.7.1",
+    "stylelint": "13.13.1",
     "stylelint-config-standard": "19.0.0",
-    "stylelint-scss": "3.18.0",
+    "stylelint-scss": "3.21.0",
-    "ts-jest": "25.5.0",
+    "ts-jest": "27.1.4",
-    "typescript": "3.7.4",
+    "typescript": "4.6.3",
-    "vue-jest": "3.0.5",
+    "vue-svg-loader": "0.17.0-beta.2",
-    "vue-svg-loader": "0.16.0",
+    "vue-template-compiler": "2.6.14"
-    "vue-template-compiler": "2.6.11"
   },
   "postcss": {
     "plugins": {
       "autoprefixer": {}
     }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "jest": {
-    "automock": false,
-    "setupFiles": [
-      "./jestSetup.ts"
-    ],
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    },
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "vue",
-      "ts",
-      "tsx"
-    ],
-    "collectCoverage": true,
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "vue-jest",
-      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^.+\\.tsx?$": "ts-jest",
-      "^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(apollo-client|apollo-link))"
-    ],
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "testMatch": [
-      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-    ],
-    "testURL": "http://localhost/"
   }
 }

web/storagenode/src/app/components/BaseChart.vue

@@ -20,8 +20,8 @@ export default class BaseChart extends Vue {
     @Prop({default: false})
     public isDarkMode: boolean;
 
-    public chartWidth: number = this.width;
+    public chartWidth = 0;
-    public chartHeight: number = this.height;
+    public chartHeight = 0;
     /**
      * Used for chart re rendering.
      */

web/storagenode/src/app/components/SNOHeader.vue

@@ -103,7 +103,7 @@ export default class SNOHeader extends Vue {
             await this.$store.dispatch(NODE_ACTIONS.GET_NODE_INFO);
             await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, this.FIRST_PAGE);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, false);
@@ -172,13 +172,13 @@ export default class SNOHeader extends Vue {
             await this.$store.dispatch(GET_NODE_INFO);
             await this.$store.dispatch(SELECT_SATELLITE, selectedSatelliteId);
         } catch (error) {
-            console.error(`${error.message} satellite data.`);
+            console.error("fetching satellite data", error);
         }
 
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_HISTORY);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         try {
@@ -193,19 +193,19 @@ export default class SNOHeader extends Vue {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_INFO, selectedSatelliteId);
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, selectedSatelliteId);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         try {
             await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, this.FIRST_PAGE);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_HISTORY);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
     }
 }

web/storagenode/src/app/components/SatelliteSelectionDropdown.vue

@@ -76,7 +76,7 @@ export default class SatelliteSelectionDropdown extends Vue {
             await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, id);
             this.fetchPayoutInfo(id);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, false);
@@ -93,7 +93,7 @@ export default class SatelliteSelectionDropdown extends Vue {
             await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null);
             this.fetchPayoutInfo();
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, false);
@@ -117,7 +117,7 @@ export default class SatelliteSelectionDropdown extends Vue {
             try {
                 await this.$store.dispatch(PAYOUT_ACTIONS.SET_PERIODS_RANGE, new PayoutInfoRange(null, new PayoutPeriod()));
             } catch (error) {
-                console.error(error.message);
+                console.error(error);
             }
         }
 
@@ -130,13 +130,13 @@ export default class SatelliteSelectionDropdown extends Vue {
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, id);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_PERIODS, id);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
     }
 }

web/storagenode/src/app/components/VPagination.vue

@@ -130,7 +130,7 @@ export default class VPagination extends Vue {
             await this.onPageClickCallback(page);
         } catch (error) {
             // TODO: add notification here
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
 
             return;
@@ -155,7 +155,7 @@ export default class VPagination extends Vue {
             await this.onPageClickCallback(this.currentPageNumber + 1);
         } catch (error) {
             // TODO: add notification here
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
 
             return;
@@ -180,7 +180,7 @@ export default class VPagination extends Vue {
             await this.onPageClickCallback(this.currentPageNumber - 1);
         } catch (error) {
             // TODO: add notification here
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
 
             return;

web/storagenode/src/app/components/notifications/SNONotification.vue

@@ -87,7 +87,7 @@ export default class SNONotification extends Vue {
             this.$store.dispatch(NOTIFICATIONS_ACTIONS.MARK_AS_READ, this.notification.id);
         } catch (error) {
             // TODO: implement UI notification system.
-            console.error(error.message);
+            console.error(error);
         }
     }
 }

web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue

@@ -82,7 +82,7 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
             try {
                 await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_HISTORY);
             } catch (error) {
-                console.error(error.message);
+                console.error(error);
             }
         }
 

web/storagenode/src/app/components/payments/PayoutHistoryTable.vue

@@ -69,7 +69,7 @@ export default class PayoutHistoryTable extends Vue {
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_HISTORY);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
     }
 }

web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue

@@ -110,7 +110,7 @@ export default class PayoutPeriodCalendar extends Vue {
 
             if (!isLastPeriodSelected) {
                 await this.$store.dispatch(APPSTATE_ACTIONS.SET_NO_PAYOUT_DATA, true);
-                console.error(error.message);
+                console.error(error);
             }
         }
 

web/storagenode/src/app/store/modules/notifications.ts

@@ -75,7 +75,6 @@ export function newNotificationsModule(service: NotificationsService): StoreModu
             },
             [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}: NotificationsContext): Promise<void> {

web/storagenode/src/app/views/NotificationsArea.vue

@@ -95,7 +95,7 @@ export default class NotificationsArea extends Vue {
         try {
             await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, index);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
     }
 
@@ -106,7 +106,7 @@ export default class NotificationsArea extends Vue {
         try {
             await this.$store.dispatch(NOTIFICATIONS_ACTIONS.READ_ALL);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
     }
 }

web/storagenode/src/app/views/PayoutArea.vue

@@ -119,7 +119,7 @@ export default class PayoutArea extends Vue {
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_HISTORY);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, false);

web/storagenode/src/main.ts

@@ -23,11 +23,11 @@ let clickOutsideEvent: EventListener;
 Vue.directive('click-outside', {
     bind: function (el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
         clickOutsideEvent = function(event: Event): void {
-            if (el === event.target || el.contains((event.target as Node))) {
+            if (el === event.target || el.contains(event.target as Node)) {
                 return;
             }
 
-            if (vnode.context) {
+            if (vnode.context && binding.expression) {
                 vnode.context[binding.expression](event);
             }
         };

web/storagenode/tests/unit/components/__snapshots__/SatelliteSelectionDropdownItem.spec.ts.snap

@@ -7,25 +7,19 @@ exports[`SatelliteSelectionDropdownItem renders correctly 1`] = `
   <p class="satellite-choice__name with-id-button">
     name
   </p>
-  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg></svg>
-        <path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
-      </svg>
       <p class="satellite-choice__right-area__button__text">ID</p>
     </button></div>
 </button>
 `;
 
 exports[`SatelliteSelectionDropdownItem renders correctly if disqualified 1`] = `
-<button name="Choose name satellite" type="button" class="satellite-choice"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image" class="satellite-choice__image">
+<button name="Choose name satellite" type="button" class="satellite-choice"><svg alt="disqualified image" class="satellite-choice__image"></svg>
-    <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"></path>
-  </svg>
   <!---->
   <p class="satellite-choice__name disqualified with-id-button">
     name
   </p>
-  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg></svg>
-        <path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
-      </svg>
       <p class="satellite-choice__right-area__button__text">ID</p>
     </button></div>
 </button>
@@ -33,15 +27,11 @@ exports[`SatelliteSelectionDropdownItem renders correctly if disqualified 1`] =
 
 exports[`SatelliteSelectionDropdownItem renders correctly if suspended 1`] = `
 <button name="Choose name satellite" type="button" class="satellite-choice">
-  <!----> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="suspended image" class="satellite-choice__image">
+  <!----> <svg alt="suspended image" class="satellite-choice__image"></svg>
-    <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"></path>
-  </svg>
   <p class="satellite-choice__name suspended with-id-button">
     name
   </p>
-  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
+  <div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg></svg>
-        <path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
-      </svg>
       <p class="satellite-choice__right-area__button__text">ID</p>
     </button></div>
 </button>

web/storagenode/tests/unit/components/notifications/SNONotification.spec.ts

@@ -32,29 +32,28 @@ describe('SNONotification', (): void => {
     });
 
     it('renders correctly', async (): Promise<void> => {
-        const mockMethod = jest.fn();
+        const note = new Notification(
-        const testNotification = new Notification(
             '123',
             '1234',
             NotificationTypes.AuditCheckFailure,
             'title1',
             'message1',
         );
+        const uinote = new UINotification(note);
 
         const wrapper = mount(SNONotification, {
             store,
             localVue,
             propsData: {
-                notification: new UINotification(testNotification),
+                notification: uinote,
                 isSmall: false,
             },
         });
 
-        wrapper.setMethods({ read: mockMethod });
-
         await wrapper.find('.notification-item').trigger('mouseenter');
 
-        expect(mockMethod).toHaveBeenCalled();
+        // TODO: verify that the notification has been marked as read
+        //   expect(state.notifications[0].isRead).toBe(true);
         expect(wrapper).toMatchSnapshot();
     });
 });

web/storagenode/tests/unit/components/notifications/__snapshots__/SNONotification.spec.ts.snap

@@ -5,9 +5,7 @@ exports[`SNONotification renders correctly 1`] = `
   <div class="row">
     <div class="notification-item__new-indicator-container"><span class="notification-item__new-indicator-container__circle"></span></div>
     <div class="notification-item__icon-container">
-      <div class="icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <div class="icon"><svg></svg></div>
-          <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65" class="close-cross-svg-path"></path>
-        </svg></div>
     </div>
     <div class="notification-item__text-container">
       <p class="notification-item__text-container__message"><b class="notification-item__text-container__message__bold">title1:</b> message1
@@ -26,9 +24,7 @@ exports[`SNONotification renders correctly with default props 1`] = `
   <div class="row">
     <div class="notification-item__new-indicator-container"><span class="notification-item__new-indicator-container__circle"></span></div>
     <div class="notification-item__icon-container">
-      <div class="icon"><svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <div class="icon"><svg></svg></div>
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.09394 2.14899C3.66843 2.80225 1.87523 5.10849 1.87523 7.85462V11.7819C1.87523 12.1437 1.59447 12.4364 1.25145 12.4364C0.560552 12.4364 0.000244141 13.0245 0.000244141 13.7455C0.000244141 14.469 0.560552 15.0546 1.25389 15.0546H13.7466C14.4387 15.0546 15.0002 14.4665 15.0002 13.7455C15.0002 13.0219 14.4375 12.4364 13.749 12.4364C13.4048 12.4364 13.1253 12.1449 13.1253 11.7819V7.85462C13.1253 5.1099 11.3333 2.80353 8.90655 2.14899V1.47272C8.90655 0.657093 8.27668 0 7.50031 0C6.72516 0 6.09407 0.659646 6.09407 1.47272L6.09394 2.14899ZM5.3127 15.7091H9.68766C9.68766 16.9747 8.70867 18 7.50018 18C6.29169 18 5.3127 16.9747 5.3127 15.7091Z" fill="#535F77"></path>
-        </svg></div>
     </div>
     <div class="notification-item__text-container">
       <p class="notification-item__text-container__message"><b class="notification-item__text-container__message__bold">:</b>

web/storagenode/tests/unit/components/payments/PayoutHistoryPeriodDropdown.spec.ts

@@ -29,7 +29,7 @@ localVue.directive('click-outside', {
                 return;
             }
 
-            if (vnode.context) {
+            if (vnode.context && binding.expression) {
                 vnode.context[binding.expression](event);
             }
         };

web/storagenode/tests/unit/components/payments/PayoutHistoryTableItem.spec.ts

@@ -40,7 +40,7 @@ describe('PayoutHistoryTableItem', (): void => {
 
         await wrapper.find('.payout-history-item__header').trigger('click');
 
-        expect(wrapper.vm.isExpanded).toBe(true);
+        expect(wrapper.vm.$data.isExpanded).toBe(true);
         expect(wrapper).toMatchSnapshot();
     });
 

web/storagenode/tests/unit/mock/svgTransform.js

@@ -1,17 +1,8 @@
-// Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-const vueJest = require('vue-jest/lib/template-compiler');
-
 module.exports = {
-    process(content) {
+    process () {
-        const { render } = vueJest({
+        return `module.exports = { render: function(){ return this._c("svg") } }`
-            content,
+    }
-            attrs: {
+}
-                functional: false,
-            },
-        });
-
-        return `module.exports = { render: ${render} }`;
-    },
-};

web/storagenode/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es5",
     "module": "esnext",
     "strict": true,
     "noImplicitAny": false,
@@ -15,8 +15,7 @@
     "strictPropertyInitialization": false,
     "types": [
       "webpack-env",
-      "jest",
+      "jest"
-      "segment-analytics"
     ],
     "paths": {
       "@/*": [
@@ -32,9 +31,7 @@
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
     "src/**/*.vue",
-    "src/app/types/svg.d.ts",
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],

web/storagenode/vue.config.js

@@ -6,7 +6,7 @@ const path = require('path');
 module.exports = {
     productionSourceMap: false,
     parallel: true,
-    lintOnSave: false, // disables eslint for builds
+    lintOnSave: process.env.NODE_ENV !== 'production', // disables eslint for builds
     assetsDir: "static",
     configureWebpack: {
         plugins: [],
@@ -15,22 +15,26 @@ module.exports = {
         config.resolve.alias
             .set('@', path.resolve('src'));
 
+        // Disable node_modules/.cache directory usage due to permissions.
+        // This is enabled by default in https://cli.vuejs.org/core-plugins/babel.html#caching.
+        config.module.rule('js').use('babel-loader')
+            .tap(options => Object.assign(options, {cacheDirectory: false}));
+
         config
             .plugin('html')
             .tap(args => {
                 args[0].template = './index.html';
-                return args
+                return args;
             });
 
         const svgRule = config.module.rule('svg');
-
         svgRule.uses.clear();
-
+        svgRule.type(); // Disable webpack 5 asset management.
         svgRule
-            .use('babel-loader')
+            .use('vue-loader')
-            .loader('babel-loader')
+            .loader('vue-loader')
             .end()
             .use('vue-svg-loader')
             .loader('vue-svg-loader');
-    }
+    },
 };