chore: bump version to v1.5.1

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

.eslintignore

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

.github/mergify.yml

@@ -0,0 +1,20 @@
+pull_request_rules:
+- name: Automatically open backport PR to release-harvester-v1.5
+  conditions:
+    - base=main
+    - label="require backport 1.5"
+  actions:
+    backport:
+      branches:
+        - "release-harvester-v1.5"
+      assignees:
+        - "{{ author }}"
+      labels:
+        - "v1.5 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/workflows/build-and-publish-catalog-on-release.yaml

@@ -0,0 +1,35 @@
+name: Build Harvester Catalog Image and Publish on Release
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+defaults:
+  run:
+    shell: bash
+    working-directory: ./
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run tests
+        uses: ./.github/actions/lint
+
+  build-and-push-extension-catalog:
+    needs: lint
+    uses: ./.github/workflows/build-extension-catalog.yml
+    permissions:
+      actions: write
+      contents: read
+      packages: write
+      id-token: write
+    with:
+      registry_target: docker.io
+      registry_user: rancher
+    secrets: inherit

.github/workflows/build-and-publish-standalone.yaml

@@ -0,0 +1,165 @@
+name: Build Harvester Dashboard and Publish
+
+on:
+  workflow_call:
+    inputs:
+      CI_BRANCH:
+        required: false
+        type: string
+      CI_BUILD_TAG:
+        required: false
+        type: string
+
+env:
+  GOOGLE_AUTH: ''
+  DOCKER_USERNAME: ''
+  DOCKER_PASSWORD: ''
+  CI_BUILD_TAG: ${{inputs.CI_BUILD_TAG}}
+  CI_BRANCH: ${{inputs.CI_BRANCH}}
+  GIT_REPO: ${{github.repository}}
+  GIT_COMMIT: ${{github.sha}}
+  REPO: ${{github.event.repository.name || ''}}
+
+jobs:
+  build-and-upload-hosted:
+    name: Build & Upload Hosted
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+        # Note - Cannot use the setup action here as it uses a different yarn install arg
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+        # Build a directory containing the dashboard that can be used with ui-dashboard-index
+      - id: build-hosted
+        name: Build Hosted
+        run: ./scripts/build-hosted
+
+      - id: upload-gate
+        name: Upload Gate (superseded by a newer build?)
+        run: ./scripts/build-upload-gate
+
+      - name: Get gcs auth
+        uses: rancher-eio/read-vault-secrets@main
+        with:
+          secrets: |
+            secret/data/github/repo/${{ github.repository }}/google-auth/harvester/credentials token | GOOGLE_AUTH ;
+
+      - name: Apply gcs auth
+        # https://github.com/google-github-actions/auth
+        uses: 'google-github-actions/auth@v2'
+        with:
+          credentials_json: "${{ env.GOOGLE_AUTH }}"
+
+      - name: Upload build
+        uses: 'google-github-actions/upload-cloud-storage@v2'
+        # https://github.com/google-github-actions/upload-cloud-storage
+        with:
+          path: ${{steps.build-hosted.outputs.BUILD_HOSTED_DIR}}
+          destination: releases.rancher.com/harvester-ui/dashboard/${{ steps.build-hosted.outputs.BUILD_HOSTED_LOCATION }}
+          parent: false
+          headers: |-
+            cache-control: no-cache,must-revalidate
+          process_gcloudignore: false
+
+  build-and-upload-embedded:
+    name: Build & Upload Embedded
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+        # Note - Cannot use the setup action here as it uses a different yarn install arg
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+        # Build a tar that will be picked up by rancher builds and embedded into it
+      - id: build-embedded
+        name: Build Embedded
+        run: ./scripts/build-embedded
+        env:
+          DISABLED_EMBED_PKG: https://releases.rancher.com/harvester-ui/plugin/harvester-1.0.3.tar.gz
+
+      - name: Get gcs auth
+        uses: rancher-eio/read-vault-secrets@main
+        with:
+          secrets: |
+            secret/data/github/repo/${{ github.repository }}/google-auth/harvester/credentials token | GOOGLE_AUTH ;
+
+      - name: Apply gcs auth
+        # https://github.com/google-github-actions/auth
+        uses: 'google-github-actions/auth@v2'
+        with:
+          credentials_json: "${{ env.GOOGLE_AUTH }}"
+
+      - name: Upload tar
+        uses: 'google-github-actions/upload-cloud-storage@v2'
+        with:
+          path: ${{steps.build-embedded.outputs.BUILD_EMBEDED_TGZ}}
+          destination: releases.rancher.com/harvester-ui/dashboard
+          parent: false
+          headers: |-
+            cache-control: no-cache,must-revalidate
+          process_gcloudignore: false
+
+  build-and-upload-harvester-plugin:
+    name: Build & Upload Plugin
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+        # Note - Cannot use the setup action here as it uses a different yarn install arg
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - id: ci-build-pkg
+        name: Build pkg
+        run: ./scripts/ci-build-pkg.sh harvester
+
+      - id: upload-gate
+        name: Upload Gate
+        run: ./scripts/build-upload-gate
+
+      - name: Get gcs auth
+        uses: rancher-eio/read-vault-secrets@main
+        with:
+          secrets: |
+            secret/data/github/repo/${{ github.repository }}/google-auth/harvester/credentials token | GOOGLE_AUTH ;
+
+      - name: Apply gcs auth
+        # https://github.com/google-github-actions/auth
+        uses: 'google-github-actions/auth@v2'
+        with:
+          credentials_json: "${{ env.GOOGLE_AUTH }}"
+
+      - name: Upload plugin tar
+        uses: 'google-github-actions/upload-cloud-storage@v2'
+        with:
+          path: dist-pkg/${{steps.ci-build-pkg.outputs.PKG_TARBALL}}
+          destination: releases.rancher.com/harvester-ui/plugin
+          parent: false
+          headers: |-
+            cache-control: no-cache,must-revalidate
+          process_gcloudignore: false
+
+      - name: Upload plugin directory
+        uses: 'google-github-actions/upload-cloud-storage@v2'
+        with:
+          path: dist-pkg/${{steps.ci-build-pkg.outputs.PKG_NAME}}
+          destination: releases.rancher.com/harvester-ui/plugin/${{steps.ci-build-pkg.outputs.PKG_NAME}}
+          parent: false
+          headers: |-
+            cache-control: no-cache,must-revalidate
+          process_gcloudignore: false

.github/workflows/build-extension-catalog.yml

@@ -0,0 +1,70 @@
+name: Build and release Extension Catalog Image to registry
+
+on:
+  workflow_call:
+    inputs:
+      registry_target:
+        required: true
+        type: string
+      registry_user:
+        required: true
+        type: string
+    outputs:
+      build-extension-catalog-job-status: 
+        value: ${{ jobs.build-extension-catalog.outputs.build-status }}
+
+jobs:
+  build-and-push-extension-catalog:
+    name: Build container image
+    if: github.ref_type == 'tag' || (github.ref == 'refs/heads/main' && github.event_name != 'pull_request')
+    runs-on: ubuntu-latest
+    permissions:
+      actions: write
+      contents: read
+      packages: write
+      id-token: write
+    outputs:
+      build-status: ${{ job.status }}
+    steps:
+      - name: Read Secrets
+        uses: rancher-eio/read-vault-secrets@main
+        with:
+          secrets: |
+            secret/data/github/repo/${{ github.repository }}/dockerhub/rancher/credentials username | DOCKER_USERNAME ;
+            secret/data/github/repo/${{ github.repository }}/dockerhub/rancher/credentials password | DOCKER_PASSWORD ;
+      
+      - name: Checkout repository (normal flow)
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Configure Git
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ env.DOCKER_USERNAME }}
+          password: ${{ env.DOCKER_PASSWORD }}
+
+      - name: Setup Helm
+        uses: azure/setup-helm@v3
+        with:
+          version: v3.8.0
+
+      - name: Setup Nodejs with yarn caching
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build and push UI image
+        run: |
+          publish="yarn publish-pkgs -cp -r ${{ inputs.registry_target }} -o ${{ inputs.registry_user }}"
+          $publish

.github/workflows/build-extension-charts.yml

@@ -1,34 +0,0 @@
-name: Build and Release Extension Charts
-
-on:
-  workflow_dispatch:
-  release:
-    types: [released]
-
-defaults:
-  run:
-    shell: bash
-    working-directory: ./
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run tests
-        uses: ./.github/actions/lint
-  build-extension-charts:
-    needs:
-      - lint
-    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@master
-    permissions:
-      actions: write
-      contents: write
-      deployments: write
-      pages: write
-    with:
-      target_branch: gh-pages
-      tagged_release: ${{ github.ref_name }}

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

@@ -0,0 +1,136 @@
+name: Build and Release Extension Charts on PR Merge
+
+on:
+  push:
+    branches:
+      - 'release-harvester-v*'
+
+jobs:
+  setup-target-branch:
+    runs-on: ubuntu-latest
+    outputs:
+      target_branch: ${{ steps.get-version.outputs.target_branch }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Determine target branch
+        id: get-version
+        run: |
+          if [[ "${{ github.ref_name }}" =~ ^release-harvester-v([0-9]+\.[0-9]+)$ ]]; then
+            TARGET_BRANCH="v${BASH_REMATCH[1]}-head"
+            echo "target_branch=${TARGET_BRANCH}" >> $GITHUB_ENV
+            echo "target_branch=${TARGET_BRANCH}" >> $GITHUB_OUTPUT
+          else
+            echo "Error: invalid branch format." && exit 1
+          fi
+
+      - name: Ensure target branch exists
+        run: |
+          git fetch --all
+          if ! git ls-remote --exit-code --heads origin "${{ env.target_branch }}"; then
+            git checkout gh-pages
+            git checkout -b "${{ env.target_branch }}"
+            git push origin "${{ env.target_branch }}"
+          fi
+
+  extract-version:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.get_version.outputs.version }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Extract version from package.json
+        id: get_version
+        run: |
+          VERSION=$(jq -r '.version' pkg/harvester/package.json)
+          echo "VERSION=${VERSION}" >> $GITHUB_ENV
+          echo "version=${VERSION}" >> $GITHUB_OUTPUT
+
+  build-extension-charts:
+    needs:
+      - setup-target-branch
+      - extract-version
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup environment
+        run: |
+          corepack enable
+          yarn install --frozen-lockfile
+
+      - name: Setup Helm
+        uses: azure/setup-helm@v3
+        with:
+          version: v3.8.0
+
+      - name: Build Helm charts
+        run: |
+          yarn publish-pkgs -s ${{ github.repository }} -b ${{ needs.setup-target-branch.outputs.target_branch }} -t harvester-${{ needs.extract-version.outputs.version }}
+
+      - name: Upload charts artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: charts
+          path: tmp
+
+  release:
+    needs:
+      - setup-target-branch
+      - extract-version
+      - build-extension-charts
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout release branch
+        uses: actions/checkout@v4
+        with:
+          ref: '${{ github.ref_name }}'
+
+      - name: Get last commit hash
+        id: last_commit
+        run: |
+          LAST_COMMIT=$(git rev-parse HEAD)
+          echo "LAST_COMMIT=${LAST_COMMIT}" >> $GITHUB_ENV
+
+      - name: Checkout target branch
+        uses: actions/checkout@v4
+        with:
+          ref: '${{ needs.setup-target-branch.outputs.target_branch }}'
+
+      - name: Remove old artifacts
+        run: |
+          rm -rf extensions/harvester/${{ needs.extract-version.outputs.version }}
+          rm -rf charts/harvester/${{ needs.extract-version.outputs.version }}
+          rm -f assets/harvester/harvester-${{ needs.extract-version.outputs.version }}.tgz
+
+      - name: Configure Git
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: charts
+
+      - name: Commit and push artifacts
+        run: |
+          git add ./{assets,charts,extensions,index.yaml}
+          git commit -m "CI Build Artifacts (commit: ${{ env.LAST_COMMIT }}, version: ${{ needs.extract-version.outputs.version }})"
+          git push origin ${{ needs.setup-target-branch.outputs.target_branch }}
+
+      - name: Run Helm chart releaser
+        uses: helm/chart-releaser-action@v1.4.1
+        with:
+          charts_dir: ./charts
+        env:
+          CR_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          CR_SKIP_EXISTING: true

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

@@ -0,0 +1,53 @@
+name: Build and Release Extension Charts on Release
+
+on:
+  workflow_dispatch:
+  release:
+    types: [released]
+
+defaults:
+  run:
+    shell: bash
+    working-directory: ./
+
+jobs:
+  setup-release-tag:
+    runs-on: ubuntu-latest
+    outputs:
+      release_tag: ${{ steps.determine_tag.outputs.release_tag }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Determine release tag
+        id: determine_tag
+        run: |
+          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:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run tests
+        uses: ./.github/actions/lint
+  build-extension-charts:
+    needs:
+      - setup-release-tag
+      - lint
+    uses: rancher/dashboard/.github/workflows/build-extension-charts.yml@master
+    permissions:
+      actions: write
+      contents: write
+      deployments: write
+      pages: write
+    with:
+      target_branch: gh-pages
+      tagged_release: '${{ needs.setup-release-tag.outputs.release_tag }}'

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

@@ -0,0 +1,31 @@
+name: Build Standalone on PR Merge
+
+on:
+  push:
+    branches:
+      - main
+      - 'release-harvester-v*'
+      - '*-dev'
+  pull_request:
+    branches:
+      - main
+      - 'release-harvester-v*'
+      - '*-dev'
+    types:
+      - merged
+
+jobs:
+  build-validation:
+    name: Build Test
+    uses: ./.github/workflows/run-lint.yaml
+  build:
+    name: Build and Upload Package
+    uses: ./.github/workflows/build-and-publish-standalone.yaml
+    needs:
+      - build-validation
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+    with:
+      CI_BRANCH: ${{github.ref_name}}

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

@@ -0,0 +1,21 @@
+name: Build Standalone on Release
+on:
+  push:
+    tags:
+      - v[1-9].*
+
+jobs:
+  build-validation:
+    name: Build Test
+    uses: ./.github/workflows/run-lint.yaml
+  build:
+    name: Build and Upload Package
+    uses: ./.github/workflows/build-and-publish-standalone.yaml
+    needs:
+      - build-validation
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+    with:
+      CI_BUILD_TAG: ${{github.ref_name}}

.github/workflows/run-lint.yaml

@@ -1,5 +1,7 @@
 name: Tests
+
 on:
+  workflow_call:  # This tells GH that the workflow is reusable 
   push:
     branches:
       - main

README.md

@@ -1,2 +1,72 @@
-# harvester
+# harvester-ui-extension
-harvester UI extension
+
+Rancher Extension used in [rancher/dashboard](https://github.com/rancher/dashboard) for [Harvester](https://harvesterhci.io) Dashboard UI.
+
+`
+From Rancher 2.10.0, Harvester integration is provided by this new Harvester UI Extension.
+`
+
+## Installation
+
+To install the Harvester UI Extension in Rancher 2.10.0 and newer, please refer to [installation](https://docs.harvesterhci.io/v1.5/rancher/harvester-ui-extension#installation-on-rancher-210) on harvester doc.
+
+## Running for Development
+
+This is what you probably want to get started.
+
+### Prerequisite
+
+Nodejs version >= 20
+
+
+### Standalone Mode
+
+For development, serve with hot reload at https://localhost:8005
+
+```bash
+# Install dependencies
+yarn install
+
+# Use RANCHER_ENV to specify the endpoint for your Harvester API
+RANCHER_ENV=harvester API=https://your-harvester-ip yarn dev
+
+# Use VUE_APP_SERVER_VERSION to specify the Harvester server version
+# in case your are running a dev build of Harvester
+RANCHER_ENV=harvester VUE_APP_SERVER_VERSION=your-harvester-server-version API=https://your-harvester-ip yarn dev
+
+# or put your env variables into a .env file
+
+# Example
+RANCHER_ENV=harvester VUE_APP_SERVER_VERSION=v1.4.0 API=https://192.168.1.123 yarn dev
+```
+
+### Rancher Integration Mode
+
+In this mode, you need to have Rancher and run Harvester UI Extension as Rancher extension, see more detail in [Rancher UI extension](https://extensions.rancher.io/extensions/next/extensions-getting-started#running-the-app).
+
+```bash
+API=https://your-rancher-ip yarn dev
+
+# Example
+API=https://192.168.1.123 yarn dev
+```
+
+## Contributing
+
+For developers, after reading through the introduction on this page, head over to our [Getting Started](https://extensions.rancher.io/extensions/next/extensions-getting-started) guide to learn more.
+
+License
+=======
+Copyright (c) 2014-2025 [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.

package.json

@@ -1,25 +1,26 @@
 {
   "name": "harvester-ui-extension",
-  "version": "0.1.0",
+  "version": "1.5.1",
   "private": false,
   "engines": {
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@rancher/shell": "^3.0.0-rc.1",
+    "@rancher/shell": "3.0.2-rc.6",
     "cache-loader": "^4.1.0",
     "color": "4.2.3",
     "ip": "2.0.1",
     "node-polyfill-webpack-plugin": "^3.0.0",
-    "sortablejs-vue3": "^1.2.11",
+    "vue-draggable-next": "^2.2.1",
-    "yaml": "^2.5.1"
+    "yaml": "^2.5.1",
+    "@babel/plugin-transform-class-static-block": "7.26.0"
   },
   "resolutions": {
     "@types/node": "~20.10.0",
     "cronstrue": "2.50.0",
     "d3-color": "3.1.0",
-    "ejs": "3.1.9",
+    "ejs": "3.1.10",
-    "follow-redirects": "1.15.2",
+    "follow-redirects": "1.15.6",
     "glob": "7.2.3",
     "glob-parent": "6.0.2",
     "json5": "2.2.3",
@@ -46,4 +47,4 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^7.1.0"
   }
-}
+}

pkg/harvester/babel.config.js

@@ -1 +1,9 @@
-module.exports = require('@rancher/shell/pkg/babel.config');
+const baseConfig = require('@rancher/shell/pkg/babel.config');
+
+module.exports = {
+  ...baseConfig,
+  plugins: [
+    ...(baseConfig.plugins || []),
+    '@babel/plugin-transform-class-static-block'
+  ]
+};

pkg/harvester/components/FilterBySriov.vue

@@ -81,8 +81,10 @@ export default {
     </span>
 
     <v-dropdown
+      popper-class="filter-parent-sriov"
       trigger="click"
       placement="bottom-end"
+      :distance="20"
     >
       <slot name="header">
         <button
@@ -142,4 +144,11 @@ export default {
 .required {
   color: var(--error);
 }
+
+</style>
+
+<style lang="scss">
+.filter-parent-sriov .v-popper__arrow-container {
+  display: none;
+}
 </style>

pkg/harvester/components/FilterVMSchedule.vue

@@ -25,6 +25,9 @@ export default {
 
       return Array.from(new Set(options));
     },
+    enableFilterButton() {
+      return this.rows.some((r) => r.sourceSchedule !== undefined);
+    }
   },
 
   methods: {
@@ -63,27 +66,30 @@ export default {
 </script>
 
 <template>
-  <div class="vm-schedule-filter">
+  <div
-    <template>
+    class="vm-schedule-filter"
-      <span
+  >
-        v-if="selected"
+    <span
-        class="banner-item bg-warning"
+      v-if="selected"
-      >
+      class="banner-item bg-warning"
-        {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}<i
+    >
-          class="icon icon-close ml-5"
+      {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}
-          @click="remove"
+      <i
-        />
+        class="icon icon-close ml-5"
-      </span>
+        @click="remove"
-    </template>
+      />
-
+    </span>
     <v-dropdown
+      popper-class="vm-schedule-dropdown"
       :triggers="scheduleOptions.length ? ['click'] : []"
       placement="bottom-end"
       offset="1"
+      :distance="20"
     >
       <button
         ref="actionDropDown"
         class="btn bg-primary mr-10"
+        :disabled="!enableFilterButton"
       >
         <slot name="title">
           {{ t('harvester.fields.filterSchedule') }}
@@ -98,7 +104,7 @@ export default {
             name="model"
             :options="scheduleOptions"
             :labels="scheduleOptions"
-            @input="onSelect"
+            @update:value="onSelect"
           />
         </div>
       </template>
@@ -106,6 +112,12 @@ export default {
   </div>
 </template>
 
+<style lang="scss">
+.vm-schedule-dropdown .v-popper__arrow-container {
+  display: none;
+}
+</style>
+
 <style lang="scss" scoped>
 .vm-schedule-filter {
   display: inline-block;

pkg/harvester/components/HarvesterUpgrade.vue

@@ -5,8 +5,10 @@ import { Checkbox } from '@components/Form/Checkbox';
 import ModalWithCard from '@shell/components/ModalWithCard';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Banner } from '@components/Banner';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import { HCI } from '../types';
 import UpgradeInfo from './UpgradeInfo';
+
 export default {
   name: 'HarvesterUpgrade',
 
@@ -28,14 +30,15 @@ export default {
 
   data() {
     return {
-      upgrade:          [],
+      upgrade:                      [],
-      upgradeMessage:   [],
+      upgradeMessage:               [],
-      errors:           '',
+      errors:                       '',
-      selectMode:       true,
+      selectMode:                   true,
-      version:          '',
+      version:                      '',
-      enableLogging:    true,
+      enableLogging:                true,
-      readyReleaseNote: false,
+      skipSingleReplicaDetachedVol: false,
-      isOpen:           false
+      readyReleaseNote:             false,
+      isOpen:                       false
     };
   },
 
@@ -68,6 +71,10 @@ export default {
       return this.$store.getters['harvester/schemaFor'](HCI.UPGRADE_LOG);
     },
 
+    skipSingleReplicaDetachedVolFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('skipSingleReplicaDetachedVol');
+    },
+
     releaseLink() {
       return `https://github.com/harvester/harvester/releases/tag/${ this.version }`;
     }
@@ -104,6 +111,11 @@ export default {
         spec: { version: this.version }
       };
 
+      if (this.skipSingleReplicaDetachedVolFeatureEnabled && this.skipSingleReplicaDetachedVol) {
+        upgradeValue.metadata.annotations =
+          { [HCI_ANNOTATIONS.SKIP_SINGLE_REPLICA_DETACHED_VOL]: JSON.stringify(this.skipSingleReplicaDetachedVol) };
+      }
+
       if (this.canEnableLogging) {
         upgradeValue.spec.logEnabled = this.enableLogging;
       }
@@ -190,6 +202,21 @@ export default {
             />
           </div>
 
+          <div
+            v-if="skipSingleReplicaDetachedVolFeatureEnabled"
+            class="mb-5"
+          >
+            <Checkbox
+              v-model:value="skipSingleReplicaDetachedVol"
+              class="check"
+              type="checkbox"
+              :label="t('harvester.upgradePage.skipSingleReplicaDetachedVol')"
+            />
+          </div>
+          <hr
+            v-if="version"
+            class="divider"
+          />
           <div v-if="version">
             <p
               v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)"

pkg/harvester/components/HarvesterUpgradeHeader.vue

@@ -190,6 +190,7 @@ export default {
       v-clean-tooltip="{
         placement: 'bottom-left',
       }"
+      popper-class="upgrade-header-dropdown"
       class="hand"
     >
       <slot name="button-content">
@@ -272,7 +273,7 @@ export default {
 
           <p
             v-if="overallMessage"
-            class="text-warning mb-20"
+            class="text-error mb-20"
           >
             {{ overallMessage }}
           </p>
@@ -300,14 +301,14 @@ export default {
 
           <ProgressBarList
             :title="t('harvester.upgradePage.upgradeNode')"
-            :precent="nodesPercent"
+            :percent="nodesPercent"
             :list="nodesStatus"
           />
           <p class="bordered-section"></p>
 
           <ProgressBarList
             :title="t('harvester.upgradePage.upgradeSysService')"
-            :precent="sysServiceTotal"
+            :percent="sysServiceTotal"
             :list="sysServiceUpgradeMessage"
           />
         </div>
@@ -338,6 +339,12 @@ export default {
   </div>
 </template>
 
+<style lang="scss">
+.upgrade-header-dropdown .v-popper__arrow-container {
+  display: none;
+}
+</style>
+
 <style lang="scss" scoped>
 a {
   float: right;

pkg/harvester/components/HarvesterUpgradeProgressBarList.vue

@@ -12,7 +12,7 @@ export default {
       default: ''
     },
 
-    precent: {
+    percent: {
       type:    Number,
       default: 0
     },
@@ -39,16 +39,18 @@ export default {
 
 <template>
   <div class="bar-list">
-    <h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4>
+    <h4>{{ title }} <span class="float-r text-info">{{ percent }}%</span></h4>
     <div>
       <div>
         <Collapse v-model:open="open">
           <template #title>
             <div class="total-bar">
-              <span class="bar"><PercentageBar
+              <span class="bar">
-                :model-value="precent"
+                <PercentageBar
-                preferred-direction="MORE"
+                  :model-value="percent"
-              /></span>
+                  preferred-direction="MORE"
+                />
+              </span>
               <span
                 class="on-off"
                 @click="handleSwitch"
@@ -56,28 +58,26 @@ export default {
             </div>
           </template>
 
-          <template>
+          <div class="custom-content">
-            <div class="custom-content">
+            <div
-              <div
+              v-for="(item, i) in list"
-                v-for="(item, i) in list"
+              :key="i"
-                :key="i"
+            >
-              >
+              <p>
-                <p>
+                {{ item.name }} <span
-                  {{ item.name }} <span
+                  class="status"
-                    class="status"
+                  :class="{ [item.state]: true }"
-                    :class="{ [item.state]: true }"
+                >{{ item.state }}</span>
-                  >{{ item.state }}</span>
+              </p>
-                </p>
+              <PercentageBar
-                <PercentageBar
+                :model-value="item.percent"
-                  :model-value="item.percent"
+                preferred-direction="MORE"
-                  preferred-direction="MORE"
+              />
-                />
+              <p class="warning">
-                <p class="warning">
+                {{ item.message }}
-                  {{ item.message }}
+              </p>
-                </p>
-              </div>
             </div>
-          </template>
+          </div>
         </Collapse>
       </div>
     </div>
@@ -93,7 +93,7 @@ export default {
   .total-bar {
     display: flex;
     user-select: none;
-    .bar {
+    > .bar {
       width: 85%;
     }
     .on-off {
@@ -102,25 +102,22 @@ export default {
     }
   }
   .custom-content {
-    .item {
+    margin-bottom: 14px;
-      margin-bottom: 14px;
+    p {
-      p {
+      margin-bottom: 4px;
-        margin-bottom: 4px;
+    }
-      }
+    .status {
-      .status {
+      float: right;
-        float: right;
+    }
-      }
+    .Succeeded, .Upgrading, .Pending {
-      .Succeeded, .Upgrading, .Pending {
+      color: var(--success);
-        color: var(--success);
+    }
-      }
+    .failed {
-      .failed {
+      color: var(--error)
-        color: var(--error)
+    }
-      }
+    .warning {
-      .warning {
+      color: var(--error);
-        color: var(--error);
-      }
     }
   }
 }
-
 </style>

pkg/harvester/components/SerialConsole/index.vue

@@ -60,7 +60,8 @@ export default {
         });
 
         this.queue = [];
-      }, 5)
+      }, 10),
+      deep: true
     }
   },
 

pkg/harvester/components/UpgradeInfo.vue

@@ -43,7 +43,7 @@ export default {
           {{ t('harvester.upgradePage.upgradeInfo.tip') }}
         </p>
 
-        <p class="mb-5">
+        <p>
           {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a
             :href="releaseVersion"
             target="_blank"

pkg/harvester/components/settings/backup-target.vue

@@ -6,6 +6,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI_SETTING } from '../../config/settings';
+import UnitInput from '@shell/components/form/UnitInput';
 
 const DEFAULT_TYPE = 's3';
 
@@ -13,7 +14,7 @@ export default {
   name: 'HarvesterEditBackupTarget',
 
   components: {
-    LabeledInput, LabeledSelect, Tip, Password, MessageLink
+    LabeledInput, LabeledSelect, Tip, Password, MessageLink, UnitInput
   },
 
   mixins: [CreateEditView],
@@ -24,7 +25,9 @@ export default {
     try {
       parseDefaultValue = JSON.parse(this.value.value);
     } catch (error) {
-      parseDefaultValue = { type: '', endpoint: '' };
+      parseDefaultValue = {
+        type: '', endpoint: '', refreshIntervalInSeconds: 0
+      };
     }
 
     // set default type to s3
@@ -62,6 +65,10 @@ export default {
       }];
     },
 
+    refreshIntervalInSecondEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('refreshIntervalInSecond');
+    },
+
     isS3() {
       return this.parseDefaultValue.type === DEFAULT_TYPE;
     },
@@ -83,7 +90,9 @@ export default {
         try {
           parseDefaultValue = JSON.parse(neu.value);
         } catch (err) {
-          parseDefaultValue = { type: '', endpoint: '' };
+          parseDefaultValue = {
+            type: '', endpoint: '', refreshIntervalInSeconds: 0
+          };
         }
 
         this['parseDefaultValue'] = parseDefaultValue;
@@ -111,7 +120,6 @@ export default {
       if (this.isS3 && !this.parseDefaultValue.virtualHostedStyle) {
         this.parseDefaultValue.virtualHostedStyle = false;
       }
-
       if (!this.parseDefaultValue.type) {
         delete this.value['value'];
       } else {
@@ -120,7 +128,9 @@ export default {
     },
 
     useDefault() {
-      this['parseDefaultValue'] = { type: '', endpoint: '' };
+      this['parseDefaultValue'] = {
+        type: '', endpoint: '', refreshIntervalInSeconds: 0
+      };
     }
   }
 };
@@ -139,6 +149,23 @@ export default {
         :options="typeOption"
         @update:value="update"
       />
+      <UnitInput
+        v-if="refreshIntervalInSecondEnabled"
+        v-model:value="parseDefaultValue.refreshIntervalInSeconds"
+        :suffix="parseDefaultValue.refreshIntervalInSeconds <= 1 ? 'Second' : 'Seconds'"
+        :label="t('harvester.backup.refreshInterval.label')"
+        :mode="mode"
+        :positive="true"
+        class="mb-5"
+        required
+        @update:value="update"
+      />
+      <Tip
+        v-if="refreshIntervalInSecondEnabled"
+        class="mb-20"
+        icon="icon icon-info"
+        :text="t('harvester.backup.refreshInterval.tip')"
+      />
       <LabeledInput
         v-model:value="parseDefaultValue.endpoint"
         class="mb-5"

pkg/harvester/components/settings/csi-driver-config.vue

@@ -75,7 +75,11 @@ export default {
       const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
 
       return this.configArr.length >= csiDrivers.length;
-    }
+    },
+
+    allowEmptySnapshotClassNameFeatureEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('allowEmptySnapshotClassName');
+    },
   },
 
   methods: {
@@ -139,7 +143,7 @@ export default {
             errors.push(this.t('validation.required', { key: this.t('harvester.setting.csiDriverConfig.volumeSnapshotClassName') }, true));
           }
 
-          if (!config.value.backupVolumeSnapshotClassName) {
+          if (!this.allowEmptySnapshotClassNameFeatureEnabled && !config.value.backupVolumeSnapshotClassName) {
             errors.push(this.t('validation.required', { key: this.t('harvester.setting.csiDriverConfig.backupVolumeSnapshotClassName') }, true));
           }
         });
@@ -158,10 +162,18 @@ export default {
       this.configArr.splice(idx, 1);
     },
 
+    isBackupVolumeSnapshotRequired(driver) {
+      return driver === LONGHORN_DRIVER;
+    },
+
     disableEdit(driver) {
       return driver === LONGHORN_DRIVER;
     },
 
+    isBackupVolumeSnapshotClassNameDisabled(driver) {
+      return driver === LONGHORN_DRIVER || this.allowEmptySnapshotClassNameFeatureEnabled;
+    },
+
     add() {
       this.configArr.push({
         key:   '',
@@ -184,6 +196,7 @@ export default {
     <InfoBox
       v-for="(driver, idx) in configArr"
       :key="idx"
+      class="box"
     >
       <button
         :disabled="disableEdit(driver.key)"
@@ -226,9 +239,9 @@ export default {
           <LabeledSelect
             v-model:value="driver.value.backupVolumeSnapshotClassName"
             :mode="mode"
-            required
+            :disabled="isBackupVolumeSnapshotClassNameDisabled(driver.key)"
-            :disabled="disableEdit(driver.key)"
             :options="getVolumeSnapshotOptions(driver.key)"
+            :required="isBackupVolumeSnapshotRequired(driver.key)"
             :label="t('harvester.setting.csiDriverConfig.backupVolumeSnapshotClassName')"
             @keydown.native.enter.prevent="()=>{}"
             @update:value="update"

pkg/harvester/components/settings/http-proxy.vue

@@ -1,6 +1,5 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 
@@ -62,7 +61,7 @@ export default {
 
     <div
       class="row"
-      @update:value="update"
+      @input="update"
     >
       <div class="col span-12">
         <LabeledInput

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

@@ -12,6 +12,9 @@ import { NODE } from '@shell/config/types';
 import { HCI } from '../../types';
 import { DOC } from '../../config/doc-links';
 import { docLink } from '../../utils/feature-flags';
+import { NETWORK_TYPE } from '../../config/types';
+
+const { L2VLAN, UNTAGGED } = NETWORK_TYPE;
 
 export default {
   name: 'HarvesterEditStorageNetwork',
@@ -57,11 +60,14 @@ export default {
   data() {
     let parsedDefaultValue = {};
     let openVlan = false;
+    let networkType = L2VLAN;
 
     try {
       parsedDefaultValue = JSON.parse(this.value.value);
+      networkType = 'vlan' in parsedDefaultValue ? L2VLAN : UNTAGGED; // backend doesn't provide networkType, so we check if vlan is provided instead
       openVlan = true;
     } catch (error) {
+      networkType = L2VLAN;
       parsedDefaultValue = {
         vlan:           '',
         clusterNetwork: '',
@@ -73,6 +79,7 @@ export default {
 
     return {
       openVlan,
+      networkType,
       errors:          [],
       exclude,
       parsedDefaultValue,
@@ -87,16 +94,35 @@ export default {
   },
 
   computed: {
+    showVlan() {
+      return this.networkType === L2VLAN;
+    },
+    networkTypes() {
+      const types = [L2VLAN];
+
+      if (this.untaggedNetworkSettingEnabled) {
+        types.push(UNTAGGED);
+      }
+
+      return types;
+    },
     storageNetworkExampleLink() {
       const version = this.$store.getters['harvester-common/getServerVersion']();
 
       return docLink(DOC.STORAGE_NETWORK_EXAMPLE, version);
     },
+
+    untaggedNetworkSettingEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('untaggedNetworkSetting');
+    },
+
     clusterNetworkOptions() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+      // untaggedNetwork filter out mgmt cluster network
+      const clusterNetworksOptions = this.networkType === UNTAGGED ? clusterNetworks.filter((net) => net.id !== 'mgmt') : clusterNetworks;
 
-      return clusterNetworks.map((n) => {
+      return clusterNetworksOptions.map((n) => {
         const disabled = !n.isReadyForStorageNetwork;
 
         return {
@@ -108,7 +134,50 @@ export default {
     },
   },
 
+  watch: {
+    networkType: {
+      handler(neu) {
+        this.parsedDefaultValue.clusterNetwork = '';
+
+        if (neu === L2VLAN) {
+          this.parsedDefaultValue.vlan = '';
+        } else {
+          delete this.parsedDefaultValue.vlan;
+        }
+      },
+      deep: true
+    }
+  },
+
   methods: {
+    inputVlan(neu) {
+      if (neu === '') {
+        this.parsedDefaultValue.vlan = '';
+
+        return;
+      }
+      const newValue = Number(neu);
+
+      if (newValue > 4094) {
+        this.parsedDefaultValue.vlan = 4094;
+      } else if (newValue < 1) {
+        this.parsedDefaultValue.vlan = 1;
+      } else {
+        this.parsedDefaultValue.vlan = newValue;
+      }
+    },
+
+    useDefault() {
+      this.openVlan = false;
+      this.networkType = L2VLAN;
+      this.parsedDefaultValue = {
+        vlan:           '',
+        clusterNetwork: '',
+        range:          '',
+        exclude:        []
+      };
+    },
+
     update() {
       const exclude = this.exclude.filter((ip) => ip);
 
@@ -138,7 +207,7 @@ export default {
           errors.push(this.t('harvester.setting.storageNetwork.range.invalid', null, true));
         }
 
-        if (!this.parsedDefaultValue.vlan) {
+        if (this.networkType === L2VLAN && !this.parsedDefaultValue.vlan) {
           errors.push(this.t('validation.required', { key: this.t('harvester.setting.storageNetwork.vlan') }, true));
         }
 
@@ -191,12 +260,25 @@ export default {
     />
 
     <div v-if="openVlan">
+      <LabeledSelect
+        v-model:value="networkType"
+        class="mb-20"
+        :options="networkTypes"
+        :mode="mode"
+        :label="t('harvester.fields.type')"
+        required
+      />
+
       <LabeledInput
-        v-model.number="parsedDefaultValue.vlan"
+        v-if="showVlan"
+        v-model:value.number="parsedDefaultValue.vlan"
+        type="number"
         class="mb-20"
         :mode="mode"
         required
+        placeholder="e.g. 1 - 4094"
         label-key="harvester.setting.storageNetwork.vlan"
+        @update:value="inputVlan"
       />
 
       <LabeledSelect

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

@@ -59,7 +59,7 @@ export default {
         name="model"
         :options="[true,false]"
         :labels="[t('generic.enabled'), t('generic.disabled')]"
-        @input="update"
+        @update:value="update"
       />
 
       <LabeledInput

pkg/harvester/config/feature-flags.js

@@ -1,42 +1,55 @@
-// https://github.com/harvester/dashboard/releases/tag/v1.3.0
+import semver from 'semver';
-const featuresV130 = [
-  'supportHarvesterClusterVersion'
-];
 
-// https://github.com/harvester/dashboard/releases/tag/v1.3.1
+const FEATURE_FLAGS = {
-const featuresV131 = [
+  'v1.3.0': [
-  ...featuresV130,
+    'supportHarvesterClusterVersion'
-  'autoRotateRke2CertsSetting',
+  ],
-  'supportBundleNodeCollectionTimeoutSetting'
+  'v1.3.1': [
-];
+    'autoRotateRke2CertsSetting',
-
+    'supportBundleNodeCollectionTimeoutSetting'
-// https://github.com/harvester/dashboard/releases/tag/v1.3.2
+  ],
-const featuresV132 = [
+  'v1.3.2': [
-  ...featuresV131,
+    'kubeconfigDefaultTokenTTLMinutesSetting',
-  'kubeconfigDefaultTokenTTLMinutesSetting',
+    'improveMaintenanceMode',
-  'improveMaintenanceMode',
+  ],
-];
+  'v1.3.3': [],
-
+  'v1.4.0': [
-// TODO: change to https://github.com/harvester/dashboard/releases/tag/v1.4.0 after v1.4.0 release
+    'cpuPinning',
-// https://github.com/harvester/dashboard/releases/tag/v1.4.0-rc5
+    'usbPassthrough',
-// https://github.com/harvester/dashboard/releases/tag/v1.4.0-rc4
+    'volumeEncryption',
-// https://github.com/harvester/dashboard/releases/tag/v1.4.0-rc3
+    'schedulingVMBackup',
-// https://github.com/harvester/dashboard/releases/tag/v1.4.0-rc2
+    'vmSnapshotQuota',
-// https://github.com/harvester/dashboard/releases/tag/v1.4.0-rc1
+    'longhornV2LVMSupport',
-const featuresV140 = [
+    'improveMaintenanceMode',
-  ...featuresV132,
+  ],
-  'cpuPinning',
+  'v1.4.1': [],
-  'usbPassthrough',
+  'v1.4.2': [
-  'volumeEncryption',
+    'refreshIntervalInSecond',
-  'schedulingVMBackup',
+    'allowEmptySnapshotClassName'
-  'vmSnapshotQuota',
+  ],
-  'longhornV2LVMSupport',
+  'v1.4.3': [],
-  'improveMaintenanceMode',
+  'v1.5.0': [
-];
+    'tpmPersistentState',
-
+    'efiPersistentState',
-export const RELEASE_FEATURES = {
+    'untaggedNetworkSetting',
-  'v1.3.0': featuresV130,
+    'skipSingleReplicaDetachedVol',
-  'v1.3.1': featuresV131,
+    'thirdPartyStorage'
-  'v1.3.2': featuresV132,
+  ],
-  'v1.4.0': featuresV140,
+  'v1.5.1': [],
 };
+
+const generateFeatureFlags = () => {
+  const versions = [...Object.keys(FEATURE_FLAGS)].filter((version) => semver.valid(version)).sort(semver.compare);
+
+  const generatedFlags = {};
+
+  versions.forEach((version, index) => {
+    const previousVersion = versions[index - 1];
+
+    generatedFlags[version] = previousVersion ? [...generatedFlags[previousVersion], ...FEATURE_FLAGS[version]] : [...FEATURE_FLAGS[version]];
+  });
+
+  return generatedFlags;
+};
+
+export const RELEASE_FEATURES = generateFeatureFlags();

pkg/harvester/config/harvester-cluster.js

@@ -31,7 +31,8 @@ import {
   FINGERPRINT,
   IMAGE_PROGRESS,
   SNAPSHOT_TARGET_VOLUME,
-  IMAGE_VIRTUAL_SIZE
+  IMAGE_VIRTUAL_SIZE,
+  IMAGE_STORAGE_CLASS
 } from './table-headers';
 
 const TEMPLATE = HCI.VM_VERSION;
@@ -221,6 +222,7 @@ export function init($plugin, store) {
     STATE,
     NAME_COL,
     NAMESPACE_COL,
+    IMAGE_STORAGE_CLASS,
     IMAGE_PROGRESS,
     IMAGE_DOWNLOAD_SIZE,
     IMAGE_VIRTUAL_SIZE,
@@ -724,7 +726,7 @@ export function init($plugin, store) {
   configureType(HCI.PCI_DEVICE, {
     isCreatable:                false,
     hiddenNamespaceGroupButton: true,
-    canYaml:                    false,
+    canYaml:                    true,
     listGroups:                 [
       {
         icon:       'icon-list-grouped',

pkg/harvester/config/harvester-manager.js

@@ -1,86 +0,0 @@
-import { HCI, MANAGEMENT, CAPI } from '@shell/config/types';
-import { HARVESTER, MULTI_CLUSTER } from '@shell/store/features';
-import { allHash } from '@shell/utils/promise';
-import { BLANK_CLUSTER } from '@shell/store/store-types.js';
-
-export const PRODUCT_NAME = 'harvester-manager';
-
-export const NAME = 'harvesterManager';
-
-const harvesterClustersLocation = {
-  name:   'c-cluster-product-resource',
-  params: {
-    cluster:  BLANK_CLUSTER,
-    product:  NAME,
-    resource: HCI.CLUSTER
-  }
-};
-
-export function init($plugin, store) {
-  const {
-    product,
-    basicType,
-    spoofedType,
-    configureType
-  } = $plugin.DSL(store, NAME);
-
-  product({
-    ifHaveType:          CAPI.RANCHER_CLUSTER,
-    ifFeature:           [MULTI_CLUSTER, HARVESTER],
-    inStore:             'management',
-    icon:                'harvester',
-    removable:           false,
-    showClusterSwitcher: false,
-    weight:              100,
-    to:                  harvesterClustersLocation,
-    category:            'hci',
-  });
-
-  configureType(HCI.CLUSTER, { showListMasthead: false });
-
-  basicType([HCI.CLUSTER]);
-  spoofedType({
-    labelKey:   'harvesterManager.cluster.label',
-    name:       HCI.CLUSTER,
-    type:       HCI.CLUSTER,
-    namespaced: false,
-    weight:     -1,
-    route:      {
-      name:   'c-cluster-product-resource',
-      params: {
-        product:  NAME,
-        resource: HCI.CLUSTER,
-      }
-    },
-    exact:   false,
-    schemas: [
-      {
-        id:                HCI.CLUSTER,
-        type:              'schema',
-        collectionMethods: [],
-        resourceFields:    {},
-        attributes:        { namespaced: true },
-      },
-    ],
-    group:        'Root',
-    getInstances: async() => {
-      const hash = {
-        rancherClusters: store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-        clusters:        store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      };
-
-      if (store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
-        hash.nodes = store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
-      }
-
-      const res = await allHash(hash);
-
-      return res.rancherClusters.map((c) => {
-        return {
-          ...c,
-          type: HCI.CLUSTER,
-        };
-      });
-    },
-  });
-}

pkg/harvester/config/harvester-map.js

@@ -1,3 +1,4 @@
+// TODO: delete this not used variable
 export const MemoryUnit = [{
   label: 'Mi',
   value: 'Mi'

pkg/harvester/config/labels-annotations.js

@@ -7,60 +7,64 @@ export const LABELS_TO_IGNORE_REGEX = [
 ];
 
 export const HCI = {
-  CLOUD_INIT:                     'harvesterhci.io/cloud-init-template',
+  CLOUD_INIT:                       'harvesterhci.io/cloud-init-template',
-  CURRENT_IP:                     'rke2.io/internal-ip',
+  CURRENT_IP:                       'rke2.io/internal-ip',
-  IMAGE_ID:                       'harvesterhci.io/imageId',
+  IMAGE_ID:                         'harvesterhci.io/imageId',
-  SSH_NAMES:                      'harvesterhci.io/sshNames',
+  SSH_NAMES:                        'harvesterhci.io/sshNames',
-  NETWORK_IPS:                    'network.harvesterhci.io/ips',
+  NETWORK_IPS:                      'network.harvesterhci.io/ips',
-  TEMPLATE_VERSION_CUSTOM_NAME:   'template-version.harvesterhci.io/customName',
+  TEMPLATE_VERSION_CUSTOM_NAME:     'template-version.harvesterhci.io/customName',
-  CREATOR:                        'harvesterhci.io/creator',
+  CREATOR:                          'harvesterhci.io/creator',
-  OS:                             'harvesterhci.io/os',
+  OS:                               'harvesterhci.io/os',
-  NETWORK_TYPE:                   'network.harvesterhci.io/type',
+  GOLDEN_IMAGE:                     'harvesterhci.io/goldenImage',
-  VM_NAME:                        'harvesterhci.io/vmName',
+  NETWORK_TYPE:                     'network.harvesterhci.io/type',
-  VM_NAME_PREFIX:                 'harvesterhci.io/vmNamePrefix',
+  VM_NAME:                          'harvesterhci.io/vmName',
-  VM_RESERVED_MEMORY:             'harvesterhci.io/reservedMemory',
+  VM_NAME_PREFIX:                   'harvesterhci.io/vmNamePrefix',
-  MAINTENANCE_STATUS:             'harvesterhci.io/maintain-status',
+  VM_RESERVED_MEMORY:               'harvesterhci.io/reservedMemory',
-  HOST_CUSTOM_NAME:               'harvesterhci.io/host-custom-name',
+  MAINTENANCE_STATUS:               'harvesterhci.io/maintain-status',
-  HOST_CONSOLE_URL:               'harvesterhci.io/host-console-url',
+  HOST_CUSTOM_NAME:                 'harvesterhci.io/host-custom-name',
-  RESTORE_NAME:                   'restore.harvesterhci.io/name',
+  HOST_CONSOLE_URL:                 'harvesterhci.io/host-console-url',
-  NODE_ROLE_MASTER:               'node-role.kubernetes.io/master',
+  RESTORE_NAME:                     'restore.harvesterhci.io/name',
-  NODE_ROLE_CONTROL_PLANE:        'node-role.kubernetes.io/control-plane',
+  NODE_ROLE_MASTER:                 'node-role.kubernetes.io/master',
-  NODE_ROLE_ETCD:                 'node-role.harvesterhci.io/witness',
+  NODE_ROLE_CONTROL_PLANE:          'node-role.kubernetes.io/control-plane',
-  PROMOTE_STATUS:                 'harvesterhci.io/promote-status',
+  NODE_ROLE_ETCD:                   'node-role.harvesterhci.io/witness',
-  MIGRATION_STATE:                'harvesterhci.io/migrationState',
+  PROMOTE_STATUS:                   'harvesterhci.io/promote-status',
-  VOLUME_CLAIM_TEMPLATE:          'harvesterhci.io/volumeClaimTemplates',
+  MIGRATION_STATE:                  'harvesterhci.io/migrationState',
-  IMAGE_NAME:                     'harvesterhci.io/image-name',
+  VOLUME_CLAIM_TEMPLATE:            'harvesterhci.io/volumeClaimTemplates',
-  INIT_IP:                        'etcd.rke2.cattle.io/node-address',
+  IMAGE_NAME:                       'harvesterhci.io/image-name',
-  NODE_SCHEDULABLE:               'kubevirt.io/schedulable',
+  INIT_IP:                          'etcd.rke2.cattle.io/node-address',
-  NETWORK_ROUTE:                  'network.harvesterhci.io/route',
+  NODE_SCHEDULABLE:                 'kubevirt.io/schedulable',
-  MATCHED_NODES:                  'network.harvesterhci.io/matched-nodes',
+  NETWORK_ROUTE:                    'network.harvesterhci.io/route',
-  OS_UPGRADE_IMAGE:               'harvesterhci.io/os-upgrade-image',
+  MATCHED_NODES:                    'network.harvesterhci.io/matched-nodes',
-  LATEST_UPGRADE:                 'harvesterhci.io/latestUpgrade',
+  OS_UPGRADE_IMAGE:                 'harvesterhci.io/os-upgrade-image',
-  UPGRADE_STATE:                  'harvesterhci.io/upgradeState',
+  LATEST_UPGRADE:                   'harvesterhci.io/latestUpgrade',
-  REAY_MESSAGE:                   'harvesterhci.io/read-message',
+  UPGRADE_STATE:                    'harvesterhci.io/upgradeState',
-  DYNAMIC_SSHKEYS_NAMES:          'harvesterhci.io/dynamic-ssh-key-names',
+  REAY_MESSAGE:                     'harvesterhci.io/read-message',
-  DYNAMIC_SSHKEYS_USERS:          'harvesterhci.io/dynamic-ssh-key-users',
+  DYNAMIC_SSHKEYS_NAMES:            'harvesterhci.io/dynamic-ssh-key-names',
-  IMAGE_SUFFIX:                   'harvesterhci.io/image-type',
+  DYNAMIC_SSHKEYS_USERS:            'harvesterhci.io/dynamic-ssh-key-users',
-  OS_TYPE:                        'harvesterhci.io/os-type',
+  IMAGE_SUFFIX:                     'harvesterhci.io/image-type',
-  STORAGE_PROVISIONER:            'harvesterhci.io/storageProvisioner',
+  OS_TYPE:                          'harvesterhci.io/os-type',
-  HOST_REQUEST:                   'management.cattle.io/pod-requests',
+  STORAGE_PROVISIONER:              'harvesterhci.io/storageProvisioner',
-  STORAGE_CLASS:                  'harvesterhci.io/storageClassName',
+  SKIP_SINGLE_REPLICA_DETACHED_VOL: 'harvesterhci.io/skipSingleReplicaDetachedVol',
-  STORAGE_NETWORK:                'storage-network.settings.harvesterhci.io',
+  HOST_REQUEST:                     'management.cattle.io/pod-requests',
-  ADDON_EXPERIMENTAL:             'addon.harvesterhci.io/experimental',
+  STORAGE_CLASS:                    'harvesterhci.io/storageClassName',
-  VOLUME_ERROR:                   'longhorn.io/volume-scheduling-error',
+  STORAGE_NETWORK:                  'storage-network.settings.harvesterhci.io',
-  KVM_AMD_CPU:                    'cpu-feature.node.kubevirt.io/svm',
+  ADDON_EXPERIMENTAL:               'addon.harvesterhci.io/experimental',
-  KVM_INTEL_CPU:                  'cpu-feature.node.kubevirt.io/vmx',
+  VOLUME_ERROR:                     'longhorn.io/volume-scheduling-error',
-  NODE_MANUFACTURER:              'manufacturer',
+  VOLUME_FOR_VM:                    'harvesterhci.io/volumeForVirtualMachine',
-  NODE_MODEL:                     'model',
+  KVM_AMD_CPU:                      'cpu-feature.node.kubevirt.io/svm',
-  NODE_SERIAL_NUMBER:             'serialNumber',
+  KVM_INTEL_CPU:                    'cpu-feature.node.kubevirt.io/vmx',
-  VM_INSUFFICIENT:                'harvesterhci.io/insufficient-resource-quota',
+  NODE_MANUFACTURER:                'manufacturer',
-  NODE_NTP_SYNC_STATUS:           'node.harvesterhci.io/ntp-service',
+  NODE_MODEL:                       'model',
-  PARENT_SRIOV:                   'harvesterhci.io/parent-sriov-network-device',
+  NODE_SERIAL_NUMBER:               'serialNumber',
-  PARENT_SRIOV_GPU:               'harvesterhci.io/parentSRIOVGPUDevice',
+  VM_INSUFFICIENT:                  'harvesterhci.io/insufficient-resource-quota',
-  VM_MAINTENANCE_MODE_STRATEGY:   'harvesterhci.io/maintain-mode-strategy',
+  NODE_NTP_SYNC_STATUS:             'node.harvesterhci.io/ntp-service',
-  NODE_CPU_MANAGER_UPDATE_STATUS: 'harvesterhci.io/cpu-manager-update-status',
+  PARENT_SRIOV:                     'harvesterhci.io/parent-sriov-network-device',
-  CPU_MANAGER:                    'cpumanager',
+  PARENT_SRIOV_GPU:                 'harvesterhci.io/parentSRIOVGPUDevice',
-  VM_DEVICE_ALLOCATION_DETAILS:   'harvesterhci.io/deviceAllocationDetails',
+  VM_MAINTENANCE_MODE_STRATEGY:     'harvesterhci.io/maintain-mode-strategy',
-  SVM_BACKUP_ID:                  'harvesterhci.io/svmbackupId',
+  NODE_CPU_MANAGER_UPDATE_STATUS:   'harvesterhci.io/cpu-manager-update-status',
-  DISABLE_LONGHORN_V2_ENGINE:     'node.longhorn.io/disable-v2-data-engine',
+  CPU_MANAGER:                      'cpumanager',
+  VM_DEVICE_ALLOCATION_DETAILS:     'harvesterhci.io/deviceAllocationDetails',
+  SVM_BACKUP_ID:                    'harvesterhci.io/svmbackupId',
+  DISABLE_LONGHORN_V2_ENGINE:       'node.longhorn.io/disable-v2-data-engine',
+  K8S_ARCH:                         'kubernetes.io/arch'
 };

pkg/harvester/config/settings.ts

@@ -65,7 +65,9 @@ export const HCI_ALLOWED_SETTINGS = {
   [HCI_SETTING.SUPPORT_BUNDLE_EXPIRATION]:              {},
   [HCI_SETTING.SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT]: { featureFlag: 'supportBundleNodeCollectionTimeoutSetting' },
   [HCI_SETTING.SUPPORT_BUNDLE_IMAGE]:                   { kind: 'json', from: 'import' },
-  [HCI_SETTING.STORAGE_NETWORK]:                        { kind: 'custom', from: 'import' },
+  [HCI_SETTING.STORAGE_NETWORK]:                        {
+    kind: 'custom', from: 'import', canReset: true
+  },
   [HCI_SETTING.VM_FORCE_RESET_POLICY]:                  { kind: 'json', from: 'import' },
   [HCI_SETTING.SSL_CERTIFICATES]:                       { kind: 'json', from: 'import' },
   [HCI_SETTING.SSL_PARAMETERS]:                         {

pkg/harvester/config/table-headers.js

@@ -88,3 +88,13 @@ export const MACHINE_POOLS = {
   align:    'center',
   width:    100,
 };
+
+// The STORAGE_CLASS column in VM image list page
+export const IMAGE_STORAGE_CLASS = {
+  name:     'imageStorageClass',
+  labelKey: 'harvester.tableHeaders.storageClass',
+  sort:     'imageStorageClass',
+  value:    'imageStorageClass',
+  align:    'left',
+  width:    200,
+};

pkg/harvester/config/types.js

@@ -2,3 +2,13 @@ export const BACKUP_TYPE = {
   BACKUP:   'backup',
   SNAPSHOT: 'snapshot'
 };
+
+export const NETWORK_TYPE = {
+  L2VLAN:   'L2VlanNetwork',
+  UNTAGGED: 'UntaggedNetwork'
+};
+
+export const VOLUME_MODE = {
+  BLOCK:       'Block',
+  FILE_SYSTEM: 'Filesystem'
+};

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

@@ -4,6 +4,7 @@ import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import { LONGHORN, METRIC } from '@shell/config/types';
 import { Banner } from '@components/Banner';
+import { UNIT_SUFFIX } from '../../utils/unit';
 import HarvesterCPUUsed from '../../formatters/HarvesterCPUUsed';
 import HarvesterMemoryUsed from '../../formatters/HarvesterMemoryUsed';
 import HarvesterStorageUsed from '../../formatters/HarvesterStorageUsed';
@@ -121,7 +122,7 @@ export default {
     memoryUnits() {
       const exponent = exponentNeeded(this.memoryTotal, 1024);
 
-      return `${ UNITS[exponent] }iB`;
+      return `${ UNITS[exponent] }${ UNIT_SUFFIX }`;
     },
 
     nodeType() {

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

@@ -24,35 +24,24 @@ export default {
   },
 
   async fetch() {
-    const hash = await allHash({
+    await allHash({
       vms:               this.$store.dispatch('harvester/findAll', { type: HCI.VM }),
       vmis:              this.$store.dispatch('harvester/findAll', { type: HCI.VMI }),
       allClusterNetwork: this.$store.dispatch('harvester/findAll', { type: HCI.CLUSTER_NETWORK }),
     });
-    const instanceMap = {};
-
-    (hash.vmis || []).forEach((vmi) => {
-      const vmiUID = vmi?.metadata?.ownerReferences?.[0]?.uid;
-
-      if (vmiUID) {
-        instanceMap[vmiUID] = vmi;
-      }
-    });
-
-    this.allClusterNetwork = hash.allClusterNetwork;
-    this.rows = hash.vms.filter((row) => {
-      return instanceMap[row.metadata?.uid]?.status?.nodeName === this.node?.metadata?.labels?.[HOSTNAME];
-    });
-  },
-
-  data() {
-    return {
-      rows:              [],
-      allClusterNetwork: []
-    };
   },
 
   computed: {
+    allClusterNetwork() {
+      return this.$store.getters['harvester/all'](HCI.CLUSTER_NETWORK);
+    },
+
+    rows() {
+      const vms = this.$store.getters['harvester/all'](HCI.VM);
+
+      return vms.filter((vm) => vm.vmi?.status?.nodeName === this.node?.metadata?.labels?.[HOSTNAME]);
+    },
+
     headers() {
       return [
         STATE,
@@ -87,8 +76,6 @@ export default {
       ];
     },
   },
-
-  methods: {}
 };
 </script>
 

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

@@ -9,7 +9,7 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import Loading from '@shell/components/Loading.vue';
 import SortableTable from '@shell/components/SortableTable';
 import Banner from '@components/Banner/Banner.vue';
-
+import { UNIT_SUFFIX } from '../../utils/unit';
 import metricPoller from '@shell/mixins/metric-poller';
 import {
   METRIC, NODE, LONGHORN, POD, EVENT
@@ -178,7 +178,7 @@ export default {
         minExponent:  3,
         maxExponent:  3,
         maxPrecision: 2,
-        suffix:       'iB',
+        suffix:       UNIT_SUFFIX,
       };
 
       const longhornDisks = Object.keys(diskStatus).map((key) => {

pkg/harvester/dialog/CloneVmDialog.vue

@@ -106,6 +106,12 @@ export default {
         :label="t('harvester.modal.cloneVM.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template
@@ -127,11 +133,6 @@ export default {
           @click="create"
         />
       </div>
-
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/ConfirmExecutionDialog.vue

@@ -0,0 +1,175 @@
+<script>
+import { mapState } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { alternateLabel } from '@shell/utils/platform';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import { escapeHtml } from '@shell/utils/string';
+
+/**
+ * @name ConfirmExecutionDialog
+ * @description Dialog component to confirm the related resources before executing the action.
+ */
+export default {
+  name: 'ConfirmExecutionDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+  },
+
+  props: {
+    /**
+     * @property resources to be deleted.
+     * @type {Resource[]} Array of the resource model's instance
+     */
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+
+    warningMessageKey() {
+      return this.modalData.warningMessageKey;
+    },
+
+    names() {
+      return this.resources.map((obj) => obj.nameDisplay).slice(0, 5);
+    },
+
+    resourceNames() {
+      return this.names.reduce((res, name, i) => {
+        if (i >= 5) {
+          return res;
+        }
+        res += `<b>${ escapeHtml(name) }</b>`;
+        if (i === this.names.length - 1) {
+          res += this.plusMore;
+        } else {
+          res += i === this.resources.length - 2 ? ' and ' : ', ';
+        }
+
+        return res;
+      }, '');
+    },
+
+    plusMore() {
+      const remaining = this.resources.length - this.names.length;
+
+      return this.t('dialog.confirmExecution.andOthers', { count: remaining }, true);
+    },
+
+    type() {
+      const types = new Set(this.resources.reduce((array, each) => {
+        array.push(each.type);
+
+        return array;
+      }, []));
+
+      if (types.size > 1) {
+        return this.t('generic.resource', { count: this.resources.length });
+      }
+
+      const schema = this.resources[0]?.schema;
+
+      if ( !schema ) {
+        return `resource${ this.resources.length === 1 ? '' : 's' }`;
+      }
+
+      return this.$store.getters['type-map/labelFor'](schema, this.resources.length);
+    },
+
+    protip() {
+      return this.t('dialog.confirmExecution.protip', { alternateLabel });
+    },
+  },
+
+  methods: {
+    escapeHtml,
+
+    close() {
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      try {
+        for (const resource of this.resources) {
+          await resource.doActionGrowl(this.modalData.action, {});
+        }
+        buttonDone(true);
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('dialog.confirmExecution.title') }}
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <span
+          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
+        ></span>
+        <div class="text-info mt-20">
+          {{ protip }}
+        </div>
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+          :label="error"
+          color="error"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="actions">
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="apply"
+          class="btn bg-primary ml-10"
+          :disabled="applyDisabled"
+          @click="apply"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .modal-container {
+    max-width: 400px;
+  }
+
+  .actions {
+    width: 100%;
+    text-align: right;
+  }
+</style>

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -42,8 +42,25 @@ export default {
   computed: {
     ...mapState('action-menu', ['modalData']),
 
-    warningMessageKey() {
+    title() {
-      return this.modalData.warningMessageKey;
+      return this.modalData.title || 'dialog.promptRemove.title';
+    },
+
+    formattedType() {
+      return this.type.toLowerCase();
+    },
+
+    warningMessage() {
+      if (this.modalData.warningMessage) return this.modalData.warningMessage;
+
+      const isPlural = this.type.endsWith('s');
+      const thisOrThese = isPlural ? 'these' : 'this';
+      const defaultMessage = this.t('dialog.promptRemove.warningMessage', {
+        type: this.formattedType,
+        thisOrThese,
+      });
+
+      return defaultMessage;
     },
 
     names() {
@@ -70,6 +87,12 @@ export default {
       return this.resources[0].nameDisplay;
     },
 
+    needConfirmation() {
+      const { needConfirmation = true } = this.modalData ;
+
+      return needConfirmation === true;
+    },
+
     plusMore() {
       const remaining = this.resources.length - this.names.length;
 
@@ -97,11 +120,15 @@ export default {
     },
 
     deleteDisabled() {
+      if (!this.needConfirmation) {
+        return false;
+      }
+
       return this.confirmName !== this.nameToMatch;
     },
 
     protip() {
-      return this.t('promptRemove.protip', { alternateLabel });
+      return this.t('dialog.promptRemove.protip', { alternateLabel });
     },
   },
 
@@ -137,35 +164,45 @@ export default {
   >
     <template #title>
       <h4 class="text-default-text">
-        {{ t('promptRemove.title') }}
+        {{ t(title, { type }, true) }}
       </h4>
     </template>
 
     <template #body>
       <div class="pl-10 pr-10">
         <span
-          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
+          v-clean-html="warningMessage"
         ></span>
 
-        <div class="mt-10 mb-10">
+        <div
-          <span
+          v-if="needConfirmation"
-            v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+          class="mt-20"
-          ></span>
+        >
-        </div>
+          <div class="mt-10 mb-10">
-        <div class="mb-10">
+            <span
-          <CopyToClipboardText :text="nameToMatch" />
+              v-clean-html="t('dialog.promptRemove.confirmName', {
-        </div>
+                type: formattedType,
-        <input
+                nameToMatch: escapeHtml(nameToMatch)
-          id="confirm"
+              }, true)"
-          v-model="confirmName"
+            ></span>
-          type="text"
+          </div>
-        />
+          <div class="mb-10">
-        <div class="text-info mt-20">
+            <CopyToClipboardText :text="nameToMatch" />
-          {{ protip }}
+          </div>
+          <input
+            id="confirm"
+            v-model="confirmName"
+            type="text"
+          />
+          <div class="text-info mt-20">
+            {{ protip }}
+          </div>
         </div>
         <Banner
           v-for="(error, i) in errors"
           :key="i"
+          :label="error"
+          color="error"
         />
       </div>
     </template>

pkg/harvester/dialog/DeepCloneVmDialog.vue

@@ -106,6 +106,12 @@ export default {
         :label="t('harvester.modal.cloneVM.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -125,13 +131,6 @@ export default {
             @click="create"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/EnableUSBPassthrough.vue

@@ -93,7 +93,10 @@ export default {
     </template>
 
     <template #body>
-      {{ t('harvester.usb.enablePassthroughWarning') }}
+      <t
+        k="harvester.usb.enablePassthroughWarning"
+        :raw="true"
+      />
     </template>
 
     <template #actions>

pkg/harvester/dialog/HarvesterAddHotplugModal.vue

@@ -57,6 +57,10 @@ export default {
             if (!!pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
               return false;
             }
+            // we won't show golden image volume in the hot plug volume modal
+            if (pvc.isGoldenImageVolume) {
+              return false;
+            }
 
             return !pvc.attachVM;
           })
@@ -137,6 +141,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -156,11 +166,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterBackupModal.vue

@@ -103,6 +103,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -121,13 +127,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterCloneTemplate.vue

@@ -120,6 +120,12 @@ export default {
         v-model:value="description"
         :label="t('harvester.modal.createTemplate.description')"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -138,11 +144,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue

@@ -128,6 +128,12 @@ export default {
       <Banner color="warning">
         <span>{{ t('harvester.modal.ejectCDROM.warnTip') }}</span>
       </Banner>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -147,13 +153,6 @@ export default {
             @click="remove"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterExportImageDialog.vue

@@ -34,9 +34,14 @@ export default {
 
     await allHash(hash);
 
-    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
+    const allStorages = this.allStorageClasses;
+    const defaultStorage = allStorages.find((s) => s.isDefault);
 
-    this['storageClassName'] = defaultStorage?.metadata?.name || 'longhorn';
+    if (this.isLonghornV1Volume) {
+      this['storageClassName'] = defaultStorage?.metadata?.name || 'longhorn';
+    } else {
+      this['storageClassName'] = this.nonLonghornV1StorageClasses[0]?.metadata?.name || '';
+    }
   },
 
   data() {
@@ -54,7 +59,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
 
     actionResource() {
-      return this.resources[0];
+      return this.resources[0] || {};
     },
 
     namespaces() {
@@ -73,15 +78,33 @@ export default {
       return out;
     },
 
+    isLonghornV1Volume() {
+      return this.actionResource?.isLonghornV1 === true;
+    },
+
     disableSave() {
       return !(this.name && this.namespace && this.storageClassName);
     },
 
-    storageClassOptions() {
+    allStorageClasses() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
-      const out = storages.filter((s) => !s.parameters?.backingImage).map((s) => {
+      return this.$store.getters[`${ inStore }/all`](STORAGE_CLASS) || [];
+    },
+
+    nonLonghornV1StorageClasses() {
+      return this.allStorageClasses.filter((s) => s.isLonghornV1 === false) || [];
+    },
+
+    storageClassOptions() {
+      let storages = this.allStorageClasses;
+
+      // Volume with non-longhorn v1 sc can't be exported to longhorn v1 sc image
+      if (!this.isLonghornV1Volume) {
+        storages = this.allStorageClasses.filter((s) => s.isLonghornV1 === false);
+      }
+
+      const options = storages.filter((s) => !s.parameters?.backingImage).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
         return {
@@ -90,7 +113,7 @@ export default {
         };
       }) || [];
 
-      return out;
+      return options;
     },
   },
 
@@ -164,6 +187,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -182,11 +211,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterImageDownloader.vue

@@ -0,0 +1,165 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HCI } from '../types';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
+
+export default {
+  name: 'HarvesterImageDownloaderDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton, Banner, Card, AppModal
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [], isOpen: false };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    downloadImageInProgress() {
+      return this.$store.getters['harvester-common/isDownloadImageInProgress'];
+    },
+
+    image() {
+      return this.resources[0] || {};
+    },
+
+    imageName() {
+      return this.image?.name || '';
+    },
+
+    imageVirtualSize() {
+      return this.image?.virtualSize || this.image?.downSize || '';
+    }
+  },
+
+  methods: {
+    async cancelDownload() {
+      const url = this.image?.links?.downloadcancel;
+
+      if (url) {
+        await this.$store.dispatch('harvester/request', { url });
+      }
+    },
+
+    async close() {
+      if (this.downloadImageInProgress) {
+        this.$store.commit('harvester-common/setDownloadImageCancel', true);
+        this.$store.commit('harvester-common/setDownloadImageInProgress', false);
+        await this.cancelDownload();
+      }
+      this.$emit('close');
+    },
+
+    async startDownload(buttonCb) {
+      // clean the download image CRD first.
+      await this.cancelDownload();
+      this.$store.commit('harvester-common/setDownloadImageCancel', false);
+      this.$store.commit('harvester-common/setDownloadImageInProgress', false);
+      this.errors = [];
+
+      const name = this.image?.name || '';
+      const namespace = this.image?.namespace || '';
+
+      const imageCrd = {
+        apiVersion: 'harvesterhci.io/v1beta1',
+        type:       HCI.VM_IMAGE_DOWNLOADER,
+        kind:       'VirtualMachineImageDownloader',
+        metadata:   {
+          name,
+          namespace
+        },
+        spec: { imageName: name }
+      };
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const imageCreate = await this.$store.dispatch(`${ inStore }/create`, imageCrd);
+
+      try {
+        await imageCreate.save();
+        this.$store.commit('harvester-common/setDownloadImageId', `${ namespace }/${ name }`, { root: true });
+        this.$store.dispatch('harvester-common/downloadImageProgress', { root: true });
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <app-modal
+    class="image-downloader-modal"
+    name="image-download-dialog"
+    height="auto"
+    :width="600"
+    :click-to-close="false"
+    @close="close"
+  >
+    <Card :show-highlight-border="false">
+      <template #title>
+        {{ t('harvester.modal.downloadImage.title') }}
+      </template>
+
+      <template #body>
+        <Banner color="info">
+          {{ t('harvester.modal.downloadImage.banner', { size: imageVirtualSize }) }}
+        </Banner>
+        {{ t('harvester.modal.downloadImage.startMessage') }}
+        <br /><br />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+      </template>
+
+      <template #actions>
+        <div class="actions">
+          <div class="buttons">
+            <button
+              class="btn role-secondary mr-10"
+              @click="close"
+            >
+              {{ t('generic.cancel') }}
+            </button>
+            <AsyncButton
+              type="submit"
+              mode="download"
+              :disabled="downloadImageInProgress"
+              @click="startDownload"
+            />
+          </div>
+        </div>
+      </template>
+    </Card>
+  </app-modal>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>

pkg/harvester/dialog/HarvesterMigrationDialog.vue

@@ -161,6 +161,12 @@ export default {
         :placeholder="t('harvester.modal.migration.fields.nodeName.placeholder')"
         :options="nodeNameList"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template
@@ -181,12 +187,6 @@ export default {
           @click="apply"
         />
       </div>
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/HarvesterQuotaDialog.vue

@@ -5,6 +5,7 @@ import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 import UnitInput from '@shell/components/form/UnitInput';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+import { GIBIBYTE } from '../utils/unit';
 
 export default {
   name: 'HarvesterVMQuotaDialog',
@@ -29,6 +30,7 @@ export default {
 
   data() {
     return {
+      GIBIBYTE,
       totalSnapshotSize: '',
       errors:            []
     };
@@ -44,7 +46,6 @@ export default {
   },
 
   methods: {
-
     close() {
       this.totalSnapshotSize = '';
       this.$emit('close');
@@ -92,9 +93,15 @@ export default {
         :input-exponent="3"
         :increment="1024"
         :output-modifier="true"
-        suffix="GiB"
+        :suffix="GIBIBYTE"
         class="mb-20"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -108,12 +115,6 @@ export default {
           </button>
           <AsyncButton @click="save" />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterRestoreDialog.vue

@@ -136,6 +136,12 @@ export default {
         :options="backupOption"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -154,11 +160,6 @@ export default {
             @click="saveRestore"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterUnplugVolume.vue

@@ -90,6 +90,12 @@ export default {
         v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
         class="text-default-text"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -111,13 +117,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue

@@ -132,6 +132,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -150,11 +156,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue

@@ -107,6 +107,12 @@ export default {
         :placeholder="t('harvester.harvesterVlanConfigMigrateDialog.targetClusterNetwork.placeholder')"
         :options="clusterNetworks"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -125,11 +131,6 @@ export default {
             @click="apply"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/RestartVMDialog.vue

@@ -70,16 +70,16 @@ export default {
           v-clean-html="t('harvester.modal.restart.tip')"
           class="pl-10 pr-10"
         />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </template>
 
       <template #actions>
         <div class="bottom">
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
           <div class="buttons">
             <button
               class="btn role-secondary mr-10"

pkg/harvester/dialog/RestoreSnapshotDialog.vue

@@ -145,6 +145,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -162,10 +168,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/SnapshotDialog.vue

@@ -79,6 +79,12 @@ export default {
         :label="t('harvester.modal.snapshot.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -96,12 +102,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/VolumeCloneDialog.vue

@@ -98,6 +98,12 @@ export default {
         :label="t('harvester.modal.volumeClone.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -115,10 +121,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>

pkg/harvester/edit/harvesterhci.io.addon/nvidia-driver-toolkit.vue

@@ -10,7 +10,7 @@ import { Banner } from '@components/Banner';
 
 import CreateEditView from '@shell/mixins/create-edit-view';
 
-const DEFAULT_VALUE = { image: { repo: 'rancher/harvester-nvidia-driver-toolkit' } };
+const DEFAULT_VALUE = { image: { repository: 'rancher/harvester-nvidia-driver-toolkit' } };
 
 export default {
   name:       'EditAddonNvidiaDriverToolkit',
@@ -122,7 +122,7 @@ export default {
           >
             <div class="col span-6">
               <LabeledInput
-                v-model:value="valuesContentJson.image.repo"
+                v-model:value="valuesContentJson.image.repository"
                 :mode="mode"
                 :required="true"
                 label-key="harvester.addons.nvidiaDriverToolkit.image.repository"

pkg/harvester/edit/harvesterhci.io.addon/vm-import-controller.vue

@@ -1,34 +1,31 @@
 <script>
+import merge from 'lodash/merge';
+import jsyaml from 'js-yaml';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-
 import CreateEditView from '@shell/mixins/create-edit-view';
-
 import { STORAGE_CLASS } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-import { set, get, clone } from '@shell/utils/object';
-
-const VALUES_YAML_KEYS = [
-  'resources.requests.cpu',
-  'resources.requests.memory',
-  'resources.limits.cpu',
-  'resources.limits.memory',
-  'pvcClaim.enabled',
-  'pvcClaim.size',
-  'pvcClaim.storageClassName',
-];
 
 const DEFAULT_VALUES = {
-  'resources.requests.cpu':    '0.5',
+  resources: {
-  'resources.requests.memory': '2Gi',
+    requests: {
-  'resources.limits.cpu':      '2',
+      cpu:    '0.5',
-  'resources.limits.memory':   '4Gi',
+      memory: '2Gi'
-  'pvcClaim.enabled':          false,
+    },
-  'pvcClaim.size':             '200Gi',
+    limits: {
-  'pvcClaim.storageClassName': '',
+      cpu:    '2',
+      memory: '4Gi'
+    }
+  },
+  pvcClaim: {
+    enabled:          false,
+    size:             '200Gi',
+    storageClassName: ''
+  }
 };
 
 export default {
@@ -64,19 +61,7 @@ export default {
   },
 
   data() {
-    let valuesObj = {};
+    const valuesContent = this.parseValuesContent();
-
-    try {
-      valuesObj = JSON.parse(this.value?.spec?.valuesContent || '{}');
-    } catch (err) {}
-
-    const valuesContent = clone(valuesObj);
-
-    VALUES_YAML_KEYS.map((key) => {
-      if (!get(valuesObj, key)) {
-        set(valuesContent, key, DEFAULT_VALUES[key]);
-      }
-    });
 
     return { valuesContent };
   },
@@ -100,8 +85,21 @@ export default {
   },
 
   methods: {
+    parseValuesContent() {
+      try {
+        return merge({}, DEFAULT_VALUES, jsyaml.load(this.value.spec.valuesContent));
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+          err:   err.data || err,
+        }, { root: true });
+
+        return DEFAULT_VALUES;
+      }
+    },
+
     update() {
-      set(this.value, 'spec.valuesContent', JSON.stringify(this.valuesContent));
+      this.value.spec.valuesContent = jsyaml.dump(this.valuesContent);
     },
 
     setDefaultClassName() {

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

@@ -20,7 +20,7 @@ import Loading from '@shell/components/Loading.vue';
 import MessageLink from '@shell/components/MessageLink';
 import { ADD_ONS } from '@pkg/harvester/config/harvester-map';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '@pkg/harvester/config/harvester';
-
+import { UNIT_SUFFIX } from '../../utils/unit';
 import { _EDIT } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { Banner } from '@components/Banner';
@@ -185,7 +185,7 @@ export default {
         minExponent:  3,
         maxExponent:  3,
         maxPrecision: 2,
-        suffix:       'iB',
+        suffix:       UNIT_SUFFIX,
       };
 
       const longhornDisks = Object.keys(diskStatus).map((key) => {
@@ -457,7 +457,7 @@ export default {
           const devPath = d.spec?.devPath;
           const deviceType = d.status?.deviceStatus?.details?.deviceType;
           const sizeBytes = d.status?.deviceStatus?.capacity?.sizeBytes;
-          const size = formatSi(sizeBytes, { increment: 1024 });
+          const size = formatSi(sizeBytes, { increment: 1024, suffix: UNIT_SUFFIX });
           const parentDevice = d.status?.deviceStatus?.parentDevice;
           const isChildAdded = this.newDisks.find((newDisk) => newDisk.blockDevice?.status?.deviceStatus?.parentDevice === devPath);
           const name = d.displayName;

pkg/harvester/edit/harvesterhci.io.logging.output.vue

@@ -74,7 +74,6 @@ export default {
     if (this.isCreate) {
       this.value.metadata.namespace = 'default';
     }
-
     set(this.value, 'spec', this.value.spec || {});
 
     const providers = PROVIDERS.map((provider) => ({
@@ -83,14 +82,6 @@ export default {
       label: this.t(provider.labelKey)
     }));
 
-    if (this.mode !== _VIEW) {
-      this.value['spec'] = this.value.spec || {};
-
-      providers.forEach((provider) => {
-        this.value.spec[provider.name] = this.value.spec[provider.name] || clone(provider.default);
-      });
-    }
-
     const selectedProviders = providers.filter((provider) => {
       const specProvider = this.value.spec[provider.name];
       const correctedSpecProvider = provider.name === 'forward' ? specProvider?.servers?.[0] || {} : specProvider;
@@ -98,7 +89,12 @@ export default {
       return !isEmpty(correctedSpecProvider) && !isEqual(correctedSpecProvider, provider.default);
     });
 
-    const selectedProvider = selectedProviders?.[0]?.value || providers[0].value;
+    const selectedProvider = selectedProviders?.[0]?.value || providers[0].value; // selected provider name
+    const selectedProviderDefault = providers.find((p) => p.name === selectedProvider)?.default || providers[0].default;
+
+    if (this.mode !== _VIEW) {
+      set(this.value.spec, selectedProvider, this.value.spec[selectedProvider] || clone(selectedProviderDefault));
+    }
 
     return {
       bufferYaml:                   '',
@@ -129,6 +125,18 @@ export default {
     outputTypeOptions() {
       return OUTPUT_TYPE;
     },
+    outputProvider: {
+      get() {
+        return this.selectedProvider;
+      },
+
+      set(newProvider) {
+        this.selectedProvider = newProvider;
+        const providerDefaultSpec = this.providers.find((p) => p.name === newProvider)?.default || {};
+
+        this.value.spec = { [newProvider]: this.value.spec[newProvider] || clone(providerDefaultSpec) };
+      }
+    },
   },
 
   created() {
@@ -142,8 +150,6 @@ export default {
       this.$refs.tabbed.select(provider.name);
     },
     willSave() {
-      this.value.spec = { [this.selectedProvider]: this.value.spec[this.selectedProvider] };
-
       const bufferJson = jsyaml.load(this.bufferYaml);
 
       if (!isEmpty(bufferJson)) {
@@ -236,7 +242,7 @@ export default {
           <div class="row">
             <div class="col span-6">
               <LabeledSelect
-                v-model:value="selectedProvider"
+                v-model:value="outputProvider"
                 label="Output"
                 :options="providers"
                 :mode="mode"

pkg/harvester/edit/harvesterhci.io.management.cluster.vue

@@ -1,166 +0,0 @@
-<script>
-import CreateEditView from '@shell/mixins/create-edit-view';
-import CruResource from '@shell/components/CruResource';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
-import Tab from '@shell/components/Tabbed/Tab';
-import Tabbed from '@shell/components/Tabbed';
-import { HCI, SCHEMA, CAPI, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
-import ClusterMembershipEditor from '@shell/components/form/Members/ClusterMembershipEditor';
-import { Banner } from '@components/Banner';
-import Labels from '@shell/edit/provisioning.cattle.io.cluster/Labels';
-import AgentEnv from '@shell/edit/provisioning.cattle.io.cluster/AgentEnv';
-import { set, get, clone } from '@shell/utils/object';
-import { CAPI as CAPI_LABEL } from '@shell/config/labels-annotations';
-
-import { createYaml } from '@shell/utils/create-yaml';
-
-const REAL_TYPE = CAPI.RANCHER_CLUSTER;
-
-export default {
-  emits: ['input'],
-
-  components: {
-    Banner,
-    ClusterMembershipEditor,
-    NameNsDescription,
-    CruResource,
-    Tab,
-    Tabbed,
-    Labels,
-    AgentEnv
-  },
-
-  mixins: [CreateEditView],
-
-  inheritAttrs: false,
-
-  props: {
-    mode: {
-      type:     String,
-      required: true,
-    },
-
-    value: {
-      type:     Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return { membershipUpdate: {} };
-  },
-
-  computed: {
-    generateYaml() {
-      return () => {
-        const resource = this.value;
-
-        const inStore = this.$store.getters['currentStore'](resource);
-        const schemas = this.$store.getters[`${ inStore }/all`](SCHEMA);
-        const clonedResource = clone(resource);
-
-        delete clonedResource.isSpoofed;
-
-        const out = createYaml(schemas, REAL_TYPE, clonedResource);
-
-        return out;
-      };
-    },
-  },
-
-  methods: {
-    done() {
-      return this.$router.replace({
-        name:   'c-cluster-product-resource-namespace-id',
-        params: {
-          resource:  HCI.CLUSTER,
-          namespace: this.value.metadata.namespace,
-          id:        this.value.metadata.name,
-        },
-      });
-    },
-    async saveOverride() {
-      set(this.value, 'metadata.labels', {
-        ...(get(this.value, 'metadata.labels') || {}),
-        [CAPI_LABEL.PROVIDER]: VIRTUAL_HARVESTER_PROVIDER,
-      });
-
-      set(this.value, 'type', REAL_TYPE);
-
-      await this.save(...arguments);
-
-      this.value.waitForMgmt().then(() => {
-        if (this.membershipUpdate.save) {
-          this.membershipUpdate.save(this.value.mgmt.id);
-        }
-      });
-    },
-    onMembershipUpdate(update) {
-      this['membershipUpdate'] = update;
-    },
-  },
-};
-</script>
-
-<template>
-  <CruResource
-    :mode="mode"
-    :resource="value"
-    :errors="errors"
-    :validation-passed="true"
-    :done-route="doneRoute"
-    :generate-yaml="generateYaml"
-    @finish="saveOverride"
-    @error="e=>errors = e"
-  >
-    <Banner
-      v-if="isCreate"
-      color="warning"
-    >
-      {{ t('harvesterManager.cluster.supportMessage') }}
-    </Banner>
-    <div class="mt-20">
-      <NameNsDescription
-        v-if="!isView"
-        :value="value"
-        :mode="mode"
-        :namespaced="false"
-        name-label="cluster.name.label"
-        name-placeholder="cluster.name.placeholder"
-        description-label="cluster.description.label"
-        description-placeholder="cluster.description.placeholder"
-        @update:value="$emit('input', $event)"
-      />
-    </div>
-
-    <Tabbed :side-tabs="true">
-      <Tab
-        name="memberRoles"
-        label-key="cluster.tabs.memberRoles"
-        :weight="3"
-      >
-        <Banner
-          v-if="isEdit"
-          color="info"
-        >
-          {{ t('cluster.memberRoles.removeMessage') }}
-        </Banner>
-        <ClusterMembershipEditor
-          :mode="mode"
-          :parent-id="value.mgmt ? value.mgmt.id : null"
-          @membership-update="onMembershipUpdate"
-        />
-      </Tab>
-      <AgentEnv
-        :value="value"
-        :mode="mode"
-        @update:value="$emit('input', $event)"
-      />
-      <Labels
-        :value="value"
-        :mode="mode"
-        @update:value="$emit('input', $event)"
-      />
-    </Tabbed>
-  </CruResource>
-</template>

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

@@ -11,6 +11,9 @@ import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-anno
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { allHash } from '@shell/utils/promise';
 import { HCI } from '../types';
+import { NETWORK_TYPE } from '../config/types';
+
+const { L2VLAN, UNTAGGED } = NETWORK_TYPE;
 
 const AUTO = 'auto';
 const MANUAL = 'manual';
@@ -48,7 +51,7 @@ export default {
       config.bridge = config.bridge.slice(0, -3);
     }
 
-    const type = this.value.vlanType || 'L2VlanNetwork' ;
+    const type = this.value.vlanType || L2VLAN ;
 
     return {
       config,
@@ -101,15 +104,15 @@ export default {
     },
 
     networkType() {
-      return ['L2VlanNetwork', 'UntaggedNetwork'];
+      return [L2VLAN, UNTAGGED];
     },
 
     isUntaggedNetwork() {
       if (this.isView) {
-        return this.value.vlanType === 'UntaggedNetwork';
+        return this.value.vlanType === UNTAGGED;
       }
 
-      return this.type === 'UntaggedNetwork';
+      return this.type === UNTAGGED;
     }
   },
 

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

@@ -233,7 +233,7 @@ export default {
           :disabled="isEdit || isView"
           :mode="mode"
           row
-          @input="onTypeChange"
+          @update:value="onTypeChange"
         />
       </div>
       <div class="row mb-30">

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

@@ -23,10 +23,9 @@ 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';
 
-const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
-
 export const LVM_TOPOLOGY_LABEL = 'topology.lvm.csi/node';
 
+const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
 const VOLUME_BINDING_MODE_IMMEDIATE = 'Immediate';
 const VOLUME_BINDING_MODE_WAIT = 'WaitForFirstConsumer';
 

pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_v1.vue

@@ -10,17 +10,6 @@ import { clone } from '@shell/utils/object';
 import { uniq } from '@shell/utils/array';
 import { DATA_ENGINE_V1 } from '../../../models/harvester/persistentvolumeclaim';
 
-// UI components for Longhorn storage class parameters
-const DEFAULT_PARAMETERS = [
-  'numberOfReplicas',
-  'staleReplicaTimeout',
-  'diskSelector',
-  'nodeSelector',
-  'migratable',
-  'encrypted',
-  'dataEngine',
-];
-
 const {
   CSI_PROVISIONER_SECRET_NAME,
   CSI_PROVISIONER_SECRET_NAMESPACE,
@@ -141,11 +130,17 @@ export default {
       get() {
         const parameters = clone(this.value?.parameters) || {};
 
-        DEFAULT_PARAMETERS.forEach((key) => {
+        // UI components for Longhorn storage class parameters
-          delete parameters[key];
+        const defaultParameters = [
-        });
+          'numberOfReplicas',
+          'staleReplicaTimeout',
+          'diskSelector',
+          'nodeSelector',
+          'migratable',
+          ...(this.value.volumeEncryptionFeatureEnabled ? ['encrypted', 'dataEngine'] : []),
+        ];
 
-        Object.values(CSI_SECRETS).forEach((key) => {
+        [...defaultParameters, ...Object.values(CSI_SECRETS)].forEach((key) => {
           delete parameters[key];
         });
 
@@ -311,16 +306,16 @@ export default {
         </LabeledSelect>
       </div>
     </div>
+    <div class="row mt-20">
+      <RadioGroup
+        v-model:value="value.parameters.migratable"
+        name="layer3NetworkMode"
+        :label="t('harvester.storage.parameters.migratable.label')"
+        :mode="mode"
+        :options="migratableOptions"
+      />
+    </div>
     <template v-if="value.volumeEncryptionFeatureEnabled">
-      <div class="row mt-20">
-        <RadioGroup
-          v-model:value="value.parameters.migratable"
-          name="layer3NetworkMode"
-          :label="t('harvester.storage.parameters.migratable.label')"
-          :mode="mode"
-          :options="migratableOptions"
-        />
-      </div>
       <div class="row mt-20">
         <RadioGroup
           v-model:value="volumeEncryption"

pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_v2.vue

@@ -63,7 +63,7 @@ export default {
         diskSelector:        null,
         nodeSelector:        null,
         encrypted:           'false',
-        migratable:          'false',
+        migratable:          this.value.thirdPartyStorageFeatureEnabled ? 'true' : 'false',
         dataEngine:          DATA_ENGINE_V2
       };
     }
@@ -318,7 +318,7 @@ export default {
         :label="t('harvester.storage.parameters.migratable.label')"
         :mode="mode"
         :options="migratableOptions"
-        :disabled="true"
+        :disabled="!value.thirdPartyStorageFeatureEnabled"
       />
     </div>
     <div class="row mt-20">

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

@@ -24,6 +24,7 @@ const CLONE = 'clone';
 const DOWNLOAD = 'download';
 const UPLOAD = 'upload';
 const rawORqcow2 = 'raw_qcow2';
+const LONGHORN = 'longhorn';
 
 export default {
   name: 'EditImage',
@@ -61,11 +62,11 @@ export default {
       storageClasses: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
     });
 
-    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
+    this['storageClassName'] = this.storageClassName || this.defaultStorageClassName();
-
-    this['storageClassName'] = this.storageClassName || defaultStorage?.metadata?.name || 'longhorn';
     this.images = this.$store.getters[`${ inStore }/all`](HCI.IMAGE);
 
+    this.storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
     const { securityParameters } = this.value.spec;
 
     // edit and view mode should show the source image
@@ -100,14 +101,15 @@ export default {
     }
 
     return {
-      selectedImage: null,
+      selectedImage:  null,
-      images:        [],
+      storageClasses: [],
-      url:           this.value.spec.url,
+      images:         [],
-      files:         [],
+      url:            this.value.spec.url,
-      resource:      '',
+      files:          [],
-      headers:       {},
+      resource:       '',
-      fileUrl:       '',
+      headers:        {},
-      file:          '',
+      fileUrl:        '',
+      file:           '',
     };
   },
 
@@ -144,12 +146,26 @@ export default {
       ];
     },
 
-    storageClassOptions() {
+    encryptedStorageClasses() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
-      return storages
+      return storages.filter((s) => s.isEncrypted);
-        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) // Lvm storage is not supported.
+    },
+
+    nonEncryptedStorageClasses() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
+      return storages.filter((s) => !s.isEncrypted);
+    },
+
+    storageClassOptions() {
+      const storages = this.value.spec?.securityParameters?.cryptoOperation === ENCRYPT ? this.encryptedStorageClasses : this.nonEncryptedStorageClasses;
+      const filteredStorages = this.value.thirdPartyStorageFeatureEnabled ? storages.filter((s) => !s.parameters?.backingImage) : storages
+        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) ;
+
+      return filteredStorages
         .map((s) => {
           const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
@@ -167,6 +183,9 @@ export default {
 
       set(nue) {
         this.value.metadata.annotations[HCI_ANNOTATIONS.STORAGE_CLASS] = nue;
+        if (this.value.thirdPartyStorageFeatureEnabled) {
+          this.value.spec.targetStorageClassName = nue;
+        }
       }
     },
     sourceImageOptions() {
@@ -239,12 +258,28 @@ export default {
         this.$refs.file.value = null;
       }
     },
+    'value.spec.securityParameters.cryptoOperation'() {
+      if (this.value.spec?.securityParameters?.cryptoOperation === ENCRYPT) {
+        this.storageClassName = this.encryptedStorageClasses[0]?.name || '';
+      } else { // URL / FILE / DECRYPT should use default storage class
+        this.storageClassName = this.defaultStorageClassName();
+      }
+    },
+    'storageClassName'(neu) {
+      const storageClass = this.storages.find((s) => s.id === neu);
+
+      if (storageClass && this.value.thirdPartyStorageFeatureEnabled) {
+        this.value.spec.backend = storageClass.isLonghornV1 ? 'backingimage' : 'cdi';
+      }
+    }
   },
 
   methods: {
     async saveImage(buttonCb) {
       this.value.spec.displayName = (this.value.spec.displayName || '').trim();
 
+      if (this.isEdit) return await this.handleEditImage(buttonCb);
+
       if (this.value.spec.sourceType === UPLOAD && this.isCreate) {
         try {
           this.value.spec.url = '';
@@ -269,6 +304,23 @@ export default {
       }
     },
 
+    async handleEditImage(buttonCb) {
+      try {
+        const data = [{
+          op: 'replace', path: '/metadata/labels', value: this.value.metadata.labels
+        }, {
+          op: 'replace', path: '/metadata/annotations', value: this.value.metadata.annotations
+        }];
+
+        await this.value.patch(data);
+        buttonCb(true);
+        this.done();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonCb(false);
+      }
+    },
+
     setImageLabels(str) {
       const suffixName = str?.split('/')?.pop() || str;
 
@@ -366,6 +418,18 @@ export default {
           return str.toLowerCase().includes(os.value.toLowerCase()) ? os.value : false;
         }
       });
+    },
+
+    defaultStorageClassName() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
+
+      if (!defaultStorage) {
+        return LONGHORN;
+      }
+
+      // if default sc is encrypted, use longhorn as default
+      return defaultStorage.isEncrypted ? LONGHORN : defaultStorage?.metadata?.name;
     }
   },
 };
@@ -530,6 +594,7 @@ export default {
           :mode="mode"
           :pad-left="false"
           :read-allowed="false"
+          :value-can-be-empty="true"
           @focusKey="focusKey"
           @update:value="value.setLabels($event)"
         >
@@ -552,7 +617,7 @@ export default {
               autocorrect="off"
               autocapitalize="off"
               spellcheck="false"
-              @update:value="queueUpdate"
+              @input="queueUpdate"
             />
           </template>
         </KeyValue>

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

@@ -6,12 +6,11 @@ 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 Labels from '@shell/components/form/Labels';
+import { Banner } from '@components/Banner';
 import KeyValue from '@shell/components/form/KeyValue';
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import PodAffinity from '@shell/components/form/PodAffinity';
 import UnitInput from '@shell/components/form/UnitInput';
-
 import { randomStr } from '@shell/utils/string';
 import { _CONFIG, _EDIT, _VIEW } from '@shell/config/query-params';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
@@ -29,7 +28,7 @@ import SSHKey from './kubevirt.io.virtualmachine/VirtualMachineSSHKey';
 export default {
   name: 'HarvesterEditVMTemplate',
 
-  emits: ['update:value'],
+  emits: ['update:templateValue'],
 
   components: {
     Tab,
@@ -47,7 +46,7 @@ export default {
     PodAffinity,
     Reserved,
     UnitInput,
-    Labels,
+    Banner,
     KeyValue,
   },
 
@@ -205,7 +204,7 @@ export default {
       if (tab.name === 'advanced') {
         this.$refs.yamlEditor?.refresh();
       }
-    }
+    },
   },
 };
 </script>
@@ -222,11 +221,11 @@ export default {
     @finish="saveVMT"
   >
     <NameNsDescription
-      :value="value"
+      :value="templateValue"
       :mode="realTemplateMode"
       name-label="harvester.vmTemplate.nameNsDescription.name"
       :namespaced="true"
-      @update:value="$emit('update:value', $event)"
+      @update:value="$emit('update:templateValue', $event)"
     />
 
     <Checkbox
@@ -321,34 +320,44 @@ export default {
       </Tab>
 
       <Tab
-        :name="t('generic.labels')"
+        name="labels"
-        :label="t('harvester.tab.instanceLabel')"
+        :label="t('generic.labels')"
-        :weight="-5"
+        :weight="-9"
       >
-        <Labels
+        <Banner color="info">
-          :default-container-class="'labels-and-annotations-container'"
+          <t k="harvester.virtualMachine.labels.banner" />
-          :value="value"
+        </Banner>
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :add-label="t('labels.addLabel')"
           :mode="mode"
-          :display-side-by-side="false"
+          :read-allowed="false"
-          :show-annotations="false"
+          :value-can-be-empty="true"
-          :show-label-title="false"
+          @update:value="value.setLabels($event)"
-        >
+        />
-          <template #labels="{toggler}">
-            <KeyValue
-              key="labels"
-              :value="value.instanceLabels"
-              :protected-keys="value.systemLabels || []"
-              :toggle-filter="toggler"
-              :add-label="t('labels.addLabel')"
-              :mode="mode"
-              :read-allowed="false"
-              :value-can-be-empty="true"
-              @input="value.setInstanceLabels($event)"
-            />
-          </template>
-        </Labels>
       </Tab>
 
+      <Tab
+        name="instanceLabel"
+        :label="t('harvester.tab.instanceLabel')"
+        :weight="-10"
+      >
+        <Banner color="info">
+          <t k="harvester.virtualMachine.instanceLabels.banner" />
+        </Banner>
+        <KeyValue
+          key="instance-labels"
+          :value="value.instanceLabels"
+          :protected-keys="value.systemLabels || []"
+          :toggle-filter="toggler"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          @update:value="value.setInstanceLabels($event)"
+        />
+      </Tab>
       <Tab
         name="advanced"
         :label="t('harvester.tab.advanced')"
@@ -434,7 +443,7 @@ export default {
         <div class="spacer"></div>
         <Checkbox
           v-if="value.cpuPinningFeatureEnabled"
-          v-model="cpuPinning"
+          v-model:value="cpuPinning"
           class="check"
           type="checkbox"
           tooltip-key="harvester.virtualMachine.cpuPinning.tooltip"
@@ -465,11 +474,29 @@ export default {
           :mode="mode"
         />
 
+        <Checkbox
+          v-if="value.tpmPersistentStateFeatureEnabled && tpmEnabled"
+          v-model:value="tpmPersistentStateEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.advancedOptions.tpmPersistentState')"
+          :mode="mode"
+        />
+
         <Checkbox
           v-model:value="efiEnabled"
           class="check"
           type="checkbox"
-          :label="t('harvester.virtualMachine.efiEnabled')"
+          :label="t('harvester.virtualMachine.advancedOptions.efiEnabled')"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-if="value.efiPersistentStateFeatureEnabled && efiEnabled"
+          v-model:value="efiPersistentStateEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.advancedOptions.efiPersistentState')"
           :mode="mode"
         />
 
@@ -478,7 +505,7 @@ export default {
           v-model:value="secureBoot"
           class="check"
           type="checkbox"
-          :label="t('harvester.virtualMachine.secureBoot')"
+          :label="t('harvester.virtualMachine.advancedOptions.secureBoot')"
           :mode="mode"
         />
       </Tab>

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

@@ -21,6 +21,8 @@ import { InterfaceOption, VOLUME_DATA_SOURCE_KIND } from '../config/harvester-ma
 import { HCI, VOLUME_SNAPSHOT } from '../types';
 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';
 
 export default {
   name: 'HarvesterVolume',
@@ -72,7 +74,8 @@ export default {
 
   data() {
     if (this.mode === _CREATE) {
-      this.value.spec.volumeMode = 'Block';
+      // default volumeMode to Block
+      this.value.spec.volumeMode = VOLUME_MODE.BLOCK;
       this.value.spec.accessModes = ['ReadWriteMany'];
     }
 
@@ -86,6 +89,7 @@ export default {
       imageId,
       snapshots: [],
       images:    [],
+      GIBIBYTE
     };
   },
 
@@ -124,6 +128,10 @@ export default {
       return InterfaceOption;
     },
 
+    volumeModeOptions() {
+      return Object.values(VOLUME_MODE);
+    },
+
     imageOption() {
       return sortBy(
         this.images
@@ -177,6 +185,25 @@ export default {
       return this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
     },
 
+    isLonghornStorageClass() {
+      const selectedSC = this.storageClasses.find((sc) => sc.name === this.value?.spec?.storageClassName) || {};
+
+      return selectedSC && selectedSC.isLonghorn;
+    },
+
+    showVolumeMode() {
+      // we won't let user choose volumeMode if source = vmimage
+      if (!this.value.thirdPartyStorageFeatureEnabled || this.isVMImage || !!this.value?.spec?.storageClassName === false) {
+        return false;
+      }
+
+      if (this.isLonghornStorageClass) {
+        return false;
+      }
+
+      return true;
+    },
+
     storageClassOptions() {
       return this.storageClasses.filter((s) => !s.parameters?.backingImage).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
@@ -235,7 +262,43 @@ export default {
     }
   },
 
+  watch: {
+    'source'(neu) {
+      if (neu === 'url') {
+        this.setBlockVolumeMode();
+        this.deleteVolumeForVmAnnotation();
+      }
+    },
+    'value.spec.storageClassName'() {
+      if (this.isLonghornStorageClass) {
+        this.setBlockVolumeMode();
+        this.deleteVolumeForVmAnnotation();
+      }
+    },
+    'value.spec.volumeMode'(neu) {
+      if (neu === VOLUME_MODE.FILE_SYSTEM) {
+        this.setVolumeForVmAnnotation();
+      } else if (neu === VOLUME_MODE.BLOCK ) {
+        this.deleteVolumeForVmAnnotation();
+      }
+    }
+  },
+
   methods: {
+    setBlockVolumeMode() {
+      this.value.spec.volumeMode = VOLUME_MODE.BLOCK;
+    },
+
+    setVolumeForVmAnnotation() {
+      this.value.setAnnotation(HCI_ANNOTATIONS.VOLUME_FOR_VM, 'true');
+    },
+
+    deleteVolumeForVmAnnotation() {
+      if (this.value?.metadata?.annotations?.[HCI_ANNOTATIONS.VOLUME_FOR_VM]) {
+        delete this.value.metadata.annotations[HCI_ANNOTATIONS.VOLUME_FOR_VM];
+      }
+    },
+
     getAccessMode() {
       if (!this.longhornV2LVMSupport) {
         return ['ReadWriteMany'];
@@ -244,10 +307,10 @@ export default {
       const storageClassName = this.value.spec.storageClassName;
       const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
 
-      let readWriteOnce = this.value.isLvm || this.value.isLonghornV2;
+      let readWriteOnce = this.value.isLvm || (!this.value.thirdPartyStorageFeatureEnabled && this.value.isLonghornV2);
 
       if (storageClass) {
-        readWriteOnce = storageClass.provisioner === LVM_DRIVER || storageClass.parameters?.dataEngine === DATA_ENGINE_V2;
+        readWriteOnce = storageClass.provisioner === LVM_DRIVER || (!this.value.thirdPartyStorageFeatureEnabled && storageClass.parameters?.dataEngine === DATA_ENGINE_V2);
       }
 
       return readWriteOnce ? ['ReadWriteOnce'] : ['ReadWriteMany'];
@@ -288,7 +351,7 @@ export default {
         const imageSize = Math.max(imageResource?.status?.size, imageResource?.status?.virtualSize);
 
         if (imageSize) {
-          this.storage = `${ Math.ceil(imageSize / 1024 / 1024 / 1024) }Gi`;
+          this.storage = `${ Math.ceil(imageSize / 1024 / 1024 / 1024) }${ GIBIBYTE }`;
         }
       }
       this.update();
@@ -357,7 +420,7 @@ export default {
         />
 
         <LabeledSelect
-          v-if="source === 'blank'"
+          v-if="isBlank"
           v-model:value="value.spec.storageClassName"
           :options="storageClassOptions"
           :label="t('harvester.storage.storageClass.label')"
@@ -367,6 +430,18 @@ export default {
           @update:value="update"
         />
 
+        <LabeledSelect
+          v-if="showVolumeMode"
+          v-model:value="value.spec.volumeMode"
+          :label="t('harvester.volume.volumeMode')"
+          :options="volumeModeOptions"
+          required
+          :disabled="!isCreate"
+          :mode="mode"
+          class="mb-20"
+          @update:value="update"
+        />
+
         <UnitInput
           v-model:value="storage"
           :label="t('harvester.volume.size')"
@@ -377,6 +452,7 @@ export default {
           :disabled="value?.isLonghornV2 && isEdit"
           required
           class="mb-20"
+          :suffix="GIBIBYTE"
           @update:value="update"
         />
 

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

@@ -1,6 +1,7 @@
 <script>
 import UnitInput from '@shell/components/form/UnitInput';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
+import { GIBIBYTE } from '../../utils/unit';
 
 export default {
   name: 'HarvesterEditCpuMemory',
@@ -30,6 +31,7 @@ export default {
 
   data() {
     return {
+      GIBIBYTE,
       localCpu:    this.cpu,
       localMemory: this.memory
     };
@@ -63,7 +65,7 @@ export default {
       if (String(this.localMemory).includes('Gi')) {
         memory = this.localMemory;
       } else {
-        memory = `${ this.localMemory }Gi`;
+        memory = `${ this.localMemory }${ GIBIBYTE }`;
       }
       if (memory.includes('null')) {
         memory = null;
@@ -113,6 +115,7 @@ export default {
           :output-modifier="true"
           :disabled="disabled"
           required
+          :suffix="GIBIBYTE"
           class="mb-20"
           @update:value="change"
         />

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

@@ -95,7 +95,11 @@ export default {
     devices: {
       handler(v) {
         this.rows = v;
-        this.filterRows = this.rows;
+        if (this.parentSriov) {
+          this.filterRows = this.rows.filter((row) => row.labels[this.parentSriovLabel] === this.parentSriov);
+        } else {
+          this.filterRows = this.rows;
+        }
       },
       immediate: true,
     },

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

@@ -97,7 +97,7 @@ export default {
       });
 
       const devices = [
-        ...this.otherDevices(this.value.domain.devices.hostDevices || []),
+        ...this.otherDevices(this.value?.domain?.devices?.hostDevices || []),
         ...formatted,
       ];
 
@@ -121,7 +121,9 @@ export default {
           return inUse;
         }
 
-        vm.hostDevices.forEach((device) => {
+        const hostDevices = vm?.hostDevices || [];
+
+        hostDevices.forEach((device) => {
           inUse[device.name] = { usedBy: [vm.metadata.name] };
         });
 

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

@@ -1,6 +1,6 @@
 <script>
 import UnitInput from '@shell/components/form/UnitInput';
-
+import { MEBIBYTE } from '../../utils/unit';
 export default {
   name: 'HarvesterReserved',
 
@@ -20,7 +20,7 @@ export default {
   },
 
   data() {
-    return { memory: this.reservedMemory };
+    return { MEBIBYTE, memory: this.reservedMemory };
   },
 
   watch: {
@@ -47,6 +47,7 @@ export default {
     :input-exponent="2"
     :increment="1024"
     :output-modifier="true"
+    :suffix="MEBIBYTE"
     @update:value="change"
   />
 </template>

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

@@ -6,7 +6,6 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
 
-import { clone } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 
 import { NAMESPACE } from '@shell/config/types';
@@ -126,10 +125,9 @@ export default {
       this.checkedSsh = neu;
     },
 
-    checkedSsh(val, old) {
+    checkedSsh(val) {
-      if ( val.includes(_NEW)) {
+      // if click on Create a New...
-        this['checkedSsh'] = old;
+      if (val.includes(_NEW)) {
-        this.update();
         this.show();
       }
     }
@@ -175,6 +173,7 @@ export default {
 
       if (res.id) {
         this.checkedSsh.push(`${ this.namespace }/${ this.sshName }`);
+        this.update();
       }
     },
 
@@ -232,7 +231,9 @@ export default {
     },
 
     update() {
-      this.$emit('update:sshKey', clone(this.checkedSsh));
+      const sshKeys = this.checkedSsh.filter((key) => key !== _NEW);
+
+      this.$emit('update:sshKey', sshKeys);
     },
   }
 };
@@ -243,7 +244,7 @@ export default {
     <LabeledSelect
       v-model:value="checkedSsh"
       :label="t('harvester.virtualMachine.input.sshKey')"
-      :taggable="true"
+      :taggable="!disabled"
       :mode="mode"
       :multiple="true"
       :searchable="searchable"

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

@@ -80,7 +80,7 @@ export default {
       });
 
       const devices = [
-        ...this.otherDevices(this.value.domain.devices.hostDevices || []),
+        ...this.otherDevices(this.value?.domain?.devices?.hostDevices || []),
         ...formatted,
       ];
 
@@ -121,7 +121,9 @@ export default {
           return inUse;
         }
 
-        vm.hostDevices.forEach((device) => {
+        const hostDevices = vm?.hostDevices || [];
+
+        hostDevices.forEach((device) => {
           inUse[device.name] = { usedBy: [vm.metadata.name] };
         });
 

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

@@ -46,10 +46,13 @@ export default {
       this[key] = res[key];
     }
 
-    uniq([
+    const vGpus = this.vm.isOff ? [
       ...(this.value?.domain?.devices?.gpus || []).map(({ name }) => name),
+    ] : [
       ...Object.values(this.vm?.provisionedVGpus).reduce((acc, gpus) => [...acc, ...gpus], [])
-    ]).forEach((name) => {
+    ];
+
+    uniq(vGpus).forEach((name) => {
       if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
         this.selectedDevices.push(name);
       }

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

@@ -1,5 +1,5 @@
 <script>
-import { Sortable } from 'sortablejs-vue3';
+import { VueDraggableNext } from 'vue-draggable-next';
 import InfoBox from '@shell/components/InfoBox';
 import { Banner } from '@components/Banner';
 import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
@@ -7,8 +7,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
-
+import { PVC, STORAGE_CLASS } from '@shell/config/types';
-import { PVC } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
 import { ucFirst, randomStr } from '@shell/utils/string';
 import { removeObject } from '@shell/utils/array';
@@ -17,12 +16,13 @@ import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
 import { 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';
 
 export default {
   emits: ['update:value'],
 
   components: {
-    Banner, BadgeStateFormatter, Sortable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
+    Banner, BadgeStateFormatter, VueDraggableNext, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
   },
 
   props: {
@@ -62,7 +62,7 @@ export default {
 
     customVolumeMode: {
       type:    String,
-      default: 'Block'
+      default: VOLUME_MODE.Block
     },
 
     customAccessMode: {
@@ -116,6 +116,12 @@ export default {
       return this.mode === _CREATE;
     },
 
+    defaultStorageClass() {
+      const defaultStorage = this.$store.getters['harvester/all'](STORAGE_CLASS).find((sc) => sc.isDefault);
+
+      return defaultStorage;
+    },
+
     showVolumeTip() {
       const imageName = this.getImageDisplayName(this.rows[0]?.image);
 
@@ -272,129 +278,130 @@ export default {
       color="info"
       label-key="harvester.virtualMachine.volume.dragTip"
     />
-    <Sortable
+    <VueDraggableNext
       :list="rows"
-      :options="{disabled: isView}"
+      :disabled="isView"
       item-key="id"
       @end="update"
     >
-      <template #item="{element: volume, index: i}">
+      <div
-        <div :key="volume.name">
+        v-for="(volume, i) in rows"
-          <InfoBox class="box">
+        :key="volume.id"
-            <button
+      >
+        <InfoBox class="box">
+          <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="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" />
+              </a>
+            </span>
+
+            <span v-else>
+              {{ headerFor(volume.source, !!volume?.volumeBackups) }}
+            </span>
+          </h3>
+          <div>
+            <component
+              :is="componentFor(volume.source)"
+              :value="rows[i]"
+              :rows="rows"
+              :namespace="namespace"
+              :is-create="isCreate"
+              :is-edit="isEdit"
+              :is-view="isView"
+              :is-virtual-type="isVirtualType"
+              :mode="mode"
+              :idx="i"
+              :validate-required="validateRequired"
+              @update="update"
+            />
+          </div>
+
+          <div class="bootOrder">
+            <div
               v-if="!isView"
-              type="button"
+              class="mr-15"
-              class="role-link btn btn-sm remove"
-              @click="removeVolume(volume)"
             >
-              <i class="icon icon-x" />
+              <button
-            </button>
+                :disabled="i === 0"
-            <button
+                class="btn btn-sm role-primary"
-              v-if="volume.hotpluggable && isView"
+                @click.prevent="changeSort(i, false)"
-              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">
+                <i class="icon icon-lg icon-chevron-up"></i>
-                  {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
+              </button>
-                </router-link>
 
-                <BadgeStateFormatter
+              <button
-                  v-if="volume.pvc"
+                :disabled="i === rows.length -1"
-                  class="ml-10 state"
+                class="btn btn-sm role-primary"
-                  :arbitrary="true"
+                @click.prevent="changeSort(i, 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>
-            <div>
-              <component
-                :is="componentFor(volume.source)"
-                :value="rows[i]"
-                :rows="rows"
-                :namespace="namespace"
-                :is-create="isCreate"
-                :is-edit="isEdit"
-                :is-view="isView"
-                :is-virtual-type="isVirtualType"
-                :mode="mode"
-                :idx="i"
-                :validate-required="validateRequired"
-                @update="update"
-              />
-            </div>
-
-            <div class="bootOrder">
-              <div
-                v-if="!isView"
-                class="mr-15"
               >
-                <button
+                <i class="icon icon-lg icon-chevron-down"></i>
-                  :disabled="i === 0"
+              </button>
-                  class="btn btn-sm role-primary"
-                  @click.prevent="changeSort(i, false)"
-                >
-                  <i class="icon icon-lg icon-chevron-up"></i>
-                </button>
-
-                <button
-                  :disabled="i === rows.length -1"
-                  class="btn btn-sm role-primary"
-                  @click.prevent="changeSort(i, true)"
-                >
-                  <i class="icon icon-lg icon-chevron-down"></i>
-                </button>
-              </div>
-
-              <div class="text-muted">
-                bootOrder: {{ i + 1 }}
-              </div>
             </div>
 
-            <div class="mt-15">
+            <div class="text-muted">
-              <Banner
+              bootOrder: {{ i + 1 }}
-                v-if="volume.volumeStatus && !isCreate"
-                class="volume-status"
-                color="warning"
-                :label="ucFirst(volume.volumeStatus)"
-              />
-              <Banner
-                v-if="value.volumeBackups && value.volumeBackups.error && value.volumeBackups.error.message"
-                color="error"
-                :label="ucFirst(value.volumeBackups.error.message)"
-              />
-              <Banner
-                v-if="isLonghornV2(volume) && !isView"
-                color="warning"
-                :label="t('harvester.volume.longhorn.disableResize')"
-              />
             </div>
-          </InfoBox>
+          </div>
-        </div>
+
-      </template>
+          <div class="mt-15">
-    </Sortable>
+            <Banner
+              v-if="volume.volumeStatus && !isCreate"
+              class="volume-status"
+              color="warning"
+              :label="ucFirst(volume.volumeStatus)"
+            />
+            <Banner
+              v-if="value.volumeBackups && value.volumeBackups.error && value.volumeBackups.error.message"
+              color="error"
+              :label="ucFirst(value.volumeBackups.error.message)"
+            />
+            <Banner
+              v-if="isLonghornV2(volume) && !isView"
+              color="warning"
+              :label="t('harvester.volume.longhorn.disableResize')"
+            />
+          </div>
+        </InfoBox>
+      </div>
+    </VueDraggableNext>
     <Banner
       v-if="showVolumeTip"
       color="warning"

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

@@ -11,6 +11,7 @@ import { _CREATE } from '@shell/config/query-params';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import { HCI } from '../../../../types';
 import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
+import { GIBIBYTE } from '../../../../utils/unit';
 
 export default {
   name: 'HarvesterEditExisting',
@@ -59,6 +60,7 @@ export default {
     }
 
     return {
+      GIBIBYTE,
       VOLUME_TYPE,
       InterfaceOption,
       loading: false,
@@ -109,6 +111,10 @@ export default {
               return false;
             }
 
+            if (pvc.isGoldenImageVolume) {
+              return false;
+            }
+
             if (pvc.attachVM && isAvailable && pvc.attachVM?.id === this.vm?.id && this.isEdit) {
               isBeingUsed = false;
             } else if (pvc.attachVM) {
@@ -136,10 +142,12 @@ export default {
         return;
       }
 
+      // update this.value with existing volume spec, then update to upstream component
       this.value.accessModes = pvcResource.spec.accessModes[0];
       this.value.size = pvcResource.spec.resources.requests.storage;
       this.value.storageClassName = pvcResource.spec.storageClassName;
       this.value.volumeMode = pvcResource.spec.volumeMode;
+      this.update();
     },
 
     'value.type'(neu) {
@@ -250,6 +258,7 @@ export default {
             :label="t('harvester.fields.size')"
             :mode="mode"
             :disabled="true"
+            :suffix="GIBIBYTE"
             @update:value="update"
           />
         </InputOrDisplay>

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

@@ -12,6 +12,7 @@ import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
 import { _VIEW } from '@shell/config/query-params';
 import LabelValue from '@shell/components/LabelValue';
 import { ucFirst } from '@shell/utils/string';
+import { GIBIBYTE } from '../../../../utils/unit';
 
 export default {
   name: 'HarvesterEditVMImage',
@@ -67,6 +68,7 @@ export default {
 
   data() {
     return {
+      GIBIBYTE,
       VOLUME_TYPE,
       InterfaceOption,
       loading: false,
@@ -90,7 +92,7 @@ export default {
     imagesOption() {
       return this.images.filter((c) => c.isReady).sort((a, b) => a.creationTimestamp > b.creationTimestamp ? -1 : 1).map( (I) => {
         return {
-          label: `${ I.metadata.namespace }/${ I.spec.displayName }`,
+          label: this.imageOptionLabel(I),
           value: I.id
         };
       });
@@ -116,8 +118,46 @@ export default {
       });
     },
 
+    thirdPartyStorageEnabled() {
+      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);
+    },
+
+    imageVirtualSize() {
+      if (this.selectedImage?.virtualSize) {
+        return this.selectedImage.virtualSize.replace(' ', '');
+      }
+
+      return '0';
+    },
+
+    diskSize() {
+      const size = this.value?.size || '0';
+
+      return size;
+    },
+
+    imageVirtualSizeInByte() {
+      return Math.max(this.selectedImage?.status?.size, this.selectedImage?.status?.virtualSize);
+    },
+
+    diskSizeInByte() {
+      return parseSi(this.value?.size || '0');
+    },
+
+    showDiskTooSmallError() {
+      if (!this.thirdPartyStorageEnabled ) {
+        return false;
+      }
+
+      return this.imageVirtualSizeInByte > this.diskSizeInByte;
     }
   },
 
@@ -149,7 +189,7 @@ export default {
             minExponent: 3,
           });
 
-          this.value.size = `${ formatSize }Gi`;
+          this.value.size = `${ formatSize }${ GIBIBYTE }`;
         }
       },
       deep:      true,
@@ -158,7 +198,17 @@ export default {
   },
 
   methods: {
+    imageOptionLabel(image) {
+      let label = `${ image.metadata.namespace }/${ image.spec.displayName }`;
+
+      if (this.thirdPartyStorageEnabled) {
+        label += ` (${ image.imageStorageClass } / ${ image.virtualSize })`;
+      }
+
+      return label;
+    },
     update() {
+      this.value.hasDiskError = this.showDiskTooSmallError;
       this.$emit('update');
     },
 
@@ -181,7 +231,7 @@ export default {
         if (!isIsoImage) {
           imageSizeGiB = Math.max(imageSizeGiB, 10);
         }
-        this.value['size'] = `${ imageSizeGiB }Gi`;
+        this.value['size'] = `${ imageSizeGiB }${ GIBIBYTE }`;
       }
 
       this.update();
@@ -288,7 +338,7 @@ export default {
             :mode="mode"
             :required="validateRequired"
             :disable="isLonghornV2"
-            suffix="GiB"
+            :suffix="GIBIBYTE"
             @update:value="update"
           />
         </InputOrDisplay>
@@ -341,5 +391,10 @@ export default {
       class="mb-20"
       :label="value.volumeBackups.error.message"
     />
+    <Banner
+      v-if="!isView && showDiskTooSmallError"
+      color="error"
+      :label="t('harvester.virtualMachine.volume.vmImageVolumeTip', {diskSize: diskSize, imageVirtualSize: imageVirtualSize})"
+    />
   </div>
 </template>

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

@@ -12,6 +12,8 @@ import LabelValue from '@shell/components/LabelValue';
 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 { VOLUME_MODE } from '@pkg/harvester/config/types';
 
 export default {
   name: 'HarvesterEditVolume',
@@ -58,6 +60,7 @@ export default {
 
   data() {
     return {
+      GIBIBYTE,
       VOLUME_TYPE,
       InterfaceOption,
       loading: false,
@@ -69,6 +72,10 @@ export default {
       return this.$store.getters['harvester-common/getFeatureEnabled']('longhornV2LVMSupport');
     },
 
+    thirdPartyStorageClassEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
+    },
+
     encryptionValue() {
       return ucFirst(String(this.value.isEncrypted));
     },
@@ -89,6 +96,18 @@ export default {
       return allPVCs.find((P) => P.id === `${ this.namespace }/${ this.value.volumeName }`);
     },
 
+    showVolumeMode() {
+      if (!this.thirdPartyStorageClassEnabled || !!this.value?.storageClassName === false) {
+        return false;
+      }
+
+      if (this.isLonghornStorageClass) {
+        return false;
+      }
+
+      return true;
+    },
+
     isDisabled() {
       return !this.value.newCreateId && this.isEdit && this.isVirtualType;
     },
@@ -110,7 +129,17 @@ export default {
 
     isLonghornV2() {
       return this.value.pvc?.isLonghornV2 || this.value.pvc?.storageClass?.isLonghornV2;
-    }
+    },
+
+    isLonghornStorageClass() {
+      const selectedSC = this.storageClasses.find((sc) => sc.name === this.value?.storageClassName) || {};
+
+      return selectedSC && selectedSC.isLonghorn;
+    },
+
+    volumeModeOptions() {
+      return Object.values(VOLUME_MODE);
+    },
   },
 
   watch: {
@@ -118,6 +147,8 @@ export default {
       immediate: true,
       handler(neu) {
         this.value.accessMode = this.getAccessMode(neu);
+        this.value.volumeMode = this.getVolumeMode(neu, this.value.volumeMode);
+        this.update();
       }
     },
 
@@ -140,7 +171,7 @@ export default {
             minExponent: 3,
           });
 
-          this.value.size = `${ formatSize }Gi`;
+          this.value.size = `${ formatSize }${ GIBIBYTE }`;
         }
       },
       deep:      true,
@@ -149,6 +180,20 @@ export default {
   },
 
   methods: {
+    getVolumeMode(storageClassName, originalVolumeMode) {
+      if (!this.thirdPartyStorageClassEnabled) {
+        return VOLUME_MODE.BLOCK;
+      }
+      const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
+
+      // longhorn v1, v2 use block volumeMode
+      if (storageClass && storageClass.isLonghorn) {
+        return VOLUME_MODE.BLOCK;
+      }
+
+      return originalVolumeMode;
+    },
+
     getAccessMode(storageClassName) {
       if (!this.longhornV2LVMSupport) {
         return 'ReadWriteMany';
@@ -156,10 +201,10 @@ export default {
 
       const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
 
-      let readWriteOnce = this.value.pvc?.isLvm || this.value.pvc?.isLonghornV2;
+      let readWriteOnce = this.value.pvc?.isLvm || (!this.thirdPartyStorageClassEnabled && this.value.pvc?.isLonghornV2);
 
       if (storageClass) {
-        readWriteOnce = storageClass.provisioner === LVM_DRIVER || storageClass.parameters?.dataEngine === DATA_ENGINE_V2;
+        readWriteOnce = storageClass.provisioner === LVM_DRIVER || (!this.thirdPartyStorageClassEnabled && storageClass.parameters?.dataEngine === DATA_ENGINE_V2);
       }
 
       return readWriteOnce ? 'ReadWriteOnce' : 'ReadWriteMany';
@@ -258,6 +303,7 @@ export default {
             :required="validateRequired"
             :label="t('harvester.fields.size')"
             :disabled="isLonghornV2"
+            :suffix="GIBIBYTE"
             @update:value="update"
           />
         </InputOrDisplay>
@@ -283,6 +329,29 @@ export default {
           />
         </InputOrDisplay>
       </div>
+      <div
+        v-if="showVolumeMode"
+        data-testid="input-volume-mode"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.volume.volumeMode')"
+          :value="value.volumeMode"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model:value="value.volumeMode"
+            :label="t('harvester.volume.volumeMode')"
+            :mode="mode"
+            :options="volumeModeOptions"
+            :disabled="isEdit"
+            required
+            @update:value="update"
+          />
+        </InputOrDisplay>
+      </div>
+    </div>
+    <div class="row mb-20">
       <div
         v-if="value.volumeEncryptionFeatureEnabled && isView"
         class="col span-6"
@@ -292,11 +361,9 @@ export default {
           :value="encryptionValue"
         />
       </div>
-    </div>
-    <div class="row mb-20">
       <div
         v-if="value.volumeBackups && isView"
-        class="col span-3"
+        class="col span-6"
       >
         <LabelValue
           :name="t('harvester.virtualMachine.volume.readyToUse')"

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

@@ -2,6 +2,7 @@
 import { isEqual } from 'lodash';
 import { mapGetters } from 'vuex';
 import Tabbed from '@shell/components/Tabbed';
+import { clone, set } from '@shell/utils/object';
 import Tab from '@shell/components/Tabbed/Tab';
 import { Checkbox } from '@components/Form/Checkbox';
 import CruResource from '@shell/components/CruResource';
@@ -10,16 +11,12 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import UnitInput from '@shell/components/form/UnitInput';
-import Labels from '@shell/components/form/Labels';
-
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import PodAffinity from '@shell/components/form/PodAffinity';
 import VGpuDevices from './VirtualMachineVGpuDevices/index';
 import UsbDevices from './VirtualMachineUSBDevices/index';
 import KeyValue from '@shell/components/form/KeyValue';
-
 import { clear } from '@shell/utils/array';
-import { clone } from '@shell/utils/object';
 import { saferDump } from '@shell/utils/create-yaml';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
@@ -65,7 +62,6 @@ export default {
     PodAffinity,
     AccessCredentials,
     Reserved,
-    Labels,
     PciDevices,
     RestartVMDialog,
     UnitInput,
@@ -195,7 +191,12 @@ export default {
 
       return true;
     },
+    isValidationPassed() {
+      // check if any disk hasDiskError is true
+      const hasError = this.diskRows.some((disk) => disk.hasDiskError === true);
 
+      return !hasError;
+    },
     showCpuPinningBanner() {
       if (!this.value.cpuPinningFeatureEnabled) {
         return false;
@@ -210,7 +211,10 @@ export default {
       }
 
       return false;
-    }
+    },
+    usbPassthroughEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('usbPassthrough');
+    },
   },
 
   watch: {
@@ -407,13 +411,26 @@ export default {
       }
       const cloneDeepNewVM = clone(this.value);
 
+      // new VM
       delete cloneDeepNewVM?.metadata;
+      delete cloneDeepNewVM?.__clone;
+
+      // old VM
       delete this.cloneVM?.metadata;
       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;
       }
@@ -422,7 +439,11 @@ export default {
         this.isOpen = true;
 
         this.$nextTick(() => {
-          this.$refs.restartDialog.resolve = resolve;
+          if (this?.$refs?.restartDialog) {
+            this.$refs.restartDialog.resolve = resolve;
+          } else {
+            return resolve();
+          }
         });
       });
     },
@@ -472,6 +493,7 @@ export default {
     },
 
     generateYaml() {
+      this.showYaml = this?.$refs?.vmCruResource?.showYaml || false;
       this.parseVM();
       const out = saferDump(this.value);
 
@@ -485,10 +507,12 @@ export default {
   <CruResource
     v-if="spec"
     id="vm"
+    ref="vmCruResource"
     :done-route="doneRoute"
     :resource="value"
     :cancel-event="true"
     :mode="mode"
+    :validation-passed="isValidationPassed"
     :can-yaml="isSingle ? true : false"
     :errors="errors"
     :generate-yaml="generateYaml"
@@ -579,7 +603,7 @@ export default {
           :create-namespace="true"
           :namespace="value.metadata.namespace"
           :mode="mode"
-          :disabled="isWindows"
+          :disabled="isWindows || isEdit"
           @update:sshKey="updateSSHKey"
           @register-after-hook="registerAfterHook"
         />
@@ -671,7 +695,7 @@ export default {
       </Tab>
 
       <Tab
-        v-if="enabledPCI"
+        v-if="enabledPCI && usbPassthroughEnabled"
         :label="t('harvester.tab.usbDevices')"
         name="usbDevices"
         :weight="-7"
@@ -697,39 +721,50 @@ export default {
         />
       </Tab>
 
+      <Tab
+        name="labels"
+        :label="t('generic.labels')"
+        :weight="-9"
+      >
+        <Banner color="info">
+          <t k="harvester.virtualMachine.labels.banner" />
+        </Banner>
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          @update:value="value.setLabels($event)"
+        />
+      </Tab>
+
       <Tab
         name="instanceLabel"
         :label="t('harvester.tab.instanceLabel')"
-        :weight="-8"
+        :weight="-10"
       >
-        <Labels
+        <Banner color="info">
-          :default-container-class="'labels-and-annotations-container'"
+          <t k="harvester.virtualMachine.instanceLabels.banner" />
-          :value="value"
+        </Banner>
+        <KeyValue
+          key="instance-labels"
+          :value="value.instanceLabels"
+          :protected-keys="value.systemLabels || []"
+          :toggle-filter="toggler"
+          :add-label="t('labels.addLabel')"
           :mode="mode"
-          :display-side-by-side="false"
+          :read-allowed="false"
-          :show-annotations="false"
+          :value-can-be-empty="true"
-          :show-label-title="false"
+          @update:value="value.setInstanceLabels($event)"
-        >
+        />
-          <template #labels="{toggler}">
-            <KeyValue
-              key="labels"
-              :value="value.instanceLabels"
-              :protected-keys="value.systemLabels || []"
-              :toggle-filter="toggler"
-              :add-label="t('labels.addLabel')"
-              :mode="mode"
-              :read-allowed="false"
-              :value-can-be-empty="true"
-              @update:value="value.setInstanceLabels($event)"
-            />
-          </template>
-        </Labels>
       </Tab>
 
       <Tab
         name="advanced"
         :label="t('harvester.tab.advanced')"
-        :weight="-9"
+        :weight="-11"
       >
         <div class="row mb-20">
           <div class="col span-6">
@@ -873,11 +908,29 @@ export default {
           :mode="mode"
         />
 
+        <Checkbox
+          v-if="value.tpmPersistentStateFeatureEnabled && tpmEnabled"
+          v-model:value="tpmPersistentStateEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.advancedOptions.tpmPersistentState')"
+          :mode="mode"
+        />
+
         <Checkbox
           v-model:value="efiEnabled"
           class="check"
           type="checkbox"
-          :label="t('harvester.virtualMachine.efiEnabled')"
+          :label="t('harvester.virtualMachine.advancedOptions.efiEnabled')"
+          :mode="mode"
+        />
+
+        <Checkbox
+          v-if="value.efiPersistentStateFeatureEnabled && efiEnabled"
+          v-model:value="efiPersistentStateEnabled"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.advancedOptions.efiPersistentState')"
           :mode="mode"
         />
 
@@ -886,9 +939,10 @@ export default {
           v-model:value="secureBoot"
           class="check"
           type="checkbox"
-          :label="t('harvester.virtualMachine.secureBoot')"
+          :label="t('harvester.virtualMachine.advancedOptions.secureBoot')"
           :mode="mode"
         />
+
         <Banner
           v-if="showCpuPinningBanner"
           color="warning"

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

@@ -29,7 +29,7 @@ export default {
     const rows = (this.value || []).map((row) => {
       let type = 'cidr';
 
-      if (row.rangeStart && row.rangeEnd) {
+      if (row.rangeStart || row.rangeEnd) {
         type = 'range';
       }
 

pkg/harvester/edit/loadbalancer.harvesterhci.io.loadbalancer/HealthCheck.vue

@@ -65,7 +65,7 @@ export default {
           :labels="[t('generic.disabled'),t('generic.enabled')]"
           :options="[false, true]"
           :disabled="disabled"
-          @input="onToggle"
+          @update:value="onToggle"
         />
       </div>
     </div>

pkg/harvester/formatters/HarvesterDiskState.vue

@@ -58,7 +58,7 @@ export default {
       const out = [];
 
       blockDevices.map((b) => {
-        if (b.metadata.state.error) {
+        if (b?.metadata?.state?.error) {
           out.push(b.metadata.state.message);
         }
       });

pkg/harvester/formatters/HarvesterMemoryUsed.vue

@@ -2,7 +2,7 @@
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
 import { METRIC, NODE } from '@shell/config/types';
 import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
-
+import { UNIT_SUFFIX } from '../utils/unit';
 export default {
   name:       'HarvesterMemoryUsed',
   components: { ConsumptionGauge },
@@ -51,7 +51,7 @@ export default {
     memoryUnits() {
       const exponent = exponentNeeded(this.memoryTotal, 1024);
 
-      return `${ UNITS[exponent] }iB`;
+      return `${ UNITS[exponent] }${ UNIT_SUFFIX }`;
     },
 
     node() {

pkg/harvester/formatters/HarvesterStorageUsed.vue

@@ -2,6 +2,7 @@
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
 import { LONGHORN } from '@shell/config/types';
 import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
+import { UNIT_SUFFIX } from '../utils/unit';
 
 export default {
   name:       'HarvesterStorageUsed',
@@ -72,17 +73,23 @@ export default {
       return stats;
     },
 
-    units() {
+    allocatedUnits() {
-      const exponent = exponentNeeded(this.storageStats.maximum, 1024);
+      const exponent = exponentNeeded(this.storageStats.total, 1024);
 
-      return `${ UNITS[exponent] }iB`;
+      return `${ UNITS[exponent] }${ UNIT_SUFFIX }`;
     },
 
-    used() {
+    usedUnits() {
+      const exponent = exponentNeeded(this.storageStats.maximum, 1024);
+
+      return `${ UNITS[exponent] }${ UNIT_SUFFIX }`;
+    },
+
+    formatUsed() {
       let out = this.formatter(this.storageStats.used);
 
       if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.storageStats.used, { canRoundToZero: false });
+        out = this.formatter(this.storageStats.used, { canRoundToZero: true });
       }
 
       return out;
@@ -92,7 +99,7 @@ export default {
       let out = this.formatter(this.storageStats.scheduled);
 
       if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.storageStats.scheduled, { canRoundToZero: false });
+        out = this.formatter(this.storageStats.scheduled, { canRoundToZero: true });
       }
 
       return out;
@@ -100,9 +107,9 @@ export default {
 
     usedAmountTemplateValues() {
       return {
-        used:  this.used,
+        used:  this.formatUsed,
         total: this.formatter(this.storageStats.maximum),
-        unit:  this.units,
+        unit:  this.usedUnits,
       };
     },
 
@@ -110,7 +117,7 @@ export default {
       return {
         used:  this.formatAllocated,
         total: this.formatter(this.storageStats.total),
-        unit:  this.units,
+        unit:  this.allocatedUnits,
       };
     },
   },
@@ -141,7 +148,7 @@ export default {
       <ConsumptionGauge
         :capacity="storageStats.total"
         :used="storageStats.scheduled"
-        :units="units"
+        :units="allocatedUnits"
         :number-formatter="formatter"
         :resource-name="resourceName"
       >
@@ -161,7 +168,7 @@ export default {
     <ConsumptionGauge
       :capacity="storageStats.maximum"
       :used="storageStats.used"
-      :units="units"
+      :units="usedUnits"
       :number-formatter="formatter"
       :resource-name="showAllocated ? '' : resourceName"
       :class="{

pkg/harvester/index.ts

@@ -6,6 +6,7 @@ import harvesterCommonStore from './store/harvester-common';
 import harvesterStore from './store/harvester-store';
 import customValidators from './validators';
 import { PRODUCT_NAME } from './config/harvester';
+import { defineAsyncComponent } from 'vue';
 
 // Init the package
 export default function (plugin: IPlugin) {
@@ -21,10 +22,6 @@ export default function (plugin: IPlugin) {
   // Built-in icon
   plugin.metadata.icon = require('./icon.svg');
 
-  if (isDev && !isSingleVirtualCluster) {
-    plugin.addProduct(require('./config/harvester-manager'));
-  }
-  
   plugin.addProduct(require('./config/harvester-cluster'));
 
   plugin.addDashboardStore(harvesterCommonStore.config.namespace, harvesterCommonStore.specifics, harvesterCommonStore.config);
@@ -32,4 +29,8 @@ export default function (plugin: IPlugin) {
   plugin.validators = customValidators;
 
   plugin.addRoutes(extensionRoutes);
+
+  plugin.register('component', 'NavHeaderRight', defineAsyncComponent(() =>
+    import('./components/HarvesterUpgradeHeader.vue')
+  ));
 }

pkg/harvester/l10n/en-us.yaml

@@ -1,34 +1,3 @@
-harvesterManager:
-  manage: Manage
-  tableHeaders:
-    kubernetesVersion: Kubernetes Version
-    harvesterVersion: Harvester Version
-  cluster:
-    label: Harvester Clusters
-    none: There are no Harvester Clusters
-    learnMore: Learn more about Harvester from the <a target="_blank" href="https://harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Web Site</a> or read the the <a target="_blank" href="https://docs.harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Docs</a>
-    description: Harvester is a modern Hyperconverged infrastructure (HCI) solution built for bare metal servers using enterprise-grade open source technologies including Kubernetes, Kubevirt and Longhorn.
-    supportMessage: Harvester ui extension only supports Harvester cluster version greater or equal to 1.3.0
-  plugins:
-    loadError: Error loading harvester plugin
-  rke:
-    templateError: Incorrect template format
-  affinity:
-    thisPodNamespace: This VM's namespace
-    matchExpressions:
-      inNamespaces: "Workloads in these namespaces"
-    vmAffinityTitle: VM Scheduling
-    namespaces:
-      placeholder: e.g. default,system,base
-      label: Namespaces
-    addLabel: Add Workload Selector
-    topologyKey:
-      placeholder: 'topology.kubernetes.io/zone'
-  vGpu:
-    title: VGPUs
-    label: VGPU type
-    placeholder: 'Please select a VGPU'
-
 generic:
   tip: Tip
   resourceExternalLinkTips: 'External Link'
@@ -39,6 +8,11 @@ generic:
   basic: Basic
   loading: Loading...
 
+unsupported:
+  serverVersion: 'Current version: <code>{serverVersion}</code>'
+  description: Harvester ui only supports Harvester cluster version greater or equal to 1.3.0.
+  learnMore: Learn more about Harvester from the <a target="_blank" href="https://harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Web Site</a> or read the <a target="_blank" href="https://docs.harvesterhci.io/" rel="noopener noreferrer nofollow">Harvester Docs</a>
+
 nav:
   group:
     networks: Networks
@@ -64,9 +38,35 @@ asyncButton:
     success: Restarted
     waiting: Restarting&hellip;
 
+dialog:
+  confirmExecution:
+    title: Are you sure?
+    andOthers: |-
+      {count, plural,
+      =0 {}
+      =1 { and <b>one other </b>}
+      other { and <b>{count} other </b>}
+      }
+    protip: "Tip: Hold the {alternateLabel} key while clicking action to bypass this confirmation"
+    stop:
+      message: "Are you sure you want to continue stop the {type} {names}?"
+    pause:
+      message: "Are you sure you want to continue pause the {type} {names}?"
+  promptRemove:
+    title: "Delete {type}"
+    warningMessage: "Deleting the selected {type} permanently removes all resources on {thisOrThese} {type}. This action is irreversible. Do you want to continue?"
+    confirmName: "Type <b>{nameToMatch}</b> to delete the {type}:"
+    protip: "Tip: Hold the {alternateLabel} key while clicking Delete to bypass the confirmation step."
+
 harvester:
+  branding:
+    logos:
+      tip: 'Upload a logo to replace the Harvester logo in the top-level navigation header. Image height should be 21 pixels with a max width of 200 pixels. Max file size is 20KB. Accepted formats: JPEG, PNG, SVG.'
+    favicon:
+      tip: 'Upload an icon to replace the Harvester favicon in the browser tab. Max file size is 20KB'
   productLabel: 'Harvester'
   modal:
+    
     backup:
       success: 'Backup { backUpName } has been initiated.'
       addBackup: Add Backup
@@ -105,6 +105,14 @@ harvester:
         tip: Please enter a virtual machine name!
         success: 'Virtual machine { name } cloned successfully.'
         failed: 'Failed clone virtual machine!'
+    osImage:
+      title: Delete Image
+      message: Are you sure you want to delete the image { name } ?
+    downloadImage:
+      title: Download Image
+      banner: 'This action takes a while depending on the image size ({ size }). Please be patient.'
+      startMessage : 'The download process will auto start once the conversion is complete.'
+      download: Download
     exportImage:
       title: Export to Image
       name: Name
@@ -605,15 +613,17 @@ harvester:
     enableUsb: Enable USB Tablet
     advancedOptions:
       tpm: Enable TPM
+      tpmPersistentState: TPM Persistent State
       cpuManager:
         prefix: You must enable CPU Manager for at least one node in
         middle: 'host page'
         suffix: to enable CPU Pinning for VM
+      efiEnabled: Booting in EFI mode
+      efiPersistentState: EFI Persistent State
+      secureBoot: Secure Boot
     usbTip: Provides an absolute pointer device which often helps with getting a consistent mouse cursor position in VNC.
     sshTitle: Add Public SSH Key
     imageTip: An external URL to the .iso, .img, .qcow2 or .raw that the virtual machine should be created from.
-    efiEnabled: Booting in EFI mode
-    secureBoot: Secure Boot
     volume:
       dragTip: Drag and drop volumes, or use the volume's arrows, to change the boot order.
       volumeTip: The virtual machine only contains a CD-ROM volume. You may want to add additional disk volumes.
@@ -634,6 +644,7 @@ harvester:
       setFirst: Set as root volume
       saveVolume: Update Volume
       encryption: Encryption
+      vmImageVolumeTip: Disk size ({diskSize}) should greater than selected image virtual size ({imageVirtualSize})
       lockTooltip:
         all: All volumes are encrypted.
         partial: Some volumes are encrypted.
@@ -768,11 +779,18 @@ harvester:
     terminationGracePeriodSeconds:
       label: Termination Grace Period
     affinity:
+      addLabel: Add Workload Selector
+      topologyKey:
+        placeholder: 'topology.kubernetes.io/zone'
       thisPodNamespace: This virtual machine's namespace
       matchExpressions:
         inNamespaces: "Workloads in these namespaces"
       namespaces:
         label: Namespaces
+    instanceLabels:
+      banner: These labels are automatically synchronized to the virtual machine instance.
+    labels:
+      banner: These key values are added as labels to the virtual machine.
 
   volume:
     label: Volumes
@@ -782,6 +800,7 @@ harvester:
       datasource: Data Source
       details: Details
     size: Size
+    volumeMode: Volume Mode
     source: Source
     kind: Kind
     sourceOptions:
@@ -832,6 +851,8 @@ harvester:
         =1 {1 image is uploading, please do not refresh or close the page.}
         other {{count} images are uploading, please do not refresh or close the page.}
         }
+      osUpgrade:
+        uploading: "{name} is uploading, please do not refresh or close the page."
     checksum: Checksum
     checksumTip: Validate the image using the SHA512 checksum, if specified.
 
@@ -856,17 +877,22 @@ harvester:
     currentVersion: CURRENT VERSION
     versionLabel: AVAILABLE COMPATIBLE VERSIONS
     enableLogging: Enable Logging
+    skipSingleReplicaDetachedVol: Skip checking single-replica detached volumes
     upgradeNode: Upgrading Node
     upgradeSysService: Upgrading System Service
     upgradeImage: Download Upgrade Image
-    osUpgrade: OS Upgrade
+    osUpgrade: Cluster Upgrade
     uploadNew: Upload New Image
+    deleteHeader: Please select an image to delete.
+    deleteExisting: Delete Existing Image
     selectExisting: Select Existing Image
     createRepository: Creating Upgrade Repository
     succeeded: Succeeded
     releaseTip: Please read the upgrade documentation carefully. You can view details on the <a href="{url}" target="_blank">Harvester Release Notes</a>.
     checkReady: I have read and understood the upgrade instructions related to this Harvester version.
     pending: Pending
+    upload: 
+      duplicatedFile: The file you are trying to upload already exists.
     repoInfo:
       upgradeStatus: Upgrade Status
       os: OS
@@ -884,14 +910,14 @@ harvester:
       doc: Read the <a href="{url}" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.
       tip: Unmet system requirements and incorrectly performed procedures may cause complete upgrade failure and other issues that require manual workarounds.
       moreNotes: For more details about the release notes, please visit -
-     
+
   schedule:
     label: Virtual Machine Schedules
     createTitle: Create Schedule
     createButtonText: Create Schedule
     scheduleType: Virtual Machine Schedule Type
     cron: Cron Schedule
-    detail: 
+    detail:
       namespace: Namespace
       sourceVM: Source Virtual Machine
     tabs:
@@ -901,12 +927,12 @@ harvester:
     message:
       noSetting:
         suffix: before creating a backup schedule
-    retain: 
+    retain:
       label: Retain
       count: Count
-      tooltip: Number of up-to-date VM backups to retain. Maximum to 250, minimum to 2. 
+      tooltip: Number of up-to-date VM backups to retain. Maximum to 250, minimum to 2.
     maxFailure:
-      label: Max Failure 
+      label: Max Failure
       count: Count
       tooltip: Max number of consecutive failed backups that could be tolerated. If reach this threshold, Harvester controller will suspend the schedule job. This value should less than retain count
     virtualMachine:
@@ -920,6 +946,9 @@ harvester:
     label: Virtual Machine Backups
     createText: Restore Backup
     title: Restore Virtual Machine
+    refreshInterval:
+      label: Refresh Interval
+      tip: The interval for the backup target to sync data to harvester cluster. Set to 0 to disable refresh mechanism.
     backupTargetTip: The endpoint used to access the backupstore. NFS and S3 are supported.
     message:
       noSetting:
@@ -1029,7 +1058,7 @@ harvester:
         invalid: '"Exclude list" is invalid.'
         addIp: Add Exclude IP
       warning: 'WARNING: <br/> Any change to storage-network requires shutting down all virtual machines before applying this setting. <br/> Users have to ensure the cluster network is configured and VLAN Configuration will cover all nodes and ensure the network connectivity is working and expected in all nodes.'
-      tip: 'Specify an IP range in the IPv4 CIDR format. <code>Number of IPs Required = Number of Nodes * 4 + Number of Disks * 2 + Number of Images to Download/Upload </code>. For more information about storage network settings, see the <a href="{url}" target="_blank">documentation</a>.'
+      tip: 'Specify an IP range in the IPv4 CIDR format. <code>Number of IPs Required = Number of Nodes * 2 + Number of Disks * 2 + Number of Images to Download/Upload </code>. For more information about storage network settings, see the <a href="{url}" target="_blank">documentation</a>.'
     vmForceDeletionPolicy:
       period: Period
     ratio : Ratio
@@ -1066,10 +1095,15 @@ harvester:
         addConfig: Add Configuration
 
     upgrade:
-      selectExitImage: Please select the OS image to upgrade.
+      unknownImageName: Image name is not found.
       imageUrl: Please input a valid image URL.
       chooseFile: Please select to upload an image.
       checksum: Checksum
+      networkError: Unable to upload the image. Resolve network issues that may have occurred and try again.
+      cancelUpload: Cancelled the image upload.
+      uploadSuccess:  "{name} uploaded successfully. Press Upgrade button to start the cluster upgrade process."
+      deleteImage: Please select an image to delete.
+      deleteSuccess: "{name} deleted successfully."
     harvesterMonitoring:
       label: Harvester Monitoring
       section:
@@ -1520,17 +1554,13 @@ harvester:
       pollingInterval:
         label: Polling Interval
 
-  affinity:
+typeDescription:
-    thisPodNamespace: This virtual machine's namespace
+  # Map of
-    matchExpressions:
+  # type: Description to be shown on the top of list view describing the type.
-      inNamespaces: "Workloads in these namespaces"
+  #       Should fit on one line.
-    vmAffinityTitle: Virtual Machine Scheduling
+  #       If you link to anything external, it MUST have
-    namespaces:
+  #       target="_blank" rel="noopener noreferrer nofollow"
-      placeholder: e.g. default,system,base
+  harvester: "Branding allows administrators to globally re-brand the UI by customizing the Harvester product name, logos and color scheme."
-      label: Namespaces
-    addLabel: Add Workload Selector
-    topologyKey:
-      placeholder: 'topology.kubernetes.io/zone'
 
 advancedSettings:
   experimental: 'Experimental features allow users to test and evaluate early-access functionality prior to official supported releases'

pkg/harvester/list/devices.harvesterhci.io.sriovgpudevice.vue

@@ -12,6 +12,8 @@ import { HCI } from '../types';
 export default {
   name: 'ListSriovGpuDevices',
 
+  inheritAttrs: false,
+
   components: {
     Banner,
     Loading,

pkg/harvester/list/devices.harvesterhci.io.usbdevice.vue

@@ -10,6 +10,8 @@ import DeviceList from '../edit/kubevirt.io.virtualmachine/VirtualMachineUSBDevi
 export default {
   name: 'ListUsbDevicePage',
 
+  inheritAttrs: false,
+
   components: {
     Banner,
     DeviceList,

pkg/harvester/list/devices.harvesterhci.io.vgpudevice.vue

@@ -10,6 +10,8 @@ import { ADD_ONS } from '../config/harvester-map';
 export default {
   name: 'ListVGpuDevices',
 
+  inheritAttrs: false,
+
   components: {
     Banner,
     Loading,

pkg/harvester/list/harvesterhci.io.dashboard.vue

@@ -8,9 +8,7 @@ import Banner from '@components/Banner/Banner.vue';
 import MessageLink from '@shell/components/MessageLink';
 import SortableTable from '@shell/components/SortableTable';
 import { allHash, setPromiseResult } from '@shell/utils/promise';
-import {
+import { parseSi, formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
-  parseSi, formatSi, exponentNeeded, UNITS, createMemoryValues
-} from '@shell/utils/units';
 import { REASON } from '@shell/config/table-headers';
 import {
   EVENT, METRIC, NODE, SERVICE, PVC, LONGHORN, POD, COUNT, NETWORK_ATTACHMENT
@@ -27,22 +25,21 @@ import { isEmpty } from '@shell/utils/object';
 import { HCI } from '../types';
 import HarvesterUpgrade from '../components/HarvesterUpgrade';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../config/harvester';
+import { UNIT_SUFFIX } from '../utils/unit';
 
 dayjs.extend(utc);
 dayjs.extend(minMax);
 
 const PARSE_RULES = {
-  memory: {
+  format: {
-    format: {
+    addSuffix:        true,
-      addSuffix:        true,
+    firstSuffix:      UNIT_SUFFIX,
-      firstSuffix:      'B',
+    increment:        1024,
-      increment:        1024,
+    maxExponent:      99,
-      maxExponent:      99,
+    maxPrecision:     2,
-      maxPrecision:     2,
+    minExponent:      0,
-      minExponent:      0,
+    startingExponent: 0,
-      startingExponent: 0,
+    suffix:           UNIT_SUFFIX,
-      suffix:           'iB',
-    }
   }
 };
 
@@ -135,6 +132,7 @@ export default {
 
     const hash = {
       vms:              this.fetchClusterResources(HCI.VM),
+      pvcs:             this.fetchClusterResources(PVC),
       nodes:            this.fetchClusterResources(NODE),
       events:           this.fetchClusterResources(EVENT),
       metricNodes:      this.fetchClusterResources(METRIC.NODE),
@@ -224,6 +222,7 @@ export default {
       nodes:                  [],
       metricNodes:            [],
       vms:                    [],
+      pvcs:                   [],
       monitoring:             {},
       VM_DASHBOARD_METRICS_URL,
       CLUSTER_METRICS_SUMMARY_URL,
@@ -288,6 +287,14 @@ export default {
           out[resource.type].name = this.t(`typeLabel."${ resource.spoofed.name }"`, { count: out[resource.type].total });
         }
 
+        if (resource.type === PVC) {
+          // filter out the golden image volumes
+          const goldenImageVolumeCount = (this.pvcs || []).filter((pvc) => pvc.isGoldenImageVolume).length;
+
+          out[resource.type].useful = out[resource.type].useful - goldenImageVolumeCount;
+          out[resource.type].total = out[resource.type].total - goldenImageVolumeCount;
+        }
+
         if (resource.type === HCI.BLOCK_DEVICE) {
           let total = 0;
           let errorCount = 0;
@@ -402,13 +409,13 @@ export default {
     storageUsed() {
       const stats = this.storageStats;
 
-      return this.createMemoryValues(stats.maximum, stats.used);
+      return this.createDisplayValues(stats.maximum, stats.used);
     },
 
     storageAllocated() {
       const stats = this.storageStats;
 
-      return this.createMemoryValues(stats.total, stats.scheduled);
+      return this.createDisplayValues(stats.total, stats.scheduled);
     },
 
     vmEvents() {
@@ -454,7 +461,7 @@ export default {
         return total + node.memoryReserved;
       }, 0);
 
-      return createMemoryValues(this.memoryTotal, useful);
+      return this.createDisplayValues(this.memoryTotal, useful);
     },
 
     availableNodes() {
@@ -494,7 +501,7 @@ export default {
     },
 
     ramUsed() {
-      return createMemoryValues(this.memoryTotal, this.metricAggregations?.memory);
+      return this.createDisplayValues(this.memoryTotal, this.metricAggregations?.memory);
     },
 
     hasMetricNodeSchema() {
@@ -516,10 +523,12 @@ export default {
   },
 
   methods: {
-    createMemoryValues(total, useful) {
+    createDisplayValues(total, useful) {
       const parsedTotal = parseSi((total || '0').toString());
+
       const parsedUseful = parseSi((useful || '0').toString());
-      const format = this.createMemoryFormat(parsedTotal);
+      const format = this.createFormat(parsedTotal);
+
       const formattedTotal = formatSi(parsedTotal, format);
       let formattedUseful = formatSi(parsedUseful, {
         ...format,
@@ -538,24 +547,24 @@ export default {
         useful: Number(parsedUseful),
         formattedTotal,
         formattedUseful,
-        units:  this.createMemoryUnits(parsedTotal),
+        units:  this.createUnits(parsedTotal),
       };
     },
 
-    createMemoryFormat(n) {
+    createFormat(n) {
-      const exponent = exponentNeeded(n, PARSE_RULES.memory.format.increment);
+      const exponent = exponentNeeded(n, PARSE_RULES.format.increment);
 
       return {
-        ...PARSE_RULES.memory.format,
+        ...PARSE_RULES.format,
         maxExponent: exponent,
         minExponent: exponent,
       };
     },
 
-    createMemoryUnits(n) {
+    createUnits(n) {
-      const exponent = exponentNeeded(n, PARSE_RULES.memory.format.increment);
+      const exponent = exponentNeeded(n, PARSE_RULES.format.increment);
 
-      return `${ UNITS[exponent] }${ PARSE_RULES.memory.format.suffix }`;
+      return `${ UNITS[exponent] }${ PARSE_RULES.format.suffix }`;
     },
 
     async fetchClusterResources(type, opt = {}, store) {

pkg/harvester/list/harvesterhci.io.host.vue

@@ -101,14 +101,14 @@ export default {
         const metricCol = [
           {
             name:          'cpu',
-            labelKey:      'node.detail.glance.consumptionGauge.cpu',
+            labelKey:      'harvester.dashboard.hardwareResourceGauge.cpu',
             value:         'id',
             formatter:     'HarvesterCPUUsed',
             formatterOpts: { showUsed: true },
           },
           {
             name:          'memory',
-            labelKey:      'node.detail.glance.consumptionGauge.memory',
+            labelKey:      'harvester.dashboard.hardwareResourceGauge.memory',
             value:         'id',
             formatter:     'HarvesterMemoryUsed',
             formatterOpts: { showUsed: true },

pkg/harvester/list/harvesterhci.io.management.cluster.vue

@@ -1,279 +0,0 @@
-<script>
-import BrandImage from '@shell/components/BrandImage';
-import TypeDescription from '@shell/components/TypeDescription';
-import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import Loading from '@shell/components/Loading';
-import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
-import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
-import { isHarvesterCluster } from '@shell/utils/cluster';
-import { allHash } from '@shell/utils/promise';
-import { STATE, NAME as NAME_COL, AGE, VERSION } from '@shell/config/table-headers';
-import { MACHINE_POOLS } from '../config/table-headers';
-
-export default {
-  components: {
-    BrandImage,
-    ResourceTable,
-    Masthead,
-    TypeDescription,
-    Loading
-  },
-
-  props: {
-    schema: {
-      type:     Object,
-      required: true,
-    },
-    useQueryParamsForSimpleFiltering: {
-      type:    Boolean,
-      default: false
-    }
-  },
-
-  async fetch() {
-    const inStore = this.$store.getters['currentProduct'].inStore;
-    const hash = await allHash({
-      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
-      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
-    });
-
-    this.hciClusters = hash.hciClusters;
-    this.mgmtClusters = hash.mgmtClusters;
-  },
-
-  data() {
-    const resource = CAPI.RANCHER_CLUSTER;
-
-    return {
-      navigating:   false,
-      VIRTUAL,
-      hciDashboard: HCI.DASHBOARD,
-      resource,
-      hResource:    HCI.CLUSTER,
-      realSchema:   this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
-      hciClusters:  [],
-      mgmtClusters: []
-    };
-  },
-
-  computed: {
-    headers() {
-      return [
-        STATE,
-        NAME_COL,
-        {
-          name:     'harvesterVersion',
-          sort:     'harvesterVersion',
-          labelKey: 'harvesterManager.tableHeaders.harvesterVersion',
-          value:    'harvesterVersion',
-          getValue: (row) => row.harvesterVersion
-        },
-        {
-          ...VERSION,
-          labelKey: 'harvesterManager.tableHeaders.kubernetesVersion',
-          value:    'kubernetesVersion',
-          getValue: (row) => row.kubernetesVersion
-        },
-        MACHINE_POOLS,
-        AGE,
-        {
-          name:  'harvester',
-          label: ' ',
-          align: 'right',
-          width: 65,
-        },
-      ];
-    },
-
-    importLocation() {
-      return {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: this.schema.id,
-        },
-      };
-    },
-
-    canCreateCluster() {
-      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
-
-      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
-    },
-
-    rows() {
-      return this.hciClusters
-        .filter((c) => {
-          const cluster = this.mgmtClusters.find((cluster) => cluster?.metadata?.name === c?.status?.clusterName);
-
-          return isHarvesterCluster(cluster);
-        })
-        .map((row) => {
-          if (row.isReady) {
-            row.setSupportedHarvesterVersion();
-          }
-
-          return row;
-        });
-    },
-
-    typeDisplay() {
-      return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.rows?.length || 0 });
-    },
-  },
-
-  methods: {
-    async goToCluster(row) {
-      const timeout = setTimeout(() => {
-        // Don't show loading indicator for quickly fetched plugins
-        this.navigating = row.id;
-      }, 1000);
-
-      try {
-        await row.goToCluster();
-
-        clearTimeout(timeout);
-        this.navigating = false;
-      } catch {
-        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
-        clearTimeout(timeout);
-        this.navigating = false;
-      }
-    }
-  }
-};
-</script>
-
-<template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <Masthead
-      :schema="realSchema"
-      :resource="resource"
-      :is-creatable="false"
-      :type-display="typeDisplay"
-    >
-      <template #typeDescription>
-        <TypeDescription :resource="hResource" />
-      </template>
-
-      <template
-        v-if="canCreateCluster"
-        #extraActions
-      >
-        <router-link
-          :to="importLocation"
-          class="btn role-primary"
-        >
-          {{ t('cluster.importAction') }}
-        </router-link>
-      </template>
-    </Masthead>
-
-    <ResourceTable
-      v-if="rows && rows.length"
-      :schema="schema"
-      :headers="headers"
-      :rows="rows"
-      :is-creatable="true"
-      :namespaced="false"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    >
-      <template #col:name="{row}">
-        <td>
-          <span class="cluster-link">
-            <a
-              v-if="row.isReady && row.isSupportedHarvester"
-              class="link"
-              :disabled="navigating ? true : null"
-              @click="goToCluster(row)"
-            >{{ row.nameDisplay }}</a>
-            <span v-else>
-              {{ row.nameDisplay }}
-            </span>
-            <i
-              class="icon icon-spinner icon-spin ml-5"
-              :class="{'navigating': navigating === row.id}"
-            />
-          </span>
-        </td>
-      </template>
-
-      <template #cell:harvester="{row}">
-        <router-link
-          class="btn btn-sm role-primary"
-          :to="row.detailLocation"
-        >
-          {{ t('harvesterManager.manage') }}
-        </router-link>
-      </template>
-    </ResourceTable>
-    <div v-else>
-      <div class="no-clusters">
-        {{ t('harvesterManager.cluster.none') }}
-      </div>
-      <hr class="info-section">
-      <div class="logo">
-        <BrandImage
-          file-name="harvester.png"
-          height="64"
-        />
-      </div>
-      <div class="tagline">
-        <div>{{ t('harvesterManager.cluster.description') }}</div>
-      </div>
-      <div class="tagline sub-tagline">
-        <div v-clean-html="t('harvesterManager.cluster.learnMore', {}, true)" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .cluster-link {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      // Use visibility to avoid the columns re-adjusting when the icon is shown
-      visibility: hidden;
-
-      &.navigating {
-        visibility: visible;
-      }
-    }
-
-  }
-  .no-clusters {
-    text-align: center;
-  }
-
-  .info-section {
-    margin-top: 60px;
-  }
-
-  .logo {
-    display: flex;
-    justify-content: center;
-    margin: 60px 0 40px 0;
-  }
-
-  .tagline {
-    display: flex;
-    justify-content: center;
-    margin-top: 30px;
-
-    > div {
-      font-size: 16px;
-      line-height: 22px;
-      max-width: 80%;
-      text-align: center;
-    }
-  }
-
- .link {
-    cursor: pointer;
-  }
-
-</style>

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

@@ -2,13 +2,12 @@
 import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
-import { VIEW_IN_API, DEV } from '@shell/store/prefs';
 import { MANAGEMENT } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import Settings from '@pkg/harvester/components/SettingList.vue';
-import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING } from '../config/settings';
+import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING, HCI_SETTING } from '../config/settings';
 import { HCI } from '../types';
 
 export default {
@@ -21,14 +20,6 @@ export default {
   },
 
   async fetch() {
-    let isDev;
-
-    try {
-      isDev = this.$store.getters['prefs/get'](VIEW_IN_API);
-    } catch {
-      isDev = this.$store.getters['prefs/get'](DEV);
-    }
-
     const isSingleProduct = !!this.$store.getters['isSingleProduct'];
     const inStore = this.$store.getters['currentProduct'].inStore;
 
@@ -77,7 +68,7 @@ export default {
       };
 
       s.hide = s.canHide = (s.kind === 'json' || s.kind === 'multiline' || s.customFormatter === 'json' || s.data.customFormatter === 'json');
-      s.hasActions = !s.readOnly || isDev;
+      s.hasActions = s.id === HCI_SETTING.SERVER_VERSION ? true : !s.readOnly;
       initSettings.push(s);
     });
 

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

@@ -101,7 +101,7 @@ export default {
     v-bind="$attrs"
     :headers="headers"
     :sub-rows="true"
-    :groupable="false"
+    :groupable="true"
     :rows="rows"
     :group-title-by="groupTitleBy"
     :group-by="groupBy"

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

@@ -6,7 +6,6 @@ import {
 } from '@shell/config/types';
 import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
 import HarvesterVolumeState from '../formatters/HarvesterVolumeState';
-
 import { allSettled } from '../utils/promise';
 import { HCI, VOLUME_SNAPSHOT } from '../types';
 
@@ -58,7 +57,6 @@ export default {
     if (!pvcSchema?.collectionMethods.find((x) => x.toLowerCase() === 'post')) {
       this.$store.dispatch('type-map/configureType', { match: HCI.VOLUME, isCreatable: false });
     }
-
     this.rows = hash.pvcs;
   },
 
@@ -70,7 +68,10 @@ export default {
     schema() {
       return schema;
     },
-
+    filterRows() {
+      // we only show the non golden image PVCs in the list
+      return this.rows.filter((pvc) => !pvc?.isGoldenImageVolume);
+    },
     headers() {
       return [
         STATE,
@@ -92,7 +93,8 @@ export default {
         {
           name:     'storageClass',
           labelKey: 'tableHeaders.storageClass',
-          value:    'spec.storageClassName'
+          value:    'spec.storageClassName',
+          sort:     'spec.storageClassName'
         },
         {
           name:     'AttachedVM',
@@ -146,7 +148,7 @@ export default {
     :groupable="true"
     default-sort-by="age"
     :namespaced="true"
-    :rows="rows"
+    :rows="filterRows"
     :schema="schema"
     key-field="_key"
   >

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

@@ -137,7 +137,15 @@ export default {
     },
 
     isTpmEnabled(spec) {
-      return !!spec?.template?.spec?.domain?.devices?.tpm ;
+      return !!spec?.template?.spec?.domain?.devices?.tpm;
+    },
+
+    isTPMPersistentStateEnabled(spec) {
+      return !!spec?.template?.spec?.domain?.devices?.tpm?.persistent;
+    },
+
+    isEFIPersistentStateEnabled(spec) {
+      return !!spec?.template?.spec?.domain?.firmware?.bootloader?.efi?.persistent;
     },
 
     isSecureBoot(spec) {