recreate PR 22 - migration observability to be compliant with vue3

.eslintignore

@@ -16,3 +16,4 @@ ksconfig.json
 nuxt.config.js
 shell/utils/dynamic-importer.js
 shell/assets/fonts
+tmp

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     'standard',
     'eslint:recommended',
     '@nuxtjs/eslint-config-typescript',
-    'plugin:cypress/recommended'
   ],
   // add your custom rules here
   rules: {
@@ -31,6 +30,7 @@ module.exports = {
     'vue/html-self-closing':    'off',
     'vue/no-unused-components': 'warn',
     'vue/no-v-html':            'error',
+    'vue/no-v-model-argument':  'off',
     'wrap-iife':                'off',
 
     'array-bracket-spacing':             'warn',

.nvmrc

@@ -1 +1 @@
-16
+20

package.json

@@ -4,20 +4,18 @@
   "license": "Apache-2.0",
   "private": true,
   "engines": {
-    "node": ">=12"
+    "node": ">=20"
   },
   "workspaces": [
     "pkg/*"
   ],
   "dependencies": {
     "@rancher/components": "0.2.1-alpha.0",
-    "@rancher/shell": "^2.0.1",
-    "@types/lodash": "4.14.184",
-    "core-js": "3.21.1"
+    "@rancher/shell": "^3.0.0-rc.9"
   },
-  "resolutions": {
-    "**/webpack": "4",
-    "@types/node": "^16"
+  "devDependencies": {
+    "@nuxtjs/eslint-config-typescript": "6.0.1",
+    "@types/lodash": "4.14.184"
   },
   "scripts": {
     "lint": "eslint --ext .ts,.js,.vue",

pkg/observability/components/Dashboard/ConfigurationView.vue

@@ -1,18 +1,21 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
-import AsyncButton from '@shell/components/AsyncButton';
-import { Banner } from '@components/Banner';
-import { checkConnection, ensureObservabilityUrlWhitelisted } from '../../modules/stackstate';
-import { handleGrowl } from '../../utils/growl';
-import { OBSERVABILITY_CONFIGURATION_TYPE } from '../../types/types';
+import { LabeledInput } from "@components/Form/LabeledInput";
+import AsyncButton from "@shell/components/AsyncButton";
+import { Banner } from "@components/Banner";
+import {
+  checkConnection,
+  ensureObservabilityUrlWhitelisted,
+} from "../../modules/stackstate";
+import { handleGrowl } from "../../utils/growl";
+import { OBSERVABILITY_CONFIGURATION_TYPE } from "../../types/types";
 
 export default {
   components: {
     LabeledInput,
     AsyncButton,
     Banner,
   },
-  props: { mode: { type: String, default: 'edit' } },
+  props: { mode: { type: String, default: "edit" } },
   async fetch() {
     const cfg = await this.observabilityConfig();
 
@@ -22,33 +25,38 @@ export default {
     }
   },
   data: () => ({
-    stackStateURL:          '',
-    stackStateServiceToken: '',
-    showSuccessfulSave:     false,
-    showEditInterface:      false,
-    urlError:               false
+    stackStateURL: "",
+    stackStateServiceToken: "",
+    showSuccessfulSave: false,
+    showEditInterface: false,
+    urlError: false,
   }),
   watch: {
     stackStateURL(neu) {
-      if (neu?.length && (neu.startsWith('http://') || neu.startsWith('https://'))) {
+      if (
+        neu?.length &&
+        (neu.startsWith("http://") || neu.startsWith("https://"))
+      ) {
         this.urlError = true;
       } else {
         this.urlError = false;
       }
-    }
+    },
   },
   computed: {
     isCreateMode() {
-      return this.mode === 'create';
+      return this.mode === "create";
     },
   },
   methods: {
     async observabilityConfig() {
-      const configs = await this.$store.dispatch('management/findAll', { type: OBSERVABILITY_CONFIGURATION_TYPE });
+      const configs = await this.$store.dispatch("management/findAll", {
+        type: OBSERVABILITY_CONFIGURATION_TYPE,
+      });
 
       if (configs) {
         for (const config of configs) {
-          if (config.metadata.name !== 'stackstate') {
+          if (config.metadata.name !== "stackstate") {
             continue;
           }
 
@@ -60,12 +68,15 @@ export default {
     },
 
     async save(btnCb) {
-      const whitelisted = await ensureObservabilityUrlWhitelisted(this.$store, this.stackStateURL);
+      const whitelisted = await ensureObservabilityUrlWhitelisted(
+        this.$store,
+        this.stackStateURL
+      );
 
       if (!whitelisted) {
         handleGrowl(this.$store, {
-          message: this.t('observability.errorMsg.urlNotWhitelisted'),
-          type:    'error',
+          message: this.t("observability.errorMsg.urlNotWhitelisted"),
+          type: "error",
         });
 
         btnCb(false);
@@ -74,14 +85,14 @@ export default {
       }
 
       const conn = await checkConnection(this.$store, {
-        apiURL:       this.stackStateURL,
+        apiURL: this.stackStateURL,
         serviceToken: this.stackStateServiceToken,
       });
 
       if (!conn) {
         handleGrowl(this.$store, {
-          message: this.t('observability.errorMsg.connectionFailed'),
-          type:    'error',
+          message: this.t("observability.errorMsg.connectionFailed"),
+          type: "error",
         });
 
         btnCb(false);
@@ -93,12 +104,12 @@ export default {
 
       if (this.isCreateMode) {
         const config = {
-          metadata: { name: `stackstate`, namespace: 'default' },
-          spec:     {},
-          type:     OBSERVABILITY_CONFIGURATION_TYPE,
+          metadata: { name: `stackstate`, namespace: "default" },
+          spec: {},
+          type: OBSERVABILITY_CONFIGURATION_TYPE,
         };
 
-        newConfig = await this.$store.dispatch('management/create', config);
+        newConfig = await this.$store.dispatch("management/create", config);
       } else {
         newConfig = await this.observabilityConfig();
       }
@@ -109,8 +120,8 @@ export default {
       try {
         await newConfig.save();
 
-        await this.$store.dispatch('observability/setConnectionInfo', {
-          apiURL:       this.stackStateURL,
+        await this.$store.dispatch("observability/setConnectionInfo", {
+          apiURL: this.stackStateURL,
           serviceToken: this.stackStateServiceToken,
         });
 
@@ -123,8 +134,8 @@ export default {
         btnCb(true);
       } catch (err) {
         handleGrowl(this.$store, {
-          message: this.t('observability.errorMsg.failedSave'),
-          type:    'error',
+          message: this.t("observability.errorMsg.failedSave"),
+          type: "error",
         });
         btnCb(false);
       }
@@ -173,22 +184,19 @@ export default {
           class="configuration-inputs"
         >
           <LabeledInput
-            v-model="stackStateURL"
+            v-model:value="stackStateURL"
             :label="t('observability.configuration.url')"
             class="url-input"
-            :class="{'error': urlError }"
+            :class="{ error: urlError }"
             required
           />
           <div class="pt-10 pb-10">
-            <p
-              v-show="urlError"
-              class="url-error mb-10"
-            >
-              {{ t('observability.configuration.urlError') }}
+            <p v-show="urlError" class="url-error mb-10">
+              {{ t("observability.configuration.urlError") }}
             </p>
           </div>
           <LabeledInput
-            v-model="stackStateServiceToken"
+            v-model:value="stackStateServiceToken"
             class="mb-20"
             type="password"
             :label="t('observability.configuration.serviceToken')"

pkg/observability/package.json

@@ -8,8 +8,8 @@
   "rancher": {
     "annotations": {
       "catalog.cattle.io/kube-version": ">= 1.16.0-0",
-      "catalog.cattle.io/rancher-version": ">= 2.9.0 < 2.10.0",
-      "catalog.cattle.io/ui-extensions-version": ">= 2.0.1"
+      "catalog.cattle.io/rancher-version": ">= 2.10.0",
+      "catalog.cattle.io/ui-extensions-version": ">= 3.0.0"
     }
   },
   "icon": "https://raw.githubusercontent.com/stackvista/rancher-extension-stackstate/main/pkg/observability/rancher-observability.svg",
@@ -18,12 +18,12 @@
     "nuxt": "./node_modules/.bin/nuxt"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=20.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.5.18",
-    "@vue/cli-plugin-typescript": "4.5.18",
-    "@vue/cli-service": "4.5.18"
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0"
   },
   "browserslist": [
     "> 1%",