From 267975e4a465625d540974c707a0894400fa15c2 Mon Sep 17 00:00:00 2001 From: Ostap Brehin Date: Wed, 11 Sep 2024 14:08:11 +0100 Subject: [PATCH] [5.x] Upgrade from Vue 2 to Vue 3 (#1496) * Upgrade from Vue 2 to Vue 3 * Upgrade `vue-router` * StyleCI * Use Vue 3 lifecycle events * Adapt routes to suit `vue-router` v4 * Adapt routes to suit `vue-router` v4 * imports * Adapt metrics routes to `vue-router` v4 * Adapt routes to suit `vue-router` v4 * StyleCI --- package-lock.json | 330 +++++++++++++++---- package.json | 8 +- resources/js/app.js | 51 ++- resources/js/routes.js | 131 ++++---- resources/js/screens/batches/index.vue | 4 +- resources/js/screens/batches/preview.vue | 4 +- resources/js/screens/dashboard.vue | 4 +- resources/js/screens/failedJobs/index.vue | 4 +- resources/js/screens/failedJobs/job.vue | 4 +- resources/js/screens/monitoring/index.vue | 8 +- resources/js/screens/monitoring/job-row.vue | 2 +- resources/js/screens/monitoring/tag-jobs.vue | 8 +- resources/js/screens/recentJobs/index.vue | 8 +- resources/js/screens/recentJobs/job-row.vue | 2 +- vite.config.js | 4 +- 15 files changed, 380 insertions(+), 192 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2961c1a9..d746a7d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "laravel-horizon", "devDependencies": { - "@vitejs/plugin-vue2": "^2.3.1", + "@vitejs/plugin-vue": "^5.1.3", "axios": "^1.7.4", "bootstrap": "~5.1.3", "chart.js": "^2.9.4", @@ -18,16 +18,40 @@ "sass": "^1.74.1", "sql-formatter": "^4.0.2", "vite": "^5.2.8", - "vue": "^2.7.16", - "vue-json-pretty": "^1.9.5", - "vue-router": "^3.6.5" + "vue": "^3.5.4", + "vue-json-pretty": "^2.4.0", + "vue-router": "^4.4.4" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.24.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz", - "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==", + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz", + "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==", "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.25.6" + }, "bin": { "parser": "bin/babel-parser.js" }, @@ -35,6 +59,21 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/types": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz", + "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -403,6 +442,13 @@ "node": ">=12" } }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -628,33 +674,136 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, - "node_modules/@vitejs/plugin-vue2": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.3.1.tgz", - "integrity": "sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==", + "node_modules/@vitejs/plugin-vue": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz", + "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==", "dev": true, + "license": "MIT", "engines": { - "node": "^14.18.0 || >= 16.0.0" + "node": "^18.0.0 || >=20.0.0" }, "peerDependencies": { - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", - "vue": "^2.7.0-0" + "vite": "^5.0.0", + "vue": "^3.2.25" + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.4.tgz", + "integrity": "sha512-oNwn+BAt3n9dK9uAYvI+XGlutwuTq/wfj4xCBaZCqwwVIGtD7D6ViihEbyYZrDHIHTDE3Q6oL3/hqmAyFEy9DQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/shared": "3.5.4", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.4.tgz", + "integrity": "sha512-yP9RRs4BDLOLfldn6ah+AGCNovGjMbL9uHvhDHf5wan4dAHLnFGOkqtfE7PPe4HTXIqE7l/NILdYw53bo1C8jw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-core": "3.5.4", + "@vue/shared": "3.5.4" } }, "node_modules/@vue/compiler-sfc": { - "version": "2.7.16", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz", - "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.4.tgz", + "integrity": "sha512-P+yiPhL+NYH7m0ZgCq7AQR2q7OIE+mpAEgtkqEeH9oHSdIRvUO+4X6MPvblJIWcoe4YC5a2Gdf/RsoyP8FFiPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/compiler-core": "3.5.4", + "@vue/compiler-dom": "3.5.4", + "@vue/compiler-ssr": "3.5.4", + "@vue/shared": "3.5.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.11", + "postcss": "^8.4.44", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.4.tgz", + "integrity": "sha512-acESdTXsxPnYr2C4Blv0ggx5zIFMgOzZmYU2UgvIff9POdRGbRNBHRyzHAnizcItvpgerSKQbllUc9USp3V7eg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/parser": "^7.23.5", - "postcss": "^8.4.14", - "source-map": "^0.6.1" + "@vue/compiler-dom": "3.5.4", + "@vue/shared": "3.5.4" + } + }, + "node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==", + "dev": true, + "license": "MIT" + }, + "node_modules/@vue/reactivity": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.4.tgz", + "integrity": "sha512-HKKbEuP7tYSGCq4e4nK6ZW6l5hyG66OUetefBp4budUyjvAYsnQDf+bgFzg2RAgnH0CInyqXwD9y47jwJEHrQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/shared": "3.5.4" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.4.tgz", + "integrity": "sha512-f3ek2sTA0AFu0n+w+kCtz567Euqqa3eHewvo4klwS7mWfSj/A+UmYTwsnUFo35KeyAFY60JgrCGvEBsu1n/3LA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.4", + "@vue/shared": "3.5.4" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.4.tgz", + "integrity": "sha512-ofyc0w6rbD5KtjhP1i9hGOKdxGpvmuB1jprP7Djlj0X7R5J/oLwuNuE98GJ8WW31Hu2VxQHtk/LYTAlW8xrJdw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.4", + "@vue/runtime-core": "3.5.4", + "@vue/shared": "3.5.4", + "csstype": "^3.1.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.4.tgz", + "integrity": "sha512-FbjV6DJLgKRetMYFBA1UXCroCiED/Ckr53/ba9wivyd7D/Xw9fpo0T6zXzCnxQwyvkyrL7y6plgYhWhNjGxY5g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-ssr": "3.5.4", + "@vue/shared": "3.5.4" }, - "optionalDependencies": { - "prettier": "^1.18.2 || ^2.0.0" + "peerDependencies": { + "vue": "3.5.4" } }, + "node_modules/@vue/shared": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.4.tgz", + "integrity": "sha512-L2MCDD8l7yC62Te5UUyPVpmexhL9ipVnYRw9CsWfm/BGRL5FwDX4a25bcJ/OJSD3+Hx+k/a8LDKcG2AFdJV3BA==", + "dev": true, + "license": "MIT" + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -836,7 +985,8 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/delayed-stream": { "version": "1.0.0", @@ -847,6 +997,19 @@ "node": ">=0.4.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/esbuild": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", @@ -885,6 +1048,13 @@ "@esbuild/win32-x64": "0.20.2" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true, + "license": "MIT" + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -1020,6 +1190,16 @@ "node": ">=0.12.0" } }, + "node_modules/magic-string": { + "version": "0.30.11", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", + "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, "node_modules/md5": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz", @@ -1107,10 +1287,11 @@ "dev": true }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", + "dev": true, + "license": "ISC" }, "node_modules/picomatch": { "version": "2.3.1", @@ -1125,9 +1306,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.45", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz", + "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==", "dev": true, "funding": [ { @@ -1143,31 +1324,16 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" } }, - "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true, - "optional": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -1238,15 +1404,6 @@ "node": ">=14.0.0" } }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -1268,6 +1425,16 @@ "sql-formatter": "bin/sqlfmt.js" } }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -1336,31 +1503,56 @@ } }, "node_modules/vue": { - "version": "2.7.16", - "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz", - "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==", - "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.4.tgz", + "integrity": "sha512-3yAj2gkmiY+i7+22A1PWM+kjOVXjU74UPINcTiN7grIVPyFFI0lpGwHlV/4xydDmobaBn7/xmi+YG8HeSlCTcg==", "dev": true, + "license": "MIT", "dependencies": { - "@vue/compiler-sfc": "2.7.16", - "csstype": "^3.1.0" + "@vue/compiler-dom": "3.5.4", + "@vue/compiler-sfc": "3.5.4", + "@vue/runtime-dom": "3.5.4", + "@vue/server-renderer": "3.5.4", + "@vue/shared": "3.5.4" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, "node_modules/vue-json-pretty": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-1.9.5.tgz", - "integrity": "sha512-fwbiH/ky/raX1D4MXRZZLFeKm157e9AkumMD7Y+djdLU1Sb0Tp5q2iOPvCnkWNzRpUfxx/zUjONUG+MIWsqx/w==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-2.4.0.tgz", + "integrity": "sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 10.0.0", "npm": ">= 5.0.0" + }, + "peerDependencies": { + "vue": ">=3.0.0" } }, "node_modules/vue-router": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", - "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==", - "dev": true + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.4.tgz", + "integrity": "sha512-3MlnDqwRwZwCQVbtVfpsU+nrNymNjnXSsQtXName5925NVC1+326VVfYH9vSrA0N13teGEo8z5x7gbRnGjCDiQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^6.6.4" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } } } } diff --git a/package.json b/package.json index 1023ce32..eaed2a4d 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "watch": "vite build --watch" }, "devDependencies": { - "@vitejs/plugin-vue2": "^2.3.1", + "@vitejs/plugin-vue": "^5.1.3", "axios": "^1.7.4", "bootstrap": "~5.1.3", "chart.js": "^2.9.4", @@ -19,8 +19,8 @@ "sass": "^1.74.1", "sql-formatter": "^4.0.2", "vite": "^5.2.8", - "vue": "^2.7.16", - "vue-json-pretty": "^1.9.5", - "vue-router": "^3.6.5" + "vue": "^3.5.4", + "vue-json-pretty": "^2.4.0", + "vue-router": "^4.4.4" } } diff --git a/resources/js/app.js b/resources/js/app.js index 2cc9cf35..98240e5b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,6 +1,6 @@ import axios from 'axios'; -import Vue from 'vue/dist/vue.esm.js'; -import VueRouter from 'vue-router'; +import { createApp } from 'vue/dist/vue.esm-bundler.js'; +import { createRouter, createWebHistory } from 'vue-router'; import VueJsonPretty from 'vue-json-pretty'; import 'vue-json-pretty/lib/styles.css'; import Base from './base'; @@ -16,9 +16,22 @@ if (token) { axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } -Vue.use(VueRouter); +const app = createApp({ + data() { + return { + alert: { + type: null, + autoClose: 0, + message: '', + confirmationProceed: null, + confirmationCancel: null, + }, + autoLoadsNewEntries: localStorage.autoLoadsNewEntries === '1', + }; + }, +}); -Vue.prototype.$http = axios.create(); +app.config.globalProperties.$http = axios.create(); window.Horizon.basePath = '/' + window.Horizon.path; @@ -29,31 +42,17 @@ if (window.Horizon.path === '' || window.Horizon.path === '/') { window.Horizon.basePath = ''; } -const router = new VueRouter({ +const router = createRouter({ + history: createWebHistory(routerBasePath), routes: Routes, - mode: 'history', - base: routerBasePath, }); -Vue.component('vue-json-pretty', VueJsonPretty); -Vue.component('alert', Alert); -Vue.component('scheme-toggler', SchemeToggler); +app.use(router); -Vue.mixin(Base); +app.component('vue-json-pretty', VueJsonPretty); +app.component('alert', Alert); +app.component('scheme-toggler', SchemeToggler); -new Vue({ - router, - data() { - return { - alert: { - type: null, - autoClose: 0, - message: '', - confirmationProceed: null, - confirmationCancel: null, - }, +app.mixin(Base); - autoLoadsNewEntries: localStorage.autoLoadsNewEntries === '1', - }; - }, -}).$mount('#horizon'); +app.mount('#horizon'); diff --git a/resources/js/routes.js b/resources/js/routes.js index 3825e2ab..6e060ce1 100644 --- a/resources/js/routes.js +++ b/resources/js/routes.js @@ -24,99 +24,100 @@ export default [ { path: '/monitoring', - name: 'monitoring', - component: monitoring, - }, - - { - path: '/monitoring/:tag', - component: monitoringTag, children: [ { - path: 'jobs', - name: 'monitoring-jobs', - component: monitoringTagJobs, - props: { type: 'jobs' }, + path: '', + name: 'monitoring', + component: monitoring, }, { - path: 'failed', - name: 'monitoring-failed', - component: monitoringTagJobs, - props: { type: 'failed' }, + path: ':tag', + component: monitoringTag, + children: [ + { + path: 'jobs', + name: 'monitoring-jobs', + component: monitoringTagJobs, + props: { type: 'jobs' }, + }, + { + path: 'failed', + name: 'monitoring-failed', + component: monitoringTagJobs, + props: { type: 'failed' }, + }, + ], }, ], }, - { path: '/metrics', redirect: '/metrics/jobs' }, - { - path: '/metrics/', - component: metrics, + path: '/metrics', + redirect: '/metrics/jobs', children: [ { path: 'jobs', - name: 'metrics-jobs', - component: metricsJobs, + component: metrics, + children: [{ path: '', name: 'metrics-jobs', component: metricsJobs }], }, { path: 'queues', - name: 'metrics-queues', - component: metricsQueues, + component: metrics, + children: [{ path: '', name: 'metrics-queues', component: metricsQueues }], + }, + { + path: ':type/:slug', + name: 'metrics-preview', + component: metricsPreview, }, ], }, - { - path: '/metrics/:type/:slug', - name: 'metrics-preview', - component: metricsPreview, - }, - { path: '/jobs/:type', - name: 'jobs', - component: recentJobs, - }, - - { - path: '/jobs/pending/:jobId', - name: 'pending-jobs-preview', - component: recentJobsJob, - }, - - { - path: '/jobs/completed/:jobId', - name: 'completed-jobs-preview', - component: recentJobsJob, - }, - - { - path: '/jobs/silenced/:jobId', - name: 'silenced-jobs-preview', - component: recentJobsJob, + children: [ + { + path: '', + name: 'jobs', + component: recentJobs, + }, + { + path: ':jobId', + name: 'job-preview', + component: recentJobsJob, + }, + ], }, { path: '/failed', - name: 'failed-jobs', - component: failedJobs, - }, - - { - path: '/failed/:jobId', - name: 'failed-jobs-preview', - component: failedJobsJob, + children: [ + { + path: '', + name: 'failed-jobs', + component: failedJobs, + }, + { + path: ':jobId', + name: 'failed-jobs-preview', + component: failedJobsJob, + }, + ], }, { path: '/batches', - name: 'batches', - component: batches, - }, - - { - path: '/batches/:batchId', - name: 'batches-preview', - component: batchesPreview, + children: [ + { + path: '', + name: 'batches', + component: batches, + }, + { + path: ':batchId', + name: 'batches-preview', + component: batchesPreview, + }, + ], }, ]; diff --git a/resources/js/screens/batches/index.vue b/resources/js/screens/batches/index.vue index ec6a8290..9adcfa58 100644 --- a/resources/js/screens/batches/index.vue +++ b/resources/js/screens/batches/index.vue @@ -26,9 +26,9 @@ }, /** - * Clean after the component is destroyed. + * Clean after the component is unmounted. */ - destroyed() { + unmounted() { clearInterval(this.interval); }, diff --git a/resources/js/screens/batches/preview.vue b/resources/js/screens/batches/preview.vue index ea6d8449..6eaa70bd 100644 --- a/resources/js/screens/batches/preview.vue +++ b/resources/js/screens/batches/preview.vue @@ -28,9 +28,9 @@ /** - * Clean after the component is destroyed. + * Clean after the component is unmounted. */ - destroyed() { + unmounted() { clearInterval(this.interval); }, diff --git a/resources/js/screens/dashboard.vue b/resources/js/screens/dashboard.vue index 89c27130..a337b917 100644 --- a/resources/js/screens/dashboard.vue +++ b/resources/js/screens/dashboard.vue @@ -29,9 +29,9 @@ /** - * Clean after the component is destroyed. + * Clean after the component is unmounted. */ - destroyed() { + unmounted() { clearTimeout(this.timeout); }, diff --git a/resources/js/screens/failedJobs/index.vue b/resources/js/screens/failedJobs/index.vue index 3840522d..54ecf3d6 100644 --- a/resources/js/screens/failedJobs/index.vue +++ b/resources/js/screens/failedJobs/index.vue @@ -30,9 +30,9 @@ }, /** - * Clean after the component is destroyed. + * Clean after the component is unmounted. */ - destroyed() { + unmounted() { clearInterval(this.interval); }, diff --git a/resources/js/screens/failedJobs/job.vue b/resources/js/screens/failedJobs/job.vue index 188f7c8a..e8c70884 100644 --- a/resources/js/screens/failedJobs/job.vue +++ b/resources/js/screens/failedJobs/job.vue @@ -34,9 +34,9 @@ /** - * Clean after the component is destroyed. + * Clean after the component is unmounted. */ - destroyed() { + unmounted() { clearInterval(this.interval); }, diff --git a/resources/js/screens/monitoring/index.vue b/resources/js/screens/monitoring/index.vue index 32187a22..90147771 100644 --- a/resources/js/screens/monitoring/index.vue +++ b/resources/js/screens/monitoring/index.vue @@ -25,16 +25,12 @@ this.loadTags(); this.refreshTagsPeriodically(); - - this.$on('addTagModalClosed', data => { - this.addTagModalOpened = false; - }); }, /** - * Clean up after the component is destroyed. + * Clean up after the component is unmounted. */ - destroyed() { + unmounted() { clearInterval(this.interval); }, diff --git a/resources/js/screens/monitoring/job-row.vue b/resources/js/screens/monitoring/job-row.vue index 7dbd3f6b..e30537bd 100644 --- a/resources/js/screens/monitoring/job-row.vue +++ b/resources/js/screens/monitoring/job-row.vue @@ -1,7 +1,7 @@