build: artifact2

Signed-off-by: Andy Lee <andy.lee@suse.com>

.github/pull_request_template.md

@@ -8,16 +8,12 @@
     - [ ] Yes, the backend owner is @
     - [ ] No, frontend-only.
 
-### Related Issue
+### Related Issue #
  <!-- Link the issue as harvester/harvester#<issue_number> -->
  harvester/harvester#<issue_number>
 
 
-### Test Steps
+### Test screenshot or video (Required)
- <!-- Provide the test steps for reviewer to verify the issue -->
+<!-- Attach screenshot or video of the changes and eventual comparison if you find it necessary -->
-1. Go to ... page
-
-### Test screenshot or video
-<!-- Attach screenshot or video of the changes and eventual comparison -->
 
 

.github/workflows/build-standalone-on-merge.yaml

@@ -1,12 +1,12 @@
 name: Build Standalone on PR Merge
 
 on:
-  workflow_dispatch: # manually trigger on Github Actions only support PR branch pushed to harvester/harvester-ui-extension
   push:
     branches:
       - main
       - 'release-harvester-v*'
       - '*-dev'
+      - access_volume_mode_demo
   pull_request:
     branches:
       - main
@@ -30,35 +30,3 @@ jobs:
       id-token: write
     with:
       CI_BRANCH: ${{github.ref_name}}
-  comment-on-pr:
-    name: Comment build result on PR
-    # Only for manual runs so the existing push / pull_request flows are untouched.
-    if: github.event_name == 'workflow_dispatch'
-    needs:
-      - build
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Add build artifact comment to the PR opened from this branch
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: ${{ github.ref_name }}
-        run: |
-          set -euo pipefail
-          # Match scripts/version: sanitize the branch and map main -> latest.
-          if [ "$BRANCH" = "main" ]; then
-            DIR="latest"
-          else
-            DIR=$(printf '%s' "$BRANCH" | sed -E 's/[^a-zA-Z0-9.-]+/-/g')
-          fi
-          URL="https://releases.rancher.com/harvester-ui/dashboard/${DIR}/index.html"
-
-          PR=$(gh pr list --repo "$GITHUB_REPOSITORY" --state open --base main --head "$BRANCH" --json number --jq '.[0].number // empty')
-          if [ -z "$PR" ]; then
-            echo "No open PR found for branch $BRANCH, skipping comment."
-            exit 0
-          fi
-
-          BODY=$(printf '🚀 **UI Artifact Build Status:** `SUCCESS` ✅\n> ui-index: %s\n> ui-source: external' "$URL")
-          gh pr comment "$PR" --repo "$GITHUB_REPOSITORY" --body "$BODY"

package.json

@@ -7,8 +7,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-class-static-block": "7.29.7",
-    "@novnc/novnc": "1.7.0",
+    "@rancher/shell": "3.0.12-rc.3",
-    "@rancher/shell": "3.0.13",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.1",
     "@vue-flow/core": "^1.33.5",
@@ -16,19 +15,12 @@
     "cache-loader": "^4.1.0",
     "color": "4.2.3",
     "ip": "2.0.1",
-    "@xterm/xterm": "6.0.0",
-    "@xterm/addon-fit": "0.11.0",
-    "@xterm/addon-search": "0.16.0",
-    "@xterm/addon-web-links": "0.12.0",
-    "@xterm/addon-webgl": "0.19.0",
-    "@xterm/addon-canvas": "0.7.0",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "elkjs": "^0.11.0",
     "vue-draggable-next": "^2.2.1",
     "yaml": "^2.5.1"
   },
   "resolutions": {
-    "@novnc/novnc": "1.7.0",
     "@types/node": "25.9.5",
     "cronstrue": "2.59.0",
     "d3-color": "3.1.0",
@@ -37,12 +29,12 @@
     "glob": "7.2.3",
     "glob-parent": "6.0.2",
     "json5": "2.2.3",
-    "@types/lodash": "4.17.25",
+    "@types/lodash": "4.17.24",
     "merge": "2.1.1",
     "node-forge": "1.4.0",
     "nth-check": "2.1.1",
-    "qs": "6.16.0",
+    "qs": "6.15.3",
-    "roarr": "7.21.7",
+    "roarr": "7.21.6",
     "semver": "7.8.5",
     "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
@@ -50,17 +42,15 @@
     "dev": "NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve",
     "build": "./node_modules/.bin/vue-cli-service build",
     "clean": "./node_modules/@rancher/shell/scripts/clean",
-    "lint": "./node_modules/@rancher/shell/scripts/lint --max-warnings 0 --ext .js,.ts,.vue .",
+    "lint": "./node_modules/.bin/eslint --max-warnings 0 --ext .js,.ts,.vue .",
-    "lint:fix": "./node_modules/@rancher/shell/scripts/lint --fix --max-warnings 0 --ext .js,.ts,.vue .",
+    "lint:fix": "./node_modules/.bin/eslint --fix --max-warnings 0 --ext .js,.ts,.vue .",
     "build-pkg": "./node_modules/@rancher/shell/scripts/build-pkg.sh",
     "serve-pkgs": "./node_modules/@rancher/shell/scripts/serve-pkgs",
     "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
     "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name",
     "commitlint": "commitlint --edit",
     "prepare": "husky",
-    "agents:generate": "./scripts/generate-agent-and-persona-mds.sh",
+    "agents:generate": "./scripts/generate-agent-and-persona-mds.sh"
-    "prelint": "npm --prefix node_modules/@rancher/shell/eslint-legacy install eslint-plugin-jest@^24 --no-save --no-audit --no-fund --legacy-peer-deps --loglevel=error",
-    "prelint:fix": "npm --prefix node_modules/@rancher/shell/eslint-legacy install eslint-plugin-jest@^24 --no-save --no-audit --no-fund --legacy-peer-deps --loglevel=error"
   },
   "devDependencies": {
     "@commitlint/load": "^19.8.1",

pkg/harvester/components/FilterLabel.vue

@@ -271,9 +271,4 @@ export default {
 .filter-label .v-popper__arrow-container {
   display: none;
 }
-
-.fixed-header-actions .middle .filter + .btn-group {
-  display: inline-flex;
-  vertical-align: middle;
-}
 </style>

pkg/harvester/components/FilterVMSchedule.vue

@@ -116,11 +116,6 @@ export default {
 .vm-schedule-dropdown .v-popper__arrow-container {
   display: none;
 }
-
-.fixed-header-actions .middle .vm-schedule-filter + .btn-group {
-  display: inline-flex;
-  vertical-align: middle;
-}
 </style>
 
 <style lang="scss" scoped>

pkg/harvester/components/SerialConsole/index.vue

@@ -1,6 +1,7 @@
 <script>
 import { allHash } from '@shell/utils/promise';
 import debounce from 'lodash/debounce';
+
 import Socket, {
   EVENT_CONNECTED,
   EVENT_CONNECTING,
@@ -21,98 +22,74 @@ export default {
 
   data() {
     return {
-      socket:         null,
+      socket:      null,
-      terminal:       null,
+      terminal:    null,
-      textDecoder:    null,
+      fitAddon:    null,
-      fitAddon:       null,
+      searchAddon: null,
-      searchAddon:    null,
+      webglAddon:  null,
-      webglAddon:     null,
+      isOpen:      false,
-      onResize:       null,
+      isOpening:   false,
-      isOpen:         false,
+      backlog:     [],
-      isOpening:      false,
+      firstTime:   true,
-      backlog:        [],
+      queue:       []
-      firstTime:      true,
-      queue:          [],
-      isDraining:     false,
-      drainScheduled: false,
-      drainTimer:     null,
-      showSearch:     false,
-      searchQuery:    '',
-      searchOptions:  {
-        caseSensitive: false,
-        regex:         false,
-        wholeWord:     false,
-        incremental:   true,
-        decorations:   {
-          matchBackground:               '#B45309',
-          matchBorder:                   '#FDBA74',
-          matchOverviewRuler:            '#FDBA74',
-          activeMatchBackground:         '#EA580C',
-          activeMatchBorder:             '#FED7AA',
-          activeMatchColorOverviewRuler: '#FED7AA',
-        },
-      },
     };
   },
 
   computed: {
-    serialConsoleUrl() {
-      return this.value?.getSerialConsolePath || '';
-    },
-
     xtermConfig() {
       return {
         allowProposedApi: true,
         cursorBlink:      true,
-        cursorStyle:      'bar',
-        cursorWidth:      2,
-        scrollback:       5000,
         useStyle:         true,
-        fontFamily:       'JetBrains Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+        fontSize:         12,
-        fontSize:         16,
-        lineHeight:       1.3,
       };
     },
   },
 
+  watch: {
+    queue: {
+      handler: debounce(async function(neu) {
+        if (neu.length === 0) {
+          return;
+        }
+
+        const msg = await Promise.all(neu);
+
+        (msg || []).forEach((m) => {
+          this.terminal.write(m);
+        });
+
+        this.queue = [];
+      }, 10),
+      deep: true
+    }
+  },
+
   beforeUnmount() {
     this.close();
   },
 
-  watch: {
-    serialConsoleUrl() {
-      if (this.terminal) {
-        this.connect();
-      }
-    },
-  },
-
   async mounted() {
-    this.textDecoder = new TextDecoder('utf-8');
     await this.setupTerminal();
     await this.connect();
-    this.onResize = debounce(() => this.fit(), 100);
-    window.addEventListener('resize', this.onResize);
-    this.scheduleFit();
   },
 
   methods: {
     async setupTerminal() {
       const docStyle = getComputedStyle(document.querySelector('body'));
-      const xterm = await import(/* webpackChunkName: "xterm" */ '@xterm/xterm');
+      const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
 
       const addons = await allHash({
-        fit:      import(/* webpackChunkName: "xterm" */ '@xterm/addon-fit'),
+        fit:      import(/* webpackChunkName: "xterm" */ 'xterm-addon-fit'),
-        webgl:    import(/* webpackChunkName: "xterm" */ '@xterm/addon-webgl'),
+        webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
-        weblinks: import(/* webpackChunkName: "xterm" */ '@xterm/addon-web-links'),
+        weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
-        search:   import(/* webpackChunkName: "xterm" */ '@xterm/addon-search'),
+        search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
-        canvas:   import(/* webpackChunkName: "xterm" */ '@xterm/addon-canvas'),
       });
 
       const terminal = new xterm.Terminal({
         theme: {
           background: docStyle.getPropertyValue('--terminal-bg').trim(),
-          cursor:     docStyle.getPropertyValue('--terminal-text').trim(),
+          cursor:     docStyle.getPropertyValue('--terminal-cursor').trim(),
           foreground: docStyle.getPropertyValue('--terminal-text').trim()
         },
         ...this.xtermConfig,
@@ -120,48 +97,25 @@ export default {
 
       this.fitAddon = new addons.fit.FitAddon();
       this.searchAddon = new addons.search.SearchAddon();
+
+      try {
+        this.webglAddon = new addons.webgl.WebGlAddon();
+      } catch (e) {
+        // Some browsers (Safari) don't support the webgl renderer, so don't use it.
+        this.webglAddon = null;
+      }
+
       terminal.loadAddon(this.fitAddon);
       terminal.loadAddon(this.searchAddon);
       terminal.loadAddon(new addons.weblinks.WebLinksAddon());
       terminal.open(this.$refs.xterm);
 
-      // The webgl renderer can fail without throwing: the context may be lost
+      if ( this.webglAddon ) {
-      // mid-session, or it can attach but silently never paint, leaving the
-      // terminal's helper textarea at 0x0. Detect both cases and fall back to the
-      // canvas renderer so the terminal stays interactive.
-      try {
-        this.webglAddon = new addons.webgl.WebglAddon();
-
-        this.webglAddon.onContextLoss(() => {
-          if (!this.isUnmounted && this.terminal) {
-            this.fallbackToCanvas(terminal, addons);
-          }
-        });
-
         terminal.loadAddon(this.webglAddon);
-
-        // Detect the silent "attaches but never paints" failure after a render frame.
-        requestAnimationFrame(() => {
-          if (this.isUnmounted || !this.terminal) {
-            return;
-          }
-
-          const textarea = this.$refs.xterm?.querySelector('.xterm-helper-textarea');
-          const hasPainted = textarea && textarea.getBoundingClientRect().height > 0;
-
-          if (this.webglAddon && !hasPainted) {
-            this.fallbackToCanvas(terminal, addons);
-            this.fit();
-          }
-        });
-      } catch (e) {
-        // Some browsers (e.g. Safari) don't support the webgl renderer, so don't use it.
-        this.fallbackToCanvas(terminal, addons);
       }
 
       this.fit();
       this.flush();
-      this.scheduleDrainQueue();
 
       terminal.onData((input) => {
         const msg = this.str2ab(input);
@@ -169,132 +123,9 @@ export default {
         this.write(msg);
       });
 
-      terminal.attachCustomKeyEventHandler((event) => {
-        const key = event.key?.toLowerCase();
-
-        if ((event.ctrlKey || event.metaKey) && key === 'f') {
-          event.preventDefault();
-          this.openSearch();
-
-          return false;
-        }
-
-        if (key === 'escape' && this.showSearch) {
-          event.preventDefault();
-          this.closeSearch();
-
-          return false;
-        }
-
-        return true;
-      });
-
       this.terminal = terminal;
     },
 
-    openSearch() {
-      this.showSearch = true;
-
-      this.$nextTick(() => {
-        const input = this.$refs.searchInput;
-
-        if (input) {
-          input.focus();
-          input.select();
-        }
-      });
-    },
-
-    closeSearch() {
-      this.showSearch = false;
-      this.searchQuery = '';
-      this.clearSearchHighlights();
-      this.terminal?.focus();
-    },
-
-    clearSearchHighlights() {
-      this.searchAddon?.clearActiveDecoration();
-      this.searchAddon?.clearDecorations();
-      this.terminal?.clearSelection();
-
-      // Disposing the search decorations doesn't repaint the webgl/canvas
-      // layer, so force a refresh to remove the lingering highlight.
-      if (this.terminal) {
-        this.terminal.refresh(0, this.terminal.rows - 1);
-      }
-    },
-
-    findNext() {
-      if (!this.searchAddon || !this.searchQuery) {
-        return;
-      }
-
-      this.searchAddon.findNext(this.searchQuery, this.searchOptions);
-    },
-
-    findPrevious() {
-      if (!this.searchAddon || !this.searchQuery) {
-        return;
-      }
-
-      this.searchAddon.findPrevious(this.searchQuery, this.searchOptions);
-    },
-
-    onSearchInput() {
-      if (!this.searchQuery) {
-        this.clearSearchHighlights();
-
-        return;
-      }
-
-      this.findNext();
-    },
-
-    onSearchKeydown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (event.shiftKey) {
-          this.findPrevious();
-        } else {
-          this.findNext();
-        }
-      }
-
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        this.closeSearch();
-      }
-    },
-
-    scheduleFit() {
-      this.$nextTick(() => {
-        requestAnimationFrame(() => {
-          this.fit();
-
-          // Re-fit after layout settles to avoid undersized rows on first paint.
-          setTimeout(() => this.fit(), 120);
-        });
-      });
-    },
-
-    // Dispose the webgl renderer (if any) and switch to the canvas renderer.
-    // Used when webgl fails to construct, loses its context, or silently never paints.
-    fallbackToCanvas(terminal, addons) {
-      if (this.isUnmounted) {
-        return;
-      }
-
-      this.webglAddon?.dispose();
-      this.webglAddon = null;
-
-      if (!this.canvasAddon) {
-        this.canvasAddon = new addons.canvas.CanvasAddon();
-        terminal.loadAddon(this.canvasAddon);
-      }
-      this.fit();
-    },
-
     str2ab(str) {
       const enc = new TextEncoder();
 
@@ -309,131 +140,12 @@ export default {
       }
     },
 
-    enqueueMessage(messagePromise) {
-      this.queue.push(messagePromise);
-      this.scheduleDrainQueue();
-    },
-
-    scheduleDrainQueue() {
-      if (this.drainScheduled || this.isDraining || !this.terminal) {
-        return;
-      }
-
-      this.drainScheduled = true;
-
-      const shouldDrainImmediately = this.queue.length <= 3;
-
-      const runDrain = () => {
-        this.drainScheduled = false;
-        this.drainTimer = null;
-        this.drainQueue();
-      };
-
-      if (shouldDrainImmediately) {
-        runDrain();
-
-        return;
-      }
-
-      this.drainTimer = requestAnimationFrame(runDrain);
-    },
-
-    async decodeMessageData(data) {
-      if (typeof data === 'string') {
-        return data;
-      }
-
-      if (!this.textDecoder) {
-        this.textDecoder = new TextDecoder('utf-8');
-      }
-
-      if (data instanceof Blob) {
-        const buffer = await data.arrayBuffer();
-
-        return this.textDecoder.decode(new Uint8Array(buffer), { stream: true });
-      }
-
-      if (data instanceof ArrayBuffer) {
-        return this.textDecoder.decode(new Uint8Array(data), { stream: true });
-      }
-
-      if (ArrayBuffer.isView(data)) {
-        const view = data;
-        const bytes = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
-
-        return this.textDecoder.decode(bytes, { stream: true });
-      }
-
-      return String(data || '');
-    },
-
-    async drainQueue() {
-      if (this.isDraining || !this.terminal) {
-        return;
-      }
-
-      this.isDraining = true;
-
-      try {
-        while (this.queue.length > 0) {
-          const pendingMessages = this.queue.splice(0, this.queue.length);
-          const settledMessages = await Promise.allSettled(pendingMessages);
-          const messages = settledMessages
-            .filter((result) => result.status === 'fulfilled')
-            .map((result) => result.value);
-          const output = messages.filter(Boolean).join('');
-
-          if (output) {
-            await this.writeOutputInChunks(output);
-          }
-
-          if (this.queue.length > 0) {
-            await this.nextFrame();
-          }
-        }
-      } finally {
-        this.isDraining = false;
-
-        // If data arrived between the last while-check and releasing the lock,
-        // immediately schedule another drain so output never gets stuck.
-        if (this.queue.length > 0 && this.terminal) {
-          this.scheduleDrainQueue();
-        }
-      }
-    },
-
-    async writeOutputInChunks(output) {
-      if (!output) {
-        return;
-      }
-
-      const chunkSize = output.length > 20000 ? 16000 : output.length > 8000 ? 8000 : output.length;
-
-      if (chunkSize === output.length) {
-        this.terminal.write(output);
-
-        return;
-      }
-
-      for (let index = 0; index < output.length; index += chunkSize) {
-        this.terminal.write(output.slice(index, index + chunkSize));
-
-        if (index + chunkSize < output.length) {
-          await this.nextFrame();
-        }
-      }
-    },
-
-    nextFrame() {
-      return new Promise((resolve) => requestAnimationFrame(resolve));
-    },
-
     clear() {
       this.terminal.clear();
     },
 
     getSocketUrl() {
-      return this.serialConsoleUrl;
+      return `${ this.value?.getSerialConsolePath }`;
     },
 
     async connect() {
@@ -469,7 +181,6 @@ export default {
           this.fit();
           this.flush();
         }
-        this.scheduleFit();
 
         if (this.firstTime) {
           this.socket.send(this.str2ab('\n'));
@@ -484,7 +195,7 @@ export default {
       });
 
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        this.enqueueMessage(this.decodeMessageData(e.detail.data));
+        this.queue.push(e.detail.data.text());
       });
 
       this.socket.connect();
@@ -507,19 +218,22 @@ export default {
       }
 
       this.fitAddon.fit();
+
+      const { rows, cols } = this.fitAddon.proposeDimensions();
+
+      if ( !this.isOpen ) {
+        return;
+      }
+
+      const message = JSON.stringify({
+        Width:  cols,
+        Height: rows
+      });
+
+      this.socket.send(this.str2ab(message));
     },
 
     close() {
-      if (this.onResize) {
-        window.removeEventListener('resize', this.onResize);
-        this.onResize = null;
-      }
-
-      if (this.drainTimer) {
-        cancelAnimationFrame(this.drainTimer);
-        this.drainTimer = null;
-      }
-
       if ( this.socket ) {
         this.socket.disconnect();
       }
@@ -534,44 +248,6 @@ export default {
 
 <template>
   <div class="harvester-shell-container">
-    <div
-      v-if="showSearch"
-      class="shell-search"
-    >
-      <input
-        ref="searchInput"
-        v-model="searchQuery"
-        type="text"
-        class="shell-search-input"
-        placeholder="Search in terminal"
-        @input="onSearchInput"
-        @keydown="onSearchKeydown"
-      >
-      <button
-        class="btn role-secondary btn-sm shell-search-btn"
-        type="button"
-        title="Shift+Enter"
-        @click="findPrevious"
-      >
-        Prev
-      </button>
-      <button
-        class="btn role-secondary btn-sm shell-search-btn"
-        type="button"
-        title="Enter"
-        @click="findNext"
-      >
-        Next
-      </button>
-      <button
-        class="btn role-secondary btn-sm shell-search-btn"
-        type="button"
-        title="Esc"
-        @click="closeSearch"
-      >
-        Close
-      </button>
-    </div>
     <div
       ref="xterm"
       class="shell-body"
@@ -581,73 +257,18 @@ export default {
 </template>
 
 <style lang="scss">
-  @import '../../../../node_modules/@xterm/xterm/css/xterm.css';
+  @import '../../../../node_modules/xterm/css/xterm.css';
 
   body, #__nuxt, #__layout, MAIN {
     height: 100%;
   }
 
   .harvester-shell-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
     height: 100%;
-    min-height: 0;
     overflow: hidden;
 
-    .resize-observer {
+    .shell-body, .terminal.xterm {
-      display: none;
-    }
-
-    .shell-search {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      justify-content: flex-end;
-      position: absolute;
-      top: 8px;
-      right: 10px;
-      z-index: 5;
-      padding: 8px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-      background: color-mix(in srgb, var(--body-bg) 88%, transparent);
-    }
-
-    .shell-search-input {
-      min-width: 220px;
-      max-width: 420px;
-      flex: 0 1 320px;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      background: var(--body-bg);
-      color: var(--body-text);
-      padding: 6px 8px;
-    }
-
-    .shell-search-btn {
-      min-width: 64px;
-    }
-
-    .shell-body {
-      flex: 1 1 auto;
       height: 100%;
-      width: 100%;
-      min-height: 0;
-      padding: 0 10px;
-      box-sizing: border-box;
-    }
-
-    .terminal.xterm,
-    .terminal.xterm .xterm-viewport,
-    .terminal.xterm .xterm-screen,
-    .terminal.xterm .xterm-scrollable-element {
-      width: 100%;
-      height: 100%;
-    }
-
-    .terminal.xterm .xterm-scrollable-element {
-      min-height: 100%;
     }
   }
 </style>

pkg/harvester/components/SettingList.vue

@@ -231,21 +231,14 @@ export default {
               v-if="setting.customized"
               class="modified"
             >
-              {{ t('advancedSettings.tags.modified.label') }}
+              Modified
             </span>
             <span
               v-if="setting.experimental"
-              v-clean-tooltip="t('advancedSettings.tags.experimental.description')"
+              v-clean-tooltip="t('advancedSettings.experimental')"
               class="experimental"
             >
-              {{ t('advancedSettings.tags.experimental.label') }}
+              Experimental
-            </span>
-            <span
-              v-if="setting.preview"
-              v-clean-tooltip="t('advancedSettings.tags.preview.description')"
-              class="preview"
-            >
-              {{ t('advancedSettings.tags.preview.label') }}
             </span>
           </h1>
           <h2 v-clean-html="t(setting.description, getDocLinkParams(setting) || {}, true)">
@@ -359,19 +352,21 @@ export default {
   flex: 1;
 }
 
-.modified,
+.modified {
-.experimental,
-.preview {
   margin-left: 10px;
-  border: 1px solid;
+  border: 1px solid var(--primary);
   border-radius: 5px;
   padding: 2px 10px;
   font-size: 12px;
 }
 
-.modified { border-color: var(--primary); }
+.experimental {
-.experimental { border-color: var(--error); }
+  margin-left: 10px;
-.preview { border-color: var(--warning); }
+  border: 1px solid var(--error);
+  border-radius: 5px;
+  padding: 2px 10px;
+  font-size: 12px;
+}
 
 .no-search-match {
   text-align: center;

pkg/harvester/components/VMConsoleBar.vue

@@ -55,10 +55,6 @@ export default {
       const host = window.location.host;
       const prefix = window.location.pathname.replace(this.$route.path, '');
       const params = this.$route?.params;
-      const popupWidth = Math.max(800, screen.width - 200);
-      const popupHeight = Math.max(600, screen.height - 200);
-      const popupLeft = Math.max(0, window.screenX + Math.floor((window.outerWidth - popupWidth) / 2));
-      const popupTop = Math.max(0, window.screenY + Math.floor((window.outerHeight - popupHeight) / 2));
 
       const url = `https://${ host }${ prefix }/${ PRODUCT_NAME }/c/${ params.cluster }/console/${ uid }/${ type }`;
 
@@ -67,7 +63,7 @@ export default {
         window.open(
           url,
           '_blank',
-          `toolbars=0,width=${ popupWidth },height=${ popupHeight },left=${ popupLeft },top=${ popupTop },noreferrer`
+          `toolbars=0,width=${ screen.width - 200 },height=${ screen.height - 200 },left=0,top=0,noreferrer`
         );
       });
     },

pkg/harvester/components/novnc/NovncConsole.vue

@@ -1,99 +1,64 @@
+<template>
+  <div>
+    <div v-if="connected && disconnected">
+      <main class="main-layout error">
+        <div class="text-center">
+          <BrandImage
+            file-name="error-desert-landscape.svg"
+            width="900"
+            height="300"
+          />
+          <h1>
+            {{ t('generic.notification.title.warning') }}
+          </h1>
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.error.message') }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div v-if="reconnecting">
+      <main class="main-layout">
+        <div class="text-center">
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.reconnecting.message') }}：{{ retryTimes }} of {{ maximumRetryTimes }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div
+      ref="view"
+    />
+  </div>
+</template>
+
 <script>
+import RFB from '@novnc/novnc/core/rfb';
 import BrandImage from '@shell/components/BrandImage';
-import ZoomableRFB from './ZoomableRFB';
-
-export const CONSOLE_STATUS = {
-  CONNECTING:   'connecting',
-  CONNECTED:    'connected',
-  RECONNECTING: 'reconnecting',
-  DISCONNECTED: 'disconnected',
-  FAILED:       'failed',
-};
-
-const MAXIMUM_RETRY_TIMES = 10;
-const BASE_RECONNECT_DELAY = 1000;
-const MAXIMUM_RECONNECT_DELAY = 30000;
-
-const clampLevel = (value, fallback) => {
-  const level = Number.parseInt(value, 10);
-
-  if (Number.isNaN(level)) {
-    return fallback;
-  }
-
-  return Math.min(Math.max(level, 0), 9);
-};
 
 export default {
-  name: 'NovncConsole',
-
-  components: { BrandImage },
-
   props: {
     url: {
       type:    String,
       default: ''
-    },
+    }
-
-    settings: {
-      type:    Object,
-      default: () => ({})
-    },
   },
 
-  emits: ['status-changed', 'capabilities'],
+  components: { BrandImage },
 
   data() {
     return {
       rfb:               null,
-      status:            CONSOLE_STATUS.CONNECTING,
+      connected:         false,
-      statusDetail:      '',
+      disconnected:      false,
-      desktopName:       '',
+      reconnectDelay:    3000,
+      reconnecting:      false,
+      maximumRetryTimes: 10,
       retryTimes:        0,
-      maximumRetryTimes: MAXIMUM_RETRY_TIMES,
+      setTimeout:        null,
-      reconnectTimer:    null,
-      isClosed:          false,
     };
   },
 
-  computed: {
-    statusInfo() {
-      return {
-        status:            this.status,
-        detail:            this.statusDetail,
-        desktopName:       this.desktopName,
-        retryTimes:        this.retryTimes,
-        maximumRetryTimes: this.maximumRetryTimes,
-      };
-    },
-
-    showError() {
-      return this.status === CONSOLE_STATUS.FAILED;
-    },
-
-    showReconnecting() {
-      return this.status === CONSOLE_STATUS.RECONNECTING;
-    },
-  },
-
-  watch: {
-    url() {
-      this.reconnect();
-    },
-
-    settings: {
-      deep:    true,
-      handler: 'applySettings'
-    },
-
-    statusInfo: {
-      immediate: true,
-      handler(neu) {
-        this.$emit('status-changed', neu);
-      }
-    },
-  },
-
   mounted() {
     this.$nextTick(() => {
       this.connect();
@@ -101,307 +66,88 @@ export default {
   },
 
   beforeUnmount() {
-    this.isClosed = true;
+    this.clearTimeout();
-    this.clearReconnectTimer();
-    this.teardown();
   },
 
   methods: {
-    connect(takeOver = false) {
+    connect() {
-      if (!this.url || this.isClosed) {
+      const rfb = new RFB(this.$refs.view, this.url);
-        return;
-      }
 
-      this.teardown();
+      rfb.addEventListener('connect', () => {
+        this.clearTimeout();
 
-      this.status = this.retryTimes > 0 ? CONSOLE_STATUS.RECONNECTING : CONSOLE_STATUS.CONNECTING;
+        this.connected = true;
+        this.retryTimes = 0;
+        this.reconnecting = false;
+      });
 
-      let rfb;
+      rfb.addEventListener('disconnect', (e) => {
+        this.clearTimeout();
 
-      try {
+        this.disconnected = true;
-        const url = new URL(this.url);
+        this.rfb = null;
-
+        this.reconnect();
-        url.searchParams.set('preserveSession', takeOver === true ? 'false' : 'true');
+      });
-        rfb = new ZoomableRFB(this.$refs.view, url.href, { shared: true });
-      } catch (err) {
-        this.statusDetail = err?.message || `${ err }`;
-        this.status = CONSOLE_STATUS.FAILED;
-
-        return;
-      }
-
-      rfb.addEventListener('connect', this.onConnect);
-      rfb.addEventListener('disconnect', this.onDisconnect);
-      rfb.addEventListener('securityfailure', this.onSecurityFailure);
-      rfb.addEventListener('credentialsrequired', this.onCredentialsRequired);
-      rfb.addEventListener('desktopname', this.onDesktopName);
-      rfb.addEventListener('capabilities', this.onCapabilities);
 
       this.rfb = rfb;
-      this.applySettings();
     },
 
     reconnect() {
-      this.clearReconnectTimer();
-
-      this.isClosed = false;
-      this.retryTimes = 0;
-      this.statusDetail = '';
-      this.connect();
-    },
-
-    takeOver() {
-      if (!window.confirm(this.t('harvester.virtualMachine.detail.console.takeOver.confirm'))) {
-        return;
-      }
-
-      this.clearReconnectTimer();
-      this.isClosed = false;
-      this.retryTimes = 0;
-      this.statusDetail = '';
-      this.connect(true);
-    },
-
-    disconnect() {
-      this.isClosed = true;
-      this.clearReconnectTimer();
-      this.teardown();
-      this.status = CONSOLE_STATUS.DISCONNECTED;
-    },
-
-    onConnect() {
-      this.clearReconnectTimer();
-
-      this.retryTimes = 0;
-      this.statusDetail = '';
-      this.status = CONSOLE_STATUS.CONNECTED;
-      this.applySettings();
-    },
-
-    onDisconnect() {
-      const wasConnected = this.status === CONSOLE_STATUS.CONNECTED;
-
-      this.teardown(false);
-
-      if (this.isClosed) {
-        if (this.status !== CONSOLE_STATUS.FAILED) {
-          this.status = CONSOLE_STATUS.DISCONNECTED;
-        }
-
-        return;
-      }
-
-      if (wasConnected) {
-        this.scheduleReconnect();
-      } else {
-        this.clearReconnectTimer();
-        this.statusDetail = this.t('harvester.virtualMachine.detail.console.status.unavailable');
-        this.status = CONSOLE_STATUS.FAILED;
-      }
-    },
-
-    // Authentication problems will not fix themselves, so stop retrying.
-    onSecurityFailure(e) {
-      this.statusDetail = e?.detail?.reason || '';
-      this.isClosed = true;
-      this.clearReconnectTimer();
-      this.status = CONSOLE_STATUS.FAILED;
-    },
-
-    onCredentialsRequired() {
-      this.statusDetail = this.t('harvester.virtualMachine.detail.console.status.credentialsRequired');
-      this.isClosed = true;
-      this.clearReconnectTimer();
-      this.status = CONSOLE_STATUS.FAILED;
-    },
-
-    onDesktopName(e) {
-      this.desktopName = e?.detail?.name || '';
-    },
-
-    onCapabilities(e) {
-      this.$emit('capabilities', e?.detail?.capabilities || {});
-    },
-
-    scheduleReconnect() {
-      this.clearReconnectTimer();
-
-      if (this.isClosed) {
-        return;
-      }
-
       if (this.retryTimes >= this.maximumRetryTimes) {
-        this.status = CONSOLE_STATUS.FAILED;
+        this.reconnecting = false;
+        this.connected = true;
+        this.disconnected = true;
 
         return;
       }
 
       this.retryTimes += 1;
-      this.status = CONSOLE_STATUS.RECONNECTING;
+      this.reconnecting = true;
+      this.connected = false;
+      this.disconnected = false;
 
-      const delay = Math.min(BASE_RECONNECT_DELAY * (2 ** (this.retryTimes - 1)), MAXIMUM_RECONNECT_DELAY);
+      this.setTimeout = setTimeout(() => {
-
-      this.reconnectTimer = setTimeout(() => {
-        this.reconnectTimer = null;
         this.connect();
-      }, delay);
+      }, this.reconnectDelay);
     },
 
-    clearReconnectTimer() {
+    clearTimeout() {
-      if (this.reconnectTimer) {
+      if (this.setTimeout) {
-        clearTimeout(this.reconnectTimer);
+        clearTimeout(this.setTimeout);
-        this.reconnectTimer = null;
       }
     },
 
-    teardown(disconnect = true) {
+    disconnect() {
-      const rfb = this.rfb;
+      this.rfb.disconnect();
-
-      if (!rfb) {
-        return;
-      }
-
-      this.rfb = null;
-
-      rfb.removeEventListener('connect', this.onConnect);
-      rfb.removeEventListener('disconnect', this.onDisconnect);
-      rfb.removeEventListener('securityfailure', this.onSecurityFailure);
-      rfb.removeEventListener('credentialsrequired', this.onCredentialsRequired);
-      rfb.removeEventListener('desktopname', this.onDesktopName);
-      rfb.removeEventListener('capabilities', this.onCapabilities);
-
-      if (!disconnect) {
-        return;
-      }
-
-      try {
-        rfb.disconnect();
-      } catch (err) {
-        // The socket may already be gone, nothing left to clean up.
-      }
-    },
-
-    applySettings() {
-      const rfb = this.rfb;
-
-      if (!rfb) {
-        return;
-      }
-
-      const settings = this.settings || {};
-
-      rfb.viewOnly = !!settings.viewOnly;
-      rfb.scaleViewport = !!settings.scaleViewport;
-      rfb.resizeSession = !!settings.resizeSession;
-      rfb.clipViewport = !!settings.clipViewport;
-      rfb.dragViewport = !!settings.dragViewport;
-      rfb.zoomPercent = settings.zoomPercent;
-      rfb.focusOnClick = settings.focusOnClick !== false;
-      rfb.qualityLevel = clampLevel(settings.qualityLevel, 6);
-      rfb.compressionLevel = clampLevel(settings.compressionLevel, 2);
     },
 
     ctrlAltDelete() {
-      this.rfb?.sendCtrlAltDel();
+      this.rfb.sendCtrlAltDel();
     },
 
     sendKey(keysym, code, down) {
-      this.rfb?.sendKey(keysym, code, down);
+      this.rfb.sendKey(keysym, code, down);
-    },
+    }
-
   }
 };
 </script>
 
-<template>
-  <div class="novnc-console">
-    <div
-      ref="view"
-      class="novnc-screen"
-    />
-
-    <div
-      v-if="showError || showReconnecting"
-      class="novnc-overlay"
-    >
-      <div
-        v-if="showError"
-        class="text-center"
-      >
-        <BrandImage
-          file-name="error-desert-landscape.svg"
-          width="900"
-          height="300"
-        />
-        <h1>
-          {{ t('generic.notification.title.warning') }}
-        </h1>
-        <h2 class="text-secondary mt-20">
-          {{ t('vncConsole.error.message') }}
-        </h2>
-        <p
-          v-if="statusDetail"
-          class="text-muted mt-10"
-        >
-          {{ statusDetail }}
-        </p>
-        <button
-          class="btn role-primary mt-20"
-          @click="reconnect"
-        >
-          {{ t('harvester.action.reconnect') }}
-        </button>
-        <button
-          v-if="!isClosed"
-          class="btn role-secondary mt-20 ml-10"
-          @click="takeOver"
-        >
-          {{ t('harvester.virtualMachine.detail.console.takeOver.label') }}
-        </button>
-      </div>
-
-      <h2
-        v-else
-        class="text-secondary"
-      >
-        {{ t('vncConsole.reconnecting.message') }}：{{ retryTimes }} of {{ maximumRetryTimes }}
-      </h2>
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
-  .novnc-console {
+  .error {
-    position: relative;
-    box-sizing: border-box;
-    height: 100%;
-    padding: 8px;
     overflow: hidden;
-  }
 
-  .novnc-screen {
+    .row {
-    height: 100%;
+      align-items: center;
-  }
+    }
-
-  .novnc-overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: auto;
-    background: rgba(0, 0, 0, 0.75);
 
     h1 {
       font-size: 5rem;
     }
 
-    img {
+    .desert-landscape {
-      max-width: 100%;
+      img {
+        max-width: 100%;
+      }
     }
   }
 </style>

pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue

@@ -0,0 +1,264 @@
+<script>
+import { STEVE } from '@shell/config/types';
+import Banner from '@components/Banner/Banner.vue';
+import AsyncButton from '@shell/components/AsyncButton';
+import ModalWithCard from '@shell/components/ModalWithCard';
+
+const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
+
+export default {
+  name: 'NovncConsoleCustomKeys',
+
+  emits: ['close'],
+
+  components: {
+    ModalWithCard, Banner, AsyncButton
+  },
+
+  data() {
+    return {
+      keysRecord:            [],
+      addedShortcutKeys:     [],
+      preferredShortcutKeys: [],
+      isRecording:           false,
+    };
+  },
+
+  computed: {
+    savedShortcutKeys() {
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE);
+      const preferedShortcutKeys = preference?.[0]?.data?.[PREFERED_SHORTCUT_KEYS];
+      let out = [];
+
+      if (!preferedShortcutKeys) {
+        return out;
+      }
+
+      try {
+        out = JSON.parse(preferedShortcutKeys);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: this.t('harvester.virtualMachine.detail.console.customShortcutKeys') }),
+          err,
+        }, { root: true });
+      }
+
+      return out;
+    },
+
+    displayedKeys() {
+      const out = this.addedShortcutKeys.concat(this.preferredShortcutKeys).map((item) => {
+        const out = item.map((K) => ` <code>${ K.key.charAt(0).toUpperCase() + K.key.slice(1) }</code>`);
+
+        return out.join(',');
+      });
+
+      return out;
+    },
+
+    recordButton() {
+      if (this.isRecording) {
+        return 'harvester.virtualMachine.detail.console.record.stop';
+      }
+
+      return 'harvester.virtualMachine.detail.console.record.start';
+    },
+
+    keysRecordFormat() {
+      if (!this.isRecording && this.keysRecord.length === 0) {
+        return this.t('harvester.virtualMachine.detail.console.record.tips');
+      }
+
+      const out = this.keysRecord.map((item) => ` <code>${ item.key.charAt(0).toUpperCase() + item.key.slice(1) }</code>`);
+
+      return `Keys: ${ out.join(',') }`;
+    },
+
+    canAdd() {
+      const hasRecord = this.keysRecord.length > 0;
+      let validationList = [].concat(this.preferredShortcutKeys, this.addedShortcutKeys);
+
+      if (!hasRecord) {
+        return false;
+      }
+
+      validationList.push(this.keysRecord);
+
+      validationList = validationList.map((item) => {
+        const out = item.map((K) => K.key);
+
+        return out.join(',');
+      });
+
+      return validationList.length === new Set(validationList).size;
+    },
+  },
+
+  watch: {
+    savedShortcutKeys: {
+      handler() {
+        this.preferredShortcutKeys = [].concat(this.savedShortcutKeys) || [];
+      },
+      immediate: true
+    },
+  },
+
+  methods: {
+    closeRecordingModal() {
+      window.removeEventListener('keydown', this.handleShortcut);
+      this.$emit('close');
+    },
+
+    toggleRecording() {
+      this.isRecording = !this.isRecording;
+
+      if (this.isRecording) {
+        this.keysRecord = [];
+        window.addEventListener('keydown', this.handleShortcut);
+      } else {
+        window.removeEventListener('keydown', this.handleShortcut);
+      }
+    },
+
+    handleShortcut(event) {
+      event.preventDefault();
+
+      const {
+        key, keyCode, code, location, charCode
+      } = event;
+
+      this.keysRecord.push({
+        key, keyCode, code, location, charCode
+      });
+    },
+
+    addShortcutKey() {
+      this.addedShortcutKeys.push([].concat(this.keysRecord));
+    },
+
+    removeKey(keys) {
+      const key = keys.replace(/(\s*)<code>|<\/code>/g, '').replace(/\s*,\s*/g, ',');
+
+      this.addedShortcutKeys = this.addedShortcutKeys.filter((item) => {
+        const formatkey = item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+
+        return formatkey !== key;
+      });
+
+      this.preferredShortcutKeys = this.preferredShortcutKeys.filter((item) => {
+        const formatkey = item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+
+        return formatkey !== key;
+      });
+    },
+
+    async saveKeys(buttonCb) {
+      const out = [].concat(this.preferredShortcutKeys, this.addedShortcutKeys);
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE)?.[0];
+
+      try {
+        preference.data[PREFERED_SHORTCUT_KEYS] = JSON.stringify(out);
+        await preference.save();
+        this.closeRecordingModal();
+        buttonCb(true);
+      } catch (err) {
+        buttonCb(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <ModalWithCard
+    name="recordShortcutKeys"
+    :width="550"
+  >
+    <template #title>
+      <t k="harvester.virtualMachine.detail.console.customShortcutKeys" />
+    </template>
+
+    <template #content>
+      <div class="row">
+        <div class="col span-12">
+          <Banner color="info">
+            <span v-clean-html="keysRecordFormat"></span>
+          </Banner>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-12">
+          <button
+            class="btn bg-primary"
+            @click="toggleRecording"
+          >
+            <t :k="recordButton" />
+            <i
+              class="icon icon-fw"
+              :class="isRecording ? 'icon-dot-open' : 'icon-dot'"
+            />
+          </button>
+          <button
+            :disabled="!canAdd"
+            class="btn bg-primary"
+            @click="addShortcutKey"
+          >
+            <t k="generic.add" />
+          </button>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="displayed-keys mt-20">
+        <h4
+          v-clean-html="t('harvester.virtualMachine.detail.console.record.preferredKeys')"
+          class="text-default-text"
+        />
+
+        <div class="displayed-banners">
+          <Banner
+            v-for="(keys,index) in displayedKeys"
+            :key="index"
+          >
+            <span v-clean-html="keys"></span>
+          </Banner>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="actions">
+        <button
+          class="btn role-secondary mr-20"
+          @click.prevent="closeRecordingModal"
+        >
+          <t k="generic.close" />
+        </button>
+        <AsyncButton
+          mode="done"
+          @click="saveKeys"
+        />
+      </div>
+    </template>
+  </ModalWithCard>
+</template>
+
+<style lang="scss" scoped>
+  .displayed-keys {
+    .banner {
+      margin: 0;
+    }
+  }
+
+  .displayed-banners {
+    max-height: 155px;
+    overflow: auto;
+  }
+
+  .actions {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

pkg/harvester/components/novnc/NovncConsoleWrapper.vue

@@ -1,26 +1,15 @@
 <script>
+import { STEVE } from '@shell/config/types';
 import { escapeHtml } from '@shell/utils/string';
 import { allHash } from '@shell/utils/promise';
 import KeyTable from '@novnc/novnc/core/input/keysym';
+import * as KeyboardUtil from '@novnc/novnc/core/input/util';
 import { HCI } from '../../types';
 import NovncConsole from './NovncConsole';
 import NovncConsoleItem from './NovncConsoleItem';
-import { normalizeZoom } from './ZoomableRFB';
+import NovncConsoleCustomKeys from './NovncConsoleCustomKeys';
 
-const CONSOLE_SETTINGS_KEY = 'harvester-vnc-console-settings';
+const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
-
-const VIEW_MODE = {
-  SCALE:  'scale',
-  NONE:   'none',
-};
-
-const DEFAULT_SETTINGS = {
-  viewMode:         VIEW_MODE.NONE,
-  zoomPercent:      100,
-  viewOnly:         false,
-  qualityLevel:     6,
-  compressionLevel: 2,
-};
 
 const SHORT_KEYS = {
   ControlLeft: {
@@ -116,7 +105,9 @@ const F_KEYS = {
 
 export default {
   name:       'NovncConsoleWrapper',
-  components: { NovncConsole, NovncConsoleItem },
+  components: {
+    NovncConsole, NovncConsoleItem, NovncConsoleCustomKeys
+  },
 
   async fetch() {
     const _hash = { vmResource: this.$store.dispatch('harvester/find', { type: HCI.VM, id: this.value.id }) };
@@ -140,21 +131,39 @@ export default {
     return {
       keysRecord:        [],
       vmResource:        {},
-      settings:          { ...DEFAULT_SETTINGS },
+      renderKeysModal:   false,
-      capabilities:      {},
+      currentUser:       null,
-      isFullscreen:      false,
+      hideCustomKeysBar: false,
-      consoleStatus:     {
-        status:            'connecting',
-        retryTimes:        0,
-        maximumRetryTimes: 0,
-        desktopName:       '',
-      },
     };
   },
 
   computed: {
-    canSendKeys() {
+    savedShortcutKeys() {
-      return this.consoleStatus.status === 'connected' && !this.settings.viewOnly;
+      const preference = this.$store.getters['management/all'](STEVE.PREFERENCE);
+      const preferedShortcutKeys = preference?.[0]?.data?.[PREFERED_SHORTCUT_KEYS];
+      let out = [];
+
+      if (!preference?.[0]?.data) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.hideCustomKeysBar = true;
+
+        return out;
+      }
+
+      if (!preferedShortcutKeys) {
+        return out;
+      }
+
+      try {
+        out = JSON.parse(preferedShortcutKeys);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(this.value.metadata.name) }),
+          err,
+        }, { root: true });
+      }
+
+      return out;
     },
 
     isDown() {
@@ -183,16 +192,13 @@ export default {
         ...F_KEYS,
       };
 
-      out.AltLeft = { ...SHORT_KEYS.AltLeft, keys: { PrintScreen: FUNCTION_KEYS.PrintScreen, ...F_KEYS } };
+      out.AltLeft.keys = { PrintScreen: FUNCTION_KEYS.PrintScreen, ...F_KEYS };
-      out.ControlLeft = {
+      out.ControlLeft.keys = {
-        ...SHORT_KEYS.ControlLeft,
+        AltLeft: {
-        keys: {
+          ...Object.assign(SHORT_KEYS.AltLeft, {}),
-          AltLeft: {
+          keys: { Delete: FUNCTION_KEYS.Delete }
-            ...SHORT_KEYS.AltLeft,
-            keys: { Delete: FUNCTION_KEYS.Delete }
-          },
-          ...NORMAL_KEYS,
         },
+        ...NORMAL_KEYS,
       };
 
       return out;
@@ -202,53 +208,14 @@ export default {
       return !!this.vmResource?.actions?.softreboot;
     },
 
-    rfbSettings() {
+    preferredShortcutKeys() {
-      return {
+      return (this.savedShortcutKeys || []).map((item) => {
-        viewOnly:         this.settings.viewOnly,
+        return {
-        scaleViewport:    this.settings.viewMode === VIEW_MODE.SCALE,
+          label: item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join('+'),
-        zoomPercent:      normalizeZoom(this.settings.zoomPercent),
+          value: item
-        resizeSession:    false,
+        };
-        clipViewport:     false,
+      });
-        dragViewport:     false,
-        qualityLevel:     this.settings.qualityLevel,
-        compressionLevel: this.settings.compressionLevel,
-      };
     },
-
-    viewModeOptions() {
-      return Object.values(VIEW_MODE).map((value) => ({
-        value,
-        label: this.t(`harvester.virtualMachine.detail.console.settings.viewMode.${ value }`)
-      }));
-    },
-
-    statusLabel() {
-      const { status, retryTimes, maximumRetryTimes } = this.consoleStatus;
-
-      if (status === 'reconnecting') {
-        return this.t('harvester.virtualMachine.detail.console.status.reconnecting', { retryTimes, maximumRetryTimes });
-      }
-
-      return this.t(`harvester.virtualMachine.detail.console.status.${ status }`);
-    },
-  },
-
-  watch: {
-    settings: {
-      deep: true,
-      handler(neu) {
-        window.localStorage.setItem(CONSOLE_SETTINGS_KEY, JSON.stringify(neu));
-      }
-    },
-  },
-
-  mounted() {
-    this.loadSettings();
-    document.addEventListener('fullscreenchange', this.onFullscreenChange);
-  },
-
-  beforeUnmount() {
-    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
   },
 
   methods: {
@@ -266,221 +233,137 @@ export default {
 
     // Send function key, e.g. ALT + F
     sendKeys() {
-      if (!this.canSendKeys || !this.$refs.novncConsole) {
-        return;
-      }
-
       this.keysRecord.forEach((key) => {
         this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, true);
       });
 
-      [...this.keysRecord].reverse().forEach((key) => {
+      this.keysRecord.reverse().forEach((key) => {
         this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, false);
       });
 
-      this.$refs.popover.hide();
+      this.$refs.popover.isOpen = false;
       this.keysRecord = [];
     },
 
+    sendCustomKeys(keys) {
+      const keyList = [].concat(keys);
+
+      keyList.forEach((K) => {
+        this.$refs.novncConsole.sendKey(KeyboardUtil.getKeysym(K), KeyboardUtil.getKeycode(K), true);
+      });
+
+      keyList.reverse().forEach((K) => {
+        this.$refs.novncConsole.sendKey(KeyboardUtil.getKeysym(K), KeyboardUtil.getKeycode(K), false);
+      });
+    },
+
     reconnect() {
       this.$refs.novncConsole.reconnect();
     },
 
-    loadSettings() {
-      try {
-        const saved = JSON.parse(window.localStorage.getItem(CONSOLE_SETTINGS_KEY) || '{}');
-
-        this.settings = {
-          viewMode:         Object.values(VIEW_MODE).includes(saved?.viewMode) ? saved.viewMode : DEFAULT_SETTINGS.viewMode,
-          zoomPercent:      normalizeZoom(saved?.zoomPercent ?? DEFAULT_SETTINGS.zoomPercent),
-          viewOnly:         saved?.viewOnly === true,
-          qualityLevel:     saved?.qualityLevel ?? DEFAULT_SETTINGS.qualityLevel,
-          compressionLevel: saved?.compressionLevel ?? DEFAULT_SETTINGS.compressionLevel,
-        };
-      } catch (err) {
-        this.settings = { ...DEFAULT_SETTINGS };
-      }
-    },
-
-    onStatusChanged(info) {
-      this.consoleStatus = info;
-    },
-
-    onCapabilities(capabilities) {
-      this.capabilities = capabilities;
-    },
-
-    ctrlAltDelete() {
-      if (this.canSendKeys) {
-        this.$refs.novncConsole?.ctrlAltDelete();
-      }
-    },
-
-    async toggleFullscreen() {
-      try {
-        if (document.fullscreenElement) {
-          await document.exitFullscreen();
-        } else {
-          await this.$refs.consoleContainer.requestFullscreen();
-          // Keyboard lock lets shortcuts such as Ctrl+W and F11 reach the guest.
-          await navigator.keyboard?.lock?.(['KeyW', 'F11']);
-        }
-      } catch (err) {
-        this.$store.dispatch('growl/fromError', {
-          title: this.t('generic.notification.title.error', { name: escapeHtml(this.value.metadata.name) }),
-          err,
-        }, { root: true });
-      }
-    },
-
-    onFullscreenChange() {
-      this.isFullscreen = !!document.fullscreenElement;
-
-      if (!this.isFullscreen) {
-        navigator.keyboard?.unlock?.();
-      }
-    },
-
     softReboot() {
       this.vmResource.doSoftReboot();
     },
 
+    showKeysModal() {
+      this.renderKeysModal = true;
+    },
+
+    hideKeysModal() {
+      this.renderKeysModal = false;
+    },
   }
 };
 </script>
 
 <template>
   <div id="app">
-    <div
+    <div class="vm-console">
-      ref="consoleContainer"
-      class="vm-console"
-    >
       <div class="combination-keys">
-        <div class="toolbar-group">
+        <v-dropdown
-          <v-dropdown
+          ref="popover"
-            ref="popover"
+          placement="top"
-            placement="top"
+          trigger="click"
-            trigger="click"
+          :container="false"
-            :container="false"
+          @auto-hide="keysRecord = []"
-            @auto-hide="keysRecord = []"
+        >
-          >
+          <button class="btn btn-sm bg-primary">
-            <button
+            {{ t("harvester.virtualMachine.detail.console.shortcutKeys") }}
-              class="btn btn-sm bg-primary"
+          </button>
-              :disabled="!canSendKeys"
+
+          <template #popper>
+            <novnc-console-item
+              :items="keymap"
+              :path="keysRecord"
+              :pos="0"
+              @update="update"
+              @send-keys="sendKeys"
+            />
+          </template>
+        </v-dropdown>
+
+        <button
+          v-if="hasSoftRebootAction"
+          class="btn btn-sm bg-primary"
+          @click="softReboot"
+        >
+          {{ t("harvester.action.softreboot") }}
+        </button>
+
+        <button
+          class="btn btn-sm bg-primary"
+          @click="reconnect"
+        >
+          {{ t("harvester.action.reconnect") }}
+        </button>
+
+        <v-dropdown
+          v-if="!hideCustomKeysBar"
+          ref="customKeyPopover"
+          placement="top"
+          trigger="click"
+          :container="false"
+        >
+          <button class="btn btn-sm bg-primary">
+            {{ t("harvester.virtualMachine.detail.console.customShortcutKeys") }}
+          </button>
+
+          <template #popper>
+            <div>
+              <button
+                class="btn btn-sm bg-primary"
+                @click="showKeysModal"
+              >
+                {{ t("harvester.virtualMachine.detail.console.management") }}
+              </button>
+            </div>
+
+            <hr>
+
+            <div
+              v-for="(keys, index) in preferredShortcutKeys"
+              :key="index"
             >
-              {{ t("harvester.virtualMachine.detail.console.shortcutKeys") }}
+              <button
-            </button>
+                class="btn btn-sm bg-primary"
+                @click="sendCustomKeys(keys.value)"
+              >
+                {{ keys.label }}
+              </button>
+            </div>
+          </template>
+        </v-dropdown>
 
-            <template #popper>
+        <NovncConsoleCustomKeys
-              <novnc-console-item
+          v-if="renderKeysModal"
-                :items="keymap"
+          :current-user="currentUser"
-                :path="keysRecord"
+          @close="hideKeysModal"
-                :pos="0"
+        />
-                @update="update"
-                @send-keys="sendKeys"
-              />
-            </template>
-          </v-dropdown>
-
-          <button
-            class="btn btn-sm bg-primary"
-            :disabled="!canSendKeys"
-            @click="ctrlAltDelete"
-          >
-            Ctrl+Alt+Del
-          </button>
-
-          <v-dropdown
-            placement="top"
-            trigger="click"
-            :container="false"
-          >
-            <button class="btn btn-sm bg-primary">
-              {{ t("harvester.virtualMachine.detail.console.settings.label") }}
-            </button>
-
-            <template #popper>
-              <div class="console-panel">
-                <label>{{ t('harvester.virtualMachine.detail.console.settings.viewMode.label') }}</label>
-                <div
-                  v-for="option in viewModeOptions"
-                  :key="option.value"
-                >
-                  <label class="console-panel__option">
-                    <input
-                      v-model="settings.viewMode"
-                      type="radio"
-                      :value="option.value"
-                    >
-                    {{ option.label }}
-                  </label>
-                </div>
-
-                <label
-                  for="vnc-zoom"
-                  class="console-panel__zoom-label"
-                >
-                  <span>{{ t('harvester.virtualMachine.detail.console.settings.zoom') }}</span>
-                  <span>{{ settings.zoomPercent }}%</span>
-                </label>
-                <input
-                  id="vnc-zoom"
-                  v-model.number="settings.zoomPercent"
-                  class="console-panel__zoom"
-                  type="range"
-                  min="50"
-                  max="200"
-                  step="10"
-                  :disabled="settings.viewMode === 'scale'"
-                  :aria-valuetext="`${ settings.zoomPercent }%`"
-                >
-
-                <label class="console-panel__option">
-                  <input
-                    v-model="settings.viewOnly"
-                    type="checkbox"
-                  >
-                  {{ t('harvester.virtualMachine.detail.console.settings.viewOnly') }}
-                </label>
-              </div>
-            </template>
-          </v-dropdown>
-        </div>
-
-        <div class="toolbar-group">
-          <span class="console-status">{{ statusLabel }}</span>
-
-          <button
-            v-if="hasSoftRebootAction"
-            class="btn btn-sm bg-primary"
-            @click="softReboot"
-          >
-            {{ t("harvester.action.softreboot") }}
-          </button>
-
-          <button
-            class="btn btn-sm bg-primary"
-            @click="reconnect"
-          >
-            {{ t("harvester.action.reconnect") }}
-          </button>
-
-          <button
-            class="btn btn-sm bg-primary"
-            @click="toggleFullscreen"
-          >
-            {{ isFullscreen ? t('harvester.virtualMachine.detail.console.fullscreen.exit') : t('harvester.virtualMachine.detail.console.fullscreen.enter') }}
-          </button>
-        </div>
       </div>
-
       <NovncConsole
         v-if="url && !isDown"
         ref="novncConsole"
         :url="url"
-        :settings="rfbSettings"
-        @status-changed="onStatusChanged"
-        @capabilities="onCapabilities"
       />
       <p v-if="isDown">
         {{ t("harvester.virtualMachine.detail.console.down") }}
@@ -491,56 +374,14 @@ export default {
 
 <style lang="scss" scoped>
   .vm-console {
-    height: 100vh;
+    height: 100%;
-    height: 100dvh;
     display: grid;
-    grid-template-rows: 32px minmax(0, 1fr);
+    grid-template-rows: 30px auto;
   }
 
   .combination-keys {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     background: rgb(40, 40, 40);
   }
-
-  .toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .console-status {
-    color: #fff;
-    font-size: 12px;
-    margin-right: 8px;
-  }
-
-  .console-panel {
-    display: flex;
-    flex-direction: column;
-    width: 260px;
-    padding: 4px;
-
-    &__zoom-label {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 8px;
-      font-variant-numeric: tabular-nums;
-    }
-
-    &__zoom {
-      width: 100%;
-      margin: 4px 0 8px;
-    }
-
-    &__option {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin: 2px 0;
-    }
-  }
 </style>
 
 <style lang="scss">

pkg/harvester/components/novnc/ZoomableRFB.js

@@ -1,31 +0,0 @@
-import RFB from '@novnc/novnc/core/rfb';
-
-export function normalizeZoom(value) {
-  const percent = Number(value);
-
-  if (!Number.isFinite(percent)) {
-    return 100;
-  }
-
-  return Math.min(200, Math.max(50, Math.round(percent / 10) * 10));
-}
-
-export default class ZoomableRFB extends RFB {
-  get zoomPercent() {
-    return this._zoomPercent ?? 100;
-  }
-
-  set zoomPercent(value) {
-    this._zoomPercent = normalizeZoom(value);
-    this._updateScale();
-  }
-
-  _updateScale() {
-    if (this.scaleViewport) {
-      super._updateScale();
-    } else {
-      this._display.scale = this.zoomPercent / 100;
-      this._fixScrollbars();
-    }
-  }
-}

pkg/harvester/components/vm-migration/ConfigureMappingsStep.vue

@@ -15,7 +15,7 @@ import MappingColumn from './MappingColumn.vue';
 import StorageDefaultsModal from './StorageDefaultsModal.vue';
 
 const DEFAULT_VOLUME_MODE = VOLUME_MODE.FILE_SYSTEM;
-const DEFAULT_ACCESS_MODE = ACCESS_MODE?.READ_WRITE_MANY ?? 'ReadWriteMany';
+const DEFAULT_ACCESS_MODES = [ACCESS_MODE.READ_WRITE_MANY];
 
 const props = defineProps({
   providerName:       { type: String, default: '' },
@@ -268,9 +268,9 @@ const buildStorageEntries = () => {
               capacity:              0,
               target:                '',
               volumeMode:            DEFAULT_VOLUME_MODE,
-              accessModes:           [DEFAULT_ACCESS_MODE],
+              accessModes:           [...DEFAULT_ACCESS_MODES],
               inheritedVolumeMode:   DEFAULT_VOLUME_MODE,
-              inheritedAccessModes:  [DEFAULT_ACCESS_MODE],
+              inheritedAccessModes:  [...DEFAULT_ACCESS_MODES],
               inheritedFromProvider: false,
               overridden:            false,
               usedBy:                [],
@@ -310,9 +310,9 @@ const buildStorageEntriesFromProvider = (datastoresData) => {
     capacity:              ds.capacity || 0,
     target:                '',
     volumeMode:            DEFAULT_VOLUME_MODE,
-    accessModes:           [DEFAULT_ACCESS_MODE],
+    accessModes:           [...DEFAULT_ACCESS_MODES],
     inheritedVolumeMode:   DEFAULT_VOLUME_MODE,
-    inheritedAccessModes:  [DEFAULT_ACCESS_MODE],
+    inheritedAccessModes:  [...DEFAULT_ACCESS_MODES],
     inheritedFromProvider: false,
     overridden:            false,
     usedBy:                [],

pkg/harvester/components/vm-migration/ReviewMigrationStep.vue

@@ -273,6 +273,19 @@ const startMigrationAction = async() => {
 
   await plan.save();
 
+  const planOwnerRef = {
+    apiVersion:         FORKLIFT_API_VERSION,
+    kind:               'Plan',
+    name:               plan.metadata.name,
+    uid:                plan.metadata.uid,
+    blockOwnerDeletion: true,
+  };
+
+  networkMap.metadata.ownerReferences = [planOwnerRef];
+  await networkMap.save();
+  storageMap.metadata.ownerReferences = [planOwnerRef];
+  await storageMap.save();
+
   // Kick off the first migration through the model so the Migration payload
   // lives in a single place (also reused by the dashboard start/restart action).
   await plan.startMigration();

pkg/harvester/components/vm-migration/StorageDefaultsModal.vue

@@ -8,22 +8,16 @@ import { useI18n } from '@shell/composables/useI18n';
 import { VOLUME_MODE, ACCESS_MODE } from '../../config/types';
 
 const VOLUME_MODE_OPTIONS = [VOLUME_MODE.FILE_SYSTEM, VOLUME_MODE.BLOCK];
-const {
+const ACCESS_MODE_OPTIONS = [ACCESS_MODE.READ_WRITE_ONCE, ACCESS_MODE.READ_WRITE_MANY, ACCESS_MODE.READ_ONLY_MANY];
-  READ_WRITE_ONCE = 'ReadWriteOnce',
-  READ_ONLY_MANY = 'ReadOnlyMany',
-  READ_WRITE_MANY = 'ReadWriteMany',
-  READ_WRITE_ONCE_POD = 'ReadWriteOncePod'
-} = ACCESS_MODE || {};
-const ACCESS_MODE_OPTIONS = [READ_WRITE_ONCE, READ_WRITE_MANY, READ_ONLY_MANY, READ_WRITE_ONCE_POD];
 
 const props = defineProps({
   storageClassName:     { type: String, default: '' },
   providerName:         { type: String, default: '' },
   showInherited:        { type: Boolean, default: false },
   volumeMode:           { type: String, default: VOLUME_MODE.FILE_SYSTEM },
-  accessModes:          { type: Array, default: () => ['ReadWriteMany'] },
+  accessModes:          { type: Array, default: () => [ACCESS_MODE.READ_WRITE_MANY] },
   inheritedVolumeMode:  { type: String, default: VOLUME_MODE.FILE_SYSTEM },
-  inheritedAccessModes: { type: Array, default: () => ['ReadWriteMany'] },
+  inheritedAccessModes: { type: Array, default: () => [ACCESS_MODE.READ_WRITE_MANY] },
 });
 
 const emit = defineEmits(['apply', 'close']);
@@ -32,7 +26,7 @@ const store = useStore();
 const { t } = useI18n(store);
 
 const localVolumeMode = ref(props.volumeMode || VOLUME_MODE.FILE_SYSTEM);
-const localAccessMode = ref(props.accessModes?.[0] || READ_WRITE_MANY);
+const localAccessMode = ref(props.accessModes?.[0] || ACCESS_MODE.READ_WRITE_MANY);
 
 const volumeModeOptions = VOLUME_MODE_OPTIONS.map((value) => ({ label: value, value }));
 const accessModeOptions = ACCESS_MODE_OPTIONS.map((value) => ({ label: value, value }));
@@ -48,7 +42,7 @@ const apply = () => {
 // Repopulate the dropdowns with the provider default values; the user then applies.
 const reset = () => {
   localVolumeMode.value = props.inheritedVolumeMode || VOLUME_MODE.FILE_SYSTEM;
-  localAccessMode.value = props.inheritedAccessModes?.[0] || READ_WRITE_MANY;
+  localAccessMode.value = props.inheritedAccessModes?.[0] || ACCESS_MODE.READ_WRITE_MANY;
 };
 
 const cancel = () => {

pkg/harvester/config/settings.ts

@@ -111,17 +111,15 @@ export const HCI_ALLOWED_SETTINGS = {
   [HCI_SETTING.KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES]:   { kind: 'number', featureFlag: 'kubeconfigDefaultTokenTTLMinutesSetting' },
   [HCI_SETTING.LONGHORN_V2_DATA_ENGINE_ENABLED]:        {
     kind:         'boolean',
-    preview:      true,
+    experimental: true,
     featureFlag:  'longhornV2LVMSupport'
   },
   [HCI_SETTING.LONGHORN_V2_DATA_ENGINE_HUGEPAGE_ENABLED]: {
     kind:         'boolean',
-    preview:      true,
     featureFlag:  'longhornV2HugepageSettings'
   },
   [HCI_SETTING.LONGHORN_V2_DATA_ENGINE_MEMORY_SIZE]: {
     kind:         'number',
-    preview:      true,
     featureFlag:  'longhornV2HugepageSettings'
   },
   [HCI_SETTING.ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO]: { kind: 'string', from: 'import' },

pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue

@@ -390,17 +390,14 @@ export default {
           :vmi-resource="vmi"
           :vmim-resource="vmim"
         />
-        <div
+        <DashboardMetrics
           v-if="showVmMetrics && liveMigrationProgressEnabled"
-          class="migration-metrics-scroll mb-30"
+          :detail-url="VM_MIGRATION_DETAIL_URL"
-        >
+          graph-height="640px"
-          <DashboardMetrics
+          :has-summary-and-detail="false"
-            :detail-url="VM_MIGRATION_DETAIL_URL"
+          :vars="graphVars"
-            graph-height="960px"
+          class="mb-30"
-            :has-summary-and-detail="false"
+        />
-            :vars="graphVars"
-          />
-        </div>
         <Events
           v-if="liveMigrationProgressEnabled"
           :resource="vmi"
@@ -439,10 +436,3 @@ export default {
     </Tabbed>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.migration-metrics-scroll {
-  max-height: 640px;
-  overflow-y: auto;
-}
-</style>

pkg/harvester/dialog/HarvesterAddHotplugVolumeModal.vue

@@ -2,16 +2,13 @@
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { sortBy } from '@shell/utils/sort';
 import { mapGetters } from 'vuex';
-import { PVC, STORAGE_CLASS, LONGHORN_DRIVER } from '@shell/config/types';
+import { PVC } from '@shell/config/types';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
-import { VOLUME_MODE } from '@pkg/harvester/config/types';
-import { HCI } from '@pkg/harvester/types';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   name: 'HotplugVolumeModal',
@@ -19,7 +16,7 @@ export default {
   emits: ['close'],
 
   components: {
-    AsyncButton, Card, LabeledInput, LabeledSelect, Banner, Checkbox
+    AsyncButton, Card, LabeledInput, LabeledSelect, Banner
   },
 
   props: {
@@ -31,19 +28,14 @@ export default {
 
   async fetch() {
     this.allPVCs = await this.$store.dispatch('harvester/findAll', { type: PVC });
-    this.allStorageClasses = await this.$store.dispatch('harvester/findAll', { type: STORAGE_CLASS });
-    this.allVMs = await this.$store.dispatch('harvester/findAll', { type: HCI.VM });
   },
 
   data() {
     return {
-      diskName:          '',
+      diskName:   '',
-      volumeName:        '',
+      volumeName: '',
-      shareable:         false,
+      errors:     [],
-      errors:            [],
+      allPVCs:    [],
-      allPVCs:           [],
-      allStorageClasses: [],
-      allVMs:            [],
     };
   },
 
@@ -58,31 +50,6 @@ export default {
       return this.resources[0];
     },
 
-    // claim names already attached to the VM this modal was opened for
-    currentVMClaimNames() {
-      const volumes = this.actionResource?.spec?.template?.spec?.volumes || [];
-
-      return volumes.map((vol) => vol.persistentVolumeClaim?.claimName).filter((name) => !!name);
-    },
-
-    // claim names attached to other VMs in the same namespace
-    otherVMClaimNames() {
-      const out = [];
-
-      this.allVMs.forEach((vm) => {
-        if (vm.metadata.namespace !== this.actionResource?.metadata?.namespace || vm.id === this.actionResource?.id) {
-          return;
-        }
-        (vm.spec?.template?.spec?.volumes || []).forEach((vol) => {
-          if (vol.persistentVolumeClaim?.claimName) {
-            out.push(vol.persistentVolumeClaim.claimName);
-          }
-        });
-      });
-
-      return out;
-    },
-
     volumeOption() {
       return sortBy(
         this.PVCs
@@ -94,14 +61,6 @@ export default {
             if (pvc.isGoldenImageVolume) {
               return false;
             }
-            // a volume attached to this VM can never be attached to it again
-            if (this.currentVMClaimNames.includes(pvc.metadata.name)) {
-              return false;
-            }
-            // a volume attached to another VM can only be re-attached as a shareable disk
-            if (this.otherVMClaimNames.includes(pvc.metadata.name) && !this.isShareableCapablePVC(pvc)) {
-              return false;
-            }
 
             return true;
           })
@@ -114,62 +73,19 @@ export default {
         'label'
       );
     },
-
-    selectedPVC() {
-      return this.PVCs.find((P) => P.metadata.name === this.volumeName);
-    },
-
-    isShareableCapable() {
-      return this.selectedPVC ? this.isShareableCapablePVC(this.selectedPVC) : false;
-    },
-  },
-
-  watch: {
-    isShareableCapable(neu) {
-      if (!neu) {
-        this.shareable = false;
-      }
-    },
   },
 
   methods: {
-    isShareableCapablePVC(pvc) {
-      const pvcSpec = pvc?.spec;
-
-      if (!pvcSpec) {
-        return false;
-      }
-
-      const isRWX = (pvcSpec.accessModes || []).includes('ReadWriteMany');
-      const isBlock = pvcSpec.volumeMode === VOLUME_MODE.BLOCK;
-      const storageClass = this.allStorageClasses.find((sc) => sc.name === pvcSpec.storageClassName);
-
-      // fail closed: without a resolved StorageClass the provisioner
-      // requirement cannot be evaluated
-      if (!storageClass) {
-        return false;
-      }
-
-      return isRWX && isBlock && storageClass.provisioner !== LONGHORN_DRIVER;
-    },
-
     close() {
       this.diskName = '';
       this.volumeName = '';
-      this.shareable = false;
       this.$emit('close');
     },
 
     async save(buttonCb) {
       if (this.actionResource) {
         try {
-          const input = { volumeSourceName: this.volumeName, diskName: this.diskName };
+          const res = await this.actionResource.doAction('addVolume', { volumeSourceName: this.volumeName, diskName: this.diskName }, {}, false);
-
-          if (this.isShareableCapable && this.shareable) {
-            input.shareable = true;
-          }
-
-          const res = await this.actionResource.doAction('addVolume', input, {}, false);
 
           if (res._status === 200 || res._status === 204) {
             this.$store.dispatch('growl/success', {
@@ -225,19 +141,6 @@ export default {
         class="mt-20"
         required
       />
-      <Checkbox
-        v-if="isShareableCapable"
-        v-model:value="shareable"
-        class="mt-20"
-        type="checkbox"
-        label-key="harvester.virtualMachine.volume.shareable.label"
-        tooltip-key="harvester.virtualMachine.volume.shareable.tip"
-      />
-      <Banner
-        v-if="isShareableCapable && shareable"
-        color="warning"
-        :label="t('harvester.virtualMachine.volume.shareable.warning')"
-      />
       <Banner
         v-for="(err, i) in errors"
         :key="i"

pkg/harvester/edit/kubeovn.io.subnet/index.vue

@@ -9,7 +9,7 @@ import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { RadioGroup } from '@components/Form/Radio';
 import { NETWORK_PROTOCOL, NETWORK_TYPE } from '@pkg/harvester/config/types';
-import { set, remove } from '@shell/utils/object';
+import { set } from '@shell/utils/object';
 import ArrayList from '@shell/components/form/ArrayList';
 import { allHash } from '@shell/utils/promise';
 import { HCI } from '../../types';
@@ -142,12 +142,10 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const vlans = this.$store.getters[`${ inStore }/all`](HCI.VLAN) || [];
 
-      const options = vlans.map((vlan) => ({
+      return vlans.map((vlan) => ({
         label: vlan.id,
         value: vlan.id,
       }));
-
-      return [{ label: this.t('generic.none'), value: '' }, ...options];
     }
   },
 
@@ -162,14 +160,6 @@ export default {
     }
   },
   methods: {
-    onVlanChange(value) {
-      if (value === '') {
-        remove(this.value.spec, 'vlan');
-      } else {
-        set(this.value, 'spec.vlan', value);
-      }
-    },
-
     async saveSubnet(buttonCb) {
       const errors = [];
       const name = this.value?.metadata?.name;
@@ -293,13 +283,12 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledSelect
-              :value="value.spec.vlan ?? ''"
+              v-model:value="value.spec.vlan"
               class="mb-20"
               :options="vlanOptions"
               :placeholder="t('harvester.subnet.vlan.placeholder')"
               :label="t('harvester.subnet.vlan.label')"
               :mode="mode"
-              @update:value="onVlanChange"
             />
           </div>
         </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/DeviceList.vue

@@ -246,27 +246,4 @@ export default {
 .group-actions  {
   display: inline;
 }
-
-// Match the enable/disable passthrough bulk-action buttons height to the .btn (40px) on the right.
-:deep(.bulk .rc-button.btn-medium.bulk-action:not(.btn-sm)) {
-  min-height: 40px;
-}
-
-// Make the collapsed "Actions" dropdown button 40px too.
-:deep(.bulk .rc-button.btn-medium.bulk-actions-dropdown:not(.btn-sm)) {
-  min-height: 40px;
-}
-
-// Lay the bulk row out with flex so the "N selected" label can wrap below the buttons.
-:deep(.bulk) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-:deep(.bulk .action-availability) {
-  flex-basis: 100%;
-  margin-left: 0;
-  margin-top: 6px;
-}
 </style>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue

@@ -5,7 +5,6 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Banner from '@components/Banner/Banner.vue';
 import remove from 'lodash/remove';
 import { set } from '@shell/utils/object';
-import { uniq } from '@shell/utils/array';
 import { HCI } from '../../../types';
 import DeviceList from './DeviceList';
 import CompatibilityMatrix from '../CompatibilityMatrix';
@@ -61,15 +60,7 @@ export default {
       row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
     });
 
-    // When off, read from spec; otherwise the spec name is a placeholder ('provisioned'),
+    vmDevices.forEach(({ name }) => {
-    // so read the real allocated device names from the deviceAllocationDetails annotation.
-    const hostDeviceNames = this.vm.isOff ? [
-      ...vmDevices.map(({ name }) => name),
-    ] : [
-      ...Object.values(this.vm?.provisionedHostDevices || {}).reduce((acc, devices) => [...acc, ...devices], []),
-    ];
-
-    uniq(hostDeviceNames).forEach((name) => {
       if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
         selectedDevices.push(name);
       }

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue

@@ -5,12 +5,10 @@ import LabelValue from '@shell/components/LabelValue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
 import { Banner } from '@components/Banner';
-import { Checkbox } from '@components/Form/Checkbox';
 import { sortBy } from '@shell/utils/sort';
-import { PVC, STORAGE_CLASS, LONGHORN_DRIVER } from '@shell/config/types';
+import { PVC } from '@shell/config/types';
 import { _CREATE } from '@shell/config/query-params';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
-import { VOLUME_MODE } from '@pkg/harvester/config/types';
 import { HCI } from '../../../../types';
 import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
 import { GIBIBYTE } from '../../../../utils/unit';
@@ -21,7 +19,7 @@ export default {
   emits: ['update'],
 
   components: {
-    UnitInput, LabeledInput, LabeledSelect, InputOrDisplay, LabelValue, Banner, Checkbox
+    UnitInput, LabeledInput, LabeledSelect, InputOrDisplay, LabelValue, Banner
   },
 
   props: {
@@ -96,30 +94,6 @@ export default {
       return this.allPVCs.find( (P) => P.metadata.name === this.value.volumeName );
     },
 
-    storageClasses() {
-      return this.$store.getters['harvester/all'](STORAGE_CLASS) || [];
-    },
-
-    isShareableCapable() {
-      const pvcSpec = this.pvcResource?.spec;
-
-      if (!pvcSpec) {
-        return false;
-      }
-
-      const isRWX = (pvcSpec.accessModes || []).includes('ReadWriteMany');
-      const isBlock = pvcSpec.volumeMode === VOLUME_MODE.BLOCK;
-      const storageClass = this.storageClasses.find((sc) => sc.name === pvcSpec.storageClassName);
-
-      // fail closed: without a resolved StorageClass the provisioner
-      // requirement cannot be evaluated
-      if (!storageClass) {
-        return false;
-      }
-
-      return isRWX && isBlock && storageClass.provisioner !== LONGHORN_DRIVER;
-    },
-
     volumeOption() {
       return sortBy(
         this.allPVCs
@@ -171,7 +145,6 @@ export default {
       this.value.size = pvcResource.spec.resources.requests.storage;
       this.value.storageClassName = pvcResource.spec.storageClassName;
       this.value.volumeMode = pvcResource.spec.volumeMode;
-      this.value.shareable = false;
       this.update();
     },
 
@@ -182,13 +155,6 @@ export default {
       }
     },
 
-    isShareableCapable(neu) {
-      if (!neu && this.value.shareable) {
-        this.value.shareable = false;
-        this.update();
-      }
-    },
-
     pvcResource: {
       handler(pvc) {
         if (!this.value.volumeName && pvc?.metadata?.name) {
@@ -337,26 +303,6 @@ export default {
           />
         </InputOrDisplay>
       </div>
-      <div
-        v-if="isShareableCapable"
-        data-testid="input-hee-shareable"
-        class="col span-6"
-      >
-        <Checkbox
-          v-model:value="value.shareable"
-          class="check"
-          type="checkbox"
-          label-key="harvester.virtualMachine.volume.shareable.label"
-          tooltip-key="harvester.virtualMachine.volume.shareable.tip"
-          :mode="mode"
-          @update:value="update"
-        />
-        <Banner
-          v-if="value.shareable"
-          color="warning"
-          :label="t('harvester.virtualMachine.volume.shareable.warning')"
-        />
-      </div>
       <div
         v-if="value.volumeBackups"
         class="col span-6"

pkg/harvester/edit/management.cattle.io.project.vue

@@ -63,7 +63,6 @@ export default {
       RANCHER_TYPES,
       fvFormRuleSets:     [{ path: 'spec.displayName', rules: ['required'] }],
       canEditPSPBindings: true,
-      isQuotasValid:      true,
     };
   },
   computed: {
@@ -191,13 +190,15 @@ export default {
       this['membershipUpdate'] = update;
     },
 
-    validateQuotas(isValid) {
+    removeQuota(key) {
-      this.isQuotasValid = isValid;
+      ['resourceQuota', 'namespaceDefaultResourceQuota'].forEach((specProp) => {
-    },
+        if (this.value?.spec[specProp]?.limit && this.value?.spec[specProp]?.limit[key]) {
-
+          delete this.value?.spec[specProp]?.limit[key];
-    onQuotasInput({ projectLimit, nsLimit } = {}) {
+        }
-      this.value.spec.resourceQuota = { ...this.value.spec.resourceQuota, limit: projectLimit };
+        if (this.value?.spec[specProp]?.usedLimit && this.value?.spec[specProp]?.usedLimit[key]) {
-      this.value.spec.namespaceDefaultResourceQuota = { ...this.value.spec.namespaceDefaultResourceQuota, limit: nsLimit };
+          delete this.value?.spec[specProp]?.usedLimit[key];
+        }
+      });
     }
   },
 };
@@ -211,7 +212,7 @@ export default {
     :resource="value"
     :subtypes="[]"
     :can-yaml="false"
-    :validation-passed="fvFormIsValid && isQuotasValid"
+    :validation-passed="fvFormIsValid"
     @error="e=>errors=e"
     @finish="save"
     @cancel="done"
@@ -266,11 +267,10 @@ export default {
         :weight="9"
       >
         <ResourceQuota
-          :value="value"
+          v-model:value="value"
           :mode="canEditTabElements"
           :types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
-          @input="onQuotasInput"
+          @remove="removeQuota"
-          @validationChanged="validateQuotas"
         />
       </Tab>
       <Tab

pkg/harvester/l10n/en-us.yaml

@@ -798,10 +798,6 @@ harvester:
       setFirst: Set as root volume
       saveVolume: Update Volume
       encryption: Encryption
-      shareable:
-        label: Shareable
-        tip: Allow multiple virtual machines to attach and write to this volume simultaneously.
-        warning: Multiple virtual machines can write to this volume at the same time. The guest workloads must coordinate access to the shared block device, otherwise concurrent writes will corrupt the data. Workloads that fence through SCSI-3 Persistent Reservations (e.g. Windows Server Failover Clustering) also require persistent reservation support from the storage backend. Host cache and hypervisor disk locking are disabled, and backup or snapshot operations are rejected while the volume is shareable.
       vmImageVolumeTip: Disk size ({diskSize}) should greater than selected image virtual size ({imageVirtualSize})
       lockTooltip:
         all: All volumes are encrypted.
@@ -835,13 +831,13 @@ harvester:
         title: "Network Data:"
         tip: "The network-data configuration allows you to customize the instance's networking interfaces by assigning subnet configuration, virtual device creation (bonds, bridges, VLANs) routes and DNS configuration. <a href='https://cloudinit.readthedocs.io/en/latest/reference/network-config-format-v1.html' target='_blank'>Learn more</a>"
     sysprep:
-      title: Windows Unattended & Sysprep Configuration
+      title: Windows Sysprep Configuration
       description: "Configure Windows automated installation using autounattend.xml. The configuration will be stored in a Kubernetes Secret and mounted as a CD-ROM during installation. <a href='https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/automate-windows-setup' target='_blank'>Learn more</a>"
       createNew: Create new...
-      createNewTitle: Create Windows Unattended & Sysprep Template
+      createNewTitle: Create Windows Sysprep Template
       xmlContent: autounattend.xml content
       secret:
-        label: Windows Unattended & Sysprep Template
+        label: Windows Sysprep Template
       validation:
         invalidXml: Invalid XML syntax
         invalidNamespace: Invalid unattend.xml namespace. Expected 'urn:schemas-microsoft-com:unattend'
@@ -953,33 +949,15 @@ harvester:
       console:
         down: This virtual machine is down. Please start it to access its console.
         shortcutKeys: Shortcut Keys
-        settings:
+        customShortcutKeys: Custom Shortcut Keys
-          label: Settings
+        management: Management Shortcut Keys
-          viewMode:
+        record:
-            label: Display
+          start: Record
-            scale: Scale the display to fit the window
+          recording: Recording
-            resize: Resize the virtual machine display to the window
+          stop: Stop Recording
-            none: Manual zoom
+          tips: Press the record button to capture your keyboard inputs.
-          zoom: Zoom
+          send: Send
-          clipViewport: Clip to the window instead of showing scrollbars
+          preferredKeys: Preferred Custom Shortcut Keys
-          viewOnly: View only
-          quality: JPEG quality
-          compression: Compression level
-          reset: Reset to defaults
-        fullscreen:
-          enter: Full Screen
-          exit: Exit Full Screen
-        takeOver:
-          label: Take Over
-          confirm: Take over this console? Any existing VNC session for this virtual machine will be disconnected.
-        status:
-          connecting: Connecting
-          connected: Connected
-          disconnected: Disconnected
-          failed: Connection failed
-          reconnecting: 'Reconnecting {retryTimes} of {maximumRetryTimes}'
-          credentialsRequired: This console requires credentials that the dashboard cannot provide.
-          unavailable: Unable to connect. Another VNC session may be active, or the console may be unavailable.
     terminationGracePeriodSeconds:
       label: Termination Grace Period
     affinity:
@@ -2435,15 +2413,7 @@ typeDescription:
   harvester: "Branding allows administrators to globally re-brand the UI by customizing the Harvester product name, logos and color scheme."
 
 advancedSettings:
-  tags:
+  experimental: 'Experimental features allow users to test and evaluate early-access functionality prior to official supported releases'
-    modified:
-      label: Modified
-    experimental:
-      label: Experimental
-      description: 'Experimental: The feature is incomplete but its essential functionality is operational. The feature is not recommended for use in production environments.'
-    preview:
-      label: Technical Preview
-      description: 'Technical Preview: The feature is almost complete and its functionality is not expected to change significantly. Explore the feature extensively before using in production environments.'
   descriptions:
     'harv-vlan': Default Network Interface name of the VLAN network.
     'harv-backup-target': Custom backup target to store virtual machine backups.

pkg/harvester/mixins/harvester-vm/impl.js

@@ -38,10 +38,6 @@ export const SSH_EXISTING_TYPE = {
 export default {
   methods: {
     hasCloudConfigComment(userScript) {
-      if (typeof userScript === 'string' && /^\s*#cloud-config(\s|$)/.test(userScript)) {
-        return true;
-      }
-
       // Check that userData contains: #cloud-config
       const userDataDoc = userScript ? YAML.parseDocument(userScript) : YAML.parseDocument({});
       const items = userDataDoc?.contents?.items || [];
@@ -56,14 +52,6 @@ export default {
         exist = true;
       }
 
-      if (userDataDoc?.contents?.commentBefore === 'cloud-config' || userDataDoc?.contents?.commentBefore?.includes('cloud-config\n')) {
-        exist = true;
-      }
-
-      if (userDataDoc?.contents?.comment === 'cloud-config' || userDataDoc?.contents?.comment?.includes('cloud-config\n')) {
-        exist = true;
-      }
-
       items.map((item) => {
         const key = item.key;
 

pkg/harvester/mixins/harvester-vm/index.js

@@ -618,7 +618,6 @@ export default {
             type,
             storageClassName,
             hotpluggable,
-            shareable:  DISK.shareable || false,
             volumeStatus,
             dataSource,
             namespace,
@@ -970,14 +969,6 @@ export default {
       const specDisks = this.spec?.template?.spec?.domain?.devices?.disks;
       const mergedDisks = this.mergeDeviceList(specDisks, disks);
 
-      // `shareable` is an attachment-level opt-in, remove the field
-      // inherited from the old spec when the disk row no longer requests it
-      mergedDisks.forEach((disk) => {
-        if (disk.shareable && !disks.find((D) => D.name === disk.name)?.shareable) {
-          delete disk.shareable;
-        }
-      });
-
       let spec = {
         ...this.spec,
         runStrategy: this.runStrategy,
@@ -1211,10 +1202,9 @@ export default {
 
         userDataDoc = config.installAgent ? this.mergeQGA({ userDataDoc, ...config }) : this.deleteQGA({ userDataDoc, ...config });
         const userDataYaml = userDataDoc.toString();
-        const userDataValue = userDataDoc.toJSON();
 
-        if (userDataValue === null || (typeof userDataValue === 'object' && !Array.isArray(userDataValue) && isEmpty(userDataValue))) {
+        if (userDataYaml === '{}\n') {
-          // Empty userData should not create cloud-init content like `null`.
+          // When the YAML parsed value is '{}\n', it means that the userData is empty, then undefined is returned.
           return undefined;
         }
 
@@ -1263,10 +1253,6 @@ export default {
         out.cdrom = { bus: R.bus };
       }
 
-      if (R.shareable) {
-        out.shareable = true;
-      }
-
       out.bootOrder = index + 1;
 
       return out;

pkg/harvester/models/harvester.js

@@ -69,11 +69,6 @@ export default class HarvesterResource extends SteveModel {
     }
   }
 
-  // Disable Resources/ Extras cards in resource details pages
-  get resourcesCardRows() {
-    return [];
-  }
-
   cleanForSave(data, _forNew) {
     return data;
   }

pkg/harvester/models/harvester/namespace.js

@@ -5,7 +5,6 @@ import SYSTEM_NAMESPACES from '@shell/config/system-namespaces';
 import { get } from '@shell/utils/object';
 import { NAMESPACE } from '@shell/config/types';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '@pkg/harvester/config/harvester';
-import { FORKLIFT_NAMESPACE } from '@pkg/harvester/config/harvester-map';
 import { HCI } from '../../types';
 
 const OBSCURE_NAMESPACE_PREFIX = [
@@ -94,10 +93,6 @@ export default class HciNamespace extends namespace {
   }
 
   get isSystem() {
-    if (this.metadata?.name === FORKLIFT_NAMESPACE) {
-      return false;
-    }
-
     const systemNamespaces = ['fleet-default'];
 
     if (systemNamespaces.includes(this.metadata.name)) {

pkg/harvester/models/kubevirt.io.virtualmachine.js

@@ -1315,18 +1315,6 @@ export default class VirtVm extends HarvesterResource {
     }
   }
 
-  get provisionedHostDevices() {
-    // Rancher-provisioned VMs store hostDevices.name as a placeholder ('provisioned'); the
-    // real allocated PCI device names live in this annotation, keyed by resourceName.
-    try {
-      const deviceAllocationDetails = JSON.parse(this.metadata?.annotations[HCI_ANNOTATIONS.VM_DEVICE_ALLOCATION_DETAILS] || '{}');
-
-      return deviceAllocationDetails?.hostdevices || {};
-    } catch (error) {
-      return {};
-    }
-  }
-
   get schedulingVMBackupFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('schedulingVMBackup');
   }

pkg/harvester/pages/c/_cluster/console/_uid/serial.vue

@@ -1,9 +1,10 @@
 <script>
+import Loading from '@shell/components/Loading';
 import { HCI } from '../../../../../types';
 import SerialConsole from '../../../../../components/SerialConsole';
 
 export default {
-  components: { SerialConsole },
+  components: { SerialConsole, Loading },
 
   async fetch() {
     this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
@@ -37,44 +38,16 @@ export default {
 </script>
 
 <template>
-  <div class="serial-console-page">
+  <Loading v-if="$fetchState.pending" />
-    <SerialConsole
+  <SerialConsole
-      ref="serialConsole"
+    v-else
-      :value="vmi || {}"
+    ref="serialConsole"
-    />
+    v-model:value="vmi"
-  </div>
+  />
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  html,
+  body, #__nuxt, #__layout, main {
-  body,
-  #__nuxt,
-  #__layout,
-  main {
     height: 100%;
   }
-
-  .serial-console-page {
-    position: fixed;
-    inset: 0;
-    min-height: 0;
-    background: var(--body-bg);
-    color: var(--terminal-text);
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 6px;
-      pointer-events: none;
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
-    }
-
-    .harvester-shell-container {
-      height: 100%;
-      background: var(--terminal-bg);
-    }
-  }
 </style>

pkg/harvester/pages/c/_cluster/console/_uid/vnc.vue

@@ -1,18 +1,10 @@
 <script>
-import { defineAsyncComponent } from 'vue';
 import Loading from '@shell/components/Loading';
-import TabTitle from '@shell/components/TabTitle';
 import { HCI } from '../../../../../types';
+import NovncConsoleWrapper from '../../../../../components/novnc/NovncConsoleWrapper.vue';
 
 export default {
-  components: {
+  components: { NovncConsoleWrapper, Loading },
-    NovncConsoleWrapper: defineAsyncComponent({
-      loader:           () => import('../../../../../components/novnc/NovncConsoleWrapper.vue'),
-      loadingComponent: Loading,
-    }),
-    Loading,
-    TabTitle
-  },
 
   async fetch() {
     this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
@@ -36,21 +28,17 @@ export default {
 
   mounted() {
     window.addEventListener('beforeunload', () => {
-      this.$refs.console?.close();
+      this.$refs.console.close();
     });
   },
 
+  head() {
+    return { title: this.vmi?.metadata?.name };
+  },
 };
 </script>
 
 <template>
-  <TabTitle
-    v-if="vmi?.metadata?.name"
-    :breadcrumb="false"
-    :show-child="false"
-  >
-    {{ vmi.metadata.name }}
-  </TabTitle>
   <Loading v-if="$fetchState.pending" />
   <NovncConsoleWrapper
     v-else

pkg/harvester/promptRemove/forklift.konveyor.io.plan.vue

@@ -68,35 +68,29 @@ export default defineComponent({
       return (this.value || []).map((plan) => {
         const planName = plan?.metadata?.name || '-';
         const namespace = plan?.metadata?.namespace || '';
-        const networkMapRef = this.getPlanMapRef(plan, 'network');
-        const storageMapRef = this.getPlanMapRef(plan, 'storage');
 
         const migrations = existing[HCI.FORKLIFT_MIGRATION]
           .filter((resource) => this.ownedByPlan(resource, plan))
-          .map((resource) => resource?.metadata?.name)
+          .map((resource) => ({
-          .filter(Boolean);
+            name:      resource?.metadata?.name,
+            namespace: resource?.metadata?.namespace || namespace,
+          }));
 
-        const matchedNetworkMap = networkMapRef ? existing[HCI.FORKLIFT_NETWORK_MAP].find((resource) => resource?.metadata?.name === networkMapRef.name && resource?.metadata?.namespace === networkMapRef.namespace) : null;
+        const matchedNetworkMap = existing[HCI.FORKLIFT_NETWORK_MAP].find((resource) => this.ownedByPlan(resource, plan));
-        const matchedStorageMap = storageMapRef ? existing[HCI.FORKLIFT_STORAGE_MAP].find((resource) => resource?.metadata?.name === storageMapRef.name && resource?.metadata?.namespace === storageMapRef.namespace) : null;
+        const matchedStorageMap = existing[HCI.FORKLIFT_STORAGE_MAP].find((resource) => this.ownedByPlan(resource, plan));
 
         return {
           planName,
           namespace,
           migrations,
           networkMap: matchedNetworkMap ? {
-            namespace: matchedNetworkMap?.metadata?.namespace || networkMapRef?.namespace || namespace,
+            namespace: matchedNetworkMap?.metadata?.namespace || namespace,
             name:      matchedNetworkMap?.metadata?.name,
-          } : (networkMapRef ? {
+          } : null,
-            namespace: networkMapRef.namespace,
-            name:      networkMapRef.name,
-          } : null),
           storageMap: matchedStorageMap ? {
-            namespace: matchedStorageMap?.metadata?.namespace || storageMapRef?.namespace || namespace,
+            namespace: matchedStorageMap?.metadata?.namespace || namespace,
             name:      matchedStorageMap?.metadata?.name,
-          } : (storageMapRef ? {
+          } : null,
-            namespace: storageMapRef.namespace,
-            name:      storageMapRef.name,
-          } : null),
         };
       });
     },
@@ -119,20 +113,6 @@ export default defineComponent({
   methods: {
     resourceNames,
 
-    getPlanMapRef(plan, mapType) {
-      const ref = plan?.spec?.map?.[mapType];
-      const name = ref?.name;
-
-      if (!name) {
-        return null;
-      }
-
-      return {
-        name,
-        namespace: ref?.namespace || plan?.metadata?.namespace || '',
-      };
-    },
-
     /**
      * Determine whether a related resource (migration / network map / storage map)
      * is owned by the given plan by inspecting its `metadata.ownerReferences`.
@@ -157,8 +137,9 @@ export default defineComponent({
       const existing = this.existingRelatedResources;
       const targets = new Map();
 
-      const addTarget = (type, name, namespace) => {
+      const addTarget = (type, resource) => {
-        const ns = namespace || '';
+        const name = resource?.metadata?.name;
+        const ns = resource?.metadata?.namespace;
 
         if (!name) {
           return;
@@ -172,20 +153,17 @@ export default defineComponent({
       };
 
       for (const plan of this.value || []) {
-        const networkMapRef = this.getPlanMapRef(plan, 'network');
+        existing[HCI.FORKLIFT_NETWORK_MAP]
-        const storageMapRef = this.getPlanMapRef(plan, 'storage');
+          .filter((resource) => this.ownedByPlan(resource, plan))
+          .forEach((resource) => addTarget(HCI.FORKLIFT_NETWORK_MAP, resource));
 
-        if (networkMapRef) {
+        existing[HCI.FORKLIFT_STORAGE_MAP]
-          addTarget(HCI.FORKLIFT_NETWORK_MAP, networkMapRef.name, networkMapRef.namespace);
+          .filter((resource) => this.ownedByPlan(resource, plan))
-        }
+          .forEach((resource) => addTarget(HCI.FORKLIFT_STORAGE_MAP, resource));
-
-        if (storageMapRef) {
-          addTarget(HCI.FORKLIFT_STORAGE_MAP, storageMapRef.name, storageMapRef.namespace);
-        }
 
         existing[HCI.FORKLIFT_MIGRATION]
           .filter((resource) => this.ownedByPlan(resource, plan))
-          .forEach((resource) => addTarget(HCI.FORKLIFT_MIGRATION, resource?.metadata?.name, resource?.metadata?.namespace));
+          .forEach((resource) => addTarget(HCI.FORKLIFT_MIGRATION, resource));
       }
 
       return [...targets.values()];
@@ -278,11 +256,11 @@ export default defineComponent({
       <div>• {{ t('harvester.addons.vmMigration.labels.migration') }}:</div>
       <template v-if="summary.migrations.length">
         <div
-          v-for="migrationName in summary.migrations"
+          v-for="migration in summary.migrations"
-          :key="migrationName"
+          :key="`${ migration.namespace }/${ migration.name }`"
         >
           <div class="ml-20">
-            - {{ migrationName }}
+            - {{ migration.name }}
           </div>
         </div>
       </template>

pkg/harvester/vue.config.js

@@ -1,24 +1 @@
-const path = require('path');
+module.exports = require('@rancher/shell/pkg/vue.config')(__dirname);
-
-const baseConfig = require('@rancher/shell/pkg/vue.config')(__dirname);
-
-const baseConfigureWebpack = baseConfig.configureWebpack;
-
-// noVNC >= 1.7 only publishes `./core/rfb.js` in its `exports` map, so resolve the
-// package by path to keep the keysym/input helpers importable.
-const NOVNC_DIR = path.resolve(__dirname, '..', '..', 'node_modules', '@novnc', 'novnc');
-
-module.exports = {
-  ...baseConfig,
-
-  configureWebpack(config) {
-    if (typeof baseConfigureWebpack === 'function') {
-      baseConfigureWebpack(config);
-    }
-
-    config.resolve.alias['@novnc/novnc'] = NOVNC_DIR;
-
-    // noVNC 1.7 uses top-level await for WebCodecs detection.
-    config.output = { ...config.output, environment: { ...config.output?.environment, asyncFunction: true } };
-  }
-};

vue.config.js

@@ -1,26 +1,6 @@
-const path = require('path');
 const config = require('@rancher/shell/vue.config');
 
-const baseConfig = config(__dirname, {
+module.exports = config(__dirname, {
   excludes: [],
   // excludes: ['harvester']
 });
-
-const baseConfigureWebpack = baseConfig.configureWebpack;
-
-module.exports = {
-  ...baseConfig,
-
-  configureWebpack(webpackConfig) {
-    if (typeof baseConfigureWebpack === 'function') {
-      baseConfigureWebpack(webpackConfig);
-    }
-
-    // noVNC >= 1.7 only publishes `./core/rfb.js` in its `exports` map, so resolve the
-    // package by path to keep the keysym/input helpers importable.
-    webpackConfig.resolve.alias['@novnc/novnc'] = path.resolve(__dirname, 'node_modules/@novnc/novnc');
-
-    // noVNC 1.7 uses top-level await for WebCodecs detection.
-    webpackConfig.output = { ...webpackConfig.output, environment: { ...webpackConfig.output?.environment, asyncFunction: true } };
-  }
-};