ui package upgrades

ui/node-options-wrapper.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+# Webpack 4 hashes with MD4, which OpenSSL 3 (Node 17+) no longer provides
+# by default, causing ERR_OSSL_EVP_UNSUPPORTED. --openssl-legacy-provider
+# restores it, but the flag doesn't exist before Node 17 and node refuses to
+# even start with it set in NODE_OPTIONS, so only add it when needed.
+NODE_MAJOR=$(node -p "process.versions.node.split('.')[0]")
+if [ "$NODE_MAJOR" -ge 17 ]; then
+  export NODE_OPTIONS="--openssl-legacy-provider ${NODE_OPTIONS}"
+fi
+exec "$@"

ui/package.json

@@ -25,77 +25,77 @@
   },
   "scripts": {
     "prebuild": "./prebuild.sh",
-    "start": "vue-cli-service lint --no-fix && vue-cli-service serve",
-    "serve": "vue-cli-service lint --no-fix && vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "start": "./node-options-wrapper.sh vue-cli-service lint --no-fix && ./node-options-wrapper.sh vue-cli-service serve",
+    "serve": "./node-options-wrapper.sh vue-cli-service lint --no-fix && ./node-options-wrapper.sh vue-cli-service serve",
+    "build": "NODE_OPTIONS='--max-old-space-size=4096' ./node-options-wrapper.sh vue-cli-service build",
     "postbuild": "./postbuild.sh",
     "lint": "vue-cli-service lint",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.3.2",
     "@vue-js-cron/ant": "^1.1.3",
     "@vue-js-cron/core": "^3.7.1",
     "ant-design-vue": "^3.2.20",
     "antd": "^4.24.16",
     "antd-theme-webpack-plugin": "^1.3.9",
-    "axios": "^0.21.4",
+    "axios": "^1.18.1",
     "babel-plugin-require-context-hook": "^1.0.0",
     "chart.js": "^3.7.1",
-    "chartjs-adapter-moment": "^1.0.0",
-    "core-js": "^3.21.1",
-    "cronstrue": "^2.26.0",
-    "dompurify": "^3.2.6",
+    "chartjs-adapter-moment": "^1.0.1",
+    "core-js": "^3.49.0",
+    "cronstrue": "^2.59.0",
+    "dompurify": "^3.4.12",
     "enquire.js": "^2.1.6",
-    "js-cookie": "^2.2.1",
-    "lodash": "^4.17.15",
+    "js-cookie": "^3.0.8",
+    "lodash": "^4.18.1",
     "md5": "^2.2.1",
-    "minio": "^7.0.33",
+    "minio": "^7.1.3",
     "mitt": "^2.1.0",
-    "moment": "^2.26.0",
-    "moment-timezone": "^0.5.43",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.48",
     "npm-check-updates": "^6.0.1",
     "nprogress": "^0.2.0",
     "qrious": "^4.0.2",
     "semver": "^7.6.3",
-    "vue": "^3.2.31",
+    "vue": "^3.5.40",
     "vue-chartjs": "^4.0.7",
     "vue-clipboard2": "^0.3.1",
     "vue-code-highlight": "^0.7.8",
-    "vue-cropper": "^1.0.2",
-    "vue-i18n": "^9.1.6",
+    "vue-cropper": "^1.1.4",
+    "vue-i18n": "^9.14.5",
     "vue-loader": "^16.8.3",
-    "vue-qrious": "^3.1.0",
-    "vue-router": "^4.0.14",
+    "vue-qrious": "^3.1.1",
+    "vue-router": "^4.6.4",
     "vue-social-auth": "^1.4.9",
     "vue-uuid": "^3.0.0",
     "vue-web-storage": "^6.1.0",
     "vue3-clipboard": "^1.0.0",
-    "vue3-google-login": "^2.0.20",
+    "vue3-google-login": "^2.1.4",
     "vuedraggable": "^4.0.3",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.29.7",
     "@vue/cli": "^4.4.1",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/compiler-sfc": "^3.5.40",
     "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "^2.0.0-0",
+    "@vue/test-utils": "^2.4.11",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
-    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-import": "^1.13.8",
     "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
@@ -104,12 +104,12 @@
     "less-loader": "^5.0.0",
     "nan": "2.18.0",
     "node-gyp": "10.0.1",
-    "sass": "^1.49.9",
+    "sass": "^1.101.0",
     "sass-loader": "^8.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue-jest": "^5.0.0-0",
     "vue-svg-loader": "^0.17.0-beta.2",
-    "webpack": "^4.46.0"
+    "webpack": "^4.47.0"
   },
   "resolutions": {
     "nan": "2.18.0"

ui/src/components/multitab/MultiTab.vue

@@ -42,7 +42,7 @@
 </template>
 -->
 
-<script>
+<script lang="jsx">
 export default {
   name: 'MultiTab',
   data () {

ui/src/layouts/RouteView.vue

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-<script>
+<script lang="jsx">
 export default {
   name: 'RouteView',
   data () {

ui/src/views/AutogenView.vue

@@ -618,7 +618,7 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import { ref, reactive, toRaw, h } from 'vue'
 import { Button } from 'ant-design-vue'
 import { getAPI, postAPI, callAPI } from '@/api'

ui/src/views/compute/DeployVnfAppliance.vue

@@ -836,7 +836,7 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import { ref, reactive, toRaw, nextTick } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import _ from 'lodash'

ui/src/views/iam/DomainActionForm.vue

@@ -133,7 +133,7 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import { postAPI } from '@/api'
 import { ref, reactive, toRaw } from 'vue'
 import TooltipLabel from '@/components/widgets/TooltipLabel'

ui/vue.config.js

@@ -162,7 +162,11 @@ const vueConfig = {
   lintOnSave: undefined,
 
   // babel-loader no-ignore node_modules/*
-  transpileDependencies: [],
+  // minio (and its fast-xml-parser dependency) and vue-router ship modern
+  // syntax (class fields, optional chaining) in both their ESM and CJS
+  // builds, which webpack 4's parser can't handle unless babel transpiles
+  // them like first-party source.
+  transpileDependencies: [/[\\/]node_modules[\\/](minio|fast-xml-parser|vue-router)[\\/]/],
 
   pluginOptions: {
     i18n: {