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">
-      {{ parentSriov }} <i class="icon icon-close" @click="remove()" />
+    <span
+      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">
-      <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)" />
+    <template
+      v-for="(label, index) in searchLabels"
+      :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 {
-      selected: '',
-    };
+    return { 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">
-        {{ t('harvester.tableHeaders.vmSchedule') }}{{ selected ? ` = ${selected}`: '' }}<i class="icon icon-close ml-5" @click="remove" />
+      <span
+        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()">
-            <i class="icon mr-10" :class="[logDownloading ? 'icon-spinner icon-spin' : 'icon-download']"></i> {{ t('harvester.upgradePage.repoInfo.downloadLog') }}
+          <button
+            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="on-off" @click="handleSwitch"> {{ open ? t('harvester.generic.close') : t('harvester.generic.open') }}</span>
+              <span class="bar"><PercentageBar
+                :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" >
-                <p>{{ item.name }} <span class="status" :class="{ [item.state]: true }">{{ item.state }}</span></p>
-                <PercentageBar :modelValue="item.percent" preferred-direction="MORE" />
+              <div
+                v-for="(item, i) in list"
+                :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">
-          <button aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-sm role-multi-action actions" @click="showActionMenu($event, setting)">
+        <div
+          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">
-              <button class="btn btn-sm bg-primary" @click="sendCustomKeys(keys.value)">
+            <div
+              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" />
-      <Tip class="mb-20" icon="icon icon-info" :text="t('harvester.backup.backupTargetTip')" />
+      <LabeledInput
+        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">
-        <button type="button" class="role-link btn btn-sm remove" @click="remove('mirrors', idx)">
+      <InfoBox
+        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">
-        <button type="button" class="role-link btn btn-sm remove" @click="remove('configs', idx)">
+      <InfoBox
+        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">
-      <button :disabled="disableEdit(driver.key)" type="button" class="role-link btn btn-sm remove" @click="remove(idx)">
+    <InfoBox
+      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">
-        <t k="harvester.setting.storageNetwork.tip" :raw="true" :url="storageNetworkExampleLink" />
+      <Tip
+        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"