ci: disable digest update (#966)

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

.github/renovate.json

@@ -14,10 +14,17 @@
   "semanticCommits": "enabled",
   "semanticCommitType": "deps",
   "prHourlyLimit": 12,
+  "digest": {
+    "enabled": false
+  },
   "timezone": "Asia/Taipei",
   "schedule": ["after 10am on sunday"],
   "postUpdateOptions": ["yarnDedupeFewer"],
   "packageRules": [
+    {
+      "matchUpdateTypes": ["digest"],
+      "enabled": false
+    },
     {
       "matchUpdateTypes": ["major"],
       "enabled": false
@@ -45,14 +52,6 @@
       "groupName": "patch dependencies",
       "labels": ["patch-update"],
       "reviewers": ["a110605", "houhoucoop"]
-    },
-    {
-      "matchUpdateTypes": ["digest", "pinDigest"],
-      "automerge": false,
-      "groupName": "digest dependencies",
-      "labels": ["digest-update"],
-      "schedule": ["on the first day of the month"],
-      "reviewers": ["a110605", "houhoucoop"]
     }
   ]
 }

README.md

@@ -5,6 +5,19 @@ The Harvester UI Extension is a Rancher extension that provides the user interfa
 > **Note:**
 > This extension is available starting from **Rancher 2.10.0**. Ensure your Rancher version is **2.10.0 or later** to access Harvester integration.
 
+## Table of Contents
+
+- [Installation](#installation)
+- [Development Setup](#development-setup)
+- [Commit Message Guidelines](#commit-message-guidelines)
+- [Branch Structure](#branch-structure)
+- [Testing Guidelines](#testing-guidelines)
+- [Release](#release)
+- [Contributing](#contributing)
+- [License](#license)
+
+
+
 ## Installation
 
 For Harvester UI extension installation instructions, please refer to the page **Rancher Integration** -> **Harvester UI Extension** in [official Harvester documentation](https://docs.harvesterhci.io).
@@ -157,6 +170,13 @@ To test the standalone UI, configure Harvester to load the UI from an external s
 2. Set **ui-source** to `External`
 3. Set **ui-index** to the desired URL
 
+
+## Release
+
+The Harvester UI Extension follows the [Harvester](https://github.com/harvester/harvester) release cycle. After RC1 is cut for a new Harvester version, we usually create and work from the corresponding release branch (for example, `release-harvester-v1.8`). The remaining RC builds and the final official release are published from that branch.
+
+After Harvester releases a new version, update the Harvester entry in rancher/ui-plugin-charts [manifest.json](https://github.com/rancher/ui-plugin-charts/blob/aafd215debbc6cb3100e7ba4b0a542c932397acd/manifest.json#L133-L151). This ensures air-gapped users can pull the new Harvester UI Extension image.
+
 ## Contributing
 
 If you want to contribute, start by reading this document, then visit our [Getting Started guide](https://extensions.rancher.io/extensions/next/extensions-getting-started) to learn how to develop and submit changes.

commitlint.config.js

@@ -33,7 +33,7 @@ module.exports = {
     'subject-full-stop':      [2, 'never', '.'],
     'subject-max-length':     [0, 'never'],
     'body-leading-blank':     [2, 'always'],
-    'body-max-line-length':   [2, 'always', 100],
+    'body-max-line-length':   [0, 'always', 100],
     'footer-leading-blank':   [2, 'always'],
     'footer-max-line-length': [2, 'always', 100],
   },

package.json

@@ -6,8 +6,8 @@
     "node": ">=24.0.0"
   },
   "dependencies": {
-    "@babel/plugin-transform-class-static-block": "7.28.6",
+    "@babel/plugin-transform-class-static-block": "7.29.7",
-    "@rancher/shell": "3.0.12-rc.1",
+    "@rancher/shell": "3.0.12-rc.3",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.1",
     "@vue-flow/core": "^1.33.5",
@@ -21,7 +21,7 @@
     "yaml": "^2.5.1"
   },
   "resolutions": {
-    "@types/node": "25.6.2",
+    "@types/node": "25.9.4",
     "cronstrue": "2.59.0",
     "d3-color": "3.1.0",
     "ejs": "3.1.10",
@@ -33,9 +33,9 @@
     "merge": "2.1.1",
     "node-forge": "1.4.0",
     "nth-check": "2.1.1",
-    "qs": "6.15.1",
+    "qs": "6.15.2",
-    "roarr": "7.21.4",
+    "roarr": "7.21.6",
-    "semver": "7.8.0",
+    "semver": "7.8.5",
     "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "scripts": {

pkg/harvester/components/HarvesterNodeSelector.vue

@@ -0,0 +1,186 @@
+<script>
+import { Banner } from '@components/Banner';
+import MatchExpressions from '@shell/components/form/MatchExpressions';
+import ResourceTable from '@shell/components/ResourceTable';
+import { _EDIT } from '@shell/config/query-params';
+import { convert, simplify, matching as selectorMatching } from '@shell/utils/selector';
+import throttle from 'lodash/throttle';
+import { NODE } from '@shell/config/types';
+import { NAME, AGE } from '@shell/config/table-headers';
+
+export default {
+  name: 'HarvesterNodeSelector',
+
+  components: {
+    Banner,
+    MatchExpressions,
+    ResourceTable,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    this.updateMatchingResources();
+  },
+
+  data() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    return {
+      matchingResources: {
+        matched: 0,
+        matches: [],
+        none:    true,
+        sample:  null,
+        total:   0,
+      },
+      tableHeaders: [
+        NAME,
+        {
+          name:      'host-ip',
+          labelKey:  'tableHeaders.hostIp',
+          search:    ['internalIp'],
+          value:     'internalIp',
+          sort:      ['internalIp'],
+          align:     'center',
+        },
+        {
+          name:          'cpuManager',
+          labelKey:      'harvester.tableHeaders.cpuManager',
+          value:         'id',
+          formatter:     'HarvesterCPUPinning',
+          width:         150,
+          align:         'center',
+        },
+        {
+          name:      'diskState',
+          labelKey:  'tableHeaders.diskState',
+          value:     'diskState',
+          formatter: 'HarvesterDiskState',
+          width:     130,
+        },
+        AGE,
+      ],
+      inStore,
+    };
+  },
+
+  watch: {
+    value: {
+      handler:   'updateMatchingResources',
+      deep:      true,
+    },
+    allResourcesInScope() {
+      this.updateMatchingResources();
+    },
+  },
+
+  computed: {
+    schema() {
+      return this.$store.getters[`${ this.inStore }/schemaFor`](NODE);
+    },
+
+    selectorExpressions: {
+      get() {
+        return convert(
+          this.value.matchLabels || {},
+          this.value.matchExpressions || []
+        );
+      },
+      set(selectorExpressions) {
+        const { matchLabels, matchExpressions } = simplify(selectorExpressions);
+
+        this.value['matchLabels'] = matchLabels;
+        this.value['matchExpressions'] = matchExpressions;
+        this.updateMatchingResources();
+      },
+    },
+
+    allNodes() {
+      return this.$store.getters[`${ this.inStore }/all`](NODE) || [];
+    },
+
+    allResourcesInScope() {
+      return this.allNodes.length;
+    },
+  },
+
+  methods: {
+    updateMatchingResources: throttle(function() {
+      const expressions = this.selectorExpressions;
+      const allNodes = this.allNodes;
+
+      // Empty expressions with no key = no match
+      const hasValidExpression = expressions.length > 0 && expressions.every((e) => !!e.key);
+
+      if (!hasValidExpression) {
+        this.matchingResources = {
+          matched: 0,
+          matches: [],
+          none:    true,
+          sample:  null,
+          total:   allNodes.length,
+        };
+
+        return;
+      }
+
+      const matches = selectorMatching(allNodes, expressions, 'metadata.labels');
+
+      this.matchingResources = {
+        matched: matches.length,
+        matches,
+        none:    matches.length === 0,
+        sample:  matches[0]?.nameDisplay || null,
+        total:   allNodes.length,
+      };
+    }, 100, { trailing: true })
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <MatchExpressions
+          v-model:value="selectorExpressions"
+          :mode="mode"
+          :show-remove="false"
+          :type="'node'"
+          :target-resources="allResourcesInScope"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner :color="(matchingResources.none ? 'warning' : 'success')">
+          <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
+        </Banner>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <ResourceTable
+          :rows="matchingResources.matches"
+          :headers="tableHeaders"
+          key-field="id"
+          :table-actions="false"
+          :row-actions="false"
+          :schema="schema"
+          :groupable="false"
+          :search="false"
+        />
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/components/VMConsoleBar.vue

@@ -58,11 +58,14 @@ export default {
 
       const url = `https://${ host }${ prefix }/${ PRODUCT_NAME }/c/${ params.cluster }/console/${ uid }/${ type }`;
 
-      window.open(
+      // Defer so v-select can finish closing the dropdown before the popup steals focus
-        url,
+      this.$nextTick(() => {
-        '_blank',
+        window.open(
-        `toolbars=0,width=${ screen.width - 200 },height=${ screen.height - 200 },left=0,top=0,noreferrer`
+          url,
-      );
+          '_blank',
+          `toolbars=0,width=${ screen.width - 200 },height=${ screen.height - 200 },left=0,top=0,noreferrer`
+        );
+      });
     },
 
     isEmpty(o) {

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

@@ -64,6 +64,9 @@ export default {
 
     try {
       parsedDefaultValue = JSON.parse(this.value.value);
+      if (typeof parsedDefaultValue.exclusiveVlan !== 'boolean') {
+        parsedDefaultValue.exclusiveVlan = false;
+      }
       networkType = 'vlan' in parsedDefaultValue ? L2VLAN : UNTAGGED; // backend doesn't provide networkType, so we check if vlan is provided instead
       openVlan = true;
     } catch (error) {
@@ -72,7 +75,8 @@ export default {
         vlan:           '',
         clusterNetwork: '',
         range:          '',
-        exclude:        []
+        exclude:        [],
+        exclusiveVlan:  false
       };
     }
     const exclude = parsedDefaultValue?.exclude?.toString().split(',') || [];
@@ -94,6 +98,10 @@ export default {
   },
 
   computed: {
+    showExclusiveVlan() {
+      return this.networkType === L2VLAN &&
+        Number(this.parsedDefaultValue.vlan) !== 1;
+    },
     showVlan() {
       return this.networkType === L2VLAN;
     },
@@ -132,6 +140,18 @@ export default {
         };
       });
     },
+    exclusiveVlanOptions() {
+      return [
+        {
+          label: this.t('generic.enabled'),
+          value: true
+        },
+        {
+          label: this.t('generic.disabled'),
+          value: false
+        }
+      ];
+    },
   },
 
   watch: {
@@ -174,7 +194,8 @@ export default {
         vlan:           '',
         clusterNetwork: '',
         range:          '',
-        exclude:        []
+        exclude:        [],
+        exclusiveVlan:  false
       };
     },
 
@@ -280,7 +301,15 @@ export default {
         label-key="harvester.setting.storageNetwork.vlan"
         @update:value="inputVlan"
       />
-
+      <LabeledSelect
+        v-if="showExclusiveVlan"
+        v-model:value="parsedDefaultValue.exclusiveVlan"
+        class="mb-20"
+        :options="exclusiveVlanOptions"
+        :mode="mode"
+        label-key="harvester.setting.storageNetwork.exclusiveVlan"
+        @update:value="update"
+      />
       <LabeledSelect
         v-model:value="parsedDefaultValue.clusterNetwork"
         label-key="harvester.setting.storageNetwork.clusterNetwork"

pkg/harvester/config/feature-flags.js

@@ -66,10 +66,15 @@ const FEATURE_FLAGS = {
     'instanceManagerResourcesSetting',
     'rwxNetworkSetting',
     'createPVCWithDataVolume',
-    'clusterPodSecurityStandardSetting'
+    'clusterPodSecurityStandardSetting',
   ],
   'v1.8.1': [],
-  'v1.9.0': [],
+  'v1.9.0': [
+    'supportFilesystem',
+    'disableResourcePooling',
+    'expandOnlineEncryptedVolume',
+    'longhornV2HugepageSettings'
+  ],
 };
 
 const generateFeatureFlags = () => {

pkg/harvester/config/harvester-cluster.js

@@ -54,6 +54,14 @@ import { registerAddonSideNav } from '../utils/dynamic-nav';
 const TEMPLATE = HCI.VM_VERSION;
 const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
 const LOGGING_GROUP = 'Monitoring & Logging::Logging';
+const OVERLAY_NETWORKS_GROUP = 'Overlay Networks';
+const UNDERLAY_NETWORKS_GROUP = 'Underlay Networks';
+const NAT_INTERNET_GROUP = `${ OVERLAY_NETWORKS_GROUP }::NAT & Internet`;
+const GATEWAYS_GROUP = `${ NAT_INTERNET_GROUP }::Gateways`;
+const EXTERNAL_IPS_GROUP = `${ NAT_INTERNET_GROUP }::External IPs`;
+const RULES_GROUP = `${ NAT_INTERNET_GROUP }::Rules`;
+const SOURCE_RULES_GROUP = `${ RULES_GROUP }::Source Rules`;
+const DESTINATION_RULES_GROUP = `${ RULES_GROUP }::Destination Rules`;
 
 export const PRODUCT_NAME = 'harvester';
 
@@ -581,14 +589,53 @@ export function init($plugin, store) {
     [
       HCI.CLUSTER_NETWORK,
       HCI.NETWORK_ATTACHMENT,
-      HCI.VPC,
+      HCI.HOST_NETWORK_CONFIG,
-      NETWORK_POLICY,
       HCI.LB,
       HCI.IP_POOL,
     ],
     'networks'
   );
 
+  basicType(
+    [HCI.VPC],
+    OVERLAY_NETWORKS_GROUP
+  );
+
+  basicType(
+    [NETWORK_POLICY],
+    OVERLAY_NETWORKS_GROUP
+  );
+
+  basicType(
+    [HCI.VPC_NAT_GATEWAY],
+    GATEWAYS_GROUP
+  );
+
+  basicType(
+    [HCI.IPTABLES_EIP],
+    EXTERNAL_IPS_GROUP
+  );
+
+  basicType(
+    [HCI.IPTABLES_SNAT_RULE],
+    SOURCE_RULES_GROUP
+  );
+
+  basicType(
+    [HCI.IPTABLES_DNAT_RULE],
+    DESTINATION_RULES_GROUP
+  );
+
+  basicType(
+    [HCI.PROVIDER_NETWORK],
+    UNDERLAY_NETWORKS_GROUP
+  );
+
+  basicType(
+    [HCI.VLAN],
+    UNDERLAY_NETWORKS_GROUP
+  );
+
   basicType(
     [
       HCI.SCHEDULE_VM_BACKUP,
@@ -600,7 +647,11 @@ export function init($plugin, store) {
   );
 
   weightGroup('networks', 494, true);
-  weightGroup('backupAndSnapshot', 493, true);
+  weightGroup('Overlay Networks', 493, true);
+  weightGroup('NAT & Internet', 492, true);
+  weightGroup('Rules', 491, true);
+  weightGroup('Underlay Networks', 490, true);
+  weightGroup('backupAndSnapshot', 489, true);
 
   basicType(
     [
@@ -679,7 +730,7 @@ export function init($plugin, store) {
     name:       HCI.CLUSTER_NETWORK,
     ifHaveType: HCI.CLUSTER_NETWORK,
     namespaced: false,
-    weight:     189,
+    weight:     484,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_NETWORK }
@@ -701,7 +752,7 @@ export function init($plugin, store) {
     labelKey:   'harvester.network.label',
     name:       HCI.NETWORK_ATTACHMENT,
     namespaced: true,
-    weight:     188,
+    weight:     485,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.NETWORK_ATTACHMENT }
@@ -715,7 +766,7 @@ export function init($plugin, store) {
     labelKey:   'harvester.vpc.label',
     name:       HCI.VPC,
     namespaced: true,
-    weight:     187,
+    weight:     195,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VPC }
@@ -724,13 +775,73 @@ export function init($plugin, store) {
     ifHaveType: HCI.VPC,
   });
 
+  configureType(HCI.VPC_NAT_GATEWAY, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.natGateway.label',
+    name:       HCI.VPC_NAT_GATEWAY,
+    namespaced: false,
+    weight:     193,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VPC_NAT_GATEWAY }
+    },
+    exact:      false,
+    ifHaveType: HCI.VPC_NAT_GATEWAY,
+  });
+
+  configureType(HCI.IPTABLES_EIP, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.externalIP.label',
+    name:       HCI.IPTABLES_EIP,
+    namespaced: false,
+    weight:     192,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IPTABLES_EIP }
+    },
+    exact:      false,
+    ifHaveType: HCI.IPTABLES_EIP,
+  });
+
+  configureType(HCI.IPTABLES_SNAT_RULE, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.snat.label',
+    name:       HCI.IPTABLES_SNAT_RULE,
+    namespaced: false,
+    weight:     191,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IPTABLES_SNAT_RULE }
+    },
+    exact:      false,
+    ifHaveType: HCI.IPTABLES_SNAT_RULE,
+  });
+
+  configureType(HCI.IPTABLES_DNAT_RULE, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.dnat.label',
+    name:       HCI.IPTABLES_DNAT_RULE,
+    namespaced: false,
+    weight:     190,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.IPTABLES_DNAT_RULE }
+    },
+    exact:      false,
+    ifHaveType: HCI.IPTABLES_DNAT_RULE,
+  });
+
   configureType(NETWORK_POLICY, { hiddenNamespaceGroupButton: true, canYaml: false });
 
   virtualType({
     labelKey:   'harvester.networkPolicy.label',
     name:       NETWORK_POLICY,
     namespaced: true,
-    weight:     186,
+    weight:     194,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: NETWORK_POLICY }
@@ -739,6 +850,53 @@ export function init($plugin, store) {
     ifHaveType: NETWORK_POLICY,
   });
 
+  configureType(HCI.PROVIDER_NETWORK, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  virtualType({
+    labelKey:   'harvester.providerNetwork.label',
+    name:       HCI.PROVIDER_NETWORK,
+    namespaced: false,
+    weight:     189,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.PROVIDER_NETWORK }
+    },
+    exact:      false,
+    ifHaveType: HCI.PROVIDER_NETWORK,
+  });
+
+  configureType(HCI.VLAN, { hiddenNamespaceGroupButton: true, canYaml: false });
+
+  headers(HCI.VLAN, [
+    STATE,
+    NAME_COL,
+    {
+      name:  'id',
+      label: 'ID',
+      value: 'spec.id',
+      sort:  'spec.id'
+    },
+    {
+      name:     'provider',
+      labelKey: 'harvester.subnet.provider.label',
+      value:    'spec.provider',
+      sort:     'spec.provider'
+    }
+  ]);
+
+  virtualType({
+    labelKey:   'harvester.vlanNetwork.label',
+    name:       HCI.VLAN,
+    namespaced: false,
+    weight:     188,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.VLAN }
+    },
+    exact:      false,
+    ifHaveType: HCI.VLAN,
+  });
+
   configureType(HCI.SNAPSHOT, {
     isCreatable: false,
     location:    {
@@ -1093,7 +1251,7 @@ export function init($plugin, store) {
     labelKey:   'harvester.loadBalancer.label',
     name:       HCI.LB,
     namespaced: true,
-    weight:     185,
+    weight:     483,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.LB }
@@ -1132,7 +1290,7 @@ export function init($plugin, store) {
     labelKey:   'harvester.ipPool.label',
     name:       HCI.IP_POOL,
     namespaced: false,
-    weight:     184,
+    weight:     482,
     route:      {
       name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.IP_POOL }
@@ -1141,4 +1299,24 @@ export function init($plugin, store) {
     ifHaveType: HCI.IP_POOL,
   });
   headers(HCI.IP_POOL, IP_POOL_HEADERS);
+
+  configureType(HCI.HOST_NETWORK_CONFIG, {
+    location: {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.HOST_NETWORK_CONFIG }
+    },
+    canYaml: false,
+  });
+  virtualType({
+    labelKey:   'harvester.hostNetworkConfig.label',
+    name:       HCI.HOST_NETWORK_CONFIG,
+    namespaced: false,
+    weight:     481,
+    route:      {
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
+      params: { resource: HCI.HOST_NETWORK_CONFIG }
+    },
+    exact:      false,
+    ifHaveType: HCI.HOST_NETWORK_CONFIG,
+  });
 }

pkg/harvester/config/harvester-map.js

@@ -88,6 +88,8 @@ export const CSI_SECRETS = {
   CSI_NODE_PUBLISH_SECRET_NAMESPACE: 'csi.storage.k8s.io/node-publish-secret-namespace',
   CSI_NODE_STAGE_SECRET_NAME:        'csi.storage.k8s.io/node-stage-secret-name',
   CSI_NODE_STAGE_SECRET_NAMESPACE:   'csi.storage.k8s.io/node-stage-secret-namespace',
+  CSI_NODE_EXPAND_SECRET_NAME:       'csi.storage.k8s.io/node-expand-secret-name',
+  CSI_NODE_EXPAND_SECRET_NAMESPACE:  'csi.storage.k8s.io/node-expand-secret-namespace'
 };
 
 // Some harvester CRD type is not equal to model file name, define the mapping here

pkg/harvester/config/labels-annotations.js

@@ -19,6 +19,7 @@ export const HCI = {
   NETWORK_TYPE:                     'network.harvesterhci.io/type',
   VM_NAME:                          'harvesterhci.io/vmName',
   VM_NAME_PREFIX:                   'harvesterhci.io/vmNamePrefix',
+  VM_DISPLAY_NAME:                  'harvesterhci.io/vmDisplayName',
   VM_RESERVED_MEMORY:               'harvesterhci.io/reservedMemory',
   MAINTENANCE_STATUS:               'harvesterhci.io/maintain-status',
   HOST_CUSTOM_NAME:                 'harvesterhci.io/host-custom-name',
@@ -81,4 +82,5 @@ export const HCI = {
   MAC_ADDRESS:                      'harvesterhci.io/mac-address',
   NODE_UPGRADE_PAUSE_MAP:           'harvesterhci.io/node-upgrade-pause-map',
   CDI_POPULATOR_KIND:               'cdi.kubevirt.io/storage.populator.kind',
+  CNI_NETWORKS:                     'k8s.v1.cni.cncf.io/networks',
 };

pkg/harvester/config/settings.ts

@@ -1,48 +1,50 @@
 export const HCI_SETTING = {
-  BACKUP_TARGET:                          'backup-target',
+  BACKUP_TARGET:                            'backup-target',
-  CONTAINERD_REGISTRY:                    'containerd-registry',
+  CONTAINERD_REGISTRY:                      'containerd-registry',
-  LOG_LEVEL:                              'log-level',
+  LOG_LEVEL:                                'log-level',
-  SERVER_VERSION:                         'server-version',
+  SERVER_VERSION:                           'server-version',
-  UI_INDEX:                               'ui-index',
+  UI_INDEX:                                 'ui-index',
-  UPGRADE_CHECKER_ENABLED:                'upgrade-checker-enabled',
+  UPGRADE_CHECKER_ENABLED:                  'upgrade-checker-enabled',
-  UPGRADE_CHECKER_URL:                    'upgrade-checker-url',
+  UPGRADE_CHECKER_URL:                      'upgrade-checker-url',
-  VLAN:                                   'vlan',
+  VLAN:                                     'vlan',
-  UI_SOURCE:                              'ui-source',
+  UI_SOURCE:                                'ui-source',
-  UI_PL:                                  'ui-pl',
+  UI_PL:                                    'ui-pl',
-  HTTP_PROXY:                             'http-proxy',
+  HTTP_PROXY:                               'http-proxy',
-  ADDITIONAL_CA:                          'additional-ca',
+  ADDITIONAL_CA:                            'additional-ca',
-  OVERCOMMIT_CONFIG:                      'overcommit-config',
+  OVERCOMMIT_CONFIG:                        'overcommit-config',
-  CLUSTER_REGISTRATION_URL:               'cluster-registration-url',
+  CLUSTER_REGISTRATION_URL:                 'cluster-registration-url',
-  DEFAULT_STORAGE_CLASS:                  'default-storage-class',
+  DEFAULT_STORAGE_CLASS:                    'default-storage-class',
-  SUPPORT_BUNDLE_TIMEOUT:                 'support-bundle-timeout',
+  SUPPORT_BUNDLE_TIMEOUT:                   'support-bundle-timeout',
-  SUPPORT_BUNDLE_EXPIRATION:              'support-bundle-expiration',
+  SUPPORT_BUNDLE_EXPIRATION:                'support-bundle-expiration',
-  SUPPORT_BUNDLE_FILE_NAME:               'support-bundle-file-name',
+  SUPPORT_BUNDLE_FILE_NAME:                 'support-bundle-file-name',
-  SUPPORT_BUNDLE_IMAGE:                   'support-bundle-image',
+  SUPPORT_BUNDLE_IMAGE:                     'support-bundle-image',
-  SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT: 'support-bundle-node-collection-timeout',
+  SUPPORT_BUNDLE_NODE_COLLECTION_TIMEOUT:   'support-bundle-node-collection-timeout',
-  STORAGE_NETWORK:                        'storage-network',
+  STORAGE_NETWORK:                          'storage-network',
-  RWX_NETWORK:                            'rwx-network',
+  RWX_NETWORK:                              'rwx-network',
-  VM_FORCE_RESET_POLICY:                  'vm-force-reset-policy',
+  VM_FORCE_RESET_POLICY:                    'vm-force-reset-policy',
-  SSL_CERTIFICATES:                       'ssl-certificates',
+  SSL_CERTIFICATES:                         'ssl-certificates',
-  SSL_PARAMETERS:                         'ssl-parameters',
+  SSL_PARAMETERS:                           'ssl-parameters',
-  SUPPORT_BUNDLE_NAMESPACES:              'support-bundle-namespaces',
+  SUPPORT_BUNDLE_NAMESPACES:                'support-bundle-namespaces',
-  AUTO_DISK_PROVISION_PATHS:              'auto-disk-provision-paths',
+  AUTO_DISK_PROVISION_PATHS:                'auto-disk-provision-paths',
-  RELEASE_DOWNLOAD_URL:                   'release-download-url',
+  RELEASE_DOWNLOAD_URL:                     'release-download-url',
-  CCM_CSI_VERSION:                        'harvester-csi-ccm-versions',
+  CCM_CSI_VERSION:                          'harvester-csi-ccm-versions',
-  CSI_DRIVER_CONFIG:                      'csi-driver-config',
+  CSI_DRIVER_CONFIG:                        'csi-driver-config',
-  CSI_ONLINE_EXPAND_VALIDATION:           'csi-online-expand-validation',
+  CSI_ONLINE_EXPAND_VALIDATION:             'csi-online-expand-validation',
-  VM_TERMINATION_PERIOD:                  'default-vm-termination-grace-period-seconds',
+  VM_TERMINATION_PERIOD:                    'default-vm-termination-grace-period-seconds',
-  NTP_SERVERS:                            'ntp-servers',
+  NTP_SERVERS:                              'ntp-servers',
-  AUTO_ROTATE_RKE2_CERTS:                 'auto-rotate-rke2-certs',
+  AUTO_ROTATE_RKE2_CERTS:                   'auto-rotate-rke2-certs',
-  KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES:   'kubeconfig-default-token-ttl-minutes',
+  KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES:     'kubeconfig-default-token-ttl-minutes',
-  LONGHORN_V2_DATA_ENGINE_ENABLED:        'longhorn-v2-data-engine-enabled',
+  LONGHORN_V2_DATA_ENGINE_ENABLED:          'longhorn-v2-data-engine-enabled',
-  ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO: 'additional-guest-memory-overhead-ratio',
+  LONGHORN_V2_DATA_ENGINE_HUGEPAGE_ENABLED: 'longhorn-v2-data-engine-hugepage-enabled',
-  UPGRADE_CONFIG:                         'upgrade-config',
+  LONGHORN_V2_DATA_ENGINE_MEMORY_SIZE:      'longhorn-v2-data-engine-memory-size',
-  VM_MIGRATION_NETWORK:                   'vm-migration-network',
+  ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO:   'additional-guest-memory-overhead-ratio',
-  RANCHER_CLUSTER:                        'rancher-cluster',
+  UPGRADE_CONFIG:                           'upgrade-config',
-  MAX_HOTPLUG_RATIO:                      'max-hotplug-ratio',
+  VM_MIGRATION_NETWORK:                     'vm-migration-network',
-  KUBEVIRT_MIGRATION:                     'kubevirt-migration',
+  RANCHER_CLUSTER:                          'rancher-cluster',
-  INSTANCE_MANAGER_RESOURCES:             'instance-manager-resources',
+  MAX_HOTPLUG_RATIO:                        'max-hotplug-ratio',
-  CLUSTER_POD_SECURITY_STANDARD:          'cluster-pod-security-standard'
+  KUBEVIRT_MIGRATION:                       'kubevirt-migration',
+  INSTANCE_MANAGER_RESOURCES:               'instance-manager-resources',
+  CLUSTER_POD_SECURITY_STANDARD:            'cluster-pod-security-standard'
 };
 
 export const HCI_ALLOWED_SETTINGS = {
@@ -112,6 +114,14 @@ export const HCI_ALLOWED_SETTINGS = {
     experimental: true,
     featureFlag:  'longhornV2LVMSupport'
   },
+  [HCI_SETTING.LONGHORN_V2_DATA_ENGINE_HUGEPAGE_ENABLED]: {
+    kind:         'boolean',
+    featureFlag:  'longhornV2HugepageSettings'
+  },
+  [HCI_SETTING.LONGHORN_V2_DATA_ENGINE_MEMORY_SIZE]: {
+    kind:         'number',
+    featureFlag:  'longhornV2HugepageSettings'
+  },
   [HCI_SETTING.ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO]: { kind: 'string', from: 'import' },
   [HCI_SETTING.UPGRADE_CONFIG]:                         {
     kind:         'json',

pkg/harvester/config/types.js

@@ -46,3 +46,9 @@ export const CDI_POPULATOR_KIND = {
   VOLUME_IMPORT_SOURCE: 'VolumeImportSource',
   VOLUME_CLONE_SOURCE:  'VolumeCloneSource',
 };
+
+export const FILESYSTEM_SOURCE_TYPE = {
+  CONFIGMAP:      'configmap',
+  SECRET:         'secret',
+  SERVICEACCOUNT: 'serviceaccount',
+};

pkg/harvester/dialog/ConfirmExecutionDialog.vue

@@ -98,9 +98,9 @@ export default {
   methods: {
     escapeHtml,
 
-    close() {
+    close(data) {
       this.errors = [];
-      this.$emit('close');
+      this.$emit('close', data);
     },
 
     async apply(buttonDone) {
@@ -109,7 +109,7 @@ export default {
           await resource.doActionGrowl(this.modalData.action, {});
         }
         buttonDone(true);
-        this.close();
+        this.close({ performCallback: true, clearTableSelection: true });
       } catch (e) {
         this.errors = exceptionToErrorsArray(e);
         buttonDone(false);

pkg/harvester/dialog/EnablePciPassthrough.vue

@@ -1,6 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
+import { Banner } from '@components/Banner';
 import { Card } from '@components/Card';
+import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton from '@shell/components/AsyncButton';
 import { escapeHtml } from '@shell/utils/string';
 import { HCI } from '../types';
@@ -13,7 +15,9 @@ export default {
 
   components: {
     AsyncButton,
+    Banner,
     Card,
+    Checkbox,
   },
 
   props: {
@@ -24,10 +28,16 @@ export default {
   },
 
   data() {
-    return {};
+    return { disableResourcePooling: false };
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    disableResourcePoolingEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('disableResourcePooling');
+    },
+  },
 
   methods: {
     close() {
@@ -52,9 +62,10 @@ export default {
             }]
           },
           spec: {
-            address:  actionResource.status.address,
+            address:                actionResource.status.address,
-            nodeName: actionResource.status.nodeName,
+            nodeName:               actionResource.status.nodeName,
-            userName
+            userName,
+            disableResourcePooling: this.disableResourcePooling,
           }
         } );
 
@@ -85,7 +96,19 @@ export default {
     </template>
 
     <template #body>
-      {{ t('harvester.pci.enablePassthroughWarning') }}
+      <p class="mb-20">
+        {{ t('harvester.pci.enablePassthroughWarning') }}
+      </p>
+      <template v-if="disableResourcePoolingEnabled">
+        <Checkbox
+          v-model:value="disableResourcePooling"
+          label-key="harvester.pci.disableResourcePooling"
+        />
+        <Banner
+          color="info"
+          :label="t('harvester.pci.disableResourcePoolingDescription')"
+        />
+      </template>
     </template>
 
     <template #actions>

pkg/harvester/dialog/HarvesterMigrationDialog.vue

@@ -117,10 +117,10 @@ export default {
   },
 
   methods: {
-    close() {
+    close(data) {
       this.nodeName = '';
       this.errors = [];
-      this.$emit('close');
+      this.$emit('close', data);
     },
 
     async apply(buttonDone) {
@@ -166,7 +166,7 @@ export default {
         }
 
         buttonDone(true);
-        this.close();
+        this.close({ performCallback: true, clearTableSelection: true });
       } catch (err) {
         const error = err?.data || err;
         const message = exceptionToErrorsArray(error);

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

@@ -108,6 +108,7 @@ export default {
           <YamlEditor
             ref="yamlUser"
             v-model:value="config"
+            :mode="mode"
             class="yaml-editor"
             :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
             @onChanges="update"

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

@@ -9,6 +9,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { allHash } from '@shell/utils/promise';
+import { NAMESPACE, NODE } from '@shell/config/types';
 import { HCI } from '../types';
 import { NETWORK_TYPE, L2VLAN_MODE } from '../config/types';
 import { removeObject } from '@shell/utils/array';
@@ -20,6 +21,7 @@ const { ACCESS, TRUNK } = L2VLAN_MODE;
 
 const AUTO = 'auto';
 const MANUAL = 'manual';
+const KUBE_SYSTEM = 'kube-system';
 
 export default {
   emits: ['update:value'],
@@ -70,7 +72,12 @@ export default {
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
-    await allHash({ clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }) });
+    await allHash({
+      clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+      namespaces:      this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE }),
+      nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      linkMonitors:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LINK_MONITOR }),
+    });
   },
 
   created() {
@@ -199,6 +206,80 @@ export default {
       }
 
       return this.type === UNTAGGED;
+    },
+
+    showNicsTab() {
+      return this.isOverlayNetwork && this.value.metadata.namespace === KUBE_SYSTEM;
+    },
+
+    namespaceOptions() {
+      const ns = this.$store.getters['harvester/all'](NAMESPACE) || [];
+
+      // Allow users to select the "kube-system" namespace as the external subnet from Kube-OVN.
+      // This expects the provider network to be in the "kube-system" namespace for VPC NAT gateway functionality.
+      return ns
+        .filter((ns) => !ns.isSystem || ns.id === KUBE_SYSTEM)
+        .map((ns) => ({ name: ns.id }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    },
+
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+
+      return nodes.filter((n) => n.isEtcd !== 'true');
+    },
+
+    nics() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const linkMonitor = this.$store.getters[`${ inStore }/byId`](HCI.LINK_MONITOR, 'nic') || {};
+      const linkStatus = linkMonitor?.status?.linkStatus || {};
+      const nodes = this.nodes.map((n) => n.id);
+
+      const out = [];
+
+      // Collect all nics from all nodes (for overlay, we select from all nodes)
+      Object.keys(linkStatus).map((nodeName) => {
+        if (nodes.includes(nodeName)) {
+          const nics = linkStatus[nodeName] || [];
+
+          nics.map((nic) => {
+            out.push({
+              ...nic,
+              nodeName,
+            });
+          });
+        }
+      });
+
+      return out;
+    },
+
+    nicOptions() {
+      const out = [];
+      const seen = new Set();
+
+      (this.nics || []).forEach((nic) => {
+        if (!seen.has(nic.name)) {
+          seen.add(nic.name);
+          out.push({
+            label: nic.name,
+            value: nic.name,
+          });
+        }
+      });
+
+      return out.sort((a, b) => a.label.localeCompare(b.label));
+    },
+
+    master: {
+      get() {
+        return this.config?.master || '';
+      },
+
+      set(value) {
+        this.config.master = value;
+      }
     }
   },
 
@@ -214,6 +295,7 @@ export default {
         this.config.ipam = {};
         this.config.bridge = '';
         delete this.config.provider;
+        delete this.config.master;
         delete this.config.server_socket;
       }
     },
@@ -230,6 +312,13 @@ export default {
         this.config.vlan = '';
       }
     },
+    'value.metadata.namespace'(newNamespace) {
+      // NIC selection is only valid for overlay in kube-system namespace.
+      if (newNamespace !== KUBE_SYSTEM) {
+        delete this.config.master;
+        this.value.spec.config = JSON.stringify({ ...this.config });
+      }
+    },
   },
 
   methods: {
@@ -324,6 +413,10 @@ export default {
         delete this.config.promiscMode;
         delete this.config.vlan;
         delete this.config.ipam;
+
+        if (this.value.metadata.namespace !== KUBE_SYSTEM) {
+          delete this.config.master;
+        }
       }
 
       if (this.isUntaggedNetwork) {
@@ -350,6 +443,7 @@ export default {
       ref="nd"
       :value="value"
       :mode="mode"
+      :namespace-options="namespaceOptions"
       @update:value="$emit('update:value', $event)"
     />
     <Tabbed
@@ -521,6 +615,25 @@ export default {
           </div>
         </div>
       </Tab>
+      <Tab
+        v-if="showNicsTab"
+        name="nics"
+        :label="t('harvester.network.tabs.nic')"
+        :weight="97"
+        class="bordered-table"
+      >
+        <div class="row mt-10">
+          <div class="col span-12">
+            <LabeledSelect
+              v-model:value="master"
+              :label="t('harvester.vlanConfig.uplink.nics.label')"
+              :placeholder="t('harvester.vlanConfig.uplink.nics.overlayWarning')"
+              :mode="mode"
+              :options="nicOptions"
+            />
+          </div>
+        </div>
+      </Tab>
     </Tabbed>
   </CruResource>
 </template>

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

@@ -3,8 +3,9 @@ import KeyValue from '@shell/components/form/KeyValue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import RadioGroup from '@components/Form/Radio/RadioGroup';
+import Checkbox from '@components/Form/Checkbox/Checkbox';
 import { SECRET, LONGHORN } from '@shell/config/types';
-import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { _CREATE, _VIEW, _EDIT } from '@shell/config/query-params';
 import { CSI_SECRETS } from '@pkg/harvester/config/harvester-map';
 import { clone } from '@shell/utils/object';
 import { uniq } from '@shell/utils/array';
@@ -16,7 +17,9 @@ const {
   CSI_NODE_PUBLISH_SECRET_NAME,
   CSI_NODE_PUBLISH_SECRET_NAMESPACE,
   CSI_NODE_STAGE_SECRET_NAME,
-  CSI_NODE_STAGE_SECRET_NAMESPACE
+  CSI_NODE_STAGE_SECRET_NAMESPACE,
+  CSI_NODE_EXPAND_SECRET_NAME,
+  CSI_NODE_EXPAND_SECRET_NAMESPACE
 } = CSI_SECRETS;
 
 export default {
@@ -27,6 +30,7 @@ export default {
     LabeledSelect,
     LabeledInput,
     RadioGroup,
+    Checkbox,
   },
 
   props: {
@@ -57,7 +61,10 @@ export default {
       };
     }
 
-    return { };
+    const hasExpandSecret = !!(this.value.parameters?.[CSI_NODE_EXPAND_SECRET_NAME] && this.value.parameters?.[CSI_NODE_EXPAND_SECRET_NAMESPACE]);
+    const volumeExpansionCheckBoxEnabled = this.realMode === _CREATE ? true : hasExpandSecret;
+
+    return { volumeExpansionCheckBoxEnabled };
   },
 
   computed: {
@@ -98,8 +105,11 @@ export default {
       }, []);
     },
 
+    isEdit() {
+      return this.realMode === _EDIT;
+    },
     isView() {
-      return this.mode === _VIEW;
+      return this.realMode === _VIEW;
     },
 
     migratableOptions() {
@@ -152,6 +162,10 @@ export default {
       }
     },
 
+    enableOnlineExpansionVolumeEncryption() {
+      return this.value.expandOnlineEncryptedVolumeFeatureEnabled;
+    },
+
     volumeEncryption: {
       set(neu) {
         this.value['parameters'] = {
@@ -180,6 +194,11 @@ export default {
       set(selectedSecret) {
         const [namespace, name] = selectedSecret.split('/');
 
+        const expandSecretParams = (this.enableOnlineExpansionVolumeEncryption && this.volumeExpansionCheckBoxEnabled) ? {
+          [CSI_NODE_EXPAND_SECRET_NAME]:      name,
+          [CSI_NODE_EXPAND_SECRET_NAMESPACE]: namespace,
+        } : {};
+
         this.value['parameters'] = {
           ...this.value.parameters,
           [CSI_PROVISIONER_SECRET_NAME]:       name,
@@ -187,7 +206,8 @@ export default {
           [CSI_NODE_STAGE_SECRET_NAME]:        name,
           [CSI_PROVISIONER_SECRET_NAMESPACE]:  namespace,
           [CSI_NODE_PUBLISH_SECRET_NAMESPACE]: namespace,
-          [CSI_NODE_STAGE_SECRET_NAMESPACE]:   namespace
+          [CSI_NODE_STAGE_SECRET_NAMESPACE]:   namespace,
+          ...expandSecretParams,
         };
       }
     },
@@ -240,6 +260,32 @@ export default {
       }
     },
   },
+
+  watch: {
+    volumeExpansionCheckBoxEnabled(enabled) {
+      const currentSecret = this.secret;
+
+      if (!currentSecret) {
+        return;
+      }
+
+      const [namespace, name] = currentSecret.split('/');
+
+      if (enabled && this.enableOnlineExpansionVolumeEncryption) {
+        this.value['parameters'] = {
+          ...this.value.parameters,
+          [CSI_NODE_EXPAND_SECRET_NAME]:      name,
+          [CSI_NODE_EXPAND_SECRET_NAMESPACE]: namespace,
+        };
+      } else {
+        const params = { ...this.value.parameters };
+
+        delete params[CSI_NODE_EXPAND_SECRET_NAME];
+        delete params[CSI_NODE_EXPAND_SECRET_NAMESPACE];
+        this.value['parameters'] = params;
+      }
+    },
+  },
 };
 </script>
 <template>
@@ -337,6 +383,16 @@ export default {
             :mode="mode"
           />
         </div>
+        <div
+          v-if="enableOnlineExpansionVolumeEncryption"
+          class="col span-6 flex items-center mt-20"
+        >
+          <Checkbox
+            v-model:value="volumeExpansionCheckBoxEnabled"
+            :label="t('harvester.storage.volumeExpansionCheckbox')"
+            :disabled="isEdit || isView"
+          />
+        </div>
       </div>
     </template>
     <KeyValue

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

@@ -26,6 +26,7 @@ import CpuMemory from './kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
 import CpuModel from './kubevirt.io.virtualmachine/VirtualMachineCpuModel';
 import CloudConfig from './kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
 import SSHKey from './kubevirt.io.virtualmachine/VirtualMachineSSHKey';
+import Filesystem from './kubevirt.io.virtualmachine/VirtualMachineFilesystem';
 
 export default {
   name: 'HarvesterEditVMTemplate',
@@ -51,6 +52,7 @@ export default {
     UnitInput,
     Banner,
     KeyValue,
+    Filesystem,
   },
 
   mixins: [CreateEditView, VM_MIXIN],
@@ -95,6 +97,10 @@ export default {
     secretNamePrefix() {
       return this.templateValue?.metadata?.name;
     },
+
+    filesystemEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('supportFilesystem');
+    },
   },
 
   watch: {
@@ -154,6 +160,7 @@ export default {
 
   mounted() {
     this.imageId = this.diskRows[0]?.image || '';
+    this['filesystemRows'] = this.getFilesystemRows(this.value.spec.vm);
   },
 
   methods: {
@@ -349,6 +356,19 @@ export default {
         </template>
       </Tab>
 
+      <Tab
+        v-if="filesystemEnabled"
+        name="filesystem"
+        :label="t('harvester.tab.filesystem')"
+        :weight="-8"
+      >
+        <Filesystem
+          v-model:value="filesystemRows"
+          :mode="mode"
+          :namespace="templateValue.metadata.namespace"
+        />
+      </Tab>
+
       <Tab
         name="labels"
         :label="t('generic.labels')"

pkg/harvester/edit/kubeovn.io.iptablesdnatrule.vue

@@ -0,0 +1,190 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      eip:            this.value?.spec?.eip || '',
+      externalPort:   this.value?.spec?.externalPort || '',
+      internalIp:     this.value?.spec?.internalIp || '',
+      internalPort:   this.value?.spec?.internalPort || '',
+      protocol:       this.value?.spec?.protocol || '',
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ eips: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IPTABLES_EIP }) });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    eipOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const eips = this.$store.getters[`${ inStore }/all`](HCI.IPTABLES_EIP) || [];
+
+      return eips.map((eip) => ({
+        label: eip.id,
+        value: eip.id,
+      }));
+    },
+
+    protocolOptions() {
+      return [
+        { label: 'TCP', value: 'tcp' },
+        { label: 'UDP', value: 'udp' },
+      ];
+    },
+  },
+
+  methods: {
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      this.value.spec.eip = this.eip;
+      this.value.spec.externalPort = this.externalPort;
+      this.value.spec.internalIp = this.internalIp;
+      this.value.spec.internalPort = this.internalPort;
+      this.value.spec.protocol = this.protocol;
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('generic.basic')"
+        :weight="99"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="eip"
+                class="mb-20"
+                :options="eipOptions"
+                :mode="mode"
+                :label="t('harvester.dnat.eip.label')"
+                :placeholder="t('harvester.dnat.eip.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="externalPort"
+                class="mb-20"
+                :mode="mode"
+                :label="t('harvester.dnat.externalPort.label')"
+                :placeholder="t('harvester.dnat.externalPort.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="internalIp"
+                class="mb-20"
+                :mode="mode"
+                :label="t('harvester.dnat.internalIp.label')"
+                :placeholder="t('harvester.dnat.internalIp.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="internalPort"
+                class="mb-20"
+                :mode="mode"
+                :label="t('harvester.dnat.internalPort.label')"
+                :placeholder="t('harvester.dnat.internalPort.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="protocol"
+                class="mb-20"
+                :options="protocolOptions"
+                :mode="mode"
+                :label="t('harvester.dnat.protocol.label')"
+                :placeholder="t('harvester.dnat.protocol.placeholder')"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubeovn.io.iptableseip.vue

@@ -0,0 +1,168 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      natGwDp:        this.value?.spec?.natGwDp || '',
+      externalSubnet: this.value?.spec?.externalSubnet || '',
+      v4ip:           this.value?.spec?.v4ip || '',
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      natGateways: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VPC_NAT_GATEWAY }),
+      subnets:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SUBNET }),
+    });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    natGatewayOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const natGateways = this.$store.getters[`${ inStore }/all`](HCI.VPC_NAT_GATEWAY) || [];
+
+      return natGateways.map((gw) => ({
+        label: gw.id,
+        value: gw.id,
+      }));
+    },
+
+    subnetOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const subnets = this.$store.getters[`${ inStore }/all`](HCI.SUBNET) || [];
+
+      return subnets.map((subnet) => ({
+        label: subnet.id,
+        value: subnet.id,
+      }));
+    },
+  },
+
+  methods: {
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      this.value.spec.natGwDp = this.natGwDp;
+      this.value.spec.externalSubnet = this.externalSubnet;
+      this.value.spec.v4ip = this.v4ip;
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('generic.basic')"
+        :weight="99"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="natGwDp"
+                class="mb-20"
+                :options="natGatewayOptions"
+                :mode="mode"
+                :label="t('harvester.externalIP.natGateway.label')"
+                :placeholder="t('harvester.externalIP.natGateway.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="externalSubnet"
+                class="mb-20"
+                :options="subnetOptions"
+                :label="t('harvester.externalIP.externalSubnet.label')"
+                :placeholder="t('harvester.externalIP.externalSubnet.placeholder')"
+                :mode="mode"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="v4ip"
+                class="mb-20"
+                :label="t('harvester.externalIP.v4ip.label')"
+                :placeholder="t('harvester.externalIP.v4ip.placeholder')"
+                :mode="mode"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubeovn.io.iptablessnatrule.vue

@@ -0,0 +1,140 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      eip:            this.value?.spec?.eip || '',
+      internalCIDR:   this.value?.spec?.internalCIDR || '',
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ eips: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IPTABLES_EIP }) });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    eipOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const eips = this.$store.getters[`${ inStore }/all`](HCI.IPTABLES_EIP) || [];
+
+      return eips.map((eip) => ({
+        label: eip.id,
+        value: eip.id,
+      }));
+    },
+  },
+
+  methods: {
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      this.value.spec.eip = this.eip;
+      this.value.spec.internalCIDR = this.internalCIDR;
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('generic.basic')"
+        :weight="99"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="eip"
+                class="mb-20"
+                :options="eipOptions"
+                :mode="mode"
+                :label="t('harvester.snat.eip.label')"
+                :placeholder="t('harvester.snat.eip.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="internalCIDR"
+                class="mb-20"
+                :mode="mode"
+                :label="t('harvester.snat.internalCIDR.label')"
+                :placeholder="t('harvester.snat.internalCIDR.placeholder')"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubeovn.io.providernetwork.vue

@@ -0,0 +1,384 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import ArrayList from '@shell/components/form/ArrayList';
+import InfoBox from '@shell/components/InfoBox';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ArrayListSelect from '@shell/components/form/ArrayListSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    ArrayList,
+    InfoBox,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledSelect,
+    ArrayListSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      defaultInterface: this.value?.spec?.defaultInterface || '',
+      excludedNodes:    this.value?.spec?.excludeNodes || [],
+      customInterfaces: this.value?.spec?.customInterfaces || [],
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      nodes:        this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      linkMonitors: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LINK_MONITOR }),
+    });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE);
+
+      return nodes.filter((n) => n.isEtcd !== 'true');
+    },
+
+    nics() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const linkMonitor = this.$store.getters[`${ inStore }/byId`](HCI.LINK_MONITOR, 'nic') || {};
+      const linkStatus = linkMonitor?.status?.linkStatus || {};
+      const nodes = this.nodes.map((n) => n.id);
+
+      const out = [];
+
+      // Collect all nics from all nodes
+      Object.keys(linkStatus).map((nodeName) => {
+        if (nodes.includes(nodeName)) {
+          const nics = linkStatus[nodeName] || [];
+
+          nics.map((nic) => {
+            out.push({
+              ...nic,
+              nodeName,
+            });
+          });
+        }
+      });
+
+      return out;
+    },
+
+    nicOptions() {
+      const out = [];
+      const seen = new Set();
+
+      (this.nics || []).forEach((nic) => {
+        if (!seen.has(nic.name)) {
+          seen.add(nic.name);
+          out.push({
+            label: nic.name,
+            value: nic.name,
+          });
+        }
+      });
+
+      return out.sort((a, b) => a.label.localeCompare(b.label));
+    },
+
+    nodeOptions() {
+      return this.nodes.map((node) => ({
+        label: node.id,
+        value: node.id,
+      }));
+    },
+  },
+
+  methods: {
+    removeCustomInterface(index) {
+      this.customInterfaces.splice(index, 1);
+    },
+
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      this.value.spec.defaultInterface = this.defaultInterface;
+      this.value.spec.excludeNodes = this.excludedNodes;
+      this.value.spec.customInterfaces = (this.customInterfaces || [])
+        .filter((item) => item?.interface || (item?.nodes || []).length)
+        .map((item) => ({
+          interface: item.interface || '',
+          nodes:     (item.nodes || []).filter((node) => !!node),
+        }))
+        .filter((item) => item.interface && item.nodes.length > 0);
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="Interfaces"
+        label="Interfaces"
+        :weight="99"
+      >
+        <LabeledSelect
+          v-model:value="defaultInterface"
+          class="mb-20"
+          required
+          :options="nicOptions"
+          :mode="mode"
+          :label="t('harvester.providerNetwork.defaultInterface.label')"
+          :placeholder="t('harvester.providerNetwork.defaultInterface.placeholder')"
+        />
+
+        <hr class="section-divider" />
+
+        <ArrayList
+          v-model:value="customInterfaces"
+          class="mb-20 custom-interface-list"
+          :mode="mode"
+          :title="t('harvester.providerNetwork.customInterfaces.label')"
+          :protip="false"
+          :remove-allowed="false"
+          :initial-empty-row="true"
+          :default-add-value="{ interface: '', nodes: [] }"
+        >
+          <template #add="{ add }">
+            <div class="custom-interface-primary-add">
+              <button
+                type="button"
+                class="btn role-primary"
+                :disabled="mode === 'view'"
+                @click="add"
+              >
+                {{ t('harvester.providerNetwork.customInterfaces.addLabel') }}
+              </button>
+            </div>
+          </template>
+
+          <template #column-headers>
+            <div class="row custom-interface-header">
+              <div class="col span-6">
+                {{ t('harvester.providerNetwork.customInterfaces.interface.label') }}
+              </div>
+              <div class="col span-6">
+                {{ t('harvester.providerNetwork.customInterfaces.nodes.label') }}
+              </div>
+            </div>
+          </template>
+
+          <template #columns="scope">
+            <InfoBox class="custom-interface-box">
+              <button
+                v-if="mode !== 'view'"
+                type="button"
+                class="role-link btn btn-sm remove"
+                @click="removeCustomInterface(scope.i)"
+              >
+                <i class="icon icon-x" />
+              </button>
+
+              <div class="custom-interface-content">
+                <div class="row custom-interface-row interface-row">
+                  <div class="col span-12 interface-col">
+                    <h3 class="mb-10">
+                      {{ t('harvester.providerNetwork.customInterfaces.interface.label') }}
+                    </h3>
+                    <LabeledSelect
+                      v-model:value="scope.row.value.interface"
+                      class="mb-20"
+                      :label="''"
+                      :options="nicOptions"
+                      :mode="mode"
+                      :placeholder="t('harvester.providerNetwork.customInterfaces.interface.placeholder')"
+                    />
+                  </div>
+                </div>
+
+                <div class="row custom-interface-row nodes-row">
+                  <div class="col span-12">
+                    <ArrayListSelect
+                      v-model:value="scope.row.value.nodes"
+                      :options="nodeOptions"
+                      :mode="mode"
+                      :disabled="mode === 'view'"
+                      :enable-default-add-value="false"
+                      :array-list-props="{
+                        addLabel: t('harvester.providerNetwork.customInterfaces.nodes.addLabel'),
+                        initialEmptyRow: true,
+                        title: t('harvester.providerNetwork.customInterfaces.nodes.label'),
+                        required: false,
+                        protip: false,
+                      }"
+                      :select-props="{
+                        placeholder: t('harvester.providerNetwork.customInterfaces.nodes.placeholder'),
+                        disabled: mode === 'view',
+                      }"
+                    >
+                      <template #add="{ add }">
+                        <div class="custom-interface-add">
+                          <button
+                            type="button"
+                            class="btn role-tertiary add"
+                            :disabled="mode === 'view'"
+                            @click="add"
+                          >
+                            {{ t('harvester.providerNetwork.customInterfaces.nodes.addLabel') }}
+                          </button>
+                        </div>
+                      </template>
+                    </ArrayListSelect>
+                  </div>
+                </div>
+              </div>
+            </InfoBox>
+          </template>
+        </ArrayList>
+      </Tab>
+
+      <Tab
+        name="excludedNodes"
+        :label="t('harvester.providerNetwork.excludedNodes.label')"
+        :weight="98"
+      >
+        <div class="row">
+          <div class="col span-12">
+            <ArrayListSelect
+              v-model:value="excludedNodes"
+              :options="nodeOptions"
+              :disabled="mode === 'view'"
+              :mode="mode"
+              :enable-default-add-value="false"
+              :array-list-props="{
+                addLabel: t('harvester.providerNetwork.excludedNodes.addLabel'),
+                initialEmptyRow: true,
+                required: false,
+                protip: false,
+              }"
+              :select-props="{
+                placeholder: t('harvester.providerNetwork.excludedNodes.placeholder'),
+                disabled: mode === 'view',
+              }"
+            />
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.section-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 10px 0 20px;
+}
+
+.custom-interface-header {
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.custom-interface-row {
+  align-items: flex-start;
+}
+
+.interface-row {
+  width: calc(100% - 90px);
+  margin-bottom: 10px;
+}
+
+.nodes-row {
+  align-items: flex-start;
+}
+
+.custom-interface-add {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+:deep(.nodes-row .array-list-select .box) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+:deep(.nodes-row .array-list-select .box .remove) {
+  align-self: center;
+}
+
+.custom-interface-primary-add {
+  max-width: 100%;
+}
+
+.custom-interface-box {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  margin-bottom: 5px;
+}
+
+:deep(.custom-interface-list .box) {
+  grid-template-columns: 1fr;
+}
+
+.remove {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+  padding: 0;
+}
+</style>

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

@@ -43,18 +43,20 @@ export default {
   created() {
     const vpc = this.$route.query.vpc || '';
     const enableDHCP = this.value?.spec?.enableDHCP || false;
+    const natOutgoing = this.value?.spec?.natOutgoing || false;
 
     set(this.value.spec, 'enableDHCP', enableDHCP);
     set(this.value, 'spec', this.value.spec || {
-      cidrBlock:  '',
+      cidrBlock:    '',
-      protocol:   NETWORK_PROTOCOL.IPv4,
+      protocol:     NETWORK_PROTOCOL.IPv4,
-      provider:   '',
+      provider:     '',
       vpc,
-      gatewayIP:  '',
+      gateway:      '',
-      excludeIps: [],
+      excludeIps:   [],
-      private:    false,
+      private:      false,
       enableDHCP,
-      acls:       []
+      natOutgoing,
+      acls:         []
     });
   },
 
@@ -62,8 +64,9 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
     const hash = {
-      vpc: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VPC }),
+      vpc:   this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VPC }),
-      nad: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+      nad:   this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
+      vlans: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VLAN }),
     };
 
     await allHash(hash);
@@ -129,6 +132,20 @@ export default {
         label: n.id,
         value: n.id,
       }));
+    },
+    natOutgoingDisabled() {
+      // Disable the NAT Outgoing option when the subnet belongs to the ovn-cluster VPC and its name is join or ovn-default.
+      return this.value?.spec?.vpc === 'ovn-cluster' && ['join', 'ovn-default'].includes(this.value?.metadata?.name);
+    },
+
+    vlanOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vlans = this.$store.getters[`${ inStore }/all`](HCI.VLAN) || [];
+
+      return vlans.map((vlan) => ({
+        label: vlan.id,
+        value: vlan.id,
+      }));
     }
   },
 
@@ -264,6 +281,16 @@ export default {
               :mode="mode"
             />
           </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.vlan"
+              class="mb-20"
+              :options="vlanOptions"
+              :placeholder="t('harvester.subnet.vlan.placeholder')"
+              :label="t('harvester.subnet.vlan.label')"
+              :mode="mode"
+            />
+          </div>
         </div>
         <div class="row mt-20">
           <div class="col span-6">
@@ -304,6 +331,20 @@ export default {
             </Banner>
           </div>
         </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="value.spec.natOutgoing"
+              name="enableExternalConnectivity"
+              :disabled="natOutgoingDisabled"
+              :options="[true, false]"
+              :label="t('harvester.subnet.externalConnectivity.label')"
+              :labels="[t('generic.enabled'), t('generic.disabled')]"
+              :mode="mode"
+              :tooltip="t('harvester.subnet.externalConnectivity.tooltip')"
+            />
+          </div>
+        </div>
         <div class="row mt-20">
           <div class="col span-6">
             <RadioGroup

pkg/harvester/edit/kubeovn.io.vlan.vue

@@ -0,0 +1,146 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      vlanId:   this.value?.spec?.id || '',
+      provider: this.value?.spec?.provider || '',
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({ providerNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PROVIDER_NETWORK }) });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    providerNetworks() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const providerNetworks = this.$store.getters[`${ inStore }/all`](HCI.PROVIDER_NETWORK) || [];
+
+      return providerNetworks.map((pn) => ({
+        label: pn.id,
+        value: pn.id,
+      }));
+    },
+  },
+
+  methods: {
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      if (this.vlanId !== '') {
+        this.value.spec.id = Number(this.vlanId);
+      }
+
+      this.value.spec.provider = this.provider;
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('generic.basic')"
+        :weight="99"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value.number="vlanId"
+                class="mb-20"
+                type="number"
+                :min="1"
+                :max="4094"
+                :label="t('harvester.vlan.id.label')"
+                :placeholder="t('harvester.vlan.id.placeholder')"
+                :mode="mode"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="provider"
+                class="mb-20"
+                :options="providerNetworks"
+                :mode="mode"
+                :label="t('harvester.vlan.provider.label')"
+                :placeholder="t('harvester.vlan.provider.placeholder')"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubeovn.io.vpcnatgateway.vue

@@ -0,0 +1,246 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ArrayListSelect from '@shell/components/form/ArrayListSelect';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/config/labels-annotations';
+import { HCI } from '../types';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    LabeledInput,
+    LabeledSelect,
+    ArrayListSelect,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  data() {
+    const internalTenantNetwork = this.value?.metadata?.annotations?.[HCI_ANNOTATIONS.CNI_NETWORKS] || '';
+
+    return {
+      internalTenantNetwork,
+      vpc:             this.value?.spec?.vpc || '',
+      subnet:          this.value?.spec?.subnet || '',
+      lanIp:           this.value?.spec?.lanIp || '',
+      externalSubnets: this.value?.spec?.externalSubnets || [],
+    };
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      vpcs:       this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VPC }),
+      subnets:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SUBNET }),
+      vmNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.NETWORK_ATTACHMENT }),
+    });
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  computed: {
+    vpcOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vpcs = this.$store.getters[`${ inStore }/all`](HCI.VPC) || [];
+
+      return vpcs.map((vpc) => ({
+        label: vpc.id,
+        value: vpc.id,
+      }));
+    },
+
+    subnetOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const subnets = this.$store.getters[`${ inStore }/all`](HCI.SUBNET) || [];
+
+      return subnets.map((subnet) => ({
+        label: subnet.id,
+        value: subnet.id,
+      }));
+    },
+
+    vmNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vmNetworks = this.$store.getters[`${ inStore }/all`](HCI.NETWORK_ATTACHMENT) || [];
+
+      return vmNetworks.map((network) => ({
+        label: network.id,
+        value: network.id,
+      }));
+    },
+  },
+
+  methods: {
+    updateBeforeSave() {
+      if (!this.value.spec) {
+        this.value.spec = {};
+      }
+
+      if (!this.value.metadata) {
+        this.value.metadata = {};
+      }
+
+      if (!this.value.metadata.annotations) {
+        this.value.metadata.annotations = {};
+      }
+
+      this.value.spec.vpc = this.vpc;
+      this.value.spec.subnet = this.subnet;
+      this.value.spec.lanIp = this.lanIp;
+      this.value.spec.externalSubnets = (this.externalSubnets || []).filter((subnet) => !!subnet);
+
+      if (this.internalTenantNetwork) {
+        this.value.metadata.annotations[HCI_ANNOTATIONS.CNI_NETWORKS] = this.internalTenantNetwork;
+      } else {
+        delete this.value.metadata.annotations[HCI_ANNOTATIONS.CNI_NETWORKS];
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      ref="nd"
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('generic.basic')"
+        :weight="99"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="internalTenantNetwork"
+                class="mb-20"
+                required
+                :options="vmNetworkOptions"
+                :mode="mode"
+                :label="t('harvester.natGateway.internalTenantNetwork.label')"
+                :placeholder="t('harvester.natGateway.internalTenantNetwork.placeholder')"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="vpc"
+                class="mb-20"
+                :options="vpcOptions"
+                :mode="mode"
+                :label="t('harvester.natGateway.vpc.label')"
+                :placeholder="t('harvester.natGateway.vpc.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledSelect
+                v-model:value="subnet"
+                class="mb-20"
+                :options="subnetOptions"
+                :mode="mode"
+                :label="t('harvester.natGateway.subnet.label')"
+                :placeholder="t('harvester.natGateway.subnet.placeholder')"
+                required
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <LabeledInput
+                v-model:value="lanIp"
+                class="mb-20"
+                :mode="mode"
+                :label="t('harvester.natGateway.lanIp.label')"
+                :placeholder="t('harvester.natGateway.lanIp.placeholder')"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="externalSubnets"
+        :label="t('harvester.natGateway.externalSubnets.label')"
+        :weight="98"
+      >
+        <div class="mt-20">
+          <div class="row">
+            <div class="col span-12">
+              <ArrayListSelect
+                v-model:value="externalSubnets"
+                :mode="mode"
+                :disabled="mode === 'view'"
+                required
+                :options="subnetOptions"
+                :enable-default-add-value="false"
+                :array-list-props="{
+                  addLabel: t('harvester.natGateway.externalSubnets.addLabel'),
+                  title: t('harvester.natGateway.subnet.label'),
+                  initialEmptyRow: true,
+                  required: true,
+                  protip: false,
+                }"
+                :select-props="{
+                  placeholder: t('harvester.natGateway.externalSubnets.placeholder'),
+                  disabled: mode === 'view',
+                }"
+              />
+            </div>
+          </div>
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue

@@ -143,6 +143,7 @@ export default {
       <YamlEditor
         ref="yaml"
         v-model:value="yamlScript"
+        :mode="mode"
         class="yaml-editor"
         :editor-mode="editorMode"
       />

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

@@ -0,0 +1,310 @@
+<script>
+import { mapGetters } from 'vuex';
+import { Banner } from '@components/Banner';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { CONFIG_MAP, SECRET, SERVICE_ACCOUNT } from '@shell/config/types';
+import { _VIEW } from '@shell/config/query-params';
+import CopyToClipboard from '@shell/components/CopyToClipboard';
+import MessageLink from '@shell/components/MessageLink';
+import { FILESYSTEM_SOURCE_TYPE } from '@pkg/harvester/config/types';
+
+const MAX_FILESYSTEMS = 3;
+
+const { CONFIGMAP: FS_TYPE_CONFIGMAP, SECRET: FS_TYPE_SECRET, SERVICEACCOUNT: FS_TYPE_SERVICEACCOUNT } = FILESYSTEM_SOURCE_TYPE;
+
+const DEFAULT_VOLUME_NAMES = {
+  [FS_TYPE_CONFIGMAP]:      'appconfigfs',
+  [FS_TYPE_SECRET]:         'appsecretfs',
+  [FS_TYPE_SERVICEACCOUNT]: 'appserviceaccountfs',
+};
+
+const FS_TYPE_OPTIONS = [
+  { label: 'ConfigMap', value: FS_TYPE_CONFIGMAP },
+  { label: 'Secret', value: FS_TYPE_SECRET },
+  { label: 'ServiceAccount', value: FS_TYPE_SERVICEACCOUNT },
+];
+
+function emptyRow() {
+  return {
+    fsType:       FS_TYPE_CONFIGMAP,
+    volumeName:   DEFAULT_VOLUME_NAMES[FS_TYPE_CONFIGMAP],
+    resourceName: '',
+  };
+}
+
+export default {
+  name: 'VirtualMachineFilesystem',
+
+  emits: ['update:value'],
+
+  components: {
+    Banner,
+    LabeledSelect,
+    LabeledInput,
+    CopyToClipboard,
+    MessageLink,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+    namespace: {
+      type:    String,
+      default: '',
+    },
+    value: {
+      type:    Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return { rows: this.value.length > 0 ? this.value.map((r) => ({ ...r })) : [emptyRow()] };
+  },
+
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        const incoming = JSON.stringify(newVal);
+        const current = JSON.stringify(this.rows);
+
+        if (incoming !== current) {
+          this.rows = newVal.map((r) => ({ ...r }));
+        }
+      }
+    },
+
+    rows: {
+      deep: true,
+      handler(val) {
+        this.$emit('update:value', val.map((r) => ({ ...r })));
+      },
+    },
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    inStore() {
+      return this.$store.getters['currentProduct'].inStore;
+    },
+
+    configMaps() {
+      return this.$store.getters[`${ this.inStore }/all`](CONFIG_MAP)
+        .filter((cm) => !this.namespace || cm.metadata.namespace === this.namespace)
+        .map((cm) => ({ label: cm.metadata.name, value: cm.metadata.name }));
+    },
+
+    secrets() {
+      return this.$store.getters[`${ this.inStore }/all`](SECRET)
+        .filter((s) => !this.namespace || s.metadata.namespace === this.namespace)
+        .map((s) => ({ label: s.metadata.name, value: s.metadata.name }));
+    },
+
+    serviceAccounts() {
+      return this.$store.getters[`${ this.inStore }/all`](SERVICE_ACCOUNT)
+        .filter((sa) => !this.namespace || sa.metadata.namespace === this.namespace)
+        .map((sa) => ({ label: sa.metadata.name, value: sa.metadata.name }));
+    },
+
+    canAddRow() {
+      return this.rows.length < MAX_FILESYSTEMS;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    completedRows() {
+      return this.rows.filter((r) => r.fsType && r.volumeName && r.resourceName);
+    },
+
+    allMountCommands() {
+      return this.completedRows.map((r) => this.mountCommands(r)).join('\n');
+    },
+  },
+
+  methods: {
+    fsTypeOptions(currentIndex) {
+      const usedTypes = this.rows
+        .filter((_, i) => i !== currentIndex)
+        .map((r) => r.fsType);
+
+      return FS_TYPE_OPTIONS.filter((opt) => !usedTypes.includes(opt.value));
+    },
+
+    resourceOptions(fsType) {
+      if (fsType === FS_TYPE_CONFIGMAP) return this.configMaps;
+      if (fsType === FS_TYPE_SECRET) return this.secrets;
+      if (fsType === FS_TYPE_SERVICEACCOUNT) return this.serviceAccounts;
+
+      return [];
+    },
+
+    onFsTypeChange(row, newType) {
+      row.fsType = newType;
+      row.volumeName = DEFAULT_VOLUME_NAMES[newType] || '';
+      row.resourceName = '';
+    },
+
+    addRow() {
+      if (this.canAddRow) {
+        const usedTypes = this.rows.map((r) => r.fsType);
+        const nextType = FS_TYPE_OPTIONS.find((opt) => !usedTypes.includes(opt.value))?.value || FS_TYPE_CONFIGMAP;
+
+        this.rows.push({
+          fsType:       nextType,
+          volumeName:   DEFAULT_VOLUME_NAMES[nextType] || '',
+          resourceName: '',
+        });
+      }
+    },
+
+    removeRow(index) {
+      this.rows.splice(index, 1);
+    },
+
+    mountCommands(row) {
+      const vol = row.volumeName || '<volume-name>';
+
+      return `- mkdir -p /mnt/${ vol }\n- mount -t virtiofs ${ vol } /mnt/${ vol }`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="vm-filesystem">
+    <p class="mb-20">
+      {{ t('harvester.virtualMachine.filesystem.description') }}
+    </p>
+
+    <div
+      v-for="(row, index) in rows"
+      :key="index"
+      class="filesystem-row mb-15"
+    >
+      <div class="row">
+        <div class="col span-3">
+          <LabeledSelect
+            :value="row.fsType"
+            :label="t('harvester.virtualMachine.filesystem.type')"
+            :options="fsTypeOptions(index)"
+            :mode="mode"
+            required
+            @update:value="onFsTypeChange(row, $event)"
+          />
+        </div>
+
+        <div class="col span-3">
+          <LabeledInput
+            v-model:value="row.volumeName"
+            :label="t('harvester.virtualMachine.filesystem.volume')"
+            :mode="mode"
+            required
+          />
+        </div>
+
+        <div class="col span-5">
+          <LabeledSelect
+            v-model:value="row.resourceName"
+            :label="t('harvester.virtualMachine.filesystem.resource')"
+            :options="resourceOptions(row.fsType)"
+            :mode="mode"
+            required
+          />
+        </div>
+
+        <div
+          v-if="!isView"
+          class="col span-1 remove-col"
+        >
+          <button
+            type="button"
+            class="btn role-link remove-btn"
+            @click="removeRow(index)"
+          >
+            {{ t('generic.remove') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Banner
+      v-if="completedRows.length > 0 && mode === 'create'"
+      color="warning"
+      class="mt-10"
+    >
+      <div>
+        <MessageLink
+          :to="{ hash: '#advanced' }"
+          prefix-label="harvester.virtualMachine.filesystem.mountBannerHint"
+          middle-label="harvester.virtualMachine.filesystem.mountBannerHintLink"
+          suffix-label="harvester.virtualMachine.filesystem.mountBannerHintSuffix"
+        />
+        <div class="pre-wrapper mt-10">
+          <pre class="mt-5 mb-0">{{ allMountCommands }}</pre>
+          <CopyToClipboard
+            :text="allMountCommands"
+            :show-label="false"
+            class="icon-btn"
+            action-color="bg-transparent"
+          />
+        </div>
+      </div>
+    </Banner>
+
+    <button
+      v-if="!isView && canAddRow"
+      type="button"
+      class="btn role-tertiary add"
+      @click="addRow"
+    >
+      {{ t('harvester.virtualMachine.filesystem.add') }}
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vm-filesystem {
+  padding: 10px 0;
+}
+
+.filesystem-row {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 15px;
+}
+
+.remove-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remove-btn {
+  padding: 0;
+}
+
+.pre-wrapper {
+  position: relative;
+
+  pre {
+    padding-right: 36px;
+  }
+
+  .icon-btn {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    padding: 2px 4px;
+    line-height: 1;
+
+    &:active {
+      background-color: var(--success) !important;
+    }
+  }
+}
+</style>

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

@@ -52,31 +52,21 @@ export default {
     }
 
     const selectedDevices = [];
-    const oldFormatDevices = [];
 
     const vmDevices = this.value?.domain?.devices?.hostDevices || [];
-    const otherDevices = this.otherDevices(vmDevices).map(({ name }) => name);
     const vmDeviceNames = vmDevices.map(({ name }) => name);
 
     this.pciDevices.forEach((row) => {
       row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
     });
 
-    vmDevices.forEach(({ name, deviceName }) => {
+    vmDevices.forEach(({ name }) => {
-      const checkName = (deviceName || '').split('/')?.[1];
+      if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
-
-      if (checkName && name.includes(checkName) && !otherDevices.includes(name)) {
-        oldFormatDevices.push(name);
-      } else if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
         selectedDevices.push(name);
       }
     });
 
-    if (oldFormatDevices.length > 0) {
+    this.selectedDevices = selectedDevices;
-      this.oldFormatDevices = oldFormatDevices;
-    } else {
-      this.selectedDevices = selectedDevices;
-    }
   },
 
   data() {
@@ -87,7 +77,6 @@ export default {
       selectedDevices:  [],
       pciDeviceSchema:  this.$store.getters['harvester/schemaFor'](HCI.PCI_DEVICE),
       showMatrix:       false,
-      oldFormatDevices: [],
     };
   },
 
@@ -199,11 +188,6 @@ export default {
       });
     },
 
-    oldFormatDevicesHTML() {
-      return this.oldFormatDevices.map((device) => {
-        return `<li>${ device }</li>`;
-      }).join('');
-    },
   },
 
   methods: {
@@ -227,101 +211,89 @@ export default {
 
 <template>
   <div>
-    <div
+    <div class="row">
-      v-if="oldFormatDevices.length > 0"
-      class="row"
-    >
       <div class="col span-12">
-        <Banner color="warning">
+        <Banner color="info">
-          <p v-clean-html="t('harvester.pci.oldFormatDevices.help', {oldFormatDevicesHTML}, true)" />
+          <MessageLink
+            :to="toVGpuDevicesPage"
+            prefix-label="harvester.pci.howToUseDeviceInVMCreation.prefix"
+            middle-label="harvester.pci.howToUseDeviceInVMCreation.middle"
+            suffix-label="harvester.pci.howToUseDeviceInVMCreation.suffix"
+          />
+        </Banner>
+        <Banner
+          v-if="selectedDevices.length > 0"
+          color="info"
+        >
+          <t k="harvester.pci.deviceInTheSameHost" />
         </Banner>
       </div>
     </div>
-    <div v-else>
+    <template v-if="enabledDevices.length">
       <div class="row">
-        <div class="col span-12">
+        <div class="col span-6">
-          <Banner color="info">
+          <LabeledSelect
-            <MessageLink
+            v-model:value="selectedDevices"
-              :to="toVGpuDevicesPage"
+            label="Available PCI Devices"
-              prefix-label="harvester.pci.howToUseDeviceInVMCreation.prefix"
+            searchable
-              middle-label="harvester.pci.howToUseDeviceInVMCreation.middle"
+            multiple
-              suffix-label="harvester.pci.howToUseDeviceInVMCreation.suffix"
+            taggable
-            />
+            :options="deviceOpts"
-          </Banner>
+            :mode="mode"
-          <Banner
-            v-if="selectedDevices.length > 0"
-            color="info"
           >
-            <t k="harvester.pci.deviceInTheSameHost" />
+            <template #option="option">
-          </Banner>
+              <span>{{ option.value }} <span class="text-label">({{ option.displayLabel }})</span></span>
+            </template>
+          </LabeledSelect>
         </div>
       </div>
-      <template v-if="enabledDevices.length">
+      <div
-        <div class="row">
+        v-if="compatibleNodes.length && selectedDevices.length"
-          <div class="col span-6">
+        class="row"
-            <LabeledSelect
+      >
-              v-model:value="selectedDevices"
+        <div class="col span-12 text-muted">
-              label="Available PCI Devices"
+          Compatible hosts:
-              searchable
+          <!-- eslint-disable-next-line vue/no-parsing-error -->
-              multiple
+          <span
-              taggable
+            v-for="(node, idx) in compatibleNodes"
-              :options="deviceOpts"
+            :key="idx"
-              :mode="mode"
+          >{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
-            >
-              <template #option="option">
-                <span>{{ option.value }} <span class="text-label">({{ option.displayLabel }})</span></span>
-              </template>
-            </LabeledSelect>
-          </div>
         </div>
-        <div
+      </div>
-          v-if="compatibleNodes.length && selectedDevices.length"
+      <div
-          class="row"
+        v-else-if="selectedDevices.length"
-        >
+        class="text-error"
-          <div class="col span-12 text-muted">
+      >
-            Compatible hosts:
+        {{ t('harvester.pci.impossibleSelection') }}
-            <!-- eslint-disable-next-line vue/no-parsing-error -->
+      </div>
-            <span
+      <button
-              v-for="(node, idx) in compatibleNodes"
+        type="button"
-              :key="idx"
+        class="btn btn-sm role-link pl-0"
-            >{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+        @click="e=>{showMatrix = !showMatrix; e.target.blur()}"
-          </div>
+      >
-        </div>
+        {{ showMatrix ? t('harvester.pci.hideCompatibility') : t('harvester.pci.showCompatibility') }}
-        <div
+      </button>
-          v-else-if="selectedDevices.length"
+      <div
-          class="text-error"
+        v-if="showMatrix"
-        >
+        class="row mt-20"
-          {{ t('harvester.pci.impossibleSelection') }}
+      >
-        </div>
-        <button
-          type="button"
-          class="btn btn-sm role-link pl-0"
-          @click="e=>{showMatrix = !showMatrix; e.target.blur()}"
-        >
-          {{ showMatrix ? t('harvester.pci.hideCompatibility') : t('harvester.pci.showCompatibility') }}
-        </button>
-        <div
-          v-if="showMatrix"
-          class="row mt-20"
-        >
-          <div class="col span-12">
-            <CompatibilityMatrix
-              :enabled-devices="enabledDevices"
-              :devices-by-node="devicesByNode"
-              :devices-in-use="devicesInUse"
-            />
-          </div>
-        </div>
-      </template>
-      <div class="row mt-20">
         <div class="col span-12">
-          <DeviceList
+          <CompatibilityMatrix
-            :schema="pciDeviceSchema"
+            :enabled-devices="enabledDevices"
-            :devices="pciDevices"
+            :devices-by-node="devicesByNode"
-            @submit.prevent
+            :devices-in-use="devicesInUse"
           />
         </div>
       </div>
+    </template>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <DeviceList
+          :schema="pciDeviceSchema"
+          :devices="pciDevices"
+          @submit.prevent
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -21,9 +21,7 @@ import { saferDump } from '@shell/utils/create-yaml';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
-
 import CreateEditView from '@shell/mixins/create-edit-view';
-
 import { parseVolumeClaimTemplates } from '@pkg/utils/vm';
 import VM_MIXIN from '../../mixins/harvester-vm';
 import { HCI } from '../../types';
@@ -37,6 +35,7 @@ import Network from './VirtualMachineNetwork';
 import Volume from './VirtualMachineVolume';
 import SSHKey from './VirtualMachineSSHKey';
 import Reserved from './VirtualMachineReserved';
+import Filesystem from './VirtualMachineFilesystem';
 import { Banner } from '@components/Banner';
 import MessageLink from '@shell/components/MessageLink';
 
@@ -72,6 +71,7 @@ export default {
     Banner,
     MessageLink,
     UsbDevices,
+    Filesystem,
   },
 
   mixins: [CreateEditView, VM_MIXIN],
@@ -91,22 +91,36 @@ export default {
 
     const hostname = this.value.spec.template.spec.hostname || '';
 
+    const customizeDisplayName = !!(this.value.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME]);
+
     return {
       cloneVM,
-      count:             2,
+      count:                2,
-      templateId:        '',
+      templateId:           '',
-      templateVersionId: '',
+      templateVersionId:    '',
-      namePrefix:        '',
+      namePrefix:           '',
-      isSingle:          true,
+      isSingle:             true,
-      isOpen:            false,
+      isOpen:               false,
       hostname,
       isRestartImmediately,
+      customizeDisplayName,
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    // VM display name is stored as an annotation; bind a dedicated input to it
+    // so we don't have to mutate metadata.name (which would break the k8s PUT).
+    displayName: {
+      get() {
+        return this.value.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME] || '';
+      },
+      set(val) {
+        this.value.setAnnotation(HCI_ANNOTATIONS.VM_DISPLAY_NAME, val);
+      },
+    },
+
     to() {
       return {
         name:   'harvester-c-cluster-resource',
@@ -218,6 +232,9 @@ export default {
     usbPassthroughEnabled() {
       return this.$store.getters['harvester-common/getFeatureEnabled']('usbPassthrough');
     },
+    filesystemEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('supportFilesystem');
+    },
   },
 
   watch: {
@@ -289,6 +306,12 @@ export default {
         this.getInitConfig({ value: this.value, init: this.isCreate });
       }
     },
+
+    customizeDisplayName(neu) {
+      if (!neu) {
+        this.value.setAnnotation(HCI_ANNOTATIONS.VM_DISPLAY_NAME, '');
+      }
+    },
   },
 
   created() {
@@ -321,6 +344,7 @@ export default {
     const diskRows = this.getDiskRows(this.value);
 
     this['diskRows'] = diskRows;
+    this['filesystemRows'] = this.getFilesystemRows(this.value);
     const templateId = this.$route.query.templateId;
     const templateVersionId = this.$route.query.versionId;
 
@@ -610,6 +634,33 @@ export default {
       </template>
     </NameNsDescription>
 
+    <div v-if="isSingle">
+      <div class="row mb-20">
+        <div class="col span-12">
+          <Checkbox
+            v-model:value="customizeDisplayName"
+            class="check"
+            type="checkbox"
+            :label="t('harvester.virtualMachine.input.customizeDisplayName')"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div
+        v-if="customizeDisplayName"
+        class="row mb-20"
+      >
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="displayName"
+            :mode="mode"
+            :label="t('harvester.virtualMachine.input.displayName')"
+            :placeholder="t('harvester.virtualMachine.input.displayNamePlaceholder')"
+          />
+        </div>
+      </div>
+    </div>
+
     <Checkbox
       v-if="isCreate"
       v-model:value="useTemplate"
@@ -783,10 +834,23 @@ export default {
         />
       </Tab>
 
+      <Tab
+        v-if="filesystemEnabled"
+        name="filesystem"
+        :label="t('harvester.tab.filesystem')"
+        :weight="-9"
+      >
+        <Filesystem
+          v-model:value="filesystemRows"
+          :mode="isCreate ? mode : 'view'"
+          :namespace="value.metadata.namespace"
+        />
+      </Tab>
+
       <Tab
         name="labels"
         :label="t('generic.labels')"
-        :weight="-9"
+        :weight="-10"
       >
         <Banner color="info">
           <t k="harvester.virtualMachine.labels.banner" />
@@ -805,7 +869,7 @@ export default {
       <Tab
         name="instanceLabel"
         :label="t('harvester.tab.instanceLabel')"
-        :weight="-10"
+        :weight="-11"
       >
         <Banner color="info">
           <t k="harvester.virtualMachine.instanceLabels.banner" />
@@ -826,7 +890,7 @@ export default {
       <Tab
         name="annotations"
         :label="t('harvester.tab.annotations')"
-        :weight="-11"
+        :weight="-12"
       >
         <Banner color="info">
           <t k="harvester.virtualMachine.annotations.banner" />
@@ -847,7 +911,7 @@ export default {
       <Tab
         name="advanced"
         :label="t('harvester.tab.advanced')"
-        :weight="-12"
+        :weight="-13"
       >
         <div class="row mb-20">
           <div class="col span-6">

pkg/harvester/edit/network.harvesterhci.io.hostnetworkconfig.vue

@@ -0,0 +1,419 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+import InfoBox from '@shell/components/InfoBox';
+import MessageLink from '@shell/components/MessageLink';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
+import HarvesterNodeSelector from '../components/HarvesterNodeSelector';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { allHash } from '@shell/utils/promise';
+import { set } from '@shell/utils/object';
+import { NODE } from '@shell/config/types';
+import { HCI } from '../types';
+import { ADD_ONS } from '../config/harvester-map';
+
+const MODE_DHCP = 'dhcp';
+const MODE_STATIC = 'static';
+
+export default {
+  name: 'HarvesterHostNetworkConfigEditPage',
+
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ResourceTabs,
+    Tab,
+    InfoBox,
+    MessageLink,
+    LabeledSelect,
+    LabeledInput,
+    RadioGroup,
+    Checkbox,
+    HarvesterNodeSelector,
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await allHash({
+      clusterNetworks:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }),
+      nodes:               this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      hostNetworkConfigs:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.HOST_NETWORK_CONFIG }),
+      addons:              this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+    });
+  },
+
+  data() {
+    const networkMode = this.value?.spec?.mode || MODE_DHCP;
+    const ips = { ...(this.value?.spec?.ips || {}) };
+
+    if (!this.value.spec) {
+      set(this.value, 'spec', {});
+    }
+
+    return {
+      networkMode,
+      ips,
+      hasNodeSelector: !!this.value?.spec?.nodeSelector,
+    };
+  },
+
+  computed: {
+    modeOptions() {
+      return [
+        { label: 'DHCP', value: MODE_DHCP },
+        { label: 'Static', value: MODE_STATIC },
+      ];
+    },
+
+    clusterNetworkOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
+
+      return clusterNetworks.map((n) => {
+        const disabled = !n.isReady;
+
+        return {
+          label: disabled ? `${ n.id } (${ this.t('generic.notReady') })` : n.id,
+          value: n.id,
+          disabled,
+        };
+      });
+    },
+
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](NODE) || [];
+    },
+
+    isStaticMode() {
+      return this.networkMode === MODE_STATIC;
+    },
+
+    underlay: {
+      get() {
+        return !!this.value?.spec?.underlay;
+      },
+      set(val) {
+        set(this.value, 'spec.underlay', val);
+      },
+    },
+
+    vlanID: {
+      get() {
+        return this.value?.spec?.vlanID;
+      },
+      set(val) {
+        set(this.value, 'spec.vlanID', val);
+      },
+    },
+
+    clusterNetwork: {
+      get() {
+        return this.value?.spec?.clusterNetwork;
+      },
+      set(val) {
+        set(this.value, 'spec.clusterNetwork', val);
+      },
+    },
+
+    underlayConflict() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const all = this.$store.getters[`${ inStore }/all`](HCI.HOST_NETWORK_CONFIG) || [];
+      const currentId = this.value?.id;
+
+      return all.find((c) => c.id !== currentId && c.spec?.underlay === true) || null;
+    },
+
+    kubeovnEnabled() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS) || [];
+
+      return addons.find((a) => a.name === ADD_ONS.KUBEOVN_OPERATOR)?.spec?.enabled === true;
+    },
+
+    underlayDisabled() {
+      return !this.kubeovnEnabled || !!this.underlayConflict;
+    },
+
+    kubeovnAddonTo() {
+      return {
+        name:   'c-cluster-product-resource-namespace-id',
+        params: {
+          cluster:   this.$route.params.cluster,
+          product:   this.$store.getters['productId'],
+          resource:  HCI.ADD_ONS,
+          namespace: 'kube-system',
+          id:        ADD_ONS.KUBEOVN_OPERATOR,
+        },
+        query: { mode: 'edit' },
+        hash:  '#basic',
+      };
+    },
+  },
+
+  watch: {
+    networkMode(neu) {
+      set(this.value, 'spec.mode', neu);
+
+      if (neu !== MODE_STATIC) {
+        if (this.value?.spec?.ips !== undefined) {
+          delete this.value.spec.ips;
+        }
+        this.ips = {};
+      }
+    },
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  methods: {
+    updateBeforeSave() {
+      set(this.value, 'spec.mode', this.networkMode);
+
+      if (this.isStaticMode) {
+        set(this.value, 'spec.ips', { ...this.ips });
+      }
+    },
+
+    updateIp(nodeName, val) {
+      this.ips = { ...this.ips, [nodeName]: val };
+    },
+
+    addNodeSelector() {
+      set(this.value.spec, 'nodeSelector', {
+        matchExpressions: [{
+          key: '', operator: 'In', values: []
+        }]
+      });
+      this.hasNodeSelector = true;
+    },
+
+    removeNodeSelector() {
+      delete this.value.spec.nodeSelector;
+      this.hasNodeSelector = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :mode="mode"
+    :resource="value"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @cancel="done"
+    @error="e => errors = e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      description-key="spec.description"
+      @update:value="$emit('update:value', $event)"
+    />
+
+    <ResourceTabs
+      class="mt-15"
+      :need-conditions="false"
+      :need-related="false"
+      :need-events="false"
+      :side-tabs="true"
+      :mode="mode"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.hostNetworkConfig.tabs.mode')"
+        :weight="99"
+        class="bordered-table"
+      >
+        <div class="row mb-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="networkMode"
+              name="hostNetworkConfigMode"
+              :options="modeOptions"
+              :mode="mode"
+              :row="true"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="clusterNetwork"
+              :label="t('harvester.network.clusterNetwork.label')"
+              :options="clusterNetworkOptions"
+              :mode="mode"
+              required
+              :placeholder="t('harvester.network.clusterNetwork.selectPlaceholder')"
+            />
+          </div>
+        </div>
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value.number="vlanID"
+              type="number"
+              required
+              :min="2"
+              :max="4094"
+              placeholder="e.g. 2 ~ 4094"
+              :label="t('harvester.hostNetworkConfig.vlanID.label')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <Checkbox
+              v-model:value="underlay"
+              :label="t('harvester.hostNetworkConfig.underlay.label')"
+              :tooltip="t('harvester.hostNetworkConfig.underlay.tooltip')"
+              :mode="mode"
+              :disabled="underlayDisabled"
+            />
+            <span
+              v-if="!kubeovnEnabled"
+              class="underlay-conflict-warning"
+            >
+              <i class="icon icon-warning" />
+              <MessageLink
+                :to="kubeovnAddonTo"
+                prefix-label="harvester.hostNetworkConfig.underlay.noKubeovn.prefix"
+                middle-label="harvester.hostNetworkConfig.underlay.noKubeovn.middle"
+                suffix-label="harvester.hostNetworkConfig.underlay.noKubeovn.suffix"
+              />
+            </span>
+            <span
+              v-else-if="underlayConflict"
+              class="underlay-conflict-warning"
+            >
+              <i class="icon icon-warning" />
+              {{ t('harvester.hostNetworkConfig.underlay.conflict', { name: underlayConflict.nameDisplay || underlayConflict.id }) }}
+            </span>
+          </div>
+        </div>
+
+        <template v-if="isStaticMode">
+          <hr class="section-divider" />
+          <div
+            v-for="node in nodes"
+            :key="node.id"
+            class="row mb-10 ips-row"
+          >
+            <div class="col span-3">
+              <LabeledInput
+                :value="node.nameDisplay || node.id"
+                :label="t('harvester.hostNetworkConfig.ips.nodeLabel')"
+                mode="view"
+                :disabled="true"
+              />
+            </div>
+            <div class="col span-5">
+              <LabeledInput
+                :value="ips[node.id]"
+                :label="t('harvester.hostNetworkConfig.ips.label')"
+                :placeholder="t('harvester.hostNetworkConfig.ips.placeholder')"
+                :mode="mode"
+                required
+                @update:value="updateIp(node.id, $event)"
+              />
+            </div>
+          </div>
+        </template>
+      </Tab>
+      <Tab
+        name="nodeSelector"
+        :label="t('harvester.hostNetworkConfig.tabs.nodeSelector')"
+        :weight="98"
+      >
+        <template v-if="hasNodeSelector">
+          <InfoBox class="node-selector-box">
+            <button
+              v-if="!isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              :aria-label="t('generic.remove')"
+              @click="removeNodeSelector"
+            >
+              <i class="icon icon-x" />
+            </button>
+            <HarvesterNodeSelector
+              class="mt-20"
+              :value="value.spec.nodeSelector"
+              :mode="mode"
+            />
+          </InfoBox>
+        </template>
+        <template v-else>
+          <button
+            type="button"
+            class="btn role-secondary"
+            :disabled="isView"
+            @click="addNodeSelector"
+          >
+            {{ t('harvester.hostNetworkConfig.nodeSelector.addButton') }}
+          </button>
+        </template>
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+.section-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 10px 0 20px;
+}
+
+.node-selector-box {
+  position: relative;
+
+  .remove {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1;
+    padding: 0;
+  }
+}
+
+.underlay-conflict-warning {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  color: var(--warning);
+  font-size: 13px;
+}
+</style>

pkg/harvester/formatters/AttachVMWithName.vue

@@ -31,6 +31,10 @@ export default {
     to() {
       return this.vm?.detailLocation;
     },
+
+    attachVMName() {
+      return this.vm?.nameDisplay || this.vm?.metadata?.name || this.value;
+    }
   }
 };
 </script>
@@ -40,10 +44,10 @@ export default {
     v-if="to"
     :to="to"
   >
-    {{ value }}
+    {{ attachVMName }}
   </router-link>
 
   <span v-else>
-    {{ value }}
+    {{ attachVMName }}
   </span>
 </template>

pkg/harvester/formatters/HarvesterBoolean.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  name:  'HarvesterBooleanFormatter',
+  props: {
+    value: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <span v-if="value">
+    <i class="icon icon-checkmark" />
+  </span>
+  <span
+    v-else
+    class="text-muted"
+  >
+    &mdash;
+  </span>
+</template>

pkg/harvester/formatters/HarvesterHostNetworkConfigMode.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name:  'HarvesterHostNetworkConfigModeFormatter',
+  props: {
+    value: {
+      type:    String,
+      default: '',
+    },
+  },
+
+  computed: {
+    displayMode() {
+      if (this.value?.toLowerCase() === 'dhcp') {
+        return 'DHCP';
+      }
+
+      if (this.value?.toLowerCase() === 'static') {
+        return 'Static';
+      }
+
+      return this.value;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>{{ displayMode }}</span>
+</template>

pkg/harvester/formatters/HarvesterVlan.vue

@@ -0,0 +1,24 @@
+<script>
+
+export default {
+  name:  'HarvesterVlanFormatter',
+  props: {
+    value: {
+      type:    String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <span v-if="value">
+    {{ value }}
+  </span>
+  <span
+    v-else
+    class="text-muted"
+  >
+    &mdash;
+  </span>
+</template>

pkg/harvester/l10n/en-us.yaml

@@ -295,6 +295,12 @@ harvester:
     harvesterIpAddress:
       customIpTooltip: "Custom IP (set via annotation)"
   tableHeaders:
+    hostNetworkConfig:
+      underlay: Underlay
+      underlayTooltip: Allow this interface to act as the underlay for VM overlay networks.
+      vlanID: VLAN ID
+      mode: Mode
+      clusterNetwork: Cluster Network
     imageEncryption: Encryption
     size: Size
     virtualSize: Virtual Size
@@ -342,6 +348,9 @@ harvester:
     vmImportSourceOClusterStatus: Cluster Status
     vmImportSourceOVAUrl: URL
     vmImportSourceOVAStatus: Status
+    v4ip: V4 IP
+    v6ip: V6 IP
+    eipName: EIP Name
   tab:
     volume: Volumes
     network: Networks
@@ -355,6 +364,7 @@ harvester:
     snapshots: Snapshots
     instanceLabel: Instance Labels
     annotations: Annotations
+    filesystem: Filesystem Volume
   fields:
     version: Version
     name: Name
@@ -391,21 +401,6 @@ harvester:
       middle: vGPU Devices
       suffix: page.
     deviceInTheSameHost: 'You can only select devices on the same host.'
-    oldFormatDevices:
-      help: |-
-        <p>
-          The following PCI devices are using the old naming convention and need to be updated in the YAML file:
-        </p>
-        <ul>
-          {oldFormatDevicesHTML}
-        </ul>
-        <p>
-          Please use the following instructions to update the virtual machine:
-        </p>
-        <ol>
-          <li>Stop the virtual machine, edit the virtual machine YAML, and remove the <Code>hostDevices</Code> section, and save virtual machine the changes to the YAML file.</li>
-          <li>Edit the virtual machine, and add the already enabled PCI Device from the list of available PCIDevices, and save and start VM.</li>
-        </ol>
     showCompatibility: Show device compatibility matrix
     hideCompatibility: Hide device compatibility matrix
     claimError: Error enabling passthrough on {name}
@@ -423,6 +418,8 @@ harvester:
       suffix: to enable the add-on to successfully manage your PCI devices.
     noPCIPermission: Please contact your system administrator to enable the PCI devices first.
     enablePassthroughWarning: Please be careful not to use host-owned PCI devices (e.g., management and VLAN NICs). Incorrect device allocation may cause damage to your cluster, including node failure.
+    disableResourcePooling: Disable Resource Pooling
+    disableResourcePoolingDescription: Assigns this device a unique resource name so it can be pinned to a specific VM, instead of sharing the pool with other identical devices.
 
   devices:
     matrixHostName: Host Name
@@ -787,7 +784,7 @@ harvester:
       addPort:  Add Port
     cloudConfig:
       title: Cloud Configuration
-      createTemplateTitle: 'Create {name}.'
+      createTemplateTitle: 'Create {name}'
       createNew: Create new...
       cloudInit:
         label: Cloud Init
@@ -830,6 +827,18 @@ harvester:
       username: Username
       password: Password
       reservedMemory: Reserved Memory
+      customizeDisplayName: Customize virtual machine display name
+      displayNamePlaceholder: Virtual machine alias name
+      displayName: Display Name
+    filesystem:
+      description: Harvester supports filesystem volumes for VM via virtiofs.
+      type: Filesystem Type
+      volume: Volume
+      resource: Resource
+      add: Add
+      mountBannerHint: "Please update the mount path (e.g. /mnt/appconfigfs) to your preferred location, then add the corresponding commands to the"
+      mountBannerHintLink: "runcmd"
+      mountBannerHintSuffix: "in Advanced tab User Data."
     machineTypeTip: 'Specify a processor architecture to emulate. To see a list of supported architectures, run: qemu-system-x86_64 -cpu ?'
     detail:
       tabs:
@@ -1149,6 +1158,9 @@ harvester:
     gateway:
       label: Gateway IP
       placeholder: e.g. 172.20.0.1
+    vlan:
+      label: VLAN
+      placeholder: Select a VLAN
     dhcp:
       label: Dynamic Host Configuration Protocol (DHCP)
       v4Options: DHCPV4Options
@@ -1156,6 +1168,9 @@ harvester:
       placeholder: key1=value1, key2=value2
       dhcpOptionBanner: DHCP options is a key/value string concatenate with comma. For more detail, please refer to <a href="https://kubeovn.github.io/docs/v1.13.x/en/kubevirt/dhcp/" target="_blank">KubOVN document</a>
       tooltip: Enable DHCP server for this subnet. When enabled, VMs can automatically obtain IP addresses from this subnet.
+    externalConnectivity:
+      label: NAT Outgoing
+      tooltip: Enable NAT for VMs using this subnet to access external networks.
     private:
       label: Private Subnet
       tooltip: Enable network isolation for this Subnet. When enabled, VMs can only communicate within this subnet, even if other subnets exist under the same VPC.
@@ -1231,14 +1246,97 @@ harvester:
       remoteVpc:
         label: Remote VPC
       infoBanner: The static route destination CIDR must cover all subnets CIDR from remote VPC Peer. Read <a href="{url}" target="_blank">VPC Peering Configuration Examples</a> for more information.
+  natGateway:
+    label: Gateways
+    internalTenantNetwork:
+      label: Internal Tenant Network
+      placeholder: Select a Virtual Machine Network
+    vpc:
+      label: VPC
+      placeholder: Select a VPC
+    subnet:
+      label: Subnet
+      placeholder: Select a subnet
+    lanIp:
+      label: LAN IP
+      placeholder: Enter LAN IP
+    externalSubnets:
+      label: External Subnets
+      addLabel: Add
+      placeholder: Select a subnet
+  externalIP:
+    label: External IPs
+    natGateway:
+      label: VpcNatGateway
+      placeholder: Select a VpcNatGateway
+    externalSubnet:
+      label: External Subnet
+      placeholder: Select an external subnet
+    v4ip:
+      label: V4 IP
+      placeholder: public ip from external subnet
+  snat:
+    label: Source Rules
+    eip:
+      label: EIP
+      placeholder: Select an external IP
+    internalCIDR:
+      label: Internal CIDR
+      placeholder: internal subnet CIDR
+  dnat:
+    label: Destination Rules
+    eip:
+      label: EIP
+      placeholder: Select an external IP
+    externalPort:
+      label: External Port
+      placeholder: port number
+    internalIp:
+      label: Internal IP
+      placeholder: internal IP address
+    internalPort:
+      label: Internal Port
+      placeholder: port number
+    protocol:
+      label: Protocol
+      placeholder: Select protocol (tcp or udp)
+  providerNetwork:
+    label: Provider Networks
+    defaultInterface:
+      label: Default Interface
+      placeholder: Select the interface the same as master interface of external overlay network
+    customInterfaces:
+      label: Custom Interfaces
+      addLabel: Add Custom Interface
+      interface:
+        label: Network Interface
+        placeholder: e.g. eth2
+      nodes:
+        label: Nodes
+        addLabel: Add Node
+        placeholder: Select a node
+    excludedNodes:
+      label: Excluded Nodes
+      addLabel: Add Excluded Node
+      placeholder: Select node to exclude from this provider network
+  vlanNetwork:
+    label: VLANs
+  vlan:
+    id:
+      label: VLAN ID
+      placeholder: "e.g. 1-4094"
+    provider:
+      label: Provider Network
+      placeholder: Select a provider network
   networkPolicy:
-    label: Network Policies
+    label: Policies
     banner: The network policies must be used for VMs attached to overlay networks. Please read the <a href="{url}" target="_blank">harvester document</a> how the network policy works.
   network:
     label: Virtual Machine Networks
     tabs:
       basics: Basics
       layer3Network: Route
+      nic: Network Interface Card
     clusterNetwork:
       label: Cluster Network
       create: Create a new cluster network
@@ -1307,6 +1405,7 @@ harvester:
         invalid: '"Range" is invalid.'
       clusterNetwork: Cluster Network
       vlan: VLAN ID
+      exclusiveVlan: Exclusive VLAN
       exclude:
         label: Exclude IPs
         placeholder: CIDR format, e.g. 172.16.0.10/32
@@ -1531,6 +1630,7 @@ harvester:
     useDefault: Use the default storage
     volumeEncryption: Volume Encryption
     secret: Secret
+    volumeExpansionCheckbox: Enable Expansion
     migratable:
       label: Migratable
     numberOfReplicas:
@@ -1623,8 +1723,9 @@ harvester:
         schedulingRules: Select node(s) matching rules
     uplink:
       nics:
-        label: NICs
+        label: NIC
         addLabel: Add NIC
+        overlayWarning: The NIC selected here must match the NIC provided in the provider network.
         placeholder: Select a NIC that is available on all the selected nodes
         validate:
           available: NIC "{nic}" is not available on the selected nodes
@@ -1866,6 +1967,32 @@ harvester:
       addLabel: Add CIDR
     range:
       addLabel: Add Range
+  hostNetworkConfig:
+    label: Host Networks
+    mode:
+      label: Mode
+    tabs:
+      mode: Mode
+      nodeSelector: Node Selector
+    nodeSelector:
+      addButton: Add Node Selector
+    underlay:
+      label: Underlay
+      tooltip: Allow this interface to act as the underlay for VM overlay networks.
+      conflict: '`{name}` host network config already has underlay enabled. Only one underlay is allowed in the cluster.'
+      noKubeovn:
+        prefix: The kubeovn-operator add-on is not enabled. Click
+        middle: here
+        suffix: to enable the add-on for overlay networking.
+    vlanID:
+      label: VLAN ID
+    ipRange:
+      label: IP Range ({node})
+      placeholder: e.g. 192.168.1.10/24
+    ips:
+      nodeLabel: Node
+      label: IP
+      placeholder: 'e.g. 192.168.1.10/24'
 
   service:
     healthCheckPort:
@@ -1911,6 +2038,8 @@ harvester:
 
   migconfiguration:
     label: vGPU MIG Configurations
+    status:
+      outOfSync: Out of Sync
     infoBanner: To configure the MIG configuration, please disable it first and re-enable after editing the configuration.
     profileSpec: Profile Specs
     profileStatus: Profile Status
@@ -2051,6 +2180,8 @@ advancedSettings:
     'harv-auto-rotate-rke2-certs': The certificate rotation mechanism relies on Rancher. Harvester will automatically update certificates generation to trigger rotation.
     'harv-kubeconfig-default-token-ttl-minutes': 'TTL (in minutes) applied on Harvester administration kubeconfig files. Default is 0, which means to never expire.'
     'harv-longhorn-v2-data-engine-enabled': 'Enable the Longhorn V2 data engine. Default is false. <ul><li>Changing this setting will restart RKE2 on all nodes. This will not affect running VM workloads.</li><li>If you see "not enough hugepages-2Mi capacity" errors when enabling this setting, wait a minute for the error to clear. If the error remains, reboot the affected node.</li></ul>'
+    'harv-longhorn-v2-data-engine-hugepage-enabled': 'Enable hugepages when using the Longhorn V2 data engine. Default is true. Disabling hugepages reduces memory pressure on low-spec nodes and increases deployment flexibility. However, performance may be lower compared to running with hugepages.'
+    'harv-longhorn-v2-data-engine-memory-size': 'Configure the amount of memory allocated to the SPDK target daemon when using the Longhorn V2 data engine. Default is 2048 MiB.'
     'harv-additional-guest-memory-overhead-ratio': 'The ratio for kubevirt to adjust the VM overhead memory. The value could be zero, empty value or floating number between 1.0 and 10.0, default to 1.5.'
     'harv-upgrade-config': 'Configure image preloading and VM restore options for upgrades. See related fields in <a href="{url}" target="_blank" rel="noopener">settings/upgrade-config</a>'
     'harv-vm-migration-network': 'Segregated network for VM migration traffic.'
@@ -2121,6 +2252,36 @@ typeLabel:
       one { Virtual Private Cloud }
       other { Virtual Private Clouds }
     }
+  kubeovn.io.vlan: |-
+    {count, plural,
+      one { VLAN Network }
+      other { VLAN Networks }
+    }
+  kubeovn.io.providernetwork: |-
+    {count, plural,
+      one { Provider Network }
+      other { Provider Networks }
+    }
+  kubeovn.io.vpcnatgateway: |-
+    {count, plural,
+      one { NAT Gateway }
+      other { NAT Gateways }
+    }
+  kubeovn.io.iptablessnatrule: |-
+    {count, plural,
+      one { Source Rule }
+      other { Source Rules }
+    }
+  kubeovn.io.iptablesdnatrule: |-
+    {count, plural,
+      one { Destination Rule }
+      other { Destination Rules }
+    }
+  kubeovn.io.iptableseip: |-
+    {count, plural,
+      one { External IP }
+      other { External IPs }
+    }
   networking.k8s.io.networkpolicy: |-
     {count, plural,
       one { Network Policy }
@@ -2187,6 +2348,11 @@ typeLabel:
       one { Cluster Network }
       other { Cluster Networks }
     }
+  network.harvesterhci.io.hostnetworkconfig: |-
+    {count, plural,
+      one { Host Network }
+      other { Host Networks }
+    }
   harvesterhci.io.addon: |-
     {count, plural,
       one { Add-on }

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

@@ -166,6 +166,7 @@ export default {
       :schema="schema"
       :groupable="true"
       :rows="filterRows"
+      :ignore-filter="true"
       key-field="_key"
     >
       <template #cell:state="{row}">

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

@@ -106,8 +106,8 @@ export default {
           name:     'AttachedVM',
           labelKey: 'tableHeaders.attachedVM',
           type:     'attached',
-          value:    'spec.claimRef',
+          value:    'attachVMName',
-          sort:     'name',
+          sort:     'attachVMName',
         },
         {
           name:      'VolumeSnapshotCounts',
@@ -134,8 +134,8 @@ export default {
       return row?.attachVM?.detailLocation;
     },
 
-    getVMName(row) {
+    getAttachedVMName(row) {
-      return row.attachVM?.metadata?.name || '';
+      return row.attachVMName || '';
     },
 
     isInternalStorageClass(storageClassName) {
@@ -173,10 +173,10 @@ export default {
     <template #cell:AttachedVM="{row}">
       <div>
         <router-link
-          v-if="getVMName(row)"
+          v-if="getAttachedVMName(row)"
           :to="goTo(row)"
         >
-          {{ getVMName(row) }}
+          {{ getAttachedVMName(row) }}
         </router-link>
       </div>
     </template>

pkg/harvester/list/kubeovn.io.vpc.vue

@@ -67,6 +67,13 @@ export default {
         NAMESPACE,
         CIDR_BLOCK,
         PROTOCOL,
+        {
+          name:      'vlan',
+          labelKey:  'harvester.subnet.vlan.label',
+          value:     'spec.vlan',
+          sort:      'spec.vlan',
+          formatter: 'HarvesterVlan',
+        },
         PROVIDER,
         AGE
       ];

pkg/harvester/list/kubevirt.io.virtualmachine.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
 import {
@@ -22,6 +23,8 @@ export const VM_HEADERS = [
   {
     ...NAME,
     width: 350,
+    value: 'nameDisplay',
+    sort:  ['nameDisplay'],
   },
   NAMESPACE,
   {
@@ -114,6 +117,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters({ actionCb: 'action-menu/performCallbackData' }),
+
     headers() {
       const restoreCol = {
         name:      'restoreProgress',
@@ -180,6 +185,13 @@ export default {
   },
 
   watch: {
+    actionCb(neu) {
+      if (neu?.clearTableSelection) {
+        this.$refs.resourceTable.clearSelection();
+        this.$store.dispatch('action-menu/clearCallbackData');
+      }
+    },
+
     vmRestartRequiredNames(vmNames) {
       const count = vmNames.length;
 
@@ -218,6 +230,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <ResourceTable
+      ref="resourceTable"
       v-bind="$attrs"
       :headers="headers"
       default-sort-by="age"
@@ -244,7 +257,7 @@ export default {
             v-if="scope.row.type !== HCI.VMI"
             :to="scope.row.detailLocation"
           >
-            {{ scope.row.metadata.name }}
+            {{ scope.row.nameDisplay }}
             <i
               v-if="scope.row.encryptedVolumeType !== 'none'"
               v-tooltip="lockIconTooltipMessage(scope.row)"
@@ -253,7 +266,7 @@ export default {
             />
           </router-link>
           <span v-else>
-            {{ scope.row.metadata.name }}
+            {{ scope.row.nameDisplay }}
           </span>
           <ConsoleBar
             :resource-type="scope.row"

pkg/harvester/list/network.harvesterhci.io.hostnetworkconfig.vue

@@ -0,0 +1,86 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { STATE, NAME as NAME_COL, AGE } from '@shell/config/table-headers';
+import { HCI } from '../types';
+
+const UNDERLAY = {
+  name:      'underlay',
+  labelKey:  'harvester.tableHeaders.hostNetworkConfig.underlay',
+  tooltip:   'harvester.tableHeaders.hostNetworkConfig.underlayTooltip',
+  value:     'spec.underlay',
+  sort:      'spec.underlay',
+  formatter: 'HarvesterBoolean',
+};
+
+const VLAN_ID = {
+  name:     'vlanID',
+  labelKey: 'harvester.tableHeaders.hostNetworkConfig.vlanID',
+  value:    'spec.vlanID',
+  sort:     'spec.vlanID',
+};
+
+const MODE = {
+  name:      'mode',
+  labelKey:  'harvester.tableHeaders.hostNetworkConfig.mode',
+  value:     'spec.mode',
+  sort:      'spec.mode',
+  formatter: 'HarvesterHostNetworkConfigMode',
+};
+
+const CLUSTER_NETWORK = {
+  name:     'clusterNetwork',
+  labelKey: 'harvester.tableHeaders.hostNetworkConfig.clusterNetwork',
+  value:    'spec.clusterNetwork',
+  sort:     'spec.clusterNetwork',
+  align:    'center',
+};
+
+export default {
+  name:       'HarvesterListHostNetworkConfig',
+  components: { ResourceTable, Loading },
+
+  inheritAttrs: false,
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.HOST_NETWORK_CONFIG });
+  },
+
+  data() {
+    return { rows: [] };
+  },
+
+  computed: {
+    schema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/schemaFor`](HCI.HOST_NETWORK_CONFIG);
+    },
+    headers() {
+      return [
+        STATE,
+        NAME_COL,
+        UNDERLAY,
+        VLAN_ID,
+        MODE,
+        CLUSTER_NETWORK,
+        AGE,
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
+    v-else
+    v-bind="$attrs"
+    :headers="headers"
+    :rows="rows"
+    :schema="schema"
+    key-field="_key"
+  />
+</template>

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

@@ -12,7 +12,7 @@ import { base64Decode } from '@shell/utils/crypto';
 import { formatSi, parseSi } from '@shell/utils/units';
 import { _CLONE, _CREATE, _VIEW } from '@shell/config/query-params';
 import {
-  PV, PVC, STORAGE_CLASS, NODE, SECRET, CONFIG_MAP, NETWORK_ATTACHMENT, NAMESPACE, LONGHORN
+  PV, PVC, STORAGE_CLASS, NODE, SECRET, CONFIG_MAP, SERVICE_ACCOUNT, NETWORK_ATTACHMENT, NAMESPACE, LONGHORN
 } from '@shell/config/types';
 import { HOSTNAME } from '@shell/config/labels-annotations';
 import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
@@ -25,7 +25,7 @@ import { HCI } from '../../types';
 import { parseVolumeClaimTemplates, EMPTY_IMAGE } from '../../utils/vm';
 import impl, { QGA_JSON, USB_TABLET } from './impl';
 import { GIBIBYTE } from '../../utils/unit';
-import { VOLUME_MODE } from '@pkg/harvester/config/types';
+import { VOLUME_MODE, FILESYSTEM_SOURCE_TYPE } from '@pkg/harvester/config/types';
 
 const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
 
@@ -102,6 +102,8 @@ export default {
       vmims:             this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMIM }),
       vms:               this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VM }),
       secrets:           this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET }),
+      configMaps:        this.$store.dispatch(`${ inStore }/findAll`, { type: CONFIG_MAP }),
+      serviceAccounts:   this.$store.dispatch(`${ inStore }/findAll`, { type: SERVICE_ACCOUNT }),
       addons:            this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
       longhornV2Engine:  this.$store.dispatch(`${ inStore }/find`, { type: LONGHORN.SETTINGS, id: LONGHORN_V2_DATA_ENGINE }),
     };
@@ -156,6 +158,7 @@ export default {
       imageId:                       '',
       diskRows:                      [],
       networkRows:                   [],
+      filesystemRows:                [],
       machineType:                   '',
       machineTypes:                  [],
       secretName:                    '',
@@ -440,6 +443,7 @@ export default {
       this['imageId'] = imageId;
 
       this['diskRows'] = diskRows;
+      this['filesystemRows'] = this.getFilesystemRows(vm);
 
       this.refreshYamlEditor();
     },
@@ -641,6 +645,80 @@ export default {
       this.parseAccessCredentials();
       this.parseNetworkRows(this.networkRows);
       this.parseDiskRows(this.diskRows);
+      this.parseFilesystemRows();
+    },
+
+    getFilesystemRows(vm) {
+      const _filesystems = vm.spec.template.spec.domain.devices?.filesystems || [];
+      const _volumes = vm.spec.template.spec.volumes || [];
+
+      return _filesystems.map((fs) => {
+        const volume = _volumes.find((v) => v.name === fs.name);
+        let fsType = FILESYSTEM_SOURCE_TYPE.CONFIGMAP;
+        let resourceName = '';
+
+        if (volume?.configMap) {
+          fsType = FILESYSTEM_SOURCE_TYPE.CONFIGMAP;
+          resourceName = volume.configMap.name;
+        } else if (volume?.secret) {
+          fsType = FILESYSTEM_SOURCE_TYPE.SECRET;
+          resourceName = volume.secret.secretName;
+        } else if (volume?.serviceAccount) {
+          fsType = FILESYSTEM_SOURCE_TYPE.SERVICEACCOUNT;
+          resourceName = volume.serviceAccount.serviceAccountName;
+        }
+
+        return {
+          fsType,
+          volumeName: fs.name,
+          resourceName,
+        };
+      });
+    },
+
+    parseFilesystemRows() {
+      const completedRows = this.filesystemRows.filter(
+        (r) => r.fsType && r.volumeName && r.resourceName
+      );
+
+      const filesystems = completedRows.map((r) => ({
+        name:     r.volumeName,
+        virtiofs: {},
+      }));
+
+      const fsVolumes = completedRows.map((r) => {
+        if (r.fsType === FILESYSTEM_SOURCE_TYPE.CONFIGMAP) {
+          return {
+            name:      r.volumeName,
+            configMap: { name: r.resourceName },
+          };
+        } else if (r.fsType === FILESYSTEM_SOURCE_TYPE.SECRET) {
+          return {
+            name:   r.volumeName,
+            secret: { secretName: r.resourceName },
+          };
+        } else if (r.fsType === FILESYSTEM_SOURCE_TYPE.SERVICEACCOUNT) {
+          return {
+            name:           r.volumeName,
+            serviceAccount: { serviceAccountName: r.resourceName },
+          };
+        }
+
+        return null;
+      }).filter(Boolean);
+
+      if (filesystems.length > 0) {
+        this.spec.template.spec.domain.devices['filesystems'] = filesystems;
+      } else {
+        delete this.spec.template.spec.domain.devices['filesystems'];
+      }
+
+      if (fsVolumes.length > 0) {
+        if (!this.spec.template.spec.volumes) {
+          this.spec.template.spec['volumes'] = [];
+        }
+        this.spec.template.spec.volumes.push(...fsVolumes);
+      }
     },
 
     parseOther() {
@@ -907,14 +985,22 @@ export default {
       const specInterfaces = this.spec?.template?.spec?.domain?.devices?.interfaces;
       const mergedInterfaces = this.mergeInterfaceList(specInterfaces, interfaces);
 
+      const devices = {
+        ...this.spec.template.spec.domain.devices,
+        interfaces: mergedInterfaces,
+      };
+
+      if (this.isEdit && networkRow.length === 0) {
+        devices.autoattachPodInterface = false;
+      } else {
+        delete devices.autoattachPodInterface;
+      }
+
       const spec = {
         ...this.spec.template.spec,
         domain: {
           ...this.spec.template.spec.domain,
-          devices: {
+          devices,
-            ...this.spec.template.spec.domain.devices,
-            interfaces: mergedInterfaces,
-          },
         },
         networks
       };
@@ -1656,7 +1742,7 @@ export default {
 
           const oldImageId = old[0]?.image;
 
-          if (this.isCreate && oldImageId === imageId && imageId) {
+          if (this.isCreate && oldImageId !== imageId && imageId && osType) {
             this.osType = osType;
           }
         }

pkg/harvester/models/devices.harvesterhci.io.migconfiguration.js

@@ -63,13 +63,27 @@ export default class MIGCONFIGURATION extends HarvesterResource {
   }
 
   get stateDisplay() {
+    if (this.configStatus === 'out-of-sync') {
+      return this.t('harvester.migconfiguration.status.outOfSync');
+    }
+
     return this.actualState;
   }
 
-  get stateColor() {
+  get stateDescription() {
-    const state = this.actualState;
+    if (this.status?.message) {
+      return this.status.message;
+    }
 
-    return colorForState(state);
+    return super.stateDescription;
+  }
+
+  get stateColor() {
+    if (this.configStatus === 'out-of-sync') {
+      return 'text-warning';
+    }
+
+    return colorForState(this.actualState);
   }
 
   get isEnabled() {

pkg/harvester/models/harvester/persistentvolumeclaim.js

@@ -235,6 +235,10 @@ export default class HciPv extends HarvesterResource {
     return allVMs.find(findAttachVM);
   }
 
+  get attachVMName() {
+    return this.attachVM?.nameDisplay || this.attachVM?.metadata?.name || '';
+  }
+
   get isAvailable() {
     const unAvailable = ['Resizing', 'Not Ready'];
 

pkg/harvester/models/harvester/storage.k8s.io.storageclass.js

@@ -96,6 +96,10 @@ export default class HciStorageClass extends StorageClass {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('volumeEncryption');
   }
 
+  get expandOnlineEncryptedVolumeFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('expandOnlineEncryptedVolume');
+  }
+
   get thirdPartyStorageFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
   }

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

@@ -123,7 +123,12 @@ const IgnoreMessages = ['pod has unbound immediate PersistentVolumeClaims'];
 
 export default class VirtVm extends HarvesterResource {
   get availableActions() {
-    const out = super._availableActions;
+    let out = super._availableActions;
+
+    if (this.isCloneBackendStorageCloning || this.isCloneBackendStorageFailed) {
+      out = out.filter(({ action }) => action !== 'goToClone');
+    }
+
     const clone = out.find((action) => action.action === 'goToClone');
 
     if (clone) {
@@ -179,11 +184,12 @@ export default class VirtVm extends HarvesterResource {
         label:      this.t('harvester.action.softreboot')
       },
       {
-        action:   'startVM',
+        action:     'startVM',
-        enabled:  !!this.actions?.start,
+        enabled:    !!this.actions?.start,
-        icon:     'icon icon-play',
+        icon:       'icon icon-play',
-        label:    this.t('harvester.action.start'),
+        label:      this.t('harvester.action.start'),
-        bulkable: true
+        bulkable:   true,
+        bulkAction: 'startVM'
       },
       {
         action:  'backupVM',
@@ -373,10 +379,6 @@ export default class VirtVm extends HarvesterResource {
     this.metadata.annotations[HCI_ANNOTATIONS.VOLUME_CLAIM_TEMPLATE] = JSON.stringify(deleteDataSource);
   }
 
-  altRestartVM() {
-    this.doActionGrowl('restart', {});
-  }
-
   restartVM(resources = this) {
     this.$dispatch('promptModal', {
       resources,
@@ -548,16 +550,38 @@ export default class VirtVm extends HarvesterResource {
     });
   }
 
-  altStopVM() {
+  async altRestartVM() {
-    this.doActionGrowl('stop', {});
+    await this.doActionGrowl('restart', {});
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
   }
 
-  forceStop() {
+  async altStopVM() {
-    this.doActionGrowl('forceStop', {});
+    await this.doActionGrowl('stop', {});
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
   }
 
-  startVM() {
+  async forceStop() {
-    this.doActionGrowl('start', {});
+    await this.doActionGrowl('forceStop', {});
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
+  }
+
+  async startVM(resources = this) {
+    const list = Array.isArray(resources) ? resources : [resources];
+
+    for (const r of list) {
+      await r.doActionGrowl('start', {});
+    }
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
+  }
+
+  async download() {
+    await super.download();
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
+  }
+
+  async downloadBulk(items) {
+    await super.downloadBulk(items);
+    this.$dispatch('promptModal', { performCallback: true, clearTableSelection: true });
   }
 
   migrateVM(resources = this) {
@@ -770,6 +794,18 @@ export default class VirtVm extends HarvesterResource {
     return this.volumes.filter((volume) => volume?.isLonghornV2);
   }
 
+  get cloneBackendStorageStatus() {
+    return this.metadata?.annotations?.[HCI_ANNOTATIONS.CLONE_BACKEND_STORAGE_STATUS]?.toLowerCase() || '';
+  }
+
+  get isCloneBackendStorageCloning() {
+    return this.cloneBackendStorageStatus === 'cloning';
+  }
+
+  get isCloneBackendStorageFailed() {
+    return this.cloneBackendStorageStatus === 'failed';
+  }
+
   get encryptedVolumeType() {
     if (!this.volumes || this.volumes.length === 0) {
       return 'none';
@@ -825,13 +861,21 @@ export default class VirtVm extends HarvesterResource {
       !this.isVMExpectedRunning &&
       this.isVMCreated &&
       this.vmi?.status?.phase === VMIPhase.Pending
-    ) || (this.metadata?.annotations?.[HCI_ANNOTATIONS.CLONE_BACKEND_STORAGE_STATUS] === 'cloning')) {
+    ) || this.isCloneBackendStorageCloning) {
       return { status: VMIPhase.Pending };
     }
 
     return null;
   }
 
+  get isCloneFailed() {
+    if (this.isCloneBackendStorageFailed) {
+      return { status: VMIPhase.Failed };
+    }
+
+    return null;
+  }
+
   get isStopping() {
     if (this &&
       !this.isVMExpectedRunning &&
@@ -988,6 +1032,7 @@ export default class VirtVm extends HarvesterResource {
       this.isUnschedulable?.status ||
       this.isPaused?.status ||
       this.isVMError?.status ||
+      this.isCloneFailed?.status ||
       this.isPending?.status ||
       this.isStopping?.status ||
       this.isOff?.status ||
@@ -995,7 +1040,7 @@ export default class VirtVm extends HarvesterResource {
       this.isRunning?.status ||
       this.isNotReady?.status ||
       this.isStarting?.status ||
-      this.isWaitingForVMI?.state ||
+      this.isWaitingForVMI?.status ||
       this.otherState?.status;
 
     return state;
@@ -1274,6 +1319,10 @@ export default class VirtVm extends HarvesterResource {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('schedulingVMBackup');
   }
 
+  get nameDisplay() {
+    return this.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME] || this.metadata?.name || this.id;
+  }
+
   get volumeEncryptionFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('volumeEncryption');
   }

pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue

@@ -123,6 +123,7 @@ export default {
           this.value?.[0]?.currentRouter().push(goTo);
         }
         this.close();
+        this.$store.commit('action-menu/togglePromptModal', { performCallback: true, clearTableSelection: true });
       }).catch((err) => {
         this.$emit('errors', err);
       });

pkg/harvester/store/harvester-store/actions.ts

@@ -3,7 +3,8 @@ import { ClusterNotFoundError } from '@shell/utils/error';
 import { SETTING } from '@shell/config/settings';
 import { COUNT, NAMESPACE, MANAGEMENT } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-import { DEV } from '@shell/store/prefs';
+import { DEV, NAMESPACE_FILTERS } from '@shell/store/prefs';
+import { createNamespaceFilterKeyWithId } from '@shell/utils/namespace-filter';
 import { HCI } from '../../types';
 
 export default {
@@ -121,8 +122,11 @@ export default {
 
     await dispatch('cleanNamespaces', null, { root: true });
 
+    const namespaceFilterKey = createNamespaceFilterKeyWithId(id, 'harvester');
+    const savedFilters = rootGetters['prefs/get'](NAMESPACE_FILTERS)?.[namespaceFilterKey];
+
     commit('updateNamespaces', {
-      filters: [],
+      filters: savedFilters || [],
       all:     getters.filterNamespace(),
       getters
     }, { root: true });

pkg/harvester/types.ts

@@ -1,3 +1,9 @@
+// To find the CRD name, you can run `kubectl api-resources` and look for the `NAME` column.
+// The CRD name is usually in the format of `<plural>.<group>`, where `<plural>` is the plural form of the resource and `<group>` is the API group it belongs to.
+// e.g
+// 1. `virtualmachines.kubevirt.io` -> kubevirt.io.virtualmachine, the CRD name for the `VirtualMachine` resource in the `kubevirt.io` API group
+// 2. `vpc-nat-gateways.kubeovn.io` -> kubeovn.io.vpcnatgateway, the CRD name for the `VpcNatGateway` resource in the `kubeovn.io` API group.
+
 export const HCI = {
   VM:                  'kubevirt.io.virtualmachine',
   VMI:                 'kubevirt.io.virtualmachineinstance',
@@ -16,9 +22,16 @@ export const HCI = {
   RESTORE:             'harvesterhci.io.virtualmachinerestore',
   NODE_NETWORK:        'network.harvesterhci.io.nodenetwork',
   CLUSTER_NETWORK:     'network.harvesterhci.io.clusternetwork',
+  HOST_NETWORK_CONFIG: 'network.harvesterhci.io.hostnetworkconfig',
   SUBNET:              'kubeovn.io.subnet',
   VPC:                 'kubeovn.io.vpc',
   IP:                  'kubeovn.io.ip',
+  VLAN:                'kubeovn.io.vlan',
+  IPTABLES_EIP:        'kubeovn.io.iptableseip',
+  IPTABLES_SNAT_RULE:  'kubeovn.io.iptablessnatrule',
+  IPTABLES_DNAT_RULE:  'kubeovn.io.iptablesdnatrule',
+  PROVIDER_NETWORK:    'kubeovn.io.providernetwork',
+  VPC_NAT_GATEWAY:     'kubeovn.io.vpcnatgateway',
   VM_IMAGE_DOWNLOADER: 'harvesterhci.io.virtualmachineimagedownloader',
   SUPPORT_BUNDLE:      'harvesterhci.io.supportbundle',
   NETWORK_ATTACHMENT:  'harvesterhci.io.networkattachmentdefinition',
@@ -62,6 +75,7 @@ export const HCI = {
   VMIMPORT_SOURCE_OVA: 'migration.harvesterhci.io.ovasource',
   VMIMPORT:            'migration.harvesterhci.io.virtualmachineimport',
   MIGRATION:           'migration.harvesterhci.io',
+
 };
 
 export const VOLUME_SNAPSHOT = 'snapshot.storage.k8s.io.volumesnapshot';