Lint fixes

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/components/DiskTags.vue

@@ -102,7 +102,7 @@ export default {
     },
 
     onRemoveTag(tag) {
-      this.tags = this.tags.filter(v => v !== tag);
+      this.tags = this.tags.filter((v) => v !== tag);
       this.$emit('update:value', this.tags);
     },
   }
@@ -124,7 +124,9 @@ export default {
     </div>
     <div class="mt-10">
       <Tag
-         v-for="(tag, i) in value" :key="i" class="tag"
+        v-for="(tag, i) in value"
+        :key="i"
+        class="tag"
       >
         <span>
           {{ tag }}

pkg/harvester/components/FilterBySriov.vue

@@ -70,8 +70,14 @@ export default {
 
 <template>
   <div class="filter">
-    <span v-if="parentSriov" class="banner-item bg-warning">
+    <span
-      {{ parentSriov }} <i class="icon icon-close" @click="remove()" />
+      v-if="parentSriov"
+      class="banner-item bg-warning"
+    >
+      {{ parentSriov }} <i
+        class="icon icon-close"
+        @click="remove()"
+      />
     </span>
 
     <v-dropdown
@@ -79,7 +85,10 @@ export default {
       placement="bottom-end"
     >
       <slot name="header">
-        <button ref="actionDropDown" class="btn bg-primary mr-10">
+        <button
+          ref="actionDropDown"
+          class="btn bg-primary mr-10"
+        >
           <slot name="title">
             {{ label }}
           </slot>

pkg/harvester/components/FilterLabel.vue

@@ -46,7 +46,7 @@ export default {
       const valueOptions = [];
 
       this.rows.map((row) => {
-        const isExistValue = valueOptions.find(value => value.label === row.labels[key]);
+        const isExistValue = valueOptions.find((value) => value.label === row.labels[key]);
 
         if (Object.keys(row.labels).includes(key) && key && row.labels[key] && !isExistValue) {
           valueOptions.push({
@@ -77,7 +77,7 @@ export default {
 
     filterRows() {
       const rows = this.rows.filter((row) => {
-        const hasSearch = this.searchLabels.find(search => search.key);
+        const hasSearch = this.searchLabels.find((search) => search.key);
 
         if (!hasSearch) {
           return this.rows;
@@ -119,20 +119,33 @@ export default {
 
 <template>
   <div class="filter">
-    <template v-for="(label, index) in searchLabels" :key="index">
+    <template
-      <span v-if="label.key" :key="`${label.key}${index}`" class="banner-item bg-warning">
+      v-for="(label, index) in searchLabels"
-        {{ label.key }}{{ label.value ? "=" : '' }}{{ label.value }}<i class="icon icon-close" @click="remove(label)" />
+      :key="index"
+    >
+      <span
+        v-if="label.key"
+        :key="`${label.key}${index}`"
+        class="banner-item bg-warning"
+      >
+        {{ label.key }}{{ label.value ? "=" : '' }}{{ label.value }}<i
+          class="icon icon-close"
+          @click="remove(label)"
+        />
       </span>
     </template>
 
     <v-dropdown
-      popperClass="filter-label"
+      popper-class="filter-label"
       trigger="click"
       placement="bottom-end"
       :distance="20"
     >
       <slot name="header">
-        <button ref="actionDropDown" class="btn bg-primary mr-10">
+        <button
+          ref="actionDropDown"
+          class="btn bg-primary mr-10"
+        >
           <slot name="title">
             {{ t('harvester.fields.filterLabels') }}
           </slot>
@@ -184,7 +197,11 @@ export default {
                     :options="calcValueOptions(scope.row.value.key)"
                     @update:value="filterRows"
                   />
-                  <LabeledInput v-else v-model:value="scope.row.value.value" @update:value="filterRows" />
+                  <LabeledInput
+                    v-else
+                    v-model:value="scope.row.value.value"
+                    @update:value="filterRows"
+                  />
                 </div>
               </template>
 

pkg/harvester/components/FilterVMSchedule.vue

@@ -16,14 +16,12 @@ export default {
   },
 
   data() {
-    return {
+    return { selected: '' };
-      selected: '',
-    };
   },
 
   computed: {
     scheduleOptions() {
-      const options = this.rows.map(r => r.sourceSchedule).filter(r => r);
+      const options = this.rows.map((r) => r.sourceSchedule).filter((r) => r);
 
       return Array.from(new Set(options));
     },
@@ -46,7 +44,7 @@ export default {
 
         return;
       }
-      const filteredRows = this.rows.filter(row => row.sourceSchedule === this.selected);
+      const filteredRows = this.rows.filter((row) => row.sourceSchedule === this.selected);
 
       this.$emit('change-rows', filteredRows, this.selected);
     }
@@ -67,8 +65,14 @@ export default {
 <template>
   <div class="vm-schedule-filter">
     <template>
-      <span v-if="selected" class="banner-item bg-warning">
+      <span
-        {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}<i class="icon icon-close ml-5" @click="remove" />
+        v-if="selected"
+        class="banner-item bg-warning"
+      >
+        {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}<i
+          class="icon icon-close ml-5"
+          @click="remove"
+        />
       </span>
     </template>
 
@@ -77,7 +81,10 @@ export default {
       placement="bottom-end"
       offset="1"
     >
-      <button ref="actionDropDown" class="btn bg-primary mr-10">
+      <button
+        ref="actionDropDown"
+        class="btn bg-primary mr-10"
+      >
         <slot name="title">
           {{ t('harvester.fields.filterSchedule') }}
         </slot>

pkg/harvester/components/HarvesterUpgrade.vue

@@ -43,7 +43,7 @@ export default {
     ...mapGetters(['currentCluster']),
 
     latestUpgrade() {
-      return this.upgrade?.find(u => u.isLatestUpgrade);
+      return this.upgrade?.find((u) => u.isLatestUpgrade);
     },
 
     isUpgradeInProgress() {
@@ -55,7 +55,7 @@ export default {
     versionOptions() {
       const versions = this.$store.getters['harvester/all'](HCI.VERSION);
 
-      return versions.map(V => V.metadata.name);
+      return versions.map((V) => V.metadata.name);
     },
 
     currentVersion() {
@@ -79,7 +79,7 @@ export default {
         let upgradeMessage = [];
         const list = neu || [];
 
-        const currentResource = list.find( O => !!O.isLatestUpgrade);
+        const currentResource = list.find( (O) => !!O.isLatestUpgrade);
 
         upgradeMessage = currentResource ? currentResource.upgradeMessage : [];
 

pkg/harvester/components/HarvesterUpgradeHeader.vue

@@ -52,13 +52,13 @@ export default {
     },
 
     latestResource() {
-      return this.$store.getters['harvester/all'](HCI.UPGRADE).find( U => U.isLatestUpgrade);
+      return this.$store.getters['harvester/all'](HCI.UPGRADE).find( (U) => U.isLatestUpgrade);
     },
 
     latestUpgradeLogResource() {
       const upgradeLogId = `${ this.latestResource.id }-upgradelog`;
 
-      return this.$store.getters['harvester/all'](HCI.UPGRADE_LOG).find( U => U.id === upgradeLogId);
+      return this.$store.getters['harvester/all'](HCI.UPGRADE_LOG).find( (U) => U.id === upgradeLogId);
     },
 
     downloadLogFailReason() {
@@ -82,7 +82,7 @@ export default {
     upgradeImage() {
       const id = this.latestResource?.upgradeImage;
 
-      return this.$store.getters['harvester/all'](HCI.IMAGE).find(I => I.id === id);
+      return this.$store.getters['harvester/all'](HCI.IMAGE).find((I) => I.id === id);
     },
 
     imageProgress() {
@@ -182,7 +182,10 @@ export default {
 };
 </script>
 <template>
-  <div v-if="enabled && isShow" class="upgrade">
+  <div
+    v-if="enabled && isShow"
+    class="upgrade"
+  >
     <v-dropdown
       v-clean-tooltip="{
         placement: 'bottom-left',
@@ -195,21 +198,36 @@ export default {
 
       <template #popper>
         <div class="upgrade-info mb-10">
-          <div v-if="repoInfo" class="repoInfo">
+          <div
+            v-if="repoInfo"
+            class="repoInfo"
+          >
             <div class="row">
               <div class="col span-12">
-                <a :href="releaseLink" target="_blank">{{ upgradeVersion }}</a>
+                <a
+                  :href="releaseLink"
+                  target="_blank"
+                >{{ upgradeVersion }}</a>
               </div>
             </div>
-            <div v-if="latestResource" class="row mb-5">
+            <div
+              v-if="latestResource"
+              class="row mb-5"
+            >
               <div class="col span-12">
                 <p class="state">
-                  {{ t('harvester.upgradePage.repoInfo.upgradeStatus') }}: <BadgeStateFormatter class="ml-5" :row="latestResource" />
+                  {{ t('harvester.upgradePage.repoInfo.upgradeStatus') }}: <BadgeStateFormatter
+                    class="ml-5"
+                    :row="latestResource"
+                  />
                 </p>
               </div>
             </div>
 
-            <div v-if="downloadLogFailReason" class="row mb-5">
+            <div
+              v-if="downloadLogFailReason"
+              class="row mb-5"
+            >
               <div class="col span-12">
                 <p class="state">
                   {{ t('harvester.upgradePage.repoInfo.logStatus') }}: <span class="error ml-5">{{ downloadLogFailReason }}</span>
@@ -252,13 +270,19 @@ export default {
             <p class="bordered-section"></p>
           </div>
 
-          <p v-if="overallMessage" class="text-warning mb-20">
+          <p
+            v-if="overallMessage"
+            class="text-warning mb-20"
+          >
             {{ overallMessage }}
           </p>
 
           <div v-if="showImage">
             <h4>{{ t('harvester.upgradePage.upgradeImage') }}<span class="float-r text-info">{{ imageProgress }}%</span></h4>
-            <PercentageBar :modelValue="imageProgress" preferred-direction="MORE" />
+            <PercentageBar
+              :model-value="imageProgress"
+              preferred-direction="MORE"
+            />
             <p class="text-warning">
               {{ imageMessage }}
             </p>
@@ -266,23 +290,46 @@ export default {
           </div>
 
           <h4>{{ t('harvester.upgradePage.createRepository') }} <span class="float-r text-info">{{ repoReady.isReady ? t('harvester.upgradePage.succeeded') : t('harvester.upgradePage.pending') }}</span></h4>
-          <p v-if="repoReady.message" class="text-warning">
+          <p
+            v-if="repoReady.message"
+            class="text-warning"
+          >
             {{ repoReady.message }}
           </p>
           <p class="bordered-section"></p>
 
-          <ProgressBarList :title="t('harvester.upgradePage.upgradeNode')" :precent="nodesPercent" :list="nodesStatus" />
+          <ProgressBarList
+            :title="t('harvester.upgradePage.upgradeNode')"
+            :precent="nodesPercent"
+            :list="nodesStatus"
+          />
           <p class="bordered-section"></p>
 
-          <ProgressBarList :title="t('harvester.upgradePage.upgradeSysService')" :precent="sysServiceTotal" :list="sysServiceUpgradeMessage" />
+          <ProgressBarList
+            :title="t('harvester.upgradePage.upgradeSysService')"
+            :precent="sysServiceTotal"
+            :list="sysServiceUpgradeMessage"
+          />
         </div>
 
         <div class="footer">
-          <button v-if="canStartedDownload" :disabled="logDownloading" class="btn role-primary mr-10" @click="downloadLog()">
+          <button
-            <i class="icon mr-10" :class="[logDownloading ? 'icon-spinner icon-spin' : 'icon-download']"></i> {{ t('harvester.upgradePage.repoInfo.downloadLog') }}
+            v-if="canStartedDownload"
+            :disabled="logDownloading"
+            class="btn role-primary mr-10"
+            @click="downloadLog()"
+          >
+            <i
+              class="icon mr-10"
+              :class="[logDownloading ? 'icon-spinner icon-spin' : 'icon-download']"
+            ></i> {{ t('harvester.upgradePage.repoInfo.downloadLog') }}
           </button>
 
-          <button v-if="latestResource.isUpgradeSucceeded" class="btn role-primary" @click="ignoreMessage()">
+          <button
+            v-if="latestResource.isUpgradeSucceeded"
+            class="btn role-primary"
+            @click="ignoreMessage()"
+          >
             {{ t('harvester.upgradePage.dismissMessage') }}
           </button>
         </div>

pkg/harvester/components/HarvesterUpgradeProgressBarList.vue

@@ -45,16 +45,33 @@ export default {
         <Collapse v-model:open="open">
           <template #title>
             <div class="total-bar">
-              <span class="bar"><PercentageBar :modelValue="precent" preferred-direction="MORE" /></span>
+              <span class="bar"><PercentageBar
-              <span class="on-off" @click="handleSwitch"> {{ open ? t('harvester.generic.close') : t('harvester.generic.open') }}</span>
+                :model-value="precent"
+                preferred-direction="MORE"
+              /></span>
+              <span
+                class="on-off"
+                @click="handleSwitch"
+              > {{ open ? t('harvester.generic.close') : t('harvester.generic.open') }}</span>
             </div>
           </template>
 
           <template>
             <div class="custom-content">
-              <div  v-for="(item, i) in list" :key="i" >
+              <div
-                <p>{{ item.name }} <span class="status" :class="{ [item.state]: true }">{{ item.state }}</span></p>
+                v-for="(item, i) in list"
-                <PercentageBar :modelValue="item.percent" preferred-direction="MORE" />
+                :key="i"
+              >
+                <p>
+                  {{ item.name }} <span
+                    class="status"
+                    :class="{ [item.state]: true }"
+                  >{{ item.state }}</span>
+                </p>
+                <PercentageBar
+                  :model-value="item.percent"
+                  preferred-direction="MORE"
+                />
                 <p class="warning">
                   {{ item.message }}
                 </p>

pkg/harvester/components/SerialConsole/index.vue

@@ -64,7 +64,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.close();
   },
 
@@ -247,7 +247,10 @@ export default {
 
 <template>
   <div class="harvester-shell-container">
-    <div ref="xterm" class="shell-body" />
+    <div
+      ref="xterm"
+      class="shell-body"
+    />
     <resize-observer @notify="fit" />
   </div>
 </template>

pkg/harvester/components/SettingList.vue

@@ -57,11 +57,11 @@ export default {
     filterCategorySettings() {
       return this.settings.filter((s) => {
         if (this.category !== 'advanced') {
-          return (CATEGORY[this.category] || []).find(item => item === s.id);
+          return (CATEGORY[this.category] || []).find((item) => item === s.id);
         } else if (this.category === 'advanced') {
           const allCategory = Object.keys(CATEGORY);
 
-          return !allCategory.some(category => (CATEGORY[category] || []).find(item => item === s.id));
+          return !allCategory.some((category) => (CATEGORY[category] || []).find((item) => item === s.id));
         }
       }) || [];
     },
@@ -75,7 +75,7 @@ export default {
     },
 
     getSettingOption(id) {
-      return HCI_ALLOWED_SETTINGS.find(setting => setting.id === id);
+      return HCI_ALLOWED_SETTINGS.find((setting) => setting.id === id);
     },
 
     toggleHide(s) {
@@ -116,43 +116,78 @@ export default {
 
 <template>
   <div>
-    <div v-for="(setting, i) in categorySettings" :key="i" class="advanced-setting mb-20">
+    <div
+      v-for="(setting, i) in categorySettings"
+      :key="i"
+      class="advanced-setting mb-20"
+    >
       <div class="header">
         <div class="title">
           <h1>
             {{ setting.id }}
-            <span v-if="setting.customized" class="modified">
+            <span
+              v-if="setting.customized"
+              class="modified"
+            >
               Modified
             </span>
-            <span v-if="setting.experimental" v-clean-tooltip="t('advancedSettings.experimental')" class="experimental">
+            <span
+              v-if="setting.experimental"
+              v-clean-tooltip="t('advancedSettings.experimental')"
+              class="experimental"
+            >
               Experimental
             </span>
           </h1>
           <h2 v-clean-html="t(setting.description, {}, true)">
           </h2>
         </div>
-        <div v-if="setting.hasActions" :id="setting.id" class="action">
+        <div
-          <button aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-sm role-multi-action actions" @click="showActionMenu($event, setting)">
+          v-if="setting.hasActions"
+          :id="setting.id"
+          class="action"
+        >
+          <button
+            aria-haspopup="true"
+            aria-expanded="false"
+            type="button"
+            class="btn btn-sm role-multi-action actions"
+            @click="showActionMenu($event, setting)"
+          >
             <i class="icon icon-actions" />
           </button>
         </div>
       </div>
       <div value>
-        <div v-if="!setting.hide" class="settings-value">
+        <div
+          v-if="!setting.hide"
+          class="settings-value"
+        >
           <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
           <pre v-else-if="setting.kind === 'multiline'">{{ setting.data.value || setting.data.default }}</pre>
           <pre v-else-if="setting.kind === 'enum'">{{ t(setting.enum) }}</pre>
           <pre v-else-if="setting.kind === 'custom' && setting.custom">{{ setting.custom }}</pre>
           <pre v-else-if="setting.data.value || setting.data.default">{{ setting.data.value || setting.data.default }}</pre>
-          <pre v-else class="text-muted">&lt;{{ t('advancedSettings.none') }}&gt;</pre>
+          <pre
+            v-else
+            class="text-muted"
+          >&lt;{{ t('advancedSettings.none') }}&gt;</pre>
         </div>
 
         <div class="mt-5">
-          <button v-if="setting.hide" class="btn btn-sm role-primary" @click="toggleHide(setting)">
+          <button
+            v-if="setting.hide"
+            class="btn btn-sm role-primary"
+            @click="toggleHide(setting)"
+          >
             {{ t('advancedSettings.show') }} {{ setting.id }}
           </button>
 
-          <button v-if="setting.canHide && !setting.hide" class="btn btn-sm role-primary" @click="toggleHide(setting)">
+          <button
+            v-if="setting.canHide && !setting.hide"
+            class="btn btn-sm role-primary"
+            @click="toggleHide(setting)"
+          >
             {{ t('advancedSettings.hide') }} {{ setting.id }}
           </button>
 
@@ -169,7 +204,11 @@ export default {
           />
         </div>
       </div>
-      <Banner v-if="setting.data.errMessage" color="error mt-5" class="settings-banner">
+      <Banner
+        v-if="setting.data.errMessage"
+        color="error mt-5"
+        class="settings-banner"
+      >
         {{ setting.data.errMessage }}
       </Banner>
     </div>

pkg/harvester/components/UpgradeInfo.vue

@@ -31,14 +31,20 @@ export default {
     <Banner color="warning">
       <div>
         <strong>{{ t('harvester.upgradePage.upgradeInfo.warning') }}:</strong>
-        <p v-clean-html="t('harvester.upgradePage.upgradeInfo.doc', {url: upgradeLink}, true)" class="mb-5"></p>
+        <p
+          v-clean-html="t('harvester.upgradePage.upgradeInfo.doc', {url: upgradeLink}, true)"
+          class="mb-5"
+        ></p>
 
         <p class="mb-5">
           {{ t('harvester.upgradePage.upgradeInfo.tip') }}
         </p>
 
         <p class="mb-5">
-          {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a :href="releaseVersion" target="_blank">{{ t('generic.moreInfo') }}</a>
+          {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a
+            :href="releaseVersion"
+            target="_blank"
+          >{{ t('generic.moreInfo') }}</a>
         </p>
       </div>
     </Banner>

pkg/harvester/components/novnc/NovncConsole.vue

@@ -3,7 +3,11 @@
     <div v-if="connected && disconnected">
       <main class="main-layout error">
         <div class="text-center">
-          <BrandImage file-name="error-desert-landscape.svg" width="900" height="300" />
+          <BrandImage
+            file-name="error-desert-landscape.svg"
+            width="900"
+            height="300"
+          />
           <h1>
             {{ t('generic.notification.title.warning') }}
           </h1>
@@ -61,7 +65,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearTimeout();
   },
 

pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue

@@ -7,10 +7,10 @@ import ModalWithCard from '@shell/components/ModalWithCard';
 const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
 
 export default {
-  name:       'NovncConsoleCustomKeys',
+  name: 'NovncConsoleCustomKeys',
 
   emits: ['close'],
-  
+
   components: {
     ModalWithCard, Banner, AsyncButton
   },
@@ -48,7 +48,7 @@ export default {
 
     displayedKeys() {
       const out = this.addedShortcutKeys.concat(this.preferredShortcutKeys).map((item) => {
-        const out = item.map(K => ` <code>${ K.key.charAt(0).toUpperCase() + K.key.slice(1) }</code>`);
+        const out = item.map((K) => ` <code>${ K.key.charAt(0).toUpperCase() + K.key.slice(1) }</code>`);
 
         return out.join(',');
       });
@@ -69,7 +69,7 @@ export default {
         return this.t('harvester.virtualMachine.detail.console.record.tips');
       }
 
-      const out = this.keysRecord.map(item => ` <code>${ item.key.charAt(0).toUpperCase() + item.key.slice(1) }</code>`);
+      const out = this.keysRecord.map((item) => ` <code>${ item.key.charAt(0).toUpperCase() + item.key.slice(1) }</code>`);
 
       return `Keys: ${ out.join(',') }`;
     },
@@ -85,7 +85,7 @@ export default {
       validationList.push(this.keysRecord);
 
       validationList = validationList.map((item) => {
-        const out = item.map(K => K.key);
+        const out = item.map((K) => K.key);
 
         return out.join(',');
       });
@@ -140,13 +140,13 @@ export default {
       const key = keys.replace(/(\s*)<code>|<\/code>/g, '').replace(/\s*,\s*/g, ',');
 
       this.addedShortcutKeys = this.addedShortcutKeys.filter((item) => {
-        const formatkey = item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+        const formatkey = item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
 
         return formatkey !== key;
       });
 
       this.preferredShortcutKeys = this.preferredShortcutKeys.filter((item) => {
-        const formatkey = item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
+        const formatkey = item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join(',');
 
         return formatkey !== key;
       });
@@ -188,11 +188,21 @@ export default {
       </div>
       <div class="row">
         <div class="col span-12">
-          <button class="btn bg-primary" @click="toggleRecording">
+          <button
+            class="btn bg-primary"
+            @click="toggleRecording"
+          >
             <t :k="recordButton" />
-            <i class="icon icon-fw" :class="isRecording ? 'icon-dot-open' : 'icon-dot'" />
+            <i
+              class="icon icon-fw"
+              :class="isRecording ? 'icon-dot-open' : 'icon-dot'"
+            />
           </button>
-          <button :disabled="!canAdd" class="btn bg-primary" @click="addShortcutKey">
+          <button
+            :disabled="!canAdd"
+            class="btn bg-primary"
+            @click="addShortcutKey"
+          >
             <t k="generic.add" />
           </button>
         </div>
@@ -207,7 +217,10 @@ export default {
         />
 
         <div class="displayed-banners">
-          <Banner v-for="(keys,index) in displayedKeys" :key="index">
+          <Banner
+            v-for="(keys,index) in displayedKeys"
+            :key="index"
+          >
             <span v-clean-html="keys"></span>
           </Banner>
         </div>
@@ -216,7 +229,10 @@ export default {
 
     <template #footer>
       <div class="actions">
-        <button class="btn role-secondary mr-20" @click.prevent="closeRecordingModal">
+        <button
+          class="btn role-secondary mr-20"
+          @click.prevent="closeRecordingModal"
+        >
           <t k="generic.close" />
         </button>
         <AsyncButton

pkg/harvester/components/novnc/NovncConsoleItem.vue

@@ -51,21 +51,38 @@ export default {
 
 <template>
   <ul class="list-unstyled dropdown combination-keys__container">
-    <li v-for="(item, key) in items" :key="key">
+    <li
+      v-for="(item, key) in items"
+      :key="key"
+    >
       <v-dropdown
         v-if="!!item.keys"
         placement="right-start"
         trigger="click"
         :container="false"
       >
-        <span :class="{ open: getOpenStatus(key, pos) }" class="p-10 hand" @click="addKeys({ key, pos })">{{ item.label }}</span>
+        <span
+          :class="{ open: getOpenStatus(key, pos) }"
+          class="p-10 hand"
+          @click="addKeys({ key, pos })"
+        >{{ item.label }}</span>
 
         <template #popper>
-          <novnc-console-item :items="item.keys" :path="path" :pos="pos+1" @update="addKeys" @send-keys="sendKeys" />
+          <novnc-console-item
+            :items="item.keys"
+            :path="path"
+            :pos="pos+1"
+            @update="addKeys"
+            @send-keys="sendKeys"
+          />
         </template>
       </v-dropdown>
 
-      <span v-else class="p-10 hand" @click="keysDown(key, pos)">{{ item.label }}</span>
+      <span
+        v-else
+        class="p-10 hand"
+        @click="keysDown(key, pos)"
+      >{{ item.label }}</span>
     </li>
   </ul>
 </template>

pkg/harvester/components/novnc/NovncConsoleWrapper.vue

@@ -211,7 +211,7 @@ export default {
     preferredShortcutKeys() {
       return (this.savedShortcutKeys || []).map((item) => {
         return {
-          label: item.map(K => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join('+'),
+          label: item.map((K) => K.key.charAt(0).toUpperCase() + K.key.slice(1)).join('+'),
           value: item
         };
       });
@@ -288,11 +288,21 @@ export default {
           </button>
 
           <template #popper>
-            <novnc-console-item :items="keymap" :path="keysRecord" :pos="0" @update="update" @send-keys="sendKeys" />
+            <novnc-console-item
+              :items="keymap"
+              :path="keysRecord"
+              :pos="0"
+              @update="update"
+              @send-keys="sendKeys"
+            />
           </template>
         </v-dropdown>
 
-        <button v-if="hasSoftRebootAction" class="btn btn-sm bg-primary" @click="softReboot">
+        <button
+          v-if="hasSoftRebootAction"
+          class="btn btn-sm bg-primary"
+          @click="softReboot"
+        >
           {{ t("harvester.action.softreboot") }}
         </button>
 
@@ -309,15 +319,24 @@ export default {
 
           <template #popper>
             <div>
-              <button class="btn btn-sm bg-primary" @click="showKeysModal">
+              <button
+                class="btn btn-sm bg-primary"
+                @click="showKeysModal"
+              >
                 {{ t("harvester.virtualMachine.detail.console.management") }}
               </button>
             </div>
 
             <hr>
 
-            <div v-for="(keys, index) in preferredShortcutKeys" :key="index">
+            <div
-              <button class="btn btn-sm bg-primary" @click="sendCustomKeys(keys.value)">
+              v-for="(keys, index) in preferredShortcutKeys"
+              :key="index"
+            >
+              <button
+                class="btn btn-sm bg-primary"
+                @click="sendCustomKeys(keys.value)"
+              >
                 {{ keys.label }}
               </button>
             </div>
@@ -330,7 +349,11 @@ export default {
           @close="hideKeysModal"
         />
       </div>
-      <NovncConsole v-if="url && !isDown" ref="novncConsole" :url="url" />
+      <NovncConsole
+        v-if="url && !isDown"
+        ref="novncConsole"
+        :url="url"
+      />
       <p v-if="isDown">
         {{ t("harvester.virtualMachine.detail.console.down") }}
       </p>

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

@@ -121,12 +121,31 @@ export default {
 </script>
 
 <template>
-  <div class="row" @update:value="update">
+  <div
+    class="row"
+    @update:value="update"
+  >
     <div class="col span-12">
-      <LabeledSelect v-model:value="parseDefaultValue.type" class="mb-20" :label="t('harvester.fields.type')" :options="typeOption" @update:value="update" />
+      <LabeledSelect
+        v-model:value="parseDefaultValue.type"
+        class="mb-20"
+        :label="t('harvester.fields.type')"
+        :options="typeOption"
+        @update:value="update"
+      />
 
-      <LabeledInput v-model:value="parseDefaultValue.endpoint" class="mb-5" :placeholder="endpointPlaceholder" :mode="mode" label="Endpoint" />
+      <LabeledInput
-      <Tip class="mb-20" icon="icon icon-info" :text="t('harvester.backup.backupTargetTip')" />
+        v-model:value="parseDefaultValue.endpoint"
+        class="mb-5"
+        :placeholder="endpointPlaceholder"
+        :mode="mode"
+        label="Endpoint"
+      />
+      <Tip
+        class="mb-20"
+        icon="icon icon-info"
+        :text="t('harvester.backup.backupTargetTip')"
+      />
 
       <template v-if="isS3">
         <LabeledInput
@@ -163,7 +182,13 @@ export default {
           required
         />
 
-        <LabeledSelect v-model:value="parseDefaultValue.virtualHostedStyle" class="mb-20" label="Virtual Hosted-Style" :options="virtualHostedStyleType" @update:value="update" />
+        <LabeledSelect
+          v-model:value="parseDefaultValue.virtualHostedStyle"
+          class="mb-20"
+          label="Virtual Hosted-Style"
+          :options="virtualHostedStyleType"
+          @update:value="update"
+        />
 
         <div class="mb-20">
           <Tip icon="icon icon-info">

pkg/harvester/components/settings/containerd-registry.vue

@@ -225,8 +225,16 @@ export default {
   <div>
     <h3>{{ t('harvester.setting.containerdRegistry.mirrors.mirrors') }}</h3>
     <div>
-      <InfoBox v-for="mirror, idx in mirrors" :key="mirror.idx" class="box">
+      <InfoBox
-        <button type="button" class="role-link btn btn-sm remove" @click="remove('mirrors', idx)">
+        v-for="mirror, idx in mirrors"
+        :key="mirror.idx"
+        class="box"
+      >
+        <button
+          type="button"
+          class="role-link btn btn-sm remove"
+          @click="remove('mirrors', idx)"
+        >
           <i class="icon icon-2x icon-x" />
         </button>
 
@@ -273,7 +281,10 @@ export default {
       </infobox>
     </div>
 
-    <button class="btn btn-sm role-primary" @click.self="addMirror">
+    <button
+      class="btn btn-sm role-primary"
+      @click.self="addMirror"
+    >
       {{ t('harvester.setting.containerdRegistry.mirrors.addMirror') }}
     </button>
 
@@ -281,8 +292,16 @@ export default {
 
     <h3>{{ t('harvester.setting.containerdRegistry.configs.configs') }}</h3>
     <div>
-      <InfoBox v-for="config, idx in configs" :key="config.idx" class="box">
+      <InfoBox
-        <button type="button" class="role-link btn btn-sm remove" @click="remove('configs', idx)">
+        v-for="config, idx in configs"
+        :key="config.idx"
+        class="box"
+      >
+        <button
+          type="button"
+          class="role-link btn btn-sm remove"
+          @click="remove('configs', idx)"
+        >
           <i class="icon icon-2x icon-x" />
         </button>
 
@@ -355,7 +374,10 @@ export default {
         </div>
       </infobox>
 
-      <button class="btn btn-sm role-primary" @click="addConfig">
+      <button
+        class="btn btn-sm role-primary"
+        @click="addConfig"
+      >
         {{ t('harvester.setting.containerdRegistry.configs.addConfig') }}
       </button>
     </div>

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

@@ -64,7 +64,7 @@ export default {
       const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
 
       return csiDrivers.filter((provisioner) => {
-        return !this.configArr.map(config => config.key).includes(provisioner.name);
+        return !this.configArr.map((config) => config.key).includes(provisioner.name);
       }).map((provisioner) => {
         return provisioner.name;
       });
@@ -181,8 +181,16 @@ export default {
 
 <template>
   <div>
-    <InfoBox v-for="(driver, idx) in configArr" :key="idx">
+    <InfoBox
-      <button :disabled="disableEdit(driver.key)" type="button" class="role-link btn btn-sm remove" @click="remove(idx)">
+      v-for="(driver, idx) in configArr"
+      :key="idx"
+    >
+      <button
+        :disabled="disableEdit(driver.key)"
+        type="button"
+        class="role-link btn btn-sm remove"
+        @click="remove(idx)"
+      >
         <i class="icon icon-x" />
       </button>
 
@@ -229,7 +237,11 @@ export default {
       </div>
     </infobox>
 
-    <button class="btn btn-sm role-primary" :disabled="disableAdd" @click.self="add">
+    <button
+      class="btn btn-sm role-primary"
+      :disabled="disableAdd"
+      @click.self="add"
+    >
       {{ t('generic.add') }}
     </button>
   </div>

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

@@ -54,10 +54,16 @@ export default {
 <template>
   <div>
     <Banner color="warning">
-      <t k="harvester.setting.httpProxy.warning" :raw="true" />
+      <t
+        k="harvester.setting.httpProxy.warning"
+        :raw="true"
+      />
     </Banner>
 
-    <div class="row" @update:value="update">
+    <div
+      class="row"
+      @update:value="update"
+    >
       <div class="col span-12">
         <LabeledInput
           v-model:value="parseDefaultValue.httpProxy"

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

@@ -107,7 +107,7 @@ export default {
 
   methods: {
     update() {
-      const exclude = this.exclude.filter(ip => ip);
+      const exclude = this.exclude.filter((ip) => ip);
 
       if (Array.isArray(exclude) && exclude.length > 0) {
         this.parsedDefaultValue.exclude = exclude;
@@ -172,7 +172,10 @@ export default {
     @update:value="update"
   >
     <Banner color="warning">
-      <t k="harvester.setting.storageNetwork.warning" :raw="true" />
+      <t
+        k="harvester.setting.storageNetwork.warning"
+        :raw="true"
+      />
     </Banner>
 
     <RadioGroup
@@ -210,8 +213,15 @@ export default {
         :placeholder="t('harvester.setting.storageNetwork.range.placeholder')"
         label-key="harvester.setting.storageNetwork.range.label"
       />
-      <Tip class="mb-20" icon="icon icon-info">
+      <Tip
-        <t k="harvester.setting.storageNetwork.tip" :raw="true" :url="storageNetworkExampleLink" />
+        class="mb-20"
+        icon="icon icon-info"
+      >
+        <t
+          k="harvester.setting.storageNetwork.tip"
+          :raw="true"
+          :url="storageNetworkExampleLink"
+        />
       </Tip>
 
       <ArrayList

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

@@ -29,6 +29,7 @@ export default {
 
   data() {
     let parseDefaultValue = {};
+
     try {
       parseDefaultValue = JSON.parse(this.value.value);
     } catch (error) {
@@ -63,6 +64,7 @@ export default {
   methods: {
     update() {
       const value = JSON.stringify(this.parseDefaultValue);
+
       this.value['value'] = value;
     },
 
@@ -99,7 +101,10 @@ export default {
 </script>
 
 <template>
-  <div class="row" @input="update">
+  <div
+    class="row"
+    @input="update"
+  >
     <div class="col span-12">
       <LabeledInput
         v-model:value="parseDefaultValue.repository"

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

@@ -48,7 +48,10 @@ export default {
 </script>
 
 <template>
-  <div class="row" @input="update">
+  <div
+    class="row"
+    @input="update"
+  >
     <div class="col span-12">
       <RadioGroup
         v-model:value="parseDefaultValue.enable"

pkg/harvester/config/doc-links.js

@@ -1,5 +1,5 @@
-const pkgJson = require('../package.json');
 import semver from 'semver';
+const pkgJson = require('../package.json');
 
 const docVersion = `v${ semver.major(pkgJson.version) }.${ semver.minor(pkgJson.version) }`;
 

pkg/harvester/config/harvester-cluster.js

@@ -44,14 +44,14 @@ export const IP_POOL_HEADERS = [
   STATE,
   NAME_COL,
   {
-    name: 'subnet',
+    name:     'subnet',
     labelKey: 'harvester.ipPool.subnet.label',
-    value: 'subnetDisplay',
+    value:    'subnetDisplay',
   },
   {
-    name: 'availableIP',
+    name:     'availableIP',
     labelKey: 'harvester.ipPool.availableIP.label',
-    value: 'status.available',
+    value:    'status.available',
   },
   AGE
 ];
@@ -71,7 +71,7 @@ export function init($plugin, store) {
 
   if (isSingleVirtualCluster) {
     const home = {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: {
         product:  PRODUCT_NAME,
         resource: HCI.DASHBOARD
@@ -79,34 +79,34 @@ export function init($plugin, store) {
     };
 
     store.dispatch('setIsSingleProduct', {
-      productName: PRODUCT_NAME,
+      productName:       PRODUCT_NAME,
-      logo: require(`@shell/assets/images/providers/harvester.svg`),
+      logo:              require(`@shell/assets/images/providers/harvester.svg`),
-      productNameKey: 'harvester.productLabel',
+      productNameKey:    'harvester.productLabel',
-      getVersionInfo: (store) => store.getters[`${PRODUCT_NAME}/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
+      getVersionInfo:    (store) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
-      afterLoginRoute: home,
+      afterLoginRoute:   home,
-      logoRoute: home,
+      logoRoute:         home,
       supportCustomLogo: true
     });
   }
 
   product({
-    inStore: 'harvester',
+    inStore:               'harvester',
-    removable: false,
+    removable:             false,
-    showNamespaceFilter: true,
+    showNamespaceFilter:   true,
-    hideKubeShell: true,
+    hideKubeShell:         true,
-    hideKubeConfig: true,
+    hideKubeConfig:        true,
-    showClusterSwitcher: true,
+    showClusterSwitcher:   true,
-    hideCopyConfig: true,
+    hideCopyConfig:        true,
-    hideSystemResources: true,
+    hideSystemResources:   true,
     customNamespaceFilter: true,
-    typeStoreMap: {
+    typeStoreMap:          {
-      [MANAGEMENT.PROJECT]: 'management',
+      [MANAGEMENT.PROJECT]:                       'management',
       [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management',
       [MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING]: 'management'
     },
-    supportRoute: { name: `${PRODUCT_NAME}-c-cluster-support` },
+    supportRoute: { name: `${ PRODUCT_NAME }-c-cluster-support` },
-    to: {
+    to:           {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: {
         product:  PRODUCT_NAME,
         resource: HCI.DASHBOARD
@@ -118,13 +118,13 @@ export function init($plugin, store) {
   basicType([HCI.DASHBOARD]);
   virtualType({
     labelKey: 'harvester.dashboard.label',
-    group: 'Root',
+    group:    'Root',
-    name: HCI.DASHBOARD,
+    name:     HCI.DASHBOARD,
-    weight: 500,
+    weight:   500,
-    route: {
+    route:    {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: {
-        product: PRODUCT_NAME,
+        product:  PRODUCT_NAME,
         resource: HCI.DASHBOARD
       }
     }
@@ -133,12 +133,12 @@ export function init($plugin, store) {
 
   configureType(HCI.HOST, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.HOST }
     },
-    resource: NODE,
+    resource:       NODE,
     resourceDetail: HCI.HOST,
-    resourceEdit: HCI.HOST
+    resourceEdit:   HCI.HOST
   });
 
   configureType(HCI.HOST, { isCreatable: false, isEditable: true });
@@ -146,13 +146,13 @@ export function init($plugin, store) {
 
   virtualType({
     ifHaveType: NODE,
-    labelKey: 'harvester.host.label',
+    labelKey:   'harvester.host.label',
-    group: 'Root',
+    group:      'Root',
-    name: HCI.HOST,
+    name:       HCI.HOST,
     namespaced: true,
-    weight: 399,
+    weight:     399,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.HOST }
     },
     exact: false
@@ -161,29 +161,29 @@ export function init($plugin, store) {
   // multiVirtualCluster
   basicType(['cluster-members'], 'rbac');
   virtualType({
-    ifHave: IF_HAVE.MULTI_CLUSTER,
+    ifHave:     IF_HAVE.MULTI_CLUSTER,
-    labelKey: 'members.clusterMembers',
+    labelKey:   'members.clusterMembers',
-    group: 'root',
+    group:      'root',
     namespaced: false,
-    name: VIRTUAL_TYPES.CLUSTER_MEMBERS,
+    name:       VIRTUAL_TYPES.CLUSTER_MEMBERS,
-    weight: 100,
+    weight:     100,
-    route: { name: `${PRODUCT_NAME}-c-cluster-members` },
+    route:      { name: `${ PRODUCT_NAME }-c-cluster-members` },
-    exact: true,
+    exact:      true,
     ifHaveType: {
-      type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
+      type:  MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
       store: 'management'
     }
   });
 
   basicType([HCI.VM]);
   virtualType({
-    labelKey: 'harvester.virtualMachine.label',
+    labelKey:   'harvester.virtualMachine.label',
-    group: 'root',
+    group:      'root',
-    name: HCI.VM,
+    name:       HCI.VM,
     namespaced: true,
-    weight: 299,
+    weight:     299,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VM }
     },
     exact: false
@@ -192,23 +192,23 @@ export function init($plugin, store) {
   basicType([HCI.VOLUME]);
   configureType(HCI.VOLUME, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VOLUME }
     },
-    resource: PVC,
+    resource:       PVC,
     resourceDetail: HCI.VOLUME,
-    resourceEdit: HCI.VOLUME,
+    resourceEdit:   HCI.VOLUME,
-    canYaml: false,
+    canYaml:        false,
   });
   virtualType({
-    labelKey: 'harvester.volume.label',
+    labelKey:   'harvester.volume.label',
-    group: 'root',
+    group:      'root',
     ifHaveType: PVC,
-    name: HCI.VOLUME,
+    name:       HCI.VOLUME,
     namespaced: true,
-    weight: 199,
+    weight:     199,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VOLUME }
     },
     exact: false
@@ -224,17 +224,15 @@ export function init($plugin, store) {
     IMAGE_VIRTUAL_SIZE,
     AGE
   ]);
-  configureType(HCI.IMAGE, {
+  configureType(HCI.IMAGE, { canYaml: false });
-    canYaml: false,
-  });
   virtualType({
-    labelKey: 'harvester.image.label',
+    labelKey:   'harvester.image.label',
-    group: 'root',
+    group:      'root',
-    name: HCI.IMAGE,
+    name:       HCI.IMAGE,
     namespaced: true,
-    weight: 198,
+    weight:     198,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.IMAGE }
     },
     exact: false
@@ -242,14 +240,14 @@ export function init($plugin, store) {
 
   basicType(['projects-namespaces']);
   virtualType({
-    ifHave: IF_HAVE.MULTI_CLUSTER,
+    ifHave:     IF_HAVE.MULTI_CLUSTER,
-    labelKey: 'harvester.projectNamespace.label',
+    labelKey:   'harvester.projectNamespace.label',
-    group: 'root',
+    group:      'root',
     namespaced: true,
-    name: 'projects-namespaces',
+    name:       'projects-namespaces',
-    weight: 98,
+    weight:     98,
-    route: { name: `${PRODUCT_NAME}-c-cluster-projectsnamespaces` },
+    route:      { name: `${ PRODUCT_NAME }-c-cluster-projectsnamespaces` },
-    exact: true,
+    exact:      true,
   });
 
   if (isSingleVirtualCluster) {
@@ -287,31 +285,31 @@ export function init($plugin, store) {
     NAME_COL,
     NAMESPACE_COL,
     {
-      name: 'receivers',
+      name:      'receivers',
-      labelKey: 'tableHeaders.receivers',
+      labelKey:  'tableHeaders.receivers',
       formatter: 'ReceiverIcons',
-      value: 'name'
+      value:     'name'
     },
   ]);
 
   configureType(HCI.ALERTMANAGERCONFIG, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.ALERTMANAGERCONFIG },
     },
-    resource: MONITORING.ALERTMANAGERCONFIG,
+    resource:       MONITORING.ALERTMANAGERCONFIG,
     resourceDetail: HCI.ALERTMANAGERCONFIG,
-    resourceEdit: HCI.ALERTMANAGERCONFIG
+    resourceEdit:   HCI.ALERTMANAGERCONFIG
   });
 
   virtualType({
     ifHaveType: MONITORING.ALERTMANAGERCONFIG,
-    labelKey: 'harvester.monitoring.alertmanagerConfig.label',
+    labelKey:   'harvester.monitoring.alertmanagerConfig.label',
-    name: HCI.ALERTMANAGERCONFIG,
+    name:       HCI.ALERTMANAGERCONFIG,
     namespaced: true,
-    weight: 87,
+    weight:     87,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.ALERTMANAGERCONFIG }
     },
     exact: false,
@@ -319,21 +317,21 @@ export function init($plugin, store) {
 
   configureType(HCI.CLUSTER_FLOW, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_FLOW },
     },
-    resource: LOGGING.CLUSTER_FLOW,
+    resource:       LOGGING.CLUSTER_FLOW,
     resourceDetail: HCI.CLUSTER_FLOW,
-    resourceEdit: HCI.CLUSTER_FLOW
+    resourceEdit:   HCI.CLUSTER_FLOW
   });
 
   virtualType({
-    labelKey: 'harvester.logging.clusterFlow.label',
+    labelKey:   'harvester.logging.clusterFlow.label',
-    name: HCI.CLUSTER_FLOW,
+    name:       HCI.CLUSTER_FLOW,
     namespaced: true,
-    weight: 79,
+    weight:     79,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_FLOW }
     },
     exact: false,
@@ -341,21 +339,21 @@ export function init($plugin, store) {
 
   configureType(HCI.CLUSTER_OUTPUT, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_OUTPUT },
     },
-    resource: LOGGING.CLUSTER_OUTPUT,
+    resource:       LOGGING.CLUSTER_OUTPUT,
     resourceDetail: HCI.CLUSTER_OUTPUT,
-    resourceEdit: HCI.CLUSTER_OUTPUT
+    resourceEdit:   HCI.CLUSTER_OUTPUT
   });
 
   virtualType({
-    labelKey: 'harvester.logging.clusterOutput.label',
+    labelKey:   'harvester.logging.clusterOutput.label',
-    name: HCI.CLUSTER_OUTPUT,
+    name:       HCI.CLUSTER_OUTPUT,
     namespaced: true,
-    weight: 78,
+    weight:     78,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_OUTPUT }
     },
     exact: false,
@@ -363,21 +361,21 @@ export function init($plugin, store) {
 
   configureType(HCI.FLOW, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.FLOW },
     },
-    resource: LOGGING.FLOW,
+    resource:       LOGGING.FLOW,
     resourceDetail: HCI.FLOW,
-    resourceEdit: HCI.FLOW
+    resourceEdit:   HCI.FLOW
   });
 
   virtualType({
-    labelKey: 'harvester.logging.flow.label',
+    labelKey:   'harvester.logging.flow.label',
-    name: HCI.FLOW,
+    name:       HCI.FLOW,
     namespaced: true,
-    weight: 77,
+    weight:     77,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.FLOW }
     },
     exact: false,
@@ -385,21 +383,21 @@ export function init($plugin, store) {
 
   configureType(HCI.OUTPUT, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.OUTPUT },
     },
-    resource: LOGGING.OUTPUT,
+    resource:       LOGGING.OUTPUT,
     resourceDetail: HCI.OUTPUT,
-    resourceEdit: HCI.OUTPUT
+    resourceEdit:   HCI.OUTPUT
   });
 
   virtualType({
-    labelKey: 'harvester.logging.output.label',
+    labelKey:   'harvester.logging.output.label',
-    name: HCI.OUTPUT,
+    name:       HCI.OUTPUT,
     namespaced: true,
-    weight: 76,
+    weight:     76,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.OUTPUT }
     },
     exact: false,
@@ -454,17 +452,17 @@ export function init($plugin, store) {
 
   configureType(HCI.CLUSTER_NETWORK, {
     realResource: HCI.SETTING,
-    showState: false
+    showState:    false
   });
 
   virtualType({
-    labelKey: 'harvester.vmTemplate.label',
+    labelKey:   'harvester.vmTemplate.label',
-    group: 'root',
+    group:      'root',
-    name: TEMPLATE,
+    name:       TEMPLATE,
     namespaced: true,
-    weight: 289,
+    weight:     289,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: TEMPLATE }
     },
     exact: false
@@ -486,12 +484,12 @@ export function init($plugin, store) {
 
   configureType(HCI.BACKUP, { showListMasthead: false, showConfigView: false });
   virtualType({
-    labelKey: 'harvester.backup.label',
+    labelKey:   'harvester.backup.label',
-    name: HCI.BACKUP,
+    name:       HCI.BACKUP,
     namespaced: true,
-    weight: 200,
+    weight:     200,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.BACKUP }
     },
     exact: false
@@ -501,13 +499,13 @@ export function init($plugin, store) {
 
   configureType(HCI.CLUSTER_NETWORK, { showListMasthead: false });
   virtualType({
-    labelKey: 'harvester.clusterNetwork.title',
+    labelKey:   'harvester.clusterNetwork.title',
-    name: HCI.CLUSTER_NETWORK,
+    name:       HCI.CLUSTER_NETWORK,
     ifHaveType: HCI.CLUSTER_NETWORK,
     namespaced: false,
-    weight: 189,
+    weight:     189,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLUSTER_NETWORK }
     },
     exact: false,
@@ -515,21 +513,21 @@ export function init($plugin, store) {
 
   configureType(HCI.NETWORK_ATTACHMENT, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.NETWORK_ATTACHMENT }
     },
-    resource: NETWORK_ATTACHMENT,
+    resource:       NETWORK_ATTACHMENT,
     resourceDetail: HCI.NETWORK_ATTACHMENT,
-    resourceEdit: HCI.NETWORK_ATTACHMENT
+    resourceEdit:   HCI.NETWORK_ATTACHMENT
   });
 
   virtualType({
-    labelKey: 'harvester.network.label',
+    labelKey:   'harvester.network.label',
-    name: HCI.NETWORK_ATTACHMENT,
+    name:       HCI.NETWORK_ATTACHMENT,
     namespaced: true,
-    weight: 188,
+    weight:     188,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.NETWORK_ATTACHMENT }
     },
     exact: false
@@ -537,22 +535,22 @@ export function init($plugin, store) {
 
   configureType(HCI.SNAPSHOT, {
     isCreatable: false,
-    location: {
+    location:    {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SNAPSHOT },
     },
-    resource: VOLUME_SNAPSHOT,
+    resource:       VOLUME_SNAPSHOT,
     resourceDetail: HCI.SNAPSHOT,
-    resourceEdit: HCI.SNAPSHOT,
+    resourceEdit:   HCI.SNAPSHOT,
   });
   headers(HCI.SNAPSHOT, [STATE, NAME_COL, NAMESPACE_COL, SNAPSHOT_TARGET_VOLUME, AGE]);
   virtualType({
-    labelKey: 'harvester.snapshot.label',
+    labelKey:   'harvester.snapshot.label',
-    name: HCI.SNAPSHOT,
+    name:       HCI.SNAPSHOT,
     namespaced: true,
-    weight: 190,
+    weight:     190,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SNAPSHOT }
     },
     exact: false,
@@ -560,22 +558,22 @@ export function init($plugin, store) {
 
   configureType(HCI.VM_SNAPSHOT, {
     showListMasthead: false,
-    location: {
+    location:         {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VM_SNAPSHOT }
     },
-    resource: HCI.BACKUP,
+    resource:       HCI.BACKUP,
     resourceDetail: HCI.VM_SNAPSHOT,
-    resourceEdit: HCI.VM_SNAPSHOT
+    resourceEdit:   HCI.VM_SNAPSHOT
   });
 
   virtualType({
-    labelKey: 'harvester.vmSnapshot.label',
+    labelKey:   'harvester.vmSnapshot.label',
-    name: HCI.VM_SNAPSHOT,
+    name:       HCI.VM_SNAPSHOT,
     namespaced: true,
-    weight: 191,
+    weight:     191,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VM_SNAPSHOT }
     },
     exact: false
@@ -583,12 +581,12 @@ export function init($plugin, store) {
 
   headers(HCI.SSH, [STATE, NAME_COL, NAMESPACE_COL, FINGERPRINT, AGE]);
   virtualType({
-    labelKey: 'harvester.sshKey.label',
+    labelKey:   'harvester.sshKey.label',
-    name: HCI.SSH,
+    name:       HCI.SSH,
     namespaced: true,
-    weight: 170,
+    weight:     170,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SSH }
     },
     exact: false
@@ -596,21 +594,21 @@ export function init($plugin, store) {
 
   configureType(HCI.CLOUD_TEMPLATE, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLOUD_TEMPLATE }
     },
-    resource: CONFIG_MAP,
+    resource:       CONFIG_MAP,
     resourceDetail: HCI.CLOUD_TEMPLATE,
-    resourceEdit: HCI.CLOUD_TEMPLATE
+    resourceEdit:   HCI.CLOUD_TEMPLATE
   });
 
   virtualType({
-    labelKey: 'harvester.cloudTemplate.label',
+    labelKey:   'harvester.cloudTemplate.label',
-    name: HCI.CLOUD_TEMPLATE,
+    name:       HCI.CLOUD_TEMPLATE,
     namespaced: true,
-    weight: 87,
+    weight:     87,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.CLOUD_TEMPLATE }
     },
     exact: false
@@ -622,9 +620,9 @@ export function init($plugin, store) {
     NAMESPACE_COL,
     SUB_TYPE,
     {
-      name: 'data',
+      name:      'data',
-      labelKey: 'tableHeaders.data',
+      labelKey:  'tableHeaders.data',
-      value: 'dataPreview',
+      value:     'dataPreview',
       formatter: 'SecretData'
     },
     AGE
@@ -632,22 +630,22 @@ export function init($plugin, store) {
 
   configureType(HCI.SECRET, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SECRET }
     },
-    resource: SECRET,
+    resource:           SECRET,
-    resourceDetail: HCI.SECRET,
+    resourceDetail:     HCI.SECRET,
-    resourceEdit: HCI.SECRET,
+    resourceEdit:       HCI.SECRET,
     notFilterNamespace: ['cattle-monitoring-system', 'cattle-logging-system']
   });
 
   virtualType({
-    labelKey: 'harvester.secret.label',
+    labelKey:   'harvester.secret.label',
-    name: HCI.SECRET,
+    name:       HCI.SECRET,
     namespaced: true,
-    weight: -999,
+    weight:     -999,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SECRET }
     },
     exact: false
@@ -658,12 +656,12 @@ export function init($plugin, store) {
   virtualType({
     ifHaveType: HCI.SETTING,
     ifHaveVerb: 'POST',
-    labelKey: 'harvester.setting.label',
+    labelKey:   'harvester.setting.label',
-    name: HCI.SETTING,
+    name:       HCI.SETTING,
     namespaced: true,
-    weight: -1000,
+    weight:     -1000,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SETTING }
     },
     exact: false
@@ -671,56 +669,56 @@ export function init($plugin, store) {
 
   configureType(HCI.STORAGE, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.STORAGE }
     },
-    resource: STORAGE_CLASS,
+    resource:       STORAGE_CLASS,
     resourceDetail: HCI.STORAGE,
-    resourceEdit: HCI.STORAGE,
+    resourceEdit:   HCI.STORAGE,
-    isCreatable: true,
+    isCreatable:    true,
   });
   virtualType({
-    labelKey: 'harvester.storage.title',
+    labelKey:   'harvester.storage.title',
-    group: 'root',
+    group:      'root',
     ifHaveType: STORAGE_CLASS,
-    name: HCI.STORAGE,
+    name:       HCI.STORAGE,
     namespaced: false,
-    weight: 79,
+    weight:     79,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.STORAGE }
     },
     exact: false,
   });
 
   virtualType({
-    label: 'PCI Devices',
+    label:      'PCI Devices',
-    group: 'advanced',
+    group:      'advanced',
-    weight: 14,
+    weight:     14,
-    name: HCI.PCI_DEVICE,
+    name:       HCI.PCI_DEVICE,
     namespaced: false,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.PCI_DEVICE }
     },
     exact: false,
   });
 
   configureType(HCI.PCI_DEVICE, {
-    isCreatable: false,
+    isCreatable:                false,
     hiddenNamespaceGroupButton: true,
-    listGroups: [
+    listGroups:                 [
       {
-        icon: 'icon-list-grouped',
+        icon:       'icon-list-grouped',
-        value: 'description',
+        value:      'description',
-        field: 'groupByDevice',
+        field:      'groupByDevice',
         hideColumn: 'description',
         tooltipKey: 'resourceTable.groupBy.device'
       },
       {
-        icon: 'icon-cluster',
+        icon:       'icon-cluster',
-        value: 'node',
+        value:      'node',
-        field: 'groupByNode',
+        field:      'groupByNode',
         hideColumn: 'node',
         tooltipKey: 'resourceTable.groupBy.node'
       }
@@ -729,63 +727,63 @@ export function init($plugin, store) {
 
   virtualType({
     ifHaveType: HCI.SR_IOV,
-    labelKey: 'harvester.sriov.label',
+    labelKey:   'harvester.sriov.label',
-    group: 'advanced',
+    group:      'advanced',
-    weight: 15,
+    weight:     15,
-    name: HCI.SR_IOV,
+    name:       HCI.SR_IOV,
     namespaced: false,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SR_IOV }
     },
     exact: false
   });
 
   configureType(HCI.SR_IOV, {
-    isCreatable: false,
+    isCreatable:                false,
     hiddenNamespaceGroupButton: true,
   });
 
   virtualType({
     ifHaveType: HCI.SR_IOVGPU_DEVICE,
-    labelKey: 'harvester.sriovgpu.label',
+    labelKey:   'harvester.sriovgpu.label',
-    group: 'advanced',
+    group:      'advanced',
-    weight: 13,
+    weight:     13,
-    name: HCI.SR_IOVGPU_DEVICE,
+    name:       HCI.SR_IOVGPU_DEVICE,
     namespaced: false,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.SR_IOVGPU_DEVICE }
     },
     exact: false,
   });
 
   configureType(HCI.SR_IOVGPU_DEVICE, {
-    isCreatable: false,
+    isCreatable:                false,
     hiddenNamespaceGroupButton: true,
   });
 
   virtualType({
-    labelKey: 'harvester.vgpu.label',
+    labelKey:   'harvester.vgpu.label',
-    group: 'advanced',
+    group:      'advanced',
-    weight: 12,
+    weight:     12,
-    name: HCI.VGPU_DEVICE,
+    name:       HCI.VGPU_DEVICE,
     namespaced: false,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.VGPU_DEVICE }
     },
     exact: false,
   });
 
   configureType(HCI.VGPU_DEVICE, {
-    isCreatable: false,
+    isCreatable:                false,
     hiddenNamespaceGroupButton: true,
-    listGroups: [
+    listGroups:                 [
       {
-        icon: 'icon-cluster',
+        icon:       'icon-cluster',
-        value: 'node',
+        value:      'node',
-        field: 'groupByNode',
+        field:      'groupByNode',
         hideColumn: 'node',
         tooltipKey: 'resourceTable.groupBy.node'
       }
@@ -830,18 +828,18 @@ export function init($plugin, store) {
   configureType(HCI.ADD_ONS, {
     isCreatable: false,
     isRemovable: false,
-    showState: false,
+    showState:   false,
   });
 
   virtualType({
-    label: 'Add-ons',
+    label:      'Add-ons',
-    group: 'advanced',
+    group:      'advanced',
-    name: HCI.ADD_ONS,
+    name:       HCI.ADD_ONS,
     ifHaveType: HCI.ADD_ONS,
-    weight: -900,
+    weight:     -900,
     namespaced: false,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.ADD_ONS }
     },
     exact: false,
@@ -849,20 +847,20 @@ export function init($plugin, store) {
 
   configureType(HCI.LB, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.LB }
     },
   });
   virtualType({
-    labelKey: 'harvester.loadBalancer.label',
+    labelKey:   'harvester.loadBalancer.label',
-    name: HCI.LB,
+    name:       HCI.LB,
     namespaced: true,
-    weight: 185,
+    weight:     185,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.LB }
     },
-    exact: false,
+    exact:      false,
     ifHaveType: HCI.LB,
   });
   headers(HCI.LB, [
@@ -873,34 +871,34 @@ export function init($plugin, store) {
       formatter: 'HarvesterListener',
     },
     {
-      name: 'workloadType',
+      name:     'workloadType',
       labelKey: 'harvester.loadBalancer.workloadType.label',
-      value: 'workloadTypeDisplay',
+      value:    'workloadTypeDisplay',
     },
     {
-      name: 'ipam',
+      name:     'ipam',
       labelKey: 'harvester.loadBalancer.ipam.label',
-      value: 'ipamDisplay',
+      value:    'ipamDisplay',
     },
     AGE
   ]);
 
   configureType(HCI.IP_POOL, {
     location: {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.IP_POOL }
     },
   });
   virtualType({
-    labelKey: 'harvester.ipPool.label',
+    labelKey:   'harvester.ipPool.label',
-    name: HCI.IP_POOL,
+    name:       HCI.IP_POOL,
     namespaced: false,
-    weight: 184,
+    weight:     184,
-    route: {
+    route:      {
-      name: `${PRODUCT_NAME}-c-cluster-resource`,
+      name:   `${ PRODUCT_NAME }-c-cluster-resource`,
       params: { resource: HCI.IP_POOL }
     },
-    exact: false,
+    exact:      false,
     ifHaveType: HCI.IP_POOL,
   });
   headers(HCI.IP_POOL, IP_POOL_HEADERS);

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

@@ -193,16 +193,25 @@ export default {
     <h3>{{ t('harvester.host.tabs.overview') }}</h3>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.customName')" :value="customName" />
+        <LabelValue
+          :name="t('harvester.host.detail.customName')"
+          :value="customName"
+        />
       </div>
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.hostIP')" :value="value.internalIp" />
+        <LabelValue
+          :name="t('harvester.host.detail.hostIP')"
+          :value="value.internalIp"
+        />
       </div>
     </div>
 
     <div class="row mb-20">
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.os')" :value="value.status.nodeInfo.osImage" />
+        <LabelValue
+          :name="t('harvester.host.detail.os')"
+          :value="value.status.nodeInfo.osImage"
+        />
       </div>
       <div class="col span-6">
         <div class="role">
@@ -223,20 +232,39 @@ export default {
 
     <div class="row mb-20">
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.create')" :value="value.metadata.creationTimestamp" />
+        <LabelValue
+          :name="t('harvester.host.detail.create')"
+          :value="value.metadata.creationTimestamp"
+        />
       </div>
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.update')" :value="lastUpdateTime" />
+        <LabelValue
+          :name="t('harvester.host.detail.update')"
+          :value="lastUpdateTime"
+        />
       </div>
     </div>
 
     <div class="row mb-20">
-      <div v-if="!value.isEtcd" class="col span-6">
+      <div
-        <LabelValue :name="t('harvester.host.detail.cpuManager')" :value="cpuManagerStatus" />
+        v-if="!value.isEtcd"
+        class="col span-6"
+      >
+        <LabelValue
+          :name="t('harvester.host.detail.cpuManager')"
+          :value="cpuManagerStatus"
+        />
       </div>
       <div class="col span-6">
-        <LabelValue :name="t('harvester.host.detail.consoleUrl')" :value="consoleUrl.value">
+        <LabelValue
-          <a slot="value" :href="consoleUrl.value" target="_blank">{{ consoleUrl.display }}</a>
+          :name="t('harvester.host.detail.consoleUrl')"
+          :value="consoleUrl.value"
+        >
+          <a
+            slot="value"
+            :href="consoleUrl.value"
+            target="_blank"
+          >{{ consoleUrl.display }}</a>
         </LabelValue>
       </div>
     </div>
@@ -288,15 +316,24 @@ export default {
     <h3>{{ t('harvester.host.detail.more') }}</h3>
     <div class="row mb-20">
       <div class="col span-4">
-        <LabelValue :name="t('harvester.host.detail.uuid')" :value="value.status.nodeInfo.systemUUID" />
+        <LabelValue
+          :name="t('harvester.host.detail.uuid')"
+          :value="value.status.nodeInfo.systemUUID"
+        />
       </div>
 
       <div class="col span-4">
-        <LabelValue :name="t('harvester.host.detail.kernel')" :value="value.status.nodeInfo.kernelVersion" />
+        <LabelValue
+          :name="t('harvester.host.detail.kernel')"
+          :value="value.status.nodeInfo.kernelVersion"
+        />
       </div>
 
       <div class="col span-4">
-        <LabelValue :name="t('harvester.host.detail.containerRuntime')" :value="value.status.nodeInfo.containerRuntimeVersion" />
+        <LabelValue
+          :name="t('harvester.host.detail.containerRuntime')"
+          :value="value.status.nodeInfo.containerRuntimeVersion"
+        />
       </div>
     </div>
     <div

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

@@ -10,7 +10,7 @@ import { LONGHORN_VERSION_V1 } from '@shell/config/types';
 
 export default {
   emits: ['update:value'],
-  
+
   components: {
     LabelValue,
     BadgeState,
@@ -44,7 +44,7 @@ export default {
   },
   computed: {
     targetDisk() {
-      return this.disks.find(disk => disk.name === this.value.name);
+      return this.disks.find((disk) => disk.name === this.value.name);
     },
     schedulableTooltipMessage() {
       const { name, path } = this.value;
@@ -124,7 +124,10 @@ export default {
 </script>
 
 <template>
-  <div class="disk" @update:value="update">
+  <div
+    class="disk"
+    @update:value="update"
+  >
     <Banner
       v-if="mountedMessage"
       color="error"
@@ -139,7 +142,10 @@ export default {
           >
             <template #value>
               <div class="mt-5">
-                <Tag v-for="(prop, key) in value.tags" :key="key">
+                <Tag
+                  v-for="(prop, key) in value.tags"
+                  :key="key"
+                >
                   {{ prop }}
                 </Tag>
               </div>
@@ -185,7 +191,10 @@ export default {
           </div>
         </div>
       </div>
-      <div v-if="!value.isNew" class="row mt-30">
+      <div
+        v-if="!value.isNew"
+        class="row mt-30"
+      >
         <div class="col span-4">
           <LabelValue
             :name="t('harvester.host.disk.storageAvailable.label')"
@@ -214,7 +223,10 @@ export default {
           :value="value.displayName"
         />
       </div>
-      <div v-if="value.path" class="col span-4">
+      <div
+        v-if="value.path"
+        class="col span-4"
+      >
         <LabelValue
           :name="t('harvester.host.disk.path.label')"
           :value="value.path"

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

@@ -37,7 +37,7 @@ export default {
     modeText() {
       const mode = this.ksmtuned.spec.mode;
 
-      return ksmtunedMode.find(M => M.value === mode).label;
+      return ksmtunedMode.find((M) => M.value === mode).label;
     },
 
     thresCoef() {
@@ -47,7 +47,7 @@ export default {
     runText() {
       const run = this.ksmtuned.spec.run;
 
-      return ksmtunedRunOption.find(M => M.value === run).label;
+      return ksmtunedRunOption.find((M) => M.value === run).label;
     },
 
     showRunInformation() {
@@ -77,20 +77,35 @@ export default {
       </h2>
       <div class="row mb-20">
         <div class="col span-4">
-          <LabelValue :name="t('harvester.host.ksmtuned.run')" :value="runText" />
+          <LabelValue
+            :name="t('harvester.host.ksmtuned.run')"
+            :value="runText"
+          />
         </div>
       </div>
 
-      <div v-if="showRunInformation" class="row mb-20">
+      <div
+        v-if="showRunInformation"
+        class="row mb-20"
+      >
         <div class="col span-4">
-          <LabelValue :name="t('harvester.host.ksmtuned.thresCoef')" :value="thresCoef" />
+          <LabelValue
+            :name="t('harvester.host.ksmtuned.thresCoef')"
+            :value="thresCoef"
+          />
         </div>
         <div class="col span-4">
-          <LabelValue :name="t('harvester.host.ksmtuned.mode')" :value="modeText" />
+          <LabelValue
+            :name="t('harvester.host.ksmtuned.mode')"
+            :value="modeText"
+          />
         </div>
 
         <div class="col span-4">
-          <LabelValue :name="t('harvester.host.ksmtuned.enableMergeNodes')" :value="mergeNodesText" />
+          <LabelValue
+            :name="t('harvester.host.ksmtuned.enableMergeNodes')"
+            :value="mergeNodesText"
+          />
         </div>
       </div>
 
@@ -100,31 +115,51 @@ export default {
         <h3>{{ t('harvester.host.ksmtuned.parameters.title') }}</h3>
         <div class="row mb-20">
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.parameters.boost')" :value="ksmtuned.spec.ksmtunedParameters.boost" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.parameters.boost')"
+              :value="ksmtuned.spec.ksmtunedParameters.boost"
+            />
           </div>
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.parameters.decay')" :value="ksmtuned.spec.ksmtunedParameters.decay" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.parameters.decay')"
+              :value="ksmtuned.spec.ksmtunedParameters.decay"
+            />
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.parameters.sleepMsec')" :value="ksmtuned.spec.ksmtunedParameters.sleepMsec" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.parameters.sleepMsec')"
+              :value="ksmtuned.spec.ksmtunedParameters.sleepMsec"
+            />
           </div>
         </div>
 
         <div class="row mb-20">
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.parameters.minPages')" :value="ksmtuned.spec.ksmtunedParameters.minPages" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.parameters.minPages')"
+              :value="ksmtuned.spec.ksmtunedParameters.minPages"
+            />
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.parameters.maxPages')" :value="ksmtuned.spec.ksmtunedParameters.maxPages" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.parameters.maxPages')"
+              :value="ksmtuned.spec.ksmtunedParameters.maxPages"
+            />
           </div>
         </div>
       </div>
 
       <div>
         <hr class="divider" />
-        <h3><t k="harvester.host.ksmtuned.statistics.title" :raw="true" /></h3>
+        <h3>
+          <t
+            k="harvester.host.ksmtuned.statistics.title"
+            :raw="true"
+          />
+        </h3>
         <div class="row mb-20">
           <div class="col span-4">
             <LabelValue :name="t('harvester.host.ksmtuned.ksmStatus')">
@@ -135,34 +170,55 @@ export default {
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.sharing')" :value="ksmtuned.status.sharing" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.sharing')"
+              :value="ksmtuned.status.sharing"
+            />
           </div>
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.shared')" :value="ksmtuned.status.shared" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.shared')"
+              :value="ksmtuned.status.shared"
+            />
           </div>
         </div>
 
         <div class="row mb-20">
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.unshared')" :value="ksmtuned.status.unshared" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.unshared')"
+              :value="ksmtuned.status.unshared"
+            />
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.volatile')" :value="ksmtuned.status.volatile" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.volatile')"
+              :value="ksmtuned.status.volatile"
+            />
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.fullScans')" :value="ksmtuned.status.fullScans" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.fullScans')"
+              :value="ksmtuned.status.fullScans"
+            />
           </div>
         </div>
 
         <div class="row mb-20">
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.stableNodeDups')" :value="ksmtuned.status.stableNodeDups" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.stableNodeDups')"
+              :value="ksmtuned.status.stableNodeDups"
+            />
           </div>
 
           <div class="col span-4">
-            <LabelValue :name="t('harvester.host.ksmtuned.statistics.stableNodeChains')" :value="ksmtuned.status.stableNodeChains" />
+            <LabelValue
+              :name="t('harvester.host.ksmtuned.statistics.stableNodeChains')"
+              :value="ksmtuned.status.stableNodeChains"
+            />
           </div>
         </div>
       </div>

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

@@ -57,7 +57,9 @@ export default {
   <div>
     <div v-if="inventory.warningMessages.length > 0">
       <Banner
-         v-for="(msg, i) in inventory.warningMessages" :key="i" color="error"
+        v-for="(msg, i) in inventory.warningMessages"
+        :key="i"
+        color="error"
         :label="msg.text"
       />
     </div>

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

@@ -94,7 +94,11 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else id="host-instances" class="row">
+  <div
+    v-else
+    id="host-instances"
+    class="row"
+  >
     <div class="col span-12">
       <SortableTable
         v-bind="$attrs"
@@ -102,11 +106,17 @@ export default {
         default-sort-by="age"
         :rows="rows"
         key-field="_key"
-        
       >
-        <template #cell:state="scope" class="state-col">
+        <template
+          #cell:state="scope"
+          class="state-col"
+        >
           <div class="state">
-            <HarvesterVmState class="vmstate" :row="scope.row" :all-cluster-network="allClusterNetwork" />
+            <HarvesterVmState
+              class="vmstate"
+              :row="scope.row"
+              :all-cluster-network="allClusterNetwork"
+            />
           </div>
         </template>
       </Sortabletable>

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

@@ -46,7 +46,7 @@ export default {
 
       const inStore = this.$store.getters['currentProduct'].inStore;
       const linkMonitors = this.$store.getters[`${ inStore }/all`](HCI.LINK_MONITOR);
-      const linkMonitor = (linkMonitors.filter(l => l.id === linkMonitorId) || [])[0] || {};
+      const linkMonitor = (linkMonitors.filter((l) => l.id === linkMonitorId) || [])[0] || {};
 
       return linkMonitor?.status?.linkStatus?.[nodeName] || [];
     },

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

@@ -93,7 +93,7 @@ export default {
     }
 
     const res = await allHash(hash);
-    const hostNetworkResource = (res.hostNetworks || []).find( O => this.value.id === O.attachNodeName);
+    const hostNetworkResource = (res.hostNetworks || []).find( (O) => this.value.id === O.attachNodeName);
 
     this.loadMetrics();
 
@@ -126,7 +126,7 @@ export default {
     this.newDisks = clone(disks);
 
     const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
-    const seeder = addons.find(addon => addon.id === 'harvester-system/harvester-seeder');
+    const seeder = addons.find((addon) => addon.id === 'harvester-system/harvester-seeder');
 
     const seederEnabled = seeder ? seeder?.spec?.enabled : false;
 
@@ -134,7 +134,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const inventories = this.$store.getters[`${ inStore }/all`](HCI.INVENTORY) || [];
 
-      const inventory = inventories.find(inv => inv.id === `harvester-system/${ this.value.id }`);
+      const inventory = inventories.find((inv) => inv.id === `harvester-system/${ this.value.id }`);
 
       if (inventory) {
         this.inventory = inventory;
@@ -222,14 +222,14 @@ export default {
       const nodeId = this.value.id;
       const vlanStatuses = this.$store.getters[`${ inStore }/all`](HCI.VLAN_STATUS);
 
-      return vlanStatuses.filter(s => s?.status?.node === nodeId) || [];
+      return vlanStatuses.filter((s) => s?.status?.node === nodeId) || [];
     },
 
     longhornNode() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const longhornNodes = this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
 
-      return longhornNodes.find(node => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
+      return longhornNodes.find((node) => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
     },
 
     events() {
@@ -275,7 +275,7 @@ export default {
     seederEnabled() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
-      const seeder = addons.find(addon => addon.id === 'harvester-system/harvester-seeder');
+      const seeder = addons.find((addon) => addon.id === 'harvester-system/harvester-seeder');
 
       return seeder ? seeder?.spec?.enabled : false;
     },
@@ -373,14 +373,24 @@ export default {
       :side-tabs="true"
       @changed="tabChange"
     >
-      <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="4" class="bordered-table">
+      <Tab
+        name="basics"
+        :label="t('harvester.host.tabs.basics')"
+        :weight="4"
+        class="bordered-table"
+      >
         <Basic
           :value="value"
           :metrics="metrics"
           :mode="mode"
         />
       </Tab>
-      <Tab name="instance" :label="t('harvester.host.tabs.instance')" :weight="3" class="bordered-table">
+      <Tab
+        name="instance"
+        :label="t('harvester.host.tabs.instance')"
+        :weight="3"
+        class="bordered-table"
+      >
         <Instance :node="value" />
       </Tab>
       <Tab
@@ -391,7 +401,9 @@ export default {
         class="bordered-table"
       >
         <InfoBox
-           v-for="(vlan, i) in vlanStatuses" :key="i" >
+          v-for="(vlan, i) in vlanStatuses"
+          :key="i"
+        >
           <VlanStatus
             :value="vlan"
             :mode="mode"
@@ -415,7 +427,10 @@ export default {
             >
               <template #value>
                 <div class="mt-5">
-                  <Tag v-for="(prop, key) in longhornNode.spec.tags" :key="key">
+                  <Tag
+                    v-for="(prop, key) in longhornNode.spec.tags"
+                    :key="key"
+                  >
                     {{ prop }}
                   </Tag>
                 </div>
@@ -447,7 +462,10 @@ export default {
         :show-header="false"
         :label="t('harvester.host.tabs.ksmtuned')"
       >
-        <HarvesterKsmtuned :mode="mode" :node="value" />
+        <HarvesterKsmtuned
+          :mode="mode"
+          :node="value"
+        />
       </Tab>
 
       <Tab

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

@@ -84,14 +84,14 @@ export default {
     },
 
     hasBackupProgresses() {
-      return !!this.rows.find(R => R.status?.progress !== undefined);
+      return !!this.rows.find((R) => R.status?.progress !== undefined);
     },
 
     filteredRows() {
-      let r = this.rows.filter(row => row.spec?.type === BACKUP_TYPE.BACKUP);
+      let r = this.rows.filter((row) => row.spec?.type === BACKUP_TYPE.BACKUP);
 
       if (this.id) {
-        r = r.filter(backup => backup.metadata.annotations?.[HCI_ANNOTATIONS.SVM_BACKUP_ID] === this.id);
+        r = r.filter((backup) => backup.metadata.annotations?.[HCI_ANNOTATIONS.SVM_BACKUP_ID] === this.id);
       }
 
       return r;

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

@@ -56,10 +56,10 @@ export default {
     },
 
     filteredRows() {
-      let r = this.rows.filter(row => row.spec?.type === BACKUP_TYPE.SNAPSHOT);
+      let r = this.rows.filter((row) => row.spec?.type === BACKUP_TYPE.SNAPSHOT);
 
       if (this.id) {
-        r = r.filter(row => row.metadata.annotations?.[HCI_ANNOTATIONS.SVM_BACKUP_ID] === this.id);
+        r = r.filter((row) => row.metadata.annotations?.[HCI_ANNOTATIONS.SVM_BACKUP_ID] === this.id);
       }
 
       return r;

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

@@ -47,7 +47,11 @@ export default {
 </script>
 
 <template>
-  <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+  <Tabbed
+    v-bind="$attrs"
+    class="mt-15"
+    :side-tabs="true"
+  >
     <Tab
       name="basic"
       :label="t('harvester.virtualMachine.detail.tabs.basics')"

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

@@ -19,7 +19,7 @@ const registryAddresses = [
 
 export default {
   emits: ['input'],
-  
+
   components: {
     ResourceTabs,
     DetailText,
@@ -161,10 +161,10 @@ export default {
 <template>
   <ResourceTabs
     :value="value"
-    @update:value="$emit('input', $event)"
     :need-events="false"
     :need-related="false"
     :mode="mode"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       name="data"
@@ -258,7 +258,9 @@ export default {
 
       <div v-else>
         <div
-          v-for="(row,idx) in parsedRows" :key="idx" class="entry"
+          v-for="(row,idx) in parsedRows"
+          :key="idx"
+          class="entry"
         >
           <DetailText
             :value="row.value"

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

@@ -69,7 +69,7 @@ export default {
     imageName() {
       const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
 
-      const image = imageList.find( I => this.imageId === I.id);
+      const image = imageList.find( (I) => this.imageId === I.id);
 
       return image?.spec?.displayName || '-';
     },
@@ -126,29 +126,52 @@ export default {
     :mode="mode"
     :apply-hooks="applyHooks"
   >
-    <Tabbed v-if="spec" :side-tabs="true" @changed="onTabChanged">
+    <Tabbed
-      <Tab name="Basics" :label="t('harvester.virtualMachine.detail.tabs.basics')">
+      v-if="spec"
+      :side-tabs="true"
+      @changed="onTabChanged"
+    >
+      <Tab
+        name="Basics"
+        :label="t('harvester.virtualMachine.detail.tabs.basics')"
+      >
         <div class="row">
           <div class="col span-6 mb-20">
-            <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="name" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.detail.details.name')"
+              :value="name"
+            />
           </div>
 
           <div class="col span-6 mb-20">
-            <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+            <LabelValue
+              :name="t('harvester.fields.image')"
+              :value="imageName"
+            />
           </div>
         </div>
 
         <div class="row">
           <div class="col span-6 mb-20">
-            <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.detail.details.hostname')"
+              :value="hostname"
+            />
           </div>
 
           <div class="col span-6 mb-20">
-            <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.input.MachineType')"
+              :value="machineType"
+            />
           </div>
         </div>
         <div class="mb-20">
-          <CpuMemory :cpu="cpu" :mode="mode" :memory="memory" />
+          <CpuMemory
+            :cpu="cpu"
+            :mode="mode"
+            :memory="memory"
+          />
         </div>
         <div class="row">
           <div class="col span-6 mb-20">
@@ -156,7 +179,10 @@ export default {
               <template #value>
                 <div>
                   <ul>
-                    <li  v-for="(disk, i) in disks" :key="i" >
+                    <li
+                      v-for="(disk, i) in disks"
+                      :key="i"
+                    >
                       {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
                     </li>
                   </ul>
@@ -169,7 +195,10 @@ export default {
               <template #value>
                 <div>
                   <ul v-if="cdroms.length > 0">
-                    <li  v-for="(rom, i) in cdroms" :key="i" >
+                    <li
+                      v-for="(rom, i) in cdroms"
+                      :key="i"
+                    >
                       {{ rom.name }}
                     </li>
                   </ul>
@@ -187,7 +216,10 @@ export default {
         :label="t('harvester.tab.volume')"
         :weight="-1"
       >
-        <Volume v-model:value="diskRows" :mode="mode" />
+        <Volume
+          v-model:value="diskRows"
+          :mode="mode"
+        />
       </Tab>
 
       <Tab
@@ -195,11 +227,22 @@ export default {
         :label="t('harvester.tab.network')"
         :weight="-2"
       >
-        <Network v-model:value="networkRows" :mode="mode" />
+        <Network
+          v-model:value="networkRows"
+          :mode="mode"
+        />
       </Tab>
 
-      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="-3">
+      <Tab
-        <OverviewKeypairs v-if="vm" v-model:value="vm" />
+        name="keypairs"
+        :label="t('harvester.virtualMachine.detail.tabs.keypairs')"
+        class="bordered-table"
+        :weight="-3"
+      >
+        <OverviewKeypairs
+          v-if="vm"
+          v-model:value="vm"
+        />
       </Tab>
 
       <Tab
@@ -215,7 +258,13 @@ export default {
         />
 
         <div class="spacer"></div>
-        <Checkbox v-model:value="installUSBTablet" :mode="mode" class="check" type="checkbox" :label="t('harvester.virtualMachine.enableUsb')" />
+        <Checkbox
+          v-model:value="installUSBTablet"
+          :mode="mode"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.enableUsb')"
+        />
       </Tab>
     </Tabbed>
   </CruResource>

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

@@ -75,7 +75,7 @@ export default {
       if (sourceImageNamespace && sourceImageName) {
         const imageId = `${ sourceImageNamespace }/${ sourceImageName }`;
 
-        return this.images.find(image => image.id === imageId);
+        return this.images.find((image) => image.id === imageId);
       }
 
       return null;
@@ -105,7 +105,7 @@ export default {
       return this.value.encryptionSecret;
     },
     secretLink() {
-      return this.secrets.find(sc => sc.id === this.value.encryptionSecret)?.detailLocation;
+      return this.secrets.find((sc) => sc.id === this.value.encryptionSecret)?.detailLocation;
     },
 
     isEncryptedString() {
@@ -120,7 +120,11 @@ export default {
 </script>
 
 <template>
-  <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+  <Tabbed
+    v-bind="$attrs"
+    class="mt-15"
+    :side-tabs="true"
+  >
     <Tab
       name="detail"
       :label="t('harvester.virtualMachine.detail.tabs.basics')"
@@ -155,63 +159,100 @@ export default {
 
       <div class="row">
         <div class="col span-12">
-          <LabelValue :name="t('harvester.image.size')" :value="formattedValue" class="mb-20" />
+          <LabelValue
+            :name="t('harvester.image.size')"
+            :value="formattedValue"
+            class="mb-20"
+          />
         </div>
       </div>
 
       <div class="row">
         <div class="col span-12">
-          <LabelValue :name="t('harvester.image.virtualSize')" :value="virtualSize" class="mb-20" />
+          <LabelValue
+            :name="t('harvester.image.virtualSize')"
+            :value="virtualSize"
+            class="mb-20"
+          />
         </div>
       </div>
 
       <div class="row">
         <div class="col span-12">
-          <LabelValue :name="t('nameNsDescription.description.label')" :value="description" class="mb-20" />
+          <LabelValue
+            :name="t('nameNsDescription.description.label')"
+            :value="description"
+            class="mb-20"
+          />
         </div>
       </div>
 
       <div class="row">
         <div class="col span-12">
-          <LabelValue :name="t('harvester.image.isEncryption')" :value="isEncryptedString" class="mb-20" />
+          <LabelValue
+            :name="t('harvester.image.isEncryption')"
+            :value="isEncryptedString"
+            class="mb-20"
+          />
         </div>
       </div>
 
-      <div v-if="value.isEncrypted" class="row mb-20">
+      <div
+        v-if="value.isEncrypted"
+        class="row mb-20"
+      >
         <div class="col span-12">
           <div class="text-label">
             {{ t('harvester.image.encryptionSecret') }}
           </div>
-          <router-link v-if="encryptionSecret && secretLink" :to="secretLink">
+          <router-link
+            v-if="encryptionSecret && secretLink"
+            :to="secretLink"
+          >
             {{ encryptionSecret }}
           </router-link>
           <span v-else-if="encryptionSecret">
             {{ encryptionSecret }}
           </span>
-          <span v-else class="text-muted">
+          <span
+            v-else
+            class="text-muted"
+          >
             &mdash;
           </span>
         </div>
       </div>
 
-      <div v-if="isEncryptedOrDecrypted" class="row mb-20">
+      <div
+        v-if="isEncryptedOrDecrypted"
+        class="row mb-20"
+      >
         <div class="col span-12">
           <div class="text-label">
             {{ t('harvester.image.sourceImage') }}
           </div>
-          <router-link v-if="sourceImageId && sourceImageLink" :to="sourceImageLink">
+          <router-link
+            v-if="sourceImageId && sourceImageLink"
+            :to="sourceImageLink"
+          >
             {{ sourceImageId }}
           </router-link>
           <span v-else-if="sourceImageId">
             {{ sourceImageId }}
           </span>
-          <span v-else class="text-muted">
+          <span
+            v-else
+            class="text-muted"
+          >
             &mdash;
           </span>
         </div>
       </div>
 
-      <div v-if="errorMessage !== '-'" class="row">
+      <div
+        v-if="errorMessage !== '-'"
+        class="row"
+      >
         <div class="col span-12">
           <div>
             {{ t('tableHeaders.message') }}

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

@@ -69,7 +69,7 @@ export default {
     imageName() {
       const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
 
-      const image = imageList.find( I => this.imageId === I.id);
+      const image = imageList.find( (I) => this.imageId === I.id);
 
       return image?.spec?.displayName || '-';
     },
@@ -126,29 +126,52 @@ export default {
     :mode="mode"
     :apply-hooks="applyHooks"
   >
-    <Tabbed v-if="spec" :side-tabs="true" @changed="onTabChanged">
+    <Tabbed
-      <Tab name="Basics" :label="t('harvester.virtualMachine.detail.tabs.basics')">
+      v-if="spec"
+      :side-tabs="true"
+      @changed="onTabChanged"
+    >
+      <Tab
+        name="Basics"
+        :label="t('harvester.virtualMachine.detail.tabs.basics')"
+      >
         <div class="row mb-10">
           <div class="col span-6">
-            <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="name" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.detail.details.name')"
+              :value="name"
+            />
           </div>
 
           <div class="col span-6">
-            <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+            <LabelValue
+              :name="t('harvester.fields.image')"
+              :value="imageName"
+            />
           </div>
         </div>
 
         <div class="row mb-10">
           <div class="col span-6">
-            <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.detail.details.hostname')"
+              :value="hostname"
+            />
           </div>
 
           <div class="col span-6">
-            <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+            <LabelValue
+              :name="t('harvester.virtualMachine.input.MachineType')"
+              :value="machineType"
+            />
           </div>
         </div>
 
-        <CpuMemory :cpu="cpu" :mode="mode" :memory="memory" />
+        <CpuMemory
+          :cpu="cpu"
+          :mode="mode"
+          :memory="memory"
+        />
 
         <div class="row mb-10">
           <div class="col span-6">
@@ -156,7 +179,10 @@ export default {
               <template #value>
                 <div>
                   <ul>
-                    <li  v-for="(disk, i) in disks" :key="i" >
+                    <li
+                      v-for="(disk, i) in disks"
+                      :key="i"
+                    >
                       {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
                     </li>
                   </ul>
@@ -169,7 +195,10 @@ export default {
               <template #value>
                 <div>
                   <ul v-if="cdroms.length > 0">
-                    <li  v-for="(rom, i) in cdroms" :key="i" >
+                    <li
+                      v-for="(rom, i) in cdroms"
+                      :key="i"
+                    >
                       {{ rom.name }}
                     </li>
                   </ul>
@@ -188,7 +217,10 @@ export default {
         :label="t('harvester.tab.volume')"
         :weight="-1"
       >
-        <Volume v-model:value="diskRows" :mode="mode" />
+        <Volume
+          v-model:value="diskRows"
+          :mode="mode"
+        />
       </Tab>
 
       <Tab
@@ -196,11 +228,22 @@ export default {
         :label="t('harvester.tab.network')"
         :weight="-2"
       >
-        <Network v-model:value="networkRows" :mode="mode" />
+        <Network
+          v-model:value="networkRows"
+          :mode="mode"
+        />
       </Tab>
 
-      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="-3">
+      <Tab
-        <OverviewKeypairs v-if="vm" v-model:value="vm" />
+        name="keypairs"
+        :label="t('harvester.virtualMachine.detail.tabs.keypairs')"
+        class="bordered-table"
+        :weight="-3"
+      >
+        <OverviewKeypairs
+          v-if="vm"
+          v-model:value="vm"
+        />
       </Tab>
 
       <Tab
@@ -216,7 +259,13 @@ export default {
         />
 
         <div class="spacer"></div>
-        <Checkbox v-model:value="installUSBTablet" :mode="mode" class="check" type="checkbox" :label="t('harvester.virtualMachine.enableUsb')" />
+        <Checkbox
+          v-model:value="installUSBTablet"
+          :mode="mode"
+          class="check"
+          type="checkbox"
+          :label="t('harvester.virtualMachine.enableUsb')"
+        />
       </Tab>
     </Tabbed>
   </CruResource>

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

@@ -63,7 +63,7 @@ export default {
 
     imageName() {
       const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
-      const image = imageList.find( I => this.value.rootImageId === I.id);
+      const image = imageList.find( (I) => this.value.rootImageId === I.id);
 
       return image?.spec?.displayName || 'N/A';
     },
@@ -134,11 +134,17 @@ export default {
 
 <template>
   <div>
-    <VMConsoleBar :resourceType="value" class="consoleBut" />
+    <VMConsoleBar
+      :resource-type="value"
+      class="consoleBut"
+    />
     <div class="overview-basics">
       <div class="row">
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="value.nameDisplay">
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.name')"
+            :value="value.nameDisplay"
+          >
             <template #value>
               <div class="smart-row">
                 <div class="console">
@@ -149,13 +155,19 @@ export default {
           </LabelValue>
         </div>
         <div class="col span-6">
-          <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+          <LabelValue
+            :name="t('harvester.fields.image')"
+            :value="imageName"
+          />
         </div>
       </div>
 
       <div class="row">
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname">
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.hostname')"
+            :value="hostname"
+          >
             <template #value>
               <div>
                 {{ hostname }}
@@ -165,7 +177,10 @@ export default {
         </div>
 
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.node')" :value="node">
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.node')"
+            :value="node"
+          >
             <template #value>
               <div>
                 {{ node }}
@@ -179,13 +194,19 @@ export default {
         <div class="col span-6">
           <LabelValue :name="t('harvester.virtualMachine.detail.details.ipAddress')">
             <template #value>
-              <HarvesterIpAddress v-model:value="value.id" :row="value" />
+              <HarvesterIpAddress
+                v-model:value="value.id"
+                :row="value"
+              />
             </template>
           </LabelValue>
         </div>
 
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.created')" :value="creationTimestamp" />
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.created')"
+            :value="creationTimestamp"
+          />
         </div>
       </div>
 
@@ -195,10 +216,17 @@ export default {
 
       <div class="row">
         <div class="col span-6">
-          <InputOrDisplay :name="t('harvester.virtualMachine.detail.details.bootOrder')" :value="disks" :mode="mode">
+          <InputOrDisplay
+            :name="t('harvester.virtualMachine.detail.details.bootOrder')"
+            :value="disks"
+            :mode="mode"
+          >
             <template #value>
               <ul>
-                <li  v-for="(disk, i) in disks" :key="i" >
+                <li
+                  v-for="(disk, i) in disks"
+                  :key="i"
+                >
                   {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
                 </li>
               </ul>
@@ -206,11 +234,18 @@ export default {
           </InputOrDisplay>
         </div>
         <div class="col span-6">
-          <InputOrDisplay :name="t('harvester.virtualMachine.detail.details.CDROMs')" :value="cdroms" :mode="mode">
+          <InputOrDisplay
+            :name="t('harvester.virtualMachine.detail.details.CDROMs')"
+            :value="cdroms"
+            :mode="mode"
+          >
             <template #value>
               <div>
                 <ul v-if="cdroms.length > 0">
-                  <li  v-for="(rom, i) in cdroms" :key="i" >
+                  <li
+                    v-for="(rom, i) in cdroms"
+                    :key="i"
+                  >
                     {{ rom.name }}
                   </li>
                 </ul>
@@ -224,17 +259,29 @@ export default {
       </div>
       <div class="row">
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.operatingSystem')" :value="operatingSystem" />
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.operatingSystem')"
+            :value="operatingSystem"
+          />
         </div>
-        <LabelValue :name="t('harvester.virtualMachine.detail.details.flavor')" :value="flavor" />
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.flavor')"
+          :value="flavor"
+        />
       </div>
       <div class="row">
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.detail.details.kernelRelease')" :value="kernelRelease" />
+          <LabelValue
+            :name="t('harvester.virtualMachine.detail.details.kernelRelease')"
+            :value="kernelRelease"
+          />
         </div>
 
         <div class="col span-6">
-          <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+          <LabelValue
+            :name="t('harvester.virtualMachine.input.MachineType')"
+            :value="machineType"
+          />
         </div>
       </div>
     </div>

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

@@ -42,7 +42,7 @@ export default {
     },
 
     isShow(id = '') {
-      const ssh = this.sshKeys.find(O => O?.data?.id === id) || {};
+      const ssh = this.sshKeys.find((O) => O?.data?.id === id) || {};
 
       return ssh.showKey || false;
     }
@@ -66,18 +66,31 @@ export default {
 
 <template>
   <div class="overview-sshKeys">
-    <div v-for="(ssh, index) in sshKeys" :key="index">
+    <div
+      v-for="(ssh, index) in sshKeys"
+      :key="index"
+    >
       <div class="col span-4">
         {{ ssh.id }}
       </div>
       <div class="col span-7 offset-1">
-        <div v-if="ssh.showKey" class="key-display">
+        <div
+          v-if="ssh.showKey"
+          class="key-display"
+        >
           {{ ssh.publicKey }}
-          <button class="btn btn-sm role-link hide-bar" @click="toggleShow(index)">
+          <button
+            class="btn btn-sm role-link hide-bar"
+            @click="toggleShow(index)"
+          >
             <i class="icon icon-x"></i>
           </button>
         </div>
-        <button v-else class="btn btn-sm role-link" @click="toggleShow(index)">
+        <button
+          v-else
+          class="btn btn-sm role-link"
+          @click="toggleShow(index)"
+        >
           *******<i class="icons icon-show"></i>
         </button>
       </div>

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

@@ -60,19 +60,31 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabelValue :name="t('harvester.virtualMachine.detail.details.sourceNode')" :value="sourceNode" />
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.sourceNode')"
+          :value="sourceNode"
+        />
       </div>
       <div class="col span-6">
-        <LabelValue :name="t('harvester.virtualMachine.detail.details.targetNode')" :value="targetNode" />
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.targetNode')"
+          :value="targetNode"
+        />
       </div>
     </div>
 
     <div class="row mb-20">
       <div class="col span-6">
-        <LabelValue :name="t('harvester.virtualMachine.detail.details.started')" :value="started" />
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.started')"
+          :value="started"
+        />
       </div>
       <div class="col span-6">
-        <LabelValue :name="t('harvester.virtualMachine.detail.details.ended')" :value="ended" />
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.ended')"
+          :value="ended"
+        />
       </div>
     </div>
   </div>

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

@@ -139,7 +139,7 @@ export default {
 
         const involvedName = e?.involvedObject?.name;
 
-        const matchPVC = pvcName.find(name => name === involvedName);
+        const matchPVC = pvcName.find((name) => name === involvedName);
 
         return (involvedName === name || involvedName === podName || matchPVC) && e.firstTimestamp >= creationTimestamp;
       }).sort((a, b) => {
@@ -182,12 +182,31 @@ export default {
 
 <template>
   <div>
-    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true" @changed="onTabChanged">
+    <Tabbed
-      <Tab name="basics" :label="t('harvester.virtualMachine.detail.tabs.basics')" class="bordered-table" :weight="7">
+      v-bind="$attrs"
-        <OverviewBasics :value="value" :vmi="vmi" mode="view" />
+      class="mt-15"
+      :side-tabs="true"
+      @changed="onTabChanged"
+    >
+      <Tab
+        name="basics"
+        :label="t('harvester.virtualMachine.detail.tabs.basics')"
+        class="bordered-table"
+        :weight="7"
+      >
+        <OverviewBasics
+          :value="value"
+          :vmi="vmi"
+          mode="view"
+        />
       </Tab>
 
-      <Tab name="disks" :label="t('harvester.tab.volume')" class="bordered-table" :weight="6">
+      <Tab
+        name="disks"
+        :label="t('harvester.tab.volume')"
+        class="bordered-table"
+        :weight="6"
+      >
         <Volume
           v-model:value="diskRows"
           mode="view"
@@ -197,15 +216,33 @@ export default {
         />
       </Tab>
 
-      <Tab name="networks" :label="t('harvester.virtualMachine.detail.tabs.networks')" class="bordered-table" :weight="5">
+      <Tab
-        <Network v-model:value="networkRows" mode="view" />
+        name="networks"
+        :label="t('harvester.virtualMachine.detail.tabs.networks')"
+        class="bordered-table"
+        :weight="5"
+      >
+        <Network
+          v-model:value="networkRows"
+          mode="view"
+        />
       </Tab>
 
-      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="4">
+      <Tab
+        name="keypairs"
+        :label="t('harvester.virtualMachine.detail.tabs.keypairs')"
+        class="bordered-table"
+        :weight="4"
+      >
         <OverviewKeypairs :value="value" />
       </Tab>
 
-      <Tab v-if="hasResourceQuotaSchema" name="quotas" :label="t('harvester.tab.quotas')" :weight="3">
+      <Tab
+        v-if="hasResourceQuotaSchema"
+        name="quotas"
+        :label="t('harvester.tab.quotas')"
+        :weight="3"
+      >
         <LabelValue
           :name="t('harvester.snapshot.totalSnapshotSize')"
           :value="totalSnapshotSize"
@@ -229,13 +266,27 @@ export default {
         </template>
       </Tab>
 
-      <Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="2.4">
+      <Tab
+        name="nodeScheduling"
+        :label="t('workload.container.titles.nodeScheduling')"
+        :weight="2.4"
+      >
         <template #default="{active}">
-          <NodeScheduling v-if="spec" :key="active" :mode="mode" :value="spec.template.spec" :nodes="nodesIdOptions" />
+          <NodeScheduling
+            v-if="spec"
+            :key="active"
+            :mode="mode"
+            :value="spec.template.spec"
+            :nodes="nodesIdOptions"
+          />
         </template>
       </Tab>
 
-      <Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="2.3">
+      <Tab
+        :label="t('harvester.tab.vmScheduling')"
+        name="vmScheduling"
+        :weight="2.3"
+      >
         <template #default="{active}">
           <PodAffinity
             v-if="spec"
@@ -250,11 +301,25 @@ export default {
         </template>
       </Tab>
 
-      <Tab :label="t('harvester.tab.accessCredentials')" class="bordered-table" name="accessCredentials" :weight="2.2">
+      <Tab
-        <AccessCredentials mode="view" :value="accessCredentials" :resourceType="value" />
+        :label="t('harvester.tab.accessCredentials')"
+        class="bordered-table"
+        name="accessCredentials"
+        :weight="2.2"
+      >
+        <AccessCredentials
+          mode="view"
+          :value="accessCredentials"
+          :resource-type="value"
+        />
       </Tab>
 
-      <Tab name="cloudConfig" :label="t('harvester.virtualMachine.detail.tabs.cloudConfig')" class="bordered-table" :weight="2">
+      <Tab
+        name="cloudConfig"
+        :label="t('harvester.virtualMachine.detail.tabs.cloudConfig')"
+        class="bordered-table"
+        :weight="2"
+      >
         <CloudConfig
           ref="yamlEditor"
           mode="view"
@@ -263,12 +328,25 @@ export default {
         />
       </Tab>
 
-      <Tab name="event" :label="t('harvester.virtualMachine.detail.tabs.events')" :weight="1">
+      <Tab
-        <Events :resource="vmi" :events="events" />
+        name="event"
+        :label="t('harvester.virtualMachine.detail.tabs.events')"
+        :weight="1"
+      >
+        <Events
+          :resource="vmi"
+          :events="events"
+        />
       </Tab>
 
-      <Tab name="migration" :label="t('harvester.virtualMachine.detail.tabs.migration')">
+      <Tab
-        <Migration :value="value" :vmi-resource="vmi" />
+        name="migration"
+        :label="t('harvester.virtualMachine.detail.tabs.migration')"
+      >
+        <Migration
+          :value="value"
+          :vmi-resource="vmi"
+        />
       </Tab>
 
       <Tab

pkg/harvester/detail/loadbalancer.harvesterhci.io.ippool.vue

@@ -8,7 +8,7 @@ import { NETWORK_HEADERS } from '@pkg/harvester/list/harvesterhci.io.networkatta
 
 export default {
   emits: ['input'],
-  
+
   components: {
     ResourceTabs,
     Tab,
@@ -37,7 +37,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const networks = this.$store.getters[`${ inStore }/all`](NETWORK_ATTACHMENT);
 
-      return networks.filter(n => n?.id === this.value?.spec?.selector?.network);
+      return networks.filter((n) => n?.id === this.value?.spec?.selector?.network);
     },
 
     networkHeaders() {
@@ -74,8 +74,8 @@ export default {
 <template>
   <ResourceTabs
     :value="value"
-    @update:value="$emit('input', $event)"
     :need-related="false"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       name="network"

pkg/harvester/detail/loadbalancer.harvesterhci.io.loadbalancer.vue

@@ -11,7 +11,7 @@ import { IP_POOL_HEADERS } from '../config/harvester-cluster';
 
 export default {
   emits: ['input'],
-  
+
   components: {
     ResourceTabs,
     Tab,
@@ -43,7 +43,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const ipPools = this.$store.getters[`${ inStore }/all`](HCI.IP_POOL);
 
-      return ipPools.filter(i => i.id === this.value.status.allocatedAddress.ipPool);
+      return ipPools.filter((i) => i.id === this.value.status.allocatedAddress.ipPool);
     },
 
     ipPoolHeaders() {
@@ -86,7 +86,7 @@ export default {
     },
 
     backendServerSelectors() {
-      return Object.keys(this.value.spec?.backendServerSelector || {}).map(key => ({
+      return Object.keys(this.value.spec?.backendServerSelector || {}).map((key) => ({
         key,
         value: this.value.spec.backendServerSelector[key],
       }));
@@ -105,12 +105,12 @@ export default {
     vmHeaders() {
       const filterNames = ['state', 'ip', 'node'];
 
-      return VM_HEADERS.filter(h => !filterNames.includes(h.name));
+      return VM_HEADERS.filter((h) => !filterNames.includes(h.name));
     },
 
     vms() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const vms = this.$store.getters[`${ inStore }/all`](HCI.VM).filter(vm => vm.metadata.namespace === this.value.metadata.namespace);
+      const vms = this.$store.getters[`${ inStore }/all`](HCI.VM).filter((vm) => vm.metadata.namespace === this.value.metadata.namespace);
       const match = matching(vms, this.value?.spec?.backendServerSelector, 'spec.template.metadata.labels');
 
       return match;
@@ -122,8 +122,8 @@ export default {
 <template>
   <ResourceTabs
     :value="value"
-    @update:value="$emit('input', $event)"
     :need-related="false"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       v-if="value.spec.ipam === 'pool'"

pkg/harvester/detail/network.harvesterhci.io.vlanconfig.vue

@@ -12,7 +12,7 @@ import { HCI } from '@pkg/harvester/config/labels-annotations';
 
 export default {
   emits: ['input'],
-  
+
   components: {
     ResourceTabs,
     Tab,
@@ -64,7 +64,7 @@ export default {
       if (!isEmpty(selector)) {
         return matching(nodes, selector);
       } else if (matchedNodes && matchedNodes.length > 0) {
-        return nodes.filter(node => matchedNodes.includes(node.id));
+        return nodes.filter((node) => matchedNodes.includes(node.id));
       } else {
         return nodes;
       }
@@ -76,8 +76,8 @@ export default {
 <template>
   <ResourceTabs
     :value="value"
-    @update:value="$emit('input', $event)"
     :need-related="false"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       name="node"

pkg/harvester/dialog/CloneVmDialog.vue

@@ -93,7 +93,11 @@ export default {
     </template>
 
     <template #body>
-      <Checkbox v-model:value="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+      <Checkbox
+        v-model:value="cloneData"
+        class="mb-10"
+        label-key="harvester.modal.cloneVM.type"
+      />
 
       <LabeledInput
         v-show="cloneData"
@@ -104,9 +108,15 @@ export default {
       />
     </template>
 
-    <template #actions class="actions">
+    <template
+      #actions
+      class="actions"
+    >
       <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
 
@@ -118,7 +128,10 @@ export default {
         />
       </div>
 
-      <Banner v-for="(err, i) in errors" :key="i"/>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -47,7 +47,7 @@ export default {
     },
 
     names() {
-      return this.resources.map(obj => obj.nameDisplay).slice(0, 5);
+      return this.resources.map((obj) => obj.nameDisplay).slice(0, 5);
     },
 
     resourceNames() {
@@ -131,7 +131,10 @@ export default {
 </script>
 
 <template>
-  <Card class="prompt-related" :show-highlight-border="false">
+  <Card
+    class="prompt-related"
+    :show-highlight-border="false"
+  >
     <template #title>
       <h4 class="text-default-text">
         {{ t('promptRemove.title') }}
@@ -152,19 +155,34 @@ export default {
         <div class="mb-10">
           <CopyToClipboardText :text="nameToMatch" />
         </div>
-        <input id="confirm" v-model="confirmName" type="text" />
+        <input
+          id="confirm"
+          v-model="confirmName"
+          type="text"
+        />
         <div class="text-info mt-20">
           {{ protip }}
         </div>
-        <Banner v-for="(error, i) in errors" :key="i"/>
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
 
     <template #actions>
-      <button class="btn role-secondary mr-10" @click="close">
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
+      >
         {{ t('generic.cancel') }}
       </button>
-      <AsyncButton mode="delete" class="btn bg-error ml-10" :disabled="deleteDisabled" @click="remove" />
+      <AsyncButton
+        mode="delete"
+        class="btn bg-error ml-10"
+        :disabled="deleteDisabled"
+        @click="remove"
+      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/DeepCloneVmDialog.vue

@@ -93,7 +93,11 @@ export default {
     </template>
 
     <template #body>
-      <Checkbox v-model:value="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+      <Checkbox
+        v-model:value="cloneData"
+        class="mb-10"
+        label-key="harvester.modal.cloneVM.type"
+      />
 
       <LabeledInput
         v-show="cloneData"
@@ -107,7 +111,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -119,7 +126,12 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/EnablePciPassthrough.vue

@@ -99,11 +99,17 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
-          <AsyncButton mode="enable" @click="save" />
+          <AsyncButton
+            mode="enable"
+            @click="save"
+          />
         </div>
       </div>
     </template>

pkg/harvester/dialog/EnableSriovDevice.vue

@@ -86,11 +86,17 @@ export default {
 
     <template #actions>
       <div class="buttons actions">
-        <button class="btn role-secondary mr-10" @click="close">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
 
-        <AsyncButton mode="enable" @click="save" />
+        <AsyncButton
+          mode="enable"
+          @click="save"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/EnableUSBPassthrough.vue

@@ -99,11 +99,17 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
-          <AsyncButton mode="enable" @click="save" />
+          <AsyncButton
+            mode="enable"
+            @click="save"
+          />
         </div>
       </div>
     </template>

pkg/harvester/dialog/EnableVGpuDevice.vue

@@ -83,11 +83,18 @@ export default {
 
     <template #actions>
       <div class="buttons actions">
-        <button class="btn role-secondary mr-10" @click="close">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
 
-        <AsyncButton mode="edit" :disabled="!type" @click="save" />
+        <AsyncButton
+          mode="edit"
+          :disabled="!type"
+          @click="save"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterAddHotplugModal.vue

@@ -43,7 +43,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
 
     PVCs() {
-      return this.allPVCs.filter(P => this.actionResource.metadata.namespace === P.metadata.namespace) || [];
+      return this.allPVCs.filter((P) => this.actionResource.metadata.namespace === P.metadata.namespace) || [];
     },
 
     actionResource() {
@@ -111,7 +111,11 @@ export default {
 </script>
 
 <template>
-  <Card ref="modal" name="modal" :show-highlight-border="false">
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
     <template #title>
       <h4
         v-clean-html="t('harvester.modal.hotplug.title')"
@@ -138,7 +142,11 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button type="button" class="btn role-secondary mr-10" @click="close">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -149,7 +157,10 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterBackupModal.vue

@@ -98,20 +98,36 @@ export default {
     </template>
 
     <template #body>
-      <LabeledInput v-model:value="backUpName" :label="t('generic.name')" required />
+      <LabeledInput
+        v-model:value="backUpName"
+        :label="t('generic.name')"
+        required
+      />
     </template>
 
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
-          <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+          <AsyncButton
+            mode="create"
+            :disabled="!backUpName"
+            @click="save"
+          />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterCloneTemplate.vue

@@ -103,7 +103,11 @@ export default {
     </template>
 
     <template #body>
-      <Checkbox v-model:value="withData" class="mb-10" label="With Data" />
+      <Checkbox
+        v-model:value="withData"
+        class="mb-10"
+        label="With Data"
+      />
 
       <LabeledInput
         v-model:value="templateName"
@@ -121,7 +125,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -132,7 +139,10 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue

@@ -118,7 +118,9 @@ export default {
 
       <div>
         <Checkbox
-           v-for="(disk, i) in allDisk" :key="i" v-model:value="disk.value"
+          v-for="(disk, i) in allDisk"
+          :key="i"
+          v-model:value="disk.value"
           :label="disk.name"
         />
       </div>
@@ -131,7 +133,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -143,7 +148,12 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterExportImageDialog.vue

@@ -34,7 +34,7 @@ export default {
 
     await allHash(hash);
 
-    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
 
     this['storageClassName'] = defaultStorage?.metadata?.name || 'longhorn';
   },
@@ -58,7 +58,7 @@ export default {
     },
 
     namespaces() {
-      const choices = this.$store.getters['harvester/all'](NAMESPACE).filter( N => !N.isSystem);
+      const choices = this.$store.getters['harvester/all'](NAMESPACE).filter( (N) => !N.isSystem);
 
       const out = sortBy(
         choices.map((obj) => {
@@ -81,7 +81,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
-      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+      const out = storages.filter((s) => !s.parameters?.backingImage).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
         return {
@@ -169,7 +169,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -180,7 +183,10 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterMaintenanceDialog.vue

@@ -10,7 +10,7 @@ import { ucFirst } from '@shell/utils/string';
 
 export default {
   emits: ['close'],
-  
+
   components: {
     Card,
     Checkbox,
@@ -110,13 +110,29 @@ export default {
         />
       </div>
 
-      <Banner color="warning" :label="t('harvester.host.enableMaintenance.protip')" />
+      <Banner
+        color="warning"
+        :label="t('harvester.host.enableMaintenance.protip')"
+      />
 
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="ucFirst(err)" />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="ucFirst(err)"
+      />
 
-      <Banner v-if="!force" class="mt-0" color="warning" :labelKey="'harvester.host.enableMaintenance.shutDownVMs'" />
+      <Banner
+        v-if="!force"
+        class="mt-0"
+        color="warning"
+        :label-key="'harvester.host.enableMaintenance.shutDownVMs'"
+      />
 
-      <div v-for="(unhealthyVM, i) in unhealthyVMs" :key="i">
+      <div
+        v-for="(unhealthyVM, i) in unhealthyVMs"
+        :key="i"
+      >
         <Banner color="error mt-0 mb-5">
           <p>
             {{ ucFirst(unhealthyVM.message) }}
@@ -125,7 +141,9 @@ export default {
 
         <div class="vm-list mb-5">
           <BadgeState
-             v-for="(vm, k) in unhealthyVM.vms" :key="k" color="bg-error mb-5 mr-5"
+            v-for="(vm, k) in unhealthyVM.vms"
+            :key="k"
+            color="bg-error mb-5 mr-5"
             :label="vm"
           />
         </div>
@@ -135,7 +153,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 

pkg/harvester/dialog/HarvesterMigrationDialog.vue

@@ -13,7 +13,7 @@ import { HCI } from '../types';
 
 export default {
   emits: ['close'],
-  
+
   components: {
     AsyncButton, Banner, Card, LabeledSelect
   },
@@ -65,7 +65,7 @@ export default {
     vmi() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const vmiResources = this.$store.getters[`${ inStore }/all`](HCI.VMI);
-      const resource = vmiResources.find(VMI => VMI.id === this.actionResource?.id) || null;
+      const resource = vmiResources.find((VMI) => VMI.id === this.actionResource?.id) || null;
 
       return resource;
     },
@@ -150,7 +150,11 @@ export default {
     </template>
 
     <template #body>
-      <Banner v-if="actionResource?.isCpuPinning" color="warning" :label="cpuPinningAlertMessage" />
+      <Banner
+        v-if="actionResource?.isCpuPinning"
+        color="warning"
+        :label="cpuPinningAlertMessage"
+      />
       <LabeledSelect
         v-model:value="nodeName"
         :label="t('harvester.modal.migration.fields.nodeName.label')"
@@ -159,9 +163,15 @@ export default {
       />
     </template>
 
-    <template #actions class="actions">
+    <template
+      #actions
+      class="actions"
+    >
       <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
 
@@ -171,7 +181,12 @@ export default {
           @click="apply"
         />
       </div>
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
   </Card>
 </template>

pkg/harvester/dialog/HarvesterQuotaDialog.vue

@@ -100,12 +100,20 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton @click="save" />
         </div>
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterRestoreDialog.vue

@@ -141,7 +141,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -152,7 +155,10 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterSupportBundle.vue

@@ -157,7 +157,9 @@ export default {
         </div>
 
         <div
-          v-for="(err, idx) in errors" :key="idx">
+          v-for="(err, idx) in errors"
+          :key="idx"
+        >
           <Banner
             color="error"
             :label="stringify(err)"

pkg/harvester/dialog/HarvesterUnplugVolume.vue

@@ -80,7 +80,11 @@ export default {
 </script>
 
 <template>
-  <Card ref="modal" name="modal" :show-highlight-border="false">
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
     <template #title>
       <h4
         v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
@@ -91,7 +95,11 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button type="button" class="btn role-secondary mr-10" @click="close">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -104,7 +112,12 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue

@@ -121,21 +121,40 @@ export default {
     </template>
 
     <template #body>
-      <LabeledInput v-model:value="actionResource.metadata.namespace" :disabled="true" :label="t('generic.namespace')" />
+      <LabeledInput
-      <LabeledInput v-model:value="snapshotName" class="mt-20" :label="t('generic.name')" required />
+        v-model:value="actionResource.metadata.namespace"
+        :disabled="true"
+        :label="t('generic.namespace')"
+      />
+      <LabeledInput
+        v-model:value="snapshotName"
+        class="mt-20"
+        :label="t('generic.name')"
+        required
+      />
     </template>
 
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
-          <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+          <AsyncButton
+            mode="create"
+            :disabled="!snapshotName"
+            @click="save"
+          />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue

@@ -12,7 +12,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
   emits: ['close'],
-  
+
   components: {
     AsyncButton,
     Banner,
@@ -112,7 +112,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
 
@@ -123,7 +126,10 @@ export default {
           />
         </div>
 
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/MessageBox.vue

@@ -35,7 +35,11 @@ export default {
 </script>
 
 <template>
-  <Card ref="modal" name="modal" :show-highlight-border="false">
+  <Card
+    ref="modal"
+    name="modal"
+    :show-highlight-border="false"
+  >
     <template #title>
       <h4 class="text-default-text">
         {{ t('generic.tip') }}
@@ -49,7 +53,11 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button type="button" class="btn role-secondary mr-10" @click="ok">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="ok"
+          >
             {{ t('generic.ok') }}
           </button>
         </div>

pkg/harvester/dialog/RestartVMDialog.vue

@@ -8,7 +8,7 @@ import AppModal from '@shell/components/AppModal';
 
 export default {
   emits: ['close'],
-  
+
   components: {
     AppModal,
     Card,
@@ -75,7 +75,9 @@ export default {
       <template #actions>
         <div class="bottom">
           <Banner
-            v-for="(err, i) in errors" :key="i" color="error"
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
             :label="err"
           />
           <div class="buttons">

pkg/harvester/dialog/RestoreSnapshotDialog.vue

@@ -12,8 +12,8 @@ import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS } from '@shell/config/types';
 
 export default {
-  name:       'HarvesterRestoreSnapshotDialog',
+  name: 'HarvesterRestoreSnapshotDialog',
-  
+
   emits: ['close'],
 
   components: {
@@ -45,7 +45,7 @@ export default {
     await allHash(hash);
 
     if (this.showStorageClass) {
-      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
 
       const currentStorageName = this.resources[0].metadata?.annotations[HCI_ANNOTATIONS.STORAGE_CLASS];
 
@@ -66,7 +66,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
-      const out = storages.filter(s => !s.parameters?.backingImage).filter((s) => {
+      const out = storages.filter((s) => !s.parameters?.backingImage).filter((s) => {
         return s.provisioner === this.actionResource.metadata?.annotations[HCI_ANNOTATIONS.STORAGE_PROVISIONER];
       }).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
@@ -127,7 +127,6 @@ export default {
 </script>
 <template>
   <Card :show-highlight-border="false">
-
     <template #title>
       {{ t('harvester.modal.restoreSnapshot.title') }}
     </template>
@@ -151,7 +150,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
@@ -160,7 +162,10 @@ export default {
             @click="save"
           />
         </div>
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/SnapshotDialog.vue

@@ -6,7 +6,7 @@ import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 import { LabeledInput } from '@components/Form/LabeledInput';
 export default {
-  name:       'HarvesterSnapshotDialog',
+  name: 'HarvesterSnapshotDialog',
 
   emits: ['close'],
 
@@ -84,7 +84,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
@@ -93,7 +96,12 @@ export default {
             @click="save"
           />
         </div>
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </div>
     </template>
   </Card>

pkg/harvester/dialog/VolumeCloneDialog.vue

@@ -8,7 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
-  name:       'HarvesterPvcCloneDialog',
+  name: 'HarvesterPvcCloneDialog',
 
   emits: ['close'],
 
@@ -85,7 +85,11 @@ export default {
     </template>
 
     <template #body>
-      <Checkbox v-model:value="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
+      <Checkbox
+        v-model:value="cloneData"
+        class="mb-10"
+        label-key="harvester.modal.cloneVM.type"
+      />
 
       <LabeledInput
         v-show="cloneData"
@@ -99,7 +103,10 @@ export default {
     <template #actions>
       <div class="actions">
         <div class="buttons">
-          <button class="btn role-secondary mr-10" @click="close">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
@@ -108,7 +115,10 @@ export default {
             @click="save"
           />
         </div>
-        <Banner v-for="(err, i) in errors" :key="i"/>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+        />
       </div>
     </template>
   </Card>

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

@@ -97,7 +97,10 @@ export default {
       color="error"
       :label="t('harvester.addons.nvidiaDriverToolkit.parsingSpecError', null, { raw: true })"
     />
-    <Tabbed v-else :side-tabs="true">
+    <Tabbed
+      v-else
+      :side-tabs="true"
+    >
       <Tab
         name="basic"
         :label="t('harvester.addons.nvidiaDriverToolkit.titles.basic')"
@@ -113,7 +116,10 @@ export default {
           @update:value="toggleEnable"
         />
         <div v-if="value.spec.enabled">
-          <div v-if="valuesContentJson.image" class="row mb-15">
+          <div
+            v-if="valuesContentJson.image"
+            class="row mb-15"
+          >
             <div class="col span-6">
               <LabeledInput
                 v-model:value="valuesContentJson.image.repo"

pkg/harvester/edit/harvesterhci.io.addon/rancher-logging.vue

@@ -102,7 +102,12 @@ export default {
         :labels="[t('generic.enabled'), t('generic.disabled')]"
       />
     </Tab>
-    <Tab v-if="value.spec.enabled" name="fluentbit" :label="t('harvester.logging.configuration.section.fluentbit')" :weight="-1">
+    <Tab
+      v-if="value.spec.enabled"
+      name="fluentbit"
+      :label="t('harvester.logging.configuration.section.fluentbit')"
+      :weight="-1"
+    >
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput
@@ -140,7 +145,12 @@ export default {
         </div>
       </div>
     </Tab>
-    <Tab v-if="value.spec.enabled" name="fluentd" :label="t('harvester.logging.configuration.section.fluentd')" :weight="-1">
+    <Tab
+      v-if="value.spec.enabled"
+      name="fluentd"
+      :label="t('harvester.logging.configuration.section.fluentd')"
+      :weight="-1"
+    >
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput

pkg/harvester/edit/harvesterhci.io.addon/rancher-monitoring.vue

@@ -216,7 +216,12 @@ export default {
         :labels="[t('generic.enabled'), t('generic.disabled')]"
       />
     </Tab>
-    <Tab v-if="value.spec.enabled" name="prometheus" :label="t('harvester.setting.harvesterMonitoring.section.prometheus')" :weight="-1">
+    <Tab
+      v-if="value.spec.enabled"
+      name="prometheus"
+      :label="t('harvester.setting.harvesterMonitoring.section.prometheus')"
+      :weight="-1"
+    >
       <a
         v-clean-tooltip="!externalLinks.prometheus.enabled ? t('monitoring.overview.linkedList.na') : undefined"
         :disabled="!externalLinks.prometheus.enabled"
@@ -325,7 +330,12 @@ export default {
         </div>
       </div>
     </Tab>
-    <Tab v-if="value.spec.enabled" name="nodeExporter" :label="t('harvester.setting.harvesterMonitoring.section.prometheusNodeExporter')" :weight="-2">
+    <Tab
+      v-if="value.spec.enabled"
+      name="nodeExporter"
+      :label="t('harvester.setting.harvesterMonitoring.section.prometheusNodeExporter')"
+      :weight="-2"
+    >
       <div class="row mt-10">
         <div class="col span-6">
           <LabeledInput
@@ -363,7 +373,12 @@ export default {
         </div>
       </div>
     </Tab>
-    <Tab v-if="value.spec.enabled && valuesContentJson.grafana.resources" name="grafana" :label="t('harvester.setting.harvesterMonitoring.section.grafana')" :weight="-3">
+    <Tab
+      v-if="value.spec.enabled && valuesContentJson.grafana.resources"
+      name="grafana"
+      :label="t('harvester.setting.harvesterMonitoring.section.grafana')"
+      :weight="-3"
+    >
       <a
         v-clean-tooltip="!externalLinks.grafana.enabled ? t('monitoring.overview.linkedList.na') : undefined"
         :disabled="!externalLinks.grafana.enabled"
@@ -425,7 +440,12 @@ export default {
         </div>
       </div>
     </Tab>
-    <Tab v-if="value.spec.enabled" name="alertmanager" :label="t('harvester.setting.harvesterMonitoring.section.alertmanager')" :weight="-4">
+    <Tab
+      v-if="value.spec.enabled"
+      name="alertmanager"
+      :label="t('harvester.setting.harvesterMonitoring.section.alertmanager')"
+      :weight="-4"
+    >
       <RadioGroup
         v-model:value="valuesContentJson.alertmanager.enabled"
         class="mb-20"

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

@@ -86,7 +86,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
-      const out = storages.filter(s => !s.parameters?.backingImage).map((s) => {
+      const out = storages.filter((s) => !s.parameters?.backingImage).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
         return {
@@ -106,7 +106,7 @@ export default {
 
     setDefaultClassName() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find( s => s.isDefault);
+      const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find( (s) => s.isDefault);
 
       this.valuesContent.pvcClaim['storageClassName'] = this.valuesContent?.pvcClaim?.storageClassName || defaultStorage?.metadata?.name || 'longhorn';
 

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

@@ -83,13 +83,17 @@ export default {
   >
     <NameNsDescription
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
       :namespaced="true"
+      @update:value="$emit('update:value', $event)"
     />
 
     <Tabbed :side-tabs="true">
-      <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="1">
+      <Tab
+        name="basics"
+        :label="t('harvester.host.tabs.basics')"
+        :weight="1"
+      >
         <div class="mb-20">
           <LabeledSelect
             v-model:value="type"

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

@@ -1,6 +1,8 @@
 <script>
 import { allHash } from '@shell/utils/promise';
-import { CSI_DRIVER, LONGHORN, LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/config/types';
+import {
+  CSI_DRIVER, LONGHORN, LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2
+} from '@shell/config/types';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabelValue from '@shell/components/LabelValue';
 import { BadgeState } from '@components/BadgeState';
@@ -123,7 +125,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const lvmVolumeGroups = this.$store.getters[`${ inStore }/all`](HCI.LVM_VOLUME_GROUP) || [];
 
-      const out = lvmVolumeGroups.filter(group => group.spec.nodeName === this.node.name).map(g => g.spec.vgName);
+      const out = lvmVolumeGroups.filter((group) => group.spec.nodeName === this.node.name).map((g) => g.spec.vgName);
 
       out.unshift({
         label: this.t('harvester.host.disk.lvmVolumeGroup.create'),
@@ -134,7 +136,7 @@ export default {
     },
 
     targetDisk() {
-      return this.disks.find(disk => disk.name === this.value.name);
+      return this.disks.find((disk) => disk.name === this.value.name);
     },
 
     schedulableTooltipMessage() {
@@ -329,7 +331,10 @@ export default {
 </script>
 
 <template>
-  <div class="disk" @update:value="update">
+  <div
+    class="disk"
+    @update:value="update"
+  >
     <div class="mt-10" />
     <Banner
       v-if="mountedMessage && isProvisioned"
@@ -395,7 +400,10 @@ export default {
           </div>
         </div>
       </div>
-      <div v-if="!value.isNew" class="row mt-30">
+      <div
+        v-if="!value.isNew"
+        class="row mt-30"
+      >
         <div class="col flex span-12">
           <LabelValue
             :name="t('harvester.host.disk.storageAvailable.label')"
@@ -422,7 +430,7 @@ export default {
         />
       </div>
     </div>
- 
+
     <div class="row mt-10">
       <div :class="`col span-${ value.isNew ? '6': '12' }`">
         <LabeledSelect
@@ -437,7 +445,10 @@ export default {
           @keydown.native.enter.prevent="()=>{}"
         />
       </div>
-      <div v-if="(value.isNew && isLonghornV1 && !isFormatted) || isCorrupted" class="col span-6">
+      <div
+        v-if="(value.isNew && isLonghornV1 && !isFormatted) || isCorrupted"
+        class="col span-6"
+      >
         <RadioGroup
           v-model:value="value.forceFormatted"
           :mode="mode"
@@ -459,7 +470,10 @@ export default {
           </template>
         </RadioGroup>
       </div>
-      <div v-if="value.isNew && isLvm" class="col span-6">
+      <div
+        v-if="value.isNew && isLvm"
+        class="col span-6"
+      >
         <LabeledSelect
           v-model:value="value.lvmVolumeGroup"
           :mode="mode"

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

@@ -136,10 +136,20 @@ export default {
         class="mb-20"
       />
 
-      <Checkbox v-model:value="enableMergeAcrossNodes" :mode="mode" class="check mb-20" type="checkbox" :label="t('harvester.host.ksmtuned.enableMergeNodes')" />
+      <Checkbox
+        v-model:value="enableMergeAcrossNodes"
+        :mode="mode"
+        class="check mb-20"
+        type="checkbox"
+        :label="t('harvester.host.ksmtuned.enableMergeNodes')"
+      />
 
       <h3>
-        <t k="harvester.host.ksmtuned.modeLink" :raw="true" :url="ksmtunedLink" />
+        <t
+          k="harvester.host.ksmtuned.modeLink"
+          :raw="true"
+          :url="ksmtunedLink"
+        />
       </h3>
       <RadioGroup
         v-model:value="spec.mode"

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

@@ -250,7 +250,9 @@ export default {
   <div>
     <div v-if="inventory.warningMessages.length > 0">
       <Banner
-         v-for="(msg, i) in inventory.warningMessages" :key="i" color="error"
+        v-for="(msg, i) in inventory.warningMessages"
+        :key="i"
+        color="error"
         :label="msg.text"
       />
     </div>
@@ -343,9 +345,9 @@ export default {
         <template #content>
           <NameNsDescription
             :value="secret"
-            @update:value="$emit('update:value', $event)"
             :namespaced="true"
             mode="create"
+            @update:value="$emit('update:value', $event)"
           />
 
           <LabeledInput

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

@@ -9,7 +9,9 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
-import { LONGHORN, SECRET, LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/config/types';
+import {
+  LONGHORN, SECRET, LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2
+} from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { formatSi } from '@shell/utils/units';
 import { findBy } from '@shell/utils/array';
@@ -37,7 +39,7 @@ export const LONGHORN_SYSTEM = 'longhorn-system';
 export const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
 
 export default {
-  name:       'HarvesterEditNode',
+  name: 'HarvesterEditNode',
 
   emits: ['update:value'],
 
@@ -58,9 +60,9 @@ export default {
     HarvesterSeeder,
     MessageLink,
   },
-  mixins: [CreateEditView],
+  mixins:       [CreateEditView],
   inheritAttrs: false,
-  props:  {
+  props:        {
     value: {
       type:     Object,
       required: true,
@@ -114,7 +116,7 @@ export default {
     this.blockDeviceOpts = this.getBlockDeviceOpts();
 
     const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
-    const seeder = addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+    const seeder = addons.find((addon) => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
 
     const seederEnabled = seeder ? seeder?.spec?.enabled : false;
 
@@ -122,7 +124,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const inventories = this.$store.getters[`${ inStore }/all`](HCI.INVENTORY) || [];
 
-      const inventory = inventories.find(inv => inv.id === `harvester-system/${ this.value.id }`);
+      const inventory = inventories.find((inv) => inv.id === `harvester-system/${ this.value.id }`);
 
       if (inventory) {
         this.inventory = await this.$store.dispatch(`${ inStore }/clone`, { resource: inventory });
@@ -214,7 +216,7 @@ export default {
     },
 
     showFormattedWarning() {
-      const out = this.newDisks.filter(d => d.forceFormatted && d.isNew && d.provisionerVersion === LONGHORN_VERSION_V1) || [];
+      const out = this.newDisks.filter((d) => d.forceFormatted && d.isNew && d.provisionerVersion === LONGHORN_VERSION_V1) || [];
 
       return out.length > 0;
     },
@@ -235,13 +237,13 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const longhornNodes = this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
 
-      return longhornNodes.find(node => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
+      return longhornNodes.find((node) => node.id === `${ LONGHORN_SYSTEM }/${ this.value.id }`);
     },
 
     seederEnabled() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
-      const seeder = addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+      const seeder = addons.find((addon) => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
 
       return seeder ? seeder?.spec?.enabled : false;
     },
@@ -271,7 +273,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const addons = this.$store.getters[`${ inStore }/all`](HCI.ADD_ONS);
 
-      return addons.find(addon => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
+      return addons.find((addon) => addon.id === `harvester-system/${ ADD_ONS.HARVESTER_SEEDER }`);
     },
 
     hasInventorySchema() {
@@ -350,8 +352,8 @@ export default {
 
     async saveDisk() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const addDisks = this.newDisks.filter(d => d.isNew);
+      const addDisks = this.newDisks.filter((d) => d.isNew);
-      const removeDisks = this.disks.filter(d => !findBy(this.newDisks, 'name', d.name) && d.blockDevice);
+      const removeDisks = this.disks.filter((d) => !findBy(this.newDisks, 'name', d.name) && d.blockDevice);
 
       if (addDisks.length === 0 && removeDisks.length === 0) {
         return Promise.resolve();
@@ -459,7 +461,7 @@ export default {
           const sizeBytes = d.status?.deviceStatus?.capacity?.sizeBytes;
           const size = formatSi(sizeBytes, { increment: 1024 });
           const parentDevice = d.status?.deviceStatus?.parentDevice;
-          const isChildAdded = this.newDisks.find(newDisk => newDisk.blockDevice?.status?.deviceStatus?.parentDevice === devPath);
+          const isChildAdded = this.newDisks.find((newDisk) => newDisk.blockDevice?.status?.deviceStatus?.parentDevice === devPath);
           const name = d.displayName;
 
           let label = `${ name } (Type: ${ deviceType }, Size: ${ size })`;
@@ -528,7 +530,7 @@ export default {
               opt:  { force: true },
             });
 
-            await new Promise(resolve => setTimeout(resolve, '5000'));
+            await new Promise((resolve) => setTimeout(resolve, '5000'));
             await retrySave();
           } else {
             return Promise.reject(exceptionToErrorsArray(err));
@@ -545,16 +547,27 @@ export default {
 </script>
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else id="node">
+  <div
+    v-else
+    id="node"
+  >
     <div class="content">
       <NameNsDescription
         :value="value"
-        @update:value="$emit('update:value', $event)"
         :namespaced="false"
         :mode="mode"
+        @update:value="$emit('update:value', $event)"
       />
-      <Tabbed ref="tabbed" class="mt-15" :side-tabs="true">
+      <Tabbed
-        <Tab name="basics" :weight="100" :label="t('harvester.host.tabs.basics')">
+        ref="tabbed"
+        class="mt-15"
+        :side-tabs="true"
+      >
+        <Tab
+          name="basics"
+          :weight="100"
+          :label="t('harvester.host.tabs.basics')"
+        >
           <LabeledInput
             v-model:value="customName"
             :label="t('harvester.host.detail.customName')"
@@ -637,8 +650,17 @@ export default {
             </template>
           </ArrayListGrouped>
         </Tab>
-        <Tab v-if="hasKsmtunedSchema" name="Ksmtuned" :weight="70" :label="t('harvester.host.tabs.ksmtuned')">
+        <Tab
-          <HarvesterKsmtuned :mode="mode" :node="value" :register-before-hook="registerBeforeHook" />
+          v-if="hasKsmtunedSchema"
+          name="Ksmtuned"
+          :weight="70"
+          :label="t('harvester.host.tabs.ksmtuned')"
+        >
+          <HarvesterKsmtuned
+            :mode="mode"
+            :node="value"
+            :register-before-hook="registerBeforeHook"
+          />
         </Tab>
         <Tab
           v-if="hasAddonSchema"
@@ -678,7 +700,10 @@ export default {
             />
           </div>
         </Tab>
-        <Tab name="labels" label-key="harvester.host.tabs.labels">
+        <Tab
+          name="labels"
+          label-key="harvester.host.tabs.labels"
+        >
           <KeyValue
             key="labels"
             :value="filteredLabels"
@@ -697,7 +722,13 @@ export default {
       />
     </div>
 
-    <Footer class="footer" :mode="mode" :errors="errors" @save="save" @done="done" />
+    <Footer
+      class="footer"
+      :mode="mode"
+      :errors="errors"
+      @save="save"
+      @done="done"
+    />
   </div>
 </template>
 <style lang="scss" scoped>

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

@@ -90,12 +90,21 @@ export default {
       ref="nd"
       :key="randomString"
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
+      @update:value="$emit('update:value', $event)"
     />
 
-    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tabbed
-      <Tab name="basic" :label="t('harvester.sshKey.tabs.basics')" :weight="1" class="bordered-table">
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basic"
+        :label="t('harvester.sshKey.tabs.basics')"
+        :weight="1"
+        class="bordered-table"
+      >
         <LabeledInput
           v-model:value="publicKey"
           type="multiline"

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

@@ -13,7 +13,7 @@ export default {
     this.registerBeforeHook(this.willSave, 'willSave');
     this.registerAfterHook(() => {
       const allNamespaces = this.$store.getters['allNamespaces'];
-      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const defaultNamepsace = allNamespaces.find((N) => N.id === 'default');
       const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
 
       this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });

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

@@ -11,7 +11,7 @@ export default {
 
     this.registerAfterHook(() => {
       const allNamespaces = this.$store.getters['allNamespaces'];
-      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const defaultNamepsace = allNamespaces.find((N) => N.id === 'default');
       const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
 
       this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });

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

@@ -77,7 +77,7 @@ export default {
 
     set(this.value, 'spec', this.value.spec || {});
 
-    const providers = PROVIDERS.map(provider => ({
+    const providers = PROVIDERS.map((provider) => ({
       ...provider,
       value: provider.name,
       label: this.t(provider.labelKey)
@@ -117,7 +117,7 @@ export default {
       return EDITOR_MODES;
     },
     enabledProviders() {
-      return this.providers.filter(p => p.enabled);
+      return this.providers.filter((p) => p.enabled);
     },
     cruMode() {
       if (this.selectedProviders.length > 1 || !this.value.allProvidersSupported) {
@@ -192,20 +192,35 @@ export default {
       <NameNsDescription
         v-if="!isView"
         :value="value"
-        @update:value="$emit('update:value', $event)"
         :mode="mode"
         label="generic.name"
         :register-before-hook="registerBeforeHook"
         :namespaced="value.type !== LOGGING.CLUSTER_OUTPUT"
+        @update:value="$emit('update:value', $event)"
       />
-      <Banner v-if="selectedProviders.length > 1" color="info">
+      <Banner
+        v-if="selectedProviders.length > 1"
+        color="info"
+      >
         {{ t('logging.output.tips.singleProvider') }}
       </Banner>
-      <Banner v-else-if="!value.allProvidersSupported" color="info">
+      <Banner
+        v-else-if="!value.allProvidersSupported"
+        color="info"
+      >
         {{ t('logging.output.tips.multipleProviders') }}
       </Banner>
-      <Tabbed v-else ref="tabbed" :side-tabs="true" @changed="tabChanged($event)">
+      <Tabbed
-        <Tab name="Output" label="Output" :weight="2">
+        v-else
+        ref="tabbed"
+        :side-tabs="true"
+        @changed="tabChanged($event)"
+      >
+        <Tab
+          name="Output"
+          label="Output"
+          :weight="2"
+        >
           <div class="row">
             <div class="col span-6">
               <LabeledSelect
@@ -220,13 +235,27 @@ export default {
           </div>
           <div class="row">
             <div class="col span-6">
-              <LabeledSelect v-model:value="selectedProvider" label="Output" :options="providers" :mode="mode" />
+              <LabeledSelect
+                v-model:value="selectedProvider"
+                label="Output"
+                :options="providers"
+                :mode="mode"
+              />
             </div>
           </div>
           <div class="spacer"></div>
-          <component :is="getComponent(selectedProvider)" :value="value.spec[selectedProvider]" :namespace="value.namespace" :mode="mode" />
+          <component
+            :is="getComponent(selectedProvider)"
+            :value="value.spec[selectedProvider]"
+            :namespace="value.namespace"
+            :mode="mode"
+          />
         </Tab>
-        <Tab name="buffer" :label="t('logging.output.buffer.label')" :weight="1">
+        <Tab
+          name="buffer"
+          :label="t('logging.output.buffer.label')"
+          :weight="1"
+        >
           <YamlEditor
             ref="yaml"
             v-model:value="bufferYaml"

pkg/harvester/edit/harvesterhci.io.monitoring.alertmanagerconfig/index.vue

@@ -16,7 +16,7 @@ import { _CREATE, _EDIT, _VIEW, _CONFIG } from '@shell/config/query-params';
 
 export default {
   emits: ['update:value'],
-  
+
   components: {
     ActionMenu,
     CruResource,
@@ -54,7 +54,7 @@ export default {
     const defaultReceiverValues = {};
     const receiverSchema = this.$store.getters['harvester/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_RECEIVER_SPEC);
     const routeSchema = this.$store.getters['harvester/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_ROUTE_SPEC);
-    const receiverOptions = (this.value?.spec?.receivers || []).map(receiver => receiver.name);
+    const receiverOptions = (this.value?.spec?.receivers || []).map((receiver) => receiver.name);
 
     return {
       actionMenuTargetElement:  null,
@@ -195,9 +195,9 @@ export default {
   >
     <NameNsDescription
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
       :namespaced="isNamespaced"
+      @update:value="$emit('update:value', $event)"
     />
 
     <Tabbed>

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

@@ -17,7 +17,7 @@ const MANUAL = 'manual';
 
 export default {
   emits: ['update:value'],
-  
+
   components: {
     Tab,
     Tabbed,
@@ -191,11 +191,20 @@ export default {
     <NameNsDescription
       ref="nd"
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
+      @update:value="$emit('update:value', $event)"
     />
-    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tabbed
-      <Tab name="basics" :label="t('harvester.network.tabs.basics')" :weight="99" class="bordered-table">
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basics"
+        :label="t('harvester.network.tabs.basics')"
+        :weight="99"
+        class="bordered-table"
+      >
         <LabeledSelect
           v-model:value="type"
           class="mb-20"

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

@@ -73,7 +73,7 @@ export default {
           cron:       '',
           retain:     8,
           maxFailure: 4,
-          vmbackup: {
+          vmbackup:   {
             source: {
               apiGroup: 'kubevirt.io',
               kind:     'VirtualMachine',
@@ -90,7 +90,7 @@ export default {
 
   computed: {
     backupTargetResource() {
-      return this.settings.find( O => O.id === 'backup-target');
+      return this.settings.find( (O) => O.id === 'backup-target');
     },
     isEmptyValue() {
       return this.getBackupTargetValueIsEmpty(this.backupTargetResource);
@@ -112,8 +112,8 @@ export default {
       return this.value.spec.vmbackup.type === BACKUP_TYPE.BACKUP && (this.errorMessage || this.isEmptyValue) && this.canUpdate;
     },
     vmOptions() {
-      const nsVmList = this.$store.getters['harvester/all'](HCI.VM).filter(vm => vm.metadata.namespace === this.value.metadata.namespace);
+      const nsVmList = this.$store.getters['harvester/all'](HCI.VM).filter((vm) => vm.metadata.namespace === this.value.metadata.namespace);
-      const vmObjectLists = nsVmList.map(obj => ({
+      const vmObjectLists = nsVmList.map((obj) => ({
         label: obj.nameDisplay,
         value: obj.name,
       }));
@@ -196,7 +196,7 @@ export default {
     :mode="mode"
     :errors="errors"
     :apply-hooks="applyHooks"
-    :validationPassed="canSave"
+    :validation-passed="canSave"
     @finish="save"
     @error="e=>errors = e"
   >
@@ -258,8 +258,17 @@ export default {
         </div>
       </div>
     </div>
-    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tabbed
-      <Tab name="basics" :label="t('harvester.network.tabs.basics')" :weight="99" class="bordered-table">
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
+      <Tab
+        name="basics"
+        :label="t('harvester.network.tabs.basics')"
+        :weight="99"
+        class="bordered-table"
+      >
         <LabeledInput
           v-model:value="value.spec.cron"
           class="mb-30"

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

@@ -160,7 +160,7 @@ export default {
   created() {
     this.registerAfterHook(() => {
       const allNamespaces = this.$store.getters['allNamespaces'];
-      const defaultNamepsace = allNamespaces.find(N => N.id === 'default');
+      const defaultNamepsace = allNamespaces.find((N) => N.id === 'default');
       const ns = defaultNamepsace?.id || allNamespaces?.[0]?.id || '';
 
       this.value.$dispatch('prefs/set', { key: LAST_NAMESPACE, value: ns }, { root: true });
@@ -238,9 +238,9 @@ export default {
     >
       <NameNsDescription
         :value="value"
-        @update:value="$emit('update:value', $event)"
         :mode="mode"
         :namespaced="!isCloud"
+        @update:value="$emit('update:value', $event)"
       />
 
       <div class="spacer" />

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

@@ -31,7 +31,7 @@ export default {
     let enumOptions = [];
 
     if (setting.kind === 'enum') {
-      enumOptions = setting.options.map(id => ({
+      enumOptions = setting.options.map((id) => ({
         label: `advancedSettings.enum.harv-${ this.value.id }.${ id }`,
         value: id
       }));
@@ -53,7 +53,7 @@ export default {
     const customSettingComponents = require
       .context('../components/settings', false, /^.*\.vue$/)
       .keys()
-      .map(path => path.replace(/(\.\/)|(.vue)/g, ''));
+      .map((path) => path.replace(/(\.\/)|(.vue)/g, ''));
 
     return {
       setting,
@@ -183,7 +183,11 @@ export default {
   >
     <h4 v-clean-html="description"></h4>
 
-    <h5 v-if="editHelp" v-clean-html="editHelp" class="edit-help" />
+    <h5
+      v-if="editHelp"
+      v-clean-html="editHelp"
+      class="edit-help"
+    />
 
     <div class="edit-change mt-20">
       <h5 v-t="'advancedSettings.edit.changeSetting'" />
@@ -229,7 +233,10 @@ export default {
         />
       </div>
       <div v-else-if="setting.kind === 'multiline' || setting.kind === 'json'">
-        <TextAreaAutoGrow v-model:value="value.value" :min-height="254" />
+        <TextAreaAutoGrow
+          v-model:value="value.value"
+          :min-height="254"
+        />
       </div>
       <div v-else>
         <LabeledInput

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

@@ -13,7 +13,9 @@ import Loading from '@shell/components/Loading';
 
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
-import { STORAGE_CLASS, LONGHORN, LONGHORN_DRIVER, SECRET, NAMESPACE } from '@shell/config/types';
+import {
+  STORAGE_CLASS, LONGHORN, LONGHORN_DRIVER, SECRET, NAMESPACE
+} from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { clone } from '@shell/utils/object';
 import { CSI_DRIVER } from '../../types';
@@ -84,7 +86,7 @@ export default {
       }
     ];
 
-    const allowedTopologies = clone(this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter(t => t.key !== LVM_TOPOLOGY_LABEL);
+    const allowedTopologies = clone(this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter((t) => t.key !== LVM_TOPOLOGY_LABEL);
 
     this.value['parameters'] = this.value.parameters || {};
     this.value['provisioner'] = this.value.provisioner || LONGHORN_DRIVER;
@@ -200,7 +202,7 @@ export default {
       let parameters = {};
 
       if (provisioner === LVM_DRIVER) {
-        const matchLabelExpressions = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter(t => t.key !== LVM_TOPOLOGY_LABEL);
+        const matchLabelExpressions = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter((t) => t.key !== LVM_TOPOLOGY_LABEL);
 
         if (matchLabelExpressions.length > 0) {
           this.value['allowedTopologies'] = [{ matchLabelExpressions }];
@@ -246,8 +248,8 @@ export default {
     },
 
     formatAllowedTopoloties() {
-      const neu = this.allowedTopologies.filter(t => t.key !== LVM_TOPOLOGY_LABEL);
+      const neu = this.allowedTopologies.filter((t) => t.key !== LVM_TOPOLOGY_LABEL);
-      const lvmMatchExpression = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter(t => t.key === LVM_TOPOLOGY_LABEL);
+      const lvmMatchExpression = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter((t) => t.key === LVM_TOPOLOGY_LABEL);
 
       if (!neu || neu.length === 0) {
         if (lvmMatchExpression.length > 0) {
@@ -259,7 +261,7 @@ export default {
         return;
       }
 
-      const matchLabelExpressions = neu.filter(R => !!R.key.trim() && (R.values.length > 0 && !R.values.find(V => !V.trim())));
+      const matchLabelExpressions = neu.filter((R) => !!R.key.trim() && (R.values.length > 0 && !R.values.find((V) => !V.trim())));
 
       if (matchLabelExpressions.length > 0) {
         this.value.allowedTopologies = [{ matchLabelExpressions: [...matchLabelExpressions, ...lvmMatchExpression] }];
@@ -287,9 +289,9 @@ export default {
     <NameNsDescription
       :namespaced="false"
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
       :register-before-hook="registerBeforeHook"
+      @update:value="$emit('update:value', $event)"
     />
     <LabeledSelect
       v-model:value="provisioner"
@@ -302,7 +304,11 @@ export default {
       class="mb-20"
     />
     <Tabbed :side-tabs="true">
-      <Tab name="parameters" :label="t('storageClass.parameters.label')" :weight="2">
+      <Tab
+        name="parameters"
+        :label="t('storageClass.parameters.label')"
+        :weight="2"
+      >
         <component
           :is="getComponent(provisioner)"
           :key="provisioner"
@@ -311,7 +317,10 @@ export default {
           :real-mode="realMode"
         />
       </Tab>
-      <Tab name="customize" :label="t('storageClass.customize.label')">
+      <Tab
+        name="customize"
+        :label="t('storageClass.customize.label')"
+      >
         <div class="row mt-20">
           <div class="col span-6">
             <RadioGroup

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

@@ -78,7 +78,7 @@ export default {
       const allSecrets = this.$store.getters[`${ inStore }/all`](SECRET);
 
       // only show non-system secret to user to select
-      return allSecrets.filter(secret => secret.isSystem === false);
+      return allSecrets.filter((secret) => secret.isSystem === false);
     },
 
     longhornNodes() {
@@ -124,7 +124,7 @@ export default {
     },
 
     secretOptions() {
-      return this.secrets.map(secret => secret.id);
+      return this.secrets.map((secret) => secret.id);
     },
 
     volumeEncryptionOptions() {
@@ -282,7 +282,10 @@ export default {
           :mode="mode"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.nodeSelector.no-options', null, true) }}
             </span>
           </template>
@@ -298,7 +301,10 @@ export default {
           :mode="mode"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
             </span>
           </template>
@@ -323,7 +329,10 @@ export default {
         :options="volumeEncryptionOptions"
       />
     </div>
-    <div v-if="value.parameters.encrypted === 'true'" class="row mt-20">
+    <div
+      v-if="value.parameters.encrypted === 'true'"
+      class="row mt-20"
+    >
       <div class="col span-6">
         <LabeledSelect
           v-model:value="secret"

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

@@ -78,7 +78,7 @@ export default {
       const allSecrets = this.$store.getters[`${ inStore }/all`](SECRET);
 
       // only show non-system secret to user to select
-      return allSecrets.filter(secret => secret.isSystem === false);
+      return allSecrets.filter((secret) => secret.isSystem === false);
     },
 
     longhornNodes() {
@@ -124,7 +124,7 @@ export default {
     },
 
     secretOptions() {
-      return this.secrets.map(secret => secret.id);
+      return this.secrets.map((secret) => secret.id);
     },
 
     volumeEncryptionOptions() {
@@ -282,7 +282,10 @@ export default {
           :mode="mode"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.nodeSelector.no-options', null, true) }}
             </span>
           </template>
@@ -298,7 +301,10 @@ export default {
           :mode="mode"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
             </span>
           </template>
@@ -325,7 +331,10 @@ export default {
         :disabled="true"
       />
     </div>
-    <div v-if="value.parameters.encrypted === 'true'" class="row mt-20">
+    <div
+      v-if="value.parameters.encrypted === 'true'"
+      class="row mt-20"
+    >
       <div class="col span-6">
         <LabeledSelect
           v-model:value="secret"

pkg/harvester/edit/harvesterhci.io.storage/provisioners/lvm.driver.harvesterhci.io.vue

@@ -52,7 +52,7 @@ export default {
   },
 
   data() {
-    const node = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).find(t => t.key === LVM_TOPOLOGY_LABEL)?.values[0];
+    const node = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).find((t) => t.key === LVM_TOPOLOGY_LABEL)?.values[0];
 
     return {
       volumeGroupTypes: ['striped', 'dm-thin'],
@@ -77,7 +77,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const nodes = this.$store.getters[`${ inStore }/all`](NODE) || [];
 
-      return nodes.filter(n => n.labels[LVM_TOPOLOGY_LABEL] === n.name).map(n => n.name);
+      return nodes.filter((n) => n.labels[LVM_TOPOLOGY_LABEL] === n.name).map((n) => n.name);
     },
 
     volumeGroups() {
@@ -85,8 +85,8 @@ export default {
       const lvmVolumeGroups = this.$store.getters[`${ inStore }/all`](HCI.LVM_VOLUME_GROUP) || [];
 
       return lvmVolumeGroups
-        .filter(group => group.spec.nodeName === this.node)
+        .filter((group) => group.spec.nodeName === this.node)
-        .map(g => g.spec.vgName);
+        .map((g) => g.spec.vgName);
     },
 
     parameters: {
@@ -119,7 +119,10 @@ export default {
           :required="true"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
             </span>
           </template>
@@ -136,7 +139,10 @@ export default {
           :required="true"
         >
           <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
+            <span
+              v-if="!searching"
+              class="text-muted"
+            >
               {{ t('harvester.storage.parameters.lvmVolumeGroup.no-options', null, true) }}
             </span>
           </template>

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

@@ -98,7 +98,7 @@ export default {
 
       const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
 
-      return backupList.find( O => O.name === name);
+      return backupList.find( (O) => O.name === name);
     },
 
     disableExisting() {
@@ -108,7 +108,7 @@ export default {
     backupNamespace() {
       const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
 
-      return backupList.find( B => B.metadata.name === this.backupName)?.metadata?.namespace;
+      return backupList.find( (B) => B.metadata.name === this.backupName)?.metadata?.namespace;
     },
 
     namespaces() {
@@ -265,7 +265,13 @@ export default {
       />
     </div>
 
-    <Footer mode="create" class="footer" :errors="errors" @save="saveRestore" @done="cancelAction" />
+    <Footer
+      mode="create"
+      class="footer"
+      :errors="errors"
+      @save="saveRestore"
+      @done="cancelAction"
+    />
   </div>
 </template>
 

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

@@ -61,7 +61,7 @@ export default {
       storageClasses: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
     });
 
-    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find(s => s.isDefault);
+    const defaultStorage = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS).find((s) => s.isDefault);
 
     this['storageClassName'] = this.storageClassName || defaultStorage?.metadata?.name || 'longhorn';
     this.images = this.$store.getters[`${ inStore }/all`](HCI.IMAGE);
@@ -73,7 +73,7 @@ export default {
       // image ns/name = image.id
       const sourceImage = `${ securityParameters.sourceImageNamespace }/${ securityParameters.sourceImageName }`;
 
-      this.selectedImage = this.images.find(image => image.id === sourceImage);
+      this.selectedImage = this.images.find((image) => image.id === sourceImage);
     }
   },
 
@@ -88,11 +88,11 @@ export default {
     if (image && cryptoOperation) {
       const imageObject = JSON.parse(image);
 
-      this.value.spec.securityParameters =  {
+      this.value.spec.securityParameters = {
         cryptoOperation,
         sourceImageName:      imageObject.metadata.name,
         sourceImageNamespace: imageObject.metadata.namespace
-      }
+      };
     }
 
     if (!this.value.metadata.name) {
@@ -140,7 +140,7 @@ export default {
       const storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
 
       return storages
-        .filter(s => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) // Lvm storage is not supported.
+        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) // Lvm storage is not supported.
         .map((s) => {
           const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
@@ -167,12 +167,12 @@ export default {
         return options;
       }
       if (this.value.spec.securityParameters.cryptoOperation === ENCRYPT) {
-        options = this.images.filter(image => !image.isEncrypted);
+        options = this.images.filter((image) => !image.isEncrypted);
       } else {
-        options = this.images.filter(image => image.isEncrypted);
+        options = this.images.filter((image) => image.isEncrypted);
       }
 
-      return options.map(image => image.displayNameWithNamespace);
+      return options.map((image) => image.displayNameWithNamespace);
     },
     sourceImage: {
       get() {
@@ -183,7 +183,7 @@ export default {
         return '';
       },
       set(neu) {
-        this.selectedImage = this.images.find(i => i.displayNameWithNamespace === neu);
+        this.selectedImage = this.images.find((i) => i.displayNameWithNamespace === neu);
         // sourceImageName should bring the name of the image
         this.value.spec.securityParameters.sourceImageName = this.selectedImage?.metadata.name || '';
         this.value.spec.securityParameters.sourceImageNamespace = this.selectedImage?.metadata.namespace || '';
@@ -322,7 +322,7 @@ export default {
     internalAnnotations(option) {
       const optionKeys = [HCI_ANNOTATIONS.OS_TYPE, HCI_ANNOTATIONS.IMAGE_SUFFIX];
 
-      return optionKeys.find(O => O === option.key);
+      return optionKeys.find((O) => O === option.key);
     },
 
     calculateOptions(keyName) {
@@ -352,7 +352,7 @@ export default {
 
       return OS.find( (os) => {
         if (os.match) {
-          return os.match.find(matchValue => str.toLowerCase().includes(matchValue)) ? os.value : false;
+          return os.match.find((matchValue) => str.toLowerCase().includes(matchValue)) ? os.value : false;
         } else {
           return str.toLowerCase().includes(os.value.toLowerCase()) ? os.value : false;
         }
@@ -376,13 +376,17 @@ export default {
     <NameNsDescription
       ref="nd"
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="mode"
       :label="t('generic.name')"
       name-key="spec.displayName"
+      @update:value="$emit('update:value', $event)"
     />
 
-    <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tabbed
+      v-bind="$attrs"
+      class="mt-15"
+      :side-tabs="true"
+    >
       <Tab
         name="basic"
         :label="t('harvester.image.tabs.basics')"
@@ -503,7 +507,12 @@ export default {
         </div>
       </Tab>
 
-      <Tab name="labels" :label="t('labels.labels.title')" :weight="2" class="bordered-table">
+      <Tab
+        name="labels"
+        :label="t('labels.labels.title')"
+        :weight="2"
+        class="bordered-table"
+      >
         <KeyValue
           key="labels"
           ref="labels"

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

@@ -99,7 +99,7 @@ export default {
     templateId: {
       async handler(neu) {
         const templates = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_TEMPLATE });
-        let templateValue = templates.find( V => V.id === neu) || null;
+        let templateValue = templates.find( (V) => V.id === neu) || null;
         let templateSpec = templateValue?.spec;
 
         if (!templateValue) {
@@ -131,7 +131,7 @@ export default {
         // Set the default version according to annotation:[HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME]
         const versions = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_VERSION, opt: { force: true } });
 
-        const version = versions.find( V => V?.metadata?.annotations?.[HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME] === this.customName);
+        const version = versions.find( (V) => V?.metadata?.annotations?.[HCI_ANNOTATIONS.TEMPLATE_VERSION_CUSTOM_NAME] === this.customName);
 
         if (version) {
           try {
@@ -159,7 +159,7 @@ export default {
       this.parseVM();
 
       const templates = await this.$store.dispatch('harvester/findAll', { type: HCI.VM_TEMPLATE });
-      const template = templates.find( O => O.metadata.name === this.templateValue.metadata.name);
+      const template = templates.find( (O) => O.metadata.name === this.templateValue.metadata.name);
 
       try {
         if (!this.templateId) {
@@ -223,10 +223,10 @@ export default {
   >
     <NameNsDescription
       :value="value"
-      @update:value="$emit('update:value', $event)"
       :mode="realTemplateMode"
       name-label="harvester.vmTemplate.nameNsDescription.name"
       :namespaced="true"
+      @update:value="$emit('update:value', $event)"
     />
 
     <Checkbox
@@ -238,9 +238,20 @@ export default {
       :mode="mode"
     />
 
-    <Tabbed :side-tabs="true" @changed="onTabChanged">
+    <Tabbed
-      <Tab name="Basics" :label="t('harvester.vmTemplate.tabs.basics')">
+      :side-tabs="true"
-        <CpuMemory :cpu="cpu" :memory="memory" :disabled="isConfig" @updateCpuMemory="updateCpuMemory" />
+      @changed="onTabChanged"
+    >
+      <Tab
+        name="Basics"
+        :label="t('harvester.vmTemplate.tabs.basics')"
+      >
+        <CpuMemory
+          :cpu="cpu"
+          :memory="memory"
+          :disabled="isConfig"
+          @updateCpuMemory="updateCpuMemory"
+        />
 
         <div class="mb-20">
           <SSHKey
@@ -254,12 +265,28 @@ export default {
         </div>
       </Tab>
 
-      <Tab name="Volume" :label="t('harvester.tab.volume')" :weight="-1">
+      <Tab
-        <Volume v-model:value="diskRows" :mode="mode" :namespace="value.metadata.namespace" :existing-volume-disabled="true" />
+        name="Volume"
+        :label="t('harvester.tab.volume')"
+        :weight="-1"
+      >
+        <Volume
+          v-model:value="diskRows"
+          :mode="mode"
+          :namespace="value.metadata.namespace"
+          :existing-volume-disabled="true"
+        />
       </Tab>
 
-      <Tab name="Network" :label="t('harvester.tab.network')" :weight="-2">
+      <Tab
-        <Network v-model:value="networkRows" :mode="mode" />
+        name="Network"
+        :label="t('harvester.tab.network')"
+        :weight="-2"
+      >
+        <Network
+          v-model:value="networkRows"
+          :mode="mode"
+        />
       </Tab>
 
       <Tab
@@ -276,7 +303,11 @@ export default {
         </template>
       </Tab>
 
-      <Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="-4">
+      <Tab
+        :label="t('harvester.tab.vmScheduling')"
+        name="vmScheduling"
+        :weight="-4"
+      >
         <template #default>
           <PodAffinity
             :mode="mode"
@@ -318,7 +349,11 @@ export default {
         </Labels>
       </Tab>
 
-      <Tab name="advanced" :label="t('harvester.tab.advanced')" :weight="-99">
+      <Tab
+        name="advanced"
+        :label="t('harvester.tab.advanced')"
+        :weight="-99"
+      >
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledSelect
@@ -371,8 +406,18 @@ export default {
         </div>
 
         <div class="row mb-20">
-          <a v-if="showAdvanced" v-t="'harvester.generic.showMore'" role="button" @click="toggleAdvanced" />
+          <a
-          <a v-else v-t="'harvester.generic.showMore'" role="button" @click="toggleAdvanced" />
+            v-if="showAdvanced"
+            v-t="'harvester.generic.showMore'"
+            role="button"
+            @click="toggleAdvanced"
+          />
+          <a
+            v-else
+            v-t="'harvester.generic.showMore'"
+            role="button"
+            @click="toggleAdvanced"
+          />
         </div>
 
         <div v-if="showAdvanced">

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

@@ -94,7 +94,7 @@ export default {
 
       const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
 
-      return backupList.find( O => O.name === name);
+      return backupList.find( (O) => O.name === name);
     },
 
     disableExisting() {
@@ -104,7 +104,7 @@ export default {
     snapshotNamespace() {
       const backupList = this.$store.getters['harvester/all'](HCI.BACKUP);
 
-      return backupList.find( B => B.metadata.name === this.snapshotName)?.metadata?.namespace;
+      return backupList.find( (B) => B.metadata.name === this.snapshotName)?.metadata?.namespace;
     },
 
     namespaces() {
@@ -113,7 +113,7 @@ export default {
       const systemNamespaces = this.$store.getters['systemNamespaces'];
 
       const out = sortBy(
-        choices.filter(N => !systemNamespaces.includes(N.metadata.name)).map((obj) => {
+        choices.filter((N) => !systemNamespaces.includes(N.metadata.name)).map((obj) => {
           return {
             label: obj.nameDisplay,
             value: obj.id,
@@ -239,12 +239,28 @@ export default {
         </div>
       </div>
 
-      <LabeledSelect v-model:value="snapshotName" class="mb-20" :label="t('harvester.vmSnapshot.snapshot')" :options="snapshotOption" />
+      <LabeledSelect
+        v-model:value="snapshotName"
+        class="mb-20"
+        :label="t('harvester.vmSnapshot.snapshot')"
+        :options="snapshotOption"
+      />
 
-      <LabeledSelect v-if="!restoreNewVm" v-model:value="deletionPolicy" :label="t('harvester.backup.restore.deletePreviousVolumes')" :options="deletionPolicyOption" />
+      <LabeledSelect
+        v-if="!restoreNewVm"
+        v-model:value="deletionPolicy"
+        :label="t('harvester.backup.restore.deletePreviousVolumes')"
+        :options="deletionPolicyOption"
+      />
     </div>
 
-    <Footer mode="create" class="footer" :errors="errors" @save="saveRestore" @done="cancelAction" />
+    <Footer
+      mode="create"
+      class="footer"
+      :errors="errors"
+      @save="saveRestore"
+      @done="cancelAction"
+    />
   </div>
 </template>
 

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

@@ -65,7 +65,7 @@ export default {
     this.snapshots = hash.snapshots;
     this.images = hash.images;
 
-    const defaultStorage = this.$store.getters[`harvester/all`](STORAGE_CLASS).find( O => O.isDefault);
+    const defaultStorage = this.$store.getters[`harvester/all`](STORAGE_CLASS).find( (O) => O.isDefault);
 
     this.value.spec['storageClassName'] = this.value?.spec?.storageClassName || defaultStorage?.metadata?.name || 'longhorn';
   },
@@ -97,7 +97,7 @@ export default {
     isBlank() {
       return this.source === 'blank';
     },
-    
+
     isEdit() {
       return this.mode === _EDIT;
     },
@@ -123,7 +123,7 @@ export default {
     imageOption() {
       return sortBy(
         this.images
-          .filter(obj => obj.isReady)
+          .filter((obj) => obj.isReady)
           .map((obj) => {
             return {
               label: `${ obj.metadata.namespace }/${ obj.spec.displayName }`,
@@ -174,7 +174,7 @@ export default {
     },
 
     storageClassOptions() {
-      return this.storageClasses.filter(s => !s.parameters?.backingImage).map((s) => {
+      return this.storageClasses.filter((s) => !s.parameters?.backingImage).map((s) => {
         const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
         return {
@@ -243,7 +243,7 @@ export default {
       let imageAnnotations = '';
       let storageClassName = this.value.spec.storageClassName;
 
-      const storageClass = this.storageClasses.find(sc => sc.name === storageClassName);
+      const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
       const storageClassProvisioner = storageClass?.provisioner;
       const storageClassDataEngine = storageClass?.parameters?.dataEngine;
 
@@ -254,7 +254,7 @@ export default {
           ...this.value.metadata.annotations,
           [HCI_ANNOTATIONS.IMAGE_ID]: this.imageId
         };
-        storageClassName = images?.find(image => this.imageId === image.id)?.storageClassName;
+        storageClassName = images?.find((image) => this.imageId === image.id)?.storageClassName;
       } else {
         imageAnnotations = { ...this.value.metadata.annotations };
       }
@@ -272,7 +272,7 @@ export default {
     },
     updateImage() {
       if (this.isVMImage && this.imageId) {
-        const imageResource = this.images?.find(image => this.imageId === image.id);
+        const imageResource = this.images?.find((image) => this.imageId === image.id);
         const imageSize = Math.max(imageResource?.status?.size, imageResource?.status?.virtualSize);
 
         if (imageSize) {
@@ -300,7 +300,12 @@ export default {
     :apply-hooks="applyHooks"
     @finish="save"
   >
-    <NameNsDescription :value="value" @update:value="$emit('update:value', $event)" :namespaced="true" :mode="mode" />
+    <NameNsDescription
+      :value="value"
+      :namespaced="true"
+      :mode="mode"
+      @update:value="$emit('update:value', $event)"
+    />
 
     <ResourceTabs
       v-model:value="value"
@@ -310,7 +315,12 @@ export default {
       :side-tabs="true"
       :mode="mode"
     >
-      <Tab name="basic" :label="t('harvester.volume.tabs.basics')" :weight="3" class="bordered-table">
+      <Tab
+        name="basic"
+        :label="t('harvester.volume.tabs.basics')"
+        :weight="3"
+        class="bordered-table"
+      >
         <LabeledSelect
           v-model:value="source"
           :label="t('harvester.volume.source')"
@@ -358,14 +368,41 @@ export default {
           @update:value="update"
         />
 
-        <Banner v-if="isLonghornV2 && isEdit" color="warning">
+        <Banner
+          v-if="isLonghornV2 && isEdit"
+          color="warning"
+        >
           <span>{{ t('harvester.volume.longhorn.disableResize') }}</span>
         </Banner>
       </Tab>
-      <Tab v-if="!isCreate" name="details" :label="t('harvester.volume.tabs.details')" :weight="2.5" class="bordered-table">
+      <Tab
-        <LabeledInput v-model:value="frontendDisplay" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.frontend')" />
+        v-if="!isCreate"
-        <LabeledInput v-model:value="attachedNode" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.attachedNode')" />
+        name="details"
-        <LabeledInput v-model:value="endpoint" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.endpoint')" />
+        :label="t('harvester.volume.tabs.details')"
+        :weight="2.5"
+        class="bordered-table"
+      >
+        <LabeledInput
+          v-model:value="frontendDisplay"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.frontend')"
+        />
+        <LabeledInput
+          v-model:value="attachedNode"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.attachedNode')"
+        />
+        <LabeledInput
+          v-model:value="endpoint"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.endpoint')"
+        />
         <LabeledSelect
           v-model:value="diskTags"
           :multiple="true"
@@ -384,23 +421,63 @@ export default {
           :mode="mode"
           class="mb-20"
         />
-        <LabeledInput v-model:value="lastBackup" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.lastBackup')" />
+        <LabeledInput
-        <LabeledInput v-model:value="lastBackupAt" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.lastBackupAt')" />
+          v-model:value="lastBackup"
-        <LabeledInput v-model:value="replicasNumber" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.replicasNumber')" />
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.lastBackup')"
+        />
+        <LabeledInput
+          v-model:value="lastBackupAt"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.lastBackupAt')"
+        />
+        <LabeledInput
+          v-model:value="replicasNumber"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.replicasNumber')"
+        />
       </Tab>
-      <Tab v-if="!isCreate" name="instances" :label="t('harvester.volume.tabs.snapshots')" :weight="2" class="bordered-table">
+      <Tab
+        v-if="!isCreate"
+        name="instances"
+        :label="t('harvester.volume.tabs.snapshots')"
+        :weight="2"
+        class="bordered-table"
+      >
         <SortableTable
           v-bind="$attrs"
           :headers="snapshotHeaders"
           default-sort-by="age"
           :rows="value.relatedVolumeSnapshotCounts"
           key-field="_key"
-          
         />
       </Tab>
-      <Tab v-if="!isCreate && value.spec.dataSource" name="datasource" :label="t('harvester.volume.tabs.datasource')" :weight="1" class="bordered-table">
+      <Tab
-        <LabeledInput v-model:value="dataSourceKind" class="mb-20" :mode="mode" :disabled="true" :label="t('harvester.volume.kind')" />
+        v-if="!isCreate && value.spec.dataSource"
-        <LabeledInput v-model:value="value.spec.dataSource.name" :mode="mode" :disabled="true" :label="t('nameNsDescription.name.label')" />
+        name="datasource"
+        :label="t('harvester.volume.tabs.datasource')"
+        :weight="1"
+        class="bordered-table"
+      >
+        <LabeledInput
+          v-model:value="dataSourceKind"
+          class="mb-20"
+          :mode="mode"
+          :disabled="true"
+          :label="t('harvester.volume.kind')"
+        />
+        <LabeledInput
+          v-model:value="value.spec.dataSource.name"
+          :mode="mode"
+          :disabled="true"
+          :label="t('nameNsDescription.name.label')"
+        />
       </Tab>
     </ResourceTabs>
   </CruResource>

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

@@ -10,7 +10,7 @@ import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { HCI } from '../types';
 
 export default {
-  name:       'HarvesterSnapshot',
+  name: 'HarvesterSnapshot',
 
   emits: ['update:value'],
 
@@ -65,7 +65,12 @@ export default {
       :apply-hooks="applyHooks"
       @finish="save"
     >
-      <NameNsDescription :value="value" @update:value="$emit('update:value', $event)" :namespaced="true" :mode="mode" />
+      <NameNsDescription
+        :value="value"
+        :namespaced="true"
+        :mode="mode"
+        @update:value="$emit('update:value', $event)"
+      />
       <ResourceTabs
         v-model:value="value"
         class="mt-15"
@@ -74,20 +79,42 @@ export default {
         :side-tabs="true"
         :mode="mode"
       >
-        <Tab name="basics" :label="t('harvester.virtualMachine.detail.tabs.basics')" class="bordered-table">
+        <Tab
+          name="basics"
+          :label="t('harvester.virtualMachine.detail.tabs.basics')"
+          class="bordered-table"
+        >
           <div class="row">
             <div class="col span-12">
-              <LabeledInput v-model:value="size" :label="t('harvester.snapshot.size')" class="mt-20" :disabled="true" />
+              <LabeledInput
+                v-model:value="size"
+                :label="t('harvester.snapshot.size')"
+                class="mt-20"
+                :disabled="true"
+              />
             </div>
           </div>
           <div class="row">
             <div class="col span-12">
-              <LabeledInput v-model:value="targetVolume" :label="t('harvester.snapshot.targetVolume')" class="mt-20" :disabled="true" />
+              <LabeledInput
+                v-model:value="targetVolume"
+                :label="t('harvester.snapshot.targetVolume')"
+                class="mt-20"
+                :disabled="true"
+              />
             </div>
           </div>
-          <div v-if="isImageVolume" class="row">
+          <div
+            v-if="isImageVolume"
+            class="row"
+          >
             <div class="col span-12">
-              <LabeledInput v-model:value="imageName" :label="t('harvester.snapshot.image')" class="mt-20" :disabled="true" />
+              <LabeledInput
+                v-model:value="imageName"
+                :label="t('harvester.snapshot.image')"
+                class="mt-20"
+                :disabled="true"
+              />
             </div>
           </div>
         </Tab>

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

@@ -82,16 +82,28 @@ export default {
         </div>
         <div>{{ t('harvester.devices.matrixHostName') }}</div>
       </div>
-      <div  v-for="(nodeName, i) in allNodeNames" :key="i" >
+      <div
+        v-for="(nodeName, i) in allNodeNames"
+        :key="i"
+      >
         <span>  {{ nodeName }}</span>
       </div>
     </div>
-    <div  v-for="(deviceCRD, i) in enabledDevices" :key="i" >
+    <div
-      <div v-clean-tooltip="deviceTooltip(deviceCRD)" class="compat-cell device-label" :class="{'text-muted': noneAvailable(deviceCRD)}">
+      v-for="(deviceCRD, i) in enabledDevices"
+      :key="i"
+    >
+      <div
+        v-clean-tooltip="deviceTooltip(deviceCRD)"
+        class="compat-cell device-label"
+        :class="{'text-muted': noneAvailable(deviceCRD)}"
+      >
         {{ deviceCRD.metadata.name }}
       </div>
       <div
-         v-for="(nodeName, k) in allNodeNames" :key="k" class="compat-cell"
+        v-for="(nodeName, k) in allNodeNames"
+        :key="k"
+        class="compat-cell"
         :class="{'has-device': nodeHasDevice(nodeName, deviceCRD)}"
       />
     </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue

@@ -11,7 +11,7 @@ const _NEW = '_NEW';
 
 export default {
   emits: ['update:user', 'update:newUser'],
-  
+
   components: {
     LabeledInput,
     LabeledSelect,

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

@@ -14,7 +14,7 @@ const _NEW = '_NEW';
 
 export default {
   emits: ['update:value'],
-  
+
   components: {
     Banner,
     InfoBox
@@ -152,11 +152,23 @@ export default {
 
 <template>
   <div>
-    <Banner class="mb-20" color="info" :label="t('harvester.virtualMachine.accessCredentials.tips')" />
+    <Banner
+      class="mb-20"
+      color="info"
+      :label="t('harvester.virtualMachine.accessCredentials.tips')"
+    />
 
-    <div v-for="(row, i) in rows" :key="i">
+    <div
+      v-for="(row, i) in rows"
+      :key="i"
+    >
       <InfoBox class="volume-source">
-        <button v-if="isEdit" type="button" class="role-link btn btn-sm remove-vol" @click="remove(row)">
+        <button
+          v-if="isEdit"
+          type="button"
+          class="role-link btn btn-sm remove-vol"
+          @click="remove(row)"
+        >
           <i class="icon icon-x" />
         </button>
         <h3>
@@ -169,7 +181,7 @@ export default {
             :is="componentFor(row.source)"
             v-model:value="rows[i]"
             :rows="rows"
-            :resourceType="resourceType"
+            :resource-type="resourceType"
             :user-options="userOptions"
             :mode="mode"
             :idx="i"
@@ -180,7 +192,10 @@ export default {
       </InfoBox>
     </div>
 
-    <div v-if="isEdit && isQemuInstalled" class="mt-20">
+    <div
+      v-if="isEdit && isQemuInstalled"
+      class="mt-20"
+    >
       <button
         type="button"
         class="btn btn-sm bg-primary mr-15 mb-10"