feat: introduce rwxNetwork setting (#746) (#750)

* feat: add rwxNetwork setting



* fix: network payload



---------


(cherry picked from commit d1949641a7)

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

.eslintignore

@@ -14,3 +14,4 @@ dist-pkg
 pkg/harvester/index.ts
 pkg/harvester/store/*
 scripts/pkgfile.js
+tmp

.github/auto-assign-config.yaml

@@ -3,5 +3,4 @@ addReviewers: true
 numberOfReviewers: 0
 reviewers:
 - a110605
-- houhoucoop
+- houhoucoop
-- NickChungSUSE

.github/mergify.yml

@@ -1,33 +1,14 @@
 pull_request_rules:
-- name: Automatically open backport PR to release-harvester-v1.5
+  - name: Ask to resolve conflict
-  conditions:
+    conditions:
-    - base=main
+      - conflict
-    - label="require backport 1.5"
+    actions:
-  actions:
+      comment:
-    backport:
+        message: This pull request is now in conflict. Could you fix it @{{author}}? 🙏
-      branches:
-        - "release-harvester-v1.5"
-      assignees:
-        - "{{ author }}"
-      labels:
-        - "v1.5 backport PR"
 
-- name: Automatically open backport PR to release-harvester-v1.0
+commands_restrictions:
-  conditions:
+  backport:
-    - base=main
+    conditions:
-    - label="require backport 1.0"
+      - or:
-  actions:
+        - sender-permission>=write
-    backport:
+        - sender=github-actions[bot]
-      branches:
-        - "release-harvester-v1.0"
-      assignees:
-        - "{{ author }}"
-      labels:
-        - "v1.0 backport PR"
-
-- name: Ask to resolve conflict
-  conditions:
-    - conflict
-  actions:
-    comment:
-      message: This pull request is now in conflict. Could you fix it @{{author}}? 🙏

.github/release.yml

@@ -0,0 +1,40 @@
+# .github/release.yml
+changelog:
+  categories:
+    - title: Features
+      labels:
+        - feat
+    - title: Bug Fixes
+      labels:
+        - fix
+    - title: Dependencies
+      labels:
+        - deps
+    - title: Performance
+      labels:
+        - perf
+    - title: Documentation
+      labels:
+        - docs
+    - title: Style
+      labels:
+        - style
+    - title: Build & Continuous Integration
+      labels:
+        - build
+        - ci
+    - title: Security
+      labels:
+        - security
+    - title: Tests
+      labels:
+        - test
+    - title: Refactoring
+      labels:
+        - refactor
+    - title: Chores
+      labels:
+        - chore
+    - title: Others
+      labels:
+        - other

.github/renovate.json

@@ -1,15 +1,18 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended"],
+    "extends": [
+    "config:recommended",
+    ":semanticCommitTypeAll(deps)",
+    ":semanticCommitScopeDisabled"
+  ],
   "baseBranches": [
-    "master",
     "main",
-    "/^release-harvester-v\\d+\\.\\d+$/"
+    "release-harvester-v1.7",
+    "release-harvester-v1.8"
   ],
   "automergeMajor": false,
   "semanticCommits": "enabled",
-  "semanticCommitType": "chore",
+  "semanticCommitType": "deps",
-  "semanticCommitScope": "deps",
   "prHourlyLimit": 12,
   "timezone": "Asia/Taipei",
   "schedule": ["after 10am on sunday"],

.github/workflows/auto-assign-reviewer.yaml

@@ -1,4 +1,4 @@
-name: "[PR Management] Auto Assign Reviewer"
+name: "[PR Management] Auto Assign Reviewer & Assignee"
 
 on:
   pull_request_target:
@@ -9,8 +9,9 @@ permissions:
 
 jobs:
   auto-assign:
+    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     steps:
-    - uses: rancher/gh-issue-mgr/auto-assign-action@main
+      - uses: rancher/gh-issue-mgr/auto-assign-action@main
-      with:
+        with:
-        configuration-path: .github/auto-assign-config.yaml
+          configuration-path: .github/auto-assign-config.yaml

.github/workflows/backport-label.yaml

@@ -0,0 +1,94 @@
+name: "[PR Management] Add Labels"
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+    branches:
+      - main
+      - 'release-harvester-v*'
+
+permissions:
+  pull-requests: write
+
+jobs:
+  add-require-backport-label:
+    if: github.event.pull_request.draft == false &&
+        github.event.pull_request.base.ref == 'main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
+      - name: Fetch release branches and PR labels
+        id: fetch_info
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          repo="${{ github.repository }}"
+          pr_number=${{ github.event.pull_request.number }}
+
+          release_branches=$(gh api "repos/${repo}/branches" --paginate --jq '.[].name' | grep -E '^release-harvester-v[0-9]+\.[0-9]+$' || true)
+
+          if [[ -z "$release_branches" ]]; then
+            echo "should_label=false" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          latest_branch=$(echo "$release_branches" | sort -Vr | head -n1)
+          version="${latest_branch#release-harvester-v}"
+          release_tag="v${version}.0"
+
+          tags=$(gh api "repos/${repo}/releases" --paginate --jq '.[].tag_name')
+          if echo "$tags" | grep -Fxq "$release_tag"; then
+            echo "should_label=false" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          label="require backport/v${version}"
+          echo "should_label=true" >> "$GITHUB_OUTPUT"
+          echo "backport_label=$label" >> "$GITHUB_OUTPUT"
+
+          pr_labels=$(gh pr view "$pr_number" --repo "$repo" --json labels --jq '.labels[].name' || echo "")
+          pr_labels_csv=$(echo "$pr_labels" | tr '\n' ',' | sed 's/,$//')
+          echo "pr_labels=$pr_labels_csv" >> "$GITHUB_OUTPUT"
+
+      - name: Add label if needed
+        if: steps.fetch_info.outputs.should_label == 'true' && !contains(steps.fetch_info.outputs.pr_labels, steps.fetch_info.outputs.backport_label)
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          echo "Adding label: ${{ steps.fetch_info.outputs.backport_label }}"
+          gh pr edit ${{ github.event.pull_request.number }} \
+            --repo ${{ github.repository }} \
+            --add-label "${{ steps.fetch_info.outputs.backport_label }}"
+
+  add-backport-label:
+    if: github.event.pull_request.draft == false &&
+        startsWith(github.event.pull_request.base.ref, 'release-harvester-v')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check conditions for backport label
+        id: check
+        run: |
+          IS_MERGIFY=$(echo '${{ github.event.pull_request.user.login }}' | grep -iq 'mergify' && echo true || echo false)
+          TARGET_BRANCH=${{ github.event.pull_request.base.ref }}
+
+          echo "IS_MERGIFY=$IS_MERGIFY" >> $GITHUB_OUTPUT
+          echo "TARGET_BRANCH=$TARGET_BRANCH" >> $GITHUB_OUTPUT
+
+      - name: Add label if needed
+        if: steps.check.outputs.IS_MERGIFY == 'true' && startsWith(steps.check.outputs.TARGET_BRANCH, 'release-harvester-v')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          TARGET_BRANCH="${{ steps.check.outputs.TARGET_BRANCH }}"
+          version="${TARGET_BRANCH#release-harvester-v}"
+          label="backport/v${version}"
+          echo "Adding label $label"
+          gh pr edit ${{ github.event.pull_request.number }} \
+            --repo ${{ github.repository }} \
+            --add-label "$label"

.github/workflows/backport-request.yaml

@@ -0,0 +1,49 @@
+name: "[PR Management] Request Backport via Mergify"
+
+on:
+  pull_request_target:
+    types: [closed]
+    branches: [main]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  comment-backport:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
+      - name: Post Mergify backport command
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          pr_number=${{ github.event.pull_request.number }}
+          repo="${{ github.repository }}"
+
+          labels_json='${{ toJson(github.event.pull_request.labels.*.name) }}'
+          labels=$(echo "$labels_json" | jq -r '.[] // empty')
+
+          echo "Labels on PR: $labels"
+
+          matches=$(echo "$labels" | grep -oE '^require backport/v[0-9]+\.[0-9]+$' || true)
+
+          if [[ -z "$matches" ]]; then
+            echo "No back‑port labels found — skipping."
+            exit 0
+          fi
+
+          branches=$(echo "$matches" \
+            | sed -E 's/^require backport\/v/release-harvester-v/' \
+            | sort -u | tr '\n' ' ')
+          branches=${branches%% }
+
+          cmd="@Mergifyio backport $branches"
+          echo "Posting Mergify command: $cmd"
+          gh pr comment "$pr_number" --repo "$repo" --body "$cmd"

.github/workflows/build-and-publish-catalog-on-release.yaml

@@ -11,18 +11,19 @@ defaults:
     working-directory: ./
 
 jobs:
-  lint:
+  check-version:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
-        with:
+        uses: actions/checkout@v4
-          fetch-depth: 1
 
-      - name: Run tests
+      - name: Check package version
-        uses: ./.github/actions/lint
+        env:
+          TAG_VERSION: ${{ github.event.release.tag_name }}
+        run: ./scripts/check-version.sh $TAG_VERSION
 
   build-and-push-extension-catalog:
-    needs: lint
+    needs: check-version
     uses: ./.github/workflows/build-extension-catalog.yml
     permissions:
       actions: write

.github/workflows/build-extension-on-merge.yml

@@ -132,7 +132,7 @@ jobs:
           git push origin ${{ needs.setup-target-branch.outputs.target_branch }}
 
       - name: Run Helm chart releaser
-        uses: helm/chart-releaser-action@v1.4.1
+        uses: helm/chart-releaser-action@v1.7.0
         with:
           charts_dir: ./charts
         env:

.github/workflows/build-extension-on-release.yml

@@ -22,26 +22,27 @@ jobs:
       - name: Determine release tag
         id: determine_tag
         run: |
-          if [[ "${{ github.ref_name }}" =~ ^v([0-9]+\.[0-9]+\.[0-9]+)$ ]]; then
+          if [[ "${{ github.event.release.tag_name }}" =~ ^v([0-9]+\.[0-9]+\.[0-9]+)$ ]]; then
             RELEASE_TAG="harvester-${BASH_REMATCH[1]}"
             echo "${RELEASE_TAG}"
             echo "release_tag=${RELEASE_TAG}" >> $GITHUB_OUTPUT
           else
             echo "Error: invalid tag format." && exit 1
           fi
-  lint:
+  check-version:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
-        with:
+        uses: actions/checkout@v4
-          fetch-depth: 1
+      - name: Check package version
+        env:
+          TAG_VERSION: ${{ github.event.release.tag_name }}
+        run: ./scripts/check-version.sh $TAG_VERSION
 
-      - name: Run tests
-        uses: ./.github/actions/lint
   build-extension-charts:
     needs:
       - setup-release-tag
-      - lint
+      - check-version
     uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@master
     permissions:
       actions: write

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

@@ -5,14 +5,20 @@ on:
       - v[1-9].*
 
 jobs:
-  build-validation:
+  check-version:
-    name: Build Test
+    runs-on: ubuntu-latest
-    uses: ./.github/workflows/run-lint.yaml
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Check package version
+        env:
+          TAG_VERSION: ${{github.ref_name}}
+        run: ./scripts/check-version.sh $TAG_VERSION
+
   build:
     name: Build and Upload Package
     uses: ./.github/workflows/build-and-publish-standalone.yaml
-    needs:
+    needs: check-version
-      - build-validation
     permissions:
       contents: read
       packages: write

.github/workflows/fossa.yml

@@ -0,0 +1,34 @@
+name: FOSSA Scanning
+
+on:
+  push:
+    branches: ["main", "release-harvester-v*"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  fossa-scanning:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+    - name: Checkout
+      uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+
+    # The FOSSA token is shared between all repos in Harvester's GH org. It can
+    # be used directly and there is no need to request specific access to EIO.
+    - name: Read FOSSA token
+      uses: rancher-eio/read-vault-secrets@main
+      with:
+        secrets: |
+          secret/data/github/org/harvester/fossa/credentials token | FOSSA_API_KEY_PUSH_ONLY
+
+    - name: FOSSA scan
+      uses: fossas/fossa-action@main
+      with:
+        api-key: ${{ env.FOSSA_API_KEY_PUSH_ONLY }}
+        # Only runs the scan and do not provide/returns any results back to the
+        # pipeline.
+        run-tests: false

.github/workflows/release-label.yaml

@@ -0,0 +1,30 @@
+name: "[PR Management] Add PR Label"
+
+on:
+  pull_request_target:
+    types: [opened, reopened, edited]
+    branches:
+      - main
+      - 'release-harvester-v*'
+
+permissions:
+  pull-requests: write
+
+jobs:
+  auto-assign-pr-label:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+      - name: Setup Nodejs and yarn install
+        uses: ./.github/actions/setup
+      - name: Set PR label
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_LABEL=$(node ./scripts/extract-release-label.mjs "${{ github.event.pull_request.title }}")
+          echo "PR_LABEL = $PR_LABEL"
+          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }}  --add-label "$PR_LABEL"

.github/workflows/run-lint.yaml

@@ -1,12 +1,13 @@
 name: Tests
 
 on:
-  workflow_call:  # This tells GH that the workflow is reusable 
+  workflow_call:  # This tells GH that the workflow is reusable
   push:
     branches:
       - main
       - 'release-*'
   pull_request:
+    types: [opened, reopened, edited, synchronize]
     branches:
       - main
       - 'release-*'
@@ -22,6 +23,11 @@ jobs:
       - name: Run tests
         uses: ./.github/actions/lint
 
+      - name: Validate PR title lint
+        if: github.event_name == 'pull_request'
+        shell: bash
+        run: echo "${{ github.event.pull_request.title }}" | npx commitlint
+
       - name: Validate commit messages
         shell: bash
         run: |
@@ -35,8 +41,14 @@ jobs:
             FROM="$GITHUB_BASE_SHA"
             TO="$GITHUB_HEAD_SHA"
           elif [ -n "$GITHUB_BEFORE" ] && [ -n "$GITHUB_AFTER" ]; then
-            FROM="$GITHUB_BEFORE"
+            if [ "$GITHUB_BEFORE" = "0000000000000000000000000000000000000000" ]; then
-            TO="$GITHUB_AFTER"
+              # first push to HEAD
+              FROM=""
+              TO="$GITHUB_AFTER"
+            else
+              FROM="$GITHUB_BEFORE"
+              TO="$GITHUB_AFTER"
+            fi
           else
             echo "No valid commit range found, skipping commitlint."
             exit 0
@@ -44,7 +56,15 @@ jobs:
 
           echo "FROM=$FROM"
           echo "TO=$TO"
-          npx commitlint --from "$FROM" --to "$TO" --verbose
+
+          if [ -z "$FROM" ]; then
+            echo "Linting last commit  $TO"
+            npx commitlint --last --verbose
+
+          else
+            echo "Linting commits from $FROM to $TO"
+            npx commitlint --from "$FROM" --to "$TO" --verbose
+          fi
         env:
           GITHUB_EVENT_NAME: ${{ github.event_name }}
           GITHUB_BASE_SHA: ${{ github.event.pull_request.base.sha }}

README.md

@@ -163,7 +163,7 @@ If you want to contribute, start by reading this document, then visit our [Getti
 
 ## License
 
-Copyright (c) 2014-2025 [SUSE, LLC.](https://www.suse.com/)
+Copyright (c) 2014-2026 [SUSE, LLC.](https://www.suse.com/)
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

commitlint.config.js

@@ -22,12 +22,16 @@ module.exports = {
         'security', // Security fixes
       ]
     ],
+    // Allows the scope to be empty. [0] means the rule is disabled.
+    'scope-empty':            [0, 'always'],
+    // Allows any string for the scope.
+    'scope-case':             [2, 'always', 'kebab-case'],
     'type-case':              [2, 'always', 'lower-case'],
     'type-empty':             [2, 'never'],
-    'subject-case':           [2, 'always', 'lower-case'],
+    'subject-case':           [0, 'never'],
     'subject-empty':          [2, 'never'],
     'subject-full-stop':      [2, 'never', '.'],
-    'subject-max-length':     [2, 'always', 72],
+    'subject-max-length':     [0, 'never'],
     'body-leading-blank':     [2, 'always'],
     'body-max-line-length':   [2, 'always', 100],
     'footer-leading-blank':   [2, 'always'],

package.json

@@ -1,36 +1,41 @@
 {
   "name": "harvester-ui-extension",
-  "version": "1.6.0-dev",
+  "version": "1.8.0-rc2",
   "private": false,
   "engines": {
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@babel/plugin-transform-class-static-block": "7.26.0",
+    "@babel/plugin-transform-class-static-block": "7.28.6",
-    "@rancher/shell": "3.0.5-rc.3",
+    "@rancher/shell": "3.0.9-rc.6",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.1",
+    "@vue-flow/core": "^1.33.5",
+    "@vue-flow/minimap": "^1.4.0",
     "cache-loader": "^4.1.0",
     "color": "4.2.3",
     "ip": "2.0.1",
     "node-polyfill-webpack-plugin": "^3.0.0",
+    "elkjs": "^0.11.0",
     "vue-draggable-next": "^2.2.1",
     "yaml": "^2.5.1"
   },
   "resolutions": {
-    "@types/node": "~20.10.0",
+    "@types/node": "~20.19.0",
-    "cronstrue": "2.50.0",
+    "cronstrue": "2.59.0",
     "d3-color": "3.1.0",
     "ejs": "3.1.10",
-    "follow-redirects": "1.15.6",
+    "follow-redirects": "1.15.11",
     "glob": "7.2.3",
     "glob-parent": "6.0.2",
     "json5": "2.2.3",
-    "@types/lodash": "4.17.5",
+    "@types/lodash": "4.17.24",
     "merge": "2.1.1",
-    "node-forge": "1.3.1",
+    "node-forge": "1.3.3",
     "nth-check": "2.1.1",
-    "qs": "6.11.1",
+    "qs": "6.15.0",
-    "roarr": "7.0.4",
+    "roarr": "7.21.4",
-    "semver": "7.5.4",
+    "semver": "7.7.4",
     "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "scripts": {
@@ -38,6 +43,7 @@
     "build": "./node_modules/.bin/vue-cli-service build",
     "clean": "./node_modules/@rancher/shell/scripts/clean",
     "lint": "./node_modules/.bin/eslint --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",
@@ -46,6 +52,7 @@
     "prepare": "husky"
   },
   "devDependencies": {
+    "@commitlint/load": "^19.8.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "eslint-plugin-node": "^11.1.0",

pkg/harvester/README.md

@@ -0,0 +1,178 @@
+# harvester-ui-extension
+
+The Harvester UI Extension is a Rancher extension that provides the user interface for [Harvester](https://harvesterhci.io) within the [Rancher Dashboard](https://github.com/rancher/dashboard).
+
+> **Note:**
+> This extension is available starting from **Rancher 2.10.0**. Ensure your Rancher version is **2.10.0 or later** to access Harvester integration.
+
+## Installation
+
+For detailed installation instructions, please refer to the [official Harvester documentation](https://docs.harvesterhci.io/v1.5/rancher/harvester-ui-extension#installation-on-rancher-210).
+
+
+## Development Setup
+
+Ensure **Node.js v20 or later** is installed for development and debugging.
+
+### Standalone Mode
+
+Run the extension standalone with hot reload at `https://localhost:8005`.
+
+```bash
+# Install dependencies
+yarn install
+
+# Start the development server
+RANCHER_ENV=harvester API=https://your-harvester-ip yarn dev
+
+# Example with specific server version
+RANCHER_ENV=harvester VUE_APP_SERVER_VERSION=v1.5.0 API=https://192.168.1.123 yarn dev
+```
+
+You may also define environment variables in a `.env` file:
+
+```env
+RANCHER_ENV=harvester
+VUE_APP_SERVER_VERSION=v1.5.0
+API=https://192.168.1.123
+```
+
+### Rancher Integration Mode
+
+To run as a Rancher extension, follow the [Rancher UI Extension Guide](https://extensions.rancher.io/extensions/next/extensions-getting-started#running-the-app).
+
+```bash
+API=https://your-rancher-ip yarn dev
+```
+
+## Commit Message Guidelines
+
+This project uses [commit-lint](https://commitlint.js.org/) with [Conventional Commits](https://www.conventionalcommits.org/) to ensure consistent and meaningful commit messages.
+
+### Commit Message Format
+
+All commit messages must follow the conventional commit format:
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+### Supported Types
+
+- **feat**: New features
+- **fix**: Bug fixes
+- **docs**: Documentation changes
+- **style**: Code style changes (formatting, missing semicolons, etc.)
+- **refactor**: Code refactoring
+- **perf**: Performance improvements
+- **test**: Adding or updating tests
+- **build**: Build system or external dependencies
+- **ci**: CI/CD changes
+- **chore**: Other changes that don't modify src or test files
+- **revert**: Reverts a previous commit
+- **wip**: Work in progress
+- **deps**: Dependency updates
+- **security**: Security fixes
+
+### Examples
+
+```bash
+# Feature
+git commit -m "feat: add new virtual machine creation wizard"
+
+# Bug fix
+git commit -m "fix: resolve memory leak in VM console"
+
+# Documentation
+git commit -m "docs: update installation instructions"
+
+# Breaking change
+git commit -m "feat!: change API endpoint structure
+
+BREAKING CHANGE: The /api/v1/vms endpoint has been replaced with /api/v2/vms"
+```
+
+### Git Hooks
+
+The project uses [Husky](https://typicode.github.io/husky/) to automatically validate commit messages and run linting before commits:
+
+- **pre-commit**: Runs ESLint to ensure code quality
+- **commit-msg**: Validates commit message format using commit-lint
+
+These hooks are automatically installed when you run `yarn install`.
+
+### Manual Validation
+
+You can manually validate commit messages:
+
+```bash
+# Validate the last commit
+yarn commitlint
+
+# Validate a specific commit
+npx commitlint --from <commit-hash>
+
+# Validate a range of commits
+npx commitlint --from <start-hash> --to <end-hash>
+```
+
+## Branch Structure
+
+- **`main`** – Main development branch
+- **`release-harvester-vX.Y`** – Stable release branches per version series
+- **`vX.Y-head`** – Testing branches for ongoing changes to extension builds in each release series
+
+> **Note:**
+> The `vX.Y-head` branches are auto-generated and kept in sync with release branches. Use these for testing the latest changes in each version series.
+
+## Testing Guidelines
+
+### UI Extension Testing
+
+To validate changes in a release series, switch to the appropriate `vX.Y-head` branch. For main branch testing, use `main-head`.
+
+- Examples:
+  - Test `1.0.x` series → `v1.0-head`
+  - Test `1.5.x` series → `v1.5-head`
+
+**Steps:**
+1. Navigate to **Rancher UI** → **Local** → **App** → **Repositories**
+2. Refresh the Harvester repository using the target `vX.Y-head` branch
+3. Go to the **Extensions** page and install the desired version
+
+### Standalone Mode Testing
+
+To test the standalone UI, configure Harvester to load the UI from an external source.
+
+- Examples of `ui-index`:
+  - Main branch → `https://releases.rancher.com/harvester-ui/dashboard/latest/index.html`
+  - Release series `1.5.x` → `https://releases.rancher.com/harvester-ui/dashboard/release-harvester-v1.5/index.html`
+
+**Steps:**
+1. Go to **Harvester UI** → **Advanced** → **Settings** → **UI**
+2. Set **ui-source** to `External`
+3. Set **ui-index** to the desired URL
+
+## Contributing
+
+If you want to contribute, start by reading this document, then visit our [Getting Started guide](https://extensions.rancher.io/extensions/next/extensions-getting-started) to learn how to develop and submit changes.
+
+## License
+
+Copyright (c) 2014-2026 [SUSE, LLC.](https://www.suse.com/)
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

pkg/harvester/components/HarvesterUpgradeProgressBarList.vue

@@ -1,6 +1,8 @@
 <script>
 import Collapse from '@shell/components/Collapse';
 import PercentageBar from '@shell/components/PercentageBar';
+import { HCI } from '../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 
 export default {
   name:       'HarvesterUpgradeProgressList',
@@ -25,13 +27,45 @@ export default {
     }
   },
 
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: HCI.UPGRADE });
+  },
+
   data() {
     return { open: true };
   },
 
+  computed: {
+    showResumeButton() {
+      return this.title === 'Upgrading Node';
+    },
+    latestUpgradeCR() {
+      return this.$store.getters['harvester/all'](HCI.UPGRADE).find( (U) => U.isLatestUpgrade);
+    },
+    resumeUpgradePausedNodeEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('resumeUpgradePausedNode');
+    },
+  },
   methods: {
     handleSwitch() {
       this.open = !this.open;
+    },
+    async resumeNodeUpgrade(nodeName) {
+      if (!this.latestUpgradeCR || !nodeName) return;
+
+      try {
+        const upgradePauseMapString = this.latestUpgradeCR.metadata.annotations[HCI_ANNOTATIONS.NODE_UPGRADE_PAUSE_MAP] || '{}';
+        const upgradePauseMap = JSON.parse(upgradePauseMapString);
+
+        // update the upgrade CR annotation harvesterhci.io/node-upgrade-pause-map to unpause the node upgrade process
+        upgradePauseMap[`${ nodeName }`] = 'unpause';
+        this.latestUpgradeCR.setAnnotation(HCI_ANNOTATIONS.NODE_UPGRADE_PAUSE_MAP, JSON.stringify(upgradePauseMap));
+        await this.latestUpgradeCR.save();
+      } catch (e) {
+        console.error(`unable to update harvester upgrade CR annotations: ${ this.latestUpgradeCR.id }.`, e); // eslint-disable-line no-console
+
+        return false;
+      }
     }
   }
 };
@@ -63,12 +97,28 @@ export default {
               v-for="(item, i) in list"
               :key="i"
             >
-              <p>
+              <div class="upgrade-node-header">
-                {{ item.name }} <span
+                <div class="upgrade-node-title">
-                  class="status"
+                  <p>
-                  :class="{ [item.state]: true }"
+                    {{ item.name }}
-                >{{ item.state }}</span>
+                  </p>
-              </p>
+                  <span
+                    class="status"
+                    :class="{ [item.state]: true }"
+                  >
+                    {{ item.state }}
+                  </span>
+                </div>
+                <button
+                  v-if="showResumeButton && resumeUpgradePausedNodeEnabled && item.state === 'Node-upgrade paused'"
+                  type="button"
+                  class="btn bg-info btn-sm"
+                  data-testid="add-item"
+                  @click="resumeNodeUpgrade(item.name)"
+                >
+                  {{ t('action.resume') }}
+                </button>
+              </div>
               <PercentageBar
                 :model-value="item.percent"
                 preferred-direction="MORE"
@@ -102,10 +152,21 @@ export default {
     }
   }
   .custom-content {
-    margin-bottom: 14px;
+    .upgrade-node-title {
-    p {
+      flex: 1 0 80%;
+      margin-right: 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .upgrade-node-header {
+      display:flex;
+      justify-content: space-between;
+      align-items: center;
       margin-bottom: 4px;
     }
+
+    margin-bottom: 14px;
+
     .status {
       float: right;
     }
@@ -117,6 +178,8 @@ export default {
     }
     .warning {
       color: var(--error);
+      margin-bottom: 8px;
+      margin-top: 4px;
     }
   }
 }

pkg/harvester/components/SettingList.vue

@@ -3,13 +3,14 @@ import { mapGetters } from 'vuex';
 import ActionMenu from '@shell/components/ActionMenuShell';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
-import { HCI_ALLOWED_SETTINGS, HCI_SETTING } from '../config/settings';
+import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING, HCI_SETTING } from '../config/settings';
+import { DOC } from '../config/doc-links';
+import { docLink } from '../utils/feature-flags';
 
 const CATEGORY = {
   ui: [
     'branding',
     'ui-source',
-    'ui-plugin-index',
     'ui-index',
   ]
 };
@@ -96,8 +97,12 @@ export default {
           return true;
         }
 
-        const description = this.t(setting.description, {}, true)?.toLowerCase() || '';
+        let description = this.t(setting.description, this.getDocLinkParams(setting) || {}, true)?.toLowerCase() || '';
 
+        // remove <a> tags from description
+        if (description.includes('<a')) {
+          description = description.replace(/<a[^>]*>(.*?)<\/a>/g, '$1');
+        }
         // filter by description
         if (description.includes(searchQuery)) {
           return true;
@@ -193,6 +198,19 @@ export default {
         }
         buttonDone(false);
       }
+    },
+
+    getDocLinkParams(setting) {
+      const settingConfig = HCI_ALLOWED_SETTINGS[setting.id] || HCI_SINGLE_CLUSTER_ALLOWED_SETTING[setting.id];
+
+      if (settingConfig?.docPath) {
+        const version = this.$store.getters['harvester-common/getServerVersion']();
+        const url = docLink(DOC[settingConfig.docPath], version);
+
+        return { url };
+      }
+
+      return {};
     }
   },
 };
@@ -223,7 +241,7 @@ export default {
               Experimental
             </span>
           </h1>
-          <h2 v-clean-html="t(setting.description, {}, true)">
+          <h2 v-clean-html="t(setting.description, getDocLinkParams(setting) || {}, true)">
           </h2>
         </div>
         <div

pkg/harvester/components/novnc/NovncConsoleWrapper.vue

@@ -257,8 +257,12 @@ export default {
       });
     },
 
+    reconnect() {
+      this.$refs.novncConsole.reconnect();
+    },
+
     softReboot() {
-      this.vmResource.softrebootVM();
+      this.vmResource.doSoftReboot();
     },
 
     showKeysModal() {
@@ -306,6 +310,13 @@ export default {
           {{ 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"
@@ -372,3 +383,15 @@ export default {
     background: rgb(40, 40, 40);
   }
 </style>
+
+<style lang="scss">
+  .vm-console .v-popper__arrow-container {
+    display: none;
+  }
+  .vm-console .v-popper__popper{
+    margin-top: 8px;
+  }
+  .vm-console .v-popper__inner{
+    overflow-y: visible;
+  }
+</style>

pkg/harvester/components/settings/cluster-registration-url.vue

@@ -0,0 +1,123 @@
+<script>
+import MessageLink from '@shell/components/MessageLink';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { HCI_SETTING } from '../../config/settings';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'HarvesterEditClusterRegistrationURL',
+
+  components: {
+    LabeledInput, MessageLink, Checkbox, Banner
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue.url = this.value.value;
+      parseDefaultValue.insecureSkipTLSVerify = true;
+    }
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  computed: {
+    toCA() {
+      return `${ HCI_SETTING.ADDITIONAL_CA }?mode=edit`;
+    },
+    clusterRegistrationTLSVerifyEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('clusterRegistrationTLSVerify');
+    },
+    registrationURL: {
+      get() {
+        return this.clusterRegistrationTLSVerifyEnabled ? this.parseDefaultValue.url : this.parseDefaultValue;
+      },
+
+      set(value) {
+        if (this.clusterRegistrationTLSVerifyEnabled) {
+          this.parseDefaultValue.url = value;
+        } else {
+          this.parseDefaultValue = value;
+        }
+      }
+    }
+  },
+
+  methods: {
+    getDefaultValue() {
+      if (this.clusterRegistrationTLSVerifyEnabled) {
+        return { url: '', insecureSkipTLSVerify: false };
+      } else {
+        return '';
+      }
+    },
+
+    updateUrl() {
+      this.update();
+    },
+
+    update() {
+      if (this.clusterRegistrationTLSVerifyEnabled) {
+        this.value['value'] = JSON.stringify(this.parseDefaultValue);
+      } else {
+        this.value['value'] = this.parseDefaultValue;
+      }
+    },
+
+    useDefault() {
+      this.parseDefaultValue = this.getDefaultValue();
+    },
+
+    updateInsecureSkipTLSVerify(newValue) {
+      const { url = '' } = this.parseDefaultValue;
+
+      this.parseDefaultValue = { url, insecureSkipTLSVerify: newValue };
+      this.update();
+    },
+  }
+};
+</script>
+
+<template>
+  <div
+    class="row"
+  >
+    <div class="col span-12">
+      <Banner color="info">
+        <MessageLink
+          :to="toCA"
+          target="_blank"
+          prefix-label="harvester.setting.clusterRegistrationUrl.tip.prefix"
+          middle-label="harvester.setting.clusterRegistrationUrl.tip.middle"
+          suffix-label="harvester.setting.clusterRegistrationUrl.tip.suffix"
+        />
+      </Banner>
+      <LabeledInput
+        v-model:value="registrationURL"
+        class="mb-20"
+        :mode="mode"
+        :label="t('harvester.setting.clusterRegistrationUrl.url')"
+        @update:value="updateUrl"
+      />
+      <div v-if="clusterRegistrationTLSVerifyEnabled">
+        <Checkbox
+          v-model:value="parseDefaultValue.insecureSkipTLSVerify"
+          class="check mb-5"
+          type="checkbox"
+          :label="t('harvester.setting.clusterRegistrationUrl.insecureSkipTLSVerify')"
+          @update:value="updateInsecureSkipTLSVerify"
+        />
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/components/settings/csi-online-expand-validation.vue

@@ -0,0 +1,294 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import InfoBox from '@shell/components/InfoBox';
+import { Banner } from '@components/Banner';
+import { allHash } from '@shell/utils/promise';
+import { CSI_DRIVER } from '../../types';
+import { LONGHORN_DRIVER } from '@shell/config/types';
+
+export default {
+  name: 'CSIOnlineExpandValidation',
+
+  components: {
+    Banner,
+    InfoBox,
+    LabeledSelect,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    value: {
+      type:    Object,
+      default: () => ({}),
+    },
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    try {
+      await allHash({ csiDrivers: this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }) });
+      this.fetchError = null;
+    } catch (error) {
+      console.error('Failed to fetch CSI drivers:', error); // eslint-disable-line no-console
+      this.fetchError = this.t(
+        'harvester.setting.csiOnlineExpandValidation.failedToLoadDrivers',
+        { error: error.message || error },
+        true
+      );
+    }
+  },
+
+  data() {
+    return {
+      configArr:  [],
+      parseError: null,
+      fetchError: null,
+    };
+  },
+
+  created() {
+    const initValue = this.value.value || this.value.default || '{}';
+
+    this.configArr = this.parseValue(initValue);
+    this.registerBeforeHook?.(this.willSave, 'willSave');
+  },
+
+  computed: {
+    allErrors() {
+      const errors = [];
+
+      if (this.fetchError) {
+        errors.push(this.fetchError);
+      }
+      if (this.parseError) {
+        errors.push(this.parseError);
+      }
+
+      return errors;
+    },
+
+    csiDrivers() {
+      if (this.fetchError) return [];
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
+    },
+
+    provisioners() {
+      const usedKeys = this.configArr.map(({ key }) => key);
+
+      return this.csiDrivers
+        .filter(({ name }) => !usedKeys.includes(name))
+        .map(({ name }) => name);
+    },
+
+    provisionerValue() {
+      return [
+        { label: 'True', value: true },
+        { label: 'False', value: false },
+      ];
+    },
+
+    disableAdd() {
+      return this.parseError || this.fetchError || this.configArr.length >= this.csiDrivers.length;
+    },
+
+    disableConfigEditing() {
+      return this.parseError || this.fetchError;
+    }
+  },
+
+  watch: {
+    'value.value'(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.configArr = this.parseValue(newVal || '{}');
+      }
+    }
+  },
+
+  methods: {
+    _convertToBoolean(value) {
+      if (typeof value === 'boolean') return value;
+
+      if (typeof value === 'string') {
+        const lowerCaseValue = value.toLowerCase();
+
+        if (lowerCaseValue === 'true') return true;
+        if (lowerCaseValue === 'false') return false;
+      }
+
+      return false; // default to false for any other string or non-boolean type
+    },
+    parseValue(raw) {
+      try {
+        const json = JSON.parse(raw);
+
+        this.parseError = null;
+
+        return Object.entries(json).map(([key, value]) => ({
+          key,
+          value: this._convertToBoolean(value),
+        }));
+      } catch (e) {
+        console.error('[CSIOnlineExpandValidation] JSON Parsing Error:', raw, e); // eslint-disable-line no-console
+        this.parseError = this.t(
+          'harvester.setting.csiOnlineExpandValidation.invalidJsonFormat',
+          { error: e.message },
+          true
+        );
+
+        return [];
+      }
+    },
+
+    stringifyConfig() {
+      const obj = {};
+
+      this.configArr.forEach(({ key, value }) => {
+        obj[key] = value;
+      });
+
+      return this.configArr.length ? JSON.stringify(obj) : '';
+    },
+
+    update() {
+      this.value.value = this.stringifyConfig();
+    },
+
+    willSave() {
+      const errors = [];
+
+      this.configArr.forEach(({ key }) => {
+        if (!key) {
+          errors.push(
+            this.t('validation.required', { key: this.t('harvester.setting.csiOnlineExpandValidation.provisioner') }, true)
+          );
+        }
+      });
+
+      this.value.value = this.stringifyConfig();
+
+      return errors.length ? Promise.reject(errors) : Promise.resolve();
+    },
+
+    useDefault() {
+      this.configArr = this.parseValue(this.value.default || '{}');
+      this.update();
+    },
+
+    disableEdit(driverKey) {
+      return this.fetchError || driverKey === LONGHORN_DRIVER;
+    },
+
+    add() {
+      if (this.disableConfigEditing) return;
+
+      this.configArr.push({ key: '', value: true });
+    },
+
+    remove(index) {
+      if (this.disableConfigEditing) return;
+
+      this.configArr.splice(index, 1);
+      this.update();
+    },
+
+    onValueChange(idx, newVal) {
+      if (this.disableConfigEditing) return;
+
+      const val = newVal === 'true' ? true : newVal === 'false' ? false : newVal;
+
+      this.configArr[idx].value = val;
+      this.update();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-for="(errorMsg, index) in allErrors"
+      :key="index"
+      color="error"
+    >
+      {{ errorMsg }}
+    </Banner>
+    <InfoBox
+      v-for="(driver, idx) in configArr"
+      :key="idx"
+      class="box"
+    >
+      <button
+        class="role-link btn btn-sm remove"
+        type="button"
+        :disabled="disableEdit(driver.key)"
+        @click="remove(idx)"
+      >
+        <i class="icon icon-x" />
+      </button>
+
+      <div class="row">
+        <div class="col span-4">
+          <LabeledSelect
+            v-model:value="driver.key"
+            label-key="harvester.setting.csiOnlineExpandValidation.provisioner"
+            required
+            searchable
+            :mode="mode"
+            :disabled="disableEdit(driver.key)"
+            :options="provisioners"
+            @update:value="update"
+            @keydown.native.enter.prevent
+          />
+        </div>
+
+        <div class="col span-4">
+          <LabeledSelect
+            v-model:value="driver.value"
+            :value="driver.value.toString()"
+            label-key="harvester.setting.csiOnlineExpandValidation.value"
+            required
+            searchable
+            :mode="mode"
+            :disabled="disableEdit(driver.key)"
+            :options="provisionerValue"
+            @update:value="val => onValueChange(idx, val)"
+            @keydown.native.enter.prevent
+          />
+        </div>
+      </div>
+    </InfoBox>
+
+    <button
+      class="btn btn-sm role-primary"
+      :disabled="disableAdd"
+      @click="add"
+    >
+      {{ t('generic.add') }}
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  position: relative;
+  padding-top: 40px;
+}
+.remove {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 0;
+}
+</style>

pkg/harvester/components/settings/instance-manager-resources.vue

@@ -0,0 +1,104 @@
+<script>
+import UnitInput from '@shell/components/form/UnitInput';
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'HarvesterInstanceManagerResources',
+
+  components: {
+    UnitInput,
+    Banner,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => ({
+        value:   '',
+        default: '{}'
+      })
+    },
+  },
+
+  data() {
+    const resources = this.parseJSON(this.value?.value) || this.parseJSON(this.value?.default) || {};
+
+    return {
+      resources,
+      parseError: null,
+    };
+  },
+
+  methods: {
+    parseJSON(string) {
+      try {
+        return JSON.parse(string);
+      } catch (e) {
+        this.parseError = this.t('harvester.setting.instanceManagerResources.parseError', { error: e.message });
+
+        return null;
+      }
+    },
+
+    update() {
+      if (!this.value) return;
+
+      const cpu = { ...this.resources?.cpu };
+
+      if (cpu.v1 !== null) cpu.v1 = String(cpu.v1);
+      if (cpu.v2 !== null) cpu.v2 = String(cpu.v2);
+
+      this.value.value = JSON.stringify({ ...this.resources, cpu });
+    },
+
+    useDefault() {
+      if (this.value?.default) {
+        this.resources = this.parseJSON(this.value.default) || {};
+        this.update();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="parseError"
+      color="error"
+    >
+      {{ parseError }}
+    </Banner>
+
+    <div class="row">
+      <div class="col span-12">
+        <UnitInput
+          v-model:value="resources.cpu.v1"
+          :label="t('harvester.setting.instanceManagerResources.v1')"
+          suffix="%"
+          :delay="0"
+          type="number"
+          min="0"
+          max="100"
+          required
+          :mode="mode"
+          class="mb-20"
+          @update:value="update"
+        />
+        <UnitInput
+          v-model:value="resources.cpu.v2"
+          :label="t('harvester.setting.instanceManagerResources.v2')"
+          suffix="%"
+          :delay="0"
+          type="number"
+          min="0"
+          max="100"
+          required
+          :mode="mode"
+          class="mb-20"
+          @update:value="update"
+        />
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/components/settings/kubevirt-migration.vue

@@ -0,0 +1,154 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import UnitInput from '@shell/components/form/UnitInput';
+import { MEBIBYTE } from '../../utils/unit';
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'KubevirtMigration',
+
+  components: {
+    LabeledInput,
+    UnitInput,
+    RadioGroup,
+    Banner
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true
+    },
+    value: {
+      type:    Object,
+      default: () => ({
+        value:   '',
+        default: '{}'
+      })
+    },
+  },
+
+  data() {
+    const migration = this.parseJSON(this.value?.value) || this.parseJSON(this.value?.default) || {};
+
+    return {
+      MEBIBYTE,
+      migration,
+      parseError: null,
+    };
+  },
+
+  created() {
+    this.registerBeforeHook?.(this.willSave, 'willSave');
+  },
+
+  methods: {
+    parseJSON(string) {
+      try {
+        return JSON.parse(string);
+      } catch (e) {
+        this.parseError = this.t('kubevirtMigration.parseError', { error: e.message });
+        // eslint-disable-next-line no-console
+        console.error('Failed to parse JSON:', e.message);
+
+        return null;
+      }
+    },
+
+    updateValue() {
+      if (this.value) {
+        this.value.value = JSON.stringify(this.migration);
+      }
+    },
+
+    useDefault() {
+      if (this.value?.default) {
+        const defaultMigration = this.parseJSON(this.value.default) || {};
+
+        this.migration = defaultMigration;
+        this.updateValue();
+      }
+    },
+
+    async willSave() {
+      this.updateValue();
+
+      return Promise.resolve();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="parseError"
+      color="error"
+    >
+      {{ parseError }}
+    </Banner>
+
+    <div class="migration-field">
+      <LabeledInput
+        v-model:value.number="migration.parallelMigrationsPerCluster"
+        :label="t('harvester.setting.kubevirtMigration.parallelMigrationsPerCluster')"
+        type="number"
+        min="1"
+      />
+      <LabeledInput
+        v-model:value.number="migration.parallelOutboundMigrationsPerNode"
+        :label="t('harvester.setting.kubevirtMigration.parallelOutboundMigrationsPerNode')"
+        type="number"
+        min="1"
+      />
+      <UnitInput
+        v-model:value="migration.bandwidthPerMigration"
+        min="0"
+        :label="t('harvester.setting.kubevirtMigration.bandwidthPerMigration')"
+        :mode="mode"
+        :suffix="MEBIBYTE"
+        :tooltip="t('harvester.setting.kubevirtMigration.bandwidthPerMigrationTooltip', _, true)"
+      />
+      <UnitInput
+        v-model:value="migration.completionTimeoutPerGiB"
+        :label="t('harvester.setting.kubevirtMigration.completionTimeoutPerGiB')"
+        :mode="mode"
+        :suffix="migration.completionTimeoutPerGiB === 1 ? 'Second' : 'Seconds'"
+        min="10"
+      />
+      <UnitInput
+        v-model:value="migration.progressTimeout"
+        :label="t('harvester.setting.kubevirtMigration.progressTimeout')"
+        :mode="mode"
+        :suffix="migration.progressTimeout === 1 ? 'Second' : 'Seconds'"
+        min="10"
+      />
+      <div
+        v-for="field in ['allowAutoConverge','allowPostCopy','unsafeMigrationOverride','allowWorkloadDisruption','disableTLS','matchSELinuxLevelOnMigration']"
+        :key="field"
+      >
+        <label
+          class="mb-5"
+          :for="field"
+        >{{ t(`harvester.setting.kubevirtMigration.${field}`) }}</label>
+        <RadioGroup
+          :id="field"
+          v-model:value="migration[field]"
+          :options="[
+            { label: t('advancedSettings.edit.trueOption'), value: true },
+            { label: t('advancedSettings.edit.falseOption'), value: false },
+          ]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.migration-field {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

pkg/harvester/components/settings/rancher-cluster.vue

@@ -0,0 +1,222 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { RadioGroup } from '@components/Form/Radio';
+import { SECRET } from '@shell/config/types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import YamlEditor from '@shell/components/YamlEditor';
+
+export default {
+  name: 'HarvesterRancherCluster',
+
+  components: {
+    RadioGroup,
+    FileSelector,
+    YamlEditor
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => ({}),
+    },
+    registerBeforeHook: {
+      type:     Function,
+      required: false,
+      default:  () => {},
+    },
+  },
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      const data = this.value.value || this.value.default || '{}';
+      const parsed = JSON.parse(data);
+
+      parseDefaultValue = {
+        kubeConfig:                                  '',
+        removeUpstreamClusterWhenNamespaceIsDeleted: parsed.removeUpstreamClusterWhenNamespaceIsDeleted || false
+      };
+    } catch (error) {
+      parseDefaultValue = {
+        kubeConfig:                                  '',
+        removeUpstreamClusterWhenNamespaceIsDeleted: false
+      };
+    }
+
+    return {
+      parseDefaultValue,
+      errors:           [],
+      existingSecret:   null,
+    };
+  },
+
+  async created() {
+    await this.checkExistingSecret();
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  methods: {
+    onKeySelected: createOnSelected('parseDefaultValue.kubeConfig'),
+
+    update() {
+      if (this.parseDefaultValue.removeUpstreamClusterWhenNamespaceIsDeleted) {
+        this.value['value'] = JSON.stringify({ removeUpstreamClusterWhenNamespaceIsDeleted: true });
+      } else {
+        this.value['value'] = this.value.default || '{}';
+      }
+    },
+
+    async checkExistingSecret() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+      const secrets = this.$store.getters[`${ inStore }/all`](SECRET) || [];
+
+      this.existingSecret = secrets.find((secret) => secret.metadata.name === 'rancher-cluster-config' &&
+        secret.metadata.namespace === 'harvester-system'
+      );
+
+      // If the secret exists and has data, populate the kubeConfig
+      if (this.existingSecret?.data?.kubeConfig) {
+        const decodedContent = atob(this.existingSecret.data.kubeConfig);
+
+        this.parseDefaultValue.kubeConfig = decodedContent;
+        this.$nextTick(() => {
+          this.update();
+        });
+      }
+    },
+
+    async createOrUpdateRancherKubeConfigSecret() {
+      this.errors = [];
+      // Check if kubeConfig is provided
+      if (!this.parseDefaultValue.kubeConfig) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.setting.rancherCluster.kubeConfig') }, true));
+
+        return Promise.reject(this.errors);
+      }
+
+      try {
+        let secret;
+
+        if (this.existingSecret) {
+          secret = this.existingSecret;
+          secret.setData('kubeConfig', this.parseDefaultValue.kubeConfig);
+        } else {
+          const inStore = this.$store.getters['currentProduct'].inStore;
+
+          secret = await this.$store.dispatch(`${ inStore }/create`, {
+            apiVersion: 'v1',
+            kind:       'Secret',
+            metadata:   {
+              name:      'rancher-cluster-config',
+              namespace: 'harvester-system'
+            },
+            type: 'secret',
+            data: { kubeConfig: btoa(this.parseDefaultValue.kubeConfig) }
+          });
+        }
+        await secret.save();
+
+        return Promise.resolve();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+
+        return Promise.reject(this.errors);
+      }
+    },
+
+    async deleteRancherKubeConfigSecret() {
+      if (this.existingSecret) {
+        this.existingSecret.remove();
+      }
+    },
+
+    async willSave() {
+      // Only create or update secret if enabled
+      if (this.parseDefaultValue.removeUpstreamClusterWhenNamespaceIsDeleted) {
+        await this.createOrUpdateRancherKubeConfigSecret();
+      } else {
+        await this.deleteRancherKubeConfigSecret();
+      }
+
+      return Promise.resolve();
+    },
+
+    useDefault() {
+      this.parseDefaultValue = {
+        kubeConfig:                                  '',
+        removeUpstreamClusterWhenNamespaceIsDeleted: false
+      };
+    }
+  },
+
+  watch: {
+    'parseDefaultValue.removeUpstreamClusterWhenNamespaceIsDeleted'(val, oldVal) {
+      if (val && !oldVal && this.existingSecret?.data?.kubeConfig) {
+        // Populate kubeConfig with the existing secret value
+        this.parseDefaultValue.kubeConfig = atob(this.existingSecret.data.kubeConfig);
+      }
+    },
+    'parseDefaultValue.kubeConfig'(val) {
+      this.$refs.yaml?.updateValue(val);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <RadioGroup
+          v-model:value="parseDefaultValue.removeUpstreamClusterWhenNamespaceIsDeleted"
+          :label="t('harvester.setting.rancherCluster.removeUpstreamClusterWhenNamespaceIsDeleted')"
+          name="removeUpstreamClusterWhenNamespaceIsDeleted"
+          :options="[true, false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+          @update:value="update"
+        />
+      </div>
+    </div>
+    <div
+      v-if="parseDefaultValue.removeUpstreamClusterWhenNamespaceIsDeleted"
+      class="row mt-20"
+    >
+      <div class="col span-12">
+        <FileSelector
+          class="btn btn-sm bg-primary mb-10"
+          :label="t('generic.readFromFile')"
+          @selected="onKeySelected"
+        />
+        <YamlEditor
+          ref="yaml"
+          v-model:value="parseDefaultValue.kubeConfig"
+          class="yaml-editor"
+          :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+          @update:value="update"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$yaml-height: 540px;
+
+:deep() .yaml-editor{
+  flex: 1;
+  min-height: $yaml-height;
+  & .code-mirror .CodeMirror {
+    position: initial;
+    height: auto;
+    min-height: $yaml-height;
+  }
+}
+</style>

pkg/harvester/components/settings/rwx-network.vue

@@ -0,0 +1,371 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { RadioGroup } from '@components/Form/Radio';
+import ArrayList from '@shell/components/form/ArrayList';
+import { isValidCIDR } from '@shell/utils/validators/cidr';
+import { _EDIT } from '@shell/config/query-params';
+import { Banner } from '@components/Banner';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../types';
+import { NETWORK_TYPE } from '../../config/types';
+
+const { L2VLAN, UNTAGGED } = NETWORK_TYPE;
+const SHARE_STORAGE_NETWORK = 'share-storage-network';
+const NETWORK = 'network';
+
+const DEFAULT_DEDICATED_NETWORK = {
+  vlan:           '',
+  clusterNetwork: '',
+  range:          '',
+  exclude:        [],
+};
+
+export default {
+  name: 'RwxNetworkSetting',
+
+  components: {
+    RadioGroup,
+    Banner,
+    ArrayList,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+      vlanStatus:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_STATUS }),
+    });
+  },
+
+  data() {
+    let enabled = false; // enabled / disabled options
+    let shareStorageNetwork = false; // shareStorageNetwork / dedicatedRwxNetwork options
+    let dedicatedNetwork = { ...DEFAULT_DEDICATED_NETWORK };
+    let networkType = L2VLAN;
+    let exclude = [];
+
+    try {
+      const parsedValue = JSON.parse(this.value.value || this.value.default || '{}');
+      const parsedNetwork = parsedValue?.[NETWORK] || parsedValue || {};
+
+      if (parsedValue && typeof parsedValue === 'object') {
+        shareStorageNetwork = !!parsedValue[SHARE_STORAGE_NETWORK];
+        networkType = 'vlan' in parsedNetwork ? L2VLAN : UNTAGGED;
+        dedicatedNetwork = {
+          vlan:           parsedNetwork.vlan || '',
+          clusterNetwork: parsedNetwork.clusterNetwork || '',
+          range:          parsedNetwork.range || '',
+        };
+        exclude = parsedNetwork?.exclude?.toString().split(',') || [];
+        enabled = shareStorageNetwork || !!(parsedNetwork.vlan || parsedNetwork.clusterNetwork || parsedNetwork.range);
+      }
+    } catch (error) {
+      enabled = false;
+      shareStorageNetwork = false;
+      dedicatedNetwork = { ...DEFAULT_DEDICATED_NETWORK };
+    }
+
+    return {
+      enabled,
+      shareStorageNetwork,
+      dedicatedNetwork,
+      networkType,
+      exclude,
+      defaultAddValue: '',
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  computed: {
+    showDedicatedNetworkConfig() {
+      return this.enabled && !this.shareStorageNetwork;
+    },
+
+    showVlan() {
+      return this.networkType === L2VLAN;
+    },
+
+    networkTypes() {
+      return [L2VLAN, UNTAGGED];
+    },
+
+    clusterNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+      const clusterNetworksOptions = this.networkType === UNTAGGED ? clusterNetworks.filter((network) => network.id !== 'mgmt') : clusterNetworks;
+
+      return clusterNetworksOptions.map((network) => {
+        const disabled = !network.isReadyForStorageNetwork;
+
+        return {
+          label: disabled ? `${ network.id } (${ this.t('generic.notReady') })` : network.id,
+          value: network.id,
+          disabled,
+        };
+      });
+    },
+  },
+
+  methods: {
+    onUpdateEnabled() {
+      if (!this.enabled) {
+        this.shareStorageNetwork = false;
+        this.dedicatedNetwork = { ...DEFAULT_DEDICATED_NETWORK };
+      }
+
+      this.update();
+    },
+
+    onUpdateNetworkType() {
+      if (this.shareStorageNetwork) {
+        this.dedicatedNetwork = { ...DEFAULT_DEDICATED_NETWORK };
+      }
+
+      this.update();
+    },
+
+    onUpdateDedicatedType(neu) {
+      this.dedicatedNetwork.clusterNetwork = '';
+
+      if (neu === L2VLAN) {
+        this.dedicatedNetwork.vlan = '';
+      } else {
+        delete this.dedicatedNetwork.vlan;
+      }
+
+      this.update();
+    },
+
+    inputVlan(neu) {
+      if (neu === '') {
+        this.dedicatedNetwork.vlan = '';
+        this.update();
+
+        return;
+      }
+
+      const newValue = Number(neu);
+
+      if (newValue > 4094) {
+        this.dedicatedNetwork.vlan = 4094;
+      } else if (newValue < 1) {
+        this.dedicatedNetwork.vlan = 1;
+      } else {
+        this.dedicatedNetwork.vlan = newValue;
+      }
+
+      this.update();
+    },
+
+    useDefault() {
+      this.enabled = false;
+      this.shareStorageNetwork = false;
+      this.dedicatedNetwork = { ...DEFAULT_DEDICATED_NETWORK };
+      this.update();
+    },
+
+    update() {
+      const value = { [SHARE_STORAGE_NETWORK]: false };
+
+      if (this.enabled && this.shareStorageNetwork) {
+        value[SHARE_STORAGE_NETWORK] = true;
+      }
+
+      if (this.showDedicatedNetworkConfig) {
+        value[NETWORK] = {};
+
+        if (this.showVlan) {
+          value[NETWORK].vlan = this.dedicatedNetwork.vlan;
+        }
+
+        value[NETWORK].clusterNetwork = this.dedicatedNetwork.clusterNetwork;
+        value[NETWORK].range = this.dedicatedNetwork.range;
+
+        const excludeList = this.exclude.filter((ip) => ip);
+
+        if (Array.isArray(excludeList) && excludeList.length > 0) {
+          value[NETWORK].exclude = excludeList;
+        }
+      }
+
+      this.value.value = JSON.stringify(value);
+    },
+
+    willSave() {
+      this.update();
+
+      if (!this.showDedicatedNetworkConfig) {
+        return Promise.resolve();
+      }
+
+      const errors = [];
+
+      if (this.showVlan && !this.dedicatedNetwork.vlan) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.vlan') }, true));
+      }
+
+      if (!this.dedicatedNetwork.clusterNetwork) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.clusterNetwork') }, true));
+      }
+
+      if (!this.dedicatedNetwork.range) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.range.label') }, true));
+      } else if (!isValidCIDR(this.dedicatedNetwork.range)) {
+        errors.push(this.t('harvester.setting.storageNetwork.range.invalid', null, true));
+      }
+
+      if (this.exclude) {
+        const hasInvalidCIDR = this.exclude.find((cidr) => {
+          return cidr && !isValidCIDR(cidr);
+        });
+
+        if (hasInvalidCIDR) {
+          errors.push(this.t('harvester.setting.storageNetwork.exclude.invalid', null, true));
+        }
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      }
+
+      return Promise.resolve();
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="mode">
+    <Banner color="warning">
+      <t
+        k="harvester.setting.rwxNetwork.warning"
+        :raw="true"
+      />
+    </Banner>
+    <RadioGroup
+      v-model:value="enabled"
+      class="mb-20"
+      name="rwx-network-enable"
+      :options="[true,false]"
+      :labels="[t('generic.enabled'), t('generic.disabled')]"
+      @update:value="onUpdateEnabled"
+    />
+
+    <RadioGroup
+      v-if="enabled"
+      v-model:value="shareStorageNetwork"
+      class="mb-20"
+      name="rwx-network-type"
+      :options="[true,false]"
+      :labels="[t('harvester.setting.rwxNetwork.shareStorageNetwork'), t('harvester.setting.rwxNetwork.dedicatedRwxNetwork')]"
+      @update:value="onUpdateNetworkType"
+    />
+    <Banner
+      v-if="shareStorageNetwork"
+      class="mb-20"
+      color="warning"
+    >
+      <t
+        k="harvester.setting.rwxNetwork.shareStorageNetworkWarning"
+        :raw="true"
+      />
+    </Banner>
+    <template v-if="showDedicatedNetworkConfig">
+      <LabeledSelect
+        v-model:value="networkType"
+        class="mb-20"
+        :options="networkTypes"
+        :mode="mode"
+        :label="t('harvester.fields.type')"
+        required
+        @update:value="onUpdateDedicatedType"
+      />
+
+      <LabeledInput
+        v-if="showVlan"
+        v-model:value.number="dedicatedNetwork.vlan"
+        type="number"
+        class="mb-20"
+        :mode="mode"
+        required
+        placeholder="e.g. 1 - 4094"
+        label-key="harvester.setting.storageNetwork.vlan"
+        @update:value="inputVlan"
+      />
+
+      <LabeledSelect
+        v-model:value="dedicatedNetwork.clusterNetwork"
+        label-key="harvester.setting.storageNetwork.clusterNetwork"
+        class="mb-20"
+        required
+        :options="clusterNetworkOptions"
+        @update:value="update"
+      />
+
+      <LabeledInput
+        v-model:value="dedicatedNetwork.range"
+        class="mb-5"
+        :mode="mode"
+        required
+        :placeholder="t('harvester.setting.storageNetwork.range.placeholder')"
+        label-key="harvester.setting.storageNetwork.range.label"
+        @update:value="update"
+      />
+
+      <ArrayList
+        v-model:value="exclude"
+        :show-header="true"
+        :default-add-value="defaultAddValue"
+        :mode="mode"
+        :add-label="t('harvester.setting.storageNetwork.exclude.addIp')"
+        class="mt-20"
+        @update:value="update"
+      >
+        <template #column-headers>
+          <div class="box mb-10">
+            <div class="key">
+              {{ t('harvester.setting.storageNetwork.exclude.label') }}
+            </div>
+          </div>
+        </template>
+        <template #columns="scope">
+          <div class="key">
+            <input
+              v-model="scope.row.value"
+              :placeholder="t('harvester.setting.storageNetwork.exclude.placeholder')"
+              @update:value="update"
+            />
+          </div>
+        </template>
+      </ArrayList>
+    </template>
+  </div>
+</template>

pkg/harvester/components/settings/support-bundle-namespaces.vue

@@ -3,6 +3,9 @@ import { NAMESPACE } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const SELECT_ALL = 'select_all';
+const UNSELECT_ALL = 'unselect_all';
+
 export default {
   name: 'HarvesterBundleNamespaces',
 
@@ -11,47 +14,92 @@ export default {
   mixins: [CreateEditView],
 
   async fetch() {
+    this.loading = true;
+
     await this.$store.dispatch('harvester/findAll', { type: NAMESPACE });
+
+    if (this.customSupportBundleFeatureEnabled) {
+      try {
+        const url = this.$store.getters['harvester-common/getHarvesterClusterUrl']('v1/harvester/namespaces?link=supportbundle');
+        const response = await this.$store.dispatch('harvester/request', { url });
+
+        this.defaultNamespaces = response.data || [];
+      } catch (error) {
+        this.defaultNamespaces = [];
+      }
+    } else {
+      this.defaultNamespaces = [];
+    }
+
+    this.loading = false;
   },
 
   data() {
-    let namespaces = [];
     const namespacesStr = this.value?.value || this.value?.default || '';
+    const namespaces = namespacesStr ? namespacesStr.split(',') : [];
 
-    if (namespacesStr) {
+    return {
-      namespaces = namespacesStr.split(',');
+      namespaces,
-    }
+      defaultNamespaces: [],
-
+      loading:           true
-    return { namespaces };
+    };
   },
 
   computed: {
+    customSupportBundleFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('customSupportBundle');
+    },
+
+    allNamespaces() {
+      return this.$store.getters['harvester/all'](NAMESPACE).map((ns) => ns.id);
+    },
+
+    filteredNamespaces() {
+      if (!this.customSupportBundleFeatureEnabled) {
+        return this.allNamespaces;
+      }
+
+      const defaultIds = this.defaultNamespaces.map((ns) => ns.id);
+
+      return this.allNamespaces.filter((ns) => !defaultIds.includes(ns));
+    },
+
     namespaceOptions() {
-      return this.$store.getters['harvester/all'](NAMESPACE).map((N) => {
+      const mappedNamespaces = this.filteredNamespaces.map((ns) => ({ label: ns, value: ns }));
-        return {
+
-          label: N.id,
+      if (!this.customSupportBundleFeatureEnabled) {
-          value: N.id
+        return mappedNamespaces;
-        };
+      }
-      });
+
+      const allSelected =
+        this.namespaces.length === this.filteredNamespaces.length &&
+        this.filteredNamespaces.every((ns) => this.namespaces.includes(ns));
+
+      const controlOption = allSelected ? { label: this.t('harvester.modal.bundle.namespaces.unselectAll'), value: UNSELECT_ALL } : { label: this.t('harvester.modal.bundle.namespaces.selectAll'), value: SELECT_ALL };
+
+      return [controlOption, ...mappedNamespaces];
     }
   },
 
   methods: {
-    update() {
+    update(selected) {
-      const namespaceStr = this.namespaces.join(',');
+      if (selected.includes(SELECT_ALL)) {
+        this.namespaces = [...this.filteredNamespaces];
+      } else if (selected.includes(UNSELECT_ALL)) {
+        this.namespaces = [];
+      } else {
+        this.namespaces = selected.filter((val) => val !== SELECT_ALL && val !== UNSELECT_ALL);
+      }
 
-      this.value['value'] = namespaceStr;
+      this.value.value = this.namespaces.join(',');
     }
   },
 
   watch: {
-    'value.value': {
+    'value.value'(newVal) {
-      handler(neu) {
+      const raw = newVal || this.value.default || '';
-        if (neu === this.value.default || !neu) {
+
-          this.namespaces = [];
+      this.namespaces = raw ? raw.split(',') : [];
-        }
-      },
-      deep: true
     }
   }
 };
@@ -62,6 +110,7 @@ export default {
     <div class="col span-12">
       <LabeledSelect
         v-model:value="namespaces"
+        :loading="loading"
         :multiple="true"
         label-key="nameNsDescription.namespace.label"
         :mode="mode"

pkg/harvester/components/settings/upgrade-config.vue

@@ -0,0 +1,224 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { RadioGroup } from '@components/Form/Radio';
+import { mapGetters } from 'vuex';
+import { allHash } from '@shell/utils/promise';
+import { NODE } from '@shell/config/types';
+
+export default {
+  name: 'HarvesterUpgradeConfig',
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup
+  },
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const hash = { nodes: this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }) };
+
+    await allHash(hash);
+  },
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = this.value.value ? JSON.parse(this.value.value) : JSON.parse(this.value.default);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+    parseDefaultValue = this.normalizeValue(parseDefaultValue);
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    strategyOptions() {
+      return [
+        { value: 'sequential', label: 'sequential' },
+        { value: 'skip', label: 'skip' },
+        { value: 'parallel', label: 'parallel' }
+      ];
+    },
+    nodeUpgradeOptions() {
+      return [
+        { value: 'auto', label: 'auto' },
+        { value: 'manual', label: 'manual' }
+      ];
+    },
+    nodesOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+
+      return nodes.map((node) => ({ value: node.id, label: node.name }));
+    },
+    showPauseNodes() {
+      return this.parseDefaultValue.nodeUpgradeOption?.strategy?.mode === 'manual';
+    },
+    resumeUpgradePausedNodeEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('resumeUpgradePausedNode');
+    },
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    normalizeValue(obj) {
+      // handle nodeUpgradeOption.strategy
+      if (obj?.nodeUpgradeOption?.strategy?.mode === 'auto') {
+        delete obj.nodeUpgradeOption.strategy.pauseNodes;
+      }
+
+      if (obj?.nodeUpgradeOption?.strategy?.mode === 'manual') {
+        if (!Array.isArray(obj.nodeUpgradeOption.strategy.pauseNodes)) {
+          obj.nodeUpgradeOption.strategy.pauseNodes = this.nodesOptions.map((node) => node.value);
+        }
+      }
+
+      // handle imagePreloadOption.strategy
+      if (!obj.imagePreloadOption) {
+        obj.imagePreloadOption = { strategy: { type: 'sequential' } };
+      }
+      if (!obj.imagePreloadOption.strategy) {
+        obj.imagePreloadOption.strategy = { type: 'sequential' };
+      }
+      if (!obj.imagePreloadOption.strategy.type) {
+        obj.imagePreloadOption.strategy.type = 'sequential';
+      }
+      // Only set concurrency if type is 'parallel'
+      if (obj.imagePreloadOption.strategy.type === 'parallel') {
+        if (typeof obj.imagePreloadOption.strategy.concurrency !== 'number') {
+          obj.imagePreloadOption.strategy.concurrency = 0;
+        }
+      } else {
+        delete obj.imagePreloadOption.strategy.concurrency;
+      }
+      if (typeof obj.restoreVM !== 'boolean') {
+        obj.restoreVM = false;
+      }
+
+      return obj;
+    },
+    update() {
+      try {
+        // Clone to avoid mutating the form state
+        const valueToSave = JSON.parse(JSON.stringify(this.parseDefaultValue));
+
+        if (valueToSave.imagePreloadOption && valueToSave.imagePreloadOption.strategy) {
+          if (valueToSave.imagePreloadOption.strategy.type !== 'parallel') {
+            delete valueToSave.imagePreloadOption.strategy.concurrency;
+          }
+        }
+
+        this.value['value'] = JSON.stringify(valueToSave, null, 2);
+        this.errors = [];
+      } catch (e) {
+        this.errors = ['Invalid JSON'];
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        let parseDefaultValue;
+
+        try {
+          parseDefaultValue = JSON.parse(neu.value);
+        } catch (err) {
+          parseDefaultValue = JSON.parse(this.value.default);
+        }
+        parseDefaultValue = this.normalizeValue(parseDefaultValue);
+        this['parseDefaultValue'] = parseDefaultValue;
+        this.update();
+      },
+      deep: true
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="row"
+      @input="update"
+    >
+      <div class="col span-12">
+        <label class="mb-5"><b>{{ t('harvester.setting.upgrade.imagePreloadStrategy') }}</b></label>
+        <LabeledSelect
+          v-model:value="parseDefaultValue.imagePreloadOption.strategy.type"
+          class="mb-20"
+          :mode="mode"
+          :label="t('harvester.setting.upgrade.strategyType')"
+          :options="strategyOptions"
+          @update:value="update"
+        />
+        <LabeledInput
+          v-if="parseDefaultValue.imagePreloadOption.strategy.type === 'parallel'"
+          v-model:value.number="parseDefaultValue.imagePreloadOption.strategy.concurrency"
+          class="mb-20"
+          :mode="mode"
+          :label="t('harvester.setting.upgrade.concurrency')"
+          min="0"
+          type="number"
+        />
+        <label class="mb-5"><b>{{ t('harvester.setting.upgrade.restoreVM') }}</b></label>
+        <RadioGroup
+          v-model:value="parseDefaultValue.restoreVM"
+          class="mb-20"
+          name="restoreVM"
+          :options="[true, false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+          @update:value="update"
+        />
+        <div v-if="resumeUpgradePausedNodeEnabled">
+          <label class="mb-5"><b>{{ t('harvester.setting.upgrade.nodeUpgradeOption') }}</b></label>
+          <LabeledSelect
+            v-model:value="parseDefaultValue.nodeUpgradeOption.strategy.mode"
+            class="mb-20 label-select"
+            :mode="mode"
+            :label="t('harvester.setting.upgrade.strategy')"
+            :options="nodeUpgradeOptions"
+            @update:value="update"
+          />
+          <LabeledSelect
+            v-if="showPauseNodes"
+            v-model:value="parseDefaultValue.nodeUpgradeOption.strategy.pauseNodes"
+            class="mb-20 label-select"
+            :clearable="true"
+            :multiple="true"
+            :mode="mode"
+            :label="t('harvester.setting.upgrade.pauseNodes')"
+            :options="nodesOptions"
+            @update:value="update"
+          />
+        </div>
+        <div
+          v-if="errors.length"
+          class="error"
+        >
+          {{ errors[0] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error {
+  color: #d9534f;
+  margin-top: 5px;
+}
+</style>

pkg/harvester/components/settings/vm-force-reset-policy.vue

@@ -69,6 +69,15 @@ export default {
         :mode="mode"
         label-key="harvester.setting.vmForceDeletionPolicy.period"
       />
+
+      <LabeledInput
+        v-if="parseDefaultValue.enable"
+        v-model:value.number="parseDefaultValue.vmMigrationTimeout"
+        class="mb-20"
+        type="number"
+        :mode="mode"
+        label-key="harvester.setting.vmForceDeletionPolicy.vmMigrationTimeout"
+      />
     </div>
   </div>
 </template>

pkg/harvester/components/settings/vm-migration-network.vue

@@ -0,0 +1,270 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { RadioGroup } from '@components/Form/Radio';
+import { Banner } from '@components/Banner';
+import ArrayList from '@shell/components/form/ArrayList';
+import { allHash } from '@shell/utils/promise';
+import { isValidCIDR } from '@shell/utils/validators/cidr';
+import { NODE } from '@shell/config/types';
+import { _EDIT } from '@shell/config/query-params';
+import { HCI } from '../../types';
+
+const DEFAULT_NETWORK = {
+  clusterNetwork: '',
+  vlan:           '',
+  range:          '',
+  exclude:        [],
+};
+
+export default {
+  name: 'VMMigrationNetwork',
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup,
+    Banner,
+    ArrayList,
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    value: {
+      type:    Object,
+      default: () => ({ value: '' }),
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    try {
+      await allHash({
+        clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+        vlanStatus:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN_STATUS }),
+        nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      });
+
+      this.fetchError = null;
+    } catch (e) {
+      console.error('Failed to fetch network data:', e); // eslint-disable-line no-console
+      this.fetchError = this.t('harvester.setting.vmMigrationNetwork.fetchError', { error: e.message || e }, true);
+    }
+  },
+
+  data() {
+    const { parsed, enabled, parseError } = this.parseInitialValue();
+
+    return {
+      enabled,
+      network:    { ...DEFAULT_NETWORK, ...parsed },
+      fetchError: null,
+      parseError,
+    };
+  },
+
+  created() {
+    this.registerBeforeHook?.(this.willSave, 'willSave');
+  },
+
+  computed: {
+    allErrors() {
+      return [this.fetchError, this.parseError].filter(Boolean);
+    },
+
+    clusterNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const networks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+
+      return networks.map((net) => ({
+        label:    net.isReadyForStorageNetwork ? net.id : `${ net.id } (${ this.t('generic.notReady') })`,
+        value:    net.id,
+        disabled: !net.isReadyForStorageNetwork,
+      }));
+    },
+
+    disableEdit() {
+      return !!(this.fetchError || this.parseError);
+    },
+  },
+
+  methods: {
+    parseInitialValue() {
+      let parsed = {};
+      let enabled = false;
+      let parseError = null;
+
+      try {
+        if (typeof this.value.value === 'string' && this.value.value.trim()) {
+          parsed = JSON.parse(this.value.value);
+          enabled = true;
+        }
+      } catch (e) {
+        console.error('[VMMigrationNetwork] Failed to parse value:', e); // eslint-disable-line no-console
+        parseError = this.t('harvester.setting.vmMigrationNetwork.parseError', { error: e.message }, true);
+      }
+
+      if (!Array.isArray(parsed.exclude)) {
+        parsed.exclude = [];
+      }
+
+      return {
+        parsed, enabled, parseError
+      };
+    },
+
+    clearErrors() {
+      this.fetchError = null;
+      this.parseError = null;
+    },
+
+    inputVlan(val) {
+      this.network.vlan = val ? Math.min(4094, Math.max(1, Number(val))) : '';
+      this.update();
+    },
+
+    useDefault() {
+      this.network = { ...DEFAULT_NETWORK };
+      this.value.value = '';
+      this.enabled = false;
+      this.clearErrors();
+    },
+
+    update() {
+      try {
+        this.value.value = this.enabled ? JSON.stringify({
+          ...this.network,
+          exclude: (this.network.exclude || []).filter((e) => !!e?.trim()),
+        }) : '';
+      } catch (e) {
+        console.error('Failed to stringify network config:', e); // eslint-disable-line no-console
+        this.value.value = '';
+      }
+    },
+
+    validateInputs() {
+      const errors = [];
+
+      if (!this.network.clusterNetwork) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.vmMigrationNetwork.clusterNetwork') }, true));
+      }
+
+      if (!this.network.range) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.vmMigrationNetwork.range.label') }, true));
+      } else if (!isValidCIDR(this.network.range)) {
+        errors.push(this.t('harvester.setting.vmMigrationNetwork.range.invalid', null, true));
+      }
+
+      if (this.network.vlan === '') {
+        errors.push(this.t('validation.required', { key: this.t('harvester.setting.vmMigrationNetwork.vlan') }, true));
+      } else {
+        const vlan = Number(this.network.vlan);
+
+        if (isNaN(vlan) || vlan < 1 || vlan > 4094) {
+          errors.push(this.t('validation.between', {
+            key: this.t('harvester.setting.vmMigrationNetwork.vlan'),
+            min: 1,
+            max: 4094,
+          }, true));
+        }
+      }
+
+      for (const cidr of this.network.exclude || []) {
+        if (cidr && !isValidCIDR(cidr)) {
+          errors.push(this.t('harvester.setting.storageNetwork.exclude.invalid', { value: cidr }, true));
+        }
+      }
+
+      return errors;
+    },
+
+    async willSave() {
+      if (!this.enabled) {
+        this.useDefault();
+
+        return Promise.resolve();
+      }
+
+      this.update();
+
+      const errors = this.validateInputs();
+
+      return errors.length ? Promise.reject(errors) : Promise.resolve();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-for="(errorMsg, index) in allErrors"
+      :key="index"
+      color="error"
+    >
+      {{ errorMsg }}
+    </Banner>
+    <RadioGroup
+      v-model:value="enabled"
+      class="mb-20"
+      name="enableMigrationNetwork"
+      :options="[true, false]"
+      :labels="[t('generic.enabled'), t('generic.disabled')]"
+      @update:value="update"
+    />
+    <template v-if="enabled">
+      <LabeledSelect
+        v-model:value="network.clusterNetwork"
+        required
+        label-key="harvester.setting.vmMigrationNetwork.clusterNetwork"
+        class="mb-20"
+        :mode="mode"
+        :options="clusterNetworkOptions"
+        :disabled="disableEdit"
+        @update:value="update"
+      />
+      <LabeledInput
+        v-model:value.number="network.vlan"
+        required
+        type="number"
+        class="mb-20"
+        :min="1"
+        :max="4094"
+        :mode="mode"
+        placeholder="e.g. 1 - 4094"
+        label-key="harvester.setting.vmMigrationNetwork.vlan"
+        :disabled="disableEdit"
+        @update:value="inputVlan"
+      />
+      <LabeledInput
+        v-model:value="network.range"
+        required
+        class="mb-5"
+        :mode="mode"
+        :placeholder="t('harvester.setting.vmMigrationNetwork.range.placeholder')"
+        label-key="harvester.setting.vmMigrationNetwork.range.label"
+        :disabled="disableEdit"
+        @update:value="update"
+      />
+      <ArrayList
+        v-model:value="network.exclude"
+        :show-header="true"
+        :default-add-value="''"
+        :mode="mode"
+        :add-disabled="disableEdit"
+        :add-label="t('harvester.setting.vmMigrationNetwork.exclude.addButton')"
+        :value-label="t('harvester.setting.vmMigrationNetwork.exclude.label')"
+        :value-placeholder="t('harvester.setting.storageNetwork.exclude.placeholder')"
+        @update:value="update"
+      />
+    </template>
+  </div>
+</template>

pkg/harvester/config/doc-links.js

@@ -1,8 +1,13 @@
 // suffix of doc link, see utils/feature-flags.js how to get complete doc link
 export const DOC = {
-  CONSOLE_URL:             `/host/#remote-console`,
+  CONSOLE_URL:                `/host/#remote-console`,
-  RANCHER_INTEGRATION_URL: `/rancher/rancher-integration`,
+  RANCHER_INTEGRATION_URL:    `/rancher/rancher-integration`,
-  STORAGE_NETWORK_EXAMPLE: `/advanced/storagenetwork#configuration-example`,
+  KSMTUNED_MODE:              `/host/#ksmtuned-mode`,
-  KSMTUNED_MODE:           `/host/#ksmtuned-mode`,
+  UPGRADE_URL:                `/upgrade/index`,
-  UPGRADE_URL:             `/upgrade/index`
+  UPGRADE_CONFIG_URL:         `/advanced/index#upgrade-config`,
+  STORAGE_NETWORK_EXAMPLE:    `/advanced/storagenetwork#configuration-example`,
+  SUPPORT_BUNDLE_NAMESPACES:  `/advanced/index/#support-bundle-namespaces`,
+  VPC_CONFIGURATION_EXAMPLES: `/networking/kubeovn-vpc#vpc-peering-configuration-examples`,
+  NETWORK_POLICY:             `/networking/kubeovn-vm-isolation/#network-policies`,
+  TRANSPARENT_HUGEPAGES:      `https://docs.kernel.org/admin-guide/mm/transhuge.html`,
 };

pkg/harvester/config/feature-flags.js

@@ -21,6 +21,7 @@ const FEATURE_FLAGS = {
     'vmSnapshotQuota',
     'longhornV2LVMSupport',
     'improveMaintenanceMode',
+    'upgradeConfigSetting'
   ],
   'v1.4.1': [],
   'v1.4.2': [
@@ -38,8 +39,33 @@ const FEATURE_FLAGS = {
   ],
   'v1.5.1': [],
   'v1.6.0': [
-    'vmMachineTypes'
+    'customSupportBundle',
-  ]
+    'csiOnlineExpandValidation',
+    'vmNetworkMigration',
+    'kubeovnVpcSubnet',
+    'rancherClusterSetting',
+    'cpuMemoryHotplug',
+    'cdiSettings',
+    'vmCloneRunStrategy',
+  ],
+  'v1.6.1': [],
+  'v1.7.0': [
+    'vmMachineTypeAuto',
+    'lhV2VolExpansion',
+    'l2VlanTrunkMode',
+    'kubevirtMigration',
+    'hotplugNic',
+    'resumeUpgradePausedNode',
+  ],
+  'v1.7.1': [],
+  'v1.8.0': [
+    'hotplugCdRom',
+    'supportBundleFileNameSetting',
+    'clusterRegistrationTLSVerify',
+    'vGPUAsPCIDevice',
+    'instanceManagerResourcesSetting',
+    'rwxNetworkSetting',
+  ],
 };
 
 const generateFeatureFlags = () => {

pkg/harvester/config/harvester-cluster.js

@@ -10,6 +10,7 @@ import {
   LOGGING,
   STORAGE_CLASS,
   SECRET,
+  NETWORK_POLICY
 } from '@shell/config/types';
 import { HCI, VOLUME_SNAPSHOT } from '../types';
 import {
@@ -34,8 +35,21 @@ import {
   SNAPSHOT_TARGET_VOLUME,
   IMAGE_VIRTUAL_SIZE,
   IMAGE_STORAGE_CLASS,
-  HARVESTER_DESCRIPTION
+  HARVESTER_DESCRIPTION,
+  VM_IMPORT_SOURCE_VM,
+  VM_IMPORT_SOURCE_CLUSTER,
+  VM_IMPORT_STATUS,
+  VM_IMPORT_SOURCE_V_DC,
+  VM_IMPORT_SOURCE_V_ENDPOINT,
+  VM_IMPORT_SOURCE_V_STATUS,
+  VM_IMPORT_SOURCE_O_REGION,
+  VM_IMPORT_SOURCE_O_ENDPOINT,
+  VM_IMPORT_SOURCE_O_STATUS,
+  VM_IMPORT_SOURCE_OVA_URL,
+  VM_IMPORT_SOURCE_OVA_STATUS,
 } from './table-headers';
+import { ADD_ONS } from './harvester-map';
+import { registerAddonSideNav } from '../utils/dynamic-nav';
 
 const TEMPLATE = HCI.VM_VERSION;
 const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
@@ -194,6 +208,142 @@ export function init($plugin, store) {
     exact: false
   });
 
+  // ===========================================================================
+  // VM Import Controller UI Flow
+  // ===========================================================================
+  // Define group (Hidden by default)
+  weightGroup('vmimport', 0, false);
+
+  // VirtualMachineImport
+  headers(HCI.VMIMPORT, [
+    STATE,
+    NAME_COL,
+    NAMESPACE_COL,
+    VM_IMPORT_SOURCE_VM,
+    VM_IMPORT_SOURCE_CLUSTER,
+    VM_IMPORT_STATUS,
+    AGE
+  ]);
+  configureType(HCI.VMIMPORT, {
+    resource:       HCI.VMIMPORT,
+    resourceDetail: HCI.VMIMPORT,
+    resourceEdit:   HCI.VMIMPORT,
+    location:       {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT }
+    }
+  });
+  virtualType({ // needed to avoid 404 on refresh when combined with registerAddonSideNav()
+    name:       HCI.VMIMPORT,
+    labelKey:   'harvester.addons.vmImport.labels.vmimport',
+    group:      'vmimport',
+    namespaced: true,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT }
+    }
+  });
+
+  // Source: VMware
+  headers(HCI.VMIMPORT_SOURCE_V, [
+    STATE,
+    NAME_COL,
+    VM_IMPORT_SOURCE_V_ENDPOINT,
+    VM_IMPORT_SOURCE_V_DC,
+    VM_IMPORT_SOURCE_V_STATUS,
+    AGE
+  ]);
+  configureType(HCI.VMIMPORT_SOURCE_V, {
+    resource:       HCI.VMIMPORT_SOURCE_V,
+    resourceDetail: HCI.VMIMPORT_SOURCE_V,
+    resourceEdit:   HCI.VMIMPORT_SOURCE_V,
+    location:       {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_V }
+    }
+  });
+  virtualType({ // needed to avoid 404 on refresh when combined with registerAddonSideNav()
+    name:       HCI.VMIMPORT_SOURCE_V,
+    labelKey:   'harvester.addons.vmImport.labels.vmimportSourceVMWare',
+    group:      'vmimport',
+    namespaced: true,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_V }
+    }
+  });
+
+  // Source: OpenStack
+  headers(HCI.VMIMPORT_SOURCE_O, [
+    STATE,
+    NAME_COL,
+    VM_IMPORT_SOURCE_O_ENDPOINT,
+    VM_IMPORT_SOURCE_O_REGION,
+    VM_IMPORT_SOURCE_O_STATUS,
+    AGE
+  ]);
+  configureType(HCI.VMIMPORT_SOURCE_O, {
+    resource:       HCI.VMIMPORT_SOURCE_O,
+    resourceDetail: HCI.VMIMPORT_SOURCE_O,
+    resourceEdit:   HCI.VMIMPORT_SOURCE_O,
+    location:       {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_O }
+    }
+  });
+  virtualType({ // needed to avoid 404 on refresh when combined with registerAddonSideNav()
+    name:       HCI.VMIMPORT_SOURCE_O,
+    labelKey:   'harvester.addons.vmImport.labels.vmimportSourceOpenStack',
+    group:      'vmimport',
+    namespaced: true,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_O }
+    }
+  });
+
+  // Source: OVA
+  headers(HCI.VMIMPORT_SOURCE_OVA, [
+    STATE,
+    NAME_COL,
+    VM_IMPORT_SOURCE_OVA_URL,
+    VM_IMPORT_SOURCE_OVA_STATUS,
+    AGE
+  ]);
+  configureType(HCI.VMIMPORT_SOURCE_OVA, {
+    resource:       HCI.VMIMPORT_SOURCE_OVA,
+    resourceDetail: HCI.VMIMPORT_SOURCE_OVA,
+    resourceEdit:   HCI.VMIMPORT_SOURCE_OVA,
+    location:       {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_OVA }
+    }
+  });
+  virtualType({ // needed to avoid 404 on refresh when combined with registerAddonSideNav()
+    name:       HCI.VMIMPORT_SOURCE_OVA,
+    labelKey:   'harvester.addons.vmImport.labels.vmimportSourceOVA',
+    group:      'vmimport',
+    namespaced: true,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VMIMPORT_SOURCE_OVA }
+    }
+  });
+
+  // Enable SideNav based on Addon Status
+  registerAddonSideNav(store, PRODUCT_NAME, {
+    addonName:    ADD_ONS.VM_IMPORT_CONTROLLER,
+    resourceType: HCI.ADD_ONS,
+    navGroup:     'vmimport',
+    types:        [
+      HCI.VMIMPORT_SOURCE_V,
+      HCI.VMIMPORT_SOURCE_O,
+      HCI.VMIMPORT_SOURCE_OVA,
+      HCI.VMIMPORT
+    ]
+  });
+  // ===========================================================================
+
   basicType([HCI.VOLUME]);
   configureType(HCI.VOLUME, {
     location: {
@@ -424,6 +574,8 @@ export function init($plugin, store) {
     [
       HCI.CLUSTER_NETWORK,
       HCI.NETWORK_ATTACHMENT,
+      HCI.VPC,
+      NETWORK_POLICY,
       HCI.LB,
       HCI.IP_POOL,
     ],
@@ -454,6 +606,7 @@ export function init($plugin, store) {
       HCI.PCI_DEVICE,
       HCI.SR_IOVGPU_DEVICE,
       HCI.VGPU_DEVICE,
+      HCI.MIG_CONFIGURATION,
       HCI.USB_DEVICE,
       HCI.ADD_ONS,
       HCI.SECRET,
@@ -550,6 +703,36 @@ export function init($plugin, store) {
     exact: false
   });
 
+  configureType(HCI.VPC, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.vpc.label',
+    name:       HCI.VPC,
+    namespaced: true,
+    weight:     187,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VPC }
+    },
+    exact:      false,
+    ifHaveType: HCI.VPC,
+  });
+
+  configureType(NETWORK_POLICY, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.networkPolicy.label',
+    name:       NETWORK_POLICY,
+    namespaced: true,
+    weight:     186,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: NETWORK_POLICY }
+    },
+    exact:      false,
+    ifHaveType: NETWORK_POLICY,
+  });
+
   configureType(HCI.SNAPSHOT, {
     isCreatable: false,
     location:    {
@@ -816,6 +999,26 @@ export function init($plugin, store) {
     ]
   });
 
+  virtualType({
+    labelKey:   'harvester.migconfiguration.label',
+    group:      'advanced',
+    weight:     12,
+    name:       HCI.MIG_CONFIGURATION,
+    namespaced: false,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.MIG_CONFIGURATION }
+    },
+    exact:      false,
+    ifHaveType: HCI.MIG_CONFIGURATION,
+  });
+
+  configureType(HCI.MIG_CONFIGURATION, {
+    isCreatable:                false,
+    hiddenNamespaceGroupButton: true,
+    canYaml:                    false,
+  });
+
   virtualType({
     labelKey:   'harvester.usb.label',
     group:      'advanced',

pkg/harvester/config/harvester-map.js

@@ -1,3 +1,5 @@
+import { HCI } from '../types';
+
 // TODO: delete this not used variable
 export const MemoryUnit = [{
   label: 'Mi',
@@ -37,6 +39,12 @@ export const VOLUME_TYPE = [{
   value: 'cd-rom'
 }];
 
+export const VOLUME_HOTPLUG_ACTION = {
+  INSERT_CDROM_IMAGE: 'INSERT_CDROM_IMAGE',
+  EJECT_CDROM_IMAGE:  'EJECT_CDROM_IMAGE',
+  DETACH_DISK:        'DETACH_DISK'
+};
+
 export const ACCESS_CREDENTIALS = {
   RESET_PWD:  'userPassword',
   INJECT_SSH: 'sshPublicKey'
@@ -70,6 +78,7 @@ export const ADD_ONS = {
   RANCHER_MONITORING:               'rancher-monitoring',
   VM_IMPORT_CONTROLLER:             'vm-import-controller',
   LVM_DRIVER:                       'lvm.driver.harvesterhci.io',
+  KUBEOVN_OPERATOR:                 'kubeovn-operator',
 };
 
 export const CSI_SECRETS = {
@@ -80,3 +89,14 @@ export const CSI_SECRETS = {
   CSI_NODE_STAGE_SECRET_NAME:        'csi.storage.k8s.io/node-stage-secret-name',
   CSI_NODE_STAGE_SECRET_NAMESPACE:   'csi.storage.k8s.io/node-stage-secret-namespace',
 };
+
+// Some harvester CRD type is not equal to model file name, define the mapping here
+export const HARVESTER_CRD_MAP = {
+  node:                                     HCI.HOST,
+  configmap:                                HCI.CLOUD_TEMPLATE,
+  persistentvolumeclaim:                    HCI.VOLUME,
+  'snapshot.storage.k8s.io.volumesnapshot': HCI.SNAPSHOT,
+  // specific groupable table detail page
+  'network.harvesterhci.io.vlanconfig':     HCI.CLUSTER_NETWORK,
+  'kubeovn.io.subnet':                      HCI.VPC
+};

pkg/harvester/config/labels-annotations.js

@@ -28,6 +28,7 @@ export const HCI = {
   NODE_ROLE_CONTROL_PLANE:          'node-role.kubernetes.io/control-plane',
   NODE_ROLE_ETCD:                   'node-role.harvesterhci.io/witness',
   PROMOTE_STATUS:                   'harvesterhci.io/promote-status',
+  CLONE_BACKEND_STORAGE_STATUS:     'harvesterhci.io/clone-backend-storage-status',
   MIGRATION_STATE:                  'harvesterhci.io/migrationState',
   VOLUME_CLAIM_TEMPLATE:            'harvesterhci.io/volumeClaimTemplates',
   IMAGE_NAME:                       'harvesterhci.io/image-name',
@@ -50,6 +51,7 @@ export const HCI = {
   STORAGE_CLASS:                    'harvesterhci.io/storageClassName',
   STORAGE_NETWORK:                  'storage-network.settings.harvesterhci.io',
   ADDON_EXPERIMENTAL:               'addon.harvesterhci.io/experimental',
+  ADDON_DISPLAYNAME:                'addon.harvesterhci.io/displayName',
   VOLUME_ERROR:                     'longhorn.io/volume-scheduling-error',
   VOLUME_FOR_VM:                    'harvesterhci.io/volumeForVirtualMachine',
   KVM_AMD_CPU:                      'cpu-feature.node.kubevirt.io/svm',
@@ -69,5 +71,13 @@ export const HCI = {
   DISABLE_LONGHORN_V2_ENGINE:       'node.longhorn.io/disable-v2-data-engine',
   K8S_ARCH:                         'kubernetes.io/arch',
   IMAGE_DISPLAY_NAME:               'harvesterhci.io/imageDisplayName',
-  CUSTOM_IP:                        'harvesterhci.io/custom-ip'
+  CUSTOM_IP:                        'harvesterhci.io/custom-ip',
+  IMPORTED_IMAGE:                   'migration.harvesterhci.io/imported',
+  VM_CPU_MEMORY_HOTPLUG:            'harvesterhci.io/enableCPUAndMemoryHotplug',
+  FILESYSTEM_OVERHEAD:              'cdi.harvesterhci.io/filesystemOverhead',
+  CLONE_STRATEGY:                   'cdi.harvesterhci.io/storageProfileCloneStrategy',
+  VOLUME_MODE_ACCESS_MODES:         'cdi.harvesterhci.io/storageProfileVolumeModeAccessModes',
+  VOLUME_SNAPSHOT_CLASS:            'cdi.harvesterhci.io/storageProfileVolumeSnapshotClass',
+  MAC_ADDRESS:                      'harvesterhci.io/mac-address',
+  NODE_UPGRADE_PAUSE_MAP:           'harvesterhci.io/node-upgrade-pause-map',
 };

pkg/harvester/config/query-params.js

@@ -1 +1,2 @@
 export const CLUSTER_NETWORK = 'clusterNetwork';
+export const VPC = 'vpc';

pkg/harvester/config/settings.ts

@@ -4,7 +4,6 @@ export const HCI_SETTING = {
   LOG_LEVEL:                              'log-level',
   SERVER_VERSION:                         'server-version',
   UI_INDEX:                               'ui-index',
-  UI_PLUGIN_INDEX:                        'ui-plugin-index',
   UPGRADE_CHECKER_ENABLED:                'upgrade-checker-enabled',
   UPGRADE_CHECKER_URL:                    'upgrade-checker-url',
   VLAN:                                   'vlan',
@@ -17,9 +16,11 @@ export const HCI_SETTING = {
   DEFAULT_STORAGE_CLASS:                  'default-storage-class',
   SUPPORT_BUNDLE_TIMEOUT:                 'support-bundle-timeout',
   SUPPORT_BUNDLE_EXPIRATION:              'support-bundle-expiration',
+  SUPPORT_BUNDLE_FILE_NAME:               'support-bundle-file-name',
   SUPPORT_BUNDLE_IMAGE:                   'support-bundle-image',
   SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT: 'support-bundle-node-collection-timeout',
   STORAGE_NETWORK:                        'storage-network',
+  RWX_NETWORK:                            'rwx-network',
   VM_FORCE_RESET_POLICY:                  'vm-force-reset-policy',
   SSL_CERTIFICATES:                       'ssl-certificates',
   SSL_PARAMETERS:                         'ssl-parameters',
@@ -28,12 +29,19 @@ export const HCI_SETTING = {
   RELEASE_DOWNLOAD_URL:                   'release-download-url',
   CCM_CSI_VERSION:                        'harvester-csi-ccm-versions',
   CSI_DRIVER_CONFIG:                      'csi-driver-config',
+  CSI_ONLINE_EXPAND_VALIDATION:           'csi-online-expand-validation',
   VM_TERMINATION_PERIOD:                  'default-vm-termination-grace-period-seconds',
   NTP_SERVERS:                            'ntp-servers',
   AUTO_ROTATE_RKE2_CERTS:                 'auto-rotate-rke2-certs',
   KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES:   'kubeconfig-default-token-ttl-minutes',
   LONGHORN_V2_DATA_ENGINE_ENABLED:        'longhorn-v2-data-engine-enabled',
   ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO: 'additional-guest-memory-overhead-ratio',
+  UPGRADE_CONFIG:                         'upgrade-config',
+  VM_MIGRATION_NETWORK:                   'vm-migration-network',
+  RANCHER_CLUSTER:                        'rancher-cluster',
+  MAX_HOTPLUG_RATIO:                      'max-hotplug-ratio',
+  KUBEVIRT_MIGRATION:                     'kubevirt-migration',
+  INSTANCE_MANAGER_RESOURCES:             'instance-manager-resources'
 };
 
 export const HCI_ALLOWED_SETTINGS = {
@@ -52,22 +60,31 @@ export const HCI_ALLOWED_SETTINGS = {
     from:        'import',
     featureFlag: 'autoRotateRke2CertsSetting'
   },
-  [HCI_SETTING.CSI_DRIVER_CONFIG]:       { kind: 'json', from: 'import' },
+  [HCI_SETTING.CSI_DRIVER_CONFIG]:            { kind: 'json', from: 'import' },
-  [HCI_SETTING.SERVER_VERSION]:          { readOnly: true },
+  [HCI_SETTING.CSI_ONLINE_EXPAND_VALIDATION]: {
-  [HCI_SETTING.UPGRADE_CHECKER_ENABLED]: { kind: 'boolean' },
+    kind: 'json', from: 'import', featureFlag: 'csiOnlineExpandValidation'
-  [HCI_SETTING.UPGRADE_CHECKER_URL]:     { kind: 'url' },
+  },
-  [HCI_SETTING.HTTP_PROXY]:              { kind: 'json', from: 'import' },
+  [HCI_SETTING.SERVER_VERSION]:               { readOnly: true },
-  [HCI_SETTING.ADDITIONAL_CA]:           {
+  [HCI_SETTING.UPGRADE_CHECKER_ENABLED]:      { kind: 'boolean' },
+  [HCI_SETTING.UPGRADE_CHECKER_URL]:          { kind: 'url' },
+  [HCI_SETTING.HTTP_PROXY]:                   { kind: 'json', from: 'import' },
+  [HCI_SETTING.ADDITIONAL_CA]:                {
     kind: 'multiline', canReset: true, from: 'import'
   },
   [HCI_SETTING.OVERCOMMIT_CONFIG]:                      { kind: 'json', from: 'import' },
   [HCI_SETTING.SUPPORT_BUNDLE_TIMEOUT]:                 { kind: 'number' },
   [HCI_SETTING.SUPPORT_BUNDLE_EXPIRATION]:              { kind: 'number' },
+  [HCI_SETTING.SUPPORT_BUNDLE_FILE_NAME]:               {
+    kind: 'string', canReset: true, featureFlag: 'supportBundleFileNameSetting'
+  },
   [HCI_SETTING.SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT]: { kind: 'number', featureFlag: 'supportBundleNodeCollectionTimeoutSetting' },
   [HCI_SETTING.SUPPORT_BUNDLE_IMAGE]:                   { kind: 'json', from: 'import' },
   [HCI_SETTING.STORAGE_NETWORK]:                        {
     kind: 'custom', from: 'import', canReset: true
   },
+  [HCI_SETTING.RWX_NETWORK]:                            {
+    kind: 'custom', from: 'import', canReset: true, featureFlag: 'rwxNetworkSetting'
+  },
   [HCI_SETTING.VM_FORCE_RESET_POLICY]:                  { kind: 'json', from: 'import' },
   [HCI_SETTING.SSL_CERTIFICATES]:                       { kind: 'json', from: 'import' },
   [HCI_SETTING.SSL_PARAMETERS]:                         {
@@ -76,7 +93,6 @@ export const HCI_ALLOWED_SETTINGS = {
   [HCI_SETTING.SUPPORT_BUNDLE_NAMESPACES]: { from: 'import', canReset: true },
   [HCI_SETTING.AUTO_DISK_PROVISION_PATHS]: { canReset: true },
   [HCI_SETTING.RELEASE_DOWNLOAD_URL]:      { kind: 'url' },
-  [HCI_SETTING.UI_PLUGIN_INDEX]:           { kind: 'url' },
   [HCI_SETTING.CONTAINERD_REGISTRY]:       {
     kind: 'json', from: 'import', canReset: true
   },
@@ -96,11 +112,31 @@ export const HCI_ALLOWED_SETTINGS = {
     featureFlag:  'longhornV2LVMSupport'
   },
   [HCI_SETTING.ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO]: { kind: 'string', from: 'import' },
+  [HCI_SETTING.UPGRADE_CONFIG]:                         {
+    kind:         'json',
+    from:         'import',
+    featureFlag: 'upgradeConfigSetting',
+    docPath:      'UPGRADE_CONFIG_URL'
+  },
+  [HCI_SETTING.RANCHER_CLUSTER]:                        {
+    kind: 'custom', from: 'import', canReset: true, featureFlag: 'rancherClusterSetting'
+  },
+  [HCI_SETTING.MAX_HOTPLUG_RATIO]:    { kind: 'number', featureFlag: 'cpuMemoryHotplug' },
+  [HCI_SETTING.VM_MIGRATION_NETWORK]:  {
+    kind: 'json', from: 'import', canReset: true, featureFlag: 'vmNetworkMigration',
+  },
+  [HCI_SETTING.KUBEVIRT_MIGRATION]: {
+    kind: 'json', from: 'import', canReset: true, featureFlag: 'kubevirtMigration',
+  },
+  [HCI_SETTING.INSTANCE_MANAGER_RESOURCES]: {
+    kind: 'json', from: 'import', featureFlag: 'instanceManagerResourcesSetting'
+  }
 };
 
 export const HCI_SINGLE_CLUSTER_ALLOWED_SETTING = {
   [HCI_SETTING.CLUSTER_REGISTRATION_URL]: {
-    kind:     'url',
+    kind:     'custom',
+    from:     'import',
     canReset: true,
   },
   [HCI_SETTING.UI_PL]: {

pkg/harvester/config/table-headers.js

@@ -104,3 +104,129 @@ export const HARVESTER_DESCRIPTION = {
   ...DESCRIPTION,
   width: 150,
 };
+
+// The CIDR_BLOCK column in VPC list page
+export const CIDR_BLOCK = {
+  name:     'cidrBlock',
+  labelKey: 'harvester.subnet.cidrBlock.label',
+  sort:     'cidrBlock',
+  value:    'spec.cidrBlock',
+  align:    'left',
+};
+
+// The Protocol column in VPC list page
+export const PROTOCOL = {
+  name:     'protocol',
+  labelKey: 'harvester.subnet.protocol.label',
+  sort:     'protocol',
+  value:    'spec.protocol',
+  align:    'left',
+};
+
+// The Provider column in VPC list page
+export const PROVIDER = {
+  name:     'provider',
+  labelKey: 'harvester.subnet.provider.label',
+  sort:     'provider',
+  value:    'spec.provider',
+  align:    'left',
+};
+
+// Source VM column in migration.harvesterhci.io.virtualmachineimport list page
+export const VM_IMPORT_SOURCE_VM = {
+  name:     'sourceVm',
+  labelKey: 'harvester.tableHeaders.vmImportSourceVm',
+  value:    'spec.virtualMachineName',
+  sort:     'spec.virtualMachineName',
+  align:    'left',
+};
+
+// Source Cluster column in migration.harvesterhci.io.virtualmachineimport list page
+export const VM_IMPORT_SOURCE_CLUSTER = {
+  name:     'sourceCluster',
+  labelKey: 'harvester.tableHeaders.vmImportSourceCluster',
+  value:    'spec.sourceCluster.name',
+  sort:     'spec.sourceCluster.name',
+  align:    'left',
+};
+
+// Import Status column in migration.harvesterhci.io.virtualmachineimport list page
+export const VM_IMPORT_STATUS = {
+  name:     'importStatus',
+  labelKey: 'harvester.tableHeaders.vmImportStatus',
+  value:    'status.importStatus',
+  sort:     'status.importStatus',
+  align:    'left',
+};
+
+// Datacenter column in migration.harvesterhci.io.vmwaresource list page
+export const VM_IMPORT_SOURCE_V_DC = {
+  name:     'datacenter',
+  labelKey: 'harvester.tableHeaders.vmImportSourceVDatacenter',
+  value:    'spec.dc',
+  sort:     'spec.dc',
+  align:    'left',
+};
+
+// Endpoint column in migration.harvesterhci.io.vmwaresource list page
+export const VM_IMPORT_SOURCE_V_ENDPOINT = {
+  name:     'endpoint',
+  labelKey: 'harvester.tableHeaders.vmImportSourceVEndpoint',
+  value:    'spec.endpoint',
+  sort:     'spec.endpoint',
+  align:    'left',
+};
+
+// Cluster Status column in migration.harvesterhci.io.vmwaresource list page
+export const VM_IMPORT_SOURCE_V_STATUS = {
+  name:     'clusterStatus',
+  labelKey: 'harvester.tableHeaders.vmImportSourceVClusterStatus',
+  value:    'status.status',
+  sort:     'status.status',
+  align:    'left',
+};
+
+// Region column in migration.harvesterhci.io.openstacksource list page
+export const VM_IMPORT_SOURCE_O_REGION = {
+  name:     'region',
+  labelKey: 'harvester.tableHeaders.vmImportSourceORegion',
+  value:    'spec.region',
+  sort:     'spec.region',
+  align:    'left',
+};
+
+// Endpoint column in migration.harvesterhci.io.openstacksource list page
+export const VM_IMPORT_SOURCE_O_ENDPOINT = {
+  name:     'endpoint',
+  labelKey: 'harvester.tableHeaders.vmImportSourceOEndpoint',
+  value:    'spec.endpoint',
+  sort:     'spec.endpoint',
+  align:    'left',
+};
+
+// Cluster Status column in migration.harvesterhci.io.openstacksource list page
+export const VM_IMPORT_SOURCE_O_STATUS = {
+  name:     'clusterStatus',
+  labelKey: 'harvester.tableHeaders.vmImportSourceOClusterStatus',
+  value:    'status.status',
+  sort:     'status.status',
+  align:    'left',
+};
+
+// URL column in migration.harvesterhci.io.ovasource list page
+export const VM_IMPORT_SOURCE_OVA_URL = {
+  name:     'url',
+  labelKey: 'harvester.tableHeaders.vmImportSourceOVAUrl',
+  value:    'spec.url',
+  sort:     'spec.url',
+  align:    'left',
+};
+
+// Status column in migration.harvesterhci.io.ovasource list page
+export const VM_IMPORT_SOURCE_OVA_STATUS = {
+  name:     'status',
+  labelKey: 'harvester.tableHeaders.vmImportSourceOVAStatus',
+  value:    'status.status',
+  sort:     'status.status',
+  align:    'left',
+};

pkg/harvester/config/types.js

@@ -4,11 +4,40 @@ export const BACKUP_TYPE = {
 };
 
 export const NETWORK_TYPE = {
-  L2VLAN:   'L2VlanNetwork',
+  L2VLAN:       'L2VlanNetwork',
-  UNTAGGED: 'UntaggedNetwork'
+  UNTAGGED:     'UntaggedNetwork',
+  OVERLAY:      'OverlayNetwork',
+  L2TRUNK_VLAN: 'L2VlanTrunkNetwork',
 };
 
 export const VOLUME_MODE = {
   BLOCK:       'Block',
   FILE_SYSTEM: 'Filesystem'
 };
+
+export const NETWORK_PROTOCOL = {
+  IPv4: 'IPv4',
+  IPv6: 'IPv6',
+};
+
+export const INTERNAL_STORAGE_CLASS = {
+  VMSTATE_PERSISTENCE: 'vmstate-persistence',
+  LONGHORN_STATIC:     'longhorn-static',
+};
+
+export const L2VLAN_MODE = {
+  ACCESS: 'access',
+  TRUNK:  'trunk',
+};
+
+export const VMIMPORT_SOURCE_PROVIDER = {
+  VMWARE:    'vmware',
+  OPENSTACK: 'openstack',
+  OVA:       'ova',
+};
+
+export const VMIMPORT_SOURCE_KINDS = {
+  VMWARE:    'VmwareSource',
+  OPENSTACK: 'OpenstackSource',
+  OVA:       'OvaSource',
+};

pkg/harvester/detail/devices.harvesterhci.io.migconfiguration.vue

@@ -0,0 +1,124 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
+
+export default {
+
+  components: {
+    ResourceTabs,
+    Tab,
+    SortableTable,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  computed: {
+    headers() {
+      return [
+        {
+          name:        'profileName',
+          labelKey:    'harvester.migconfiguration.tableHeaders.profileName',
+          value:       'name',
+          width:       75,
+          sort:        'name',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'vGPUID',
+          labelKey:    'harvester.migconfiguration.tableHeaders.vGPUID',
+          value:       'vGPUID',
+          width:       75,
+          sort:        'vGPUID',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'available',
+          labelKey:    'harvester.migconfiguration.tableHeaders.available',
+          value:       'available',
+          width:       75,
+          sort:        'available',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'requested',
+          labelKey:    'harvester.migconfiguration.tableHeaders.requested',
+          value:       'requested',
+          width:       75,
+          sort:        'requested',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'total',
+          labelKey:    'harvester.migconfiguration.tableHeaders.total',
+          value:       'total',
+          width:       75,
+          sort:        'total',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+      ];
+    },
+
+    rows() {
+      let out = (this.value?.status?.profileStatus || []).map((profile) => {
+        const {
+          id, name, total, available
+        } = profile;
+
+        return {
+          id,
+          name,
+          total,
+          available,
+          vGPUID: profile.vGPUID?.join(', ') || '',
+        };
+      });
+
+      out = out.map((row) => {
+        const requested = this.value?.spec?.profileSpec.find((p) => p.id === row.id)?.requested || 0;
+
+        return { ...row, requested };
+      });
+
+      return out;
+    },
+  },
+};
+</script>
+
+<template>
+  <ResourceTabs
+    :value="value"
+    :need-events="false"
+    :need-related="false"
+    :mode="mode"
+  >
+    <Tab
+      name="Profile Status"
+      :label="t('harvester.migconfiguration.profileStatus')"
+    >
+      <SortableTable
+        :headers="headers"
+        :rows="rows"
+        key-field="condition"
+        default-sort-by="condition"
+        :table-actions="false"
+        :row-actions="false"
+        :search="false"
+      />
+    </Tab>
+  </ResourceTabs>
+</template>

pkg/harvester/detail/harvesterhci.io.host/HarvesterHugepages.vue

@@ -0,0 +1,119 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+import { HCI } from '../../types';
+import { DOC } from '../../config/doc-links';
+
+export default {
+  name:       'HarvesterHugepages',
+  components: { LabelValue },
+
+  props: {
+    node: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    docsTransparentHugepagesLink() {
+      return DOC.TRANSPARENT_HUGEPAGES;
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.HUGEPAGES });
+
+    this.hugepages = hash.find((node) => {
+      return node.id === this.node.id;
+    }) || {};
+  },
+
+  data() {
+    return { hugepages: {} };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <template v-if="hugepages.status">
+      <h2>{{ t('harvester.host.hugepages.meminfo') }}</h2>
+
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.anon')"
+            :value="hugepages.status.meminfo.anonHugePages"
+          />
+        </div>
+        <div class="col span-6">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.size')"
+            :value="hugepages.status.meminfo.hugepageSize"
+          />
+        </div>
+      </div>
+
+      <div class="row mb-20">
+        <div class="col span-3">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.total')"
+            :value="hugepages.status.meminfo.hugePagesTotal"
+          />
+        </div>
+        <div class="col span-3">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.free')"
+            :value="hugepages.status.meminfo.hugePagesFree"
+          />
+        </div>
+        <div class="col span-3">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.rsvd')"
+            :value="hugepages.status.meminfo.hugePagesRsvd"
+          />
+        </div>
+        <div class="col span-3">
+          <LabelValue
+            :name="t('harvester.host.hugepages.status.surp')"
+            :value="hugepages.status.meminfo.hugePagesSurp"
+          />
+        </div>
+      </div>
+
+      <div>
+        <hr class="divider" />
+        <h3>
+          <t
+            k="harvester.host.hugepages.transparent.title"
+            :raw="true"
+            :url="docsTransparentHugepagesLink"
+          />
+        </h3>
+
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabelValue
+              :name="t('harvester.host.hugepages.transparent.enabled')"
+              :value="hugepages.spec.transparent.enabled"
+            />
+          </div>
+          <div class="col span-4">
+            <LabelValue
+              :name="t('harvester.host.hugepages.transparent.shmemEnabled')"
+              :value="hugepages.spec.transparent.shmemEnabled"
+            />
+          </div>
+          <div class="col span-4">
+            <LabelValue
+              :name="t('harvester.host.hugepages.transparent.defrag')"
+              :value="hugepages.spec.transparent.defrag"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

pkg/harvester/detail/harvesterhci.io.host/VirtualMachineInstance.vue

@@ -47,20 +47,26 @@ export default {
         STATE,
         NAME,
         {
-          name:     'vmCPU',
+          name:        'CPU',
-          labelKey: 'tableHeaders.cpu',
+          label:       'CPU',
-          search:   false,
+          sort:        ['displayCPU'],
-          sort:     ['spec.template.spec.domain.cpu.cores'],
+          value:       'displayCPU',
-          value:    'spec.template.spec.domain.cpu.cores',
+          align:       'center',
-          width:    120
+          dashIfEmpty: true,
         },
         {
-          name:     'vmRAM',
+          name:          'Memory',
-          labelKey: 'glance.memory',
+          value:         'displayMemory',
-          search:   false,
+          sort:          ['memorySort'],
-          sort:     ['memorySort'],
+          align:         'center',
-          value:    'spec.template.spec.domain.resources.limits.memory',
+          labelKey:      'tableHeaders.memory',
-          width:    120
+          formatter:     'Si',
+          formatterOpts: {
+            opts: {
+              increment: 1024, addSuffix: true, maxExponent: 3, minExponent: 3, suffix: 'i',
+            },
+            needParseSi: true
+          },
         },
         {
           name:      'ip',

pkg/harvester/detail/harvesterhci.io.host/index.vue

@@ -27,6 +27,7 @@ import Instance from './VirtualMachineInstance';
 import Disk from './HarvesterHostDisk';
 import VlanStatus from './VlanStatus';
 import HarvesterKsmtuned from './HarvesterKsmtuned.vue';
+import HarvesterHugepages from './HarvesterHugepages.vue';
 import HarvesterSeeder from './HarvesterSeeder';
 
 const LONGHORN_SYSTEM = 'longhorn-system';
@@ -46,6 +47,7 @@ export default {
     VlanStatus,
     LabelValue,
     HarvesterKsmtuned,
+    HarvesterHugepages,
     Loading,
     SortableTable,
     HarvesterSeeder,
@@ -209,6 +211,12 @@ export default {
       return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.KSTUNED);
     },
 
+    hasHugepagesSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.HUGEPAGES);
+    },
+
     hasBlockDevicesSchema() {
       return !!this.$store.getters['harvester/schemaFor'](HCI.BLOCK_DEVICE);
     },
@@ -468,6 +476,16 @@ export default {
         />
       </Tab>
 
+      <Tab
+        v-if="hasHugepagesSchema"
+        name="hugepages"
+        :weight="0"
+        :show-header="false"
+        :label="t('harvester.host.tabs.hugepages')"
+      >
+        <HarvesterHugepages :node="value" />
+      </Tab>
+
       <Tab
         v-if="seederEnabled"
         name="seeder"

pkg/harvester/detail/harvesterhci.io.schedulevmbackup/index.vue

@@ -75,7 +75,7 @@ export default {
       <div class="row">
         <div class="col span-6 mb-20">
           <LabelValue
-            :name="t('harvester.schedule.cron')"
+            :name="t('harvester.schedule.cron.label')"
             :value="cronExpression"
           />
         </div>

pkg/harvester/detail/harvesterhci.io.virtualmachinebackup/index.vue

@@ -172,6 +172,9 @@ export default {
             :cpu="cpu"
             :mode="mode"
             :memory="memory"
+            :max-cpu="maxCpu"
+            :max-memory="maxMemory"
+            :enable-hot-plug="cpuMemoryHotplugEnabled"
           />
         </div>
         <div class="row">

pkg/harvester/detail/harvesterhci.io.vmsnapshot/index.vue

@@ -172,6 +172,9 @@ export default {
           :cpu="cpu"
           :mode="mode"
           :memory="memory"
+          :max-cpu="maxCpu"
+          :max-memory="maxMemory"
+          :enable-hot-plug="cpuMemoryHotplugEnabled"
         />
 
         <div class="row mb-10">

pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineBasics.vue

@@ -5,6 +5,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import HarvesterIpAddress from '../../../formatters/HarvesterIpAddress';
 import VMConsoleBar from '../../../components/VMConsoleBar';
 import { HCI } from '../../../types';
+import { getVmCPUMemoryValues } from '../../../utils/cpuMemory';
 
 const UNDEFINED = 'n/a';
 
@@ -91,9 +92,9 @@ export default {
     },
 
     flavor() {
-      const domain = this.value?.spec?.template?.spec?.domain;
+      const { cpu, memory } = getVmCPUMemoryValues(this.value);
 
-      return `${ domain.cpu?.cores } vCPU , ${ domain.resources?.limits?.memory } ${ this.t('harvester.virtualMachine.input.memory') }`;
+      return `${ cpu } vCPU , ${ memory } ${ this.t('harvester.virtualMachine.input.memory') }`;
     },
 
     kernelRelease() {

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

@@ -139,10 +139,18 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const vmimList = this.$store.getters[`${ inStore }/all`](HCI.VMIM) || [];
 
-      const migrationUid = this.vmi?.status?.migrationState?.migrationUid;
+      const vmiName = this.vmi?.name || '';
-      const vmim = vmimList.find((VMIM) => VMIM?.metadata?.uid === migrationUid);
 
-      return vmim;
+      // filter the corresponding vmims by vmim.spec.vmiName and find the latest one by creationTimestamp
+      const vmim = vmimList.filter((VMIM) => VMIM?.spec?.vmiName === vmiName).sort((a, b) => {
+        if (a?.metadata?.creationTimestamp > b?.metadata?.creationTimestamp) {
+          return -1;
+        }
+
+        return 1;
+      });
+
+      return vmim.length > 0 && vmim[0] ? vmim[0] : null;
     },
 
     migrationEvents() {
@@ -205,6 +213,7 @@ export default {
         const diskRows = this.getDiskRows(neu);
 
         this['diskRows'] = diskRows;
+        this['networkRows'] = this.getNetworkRows(neu, { fromTemplate: false, init: false });
       },
       deep: true
     }
@@ -257,6 +266,7 @@ export default {
         <Network
           v-model:value="networkRows"
           mode="view"
+          :vm="value"
         />
       </Tab>
 

pkg/harvester/dialog/CloneVmDialog.vue

@@ -1,12 +1,13 @@
 <script>
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { mapGetters } from 'vuex';
-
+import { runStrategies as runStrategyOptions } from '../config/harvester-map';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton from '@shell/components/AsyncButton';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
   name: 'CloneVMModal',
@@ -14,7 +15,7 @@ export default {
   emits: ['close'],
 
   components: {
-    AsyncButton, Banner, Checkbox, Card, LabeledInput
+    AsyncButton, Banner, Checkbox, Card, LabeledInput, LabeledSelect
   },
 
   props: {
@@ -26,9 +27,11 @@ export default {
 
   data() {
     return {
-      name:      '',
+      name:        '',
-      cloneData: true,
+      cloneData:   true,
-      errors:    []
+      errors:      [],
+      runStrategy: runStrategyOptions[1],
+      runStrategyOptions
     };
   },
 
@@ -38,6 +41,9 @@ export default {
     actionResource() {
       return this.resources[0];
     },
+    vmCloneRunStrategyEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vmCloneRunStrategy');
+    },
   },
 
   methods: {
@@ -58,7 +64,8 @@ export default {
 
       // deep clone
       try {
-        const res = await this.actionResource.doAction('clone', { targetVm: this.name }, {}, false);
+        const payload = this.vmCloneRunStrategyEnabled ? { targetVm: this.name, runStrategy: this.runStrategy } : { targetVm: this.name };
+        const res = await this.actionResource.doAction('clone', payload, {}, false);
 
         if (res._status === 200 || res._status === 204) {
           this.$store.dispatch('growl/success', {
@@ -106,6 +113,13 @@ export default {
         :label="t('harvester.modal.cloneVM.name')"
         required
       />
+      <LabeledSelect
+        v-if="vmCloneRunStrategyEnabled"
+        v-model:value="runStrategy"
+        label-key="harvester.virtualMachine.runStrategy"
+        :options="runStrategyOptions"
+        :mode="mode"
+      />
       <Banner
         v-for="(err, i) in errors"
         :key="i"

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -32,7 +32,7 @@ export default {
     resources: {
       type:     Array,
       required: true
-    }
+    },
   },
 
   data() {
@@ -43,7 +43,7 @@ export default {
     ...mapState('action-menu', ['modalData']),
 
     title() {
-      return this.modalData.title || 'dialog.promptRemove.title';
+      return this.modalData?.title || 'dialog.promptRemove.title';
     },
 
     formattedType() {
@@ -51,7 +51,7 @@ export default {
     },
 
     warningMessage() {
-      if (this.modalData.warningMessage) return this.modalData.warningMessage;
+      if (this.modalData?.warningMessage) return this.modalData.warningMessage;
 
       const isPlural = this.type.endsWith('s');
       const thisOrThese = isPlural ? 'these' : 'this';
@@ -145,6 +145,7 @@ export default {
       try {
         for (const resource of this.resources) {
           await resource.remove();
+          if (this.modalData?.extraActionAfterRemove) await this.modalData.extraActionAfterRemove();
         }
         buttonDone(true);
         this.close();

pkg/harvester/dialog/DeepCloneVmDialog.vue

@@ -1,149 +0,0 @@
-<script>
-import { exceptionToErrorsArray } from '@shell/utils/error';
-import { mapGetters } from 'vuex';
-
-import { Card } from '@components/Card';
-import { Banner } from '@components/Banner';
-import { Checkbox } from '@components/Form/Checkbox';
-import AsyncButton from '@shell/components/AsyncButton';
-import { LabeledInput } from '@components/Form/LabeledInput';
-
-export default {
-  name: 'CloneVMModal',
-
-  emits: ['close'],
-
-  components: {
-    AsyncButton, Banner, Checkbox, Card, LabeledInput
-  },
-
-  props: {
-    resources: {
-      type:     Array,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      name:      '',
-      cloneData: true,
-      errors:    []
-    };
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-
-    actionResource() {
-      return this.resources[0];
-    },
-  },
-
-  methods: {
-    close() {
-      this.name = '';
-      this.$emit('close');
-    },
-
-    async create(buttonCb) {
-      // shadow clone
-      if (!this.cloneData) {
-        this.resources[0].goToClone();
-        buttonCb(false);
-        this.close();
-
-        return;
-      }
-
-      // deep clone
-      try {
-        const res = await this.actionResource.doAction('clone', { targetVm: this.name }, {}, false);
-
-        if (res._status === 200 || res._status === 204) {
-          this.$store.dispatch('growl/success', {
-            title:   this.t('harvester.notification.title.succeed'),
-            message: this.t('harvester.modal.cloneVM.message.success', { name: this.name })
-          }, { root: true });
-
-          this.close();
-          buttonCb(true);
-        } else {
-          const error = [res?.data] || exceptionToErrorsArray(res);
-
-          this['errors'] = error;
-          buttonCb(false);
-        }
-      } catch (err) {
-        const error = err?.data || err;
-        const message = exceptionToErrorsArray(error);
-
-        this['errors'] = message;
-        buttonCb(false);
-      }
-    }
-  },
-};
-</script>
-
-<template>
-  <Card :show-highlight-border="false">
-    <template #title>
-      {{ t('harvester.modal.cloneVM.title') }}
-    </template>
-
-    <template #body>
-      <Checkbox
-        v-model:value="cloneData"
-        class="mb-10"
-        label-key="harvester.modal.cloneVM.type"
-      />
-
-      <LabeledInput
-        v-show="cloneData"
-        v-model:value="name"
-        class="mb-20"
-        :label="t('harvester.modal.cloneVM.name')"
-        required
-      />
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        :label="err"
-        color="error"
-      />
-    </template>
-
-    <template #actions>
-      <div class="actions">
-        <div class="buttons">
-          <button
-            class="btn role-secondary mr-10"
-            @click="close"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-
-          <AsyncButton
-            mode="create"
-            :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
-            :disabled="cloneData && !name"
-            @click="create"
-          />
-        </div>
-      </div>
-    </template>
-  </Card>
-</template>
-
-<style lang="scss" scoped>
-.actions {
-  width: 100%;
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-</style>

pkg/harvester/dialog/HarvesterAddHotplugNic.vue

@@ -0,0 +1,212 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+import { NETWORK_ATTACHMENT } from '@shell/config/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 { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { NETWORK_TYPE } from '../config/types';
+
+export default {
+  name: 'AddHotplugNic',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledInput,
+    LabeledSelect,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    try {
+      this.allVMNetworks = await this.$store.dispatch('harvester/findAll', { type: NETWORK_ATTACHMENT });
+    } catch (err) {
+      this.errors = exceptionToErrorsArray(err);
+      this.allVMNetworks = [];
+    }
+  },
+
+  data() {
+    return {
+      interfaceName: '',
+      networkName:   '',
+      macAddress:    '',
+      allVMNetworks: [],
+      errors:        [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources?.[0];
+    },
+
+    isFormValid() {
+      return this.interfaceName !== '' && this.networkName !== '';
+    },
+
+    vmNetworksOption() {
+      return this.allVMNetworks
+        .filter((network) => {
+          const labels = network.metadata?.labels || {};
+          const type = labels[HCI_ANNOTATIONS.NETWORK_TYPE];
+
+          const isValidType = [
+            NETWORK_TYPE.L2VLAN,
+            NETWORK_TYPE.UNTAGGED,
+            NETWORK_TYPE.L2TRUNK_VLAN,
+          ].includes(type);
+
+          return isValidType && !network.isSystem;
+        })
+        .map((network) => {
+          const label = network.isNotReady ? `${ network.id } (${ this.t('generic.notReady') })` : network.id;
+
+          return ({
+            label,
+            value:    network.id || '',
+            disabled: network.isNotReady,
+          });
+        });
+    }
+  },
+
+  methods: {
+    close() {
+      this.interfaceName = '';
+      this.networkName = '';
+      this.macAddress = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async save(buttonCb) {
+      if (!this.actionResource) {
+        buttonCb(false);
+
+        return;
+      }
+
+      const payload = {
+        interfaceName: this.interfaceName,
+        networkName:   this.networkName
+      };
+
+      if (this.macAddress) {
+        payload.macAddress = this.macAddress;
+      }
+
+      try {
+        const res = await this.actionResource.doAction('addNic', payload);
+
+        if ([200, 204].includes(res?._status)) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('generic.notification.title.succeed'),
+            message: this.t('harvester.modal.hotplugNic.success', {
+              interfaceName: this.interfaceName,
+              vm:            this.actionResource.nameDisplay
+            })
+          }, { root: true });
+
+          this.close();
+          buttonCb(true);
+        } else {
+          this.errors = exceptionToErrorsArray(res);
+          buttonCb(false);
+        }
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.hotplugNic.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <LabeledInput
+        v-model:value="interfaceName"
+        :label="t('generic.name')"
+        required
+      />
+      <LabeledSelect
+        v-model:value="networkName"
+        class="mt-20"
+        :label="t('harvester.modal.hotplugNic.vmNetwork')"
+        :options="vmNetworksOption"
+        required
+      />
+      <LabeledInput
+        v-model:value="macAddress"
+        class="mt-20"
+        label-key="harvester.modal.hotplugNic.macAddress"
+        :tooltip="t('harvester.modal.hotplugNic.macAddressTooltip', _, true)"
+      />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
+    </template>
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            mode="apply"
+            :disabled="!isFormValid"
+            @click="save"
+          />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>

pkg/harvester/dialog/HarvesterAddHotplugVolumeModal.vue

@@ -11,7 +11,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
-  name: 'HotplugModal',
+  name: 'HotplugVolumeModal',
 
   emits: ['close'],
 
@@ -62,7 +62,7 @@ export default {
               return false;
             }
 
-            return !pvc.attachVM;
+            return true;
           })
           .map((pvc) => {
             return {
@@ -90,7 +90,7 @@ export default {
           if (res._status === 200 || res._status === 204) {
             this.$store.dispatch('growl/success', {
               title:   this.t('generic.notification.title.succeed'),
-              message: this.t('harvester.modal.hotplug.success', { diskName: this.diskName, vm: this.actionResource.nameDisplay })
+              message: this.t('harvester.modal.hotplugVolume.success', { diskName: this.diskName, vm: this.actionResource.nameDisplay })
             }, { root: true });
 
             this.close();
@@ -122,7 +122,7 @@ export default {
   >
     <template #title>
       <h4
-        v-clean-html="t('harvester.modal.hotplug.title')"
+        v-clean-html="t('harvester.modal.hotplugVolume.title')"
         class="text-default-text"
       />
     </template>

pkg/harvester/dialog/HarvesterCPUMemoryHotPlugDialog.vue

@@ -0,0 +1,185 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapGetters } from 'vuex';
+import { getVmCPUMemoryValues } from '../utils/cpuMemory';
+import UnitInput from '@shell/components/form/UnitInput';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import { GIBIBYTE } from '../utils/unit';
+
+export default {
+  name: 'CPUMemoryHotplugModal',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton, Card, Banner, UnitInput
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    const { cpu, memory } = getVmCPUMemoryValues(this.resources[0] || {});
+
+    return {
+      cpu,
+      memory,
+      errors: [],
+      GIBIBYTE
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0] || {};
+    },
+    maxResourcesMessage() {
+      const { maxCpu, maxMemory } = getVmCPUMemoryValues(this.actionResource);
+
+      if (maxCpu && maxMemory) {
+        return this.t('harvester.modal.cpuMemoryHotplug.maxResourcesMessage', { maxCpu, maxMemory });
+      }
+
+      return '';
+    }
+  },
+
+  methods: {
+    close() {
+      this.cpu = '';
+      this.memory = '';
+      this.$emit('close');
+    },
+
+    change() {
+      if (parseInt(this.memory, 10) < 1 ) {
+        this.memory = '1Gi';
+      }
+      if (this.cpu < 1) {
+        this.cpu = 1;
+      }
+    },
+
+    async save(buttonCb) {
+      if (this.actionResource) {
+        try {
+          const res = await this.actionResource.doAction('cpuAndMemoryHotplug', { sockets: this.cpu, memory: this.memory });
+
+          if (res._status === 200 || res._status === 204) {
+            this.$store.dispatch('growl/success', {
+              title:   this.t('generic.notification.title.succeed'),
+              message: this.t('harvester.modal.cpuMemoryHotplug.success', { vm: this.actionResource.nameDisplay })
+            }, { root: true });
+
+            this.close();
+            buttonCb(true);
+          } else {
+            const error = [res?.data] || exceptionToErrorsArray(res);
+
+            this['errors'] = error;
+            buttonCb(false);
+          }
+        } catch (err) {
+          const error = err?.data || err;
+          const message = exceptionToErrorsArray(error);
+
+          this['errors'] = message;
+          buttonCb(false);
+        }
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.cpuMemoryHotplug.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <Banner
+        v-if="maxResourcesMessage"
+        :label="maxResourcesMessage"
+        color="info"
+      />
+      <UnitInput
+        v-model:value="cpu"
+        :label="t('harvester.virtualMachine.input.cpu')"
+        :delay="0"
+        required
+        suffix="C"
+        class="mb-20"
+        :mode="mode"
+        :min="1"
+        @update:value="change"
+      />
+      <UnitInput
+        v-model:value="memory"
+        :label="t('harvester.virtualMachine.input.memory')"
+        :mode="mode"
+        :input-exponent="3"
+        :delay="0"
+        :min="1"
+        :increment="1024"
+        :output-modifier="true"
+        :disabled="disabled"
+        :suffix="GIBIBYTE"
+        class="mb-20"
+        @update:value="change"
+      />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
+    </template>
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="apply"
+            @click="save"
+          />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>

pkg/harvester/dialog/HarvesterExportImageDialog.vue

@@ -10,6 +10,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { NAMESPACE, STORAGE_CLASS } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
+import { isInternalStorageClass } from '../utils/storage-class';
 
 export default {
   name: 'HarvesterExportImageDialog',
@@ -105,11 +106,17 @@ export default {
       }
 
       const options = storages.filter((s) => !s.parameters?.backingImage).map((s) => {
-        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        let label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        const isInternal = isInternalStorageClass(s.metadata?.name);
+
+        if (isInternal) {
+          label += ` (${ this.t('harvester.storage.internal.label') })`;
+        }
 
         return {
           label,
-          value: s.name,
+          value:    s.name,
+          disabled: isInternal,
         };
       }) || [];
 

pkg/harvester/dialog/HarvesterHotUnplug.vue

@@ -1,13 +1,16 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 
+const VOLUME = 'volume';
+const NETWORK = 'network';
+const CDROM = 'cdrom';
+
 export default {
-  name: 'HarvesterHotUnplugModal',
+  name: 'HarvesterHotUnplug',
 
   emits: ['close'],
 
@@ -35,8 +38,43 @@ export default {
     actionResource() {
       return this.resources[0];
     },
-    diskName() {
+
-      return this.modalData.diskName;
+    name() {
+      return this.modalData.name;
+    },
+
+    isVolume() {
+      return this.modalData.type === VOLUME;
+    },
+
+    titleKey() {
+      const keys = {
+        [VOLUME]:  'harvester.virtualMachine.hotUnplug.detachVolume.title',
+        [CDROM]:   'harvester.virtualMachine.hotUnplug.ejectCdRomVolume.title',
+        [NETWORK]: 'harvester.virtualMachine.hotUnplug.detachNIC.title',
+      };
+
+      return keys[this.modalData.type];
+    },
+
+    actionLabelKey() {
+      const keys = {
+        [VOLUME]:  'harvester.virtualMachine.hotUnplug.detachVolume.actionLabels',
+        [CDROM]:   'harvester.virtualMachine.hotUnplug.ejectCdRomVolume.actionLabels',
+        [NETWORK]: 'harvester.virtualMachine.hotUnplug.detachNIC.actionLabels',
+      };
+
+      return keys[this.modalData.type];
+    },
+
+    successMessageKey() {
+      const keys = {
+        [VOLUME]:  'harvester.virtualMachine.hotUnplug.detachVolume.success',
+        [CDROM]:   'harvester.virtualMachine.hotUnplug.ejectCdRomVolume.success',
+        [NETWORK]: 'harvester.virtualMachine.hotUnplug.detachNIC.success',
+      };
+
+      return keys[this.modalData.type];
     }
   },
 
@@ -47,14 +85,22 @@ export default {
 
     async save(buttonCb) {
       try {
-        const res = await this.actionResource.doAction('removeVolume', { diskName: this.diskName });
+        let res;
+
+        if (this.modalData.type === VOLUME) {
+          res = await this.actionResource.doAction('removeVolume', { diskName: this.name });
+        } else if (this.modalData.type === NETWORK) {
+          res = await this.actionResource.doAction('removeNic', { interfaceName: this.name });
+        } else {
+          res = await this.actionResource.doAction('ejectCdRomVolume', { deviceName: this.name });
+        }
 
         if (res._status === 200 || res._status === 204) {
           this.$store.dispatch(
             'growl/success',
             {
               title:   this.t('generic.notification.title.succeed'),
-              message: this.t('harvester.modal.hotunplug.success', { name: this.diskName })
+              message: this.t(this.successMessageKey, { name: this.name })
             },
             { root: true }
           );
@@ -64,14 +110,14 @@ export default {
         } else {
           const error = [res?.data] || exceptionToErrorsArray(res);
 
-          this['errors'] = error;
+          this.errors = error;
           buttonCb(false);
         }
       } catch (err) {
         const error = err?.data || err;
         const message = exceptionToErrorsArray(error);
 
-        this['errors'] = message;
+        this.errors = message;
         buttonCb(false);
       }
     }
@@ -87,7 +133,7 @@ export default {
   >
     <template #title>
       <h4
-        v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
+        v-clean-html="t(titleKey, { name })"
         class="text-default-text"
       />
       <Banner
@@ -111,9 +157,9 @@ export default {
 
           <AsyncButton
             mode="apply"
-            :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :action-label="t(actionLabelKey)"
-            :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :waiting-label="t(actionLabelKey)"
-            :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :success-label="t(actionLabelKey)"
             @click="save"
           />
         </div>
@@ -132,4 +178,8 @@ export default {
   justify-content: flex-end;
   width: 100%;
 }
+
+::v-deep(.card-title) {
+  display: block;
+}
 </style>

pkg/harvester/dialog/HarvesterInsertCdRomVolume.vue

@@ -0,0 +1,198 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { mapState, mapGetters } from 'vuex';
+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 { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import { HCI } from '../types';
+
+export default {
+  name: 'HarvesterInsertCdRomVolume',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledInput,
+    LabeledSelect,
+    Banner
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    try {
+      this.images = await this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE });
+    } catch (err) {
+      this.errors = exceptionToErrorsArray(err);
+      this.images = [];
+    }
+  },
+
+  data() {
+    return {
+      imageName: '',
+      images:    [],
+      errors:    [],
+    };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources?.[0];
+    },
+
+    isFormValid() {
+      return this.imageName !== '';
+    },
+
+    deviceName() {
+      return this.modalData.name;
+    },
+
+    imagesOption() {
+      return this.images
+        .filter((image) => {
+          const labels = image.metadata?.labels || {};
+          const type = labels[HCI_ANNOTATIONS.IMAGE_SUFFIX];
+
+          return type === 'iso';
+        })
+        .map((image) => {
+          return ({
+            label:    this.imageOptionLabel(image),
+            value:    image.id,
+            disabled: image.isImportedImage
+          });
+        });
+    }
+  },
+
+  methods: {
+    close() {
+      this.imageName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    imageOptionLabel(image) {
+      return `${ image.metadata.namespace }/${ image.spec.displayName }`;
+    },
+
+    async save(buttonCb) {
+      if (!this.actionResource) {
+        buttonCb(false);
+
+        return;
+      }
+
+      const payload = {
+        deviceName: this.deviceName,
+        imageName:  this.imageName
+      };
+
+      try {
+        const res = await this.actionResource.doAction('insertCdRomVolume', payload);
+
+        if ([200, 204].includes(res?._status)) {
+          this.$store.dispatch('growl/success', {
+            title:   this.t('generic.notification.title.succeed'),
+            message: this.t('harvester.modal.insertCdRomVolume.success', {
+              deviceName: this.deviceName,
+              imageName:  this.imageName,
+            })
+          }, { root: true });
+
+          this.close();
+          buttonCb(true);
+        } else {
+          this.errors = exceptionToErrorsArray(res);
+          buttonCb(false);
+        }
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.insertCdRomVolume.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <LabeledInput
+        v-model:value="deviceName"
+        :label="t('generic.name')"
+        disabled
+      />
+      <LabeledSelect
+        v-model:value="imageName"
+        class="mt-20"
+        :label="t('harvester.modal.insertCdRomVolume.image')"
+        :options="imagesOption"
+        required
+      />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
+    </template>
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            mode="apply"
+            :disabled="!isFormValid"
+            @click="save"
+          />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>

pkg/harvester/dialog/HarvesterStorageMigrationDialog.vue

@@ -0,0 +1,239 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import { PVC } from '@shell/config/types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { sortBy } from '@shell/utils/sort';
+import { HCI } from '../types';
+import { parseVolumeClaimTemplates } from '@pkg/harvester/utils/vm';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'HarvesterStorageMigrationDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton, Banner, Card, LabeledSelect
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  async fetch() {
+    this.allPVCs = await this.$store.dispatch('harvester/findAll', { type: PVC });
+  },
+
+  data() {
+    return {
+      sourceVolume: '',
+      targetVolume: '',
+      errors:       [],
+      allPVCs:      [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    actionResource() {
+      return this.resources[0];
+    },
+
+    sourceVolumeOptions() {
+      const volumes = this.actionResource.spec?.template?.spec?.volumes || [];
+
+      return sortBy(
+        volumes
+          .map((v) => v.persistentVolumeClaim?.claimName)
+          .filter((name) => !!name)
+          .map((name) => ({
+            label: name,
+            value: name
+          })),
+        'label'
+      );
+    },
+
+    namespacePVCs() {
+      return this.allPVCs.filter((pvc) => pvc.metadata.namespace === this.actionResource.metadata.namespace);
+    },
+
+    vmUsedVolumeNames() {
+      const allVMs = this.$store.getters['harvester/all'](HCI.VM) || [];
+      const names = new Set();
+
+      allVMs.forEach((vm) => {
+        // Collect volume names from spec.template.spec.volumes (both PVC and DataVolume references)
+        const volumes = vm.spec?.template?.spec?.volumes || [];
+
+        volumes.forEach((v) => {
+          const name = v.persistentVolumeClaim?.claimName || v.dataVolume?.name;
+
+          if (name) {
+            names.add(`${ vm.metadata.namespace }/${ name }`);
+          }
+        });
+
+        // Collect volume names from volumeClaimTemplates annotation
+        const templates = parseVolumeClaimTemplates(vm);
+
+        templates.forEach((t) => {
+          if (t.metadata?.name) {
+            names.add(`${ vm.metadata.namespace }/${ t.metadata.name }`);
+          }
+        });
+      });
+
+      return names;
+    },
+
+    targetVolumeOptions() {
+      return sortBy(
+        this.namespacePVCs
+          .filter((pvc) => {
+            // Exclude volumes used by any VM (via spec.volumes or volumeClaimTemplates)
+            if (this.vmUsedVolumeNames.has(`${ pvc.metadata.namespace }/${ pvc.metadata.name }`)) {
+              return false;
+            }
+
+            return true;
+          })
+          .map((pvc) => ({
+            label: pvc.metadata.name,
+            value: pvc.metadata.name
+          })),
+        'label'
+      );
+    },
+
+    disableSave() {
+      return !this.sourceVolume || !this.targetVolume;
+    },
+  },
+
+  methods: {
+    close() {
+      this.sourceVolume = '';
+      this.targetVolume = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      if (!this.actionResource) {
+        buttonDone(false);
+
+        return;
+      }
+
+      if (!this.sourceVolume) {
+        const name = this.t('harvester.modal.storageMigration.fields.sourceVolume.label');
+
+        this['errors'] = [this.t('validation.required', { key: name })];
+        buttonDone(false);
+
+        return;
+      }
+
+      if (!this.targetVolume) {
+        const name = this.t('harvester.modal.storageMigration.fields.targetVolume.label');
+
+        this['errors'] = [this.t('validation.required', { key: name })];
+        buttonDone(false);
+
+        return;
+      }
+
+      try {
+        await this.actionResource.doAction('storageMigration', {
+          sourceVolume: this.sourceVolume,
+          targetVolume: this.targetVolume
+        }, {}, false);
+
+        buttonDone(true);
+        this.close();
+      } catch (err) {
+        const error = err?.data || err;
+
+        this['errors'] = exceptionToErrorsArray(error);
+        buttonDone(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      {{ t('harvester.modal.storageMigration.title') }}
+    </template>
+
+    <template #body>
+      <LabeledSelect
+        v-model:value="sourceVolume"
+        :label="t('harvester.modal.storageMigration.fields.sourceVolume.label')"
+        :placeholder="t('harvester.modal.storageMigration.fields.sourceVolume.placeholder')"
+        :options="sourceVolumeOptions"
+        class="mb-20"
+        required
+      />
+
+      <LabeledSelect
+        v-model:value="targetVolume"
+        :label="t('harvester.modal.storageMigration.fields.targetVolume.label')"
+        :placeholder="t('harvester.modal.storageMigration.fields.targetVolume.placeholder')"
+        :options="targetVolumeOptions"
+        required
+      />
+
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
+    </template>
+
+    <template
+      #actions
+      class="actions"
+    >
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          :disabled="disableSave"
+          @click="apply"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>

pkg/harvester/dialog/HarvesterSupportBundle.vue

@@ -1,4 +1,5 @@
 <script>
+import { NAMESPACE } from '@shell/config/types';
 import { randomStr } from '@shell/utils/string';
 import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -6,7 +7,15 @@ import AsyncButton from '@shell/components/AsyncButton';
 import GraphCircle from '@shell/components/graph/Circle';
 import { Banner } from '@components/Banner';
 import AppModal from '@shell/components/AppModal';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import UnitInput from '@shell/components/form/UnitInput';
 import { HCI } from '../types';
+import { HCI_SETTING } from '../config/settings';
+import { DOC } from '../config/doc-links';
+import { docLink } from '../utils/feature-flags';
+
+const SELECT_ALL = 'select_all';
+const UNSELECT_ALL = 'unselect_all';
 
 export default {
   name: 'SupportBundle',
@@ -17,14 +26,36 @@ export default {
     AsyncButton,
     Banner,
     AppModal,
+    LabeledSelect,
+    UnitInput
+  },
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: NAMESPACE });
+
+    try {
+      const url = this.$store.getters['harvester-common/getHarvesterClusterUrl']('v1/harvester/namespaces?link=supportbundle');
+      const response = await this.$store.dispatch('harvester/request', { url });
+
+      this.defaultNamespaces = response.data || [];
+    } catch (error) {
+      this.defaultNamespaces = [];
+    }
   },
 
   data() {
     return {
-      url:         '',
+      isOpen:            false,
-      description: '',
+      errors:            [],
-      errors:      [],
+      version:           '',
-      isOpen:      false,
+      clusterName:       '',
+      url:               '',
+      description:       '',
+      namespaces:        [],
+      defaultNamespaces: [],
+      timeout:           '',
+      expiration:        '',
+      nodeTimeout:       '',
     };
   },
 
@@ -39,23 +70,51 @@ export default {
 
     percentage() {
       return this.$store.getters['harvester-common/getBundlePercentage'];
-    }
+    },
+
+    availableNamespaces() {
+      const allNamespaces = this.$store.getters['harvester/all'](NAMESPACE).map((ns) => ns.id);
+      const defaultNamespacesIds = this.defaultNamespaces.map((ns) => ns.id);
+
+      return allNamespaces.filter((ns) => !defaultNamespacesIds.includes(ns) || this.namespaces.includes(ns));
+    },
+
+    namespaceOptions() {
+      if (this.availableNamespaces.length === 0) return [];
+
+      const allSelected = this.namespaces.length === this.availableNamespaces.length &&
+      this.availableNamespaces.every((ns) => this.namespaces.includes(ns));
+
+      const controlOption = allSelected ? { label: this.t('harvester.modal.bundle.namespaces.unselectAll'), value: UNSELECT_ALL } : { label: this.t('harvester.modal.bundle.namespaces.selectAll'), value: SELECT_ALL };
+
+      return [controlOption, ...this.availableNamespaces];
+    },
+
+    docLink() {
+      const version = this.$store.getters['harvester-common/getServerVersion']();
+
+      return docLink(DOC.SUPPORT_BUNDLE_NAMESPACES, version);
+    },
+
+    customSupportBundleFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('customSupportBundle');
+    },
   },
 
   watch: {
     isShowBundleModal: {
+      immediate: true,
       handler(show) {
-        if (show) {
+        this.isOpen = show;
-          this.$nextTick(() => {
+      }
-            this.isOpen = true;
+    },
-          });
+
-        } else {
+    isOpen(newVal) {
-          this.isOpen = false;
+      if (newVal) {
-          this.url = '';
+        this.loadDefaultSettings();
-          this.description = '';
+      } else {
-        }
+        this.resetForm();
-      },
+      }
-      immediate: true
     },
   },
 
@@ -65,33 +124,93 @@ export default {
     close() {
       this.isOpen = false;
       this.$store.commit('harvester-common/toggleBundleModal', false);
-      this.backUpName = '';
+    },
+
+    loadDefaultSettings() {
+      const cluster = this.$store.getters['currentCluster'];
+      const versionSetting = this.$store.getters['harvester/byId'](HCI.SETTING, HCI_SETTING.SERVER_VERSION);
+      const namespacesSetting = this.$store.getters['harvester/byId'](HCI.SETTING, HCI_SETTING.SUPPORT_BUNDLE_NAMESPACES);
+      const timeoutSetting = this.$store.getters['harvester/byId'](HCI.SETTING, HCI_SETTING.SUPPORT_BUNDLE_TIMEOUT);
+      const expirationSetting = this.$store.getters['harvester/byId'](HCI.SETTING, HCI_SETTING.SUPPORT_BUNDLE_EXPIRATION);
+      const nodeTimeoutSetting = this.$store.getters['harvester/byId'](HCI.SETTING, HCI_SETTING.SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT);
+
+      this.version = versionSetting?.currentVersion || '';
+      this.clusterName = cluster?.id || '';
+      this.namespaces = (namespacesSetting?.value ?? namespacesSetting?.default ?? '').split(',').map((ns) => ns.trim()).filter((ns) => ns);
+      this.timeout = timeoutSetting?.value ?? timeoutSetting?.default ?? '';
+      this.expiration = expirationSetting?.value ?? expirationSetting?.default ?? '';
+      this.nodeTimeout = nodeTimeoutSetting?.value ?? nodeTimeoutSetting?.default ?? '';
+      this.url = '';
+      this.description = '';
+      this.errors = [];
+    },
+
+    resetForm() {
+      this.url = '';
+      this.description = '';
+      this.namespaces = [];
+      this.timeout = '';
+      this.expiration = '';
+      this.nodeTimeout = '';
+      this.errors = [];
+    },
+
+    updateNamespaces(selected) {
+      if (selected.includes(SELECT_ALL)) {
+        this.namespaces = [...this.availableNamespaces];
+      } else if (selected.includes(UNSELECT_ALL)) {
+        this.namespaces = [];
+      } else {
+        this.namespaces = selected.filter((val) => val !== SELECT_ALL && val !== UNSELECT_ALL);
+      }
+    },
+
+    updateNumberValue(field, value) {
+      if (value === '' || value === null || isNaN(value)) {
+        this[field] = '';
+
+        return;
+      }
+
+      const num = Number(value);
+      const isValid = Number.isInteger(num) && num >= 0;
+
+      this[field] = isValid ? String(num) : '';
+    },
+
+    onKeyDown(e) {
+      if (['e', 'E', '+', '-', '.'].includes(e.key)) {
+        e.preventDefault();
+      }
     },
 
     async save(buttonCb) {
       this.errors = [];
 
-      const name = `bundle-${ randomStr(5).toLowerCase() }`;
+      const name = `bundle-${ this.clusterName }-${ this.version }-${ randomStr(5).toLowerCase() }`;
       const namespace = 'harvester-system';
 
+      const spec = {
+        description: this.description.trim(),
+        ...(this.url.trim() && { issueURL: this.url.trim() }),
+        ...(this.namespaces.length > 0 && { extraCollectionNamespaces: this.namespaces }),
+        ...(this.timeout !== '' && { timeout: Number(this.timeout) }),
+        ...(this.expiration !== '' && { expiration: Number(this.expiration) }),
+        ...(this.nodeTimeout !== '' && { nodeTimeout: Number(this.nodeTimeout) }),
+      };
+
       const bundleCrd = {
         apiVersion: 'harvesterhci.io/v1beta1',
         type:       HCI.SUPPORT_BUNDLE,
         kind:       'SupportBundle',
-        metadata:   {
+        metadata:   { name, namespace },
-          name,
+        spec,
-          namespace
-        },
-        spec: {
-          issueURL:    this.url,
-          description: this.description
-        }
       };
 
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const bundleValue = await this.$store.dispatch(`${ inStore }/create`, bundleCrd);
-
       try {
+        const inStore = this.$store.getters['currentProduct'].inStore;
+        const bundleValue = await this.$store.dispatch(`${ inStore }/create`, bundleCrd);
+
         await bundleValue.save();
 
         this.$store.commit('harvester-common/setLatestBundleId', `${ namespace }/${ name }`, { root: true });
@@ -118,69 +237,111 @@ export default {
       @close="close"
     >
       <div class="p-20">
-        <h2>
+        <h2>{{ t('harvester.modal.bundle.title') }}</h2>
-          {{ t('harvester.modal.bundle.title') }}
+        <div class="content">
-        </h2>
+          <div
-
+            v-if="bundlePending"
-        <div
+            class="circle mb-20"
-          v-if="!bundlePending"
+          >
-          class="content"
-        >
-          <LabeledInput
-            v-model:value="url"
-            :label="t('harvester.modal.bundle.url')"
-            class="mb-20"
-          />
-
-          <LabeledInput
-            v-model:value="description"
-            :label="t('harvester.modal.bundle.description')"
-            type="multiline"
-            :min-height="120"
-            required
-          />
-        </div>
-
-        <div
-          v-else
-          class="content"
-        >
-          <div class="circle">
             <GraphCircle
               primary-stroke-color="green"
-              secondary-stroke-color="white"
+              secondary-stroke-color="lightgrey"
               :stroke-width="6"
               :percentage="percentage"
               :show-text="true"
             />
           </div>
-        </div>
+          <template v-else>
+            <p
+              v-if="customSupportBundleFeatureEnabled"
+              v-clean-html="t('harvester.modal.bundle.tip', { doc: docLink }, true)"
+              class="mb-20"
+            />
+            <LabeledInput
+              v-model:value="url"
+              :label="t('harvester.modal.bundle.url')"
+              class="mb-10"
+            />
+            <LabeledInput
+              v-model:value="description"
+              required
+              :label="t('harvester.modal.bundle.description')"
+              type="multiline"
+              :min-height="80"
+              class="mb-10"
+            />
 
-        <div
+            <template v-if="customSupportBundleFeatureEnabled">
-          v-for="(err, idx) in errors"
+              <LabeledSelect
-          :key="idx"
+                v-model:value="namespaces"
-        >
+                :label="t('harvester.modal.bundle.namespaces.label')"
-          <Banner
+                :clearable="true"
-            color="error"
+                :multiple="true"
-            :label="stringify(err)"
+                :append-to-body="false"
-          />
+                :options="namespaceOptions"
-        </div>
+                class="mb-10 namespace-select"
-
+                :tooltip="t('harvester.modal.bundle.namespaces.tooltip', _, true)"
-        <div class="footer mt-20">
+                @update:value="updateNamespaces"
-          <button
+              />
-            class="btn btn-sm role-secondary mr-10"
+              <UnitInput
-            @click="close"
+                v-model:value="timeout"
+                :label="t('harvester.modal.bundle.timeout.label')"
+                class="mb-10"
+                type="number"
+                :min="0"
+                :tooltip="t('harvester.modal.bundle.timeout.tooltip', _, true)"
+                :suffix="timeout > 1 ? 'Minutes' : 'Minute'"
+                @keydown="onKeyDown"
+                @update:value="val => updateNumberValue('timeout', val)"
+              />
+              <UnitInput
+                v-model:value="expiration"
+                :label="t('harvester.modal.bundle.expiration.label')"
+                class="mb-10"
+                type="number"
+                :min="0"
+                :tooltip="t('harvester.modal.bundle.expiration.tooltip', _, true)"
+                :suffix="expiration > 1 ? 'Minutes' : 'Minute'"
+                @keydown="onKeyDown"
+                @update:value="val => updateNumberValue('expiration', val)"
+              />
+              <UnitInput
+                v-model:value="nodeTimeout"
+                :label="t('harvester.modal.bundle.nodeTimeout.label')"
+                class="mb-10"
+                type="number"
+                :min="0"
+                :tooltip="t('harvester.modal.bundle.nodeTimeout.tooltip', _, true)"
+                :suffix="nodeTimeout > 1 ? 'Minutes' : 'Minute'"
+                @keydown="onKeyDown"
+                @update:value="val => updateNumberValue('nodeTimeout', val)"
+              />
+            </template>
+          </template>
+          <div
+            v-for="(err, idx) in errors"
+            :key="idx"
           >
-            {{ t('generic.close') }}
+            <Banner
-          </button>
+              color="error"
-
+              :label="stringify(err)"
-          <AsyncButton
+            />
-            type="submit"
+          </div>
-            mode="generate"
+          <div class="footer mt-20">
-            class="btn btn-sm bg-primary"
+            <button
-            :disabled="bundlePending"
+              class="btn btn-sm role-secondary mr-10"
-            @click="save"
+              @click="close"
-          />
+            >
+              {{ t('generic.close') }}
+            </button>
+            <AsyncButton
+              type="submit"
+              mode="generate"
+              class="btn btn-sm bg-primary"
+              :disabled="bundlePending"
+              @click="save"
+            />
+          </div>
         </div>
       </div>
     </app-modal>
@@ -194,6 +355,10 @@ export default {
     max-height: 100vh;
   }
 
+  .labeled-select.taggable ::v-deep(.vs__selected-options .vs__selected.vs__selected > button) {
+    margin: 0 7px;
+  }
+
   .bundle {
     cursor: pointer;
     color: var(--primary);
@@ -204,12 +369,15 @@ export default {
   }
 
   .content {
-    height: 218px;
-
     .circle {
-      padding-top: 20px;
+      padding: 10px 0;
       height: 160px;
     }
+    .namespace-select {
+      :deep(.vs__dropdown-menu) {
+        max-height: 210px;
+      }
+    }
   }
 
   div {

pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue

@@ -73,8 +73,10 @@ export default {
 
         data.spec.clusterNetwork = this.clusterNetwork;
 
+        const url = this.$store.getters['harvester-common/getHarvesterClusterUrl'](`v1/harvester/${ HCI.VLAN_CONFIG }s/${ data.id }`);
+
         await this.$store.dispatch('harvester/request', {
-          url:    `/v1/harvester/${ HCI.VLAN_CONFIG }s/${ data.id }`,
+          url,
           method: 'PUT',
           data,
         });

pkg/harvester/edit/devices.harvesterhci.io.migconfiguration.vue

@@ -0,0 +1,133 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import LabelValue from '@shell/components/LabelValue';
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name: 'HarvesterEditMIGConfiguration',
+
+  components: {
+    Tab,
+    Tabbed,
+    CruResource,
+    LabeledInput,
+    NameNsDescription,
+    LabelValue
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    const { profileSpec } = this.value.spec;
+
+    return { profileSpec: profileSpec || [] };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    isView() {
+      return this.mode === 'view';
+    },
+  },
+  methods: {
+    updateBeforeSave() {
+      // MIGConfiguration CRD don't have any namespace field,
+      // so we need to remove the namespace field before saving
+      delete this.value.metadata.namespace;
+      // enable the MIGConfiguration when saving
+      this.value.spec.enabled = true;
+    },
+
+    labelTitle(profile) {
+      return `${ profile.name } (available : ${ this.available(profile) })`;
+    },
+
+    available(profile) {
+      const count = this.value.status?.profileStatus?.find((p) => p.id === profile.id)?.available;
+
+      return count || 0;
+    },
+
+    updateRequested(neu, profile) {
+      if (neu === null || neu === '') return;
+      const newValue = Number(neu);
+      const availableCount = this.available(profile);
+
+      if (newValue < 0) {
+        profile.requested = 0;
+      } else if ( newValue > availableCount ) {
+        profile.requested = availableCount;
+      } else {
+        profile.requested = newValue;
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    finish-button-mode="enable"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+    />
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="profileSpec"
+        :label="t('harvester.migconfiguration.profileSpec')"
+        :weight="1"
+        class="bordered-table"
+      >
+        <div
+          v-for="(profile, index) in profileSpec"
+          :key="index"
+        >
+          <LabelValue
+            :value="labelTitle(profile)"
+            class="mb-10"
+          />
+          <LabeledInput
+            v-model:value="profile.requested"
+            :min="0"
+            :disabled="isView"
+            type="number"
+            class="mb-20"
+            :label="`${t('harvester.migconfiguration.requested')}`"
+            @update:value="updateRequested($event, profile)"
+          />
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>

pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue

@@ -8,7 +8,7 @@ import LabelValue from '@shell/components/LabelValue';
 import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { RadioGroup, RadioButton } from '@components/Form/Radio';
+import { RadioGroup } from '@components/Form/Radio';
 import HarvesterDisk from '../../mixins/harvester-disk';
 import Tags from '../../components/DiskTags';
 import { HCI } from '../../types';
@@ -30,7 +30,6 @@ export default {
     BadgeState,
     Banner,
     RadioGroup,
-    RadioButton,
     ModalWithCard,
     Tags,
   },
@@ -184,12 +183,11 @@ export default {
     },
 
     forceFormattedDisabled() {
-      const lastFormattedAt = this.blockDevice?.status?.deviceStatus?.fileSystem?.LastFormattedAt;
       const fileSystem = this.blockDevice?.status?.deviceStatus?.fileSystem.type;
 
       const systems = ['ext4', 'XFS'];
 
-      if (lastFormattedAt || this.blockDevice?.childParts?.length > 0) {
+      if (this.blockDevice?.childParts?.length > 0) {
         return true;
       } else if (systems.includes(fileSystem)) {
         return false;
@@ -446,7 +444,7 @@ export default {
         />
       </div>
       <div
-        v-if="(value.isNew && isLonghornV1 && !isFormatted) || isCorrupted"
+        v-if="(value.isNew && isLonghornV1) || isCorrupted"
         class="col span-6"
       >
         <RadioGroup
@@ -459,15 +457,6 @@ export default {
           :disabled="forceFormattedDisabled"
           tooltip-key="harvester.host.disk.forceFormatted.toolTip"
         >
-          <template #1="{option, listeners}">
-            <RadioButton
-              :label="option.label"
-              :val="option.value"
-              :value="value.forceFormatted"
-              :disabled="forceFormattedDisabled && !value.forceFormatted"
-              v-on="listeners"
-            />
-          </template>
         </RadioGroup>
       </div>
       <div

pkg/harvester/edit/harvesterhci.io.host/HarvesterHugepages.vue

@@ -0,0 +1,157 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { HCI } from '../../types';
+import { DOC } from '../../config/doc-links';
+
+export const hugepagesTHPEnabledMode = [{
+  label: 'Always',
+  value: 'always',
+}, {
+  label: 'Madvise',
+  value: 'madvise',
+}, {
+  label: 'Never',
+  value: 'never',
+}];
+
+export const hugepagesTHPShmemEnabledMode = [{
+  label: 'Always',
+  value: 'always',
+}, {
+  label: 'Within Size',
+  value: 'within_size',
+}, {
+  label: 'Advise',
+  value: 'advise',
+}, {
+  label: 'Never',
+  value: 'never',
+}, {
+  label: 'Deny',
+  value: 'deny',
+}, {
+  label: 'Force',
+  value: 'force',
+}];
+
+export const hugepagesTHPDefragMode = [{
+  label: 'Always',
+  value: 'always',
+}, {
+  label: 'Defer',
+  value: 'defer',
+}, {
+  label: 'Defer+Madvise',
+  value: 'defer+madvise',
+}, {
+  label: 'Madvise',
+  value: 'madvise',
+}, {
+  label: 'Never',
+  value: 'never'
+}];
+
+export default {
+  name:       'HarvesterHugepages',
+  components: { LabeledSelect },
+
+  props: {
+    node: {
+      type:     Object,
+      required: true,
+    },
+
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  computed: {
+    docsTransparentHugepagesLink() {
+      return DOC.TRANSPARENT_HUGEPAGES;
+    },
+  },
+
+  methods: {
+    async saveHugepages() {
+      this.hugepages['spec'] = this.spec;
+
+      await this.hugepages.save().catch((reason) => {
+        if (reason?.type === 'error') {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('harvester.notification.title.error'),
+            message: reason?.message,
+          }, { root: true });
+
+          return Promise.reject(new Error('saveHugepages error'));
+        }
+      });
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.HUGEPAGES });
+
+    this.hugepages = hash.find((node) => {
+      return node.id === this.node.id;
+    });
+    this.spec = this.hugepages.spec;
+  },
+
+  data() {
+    return {
+      hugepages: {},
+      spec:      { transparent: {} },
+      hugepagesTHPEnabledMode,
+      hugepagesTHPShmemEnabledMode,
+      hugepagesTHPDefragMode,
+    };
+  },
+
+  created() {
+    this.registerBeforeHook(this.saveHugepages, 'saveHugepages');
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <hr class="divider" />
+      <h3>
+        <t
+          k="harvester.host.hugepages.transparent.title"
+          :raw="true"
+          :url="docsTransparentHugepagesLink"
+        />
+      </h3>
+
+      <div class="row mb-20">
+        <div class="col span-4">
+          <LabeledSelect
+            v-model:value="spec.transparent.enabled"
+            :label="t('harvester.host.hugepages.transparent.enabled')"
+            :options="hugepagesTHPEnabledMode"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledSelect
+            v-model:value="spec.transparent.shmemEnabled"
+            :label="t('harvester.host.hugepages.transparent.shmemEnabled')"
+            :options="hugepagesTHPShmemEnabledMode"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledSelect
+            v-model:value="spec.transparent.defrag"
+            :label="t('harvester.host.hugepages.transparent.defrag')"
+            :options="hugepagesTHPDefragMode"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/edit/harvesterhci.io.host/HarvesterKsmtuned.vue

@@ -7,6 +7,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { HCI } from '../../types';
 import { DOC } from '../../config/doc-links';
 import { docLink } from '../../utils/feature-flags';
+import isEqual from 'lodash/isEqual';
+import { clone } from '@shell/utils/object';
 
 export const ksmtunedMode = [{
   value: 'standard',
@@ -64,11 +66,13 @@ export default {
 
     this.enableMergeAcrossNodes = !!this.ksmtuned.spec?.mergeAcrossNodes;
     this.spec = this.ksmtuned.spec;
+    this.originSpec = clone(this.ksmtuned.spec);
   },
 
   data() {
     return {
       ksmtuned:               {},
+      originSpec:             {},
       spec:                   {},
       thresCoef:              30,
       ksmtunedMode,
@@ -99,6 +103,11 @@ export default {
 
   methods: {
     async saveKsmtuned() {
+      // no ksmtuned spec change, skip save
+      if (isEqual(this.spec, this.originSpec)) {
+        return;
+      }
+
       this.spec.mergeAcrossNodes = this.enableMergeAcrossNodes ? 1 : 0;
       this.ksmtuned['spec'] = this.spec;
 

pkg/harvester/edit/harvesterhci.io.host/index.vue

@@ -28,6 +28,7 @@ import { HCI } from '../../types';
 import HarvesterDisk from './HarvesterDisk';
 import HarvesterSeeder from './HarvesterSeeder';
 import HarvesterKsmtuned from './HarvesterKsmtuned';
+import HarvesterHugepages from './HarvesterHugepages';
 import Tags from '../../components/DiskTags';
 import { LVM_DRIVER } from '../../models/harvester/storage.k8s.io.storageclass';
 import isEqual from 'lodash/isEqual';
@@ -50,6 +51,7 @@ export default {
     ArrayListGrouped,
     HarvesterDisk,
     HarvesterKsmtuned,
+    HarvesterHugepages,
     ButtonDropdown,
     KeyValue,
     Banner,
@@ -225,6 +227,12 @@ export default {
       return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.KSTUNED);
     },
 
+    hasHugepagesSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.HUGEPAGES);
+    },
+
     hasBlockDevicesSchema() {
       const inStore = this.$store.getters['currentProduct'].inStore;
 
@@ -527,7 +535,6 @@ export default {
               id:   this.longhornNode.id,
               opt:  { force: true },
             });
-
             await new Promise((resolve) => setTimeout(resolve, '5000'));
             await retrySave();
           } else {
@@ -648,6 +655,17 @@ export default {
             </template>
           </ArrayListGrouped>
         </Tab>
+        <Tab
+          v-if="hasHugepagesSchema"
+          name="Hugepages"
+          :weight="70"
+          :label="t('harvester.host.tabs.hugepages')"
+        >
+          <HarvesterHugepages
+            :node="value"
+            :register-before-hook="registerBeforeHook"
+          />
+        </Tab>
         <Tab
           v-if="hasKsmtunedSchema"
           name="Ksmtuned"

pkg/harvester/edit/harvesterhci.io.networkattachmentdefinition.vue

@@ -6,14 +6,17 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { allHash } from '@shell/utils/promise';
 import { HCI } from '../types';
-import { NETWORK_TYPE } from '../config/types';
+import { NETWORK_TYPE, L2VLAN_MODE } from '../config/types';
+import { removeObject } from '@shell/utils/array';
 
-const { L2VLAN, UNTAGGED } = NETWORK_TYPE;
+const {
+  L2VLAN, UNTAGGED, OVERLAY, L2TRUNK_VLAN
+} = NETWORK_TYPE;
+const { ACCESS, TRUNK } = L2VLAN_MODE;
 
 const AUTO = 'auto';
 const MANUAL = 'manual';
@@ -44,18 +47,17 @@ export default {
 
   data() {
     const config = JSON.parse(this.value.spec.config);
+
     const annotations = this.value?.metadata?.annotations || {};
     const layer3Network = JSON.parse(annotations[HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE] || '{}');
 
-    if ((config.bridge || '').endsWith('-br')) {
-      config.bridge = config.bridge.slice(0, -3);
-    }
-
     const type = this.value.vlanType || L2VLAN ;
 
     return {
       config,
       type,
+      l2VlanMode:    this.value.vlanType === L2TRUNK_VLAN ? TRUNK : ACCESS,
+      vlanTrunk:     this.parseVlanTrunk(config),
       layer3Network: {
         mode:         layer3Network.mode || AUTO,
         serverIPAddr: layer3Network.serverIPAddr || '',
@@ -78,6 +80,30 @@ export default {
   },
 
   computed: {
+    clusterBridge: {
+      get() {
+        if (!this.config.bridge) {
+          return '';
+        }
+
+        // remove -br suffix if exists
+        return this.config?.bridge?.endsWith('-br') ? this.config.bridge.slice(0, -3) : '';
+      },
+
+      set(neu) {
+        if (neu === '') {
+          this.config.bridge = '';
+
+          return;
+        }
+
+        if (!neu.endsWith('-br')) {
+          this.config.bridge = `${ neu }-br`;
+        } else {
+          this.config.bridge = neu;
+        }
+      }
+    },
     modeOptions() {
       return [{
         label: this.t('harvester.network.layer3Network.mode.auto'),
@@ -88,6 +114,18 @@ export default {
       }];
     },
 
+    l2VlanTrunkModeFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('l2VlanTrunkMode');
+    },
+
+    kubeovnVpcSubnetSupport() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('kubeovnVpcSubnet');
+    },
+
+    longhornV2LVMSupport() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('longhornV2LVMSupport');
+    },
+
     clusterNetworkOptions() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
@@ -103,8 +141,56 @@ export default {
       });
     },
 
-    networkType() {
+    l2VlanModeOptions() {
-      return [L2VLAN, UNTAGGED];
+      return [{
+        label: this.t('harvester.vlanStatus.vlanConfig.l2VlanMode.access'),
+        value: ACCESS,
+      }, {
+        label: this.t('harvester.vlanStatus.vlanConfig.l2VlanMode.trunk'),
+        value: TRUNK,
+      }];
+    },
+
+    networkTypes() {
+      const types = [L2VLAN, UNTAGGED];
+
+      if (this.kubeovnVpcSubnetSupport) {
+        types.push(OVERLAY);
+      }
+
+      return types;
+    },
+
+    isL2VlanNetwork() {
+      if (this.isView) {
+        return this.value.vlanType === L2VLAN;
+      }
+
+      return this.type === L2VLAN;
+    },
+
+    isL2VlanTrunkMode() {
+      if (this.isView) {
+        return this.value.vlanType === L2TRUNK_VLAN && this.l2VlanMode === TRUNK;
+      }
+
+      return this.type === L2TRUNK_VLAN || (this.l2VlanMode === TRUNK && this.type === L2VLAN);
+    },
+
+    isL2VlanAccessMode() {
+      if (this.isView) {
+        return this.value.vlanType === L2VLAN && this.l2VlanMode === ACCESS;
+      }
+
+      return this.type === L2VLAN && this.l2VlanMode === ACCESS;
+    },
+
+    isOverlayNetwork() {
+      if (this.isView) {
+        return this.value.vlanType === OVERLAY;
+      }
+
+      return this.type === OVERLAY;
     },
 
     isUntaggedNetwork() {
@@ -116,39 +202,102 @@ export default {
     }
   },
 
+  watch: {
+    type(newType) {
+      if (newType === OVERLAY) { // overlay network configuration
+        this.config.type = 'kube-ovn';
+        this.config.provider = `${ this.value.metadata.name }.${ this.value.metadata.namespace }.ovn`;
+        this.config.server_socket = '/run/openvswitch/kube-ovn-daemon.sock';
+      } else { // l2vlan or untagged network configuration
+        this.config.type = 'bridge';
+        this.config.promiscMode = true;
+        this.config.ipam = {};
+        this.config.bridge = '';
+        delete this.config.provider;
+        delete this.config.server_socket;
+      }
+    },
+    l2VlanMode(newAccessMode) {
+      if (this.type !== L2VLAN) {
+        return;
+      }
+
+      if (newAccessMode === TRUNK) { // trunk mode
+        this.config.vlan = 0;
+        this.config.vlanTrunk = this.vlanTrunk;
+      } else { // access mode
+        delete this.config.vlanTrunk;
+        this.config.vlan = '';
+      }
+    },
+  },
+
   methods: {
     async saveNetwork(buttonCb) {
       const errors = [];
 
-      if (!this.config.vlan && !this.isUntaggedNetwork) {
+      if (this.isL2VlanNetwork || this.isUntaggedNetwork) {
-        errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('tableHeaders.networkVlan') }));
+        if (this.isL2VlanTrunkMode && this.vlanTrunk.some((trunk) => trunk.minID === '')) {
-      }
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.vlanStatus.vlanConfig.vlanTrunk.minId') }));
-
-      if (!this.config.bridge) {
-        errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.clusterNetwork.label') }));
-      }
-
-      if (this.layer3Network.mode === MANUAL) {
-        if (!this.layer3Network.gateway) {
-          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.gateway.label') }));
         }
-        if (!this.layer3Network.cidr) {
+
-          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.cidr.label') }));
+        if (this.isL2VlanTrunkMode && this.vlanTrunk.some((trunk) => trunk.maxID === '')) {
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.vlanStatus.vlanConfig.vlanTrunk.maxId') }));
         }
+
+        if (this.isL2VlanAccessMode && !this.config.vlan && !this.isUntaggedNetwork) {
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('tableHeaders.networkVlan') }));
+        }
+
+        if (!this.config.bridge) {
+          errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.clusterNetwork.label') }));
+        }
+
+        if (this.layer3Network.mode === MANUAL) {
+          if (!this.layer3Network.gateway) {
+            errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.gateway.label') }));
+          }
+          if (!this.layer3Network.cidr) {
+            errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.cidr.label') }));
+          }
+        }
+
+        if (errors.length > 0) {
+          buttonCb(false);
+          this.errors = errors;
+
+          return false;
+        }
+        this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE, JSON.stringify(this.layer3Network));
       }
 
-      if (errors.length > 0) {
-        buttonCb(false);
-        this.errors = errors;
-
-        return false;
-      }
-
-      this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE, JSON.stringify(this.layer3Network));
-
       await this.save(buttonCb);
     },
 
+    parseVlanTrunk(config) {
+      if (config?.vlanTrunk && config?.vlanTrunk?.length > 0) {
+        return config.vlanTrunk;
+      }
+
+      return [{ minID: '', maxID: '' }];
+    },
+
+    removeVlanTrunk(trunk) {
+      removeObject(this.vlanTrunk, trunk);
+    },
+
+    addVlanTrunk() {
+      if (!this.config.vlanTrunk) {
+        this.config.vlanTrunk = [];
+      }
+      this.vlanTrunk.push({ minID: this.minId, maxID: this.maxId });
+      this.config.vlanTrunk = this.vlanTrunk;
+    },
+
+    vlanTrunkChange() {
+      this.config.vlanTrunk = this.vlanTrunk;
+    },
+
     input(neu) {
       if (neu === '') {
         this.config.vlan = '';
@@ -169,14 +318,19 @@ export default {
     updateBeforeSave() {
       this.config.name = this.value.metadata.name;
 
+      if (this.isOverlayNetwork) {
+        this.config.provider = `${ this.value.metadata.name }.${ this.value.metadata.namespace }.ovn`;
+        delete this.config.bridge;
+        delete this.config.promiscMode;
+        delete this.config.vlan;
+        delete this.config.ipam;
+      }
+
       if (this.isUntaggedNetwork) {
         delete this.config.vlan;
       }
 
-      this.value.spec.config = JSON.stringify({
+      this.value.spec.config = JSON.stringify({ ...this.config });
-        ...this.config,
-        bridge: `${ this.config.bridge }-br`,
-      });
     },
   }
 };
@@ -212,14 +366,83 @@ export default {
         <LabeledSelect
           v-model:value="type"
           class="mb-20"
-          :options="networkType"
+          :options="networkTypes"
           :mode="mode"
+          :disabled="isEdit"
           :label="t('harvester.fields.type')"
           required
         />
 
+        <LabeledSelect
+          v-if="isL2VlanNetwork && l2VlanTrunkModeFeatureEnabled"
+          v-model:value="l2VlanMode"
+          class="mb-20"
+          :options="l2VlanModeOptions"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('harvester.vlanStatus.vlanConfig.l2VlanMode.label')"
+          required
+        />
+        <div v-if="isL2VlanTrunkMode && l2VlanTrunkModeFeatureEnabled">
+          <div
+            v-for="(trunk, i) in vlanTrunk"
+            :key="i"
+          >
+            <div class="row mt-10">
+              <div class="col trunk-span">
+                <LabeledInput
+                  v-model:value.number="trunk.minID"
+                  class="mb-20"
+                  required
+                  placeholder="e.g. 1-4094"
+                  :min="1"
+                  :max="4094"
+                  type="number"
+                  :label="t('harvester.vlanStatus.vlanConfig.vlanTrunk.minId')"
+                  :mode="mode"
+                  @update:value="vlanTrunkChange"
+                />
+              </div>
+              <div class="col trunk-span">
+                <LabeledInput
+                  v-model:value.number="trunk.maxID"
+                  class="mb-20"
+                  :max="4094"
+                  :min="1"
+                  placeholder="e.g. 1-4094"
+                  required
+                  type="number"
+                  :label="t('harvester.vlanStatus.vlanConfig.vlanTrunk.maxId')"
+                  :mode="mode"
+                  @update:value="vlanTrunkChange"
+                />
+              </div>
+              <div class="col remove-btn mb-20">
+                <button
+                  type="button"
+                  :disabled="isView || vlanTrunk.length <= 1"
+                  :aria-label="t('generic.ariaLabel.remove', {index: i+1})"
+                  role="button"
+                  class="btn role-link"
+                  @click="removeVlanTrunk(trunk)"
+                >
+                  {{ t('harvester.fields.remove') }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <button
+            v-if="isL2VlanTrunkMode"
+            type="button"
+            class="btn btn-sm bg-primary mb-20"
+            :disabled="isView"
+            @click="addVlanTrunk"
+          >
+            {{ t('harvester.vlanStatus.vlanConfig.vlanTrunk.add') }}
+          </button>
+        </div>
         <LabeledInput
-          v-if="!isUntaggedNetwork"
+          v-if="isL2VlanAccessMode"
           v-model:value.number="config.vlan"
           class="mb-20"
           required
@@ -229,25 +452,20 @@ export default {
           :mode="mode"
           @update:value="input"
         />
-
+        <LabeledSelect
-        <div class="row">
+          v-if="!isOverlayNetwork"
-          <div
+          v-model:value="clusterBridge"
-            class="col span-12"
+          class="mb-20"
-          >
+          :label="t('harvester.network.clusterNetwork.label')"
-            <LabeledSelect
+          required
-              v-model:value="config.bridge"
+          :disabled="isEdit"
-              class="mb-20"
+          :options="clusterNetworkOptions"
-              :label="t('harvester.network.clusterNetwork.label')"
+          :mode="mode"
-              required
+          :placeholder="t('harvester.network.clusterNetwork.selectPlaceholder')"
-              :options="clusterNetworkOptions"
+        />
-              :mode="mode"
-              :placeholder="t('harvester.network.clusterNetwork.selectPlaceholder')"
-            />
-          </div>
-        </div>
       </Tab>
       <Tab
-        v-if="!isUntaggedNetwork"
+        v-if="isL2VlanAccessMode"
         name="layer3Network"
         :label="t('harvester.network.tabs.layer3Network')"
         :weight="98"
@@ -306,3 +524,12 @@ export default {
     </Tabbed>
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+ .remove-btn {
+  align-self: center;
+}
+.trunk-span{
+  flex: 5;
+}
+</style>

pkg/harvester/edit/harvesterhci.io.schedulevmbackup.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -15,6 +16,8 @@ import { HCI } from '../types';
 import { sortBy } from '@shell/utils/sort';
 import { BACKUP_TYPE } from '../config/types';
 import { _EDIT, _CREATE } from '@shell/config/query-params';
+import { isBackupTargetSettingEmpty, isBackupTargetSettingUnavailable } from '../utils/setting';
+import CronExpressionEditorModal from '@shell/components/Cron/CronExpressionEditorModal.vue';
 
 export default {
   name:       'CreateVMSchedule',
@@ -27,6 +30,7 @@ export default {
     LabeledSelect,
     MessageLink,
     Banner,
+    CronExpressionEditorModal
   },
 
   mixins: [CreateEditView],
@@ -85,15 +89,17 @@ export default {
       }
     }
 
-    return { settings: [] };
+    return { settings: [], showModel: false };
   },
 
   computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
     backupTargetResource() {
       return this.settings.find( (O) => O.id === 'backup-target');
     },
     isEmptyValue() {
-      return this.getBackupTargetValueIsEmpty(this.backupTargetResource);
+      return isBackupTargetSettingEmpty(this.backupTargetResource);
     },
     canUpdate() {
       return this?.backupTargetResource?.canUpdate;
@@ -109,7 +115,7 @@ export default {
       !!this.value.spec.maxFailure;
     },
     isBackupTargetUnAvailable() {
-      return this.value.spec.vmbackup.type === BACKUP_TYPE.BACKUP && (this.errorMessage || this.isEmptyValue) && this.canUpdate;
+      return this.value.spec.vmbackup.type === BACKUP_TYPE.BACKUP && isBackupTargetSettingUnavailable(this.backupTargetResource);
     },
     vmOptions() {
       const nsVmList = this.$store.getters['harvester/all'](HCI.VM).filter((vm) => vm.metadata.namespace === this.value.metadata.namespace);
@@ -166,25 +172,14 @@ export default {
     onTypeChange(newType) {
       this.value.metadata.name = `svm${ newType }-${ this.value.spec.vmbackup.source.name }`;
     },
-    getBackupTargetValueIsEmpty(resource) {
-      let out = true;
-
-      if (resource?.value) {
-        try {
-          const valueJson = JSON.parse(resource?.value);
-
-          out = !valueJson.type;
-        } catch (e) {}
-      }
-
-      return out;
-    },
-
     validateFailure(count) {
       if (this.value.spec.retain && count > this.value.spec.retain) {
         this.value.spec['maxFailure'] = this.value.spec.retain;
       }
     },
+    openModal() {
+      this.showModel = true;
+    },
   },
 };
 </script>
@@ -269,16 +264,28 @@ export default {
         :weight="99"
         class="bordered-table"
       >
-        <LabeledInput
+        <div class="cronEditor">
-          v-model:value="value.spec.cron"
+          <LabeledInput
-          class="mb-30"
+            v-model:value="value.spec.cron"
-          type="cron"
+            class="mb-30"
-          required
+            type="cron"
-          :mode="mode"
+            required
-          :label="t('harvester.schedule.cron')"
+            :mode="mode"
-          placeholder="0 * * * *"
+            :label="t('harvester.schedule.cron.label')"
-          :disabled="isBackupTargetUnAvailable || isView"
+            placeholder="0 * * * *"
-        />
+            :disabled="isBackupTargetUnAvailable || isView"
+          />
+          <button
+            class="editCronBtn btn role-primary"
+            @click="openModal"
+          >
+            {{ t('harvester.schedule.cron.editButton') }}
+          </button>
+          <CronExpressionEditorModal
+            v-model:show="showModel"
+            v-model:cron-expression="value.spec.cron"
+          />
+        </div>
         <LabeledInput
           v-model:value.number="value.spec.retain"
           class="mb-30"
@@ -305,3 +312,16 @@ export default {
     </Tabbed>
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+.cronEditor {
+  align-items: center;
+  display: flex;
+}
+
+.editCronBtn {
+  margin-bottom: 30px;
+  margin-left: 10px;
+  height: 60px;
+}
+</style>

pkg/harvester/edit/harvesterhci.io.secret.vue

@@ -84,6 +84,10 @@ export default {
       this.value['_type'] = TYPES.OPAQUE;
     }
 
+    if ( this.realMode === _CLONE) {
+      this.value['_type'] = this.liveValue._type;
+    }
+
     return {
       isCloud,
       nodeDrivers:       null,

pkg/harvester/edit/harvesterhci.io.setting.vue

@@ -6,6 +6,8 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import UnitInput from '@shell/components/form/UnitInput';
 import CreateEditView from '@shell/mixins/create-edit-view';
+import { DOC } from '../config/doc-links';
+import { docLink } from '../utils/feature-flags';
 
 import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING, HCI_SETTING } from '../config/settings';
 
@@ -58,7 +60,13 @@ export default {
 
     return {
       setting,
-      description:        isHarvester ? t(`advancedSettings.descriptions.harv-${ this.value.id }`) : t(`advancedSettings.descriptions.${ this.value.id }`),
+      description: isHarvester ? t(
+        `advancedSettings.descriptions.harv-${ this.value.id }`,
+        this.getDocLinkParams()
+      ) : t(
+        `advancedSettings.descriptions.${ this.value.id }`,
+        this.getDocLinkParams()
+      ),
       editHelp:           t(`advancedSettings.editHelp.${ this.value.id }`),
       enumOptions,
       canReset,
@@ -171,6 +179,18 @@ export default {
       if (typeof this.$refs.settingComp?.useDefault === 'function') {
         this.$refs.settingComp.useDefault();
       }
+    },
+    getDocLinkParams() {
+      const setting = HCI_ALLOWED_SETTINGS[this.value.id] || HCI_SINGLE_CLUSTER_ALLOWED_SETTING[this.value.id];
+
+      if (setting?.docPath) {
+        const version = this.$store.getters['harvester-common/getServerVersion']();
+        const url = docLink(DOC[setting.docPath], version);
+
+        return { url };
+      }
+
+      return {};
     }
   }
 };
@@ -276,4 +296,9 @@ export default {
 :deep() .edit-help code {
   padding: 1px 5px;
 }
+
+::v-deep(.banner__content.closable) {
+  white-space: normal;
+  word-break: break-word;
+}
 </style>

pkg/harvester/edit/harvesterhci.io.storage/CDISettings.vue

@@ -0,0 +1,319 @@
+<script>
+import { VOLUME_MODE } from '@pkg/harvester/config/types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
+import ArrayList from '@shell/components/form/ArrayList';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { VOLUME_SNAPSHOT_CLASS, HCI } from '../../types';
+import { HCI_SETTING } from '../../config/settings';
+import { allHash } from '@shell/utils/promise';
+import { _EDIT, _CREATE } from '@shell/config/query-params';
+
+export default {
+  name: 'CDISettings',
+
+  props: {
+    value:    {
+      type:     Object,
+      required: true
+    },
+    mode:        {
+      type:     String,
+      required: true
+    },
+    provisioner: {
+      type:     String,
+      required: true
+    },
+  },
+
+  components: {
+    ArrayList,
+    Checkbox,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  emits: ['update:cdiSettings'],
+
+  async fetch() {
+    const hash = {
+      volumeSnapshotClasses:  this.$store.dispatch(`${ this.inStore }/findAll`, { type: VOLUME_SNAPSHOT_CLASS }),
+      csiDriverConfigSetting: this.$store.dispatch(`${ this.inStore }/find`, { type: HCI.SETTING, id: HCI_SETTING.CSI_DRIVER_CONFIG }),
+    };
+
+    await allHash(hash);
+
+    if (this.mode === _CREATE ) {
+      this.setDefaultVolumeSnapshotClass();
+    } else {
+      this.initCDISettingsFromAnnotations();
+    }
+  },
+
+  data() {
+    return {
+      cdiSettings: {
+        volumeModeAccessModes: [],
+        volumeSnapshotClass:   null,
+        cloneStrategy:         null,
+        filesystemOverhead:    null,
+      },
+      defaultAddValue: { volumeMode: null, accessModes: [] },
+      noneOption:      { label: 'None', value: '' },
+    };
+  },
+
+  computed: {
+    inStore() {
+      return this.$store.getters['currentProduct'].inStore;
+    },
+
+    allVolumeModeOptions() {
+      return Object.values(VOLUME_MODE).map((mode) => ({ label: mode, value: mode }));
+    },
+
+    selectedVolumeModes() {
+      return this.cdiSettings.volumeModeAccessModes
+        .map((item) => item.volumeMode)
+        .filter(Boolean);
+    },
+
+    volumeModeOptions() {
+      return [this.noneOption, ...this.allVolumeModeOptions].filter( (option) => !this.selectedVolumeModes.includes(option.value) );
+    },
+
+    allVolumeModesSelected() {
+      return this.selectedVolumeModes.length === this.allVolumeModeOptions.length;
+    },
+
+    accessModeOptions() {
+      return [
+        { label: 'ReadWriteOnce', value: 'ReadWriteOnce' },
+        { label: 'ReadOnlyMany', value: 'ReadOnlyMany' },
+        { label: 'ReadWriteMany', value: 'ReadWriteMany' },
+        { label: 'ReadWriteOncePod', value: 'ReadWriteOncePod' },
+      ];
+    },
+
+    cloneStrategyOptions() {
+      return [
+        this.noneOption,
+        { label: this.t('harvester.storage.cdiSettings.cloneStrategy.copy'), value: 'copy' },
+        { label: this.t('harvester.storage.cdiSettings.cloneStrategy.snapshot'), value: 'snapshot' },
+        { label: this.t('harvester.storage.cdiSettings.cloneStrategy.csiClone'), value: 'csi-clone' },
+      ];
+    },
+
+    volumeSnapshotClassOptions() {
+      const allClasses = this.$store.getters[`${ this.inStore }/all`](VOLUME_SNAPSHOT_CLASS) || [];
+      const filtered = allClasses.filter((c) => c.driver === this.provisioner);
+
+      return [this.noneOption, ...filtered.map((c) => ({ label: c.name, value: c.name }))];
+    },
+
+    isFilesystemOverheadValid() {
+      const val = this.cdiSettings.filesystemOverhead;
+
+      if (val === null || val === '') return true;
+      const regex = /^(0(\.\d{1,3})?|1(\.0{1,3})?)$/;
+
+      return regex.test(val);
+    },
+
+    isCustomClass() {
+      return this.mode === _CREATE || this.mode === _EDIT;
+    }
+  },
+
+  watch: {
+    provisioner() {
+      this.resetCdiSettings();
+      this.$nextTick(this.setDefaultVolumeSnapshotClass);
+    },
+
+    cdiSettings: {
+      handler(val) {
+        this.$emit('update:cdiSettings', val);
+      },
+      deep:      true,
+      immediate: true,
+    }
+  },
+
+  methods: {
+    setDefaultVolumeSnapshotClass() {
+      try {
+        const setting = this.$store.getters[`${ this.inStore }/byId`](HCI.SETTING, HCI_SETTING.CSI_DRIVER_CONFIG);
+        const config = JSON.parse(setting?.value || setting?.default || '{}');
+        const defaultClass = config?.[this.provisioner]?.volumeSnapshotClassName || null;
+
+        const allClasses = this.$store.getters[`${ this.inStore }/all`](VOLUME_SNAPSHOT_CLASS) || [];
+        const matched = allClasses.find((cls) => cls.name === defaultClass && cls.driver === this.provisioner);
+
+        this.cdiSettings.volumeSnapshotClass = matched?.name || null;
+      } catch (e) {
+        console.error('Failed to parse CSI config:', e); // eslint-disable-line no-console
+        this.cdiSettings.volumeSnapshotClass = null;
+      }
+    },
+
+    initCDISettingsFromAnnotations() {
+      const annotations = this.value?.metadata?.annotations || {};
+
+      let volumeModeAccessModes = [];
+      const rawVolumeMode = annotations[HCI_ANNOTATIONS.VOLUME_MODE_ACCESS_MODES];
+
+      if (rawVolumeMode) {
+        try {
+          const parsed = JSON.parse(rawVolumeMode);
+
+          volumeModeAccessModes = Object.entries(parsed).map(([volumeMode, accessModes]) => ({
+            volumeMode,
+            accessModes: Array.isArray(accessModes) ? accessModes : [],
+          }));
+        } catch (e) {
+          console.error('Failed to parse annotation:', e); // eslint-disable-line no-console
+        }
+      }
+
+      if (volumeModeAccessModes.length) {
+        this.cdiSettings.volumeModeAccessModes = volumeModeAccessModes;
+      }
+      if (annotations[HCI_ANNOTATIONS.VOLUME_SNAPSHOT_CLASS]) {
+        this.cdiSettings.volumeSnapshotClass = annotations[HCI_ANNOTATIONS.VOLUME_SNAPSHOT_CLASS];
+      }
+      if (annotations[HCI_ANNOTATIONS.CLONE_STRATEGY]) {
+        this.cdiSettings.cloneStrategy = annotations[HCI_ANNOTATIONS.CLONE_STRATEGY];
+      }
+      if (annotations[HCI_ANNOTATIONS.FILESYSTEM_OVERHEAD]) {
+        this.cdiSettings.filesystemOverhead = annotations[HCI_ANNOTATIONS.FILESYSTEM_OVERHEAD];
+      }
+    },
+
+    resetCdiSettings() {
+      this.cdiSettings.volumeModeAccessModes = [this.defaultAddValue];
+      this.cdiSettings.volumeSnapshotClass = null;
+      this.cdiSettings.cloneStrategy = null;
+      this.cdiSettings.filesystemOverhead = null;
+    },
+
+    validateFilesystemOverhead(e) {
+      const val = e.target.value;
+
+      this.cdiSettings.filesystemOverhead = val;
+    }
+  }
+};
+</script>
+
+<template>
+  <ArrayList
+    v-model:value="cdiSettings.volumeModeAccessModes"
+    :initial-empty-row="true"
+    :show-header="true"
+    :mode="mode"
+    :title="t('harvester.storage.cdiSettings.volumeModeAccessModes.label')"
+    :add-label="t('harvester.storage.cdiSettings.volumeModeAccessModes.add')"
+    :default-add-value="defaultAddValue"
+    :protip="t('harvester.storage.cdiSettings.volumeModeAccessModes.tooltip')"
+    :add-disabled="allVolumeModesSelected"
+  >
+    <template #column-headers>
+      <div class="column-headers">
+        <div
+          class="row"
+          :class="{ custom: isCustomClass }"
+        >
+          <label
+            class="col span-3 value text-label mb-10"
+            for="volumeMode"
+          >
+            {{ t('harvester.storage.cdiSettings.volumeModeAccessModes.volumeMode') }}
+          </label>
+          <label
+            class="col span-9 value text-label mb-10"
+            for="accessModes"
+          >
+            {{ t('harvester.storage.cdiSettings.volumeModeAccessModes.accessModes.label') }}
+          </label>
+        </div>
+      </div>
+    </template>
+
+    <template #columns="{ row }">
+      <div class="row">
+        <div class="col span-3">
+          <LabeledSelect
+            id="volumeMode"
+            v-model:value="row.value.volumeMode"
+            :mode="mode"
+            :options="volumeModeOptions"
+          />
+        </div>
+        <div
+          id="accessModes"
+          class="col span-9"
+        >
+          <Checkbox
+            v-for="opt in accessModeOptions"
+            :key="opt.value"
+            v-model:value="row.value.accessModes"
+            :value-when-true="opt.value"
+            :label="opt.label"
+            type="checkbox"
+            :mode="mode"
+          />
+        </div>
+      </div>
+    </template>
+  </ArrayList>
+
+  <LabeledSelect
+    v-model:value="cdiSettings.volumeSnapshotClass"
+    class="select mt-20 mb-20"
+    :label="t('harvester.storage.cdiSettings.volumeSnapshotClass.label')"
+    :tooltip="t('harvester.storage.cdiSettings.volumeSnapshotClass.tooltip')"
+    :mode="mode"
+    :options="volumeSnapshotClassOptions"
+  />
+
+  <LabeledSelect
+    v-model:value="cdiSettings.cloneStrategy"
+    class="select mb-20"
+    :label="t('harvester.storage.cdiSettings.cloneStrategy.label')"
+    :tooltip="t('harvester.storage.cdiSettings.cloneStrategy.tooltip')"
+    :mode="mode"
+    :options="cloneStrategyOptions"
+  />
+
+  <LabeledInput
+    v-model:value="cdiSettings.filesystemOverhead"
+    class="select mb-20"
+    :label="t('harvester.storage.cdiSettings.fileSystemOverhead.label')"
+    :tooltip="t('harvester.storage.cdiSettings.fileSystemOverhead.tooltip')"
+    :mode="mode"
+    type="number"
+    :min="0"
+    :max="1"
+    :step="0.001"
+    :placeholder="t('harvester.storage.cdiSettings.fileSystemOverhead.placeholder')"
+    :status="isFilesystemOverheadValid ? null : 'error'"
+    @input="validateFilesystemOverhead"
+  />
+</template>
+
+<style scoped lang="scss">
+  .column-headers .row.custom {
+    max-width: calc(100% - 75px);
+  }
+
+  .row {
+    align-items: center;
+  }
+
+  .select {
+    max-width: 480px;
+  }
+</style>

pkg/harvester/edit/harvesterhci.io.storage/index.vue

@@ -1,4 +1,5 @@
 <script>
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -6,11 +7,9 @@ import ArrayList from '@shell/components/form/ArrayList';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { RadioGroup } from '@components/Form/Radio';
-
+import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading';
-
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
 import {
@@ -22,6 +21,7 @@ import { CSI_DRIVER } from '../../types';
 import Tags from '../../components/DiskTags';
 import { DATA_ENGINE_V1, DATA_ENGINE_V2 } from '../../models/harvester/persistentvolumeclaim';
 import { LVM_DRIVER } from '../../models/harvester/storage.k8s.io.storageclass';
+import CDISettings from './CDISettings';
 
 export const LVM_TOPOLOGY_LABEL = 'topology.lvm.csi/node';
 
@@ -45,6 +45,7 @@ export default {
     Tabbed,
     Loading,
     Tags,
+    CDISettings,
   },
 
   mixins: [CreateEditView],
@@ -117,6 +118,7 @@ export default {
         key:    '',
         values: [],
       },
+      cdiSettings: {},
     };
   },
 
@@ -124,10 +126,10 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
     const hash = {
-      namespaces:           this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE }),
+      namespaces:    this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE }),
-      storages:             this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+      storages:      this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
-      longhornNodes:        this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
+      longhornNodes: this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
-      csiDrivers:           this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER })
+      csiDrivers:    this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }),
     };
 
     if (this.value.longhornV2LVMSupport) {
@@ -197,6 +199,14 @@ export default {
 
       return v2DataEngine.value === 'true' ? DATA_ENGINE_V2 : DATA_ENGINE_V1;
     },
+
+    isCDISettingsFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('cdiSettings');
+    },
+
+    shouldShowCDISettingsTab() {
+      return this.isCDISettingsFeatureEnabled && this.provisioner !== `${ LONGHORN_DRIVER }_${ DATA_ENGINE_V1 }`;
+    },
   },
 
   watch: {
@@ -249,6 +259,10 @@ export default {
       });
 
       this.formatAllowedTopoloties();
+
+      if (this.shouldShowCDISettingsTab) {
+        this.formatCDISettings();
+      }
     },
 
     formatAllowedTopoloties() {
@@ -270,6 +284,42 @@ export default {
       if (matchLabelExpressions.length > 0) {
         this.value.allowedTopologies = [{ matchLabelExpressions: [...matchLabelExpressions, ...lvmMatchExpression] }];
       }
+    },
+    formatCDISettings() {
+      const annotations = this.value.metadata.annotations || {};
+      const volumeModeAccessModes = {};
+
+      this.cdiSettings.volumeModeAccessModes.forEach((setting) => {
+        if (setting.volumeMode && Array.isArray(setting.accessModes) && setting.accessModes.length > 0) {
+          volumeModeAccessModes[setting.volumeMode] = setting.accessModes;
+        }
+      });
+
+      if (Object.keys(volumeModeAccessModes).length > 0) {
+        annotations[HCI_ANNOTATIONS.VOLUME_MODE_ACCESS_MODES] = JSON.stringify(volumeModeAccessModes);
+      } else {
+        delete annotations[HCI_ANNOTATIONS.VOLUME_MODE_ACCESS_MODES];
+      }
+
+      if (this.cdiSettings.volumeSnapshotClass) {
+        annotations[HCI_ANNOTATIONS.VOLUME_SNAPSHOT_CLASS] = this.cdiSettings.volumeSnapshotClass;
+      } else {
+        delete annotations[HCI_ANNOTATIONS.VOLUME_SNAPSHOT_CLASS];
+      }
+
+      if (this.cdiSettings.cloneStrategy) {
+        annotations[HCI_ANNOTATIONS.CLONE_STRATEGY] = this.cdiSettings.cloneStrategy;
+      } else {
+        delete annotations[HCI_ANNOTATIONS.CLONE_STRATEGY];
+      }
+
+      if (this.cdiSettings.filesystemOverhead) {
+        annotations[HCI_ANNOTATIONS.FILESYSTEM_OVERHEAD] = this.cdiSettings.filesystemOverhead;
+      } else {
+        delete annotations[HCI_ANNOTATIONS.FILESYSTEM_OVERHEAD];
+      }
+
+      this.value.metadata.annotations = annotations;
     }
   }
 };
@@ -404,6 +454,19 @@ export default {
           </template>
         </ArrayList>
       </Tab>
+      <Tab
+        v-if="shouldShowCDISettingsTab"
+        name="cdiSettings"
+        :label="t('harvester.storage.cdiSettings.label')"
+        :weight="-2"
+      >
+        <CDISettings
+          v-model:cdi-settings="cdiSettings"
+          :value="value"
+          :mode="mode"
+          :provisioner="value.provisioner"
+        />
+      </Tab>
     </Tabbed>
   </CruResource>
 </template>

pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue

@@ -17,6 +17,7 @@ import { VM_IMAGE_FILE_FORMAT } from '../validators/vm-image';
 import { OS } from '../mixins/harvester-vm';
 import { HCI } from '../types';
 import { LVM_DRIVER } from '../models/harvester/storage.k8s.io.storageclass';
+import { isInternalStorageClass } from '../utils/storage-class';
 
 const ENCRYPT = 'encrypt';
 const DECRYPT = 'decrypt';
@@ -168,11 +169,18 @@ export default {
 
       return filteredStorages
         .map((s) => {
-          const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+          let label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+          let disabled = false;
+
+          if (isInternalStorageClass(s.name)) {
+            label += ` (${ this.t('harvester.storage.internal.label') })`;
+            disabled = true;
+          }
 
           return {
             label,
             value: s.name,
+            disabled
           };
         }) || [];
     },

pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue

@@ -6,6 +6,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { set } from '@shell/utils/object';
 import { Banner } from '@components/Banner';
 import KeyValue from '@shell/components/form/KeyValue';
 import NodeScheduling from '@shell/components/form/NodeScheduling';
@@ -22,6 +23,7 @@ import Reserved from './kubevirt.io.virtualmachine/VirtualMachineReserved';
 import Volume from './kubevirt.io.virtualmachine/VirtualMachineVolume';
 import Network from './kubevirt.io.virtualmachine/VirtualMachineNetwork';
 import CpuMemory from './kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+import CpuModel from './kubevirt.io.virtualmachine/VirtualMachineCpuModel';
 import CloudConfig from './kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
 import SSHKey from './kubevirt.io.virtualmachine/VirtualMachineSSHKey';
 
@@ -38,6 +40,7 @@ export default {
     Network,
     Checkbox,
     CpuMemory,
+    CpuModel,
     CruResource,
     CloudConfig,
     LabeledSelect,
@@ -70,12 +73,12 @@ export default {
 
     return {
       templateId,
-      templateValue:    null,
+      templateValue:     null,
-      templateSpec:     null,
+      templateSpec:      null,
-      versionName:      '',
+      versionName:       '',
-      description:      '',
+      description:       '',
-      defaultVersion:   null,
+      defaultVersion:    null,
-      isDefaultVersion: false,
+      isDefaultVersion:  false,
     };
   },
 
@@ -154,6 +157,18 @@ export default {
   },
 
   methods: {
+    updateCpuModel(value) {
+      if (!this.spec?.template?.spec?.domain?.cpu) {
+        set(this.spec, 'template.spec.domain.cpu', {});
+      }
+
+      if (value && value !== '') {
+        set(this.spec.template.spec.domain.cpu, 'model', value);
+      } else {
+        delete this.spec.template.spec.domain.cpu.model;
+      }
+    },
+
     async saveVMT(buttonCb) {
       this.parseVM();
 
@@ -257,8 +272,12 @@ export default {
         :label="t('harvester.vmTemplate.tabs.basics')"
       >
         <CpuMemory
+          class="mb-20"
           :cpu="cpu"
           :memory="memory"
+          :max-cpu="maxCpu"
+          :max-memory="maxMemory"
+          :enable-hot-plug="cpuMemoryHotplugEnabled"
           :disabled="isConfig"
           @updateCpuMemory="updateCpuMemory"
         />
@@ -432,6 +451,17 @@ export default {
             />
           </div>
         </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <CpuModel
+              :value="spec.template.spec.domain.cpu?.model || ''"
+              :mode="mode"
+              @update:value="updateCpuModel"
+            />
+          </div>
+        </div>
+
         <div class="row mb-20">
           <a
             v-if="showAdvanced"

pkg/harvester/edit/harvesterhci.io.volume.vue

@@ -7,6 +7,7 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Conditions from '@shell/components/form/Conditions';
 import { Banner } from '@components/Banner';
 import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
@@ -23,6 +24,7 @@ import { LVM_DRIVER } from '../models/harvester/storage.k8s.io.storageclass';
 import { DATA_ENGINE_V2 } from '../models/harvester/persistentvolumeclaim';
 import { GIBIBYTE } from '../utils/unit';
 import { VOLUME_MODE } from '@pkg/harvester/config/types';
+import { isInternalStorageClass } from '../utils/storage-class';
 
 export default {
   name: 'HarvesterVolume',
@@ -39,6 +41,7 @@ export default {
     LabeledSelect,
     LabeledInput,
     NameNsDescription,
+    Conditions
   },
 
   mixins: [CreateEditView],
@@ -206,11 +209,18 @@ export default {
 
     storageClassOptions() {
       return this.storageClasses.filter((s) => !s.parameters?.backingImage).map((s) => {
-        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        let label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        let disabled = false;
+
+        if (isInternalStorageClass(s.name)) {
+          label += ` (${ this.t('harvester.storage.internal.label') })`;
+          disabled = true;
+        }
 
         return {
           label,
           value: s.name,
+          disabled
         };
       }) || [];
     },
@@ -259,7 +269,19 @@ export default {
 
     rebuildStatus() {
       return this.value.longhornEngine?.status?.rebuildStatus;
-    }
+    },
+
+    isLHV2VolExpansionFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('lhV2VolExpansion');
+    },
+
+    isResizeDisabled() {
+      return (
+        !this.isLHV2VolExpansionFeatureEnabled &&
+      this.value?.isLonghornV2 &&
+      this.isEdit
+      );
+    },
   },
 
   watch: {
@@ -304,6 +326,10 @@ export default {
         return ['ReadWriteMany'];
       }
 
+      if (this.value?.spec?.accessModes && this.value?.spec?.accessModes?.length > 0) {
+        return this.value.spec.accessModes;
+      }
+
       const storageClassName = this.value.spec.storageClassName;
       const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
 
@@ -451,7 +477,7 @@ export default {
           :output-modifier="true"
           :increment="1024"
           :mode="mode"
-          :disabled="value?.isLonghornV2 && isEdit"
+          :disabled="isResizeDisabled"
           required
           class="mb-20"
           :suffix="GIBIBYTE"
@@ -459,7 +485,7 @@ export default {
         />
 
         <Banner
-          v-if="value?.isLonghornV2 && isEdit"
+          v-if="isResizeDisabled"
           color="warning"
         >
           <span>{{ t('harvester.volume.longhorn.disableResize') }}</span>
@@ -569,6 +595,15 @@ export default {
           :label="t('nameNsDescription.name.label')"
         />
       </Tab>
+      <Tab
+        v-if="!isCreate"
+        name="conditions"
+        :label="t('harvester.volume.tabs.conditions')"
+        class="bordered-table"
+        :mode="mode"
+      >
+        <Conditions :value="value" />
+      </Tab>
     </ResourceTabs>
   </CruResource>
 </template>

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

@@ -0,0 +1,196 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { Banner } from '@components/Banner';
+import InfoBox from '@shell/components/InfoBox';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  name: 'AccessControlList',
+
+  emits: ['update:value'],
+
+  components: {
+    Banner, InfoBox, LabeledSelect, LabeledInput
+  },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      return {
+        action:      row.action || '',
+        direction:   row.direction || '',
+        priority:    row.priority || 0,
+        match:       row.match || '',
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    actionOptions() {
+      return [
+        { label: 'Allow', value: 'allow' },
+        { label: 'Drop', value: 'drop' },
+        { label: 'Pass', value: 'pass' },
+        { label: 'Reject', value: 'reject' },
+        { label: 'Allow-related', value: 'allow-related' },
+        { label: 'Allow-stateless', value: 'allow-stateless' },
+      ];
+    },
+    directionOptions() {
+      return [
+        { label: 'To-lport', value: 'to-lport' },
+        { label: 'From-lport', value: 'from-lport' },
+      ];
+    }
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 100);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        action:      '',
+        direction:   '',
+        priority:  this.rows.length,
+        match:      '',
+      });
+      this.queueUpdate();
+    },
+
+    removeRule(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if (this.isView) {
+        return;
+      }
+
+      this.$emit('update:value', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="rows.length > 0"
+      color="info"
+    >
+      <t
+        k="harvester.subnet.acl.banner"
+        :raw="true"
+      />
+    </Banner>
+    <div
+      v-for="(row, idx) in rows"
+      :key="idx"
+    >
+      <InfoBox class="box">
+        <button
+          type="button"
+          class="role-link btn btn-sm removeBtn"
+          :disabled="isView"
+          @click="removeRule(idx)"
+        >
+          <i class="icon icon-x" />
+        </button>
+        <div class="row">
+          <div class="col span-4">
+            <LabeledSelect
+              v-model:value="row.action"
+              :mode="mode"
+              class="mt-5 ml-5"
+              :options="actionOptions"
+              :required="true"
+              :label="t('harvester.subnet.acl.action.label')"
+              :placeholder="t('harvester.subnet.acl.action.placeholder')"
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-4">
+            <LabeledSelect
+              v-model:value="row.direction"
+              :mode="mode"
+              :options="directionOptions"
+              class="mt-5"
+              :required="true"
+              :label="t('harvester.subnet.acl.direction.label')"
+              :placeholder="t('harvester.subnet.acl.direction.placeholder')"
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-3">
+            <LabeledInput
+              v-model:value.number="row.priority"
+              type="number"
+              class="mb-20 mt-5"
+              :max="32767"
+              :min="0"
+              :mode="mode"
+              required
+              label-key="harvester.subnet.acl.priority.label"
+              @update:value="update"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-11">
+            <LabeledInput
+              v-model:value="row.match"
+              class="mb-5 ml-5"
+              :mode="mode"
+              required
+              :placeholder="t('harvester.subnet.acl.match.placeholder')"
+              label-key="harvester.subnet.acl.match.label"
+              @update:value="update"
+            />
+          </div>
+        </div>
+      </InfoBox>
+    </div>
+    <button
+      type="button"
+      class="btn role-tertiary add"
+      :disabled="isView"
+      @click="add()"
+    >
+      <t k="harvester.subnet.acl.addRule" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .box {
+    position: relative;
+  }
+  .removeBtn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 0px;
+  }
+</style>

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

@@ -0,0 +1,399 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Tab from '@shell/components/Tabbed/Tab';
+import { NETWORK_ATTACHMENT } from '@shell/config/types';
+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 } from '@shell/utils/object';
+import ArrayList from '@shell/components/form/ArrayList';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../types';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index';
+import { Banner } from '@components/Banner';
+import AccessControlList from './AccessControlList';
+
+export default {
+  name: 'EditSubnet',
+
+  emits: ['update:value'],
+
+  components: {
+    Banner,
+    CruResource,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    Tab,
+    RadioGroup,
+    ArrayList,
+    ResourceTabs,
+    Loading,
+    AccessControlList
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  created() {
+    const vpc = this.$route.query.vpc || '';
+    const enableDHCP = this.value?.spec?.enableDHCP || false;
+
+    set(this.value.spec, 'enableDHCP', enableDHCP);
+    set(this.value, 'spec', this.value.spec || {
+      cidrBlock:  '',
+      protocol:   NETWORK_PROTOCOL.IPv4,
+      provider:   '',
+      vpc,
+      gatewayIP:  '',
+      excludeIps: [],
+      private:    false,
+      enableDHCP,
+      acls:       []
+    });
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      vpc: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VPC }),
+      nad: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+    };
+
+    await allHash(hash);
+  },
+
+  computed: {
+    showAllowSubnets() {
+      return this.value?.spec?.private === true;
+    },
+
+    doneLocationOverride() {
+      return this.value.doneOverride;
+    },
+
+    allowSubnetTooltip() {
+      return this.t('harvester.subnet.allowSubnet.tooltip', null, true);
+    },
+
+    excludeIPsTooltip() {
+      return this.t('harvester.subnet.excludeIPs.tooltip', null, true);
+    },
+
+    protocolOptions() {
+      return Object.values(NETWORK_PROTOCOL);
+    },
+    provider: {
+      get() {
+        const raw = this.value.spec.provider;
+
+        if (!raw) {
+          return '';
+        }
+        const vmNet = raw.split('.')[0] || '';
+        const ns = raw.split('.')[1] || '';
+
+        return `${ ns }/${ vmNet }`;
+      },
+
+      set(value) {
+        const ns = value.split('/')[0] || '';
+        const vmNet = value.split('/')[1] || '';
+        const provider = `${ vmNet }.${ ns }.ovn`;
+
+        set(this.value, 'spec.provider', provider);
+      }
+    },
+
+    providerOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vmNets = this.$store.getters[`${ inStore }/all`](NETWORK_ATTACHMENT) || [];
+
+      return vmNets.filter((net) => net.vlanType === NETWORK_TYPE.OVERLAY).map((n) => ({
+        label: n.id,
+        value: n.id,
+      }));
+    },
+
+    vpcOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vpcs = this.$store.getters[`${ inStore }/all`](HCI.VPC) || [];
+
+      return vpcs.map((n) => ({
+        label: n.id,
+        value: n.id,
+      }));
+    }
+  },
+
+  watch: {
+    'value.spec.enableDHCP': {
+      handler(newValue) {
+        if (newValue === false) {
+          this.value.spec.dhcpV4Options = '';
+          this.value.spec.dhcpV6Options = '';
+        }
+      },
+    }
+  },
+  methods: {
+    async saveSubnet(buttonCb) {
+      const errors = [];
+      const name = this.value?.metadata?.name;
+      const hasEmptyAcls = this.value?.spec?.acls?.some((acl) => !acl.match || !acl.action || acl.priority === undefined || acl.priority === null);
+
+      try {
+        if (!name) {
+          errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+        } else if (!this.value?.spec?.cidrBlock) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.subnet.cidrBlock.label') }, true));
+        } else if (!this.value?.spec?.provider) {
+          errors.push(this.t('validation.required', { key: this.t('harvester.subnet.provider.label') }, true));
+        } else if (this.value.spec.excludeIps.includes('')) {
+          errors.push(this.t('harvester.validation.subnet.excludeIps'));
+        } else if (hasEmptyAcls) {
+          errors.push(this.t('harvester.validation.subnet.aclEmptyError'));
+        }
+
+        if (errors.length > 0) {
+          buttonCb(false);
+          this.errors = errors;
+
+          return false;
+        }
+        await this.value.save();
+        buttonCb(true);
+        this.done();
+      } catch (e) {
+        this.errors = [e];
+        buttonCb(false);
+      }
+    },
+  },
+};
+
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+    :errors="errors"
+    @finish="saveSubnet"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+    <ResourceTabs
+      class="mt-15"
+      :need-events="false"
+      :need-related="false"
+      :mode="mode"
+      :side-tabs="true"
+    >
+      <Tab
+        name="Basic"
+        :label="t('generic.basic')"
+        :weight="-1"
+        class="bordered-table"
+      >
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.cidrBlock"
+              class="mb-20"
+              required
+              :placeholder="t('harvester.subnet.cidrBlock.placeholder')"
+              :label="t('harvester.subnet.cidrBlock.label')"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.protocol"
+              :label="t('harvester.subnet.protocol.label')"
+              :options="protocolOptions"
+              required
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="provider"
+              :label="t('harvester.subnet.provider.label')"
+              :options="providerOptions"
+              :tooltip="t('harvester.subnet.provider.tooltip')"
+              required
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.vpc"
+              :label="t('harvester.subnet.vpc.label')"
+              :options="vpcOptions"
+              required
+              :disabled="true"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.gateway"
+              class="mb-20"
+              :placeholder="t('harvester.subnet.gateway.placeholder')"
+              :label="t('harvester.subnet.gateway.label')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="value.spec.enableDHCP"
+              name="enabled"
+              :options="[true, false]"
+              :label="t('harvester.subnet.dhcp.label')"
+              :labels="[t('generic.enabled'), t('generic.disabled')]"
+              :mode="mode"
+              :tooltip="t('harvester.subnet.dhcp.tooltip')"
+            />
+            <LabeledInput
+              v-if="value.spec.enableDHCP && value.spec.protocol === 'IPv4'"
+              v-model:value="value.spec.dhcpV4Options"
+              class="mb-20 mt-20"
+              :placeholder="t('harvester.subnet.dhcp.placeholder')"
+              :label="t('harvester.subnet.dhcp.v4Options')"
+              :mode="mode"
+            />
+            <LabeledInput
+              v-if="value.spec.enableDHCP && value.spec.protocol === 'IPv6'"
+              v-model:value="value.spec.dhcpV6Options"
+              :placeholder="t('harvester.subnet.dhcp.placeholder')"
+              class="mb-20 mt-20"
+              :label="t('harvester.subnet.dhcp.v6Options')"
+              :mode="mode"
+            />
+            <Banner
+              v-if="value.spec.enableDHCP"
+              color="info"
+              class="dhcpOption-banner"
+            >
+              <t
+                k="harvester.subnet.dhcp.dhcpOptionBanner"
+                :raw="true"
+              />
+            </Banner>
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="value.spec.private"
+              name="enabled"
+              :options="[true, false]"
+              :label="t('harvester.subnet.private.label')"
+              :labels="[t('generic.enabled'), t('generic.disabled')]"
+              :mode="mode"
+              tooltip-key="harvester.subnet.private.tooltip"
+            />
+          </div>
+        </div>
+        <ArrayList
+          v-if="showAllowSubnets"
+          v-model:value="value.spec.allowSubnets"
+          :show-header="true"
+          class="mt-20"
+          :mode="mode"
+          :add-label="t('harvester.subnet.allowSubnet.addSubnet')"
+        >
+          <template #column-headers>
+            <div class="box">
+              <h3 class="key">
+                {{ t('harvester.subnet.allowSubnet.label') }}
+                <i
+                  v-clean-tooltip="{content: allowSubnetTooltip, triggers: ['hover', 'touch', 'focus'] }"
+                  v-stripped-aria-label="allowSubnetTooltip"
+                  class="icon icon-info"
+                  tabindex="0"
+                />
+              </h3>
+            </div>
+          </template>
+          <template #columns="scope">
+            <div class="key">
+              <input
+                v-model="scope.row.value"
+                :placeholder="t('harvester.subnet.allowSubnet.placeholder')"
+              />
+            </div>
+          </template>
+        </ArrayList>
+        <ArrayList
+          v-model:value="value.spec.excludeIps"
+          :show-header="true"
+          class="mt-20"
+          :mode="mode"
+          :add-label="t('harvester.setting.storageNetwork.exclude.addIp')"
+        >
+          <template #column-headers>
+            <div class="box">
+              <h3 class="key">
+                {{ t('harvester.setting.storageNetwork.exclude.label') }}
+                <i
+                  v-clean-tooltip="{content: excludeIPsTooltip, triggers: ['hover', 'touch', 'focus'] }"
+                  v-stripped-aria-label="excludeIPsTooltip"
+                  class="icon icon-info"
+                  tabindex="0"
+                />
+              </h3>
+            </div>
+          </template>
+          <template #columns="scope">
+            <div class="key">
+              <input
+                v-model="scope.row.value"
+                :placeholder="t('harvester.subnet.excludeIPs.placeholder')"
+              />
+            </div>
+          </template>
+        </ArrayList>
+      </Tab>
+      <Tab
+        name="ACL"
+        :label="t('harvester.subnet.acl.label')"
+        :weight="-2"
+        class="bordered-table"
+      >
+        <AccessControlList
+          v-model:value="value.spec.acls"
+          :mode="mode"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+  .dhcpOption-banner {
+    width: max-content;
+  }
+</style>

pkg/harvester/edit/kubeovn.io.vpc/StaticRoutes.vue

@@ -0,0 +1,180 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { Banner } from '@components/Banner';
+import { DOC } from '../../config/doc-links';
+import { docLink } from '../../utils/feature-flags';
+
+export default {
+  name: 'StaticRoutes',
+
+  emits: ['update:value'],
+
+  components: { Banner },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      return {
+        cidr:      row.cidr || '',
+        nextHopIP: row.nextHopIP || '',
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+    nextHopIPTooltip() {
+      return this.t('harvester.vpc.staticRoutes.nextHopIP.tooltip');
+    },
+
+    vpcPeeringExamplesLink() {
+      const version = this.$store.getters['harvester-common/getServerVersion']();
+
+      return docLink(DOC.VPC_CONFIGURATION_EXAMPLES, version);
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 100);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        cidr:      '',
+        nextHopIP: '',
+      });
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if (this.isView) {
+        return;
+      }
+
+      this.$emit('update:value', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner color="info">
+      <t
+        k="harvester.vpc.vpcPeerings.infoBanner"
+        :raw="true"
+        :url="vpcPeeringExamplesLink"
+      />
+    </Banner>
+    <div
+      v-if="rows.length"
+      class="static-route-row"
+    >
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <div class="pool-headers cidr">
+          <span class="pool-cidr">
+            <t k="harvester.vpc.staticRoutes.cidr.label" />
+          </span>
+          <span class="pool-nextHopIP">
+            <t k="harvester.vpc.staticRoutes.nextHopIP.label" />
+            <i
+              v-clean-tooltip="{content: nextHopIPTooltip, triggers: ['hover', 'touch', 'focus'] }"
+              v-stripped-aria-label="nextHopIPTooltip"
+              class="icon icon-info"
+              tabindex="0"
+            />
+          </span>
+        </div>
+        <div class="pool-row cidr">
+          <div class="pool-cidr">
+            <span v-if="isView">
+              {{ row.cidr }}
+            </span>
+            <input
+              v-else
+              v-model="row.cidr"
+              type="text"
+              :placeholder="t('harvester.vpc.staticRoutes.cidr.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <div class="pool-nextHopIP">
+            <span v-if="isView">
+              {{ row.nextHopIP }}
+            </span>
+            <input
+              v-else
+              v-model="row.nextHopIP"
+              type="text"
+              :placeholder="t('harvester.vpc.staticRoutes.nextHopIP.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <button
+            v-if="showRemove"
+            type="button"
+            class="btn role-link pl-0"
+            @click="remove(idx)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      v-if="showAdd"
+      type="button"
+      class="btn role-tertiary add"
+      @click="add()"
+    >
+      <t k="generic.add" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers, .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.cidr {
+      grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
+    }
+  }
+
+</style>

pkg/harvester/edit/kubeovn.io.vpc/VpcPeerings.vue

@@ -0,0 +1,187 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { HCI } from '../../types';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'VpcPeerings',
+
+  emits: ['update:value'],
+
+  components: { LabeledSelect },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    vpc: {
+      type:    Object,
+      default: () => ({}),
+    },
+  },
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: HCI.VPC });
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      return {
+        localConnectIP:      row.localConnectIP || '',
+        remoteVpc:      row.remoteVpc || '',
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    remoteVpcOptions() {
+      const allVpcs = this.$store.getters['harvester/all'](HCI.VPC) || [];
+
+      // filter self vpc if editing
+      const vpcs = this.isEdit ? allVpcs.filter((v) => v.id !== this.vpc.id) : allVpcs;
+
+      return vpcs.map((n) => ({
+        label: n.id,
+        value: n.id,
+      }));
+    },
+    localConnectIPTooltip() {
+      return this.t('harvester.vpc.vpcPeerings.localConnectIP.tooltip');
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 100);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        localConnectIP:  '',
+        remoteVpc:      '',
+      });
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if (this.isView) {
+        return;
+      }
+      this.$emit('update:value', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="rows.length"
+      class="static-route-row"
+    >
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <div class="pool-headers localConnectIP">
+          <span class="pool-localConnectIP">
+            <t k="harvester.vpc.vpcPeerings.localConnectIP.label" />
+            <i
+              v-clean-tooltip="{content: localConnectIPTooltip, triggers: ['hover', 'touch', 'focus'] }"
+              v-stripped-aria-label="localConnectPTooltip"
+              class="icon icon-info"
+              tabindex="0"
+            />
+          </span>
+          <span class="pool-remoteVpc">
+            <t k="harvester.vpc.vpcPeerings.remoteVpc.label" />
+          </span>
+        </div>
+        <div class="pool-row localConnectIP">
+          <div class="pool-localConnectIP">
+            <span v-if="isView">
+              {{ row.localConnectIP }}
+            </span>
+            <input
+              v-else
+              v-model="row.localConnectIP"
+              type="text"
+              :placeholder="t('harvester.vpc.vpcPeerings.localConnectIP.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <div class="pool-remoteVpc">
+            <span v-if="isView">
+              {{ row.remoteVpc }}
+            </span>
+            <LabeledSelect
+              v-model:value="row.remoteVpc"
+              :options="remoteVpcOptions"
+              :mode="mode"
+              @update:value="queueUpdate"
+            />
+          </div>
+          <button
+            v-if="showRemove"
+            type="button"
+            class="btn role-link pl-0"
+            @click="remove(idx)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      v-if="showAdd"
+      type="button"
+      class="btn role-tertiary add"
+      @click="add()"
+    >
+      <t k="generic.add" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers, .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.localConnectIP {
+      grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
+    }
+  }
+</style>

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

@@ -0,0 +1,120 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Tab from '@shell/components/Tabbed/Tab';
+import Loading from '@shell/components/Loading';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index';
+import StaticRoutes from './StaticRoutes';
+import VpcPeerings from './VpcPeerings';
+import { set } from '@shell/utils/object';
+
+export default {
+  name: 'EditVPC',
+
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    Tab,
+    StaticRoutes,
+    ResourceTabs,
+    Loading,
+    VpcPeerings
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  data() {
+    set(this.value, 'spec', this.value.spec || {
+      staticRoutes: [],
+      vpcPeerings:  [],
+    });
+
+    return { staticRoutes: [] };
+  },
+
+  methods: {
+    async saveVpc(buttonCb) {
+      const errors = [];
+
+      try {
+        const name = this.value?.metadata?.name;
+
+        if (!name) {
+          errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+        }
+
+        if (errors.length > 0) {
+          buttonCb(false);
+          this.errors = errors;
+
+          return false;
+        }
+        await this.value.save();
+        buttonCb(true);
+        this.done();
+      } catch (e) {
+        this.errors = [e];
+        buttonCb(false);
+      }
+    },
+  },
+};
+
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+    :errors="errors"
+    @finish="saveVpc"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+    <ResourceTabs
+      class="mt-15"
+      :mode="mode"
+      :side-tabs="true"
+    >
+      <Tab
+        name="staticRoutes"
+        :label="t('harvester.vpc.staticRoutes.label')"
+        :weight="-1"
+        class="bordered-table"
+      >
+        <StaticRoutes
+          v-model:value="value.spec.staticRoutes"
+          class="col span-12"
+          :mode="mode"
+        />
+      </Tab>
+      <Tab
+        name="vpcPeerings"
+        :label="t('harvester.vpc.vpcPeerings.label')"
+        :weight="-2"
+        class="bordered-table"
+      >
+        <VpcPeerings
+          v-model:value="value.spec.vpcPeerings"
+          class="col span-12"
+          :mode="mode"
+          :vpc="value"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory.vue

@@ -2,23 +2,44 @@
 import UnitInput from '@shell/components/form/UnitInput';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
 import { GIBIBYTE } from '../../utils/unit';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _VIEW } from '@shell/config/query-params';
+import { HCI } from '../../types';
+import { allHash } from '@shell/utils/promise';
+import { HCI_SETTING } from '../../config/settings';
+
+const DEFAULT_HOT_PLUG_TIMES = 4;
 
 export default {
   name: 'HarvesterEditCpuMemory',
 
   emits: ['updateCpuMemory'],
 
-  components: { UnitInput, InputOrDisplay },
+  components: {
+    UnitInput, InputOrDisplay, Checkbox
+  },
 
   props: {
     cpu: {
       type:    Number,
       default: null
     },
+    maxCpu: {
+      type:    Number,
+      default: null
+    },
     memory: {
       type:    String,
       default: null
     },
+    maxMemory: {
+      type:    String,
+      default: null
+    },
+    enableHotPlug: {
+      type:    Boolean,
+      default: false
+    },
     mode: {
       type:    String,
       default: 'create',
@@ -29,21 +50,59 @@ export default {
     }
   },
 
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const res = await allHash({ settings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }) });
+
+    this.settings = res.settings || [];
+  },
+
   data() {
     return {
       GIBIBYTE,
-      localCpu:    this.cpu,
+      localCpu:           this.cpu,
-      localMemory: this.memory
+      localMemory:        this.memory,
+      maxLocalCpu:        this.maxCpu,
+      maxLocalMemory:     this.maxMemory,
+      localEnableHotPlug: this.enableHotPlug,
+      settings:           []
     };
   },
 
   computed: {
-    cupDisplay() {
+    isView() {
+      return this.mode === _VIEW;
+    },
+    cpuDisplay() {
       return `${ this.localCpu } C`;
     },
 
+    maxCpuDisplay() {
+      return `${ this.maxLocalCpu } C`;
+    },
+
     memoryDisplay() {
       return `${ this.localMemory }`;
+    },
+
+    maxMemoryDisplay() {
+      return `${ this.maxLocalMemory }`;
+    },
+
+    cpuMemoryHotplugTooltip() {
+      return this.t('harvester.virtualMachine.hotplug.tooltip', { hotPlugTimes: this.maxHotplugRatio });
+    },
+
+    isCPUMemoryHotPlugFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('cpuMemoryHotplug');
+    },
+
+    maxHotplugRatio() {
+      const maxHotPlugRatioSetting = this.settings.find((s) => s.id === HCI_SETTING.MAX_HOTPLUG_RATIO);
+      const maxPlugRatio = maxHotPlugRatioSetting?.value ? parseInt(maxHotPlugRatioSetting.value, 10) : DEFAULT_HOT_PLUG_TIMES;
+
+      return maxPlugRatio;
     }
   },
 
@@ -55,71 +114,161 @@ export default {
       if (neu && !neu.includes('null')) {
         this.localMemory = neu;
       }
-    }
+    },
+    maxCpu(neu) {
+      this.maxLocalCpu = neu;
+    },
+    maxMemory(neu) {
+      if (neu && !neu.includes('null')) {
+        this.maxLocalMemory = neu;
+      }
+    },
+    enableHotPlug(neu) {
+      this.localEnableHotPlug = neu;
+    },
+
   },
 
   methods: {
-    change() {
+    hotPlugChanged(neu) {
-      let memory = '';
+      // If hot plug is enabled, we need to update the maxCpu and maxMemory values
-
+      if (neu) {
-      if (String(this.localMemory).includes('Gi')) {
+        this.maxLocalCpu = this.localCpu ? this.localCpu * this.maxHotplugRatio : null;
-        memory = this.localMemory;
+        this.maxLocalMemory = this.localMemory ? `${ parseInt(this.localMemory, 10) * this.maxHotplugRatio }${ GIBIBYTE }` : null;
+        this.$emit('updateCpuMemory', this.localCpu, this.localMemory, this.maxLocalCpu, this.maxLocalMemory, neu);
       } else {
-        memory = `${ this.localMemory }${ GIBIBYTE }`;
+        this.$emit('updateCpuMemory', this.localCpu, this.localMemory, '', null, neu);
       }
-      if (memory.includes('null')) {
-        memory = null;
-      }
-      this.$emit('updateCpuMemory', this.localCpu, memory);
     },
-
+    changeMemory() {
+      if (this.localEnableHotPlug) {
+        this.maxLocalMemory = this.localMemory ? `${ parseInt(this.localMemory, 10) * this.maxHotplugRatio }${ GIBIBYTE }` : null;
+      }
+      this.$emit('updateCpuMemory', this.localCpu, this.localMemory, this.maxLocalCpu, this.maxLocalMemory, this.localEnableHotPlug);
+    },
+    changeCPU() {
+      if (this.localEnableHotPlug) {
+        this.maxLocalCpu = this.localCpu ? this.localCpu * this.maxHotplugRatio : null;
+      }
+      this.$emit('updateCpuMemory', this.localCpu, this.localMemory, this.maxLocalCpu, this.maxLocalMemory, this.localEnableHotPlug);
+    },
+    changeMaxCPUMemory() {
+      this.$emit('updateCpuMemory', this.localCpu, this.localMemory, this.maxLocalCpu, this.maxLocalMemory, this.localEnableHotPlug);
+    },
   }
 };
 </script>
 
 <template>
-  <div class="row">
+  <div>
-    <div class="col span-6 mb-10">
+    <div class="row">
-      <InputOrDisplay
+      <div class="col span-6 mb-10">
-        name="CPU"
+        <InputOrDisplay
-        :value="cupDisplay"
+          name="CPU"
-        :mode="mode"
+          :value="cpuDisplay"
-      >
-        <UnitInput
-          v-model:value="localCpu"
-          label="CPU"
-          suffix="C"
-          :delay="0"
-          required
-          :disabled="disabled"
           :mode="mode"
-          class="mb-20"
+          class="mb-10"
-          @update:value="change"
+        >
-        />
+          <UnitInput
-      </InputOrDisplay>
+            v-model:value="localCpu"
+            label="CPU"
+            suffix="C"
+            :delay="0"
+            required
+            :disabled="disabled"
+            :mode="mode"
+            class="mb-20"
+            @update:value="changeCPU"
+          />
+        </InputOrDisplay>
+      </div>
+      <div class="col span-6 mb-10">
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.input.memory')"
+          :value="memoryDisplay"
+          :mode="mode"
+        >
+          <UnitInput
+            v-model:value="localMemory"
+            :label="t('harvester.virtualMachine.input.memory')"
+            :mode="mode"
+            :input-exponent="3"
+            :delay="0"
+            :increment="1024"
+            :output-modifier="true"
+            :disabled="disabled"
+            required
+            :suffix="GIBIBYTE"
+            class="mb-20"
+            @update:value="changeMemory"
+          />
+        </InputOrDisplay>
+      </div>
     </div>
-
+    <div
-    <div class="col span-6 mb-10">
+      v-if="isCPUMemoryHotPlugFeatureEnabled"
-      <InputOrDisplay
+      class="row"
-        :name="t('harvester.virtualMachine.input.memory')"
+    >
-        :value="memoryDisplay"
+      <Checkbox
-        :mode="mode"
+        v-model:value="localEnableHotPlug"
-      >
+        class="check"
-        <UnitInput
+        type="checkbox"
-          v-model:value="localMemory"
+        :label="t('harvester.virtualMachine.hotplug.title')"
-          :label="t('harvester.virtualMachine.input.memory')"
+        :disabled="isView"
+        @update:value="hotPlugChanged"
+      />
+      <i
+        v-clean-tooltip="{content: cpuMemoryHotplugTooltip, triggers: ['hover', 'touch', 'focus'] }"
+        v-stripped-aria-label="cpuMemoryHotplugTooltip"
+        class="icon icon-info"
+        tabindex="0"
+      />
+    </div>
+    <div
+      v-if="localEnableHotPlug && isCPUMemoryHotPlugFeatureEnabled"
+      class="row"
+    >
+      <div class="col span-6 mb-10">
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.input.maxCpu')"
+          :value="maxCpuDisplay"
           :mode="mode"
-          :input-exponent="3"
+          class="mt-20"
-          :delay="0"
+        >
-          :increment="1024"
+          <UnitInput
-          :output-modifier="true"
+            v-model:value="maxLocalCpu"
-          :disabled="disabled"
+            :label="t('harvester.virtualMachine.input.maxCpu')"
-          required
+            suffix="C"
-          :suffix="GIBIBYTE"
+            :delay="0"
-          class="mb-20"
+            :disabled="disabled"
-          @update:value="change"
+            :mode="mode"
-        />
+            class="mt-20"
-      </InputOrDisplay>
+            @update:value="changeMaxCPUMemory"
+          />
+        </InputOrDisplay>
+      </div>
+      <div class="col span-6 mb-10">
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.input.maxMemory')"
+          :value="maxMemoryDisplay"
+          :mode="mode"
+          class="mt-20"
+        >
+          <UnitInput
+            v-model:value="maxLocalMemory"
+            :label="t('harvester.virtualMachine.input.maxMemory')"
+            :mode="mode"
+            :input-exponent="3"
+            :delay="0"
+            :increment="1024"
+            :output-modifier="true"
+            :disabled="disabled"
+            :suffix="GIBIBYTE"
+            class="mt-20"
+            @update:value="changeMaxCPUMemory"
+          />
+        </InputOrDisplay>
+      </div>
     </div>
   </div>
 </template>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuModel.vue

@@ -0,0 +1,133 @@
+<script>
+import YAML from 'yaml';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { CONFIG_MAP } from '@shell/config/types';
+import { Banner } from '@components/Banner';
+
+const CPU_MODEL_CONFIG_MAP_ID = 'harvester-system/node-cpu-model-configuration';
+
+export default {
+  name: 'HarvesterCpuModel',
+
+  emits: ['update:value'],
+
+  components: {
+    LabeledSelect,
+    Banner
+  },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    try {
+      await this.$store.dispatch(`${ inStore }/find`, { type: CONFIG_MAP, id: CPU_MODEL_CONFIG_MAP_ID });
+      this.fetchError = null;
+    } catch (e) {
+      this.fetchError = this.t('harvester.virtualMachine.cpuModel.fetchError', { error: e.message || e });
+    }
+  },
+
+  data() {
+    return { fetchError: null };
+  },
+
+  computed: {
+    localValue: {
+      get() {
+        return this.value ?? '';
+      },
+      set(val) {
+        this.$emit('update:value', val ?? '');
+      }
+    },
+
+    cpuModelConfigMap() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/byId`](
+        CONFIG_MAP,
+        CPU_MODEL_CONFIG_MAP_ID
+      );
+    },
+
+    cpuModelOptions() {
+      if (!this.cpuModelConfigMap?.data?.cpuModels) {
+        return [{ label: this.t('generic.default'), value: '' }];
+      }
+
+      let cpuModelsData;
+
+      try {
+        cpuModelsData = YAML.parse(this.cpuModelConfigMap.data?.cpuModels || '');
+      } catch (e) {
+        return [{ label: this.t('generic.default'), value: '' }];
+      }
+
+      const options = [];
+
+      options.push({
+        label: this.t('generic.default'),
+        value: ''
+      });
+
+      // Add global models (host-model, host-passthrough)
+      const globalModels = cpuModelsData.globalModels || [];
+
+      globalModels.forEach((modelName) => {
+        options.push({
+          label: modelName,
+          value: modelName
+        });
+      });
+
+      // Add regular models with node count
+      const modelEntries = Object.entries(cpuModelsData.models || {});
+
+      // Sort models alphabetically for consistent display
+      modelEntries.sort((a, b) => a[0].localeCompare(b[0]));
+
+      modelEntries.forEach(([modelName, modelInfo]) => {
+        const readyCount = modelInfo.readyCount || 0;
+        const label = this.t('harvester.virtualMachine.cpuModel.optionLabel', { modelName, count: readyCount });
+
+        options.push({
+          label,
+          value: modelName
+        });
+      });
+
+      return options;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="fetchError"
+      color="error"
+      class="mb-20"
+    >
+      {{ fetchError }}
+    </Banner>
+    <LabeledSelect
+      v-model:value="localValue"
+      :label="t('harvester.virtualMachine.cpuModel.label')"
+      :options="cpuModelOptions"
+      :mode="mode"
+      :disabled="!!fetchError"
+    />
+  </div>
+</template>

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

@@ -1,6 +1,5 @@
 <script>
 import InfoBox from '@shell/components/InfoBox';
-
 import { NETWORK_ATTACHMENT } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { clone } from '@shell/utils/object';
@@ -14,6 +13,13 @@ export default {
   components: { InfoBox, Base },
 
   props: {
+    vm: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
     mode: {
       type:    String,
       default: 'create'
@@ -32,10 +38,15 @@ export default {
     }
   },
 
+  async fetch() {
+    await this.fetchHotunplugData();
+  },
+
   data() {
     return {
-      rows:    this.addKeyId(clone(this.value)),
+      nameIdx:            1,
-      nameIdx: 1
+      rows:               this.addKeyId(clone(this.value)),
+      hotunpluggableNics: new Set(),
     };
   },
 
@@ -64,15 +75,57 @@ export default {
 
       return out;
     },
+
+    canCheckHotunplug() {
+      return !!this.vm?.actions?.findHotunpluggableNics;
+    },
+
+    vmState() {
+      return this.vm?.stateDisplay;
+    }
   },
 
   watch: {
     value(neu) {
-      this.rows = neu;
+      this.rows = this.mergeHotplugData(clone(neu));
     },
+
+    vmState(newState, oldState) {
+      if (newState !== oldState) {
+        this.fetchHotunplugData();
+      }
+    }
   },
 
   methods: {
+    async fetchHotunplugData() {
+      if (!this.canCheckHotunplug) {
+        this.rows = this.mergeHotplugData(clone(this.value));
+
+        return;
+      }
+
+      try {
+        const resp = await this.vm.doAction('findHotunpluggableNics');
+
+        this.hotunpluggableNics = new Set(resp?.interfaces || []);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch hot-unpluggable NICs:', e);
+        this.hotunpluggableNics = new Set();
+      }
+
+      this.rows = this.mergeHotplugData(clone(this.value));
+    },
+
+    mergeHotplugData(networks) {
+      return (networks || []).map((network) => ({
+        ...network,
+        isHotunpluggable: this.hotunpluggableNics.has(network.name),
+        rowKeyId:         network.rowKeyId || randomStr(10)
+      }));
+    },
+
     add(type) {
       const name = this.generateName();
 
@@ -118,7 +171,11 @@ export default {
 
     update() {
       this.$emit('update:value', this.rows);
-    }
+    },
+
+    unplugNIC(network) {
+      this.vm.unplugNIC(network.name);
+    },
   }
 };
 </script>
@@ -129,17 +186,28 @@ export default {
       v-for="(row, i) in rows"
       :key="i"
     >
-      <button
+      <div class="box-title mb-10">
-        v-if="!isView"
+        <h3>
-        type="button"
+          {{ t('harvester.virtualMachine.network.title') }}
-        class="role-link remove-vol"
+        </h3>
-        @click="remove(row)"
+        <button
-      >
+          v-if="!isView"
-        <i class="icon icon-x" />
+          type="button"
-      </button>
+          class="role-link btn btn-sm remove"
-
+          @click="remove(row)"
-      <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
+        >
-
+          <i class="icon icon-x" />
+        </button>
+        <button
+          v-if="vm.hotplugNicFeatureEnabled && row.isHotunpluggable && isView"
+          type="button"
+          class="role-link btn btn-sm remove"
+          :disabled="!canCheckHotunplug"
+          @click="unplugNIC(row)"
+        >
+          {{ t('harvester.virtualMachine.hotUnplug.detachNIC.actionLabel') }}
+        </button>
+      </div>
       <Base
         v-model:value="rows[i]"
         :rows="rows"
@@ -162,16 +230,13 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.infoBox{
+.box-title{
-  position: relative;
+  display: flex;
-}
+  justify-content: space-between;
+  align-items: center;
 
-.remove-vol {
+  h3 {
-  position: absolute;
+    margin-bottom: 0;
-  top: 10px;
+  }
-  right: 16px;
-  padding:0px;
-  max-height: 28px;
-  min-height: 28px;
 }
 </style>

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

@@ -31,6 +31,7 @@ export default {
     const _hash = {
       pciclaims: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PCI_CLAIM }),
       sriovs:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOV }),
+      srigpuovs:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOVGPU_DEVICE }),
     };
 
     await allHash(_hash);
@@ -106,19 +107,32 @@ export default {
   },
 
   computed: {
-    parentSriovOptions() {
+    allSriovs() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const allSriovs = this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
 
-      return allSriovs.map((sriov) => {
+      return this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
-        return sriov.id;
+    },
-      });
+    allSriovGPUs() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](HCI.SR_IOVGPU_DEVICE) || [];
+    },
+    parentSriovOptions() {
+      return this.allSriovs.map((sriov) => sriov.id);
+    },
+    parentSriovGPUOptions() {
+      return this.allSriovGPUs.map((sriovgpu) => sriovgpu.id);
     },
     parentSriovLabel() {
       return HCI_ANNOTATIONS.PARENT_SRIOV;
-    }
+    },
+    parentSriovGPULabel() {
+      return HCI_ANNOTATIONS.PARENT_SRIOV_GPU;
+    },
+    vGPUAsPCIDeviceEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+    },
   },
-
   methods: {
     enableGroup(rows = []) {
       const row = rows[0];
@@ -206,6 +220,15 @@ export default {
         :rows="rows"
         @change-rows="changeRows"
       />
+      <FilterBySriov
+        v-if="vGPUAsPCIDeviceEnabled"
+        ref="filterByParentSRIOVGPU"
+        :parent-sriov-options="parentSriovGPUOptions"
+        :parent-sriov-label="parentSriovGPULabel"
+        :label="t('harvester.sriov.parentSriovGPU')"
+        :rows="rows"
+        @change-rows="changeRows"
+      />
     </template>
   </ResourceTable>
 </template>

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

@@ -8,6 +8,7 @@ import { set } from '@shell/utils/object';
 import { HCI } from '../../../types';
 import DeviceList from './DeviceList';
 import CompatibilityMatrix from '../CompatibilityMatrix';
+import MessageLink from '@shell/components/MessageLink';
 
 export default {
   name:       'VirtualMachinePCIDevices',
@@ -15,7 +16,8 @@ export default {
     LabeledSelect,
     DeviceList,
     CompatibilityMatrix,
-    Banner
+    Banner,
+    MessageLink
   },
   props: {
     mode: {
@@ -54,6 +56,11 @@ export default {
 
     const vmDevices = this.value?.domain?.devices?.hostDevices || [];
     const otherDevices = this.otherDevices(vmDevices).map(({ name }) => name);
+    const vmDeviceNames = vmDevices.map(({ name }) => name);
+
+    this.pciDevices.forEach((row) => {
+      row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
+    });
 
     vmDevices.forEach(({ name, deviceName }) => {
       const checkName = (deviceName || '').split('/')?.[1];
@@ -133,6 +140,13 @@ export default {
       return inUse;
     },
 
+    toVGpuDevicesPage() {
+      return {
+        name:   'harvester-c-cluster-resource',
+        params: { cluster: this.$store.getters['clusterId'], resource: HCI.VGPU_DEVICE },
+      };
+    },
+
     devicesByNode() {
       return this.enabledDevices?.reduce((acc, device) => {
         const nodeName = device.status?.nodeName;
@@ -227,7 +241,12 @@ export default {
       <div class="row">
         <div class="col span-12">
           <Banner color="info">
-            <t k="harvester.pci.howToUseDevice" />
+            <MessageLink
+              :to="toVGpuDevicesPage"
+              prefix-label="harvester.pci.howToUseDevice.prefix"
+              middle-label="harvester.pci.howToUseDevice.middle"
+              suffix-label="harvester.pci.howToUseDevice.suffix"
+            />
           </Banner>
           <Banner
             v-if="selectedDevices.length > 0"

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

@@ -48,6 +48,13 @@ export default {
       this[key] = res[key];
     }
 
+    const vmDevices = this.value?.domain?.devices?.hostDevices || [];
+    const vmDeviceNames = vmDevices.map(({ name }) => name);
+
+    this.devices.forEach((row) => {
+      row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
+    });
+
     this.selectedDevices = (this.value?.domain?.devices?.hostDevices || [])
       .map(({ name }) => name)
       .filter((name) => this.enabledDevices.find((device) => device?.metadata?.name === name));

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

@@ -46,6 +46,13 @@ export default {
       this[key] = res[key];
     }
 
+    const vmDevices = this.value?.domain?.devices?.gpus || [];
+    const vmDeviceNames = vmDevices.map(({ name }) => name);
+
+    this.devices.forEach((row) => {
+      row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
+    });
+
     const vGpus = this.vm.isOff ? [
       ...(this.value?.domain?.devices?.gpus || []).map(({ name }) => name),
     ] : [

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

@@ -13,10 +13,12 @@ import { ucFirst, randomStr } from '@shell/utils/string';
 import { removeObject } from '@shell/utils/array';
 import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
-import { SOURCE_TYPE } from '../../../config/harvester-map';
+import { VOLUME_HOTPLUG_ACTION, SOURCE_TYPE } from '../../../config/harvester-map';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../config/harvester';
 import { HCI } from '../../../types';
 import { VOLUME_MODE } from '@pkg/harvester/config/types';
+import { OFF } from '../../../models/kubevirt.io.virtualmachine';
+import { EMPTY_IMAGE } from '../../../utils/vm';
 
 export default {
   emits: ['update:value'],
@@ -116,6 +118,10 @@ export default {
       return this.mode === _CREATE;
     },
 
+    isHotplugCdRomFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('hotplugCdRom');
+    },
+
     defaultStorageClass() {
       const defaultStorage = this.$store.getters['harvester/all'](STORAGE_CLASS).find((sc) => sc.isDefault);
 
@@ -135,13 +141,17 @@ export default {
     pvcs() {
       return this.$store.getters['harvester/all'](PVC) || [];
     },
+
+    isLHV2VolExpansionFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('lhV2VolExpansion');
+    },
   },
 
   watch: {
     value: {
       handler(neu) {
         const rows = clone(neu).map((V) => {
-          if (!this.isCreate && V.source !== SOURCE_TYPE.CONTAINER && !V.newCreateId) {
+          if (!this.isCreate && V.source !== SOURCE_TYPE.CONTAINER && !V.newCreateId && V.image !== EMPTY_IMAGE) {
             V.to = {
               name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`,
               params: {
@@ -212,8 +222,48 @@ export default {
       }
     },
 
-    unplugVolume(volume) {
+    canDoVolumeHotplugAction(volume) {
-      this.vm.unplugVolume(volume.name);
+      if (!this.isHotplugCdRomFeatureEnabled && volume.type === 'cd-rom') {
+        return false;
+      }
+
+      if (volume.hotpluggable) {
+        return true;
+      }
+
+      return volume.type === 'cd-rom' && volume.bus === 'sata' && volume.image === EMPTY_IMAGE;
+    },
+
+    getVolumeHotplugAction(volume) {
+      if (volume.type === 'cd-rom' && volume.bus === 'sata') {
+        if (volume.image === EMPTY_IMAGE) {
+          return VOLUME_HOTPLUG_ACTION.INSERT_CDROM_IMAGE;
+        }
+
+        return VOLUME_HOTPLUG_ACTION.EJECT_CDROM_IMAGE;
+      }
+
+      return VOLUME_HOTPLUG_ACTION.DETACH_DISK;
+    },
+
+    getVolumeHotplugActionLabel(volume) {
+      const labels = {
+        [VOLUME_HOTPLUG_ACTION.DETACH_DISK]:        'harvester.virtualMachine.hotUnplug.detachVolume.actionLabel',
+        [VOLUME_HOTPLUG_ACTION.INSERT_CDROM_IMAGE]: 'harvester.modal.insertCdRomVolume.actionLabel',
+        [VOLUME_HOTPLUG_ACTION.EJECT_CDROM_IMAGE]:  'harvester.virtualMachine.hotUnplug.ejectCdRomVolume.actionLabel',
+      };
+
+      return labels[this.getVolumeHotplugAction(volume)];
+    },
+
+    hotplugVolume(volume) {
+      const calls = {
+        [VOLUME_HOTPLUG_ACTION.DETACH_DISK]:        () => this.vm.unplugVolume(volume.name),
+        [VOLUME_HOTPLUG_ACTION.INSERT_CDROM_IMAGE]: () => this.vm.insertCdRomVolume(volume.name),
+        [VOLUME_HOTPLUG_ACTION.EJECT_CDROM_IMAGE]:  () => this.vm.ejectCdRomVolume(volume.name),
+      };
+
+      return calls[this.getVolumeHotplugAction(volume)]();
     },
 
     componentFor(type) {
@@ -266,7 +316,17 @@ export default {
 
     isLonghornV2(volume) {
       return volume?.pvc?.isLonghornV2 || volume?.pvc?.storageClass?.isLonghornV2;
-    }
+    },
+
+    isResizeDisabled(volume) {
+      if (this.isLHV2VolExpansionFeatureEnabled) return false;
+      if (this.isCreate || volume.newCreateId) return false;
+
+      const isStopped = this.vm.stateDisplay === OFF;
+      const isLonghornV2 = this.isLonghornV2(volume);
+
+      return !isStopped || isLonghornV2;
+    },
   },
 };
 </script>
@@ -288,55 +348,57 @@ export default {
         v-for="(volume, i) in rows"
         :key="volume.id"
       >
-        <InfoBox class="box">
+        <InfoBox>
-          <button
+          <div class="box-title mb-10">
-            v-if="!isView"
+            <h3>
-            type="button"
+              <span
-            class="role-link btn btn-sm remove"
+                v-if="volume.to && isVirtualType"
-            @click="removeVolume(volume)"
+                class="title"
-          >
-            <i class="icon icon-x" />
-          </button>
-          <button
-            v-if="volume.hotpluggable && isView"
-            type="button"
-            class="role-link btn remove"
-            @click="unplugVolume(volume)"
-          >
-            {{ t('harvester.virtualMachine.unplug.detachVolume') }}
-          </button>
-          <h3>
-            <span
-              v-if="volume.to && isVirtualType"
-              class="title"
-            >
-              <router-link :to="volume.to">
-                {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
-              </router-link>
-
-              <BadgeStateFormatter
-                v-if="volume.pvc"
-                class="ml-10 state"
-                :arbitrary="true"
-                :row="volume.pvc"
-                :value="volume.pvc.state"
-              />
-              <a
-                v-if="dev && !!volume.pvc && !!volume.pvc.resourceExternalLink"
-                v-clean-tooltip="t(volume.pvc.resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
-                class="ml-5 resource-external"
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-                :href="volume.pvc.resourceExternalLink.url"
               >
-                <i class="icon icon-external-link" />
+                <router-link :to="volume.to">
-              </a>
+                  {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
-            </span>
+                </router-link>
 
-            <span v-else>
+                <BadgeStateFormatter
-              {{ headerFor(volume.source, !!volume?.volumeBackups) }}
+                  v-if="volume.pvc"
-            </span>
+                  class="ml-10 state"
-          </h3>
+                  :arbitrary="true"
+                  :row="volume.pvc"
+                  :value="volume.pvc.state"
+                />
+                <a
+                  v-if="dev && !!volume.pvc && !!volume.pvc.resourceExternalLink"
+                  v-clean-tooltip="t(volume.pvc.resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
+                  class="ml-5 resource-external"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  :href="volume.pvc.resourceExternalLink.url"
+                >
+                  <i class="icon icon-external-link" />
+                </a>
+              </span>
+
+              <span v-else>
+                {{ headerFor(volume.source, !!volume?.volumeBackups) }}
+              </span>
+            </h3>
+            <button
+              v-if="!isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              @click="removeVolume(volume)"
+            >
+              <i class="icon icon-x" />
+            </button>
+            <button
+              v-if="canDoVolumeHotplugAction(volume) && isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              @click="hotplugVolume(volume)"
+            >
+              {{ t(getVolumeHotplugActionLabel(volume)) }}
+            </button>
+          </div>
           <div>
             <component
               :is="componentFor(volume.source)"
@@ -347,6 +409,7 @@ export default {
               :is-edit="isEdit"
               :is-view="isView"
               :is-virtual-type="isVirtualType"
+              :is-resize-disabled="isResizeDisabled(rows[i])"
               :mode="mode"
               :idx="i"
               :validate-required="validateRequired"
@@ -394,7 +457,7 @@ export default {
               :label="ucFirst(value.volumeBackups.error.message)"
             />
             <Banner
-              v-if="isLonghornV2(volume) && !isView"
+              v-if="!isLHV2VolExpansionFeatureEnabled && isLonghornV2(volume) && !isView"
               color="warning"
               :label="t('harvester.volume.longhorn.disableResize')"
             />
@@ -479,25 +542,24 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .box {
+  .box-title {
-    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      margin-bottom: 0;
+    }
   }
 
   .title {
     display: flex;
+    align-items: center;
 
     .state {
       font-size: 16px;
     }
   }
-
-  .remove {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 0px;
-  }
-
   .bootOrder {
     display: flex;
     align-items: center;

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

@@ -99,7 +99,6 @@ export default {
         this.allPVCs
           .filter( (pvc) => {
             let isAvailable = true;
-            let isBeingUsed = false;
 
             this.rows.forEach( (O) => {
               if (O.volumeName === pvc.metadata.name) {
@@ -111,17 +110,16 @@ export default {
               return false;
             }
 
+            // already used as image volume
+            if (this.idx > 0 && pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
+              return false;
+            }
+
             if (pvc.isGoldenImageVolume) {
               return false;
             }
 
-            if (pvc.attachVM && isAvailable && pvc.attachVM?.id === this.vm?.id && this.isEdit) {
+            return isAvailable && pvc.isAvailable;
-              isBeingUsed = false;
-            } else if (pvc.attachVM) {
-              isBeingUsed = true;
-            }
-
-            return isAvailable && !isBeingUsed && pvc.isAvailable;
           })
           .map((pvc) => {
             return {

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

@@ -14,6 +14,7 @@ import { _VIEW } from '@shell/config/query-params';
 import LabelValue from '@shell/components/LabelValue';
 import { ucFirst } from '@shell/utils/string';
 import { GIBIBYTE } from '../../../../utils/unit';
+import { EMPTY_IMAGE } from '../../../../utils/vm';
 
 export default {
   name: 'HarvesterEditVMImage',
@@ -64,7 +65,12 @@ export default {
     isVirtualType: {
       type:    Boolean,
       default: true
-    }
+    },
+
+    isResizeDisabled: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -91,8 +97,20 @@ export default {
       return this.mode === _VIEW;
     },
 
+    isExistingCdrom() {
+      return this.value.type === 'cd-rom' && !this.value.newCreateId;
+    },
+
+    isEmptyImage() {
+      return this.value.image === EMPTY_IMAGE;
+    },
+
+    isHotplugCdRomFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('hotplugCdRom');
+    },
+
     imagesOption() {
-      return this.images
+      const images = this.images
         .filter((image) => {
           if (!image.isReady) return false;
 
@@ -105,9 +123,23 @@ export default {
         })
         .sort((a, b) => (a.creationTimestamp > b.creationTimestamp ? -1 : 1))
         .map((image) => ({
-          label: this.imageOptionLabel(image),
+          label:    this.imageOptionLabel(image),
-          value: image.id,
+          value:    image.id,
+          disabled: image.isImportedImage
         }));
+
+      const options = [];
+
+      if (this.isHotplugCdRomFeatureEnabled) {
+        options.push({
+          label:    this.t('harvester.virtualMachine.volume.emptyImage'),
+          value:    EMPTY_IMAGE,
+          disabled: false
+        });
+      }
+      options.push(...images);
+
+      return options;
     },
 
     imageName() {
@@ -134,10 +166,6 @@ export default {
       return this.$store.getters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
     },
 
-    isLonghornV2() {
-      return this.value.pvc?.isLonghornV2 || this.value.pvc?.storageClass?.isLonghornV2;
-    },
-
     selectedImage() {
       return this.$store.getters['harvester/all'](HCI.IMAGE)?.find( (I) => this.value.image === I.id);
     },
@@ -177,6 +205,7 @@ export default {
     'value.type'(neu) {
       if (neu === 'cd-rom') {
         this.value['bus'] = 'sata';
+        this.updateHotpluggable();
         this.update();
       }
     },
@@ -219,12 +248,48 @@ export default {
 
       return label;
     },
+
     update() {
       this.value.hasDiskError = this.showDiskTooSmallError;
       this.$emit('update');
     },
 
+    updateHotpluggable() {
+      if (this.value.type !== 'cd-rom') {
+        this.value['hotpluggable'] = false;
+      } else {
+        this.value['hotpluggable'] = (this.value.bus === 'sata');
+      }
+    },
+
+    onTypeChange() {
+      if (this.value.image === EMPTY_IMAGE && this.value.type !== 'cd-rom') {
+        this.value['image'] = '';
+      }
+
+      this.updateHotpluggable();
+      this.update();
+    },
+
+    onBusChange() {
+      if (this.value.image === EMPTY_IMAGE && this.value.bus !== 'sata') {
+        this.value['image'] = '';
+      }
+
+      this.updateHotpluggable();
+      this.update();
+    },
+
     onImageChange() {
+      if (this.value.image === EMPTY_IMAGE) {
+        this.value['type'] = 'cd-rom';
+        this.value['bus'] = 'sata';
+        this.value['size'] = `0${ GIBIBYTE }`;
+        this.update();
+
+        return;
+      }
+
       const imageResource = this.$store.getters['harvester/all'](HCI.IMAGE)?.find( (I) => this.value.image === I.id);
       const isIsoImage = /iso$/i.test(imageResource?.imageSuffix);
       const imageSize = Math.max(imageResource?.status?.size, imageResource?.status?.virtualSize);
@@ -237,6 +302,8 @@ export default {
         this.value['bus'] = 'virtio';
       }
 
+      this.updateHotpluggable();
+
       if (imageSize) {
         let imageSizeGiB = Math.ceil(imageSize / 1024 / 1024 / 1024);
 
@@ -254,6 +321,10 @@ export default {
     },
 
     checkImageExists(imageId) {
+      if (imageId === EMPTY_IMAGE) {
+        return;
+      }
+
       if (!!imageId && this.imagesOption.length > 0 && !findBy(this.imagesOption, 'value', imageId)) {
         this.$store.dispatch('growl/error', {
           title:   this.$store.getters['i18n/t']('harvester.vmTemplate.tips.notExistImage.title', { name: imageId }),
@@ -281,6 +352,7 @@ export default {
         >
           <LabeledInput
             v-model:value="value.name"
+            :disabled="!isCreate && isExistingCdrom"
             :label="t('harvester.fields.name')"
             required
             :mode="mode"
@@ -300,10 +372,11 @@ export default {
         >
           <LabeledSelect
             v-model:value="value.type"
+            :disabled="!isCreate && isExistingCdrom"
             :label="t('harvester.fields.type')"
             :options="VOLUME_TYPE"
             :mode="mode"
-            @update:value="update"
+            @update:value="onTypeChange"
           />
         </InputOrDisplay>
       </div>
@@ -321,7 +394,7 @@ export default {
         >
           <LabeledSelect
             v-model:value="value.image"
-            :disabled="idx === 0 && !isCreate && !value.newCreateId && isVirtualType"
+            :disabled="(idx === 0 || isExistingCdrom) && (!isCreate && !value.newCreateId && isVirtualType)"
             :label="t('harvester.fields.image')"
             :options="imagesOption"
             :mode="mode"
@@ -349,7 +422,7 @@ export default {
             :label="t('harvester.fields.size')"
             :mode="mode"
             :required="validateRequired"
-            :disable="isLonghornV2"
+            :disabled="isResizeDisabled || isEmptyImage || (!isCreate && isExistingCdrom)"
             :suffix="GIBIBYTE"
             @update:value="update"
           />
@@ -372,7 +445,8 @@ export default {
             :label="t('harvester.virtualMachine.volume.bus')"
             :mode="mode"
             :options="InterfaceOption"
-            @update:value="update"
+            :disabled="!isCreate && isExistingCdrom"
+            @update:value="onBusChange"
           />
         </InputOrDisplay>
       </div>

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

@@ -13,6 +13,7 @@ import { ucFirst } from '@shell/utils/string';
 import { LVM_DRIVER } from '../../../../models/harvester/storage.k8s.io.storageclass';
 import { DATA_ENGINE_V2 } from '../../../../models/harvester/persistentvolumeclaim';
 import { GIBIBYTE } from '../../../../utils/unit';
+import { isInternalStorageClass } from '../../../../utils/storage-class';
 import { VOLUME_MODE } from '@pkg/harvester/config/types';
 
 export default {
@@ -55,7 +56,12 @@ export default {
     isVirtualType: {
       type:    Boolean,
       default: true
-    }
+    },
+
+    isResizeDisabled: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -118,19 +124,22 @@ export default {
 
     storageClassOptions() {
       return this.storageClasses.filter((s) => !s.parameters?.backingImage).map((s) => {
-        const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        let label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
+        let disabled = false;
+
+        if (isInternalStorageClass(s.name)) {
+          label += ` (${ this.t('harvester.storage.internal.label') })`;
+          disabled = true;
+        }
 
         return {
           label,
           value: s.name,
+          disabled
         };
       }) || [];
     },
 
-    isLonghornV2() {
-      return this.value.pvc?.isLonghornV2 || this.value.pvc?.storageClass?.isLonghornV2;
-    },
-
     isLonghornStorageClass() {
       const selectedSC = this.storageClasses.find((sc) => sc.name === this.value?.storageClassName) || {};
 
@@ -302,7 +311,7 @@ export default {
             :mode="mode"
             :required="validateRequired"
             :label="t('harvester.fields.size')"
-            :disabled="isLonghornV2"
+            :disabled="isResizeDisabled"
             :suffix="GIBIBYTE"
             @update:value="update"
           />

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

@@ -32,6 +32,7 @@ import PciDevices from './VirtualMachinePciDevices/index';
 import AccessCredentials from './VirtualMachineAccessCredentials';
 import CloudConfig from './VirtualMachineCloudConfig';
 import CpuMemory from './VirtualMachineCpuMemory';
+import CpuModel from './VirtualMachineCpuModel';
 import Network from './VirtualMachineNetwork';
 import Volume from './VirtualMachineVolume';
 import SSHKey from './VirtualMachineSSHKey';
@@ -57,6 +58,7 @@ export default {
     SSHKey,
     Network,
     CpuMemory,
+    CpuModel,
     CloudConfig,
     NodeScheduling,
     PodAffinity,
@@ -96,7 +98,6 @@ export default {
       templateVersionId: '',
       namePrefix:        '',
       isSingle:          true,
-      useTemplate:       false,
       isOpen:            false,
       hostname,
       isRestartImmediately,
@@ -210,6 +211,10 @@ export default {
 
       return false;
     },
+
+    vGPUAsPCIDeviceEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+    },
     usbPassthroughEnabled() {
       return this.$store.getters['harvester-common/getFeatureEnabled']('usbPassthrough');
     },
@@ -237,6 +242,9 @@ export default {
         }
         const versions = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_VERSION });
         const curVersion = versions.find( (V) => V.id === id);
+
+        if (!curVersion?.spec?.vm) return;
+
         const cloneVersionVM = clone(curVersion.spec.vm);
 
         delete cloneVersionVM.spec?.template?.spec?.accessCredentials;
@@ -244,7 +252,6 @@ export default {
         delete cloneVersionVM.spec?.template?.metadata?.annotations?.[HCI_ANNOTATIONS.DYNAMIC_SSHKEYS_USERS];
 
         const claimTemplate = parseVolumeClaimTemplates(cloneVersionVM);
-
         const deleteDataSource = claimTemplate.map((volume) => {
           if (volume?.spec?.dataSource) {
             delete volume.spec.dataSource;
@@ -253,12 +260,19 @@ export default {
           return volume;
         });
 
+        delete cloneVersionVM.metadata.annotations[HCI_ANNOTATIONS.MAC_ADDRESS];
         cloneVersionVM.metadata.annotations[HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE] = JSON.stringify(deleteDataSource);
 
-        // Update labels, instance labels and annotations
+        // Update instance labels, labels and annotations
-        this.value.metadata.labels = cloneVersionVM.metadata.labels;
+        this.value.spec.template.metadata.labels = cloneVersionVM.spec.template.metadata.labels || {};
-        this.value.spec.template.metadata.labels = cloneVersionVM.spec.template.metadata.labels;
+        this.value.metadata.labels = {
-        this.value.metadata.annotations = cloneVersionVM.metadata.annotations;
+          ...(curVersion.metadata?.labels || {}),
+          ...(cloneVersionVM.metadata?.labels || {})
+        };
+        this.value.metadata.annotations = {
+          ...(curVersion.metadata?.annotations || {}),
+          ...(cloneVersionVM.metadata?.annotations || {})
+        };
 
         this.getInitConfig({
           value: cloneVersionVM, existUserData: true, fromTemplate: true
@@ -330,6 +344,15 @@ export default {
     saveVM(buttonCb) {
       clear(this.errors);
 
+      this.validateCPUMemory();
+
+      // block create VM flow if has validation errors
+      if (this.errors.length) {
+        buttonCb(false);
+
+        return;
+      }
+
       if (this.isSingle) {
         this.saveSingle(buttonCb);
       } else {
@@ -337,6 +360,18 @@ export default {
       }
     },
 
+    validateCPUMemory() {
+      const { cpu, memory } = this;
+
+      if ((!cpu)) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.virtualMachine.input.cpu') }, true));
+      }
+
+      if ((!memory)) {
+        this.errors.push(this.t('validation.required', { key: this.t('harvester.virtualMachine.input.memory') }, true));
+      }
+    },
+
     async saveSingle(buttonCb) {
       this.parseVM();
       this.value.spec.template.spec.hostname = this.hostname ? this.hostname : this.value.metadata.name;
@@ -405,38 +440,44 @@ export default {
       }
     },
 
+    _compareDisksIgnoreStorage(disksA = [], disksB = []) {
+      if (disksA.length !== disksB.length) return false;
+
+      const sortedA = [...disksA].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
+      const sortedB = [...disksB].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
+
+      for (let i = 0; i < sortedA.length; i++) {
+        const cloneA = clone(sortedA[i]);
+        const cloneB = clone(sortedB[i]);
+
+        // remove the storage field before comparison
+        delete cloneA?.spec?.resources?.requests?.storage;
+        delete cloneB?.spec?.resources?.requests?.storage;
+
+        if (!isEqual(cloneA, cloneB)) return false;
+      }
+
+      return true;
+    },
+
+    _shouldPromptRestart(oldVM, newVM) {
+      const specChanged = !isEqual(oldVM?.spec, newVM?.spec);
+
+      // check if the disk defined in annotations has changed, ignoring storage size
+      const oldDisks = parseVolumeClaimTemplates(oldVM);
+      const newDisks = parseVolumeClaimTemplates(newVM);
+      const diskChanged = !this._compareDisksIgnoreStorage(oldDisks, newDisks);
+
+      return specChanged || diskChanged;
+    },
+
     restartVM() {
-      if (this.mode !== 'edit') {
+      if (this.mode !== 'edit' || !this.value.isRunning) return;
-        return;
-      }
-      if (!this.value.isRunning) {
-        return;
-      }
-      const cloneDeepNewVM = clone(this.value);
 
-      // new VM
+      const needsRestart = this._shouldPromptRestart(this.cloneVM, this.value);
-      delete cloneDeepNewVM?.metadata;
-      delete cloneDeepNewVM?.__clone;
 
-      // old VM
+      // if no restart is needed (either no changes or only size changed)
-      delete this.cloneVM?.metadata;
+      if (!needsRestart) return;
-      delete this.cloneVM?.__clone;
-
-      // add empty hostDevices to old VM as CRD does not have it.
-      const devicesObj = this.cloneVM?.spec?.template?.spec?.domain?.devices;
-
-      if (devicesObj && devicesObj.hostDevices === undefined) {
-        set(devicesObj, 'hostDevices', []);
-      }
-
-      const oldVM = JSON.parse(JSON.stringify(this.cloneVM));
-      const newVM = JSON.parse(JSON.stringify(cloneDeepNewVM));
-
-      // we won't show restart dialog in yaml page as we don't have a way to detect change in yaml editor.
-      // only check VM is changed in form page.
-      if (isEqual(oldVM, newVM)) {
-        return;
-      }
 
       return new Promise((resolve) => {
         this.isOpen = true;
@@ -455,6 +496,7 @@ export default {
       if (this.isSingle) {
         if (!this.value.spec.template.spec.hostname) {
           this.value.spec.template.spec['hostname'] = this.value.metadata.name;
+          this.spec.template.spec['hostname'] = this.value.metadata.name;
         }
       }
 
@@ -502,6 +544,18 @@ export default {
 
       return out;
     },
+
+    updateCpuModel(value) {
+      if (!this.spec?.template?.spec?.domain?.cpu) {
+        set(this.spec, 'template.spec.domain.cpu', {});
+      }
+
+      if (value && value !== '') {
+        set(this.spec.template.spec.domain.cpu, 'model', value);
+      } else {
+        delete this.spec.template.spec.domain.cpu.model;
+      }
+    },
   },
 };
 </script>
@@ -595,9 +649,13 @@ export default {
         :label="t('harvester.virtualMachine.detail.tabs.basics')"
       >
         <CpuMemory
+          class="mb-20"
           :cpu="cpu"
+          :max-cpu="maxCpu"
           :memory="memory"
+          :max-memory="maxMemory"
           :mode="mode"
+          :enable-hot-plug="cpuMemoryHotplugEnabled"
           @updateCpuMemory="updateCpuMemory"
         />
 
@@ -686,7 +744,7 @@ export default {
       </Tab>
 
       <Tab
-        v-if="enabledSriovgpu"
+        v-if="enabledSriovgpu && !vGPUAsPCIDeviceEnabled"
         :label="t('harvester.tab.vGpuDevices')"
         name="vGpuDevices"
         :weight="-6"
@@ -830,6 +888,16 @@ export default {
           </div>
         </div>
 
+        <div class="row mb-20">
+          <div class="col span-6">
+            <CpuModel
+              v-model:value="cpuModel"
+              :mode="mode"
+              @update:value="updateCpuModel"
+            />
+          </div>
+        </div>
+
         <div class="row mb-20">
           <a
             v-if="showAdvanced"
@@ -859,7 +927,10 @@ export default {
               />
             </div>
 
-            <div class="col span-6">
+            <div
+              v-if="!value.vmMachineTypeAutoFeatureEnabled"
+              class="col span-6"
+            >
               <LabeledSelect
                 v-model:value="machineType"
                 label-key="harvester.virtualMachine.input.MachineType"

pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/Priority.vue

@@ -39,6 +39,10 @@ export default {
       return this.mode === _VIEW;
     },
 
+    disableAdd() {
+      return this.isStandaloneHarvester && this.rows.some((row) => row.namespace === '*');
+    },
+
     showAdd() {
       return !this.isView;
     },
@@ -141,6 +145,7 @@ export default {
     >
       <button
         type="button"
+        :disabled="disableAdd"
         class="btn role-tertiary add"
         @click="add()"
       >

pkg/harvester/edit/loadbalancer.harvesterhci.io.ippool/PriorityRow.vue

@@ -66,17 +66,26 @@ export default {
     },
 
     namespaceOptions() {
-      const out = (this.filteredNamespaces || []).map((namespace) => {
+      const namespaces = this.filteredNamespaces;
-        return {
+      const selected = this.rows.map((r) => r?.namespace);
-          label: namespace.metadata.name,
+
-          value: namespace.id,
+      if (this.isStandaloneHarvester) {
-        };
+        return [
-      });
+          { label: this.t('generic.all'), value: '*' },
+          ...namespaces.map((ns) => ({
+            label:    ns.metadata.name,
+            value:    ns.id,
+            disabled: selected.includes(ns.id) && ns.id !== this.row.namespace
+          }))
+        ];
+      }
 
       return [{
         label: this.t('generic.all'),
         value: '*',
-      }, ...out];
+      },
+      ...namespaces.map((ns) => ({ label: ns.metadata.name, value: ns.id }))
+      ];
     },
 
     guestClusterOptions() {

pkg/harvester/edit/migration.harvesterhci.io.openstacksource.vue

@@ -0,0 +1,357 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { RadioGroup } from '@components/Form/Radio';
+import UnitInput from '@shell/components/form/UnitInput';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import { SECRET } from '@shell/config/types';
+import { randomStr } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'EditOpenstackSource',
+
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    Tabbed,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    RadioGroup,
+    UnitInput
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.allSecrets = await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+  },
+
+  data() {
+    if (!this.value.spec) this.value.spec = {};
+    if (!this.value.spec.credentials) this.value.spec.credentials = {};
+
+    const initialMode = this.value.spec.credentials.name ? 'existing' : 'new';
+
+    return {
+      allSecrets:      [],
+      authMode:        initialMode,
+
+      newUsername:     '',
+      newPassword:     '',
+      newProjectName:  '',
+      newDomainName:   '',
+      newCaCert:       '',
+
+      // Rules for fields that exist in the value object (Model)
+      fvFormRuleSets: [
+        { path: 'metadata.name', rules: ['nameRequired'] },
+        { path: 'spec.endpoint', rules: ['endpointRequired'] },
+        { path: 'spec.region', rules: ['regionRequired'] },
+      ],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    authModeOptions() {
+      return [
+        { label: this.t('harvester.addons.vmImport.fields.createSecret'), value: 'new' },
+        { label: this.t('harvester.addons.vmImport.fields.useSecret'), value: 'existing' }
+      ];
+    },
+
+    secretOptions() {
+      const currentNamespace = this.value.metadata.namespace || 'default';
+
+      return this.allSecrets
+        .filter((s) => s.metadata.namespace === currentNamespace)
+        .map((s) => ({
+          label: s.nameDisplay,
+          value: s.metadata.name
+        }));
+    },
+
+    // Define custom rules for the FormValidation mixin
+    fvExtraRules() {
+      return {
+        nameRequired:     (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
+        endpointRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.openstack.fields.endpoint') }) : undefined,
+        regionRequired:   (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.openstack.fields.region') }) : undefined,
+      };
+    },
+
+    // Combine mixin validation + conditional manual checks
+    isFormValid() {
+      // Check static fields via Mixin
+      if (!this.fvFormIsValid) {
+        return false;
+      }
+
+      // Check conditional fields
+      if (this.authMode === 'new') {
+        if (!this.newUsername || !this.newPassword) return false;
+        if (!this.newProjectName || !this.newDomainName) return false;
+      } else {
+        if (!this.value.spec.credentials.name) return false;
+      }
+
+      return true;
+    }
+  },
+
+  methods: {
+    usernameRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.username') }) : undefined;
+    },
+    passwordRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.password') }) : undefined;
+    },
+    projectRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.openstack.fields.projectName') }) : undefined;
+    },
+    domainRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.openstack.fields.domainName') }) : undefined;
+    },
+    secretRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.selectSecret') }) : undefined;
+    },
+
+    async saveSource(buttonCb) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      try {
+        if (this.authMode === 'new') {
+          const secretName = `${ this.value.metadata.name }-creds-${ randomStr(4).toLowerCase() }`;
+          const namespace = this.value.metadata.namespace || 'default';
+
+          const newSecret = await this.$store.dispatch(`${ inStore }/create`, {
+            type:     SECRET,
+            metadata: {
+              name: secretName,
+              namespace
+            }
+          });
+
+          newSecret['_type'] = 'Opaque';
+          newSecret['data'] = {
+            username:     btoa(this.newUsername),
+            password:     btoa(this.newPassword),
+            project_name: btoa(this.newProjectName),
+            domain_name:  btoa(this.newDomainName),
+            ca_cert:      this.newCaCert ? btoa(this.newCaCert) : undefined
+          };
+
+          await newSecret.save();
+
+          this.value.spec.credentials = {
+            name: secretName,
+            namespace
+          };
+        }
+
+        await this.save(buttonCb);
+      } catch (err) {
+        this.errors = [err];
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :validation-passed="isFormValid"
+    @finish="saveSource"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.addons.vmImport.titles.basic')"
+        :weight="3"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.endpoint"
+              :label="t('harvester.addons.vmImport.openstack.fields.endpoint')"
+              :placeholder="t('harvester.addons.vmImport.openstack.placeholders.endpoint')"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.endpoint')"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.region"
+              :label="t('harvester.addons.vmImport.openstack.fields.region')"
+              :placeholder="t('harvester.addons.vmImport.openstack.placeholders.region')"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.region')"
+              required
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="auth"
+        :label="t('harvester.addons.vmImport.titles.auth')"
+        :weight="2"
+      >
+        <div class="row mb-20">
+          <div class="col span-12">
+            <RadioGroup
+              v-model:value="authMode"
+              name="authMode"
+              :options="authModeOptions"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div v-if="authMode === 'new'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newUsername"
+                :label="t('harvester.addons.vmImport.fields.username')"
+                :mode="mode"
+                :rules="[usernameRule]"
+                required
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newPassword"
+                type="password"
+                :label="t('harvester.addons.vmImport.fields.password')"
+                :mode="mode"
+                :rules="[passwordRule]"
+                required
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newProjectName"
+                :label="t('harvester.addons.vmImport.openstack.fields.projectName')"
+                :placeholder="t('harvester.addons.vmImport.openstack.placeholders.projectName')"
+                :mode="mode"
+                :rules="[projectRule]"
+                required
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newDomainName"
+                :label="t('harvester.addons.vmImport.openstack.fields.domainName')"
+                :placeholder="t('harvester.addons.vmImport.openstack.placeholders.domainName')"
+                :mode="mode"
+                :rules="[domainRule]"
+                required
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="newCaCert"
+                type="multiline"
+                :label="t('harvester.addons.vmImport.fields.caCert')"
+                :placeholder="t('harvester.addons.vmImport.placeholders.caCert')"
+                :min-height="100"
+                :mode="mode"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="authMode === 'existing'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledSelect
+                v-model:value="value.spec.credentials.name"
+                :options="secretOptions"
+                :label="t('harvester.addons.vmImport.fields.selectSecret')"
+                :mode="mode"
+                :rules="[secretRule]"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.addons.vmImport.titles.advanced')"
+        :weight="1"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <UnitInput
+              v-model:value="value.spec.uploadImageRetryCount"
+              :label="t('harvester.addons.vmImport.openstack.fields.retryCount')"
+              :placeholder="t('harvester.addons.vmImport.openstack.placeholders.retryCount')"
+              suffix="Times"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <UnitInput
+              v-model:value="value.spec.uploadImageRetryDelay"
+              :label="t('harvester.addons.vmImport.openstack.fields.retryDelay')"
+              :placeholder="t('harvester.addons.vmImport.openstack.placeholders.retryDelay')"
+              suffix="Seconds"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>

pkg/harvester/edit/migration.harvesterhci.io.ovasource.vue

@@ -0,0 +1,322 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { RadioGroup } from '@components/Form/Radio';
+import UnitInput from '@shell/components/form/UnitInput';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import { SECRET } from '@shell/config/types';
+import { randomStr } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'EditOvaSource',
+
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    Tabbed,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    RadioGroup,
+    UnitInput
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.allSecrets = await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+  },
+
+  data() {
+    if (!this.value.spec) this.value.spec = {};
+
+    // Auth is optional for OVA (public URLs).
+    // If credentials.name exists -> Existing.
+    // If not -> None (default).
+    let initialMode = 'none';
+
+    if (this.value.spec.credentials?.name) {
+      initialMode = 'existing';
+    }
+
+    return {
+      allSecrets:      [],
+      authMode:        initialMode,
+
+      newUsername:     '',
+      newPassword:     '',
+      newCaCert:       '', // Key will be "ca.crt"
+
+      // Validation Rules for static fields
+      fvFormRuleSets: [
+        { path: 'metadata.name', rules: ['nameRequired'] },
+        { path: 'spec.url', rules: ['urlRequired'] },
+      ],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    authModeOptions() {
+      return [
+        { label: this.t('harvester.addons.vmImport.fields.none'), value: 'none' },
+        { label: this.t('harvester.addons.vmImport.fields.createSecret'), value: 'new' },
+        { label: this.t('harvester.addons.vmImport.fields.useSecret'), value: 'existing' }
+      ];
+    },
+
+    secretOptions() {
+      const currentNamespace = this.value.metadata.namespace || 'default';
+
+      return this.allSecrets
+        .filter((s) => s.metadata.namespace === currentNamespace)
+        .map((s) => ({
+          label: s.nameDisplay,
+          value: s.metadata.name
+        }));
+    },
+
+    // Define custom rules for the FormValidation mixin
+    fvExtraRules() {
+      return {
+        nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
+        urlRequired:  (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.ova.fields.url') }) : undefined,
+      };
+    },
+
+    isFormValid() {
+      if (!this.fvFormIsValid) {
+        return false;
+      }
+
+      if (this.authMode === 'new') {
+        // At least a username/password OR a CA cert to be provided.
+        // If the user selected "Create New", they likely intend to enter something.
+        if (!this.newUsername && !this.newPassword && !this.newCaCert) return false;
+      } else if (this.authMode === 'existing') {
+        if (!this.value.spec.credentials?.name) return false;
+      }
+
+      return true;
+    }
+  },
+
+  watch: {
+    authMode(newMode) {
+      if (newMode === 'existing') {
+        // Bind to value.spec.credentials.name for existing credential
+        // Ensure 'credentials' object exists first when selected
+        if (!this.value.spec.credentials) {
+          this.value.spec.credentials = {
+            name:      '',
+            namespace: this.value.metadata.namespace || 'default'
+          };
+        }
+      }
+    }
+  },
+
+  methods: {
+    secretRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.selectSecret') }) : undefined;
+    },
+
+    async saveSource(buttonCb) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      try {
+        if (this.authMode === 'none') {
+          // Clear any credential reference
+          delete this.value.spec.credentials;
+        } else if (this.authMode === 'new') {
+          const secretName = `${ this.value.metadata.name }-creds-${ randomStr(4).toLowerCase() }`;
+          const namespace = this.value.metadata.namespace || 'default';
+
+          const newSecret = await this.$store.dispatch(`${ inStore }/create`, {
+            type:     SECRET,
+            metadata: {
+              name: secretName,
+              namespace
+            }
+          });
+
+          newSecret['_type'] = 'Opaque';
+          newSecret['data'] = {
+            // Optional fields logic
+            username: this.newUsername ? btoa(this.newUsername) : undefined,
+            password: this.newPassword ? btoa(this.newPassword) : undefined,
+            // vm-import-controller code specifies "ca.crt" with a dot.
+            'ca.crt': this.newCaCert ? btoa(this.newCaCert) : undefined
+          };
+
+          await newSecret.save();
+
+          this.value.spec.credentials = {
+            name: secretName,
+            namespace
+          };
+        }
+
+        await this.save(buttonCb);
+      } catch (err) {
+        this.errors = [err];
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :validation-passed="isFormValid"
+    @finish="saveSource"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.addons.vmImport.titles.basic')"
+        :weight="3"
+      >
+        <div class="row mb-20">
+          <div class="col span-12">
+            <LabeledInput
+              v-model:value="value.spec.url"
+              :label="t('harvester.addons.vmImport.ova.fields.url')"
+              :placeholder="t('harvester.addons.vmImport.ova.placeholders.url')"
+              tooltip="Supports HTTP and HTTPS protocols."
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.url')"
+              required
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="auth"
+        :label="t('harvester.addons.vmImport.titles.auth')"
+        :weight="2"
+      >
+        <div class="row mb-20">
+          <div class="col span-12">
+            <RadioGroup
+              v-model:value="authMode"
+              name="authMode"
+              :options="authModeOptions"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div v-if="authMode === 'new'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newUsername"
+                :label="t('harvester.addons.vmImport.fields.username')"
+                placeholder="(Optional)"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newPassword"
+                type="password"
+                :label="t('harvester.addons.vmImport.fields.password')"
+                placeholder="(Optional)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="newCaCert"
+                type="multiline"
+                :label="t('harvester.addons.vmImport.fields.caCert')"
+                :placeholder="t('harvester.addons.vmImport.placeholders.caCert')"
+                :min-height="100"
+                :mode="mode"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="authMode === 'existing'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledSelect
+                v-model:value="value.spec.credentials.name"
+                :options="secretOptions"
+                :label="t('harvester.addons.vmImport.fields.selectSecret')"
+                :mode="mode"
+                :rules="[secretRule]"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.addons.vmImport.titles.advanced')"
+        :weight="1"
+      >
+        <div class="row mb-20">
+          <div class="col span-12">
+            <UnitInput
+              v-model:value="value.spec.httpTimeoutSeconds"
+              :label="t('harvester.addons.vmImport.ova.fields.httpTimeout')"
+              :placeholder="t('harvester.addons.vmImport.ova.placeholders.httpTimeout')"
+              suffix="Seconds"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>

pkg/harvester/edit/migration.harvesterhci.io.virtualmachineimport.vue

@@ -0,0 +1,570 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { Checkbox } from '@components/Form/Checkbox';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import { STORAGE_CLASS, NETWORK_ATTACHMENT } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { MANAGEMENT_NETWORK } from '../mixins/harvester-vm';
+import { VMIMPORT_SOURCE_PROVIDER, VMIMPORT_SOURCE_KINDS } from '../config/types';
+import { HCI } from '../types';
+import { isValidDNSLabelName } from '@pkg/utils/regular';
+import { mapGetters } from 'vuex';
+
+// Full API types for the fetch dispatch
+const VMWARE_SOURCE_TYPE = `${ HCI.MIGRATION }.${ VMIMPORT_SOURCE_KINDS.VMWARE.toLowerCase() }`;
+const OPENSTACK_SOURCE_TYPE = `${ HCI.MIGRATION }.${ VMIMPORT_SOURCE_KINDS.OPENSTACK.toLowerCase() }`;
+const OVA_SOURCE_TYPE = `${ HCI.MIGRATION }.${ VMIMPORT_SOURCE_KINDS.OVA.toLowerCase() }`;
+
+export default {
+  name: 'EditVirtualMachineImport',
+
+  components: {
+    CruResource,
+    Tabbed,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    Checkbox
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    // Fetch all dependencies in parallel to speed up the page load
+    const hash = {
+      storageClasses:   this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
+      networks:         this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+      vmwareSources:    this.$store.dispatch(`${ inStore }/findAll`, { type: VMWARE_SOURCE_TYPE }),
+      openstackSources: this.$store.dispatch(`${ inStore }/findAll`, { type: OPENSTACK_SOURCE_TYPE }),
+      ovaSources:       this.$store.dispatch(`${ inStore }/findAll`, { type: OVA_SOURCE_TYPE }).catch(() => []),
+    };
+
+    const res = await allHash(hash);
+
+    this.allStorageClasses = res.storageClasses;
+    this.allNetworks = res.networks;
+    this.vmwareSources = res.vmwareSources;
+    this.openstackSources = res.openstackSources;
+    this.ovaSources = res.ovaSources;
+  },
+
+  data() {
+    // Ensure the spec object exists to prevent 'undefined' errors during rendering
+    if (!this.value.spec) this.value.spec = {};
+    if (!this.value.spec.sourceCluster) this.value.spec.sourceCluster = {};
+    if (!this.value.spec.networkMapping) this.value.spec.networkMapping = [];
+
+    // Detect if in Edit mode by checking the existing kind
+    // This allows to pre-select the correct Provider Type tab
+    let initialProvider = '';
+    const existingKind = this.value.spec.sourceCluster.kind;
+
+    if (existingKind === VMIMPORT_SOURCE_KINDS.VMWARE) initialProvider = VMIMPORT_SOURCE_PROVIDER.VMWARE;
+    else if (existingKind === VMIMPORT_SOURCE_KINDS.OPENSTACK) initialProvider = VMIMPORT_SOURCE_PROVIDER.OPENSTACK;
+    else if (existingKind === VMIMPORT_SOURCE_KINDS.OVA) initialProvider = VMIMPORT_SOURCE_PROVIDER.OVA;
+
+    // Construct the unique key (Kind/Namespace/Name) if we are editing an existing resource
+    let initialSourceKey = null;
+
+    if (this.value.spec.sourceCluster.name) {
+      initialSourceKey = `${ existingKind }/${ this.value.spec.sourceCluster.namespace }/${ this.value.spec.sourceCluster.name }`;
+    }
+
+    return {
+      allStorageClasses: [],
+      allNetworks:       [],
+      vmwareSources:     [],
+      openstackSources:  [],
+      ovaSources:        [],
+
+      // UI State
+      sourceProviderType: initialProvider,
+      selectedSourceKey:  initialSourceKey,
+
+      // Static Options
+      providerTypeOptions: [
+        { label: 'VMware', value: VMIMPORT_SOURCE_PROVIDER.VMWARE },
+        { label: 'OpenStack', value: VMIMPORT_SOURCE_PROVIDER.OPENSTACK },
+        { label: 'OVA', value: VMIMPORT_SOURCE_PROVIDER.OVA }
+      ],
+      diskBusOptions: [
+        // Allow resetting selection / reset to the default behavior (sending null/empty)
+        { label: this.t('harvester.addons.vmImport.options.useDefault'), value: '' },
+        { label: 'VirtIO', value: 'virtio' },
+        { label: 'SCSI', value: 'scsi' },
+        { label: 'SATA', value: 'sata' },
+        { label: 'USB', value: 'usb' },
+      ],
+      interfaceModelOptions: [
+        // Allow resetting selection / reset to the default behavior (sending null/empty)
+        { label: this.t('harvester.addons.vmImport.options.useDefault'), value: '' },
+        { label: 'VirtIO', value: 'virtio' },
+        { label: 'e1000', value: 'e1000' },
+        { label: 'e1000e', value: 'e1000e' },
+        { label: 'ne2k_pci', value: 'ne2k_pci' },
+        { label: 'pcnet', value: 'pcnet' },
+        { label: 'rtl8139', value: 'rtl8139' },
+      ],
+
+      fvFormRuleSets: [
+        { path: 'metadata.name', rules: ['nameRequired'] },
+        { path: 'spec.virtualMachineName', rules: ['vmNameRequired', 'rfc1123'] },
+      ],
+    };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    // Return only the sources that match the selected Provider Type (VMware or OpenStack)
+    sourceOptions() {
+      let list = [];
+
+      if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.VMWARE) {
+        list = this.vmwareSources;
+      } else if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.OPENSTACK) {
+        list = this.openstackSources;
+      } else if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.OVA) {
+        list = this.ovaSources;
+      }
+
+      return list.map((s) => {
+        // Fallback for API version/kind if missing on the object
+        let kind = s.kind;
+
+        if (!kind) {
+          if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.VMWARE) kind = VMIMPORT_SOURCE_KINDS.VMWARE;
+          else if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.OPENSTACK) kind = VMIMPORT_SOURCE_KINDS.OPENSTACK;
+          else if (this.sourceProviderType === VMIMPORT_SOURCE_PROVIDER.OVA) kind = VMIMPORT_SOURCE_KINDS.OVA;
+        }
+
+        const apiVersion = s.apiVersion || `${ HCI.MIGRATION }/v1beta1`;
+
+        return {
+          label: s.metadata.name,
+          value: `${ kind }/${ s.metadata.namespace }/${ s.metadata.name }`,
+          // We attach the raw metadata so we can easily populate the spec later without re-finding the object
+          raw:   {
+            kind,
+            apiVersion,
+            name:      s.metadata.name,
+            namespace: s.metadata.namespace
+          }
+        };
+      });
+    },
+
+    fvExtraRules() {
+      return {
+        nameRequired:   (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
+        vmNameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.vmName') }) : undefined,
+        rfc1123:
+        (val) => {
+          if (val && !isValidDNSLabelName(val)) {
+            return this.t('harvester.addons.vmImport.errors.rfc1123');
+          }
+
+          return undefined;
+        }
+      };
+    },
+
+    // Perform various form validations before allowing to submit
+    isFormValid() {
+      // Check VM Name is valid
+      const nameError = this.fvNameRule(this.value.spec.virtualMachineName);
+
+      if (nameError) return false;
+
+      // Check mandatory fields in Basics
+      if (!this.value.spec.virtualMachineName) return false;
+      if (!this.selectedSourceKey) return false;
+
+      // Check Network Mappings
+      // If any row is missing source or destination, the form is invalid.
+      const networks = this.value.spec.networkMapping || [];
+      const hasInvalidRow = networks.some((row) => !row.sourceNetwork || !row.destinationNetwork);
+
+      if (hasInvalidRow) return false;
+
+      return true;
+    },
+
+    isNetworkTabInvalid() {
+      const networks = this.value.spec.networkMapping || [];
+      // Only error if a row exists AND it is missing fields
+
+      return networks.some((row) => !row.sourceNetwork || !row.destinationNetwork);
+    },
+
+    // Filter out internal storage classes
+    // to prevent selecting a class that might cause the import to fail
+    storageClassOptions() {
+      return this.allStorageClasses
+        .filter((sc) => {
+          const isInternal = sc.parameters?.['harvesterhci.io/isInternalStorageClass'] === 'true';
+
+          return !isInternal;
+        })
+        .map((sc) => ({
+          label: sc.nameDisplay,
+          value: sc.id
+        }));
+    },
+
+    networkOptions() {
+      const mgmtOption = {
+        label: 'Management Network',
+        value: MANAGEMENT_NETWORK
+      };
+
+      const vlanOptions = this.allNetworks.map((n) => ({
+        label: n.nameDisplay || n.metadata.name,
+        value: n.id
+      }));
+
+      return [mgmtOption, ...vlanOptions];
+    }
+  },
+
+  methods: {
+    // Clear the selected cluster if the user switches providers (e.g. VMware -> OpenStack)
+    // Prevents submitting a VMware cluster name while the kind is OpenStack
+    onProviderTypeChange(newType) {
+      this.selectedSourceKey = null;
+      this.value.spec.sourceCluster = {};
+    },
+
+    // Update the sourceCluster object based on the single dropdown selection
+    updateSource(key) {
+      this.selectedSourceKey = key;
+      const selectedOption = this.sourceOptions.find((o) => o.value === key);
+
+      if (selectedOption) {
+        const {
+          kind, apiVersion, name, namespace
+        } = selectedOption.raw;
+
+        this.value.spec.sourceCluster = {
+          kind,
+          apiVersion,
+          name,
+          namespace
+        };
+      } else {
+        this.value.spec.sourceCluster = {};
+      }
+    },
+
+    addNetworkMapping() {
+      this.value.spec.networkMapping.push({
+        sourceNetwork:         '',
+        destinationNetwork:    '',
+        networkInterfaceModel: ''
+      });
+    },
+
+    removeNetworkMapping(index) {
+      if (!this.value?.spec?.networkMapping) {
+        return;
+      }
+
+      if (index >= 0 && index < this.value.spec.networkMapping.length) {
+        this.value.spec.networkMapping.splice(index, 1);
+      }
+    },
+
+    requiredRule(val) {
+      if (!val) {
+        return this.t('validation.required', { key: this.t('generic.value') });
+      }
+
+      return undefined;
+    },
+
+    // Validates that the input follows Kubernetes Naming Rules (RFC 1123).
+    // If the source VM has uppercase letters or spaces, the user must be warned
+    // that they cannot import it until they rename it on the source. See:
+    // https://docs.harvesterhci.io/v1.6/advanced/addons/vmimport/#source-virtual-machine-name-is-not-rfc1123-compliant
+    fvNameRule(val) {
+      if (!val) return undefined; // 'Required' check handles empty state separately
+
+      // valid RFC 1123
+      if (!isValidDNSLabelName(val)) {
+        return this.t('harvester.addons.vmImport.errors.rfc1123');
+      }
+
+      return undefined;
+    },
+
+    updateBeforeSave() {
+      // If networkMapping exists, filter out the "Management Network" rows
+      // Let the vm-import-controller set the default network mapping
+      if (this.value.spec.networkMapping) {
+        this.value.spec.networkMapping = this.value.spec.networkMapping.filter((row) => {
+          return row.destinationNetwork !== MANAGEMENT_NETWORK;
+        });
+      }
+    },
+
+    // Only handles complex logic that doesn't fit into simple field rules
+    async saveOverride(buttonCb) {
+      const errors = [];
+
+      this.errors = [];
+
+      // Validate Provider Type
+      if (!this.sourceProviderType) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.sourceProvider') }));
+      }
+
+      // Validate Network Tab
+      if (this.isNetworkTabInvalid) {
+        errors.push(this.t('harvester.addons.vmImport.errors.networkMappingRequired'));
+      }
+
+      // Return immediately in case of an error, avoid that `this.save()` runs, preventing `updateBeforeSave` from resetting data.
+      if (errors.length > 0) {
+        this.errors = errors;
+        buttonCb(false);
+
+        return;
+      }
+
+      // Only proceed if valid
+      this.save(buttonCb);
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :validation-passed="fvFormIsValid"
+    @finish="saveOverride"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.addons.vmImport.titles.basic')"
+        :weight="3"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="sourceProviderType"
+              :options="providerTypeOptions"
+              :label="t('harvester.addons.vmImport.fields.sourceProvider')"
+              :mode="mode"
+              :rules="[requiredRule]"
+              required
+              @update:value="onProviderTypeChange"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              :value="selectedSourceKey"
+              :options="sourceOptions"
+              :label="t('harvester.addons.vmImport.fields.sourceCluster')"
+              :placeholder="sourceProviderType ? t('harvester.addons.vmImport.placeholders.selectCluster') : t('harvester.addons.vmImport.placeholders.selectProviderFirst')"
+              :disabled="!sourceProviderType"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('selectedSourceKey')"
+              required
+              @update:value="updateSource"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.virtualMachineName"
+              :label="t('harvester.addons.vmImport.fields.vmName')"
+              :placeholder="t('harvester.addons.vmImport.placeholders.matchSource')"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.virtualMachineName')"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.storageClass"
+              :options="storageClassOptions"
+              :label="t('harvester.addons.vmImport.fields.targetStorageClass')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="networking"
+        :label="t('harvester.addons.vmImport.titles.networking')"
+        :weight="2"
+        :error="isNetworkTabInvalid"
+      >
+        <div
+          v-for="(row, i) in value.spec.networkMapping"
+          :key="i"
+          class="network-row box mb-10"
+        >
+          <div class="row">
+            <div class="col span-4">
+              <LabeledInput
+                v-model:value="row.sourceNetwork"
+                :label="t('harvester.addons.vmImport.fields.sourceNetwork')"
+                :mode="mode"
+                :rules="[requiredRule]"
+                required
+              />
+            </div>
+            <div class="col span-4">
+              <LabeledSelect
+                v-model:value="row.destinationNetwork"
+                :options="networkOptions"
+                :label="t('harvester.addons.vmImport.fields.destNetwork')"
+                :mode="mode"
+                :rules="[requiredRule]"
+                required
+              />
+            </div>
+            <div class="col span-3">
+              <LabeledSelect
+                v-model:value="row.networkInterfaceModel"
+                :options="interfaceModelOptions"
+                :label="t('harvester.addons.vmImport.fields.interfaceModel')"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-1 remove-btn-container">
+              <button
+                type="button"
+                class="btn role-link"
+                @click="removeNetworkMapping(i)"
+              >
+                {{ t('harvester.addons.vmImport.actions.remove') }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <button
+          type="button"
+          class="btn role-secondary"
+          @click="addNetworkMapping"
+        >
+          {{ t('harvester.addons.vmImport.actions.addNetwork') }}
+        </button>
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.addons.vmImport.titles.advanced')"
+        :weight="1"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.folder"
+              :label="t('harvester.addons.vmImport.fields.folder')"
+              :placeholder="t('harvester.addons.vmImport.placeholders.folderExample')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.defaultDiskBusType"
+              :options="diskBusOptions"
+              :label="t('harvester.addons.vmImport.fields.diskBus')"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.defaultNetworkInterfaceModel"
+              :options="interfaceModelOptions"
+              :label="t('harvester.addons.vmImport.fields.defaultInterface')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-12">
+            <Checkbox
+              v-model:value="value.spec.skipPreflightChecks"
+              :label="t('harvester.addons.vmImport.fields.skipPreflight')"
+              :mode="mode"
+            />
+            <Checkbox
+              v-model:value="value.spec.forcePowerOff"
+              :label="t('harvester.addons.vmImport.fields.forcePowerOff')"
+              :mode="mode"
+              class="mt-10"
+            />
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.network-row {
+  border: 1px solid var(--border);
+  padding: 10px;
+  border-radius: var(--border-radius);
+  background: var(--body-bg);
+}
+.remove-btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

pkg/harvester/edit/migration.harvesterhci.io.vmwaresource.vue

@@ -0,0 +1,302 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { RadioGroup } from '@components/Form/Radio';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import { SECRET } from '@shell/config/types';
+import { randomStr } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'EditVmwareSource',
+
+  // Declare the event, fixes a console warning
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    Tabbed,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+    NameNsDescription,
+    RadioGroup,
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.allSecrets = await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+  },
+
+  data() {
+    if (!this.value.spec) this.value.spec = {};
+    if (!this.value.spec.credentials) this.value.spec.credentials = {};
+
+    const initialMode = this.value.spec.credentials.name ? 'existing' : 'new';
+
+    return {
+      allSecrets:      [],
+      authMode:        initialMode,
+      newUsername:     '',
+      newPassword:     '',
+      newCaCert:       '',
+
+      fvFormRuleSets: [
+        { path: 'metadata.name', rules: ['nameRequired'] },
+        { path: 'spec.endpoint', rules: ['endpointRequired'] },
+        { path: 'spec.dc', rules: ['dcRequired'] },
+      ],
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    authModeOptions() {
+      return [
+        { label: this.t('harvester.addons.vmImport.fields.createSecret'), value: 'new' },
+        { label: this.t('harvester.addons.vmImport.fields.useSecret'), value: 'existing' }
+      ];
+    },
+
+    secretOptions() {
+      const currentNamespace = this.value.metadata.namespace || 'default';
+
+      return this.allSecrets
+        .filter((s) => s.metadata.namespace === currentNamespace)
+        .map((s) => ({
+          label: s.nameDisplay,
+          value: s.metadata.name
+        }));
+    },
+
+    // Define custom rules for the FormValidation mixin
+    fvExtraRules() {
+      return {
+        nameRequired:     (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
+        endpointRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.vmware.fields.endpoint') }) : undefined,
+        dcRequired:       (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.vmware.fields.datacenter') }) : undefined,
+      };
+    },
+
+    isFormValid() {
+      if (!this.fvFormIsValid) {
+        return false;
+      }
+
+      if (this.authMode === 'new') {
+        if (!this.newUsername || !this.newPassword) return false;
+      } else {
+        if (!this.value.spec.credentials.name) return false;
+      }
+
+      return true;
+    }
+  },
+
+  methods: {
+    usernameRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.username') }) : undefined;
+    },
+    passwordRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.password') }) : undefined;
+    },
+    secretRule(val) {
+      return !val ? this.t('validation.required', { key: this.t('harvester.addons.vmImport.fields.selectSecret') }) : undefined;
+    },
+
+    async saveSource(buttonCb) {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      try {
+        if (this.authMode === 'new') {
+          const secretName = `${ this.value.metadata.name }-creds-${ randomStr(4).toLowerCase() }`;
+          const namespace = this.value.metadata.namespace || 'default';
+
+          // Create the model with the correct Schema ID (SECRET)
+          const newSecret = await this.$store.dispatch(`${ inStore }/create`, {
+            type:     SECRET,
+            metadata: {
+              name: secretName,
+              namespace
+            }
+          });
+
+          // Use '_type' to set the Kubernetes 'type' field.
+          newSecret['_type'] = 'Opaque';
+
+          // base64 encode the data
+          newSecret['data'] = {
+            username: btoa(this.newUsername),
+            password: btoa(this.newPassword),
+            // Only include CA cert if the user provided one
+            caCert:   this.newCaCert ? btoa(this.newCaCert) : undefined
+          };
+
+          await newSecret.save();
+
+          // Link the new secret to the Source
+          this.value.spec.credentials = {
+            name: secretName,
+            namespace
+          };
+        }
+
+        await this.save(buttonCb);
+      } catch (err) {
+        this.errors = [err];
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    :validation-passed="isFormValid"
+    @finish="saveSource"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.addons.vmImport.titles.basic')"
+        :weight="2"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.endpoint"
+              :label="t('harvester.addons.vmImport.vmware.fields.endpoint')"
+              :placeholder="t('harvester.addons.vmImport.vmware.placeholders.endpoint')"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.endpoint')"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.spec.dc"
+              :label="t('harvester.addons.vmImport.vmware.fields.datacenter')"
+              :placeholder="t('harvester.addons.vmImport.vmware.placeholders.datacenter')"
+              :tooltip="t('harvester.addons.vmImport.vmware.tooltips.datacenter')"
+              :mode="mode"
+              :rules="fvGetAndReportPathRules('spec.dc')"
+              required
+            />
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="auth"
+        :label="t('harvester.addons.vmImport.titles.auth')"
+        :weight="1"
+      >
+        <div class="row mb-20">
+          <div class="col span-12">
+            <RadioGroup
+              v-model:value="authMode"
+              name="authMode"
+              :options="authModeOptions"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div v-if="authMode === 'new'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newUsername"
+                :label="t('harvester.addons.vmImport.fields.username')"
+                :mode="mode"
+                :rules="[usernameRule]"
+                required
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="newPassword"
+                type="password"
+                :label="t('harvester.addons.vmImport.fields.password')"
+                :mode="mode"
+                :rules="[passwordRule]"
+                required
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="newCaCert"
+                type="multiline"
+                :label="t('harvester.addons.vmImport.fields.caCert')"
+                :placeholder="t('harvester.addons.vmImport.placeholders.caCert')"
+                :min-height="100"
+                :mode="mode"
+              />
+            </div>
+          </div>
+
+          <div class="text-muted">
+            Note: A new Kubernetes Secret will be created to store these credentials.
+          </div>
+        </div>
+
+        <div v-if="authMode === 'existing'">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledSelect
+                v-model:value="value.spec.credentials.name"
+                :options="secretOptions"
+                :label="t('harvester.addons.vmImport.fields.selectSecret')"
+                :mode="mode"
+                :rules="[secretRule]"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>