[Liangying.Wei (vicancy)]

What

Migrates tools/azure-socketio-admin-ui from Vue 2.7 / Vuetify 2 / vue-cli 5 to Vue 3.5 / Vuetify 4 / Vite 7, by re-syncing with upstream rather than migrating our fork in place.

This clears the last 5 open Dependabot alerts in the repo.

Package	Advisory range	Now
vuetify	>=2.2.0-beta.2, <3.0.0-alpha.10 (high)	4.1.11
vuetify	>=2.0.0, <3.0.0 (moderate)	4.1.11
vue-template-compiler	>=2.0.0, <3.0.0 (moderate)	removed
echarts	<6.1.0 (moderate)	6.1.0
vue	>=2.0.0-alpha.1, <3.0.0-alpha.0 (low)	3.5.41

Why re-sync instead of migrating in place

This tool is a fork of socket.io-admin-ui@0.5.1. Upstream has published exactly one commit against ui/ since that tag — 3dae74e "upgrade to vue@3, vuetify@4 and chart.js@4". So re-syncing brings the framework upgrade and zero functional drift, and upstream did the hard conversion work already.

Our Azure delta against 0.5.1 measured 13 files, +515 / −41, and splits cleanly:

• 5 files upstream never touched (connection.js, main.js, servers.js, en.json, zh-CN.json) — carried over verbatim
• 6 files re-applied by hand (App.vue, AppBar.vue, ConnectionModal.vue, NavigationDrawer.vue, router/index.js, plus the Benchmark feature)

Azure-specific behaviour, preserved

• serverUrl → serviceEndpoint throughout
• hub field, with path derived as `/clients/socketio/hubs/${hub}` and rendered read-only
• queryString field, spread into the socket.io connection query
• Branding, Benchmark nav/route entries, and connection dialog defaults (advanced options expanded, WS-only on, endpoint/hub placeholders, 550px dialog)
• Benchmark view + histogram ported to Vue 3 and ECharts 6

Two Vuetify 2 → 4 breaking changes surfaced in the Benchmark component and were fixed: v-progress-linear's value → model-value, and the white--text helper → text-white.

Incidental fixes

Upstream left two artifacts behind in its own Vite migration:

• .env was dead configuration — it declared VUE_APP_I18N_LOCALE / VUE_APP_I18N_FALLBACK_LOCALE while i18n.js reads import.meta.env.VITE_I18N_*. Renamed to the VITE_ prefix.
• public/index.html was the old vue-cli template, still containing unresolved <%= BASE_URL %> and <%= htmlWebpackPlugin.options.title %> placeholders, and was being copied into dist/. Removed; the Vite root index.html replaces it.

Also adds vue-eslint-parser explicitly — npm 7+ auto-installs peer dependencies but yarn 1 does not, so upstream's npm-based install never surfaced the missing parser and yarn lint crashed without it.

Verification

Built and ran the app, driving it through CDP:

• Connection dialog renders all Azure fields; path shows /clients/socketio/hubs/eio_hub as read-only, and updates reactively to /clients/socketio/hubs/my-custom-hub when the hub is edited
• Navigation drawer includes Benchmark; the view renders its breadcrumb, the four parameter fields, Start/Stop, the progress bar, and an ECharts canvas at 1215×633
• Zero console errors and zero exceptions
• yarn build produces a clean dist/ (index.html + hashed assets), so release_admin_ui.yml's artifact path still resolves

yarn lint reports 41 errors, all pre-existing upstream issues (vue/multi-word-component-names, vue/valid-v-slot, no-undef in vite.config.js) — none introduced here, and lint is not part of this package's CI.

⚠️ Blocked on a one-line workflow change I can't push

release_admin_ui.yml pins node-version: 20, and the build fails on it:

error vue-i18n@11.4.9: The engine "node" is incompatible with this module.
Expected version ">= 22". Got "20.20.2"

vue-i18n@11 and its @intlify/* packages hard-require node >= 22, and Vite 7 wants ^20.19.0 || >=22.12.0. Node 20 is also past end-of-life. The fix is one line:

-          node-version: 20
+          node-version: 22

My token lacks the workflow scope, so both git push and the Contents API refuse to touch .github/workflows/. Someone with that scope needs to apply this to the admin-ui-vue3 branch before CI can go green.