bfg-common 1.5.244 → 1.5.246

package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/hotPlug/HotPlugNew.vue

@@ -1,7 +1,9 @@
 <template>
   <ui-stack-block :has-children="false">
     <template #stackBlockKey>
-      {{ localization.common.memoryHotPlug }}
+      <span class="limit-title">
+        {{ localization.common.memoryHotPlug }}
+      </span>
     </template>
     <template #stackBlockContent>
       <ui-checkbox
@@ -26,4 +28,8 @@ const props = defineProps<{
 }>()
 </script>
 
-<style scoped></style>
+<style scoped>
+.limit-title {
+  margin-right: 12px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue

@@ -25,6 +25,7 @@
     :is-new-hard-disk="!isNotNewHardDisk"
     :is-edit="props.isEdit"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :error-validation-fields="props.errorValidationFields"
     :index="props.index"
@@ -65,6 +66,7 @@
     :is-new-hard-disk="!isNotNewHardDisk"
     :is-edit="props.isEdit"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :error-validation-fields="props.errorValidationFields"
     :index="props.index"
@@ -103,6 +105,7 @@ const props = defineProps<{
   errorValidationFields: UI_I_ErrorValidationField[]
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   isEdit: boolean
   state?: string | number
   guestMachineType?: UI_I_OptionItem | null

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDiskNew.vue

@@ -4,6 +4,7 @@
     :is-roll-back="props.type === 'removed'"
     :removable="props.isRemovable"
     :test-id="`hard-disk-stack-block-${props.index}`"
+    is-toggle-on-stack-view-key
     @remove="emits('remove')"
     @roll-back="emits('roll-back')"
   >
@@ -98,6 +99,7 @@
         :error-validation-fields="props.errorValidationFields"
         :get-datastore-table-func="props.getDatastoreTableFunc"
         :datastore="props.datastore"
+        :is-datastore-loading="props.isDatastoreLoading"
         @change="emits('change-storage', $event)"
         @remove-error-by-title="emits('remove-error-by-title', $event)"
       />
@@ -202,6 +204,7 @@ const props = defineProps<{
   isNewHardDisk: boolean
   isEdit: boolean
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   errorValidationFields: UI_I_ErrorValidationField<string>[]
   index: number
@@ -260,6 +263,9 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     gap: 0;
   }
 
+  #device-will-removed-text-main {
+    color: var(--device-will-removed-color);
+  }
   .device-will-removed-text {
     font-size: 13px;
     color: var(--device-will-removed-color);

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDiskOld.vue

@@ -114,6 +114,7 @@
           :error-validation-fields="props.errorValidationFields"
           :get-datastore-table-func="props.getDatastoreTableFunc"
           :datastore="props.datastore"
+          :is-datastore-loading="props.isDatastoreLoading"
           @change="emits('change-storage', $event)"
           @remove-error-by-title="emits('remove-error-by-title', $event)"
         />
@@ -219,6 +220,7 @@ const props = defineProps<{
   isNewHardDisk: boolean
   isEdit: boolean
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   errorValidationFields: UI_I_ErrorValidationField<string>[]
   index: number

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/file/FileNew.vue

@@ -1,7 +1,9 @@
 <template>
   <ui-stack-block :has-children="false">
     <template #stackBlockKey>
-      {{ localization.common.diskFile }}
+      <span class="limit-title">
+        {{ localization.common.diskFile }}
+      </span>
     </template>
     <template #stackBlockContent>
       <span class="file-path"> {{ props.path }} </span>
@@ -21,13 +23,16 @@ const props = defineProps<{
 
 <style>
 :root {
-  --vm-wizard-file-path-color: #182531
+  --vm-wizard-file-path-color: #182531;
 }
 :root.dark-theme {
-  --vm-wizard-file-path-color: #e9eaec
+  --vm-wizard-file-path-color: #e9eaec;
 }
 </style>
 <style scoped>
+.limit-title {
+  margin-right: 12px;
+}
 .file-path {
   font-size: 13px;
   color: var(--vm-wizard-file-path-color);

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/Location.vue

@@ -4,6 +4,7 @@
     v-model:selected-location="selectedLocation"
     :index="props.index"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :api-error="apiError"
     :location-options="locationOptions"
@@ -20,6 +21,7 @@
     v-model:selected-location="selectedLocation"
     :index="props.index"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :api-error="apiError"
     :location-options="locationOptions"
@@ -48,6 +50,7 @@ const props = defineProps<{
   index: number
   errorValidationFields: UI_I_ErrorValidationField[]
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
 }>()
 const emits = defineEmits<{

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/LocationNew.vue

@@ -22,6 +22,7 @@
       :storage-modal-is-show="props.storageModalIsShow"
       :storage-submit="props.storageSubmit"
       :datastore="props.datastore"
+      :is-datastore-loading="props.isDatastoreLoading"
       :get-datastore-table-func="props.getDatastoreTableFunc"
       @change-storage="emits('change-storage', $event)"
       @hide="emits('hide-storage-modal')"
@@ -45,6 +46,7 @@ const selectedLocation = defineModel<string>('selectedLocation', {
 const props = defineProps<{
   index: number
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   apiError: string
   locationOptions: UI_I_OptionItem[]

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/LocationOld.vue

@@ -39,6 +39,7 @@
         :storage-modal-is-show="props.storageModalIsShow"
         :storage-submit="props.storageSubmit"
         :datastore="props.datastore"
+        :is-datastore-loading="props.isDatastoreLoading"
         :get-datastore-table-func="props.getDatastoreTableFunc"
         @change-storage="emits('change-storage', $event)"
         @hide="emits('hide-storage-modal')"
@@ -63,6 +64,7 @@ const selectedLocation = defineModel<string>('selectedLocation', {
 const props = defineProps<{
   index: number
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   apiError: string
   locationOptions: UI_I_OptionItem[]

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModal.vue

@@ -4,6 +4,7 @@
     :storage-modal-is-show="props.storageModalIsShow"
     :storage-submit="props.storageSubmit"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     @change-storage="emits('change-storage', $event)"
     @submit="emits('submit')"
@@ -14,6 +15,7 @@
     :storage-modal-is-show="props.storageModalIsShow"
     :storage-submit="props.storageSubmit"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
     @change-storage="emits('change-storage', $event)"
     @submit="emits('submit')"
@@ -29,6 +31,7 @@ const props = defineProps<{
   storageModalIsShow: boolean
   storageSubmit: null | Function
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
 }>()
 

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModalNew.vue

@@ -26,6 +26,7 @@
         <common-vm-actions-common-select-storage
           :storage-submit="props.storageSubmit"
           :datastore="props.datastore"
+          :is-datastore-loading="props.isDatastoreLoading"
           :get-datastore-table-func="props.getDatastoreTableFunc"
           hide-compatibility
           hide-alert
@@ -55,6 +56,7 @@ const props = defineProps<{
   storageModalIsShow: boolean
   storageSubmit: null | Function
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
 }>()
 

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModalOld.vue

@@ -14,6 +14,7 @@
       <common-vm-actions-common-select-storage
         :storage-submit="props.storageSubmit"
         :datastore="props.datastore"
+        :is-datastore-loading="props.isDatastoreLoading"
         :get-datastore-table-func="props.getDatastoreTableFunc"
         hide-compatibility
         @submit="emits('change-storage', $event)"
@@ -31,6 +32,7 @@ const props = defineProps<{
   storageModalIsShow: boolean
   storageSubmit: null | Function
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
 }>()
 

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/maximumSize/MaximumSizeNew.vue

@@ -1,7 +1,9 @@
 <template>
   <ui-stack-block :has-children="false">
     <template #stackBlockKey>
-      {{ localization.common.maximumSize }}
+      <span class="limit-title">
+        {{ localization.common.maximumSize }}
+      </span>
     </template>
     <template #stackBlockContent>
       <span class="maximum-size"> {{ props.freeGb }} </span>
@@ -19,16 +21,18 @@ const props = defineProps<{
 }>()
 </script>
 
-
 <style>
 :root {
-  --vm-wizard-maximum-size-color: #182531
+  --vm-wizard-maximum-size-color: #182531;
 }
 :root.dark-theme {
-  --vm-wizard-maximum-size-color: #e9eaec
+  --vm-wizard-maximum-size-color: #e9eaec;
 }
 </style>
 <style scoped>
+.limit-title {
+  margin-right: 12px;
+}
 .maximum-size {
   font-size: 13px;
   line-height: 15.73px;

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/provisioning/ProvisioningNew.vue

@@ -1,7 +1,9 @@
 <template>
   <ui-stack-block :has-children="false">
     <template #stackBlockKey>
-      {{ localization.common.diskProvisioning }}
+      <span class="limit-title">
+        {{ localization.common.diskProvisioning }}
+      </span>
     </template>
     <template #stackBlockContent>
       <ui-select
@@ -38,6 +40,9 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped>
+.limit-title {
+  margin-right: 12px;
+}
 :deep(.provisioning-field .ui-main-select-toggle) {
   width: auto;
 }

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/sharing/SharingNew.vue

@@ -1,7 +1,9 @@
 <template>
   <ui-stack-block :has-children="false">
     <template #stackBlockKey>
-      {{ localization.common.sharing }}
+      <span class="limit-title">
+        {{ localization.common.sharing }}
+      </span>
     </template>
     <template #stackBlockContent>
       <ui-select
@@ -38,6 +40,9 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped>
+.limit-title {
+  margin-right: 12px;
+}
 :deep(.sharing .ui-main-select-toggle) {
   width: 144px;
 }

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetworkNew.vue

@@ -3,6 +3,7 @@
     :has-children="true"
     :removable="props.isRemovable"
     :test-id="`network-stack-block-${props.index}`"
+    is-toggle-on-stack-view-key
     @remove="emits('remove')"
   >
     <template #stackBlockKey>
@@ -111,7 +112,6 @@ const onChangeLocation = (data: UI_T_SelectedValue): void => {
 </script>
 
 <style scoped lang="scss">
-
 :deep(.network-select .ui-main-select-toggle) {
   display: flex;
   justify-content: space-between;

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/New.vue

@@ -73,14 +73,15 @@ const modalTexts = ref<UI_I_ModalTexts>({
 </script>
 
 <style scoped lang="scss">
+.network-select-dialog-content {
+  margin: 0 32px;
+}
 .count-text {
   text-align: right;
   font-size: 12px;
   font-weight: 400;
   color: #9da6ad;
-  margin-bottom: 8px;
-  margin-top: 8px;
+  margin: 8px 32px;
   text-transform: lowercase;
-  margin-right: 8px;
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/Table.vue

@@ -3,6 +3,7 @@
     :data="data"
     :options="options"
     :texts="tableTexts"
+    :default-layout="false"
     size="sm"
     test-id="data-table-main"
     class="network-table"

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbControllerNew.vue

@@ -3,6 +3,7 @@
     :has-children="true"
     is-disabled
     test-id="usb-controller-stack-block"
+    is-toggle-on-stack-view-key
   >
     <template #stackBlockKey>
       <div

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/OtherNew.vue

@@ -1,5 +1,9 @@
 <template>
-  <ui-stack-block :has-children="true" test-id="other-stack-block">
+  <ui-stack-block
+    :has-children="true"
+    test-id="other-stack-block"
+    is-toggle-on-stack-view-key
+  >
     <template #stackBlockKey>
       <div
         id="vm-wizard-toggle-block-other"
@@ -9,7 +13,9 @@
       </div>
     </template>
     <template #stackBlockContent>
-      <div class="additional-hardware">{{ localization.common.additionalHardware }} (2)</div>
+      <div class="additional-hardware">
+        {{ localization.common.additionalHardware }} (2)
+      </div>
     </template>
     <template #stackChildren>
       <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices />

package/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/ReservationNew.vue

@@ -23,7 +23,7 @@
           v-model="reservationType"
           :items="props.reservationTypeOptions"
           :disabled="props.disabled"
-          test-id="reserve-type-select"
+          :test-id="`reserve-type-select-${props.componentType}`"
           class="unit"
           size="sm"
         />
@@ -93,12 +93,15 @@ const onSelectReservation = (value: number): void => {
 </script>
 
 <style scoped>
-
 .reservation-content {
   gap: 8px;
 }
 
 .reserve-guest-memory-wrap {
   margin-top: 12px;
+
+  .ui-checkbox-label {
+    min-height: unset !important;
+  }
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCardNew.vue

@@ -1,5 +1,9 @@
 <template>
-  <ui-stack-block :has-children="true" test-id="video-card-stack-block">
+  <ui-stack-block
+    :has-children="true"
+    test-id="video-card-stack-block"
+    is-toggle-on-stack-view-key
+  >
     <template #stackBlockKey>
       <div
         id="vm-wizard-toggle-block-video-card"
@@ -88,7 +92,6 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped lang="scss">
-
 :deep(.video-card-select .ui-main-select-toggle) {
   display: flex;
   justify-content: space-between;

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/BootOptionsNew.vue

@@ -1,5 +1,9 @@
 <template>
-  <ui-stack-block :has-children="true" test-id="boot-options-stack-block">
+  <ui-stack-block
+    :has-children="true"
+    test-id="boot-options-stack-block"
+    is-toggle-on-stack-view-key
+  >
     <template #stackBlockKey>
       <div
         id="vm-wizard-toggle-block-boot-option"

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/OrderNew.vue

@@ -61,6 +61,10 @@ const onGrab = (item: any): void => {
 </script>
 
 <style scoped lang="scss">
+.device-icon {
+  width: 20px;
+  height: 20px;
+}
 .device-name {
   margin-left: -4px;
 }

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsNew.vue

@@ -2,6 +2,7 @@
   <ui-stack-block
     :has-children="true"
     test-id="general-options-stack-block"
+    is-toggle-on-stack-view-key
     @toggle="blockIsOpen = $event"
   >
     <template #stackBlockKey>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/New.vue

@@ -1,12 +1,18 @@
 <template>
-  <ui-stack-block :has-children="true" test-id="remote-console-stack-block">
+  <ui-stack-block
+    :has-children="true"
+    test-id="remote-console-stack-block"
+    is-toggle-on-stack-view-key
+  >
     <template #stackBlockKey>
       <div
         id="vm-wizard-toggle-block-remote-console"
         data-id="vm-wizard-toggle-block-remote-console"
         class="flex-align-center"
       >
-        <span class="title">{{ localization.common.remoteConsoleOptions }}</span>
+        <span class="title">{{
+          localization.common.remoteConsoleOptions
+        }}</span>
         <ui-icon
           v-show="props.remoteConsoleOptionsInvalid"
           width="18px"

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue

@@ -47,7 +47,7 @@ const defaultForm: UI_I_DefaultForm = {
     validations: [
       {
         value: 'password',
-        errorText: localization.value.common.changePasswordError,
+        errorText: localization.value.common.passwordsMustLeast8CharactersLongContainUpperAndLowerCaseLetterNumberAndSpecialCharacter,
       },
     ],
   },

package/components/common/vm/actions/common/customizeHardware/vmoptions/tools/ToolsNew.vue

@@ -1,5 +1,9 @@
 <template>
-  <ui-stack-block :has-children="true" test-id="tools-stack-block">
+  <ui-stack-block
+    :has-children="true"
+    test-id="tools-stack-block"
+    is-toggle-on-stack-view-key
+  >
     <template #stackBlockKey>
       <div
         id="vm-wizard-toggle-block-tools"

package/components/common/vm/actions/common/select/storage/Old.vue

@@ -17,6 +17,7 @@
         :body-items="bodyItems"
         :total-items="bodyItems.length"
         :total-pages="1"
+        :loading="props.isDatastoreLoading"
         type="radio"
         test-id="storage-table"
         server-off
@@ -69,6 +70,7 @@ const pagination = defineModel<UI_I_Pagination>('pagination', {
 
 const props = defineProps<{
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   errors: string[]
   selectedStorage: UI_I_DatastoreTableItem | null
   hideCompatibility?: boolean

package/components/common/vm/actions/common/select/storage/Storage.vue

@@ -4,6 +4,7 @@
     v-model:selected-row="selectedRow"
     v-model:pagination="pagination"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :errors="errors"
     :selected-storage="selectedStorage"
     :hide-compatibility="props.hideCompatibility"
@@ -16,6 +17,7 @@
     v-model:selected-row="selectedRow"
     v-model:pagination="pagination"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :errors="errors"
     :selected-storage="selectedStorage"
     :hide-compatibility="props.hideCompatibility"
@@ -35,6 +37,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 const props = defineProps<{
   storageSubmit: null | Function
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   storage?: UI_I_DatastoreTableItem
   hideCompatibility?: boolean

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -16,7 +16,7 @@
       <ui-data-table
         :data="data"
         :options="tableOptions"
-        :loading="loading"
+        :loading="props.isDatastoreLoading"
         :default-layout="false"
         :texts="tableTexts"
         test-id="select-storage-data-table"
@@ -29,6 +29,10 @@
             {{ storageCount }}
           </h3></template
         >
+        <template #name="{ item }">
+          <ui-icon name="datastores" width="18" height="18" class="mr-1" />
+          {{ item.text }}
+        </template>
         <template #state="{ item }">
           <ui-chip :color="item.data.color" rounded>
             <ui-icon :name="item.data.iconClassName" width="14" height="14" />
@@ -86,6 +90,7 @@ const selectedRow = defineModel<number | null>('selectedRow')
 
 const props = defineProps<{
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   errors: string[]
   selectedStorage: UI_I_DatastoreTableItem | null
   hideCompatibility?: boolean
@@ -108,13 +113,13 @@ const storageCount = computed<string>(() =>
     data.value.body.length.toString()
   )
 )
-const loading = ref<boolean>(true)
+// const loading = ref<boolean>(true)
 const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
 
 watch(
   () => props.datastore,
   (newValue: UI_I_DatastoreTableItem[]) => {
-    loading.value = true
+    // loading.value = true
 
     // if (!newValue.length || data.value.body.length) return
 
@@ -124,14 +129,14 @@ watch(
       selectedRow.value
     )
 
-    loading.value = false
+    // loading.value = false
   },
   { immediate: true, deep: true }
   // { deep: true }
 )
 
 const onSelectRow = (selectedData: UI_I_DataTable): void => {
-  const selectedId = selectedData[0]?.data[0]?.key
+  const selectedId = selectedData[0]?.data[0]?.data.id
   const selectedItemIndex = props.datastore.findIndex(
     (item) => item.id === selectedId
   )

package/components/common/vm/actions/common/select/storage/new/lib/config/table.ts

@@ -257,9 +257,10 @@ export const tableBodyFunc = (
       isSelected: key === selectedRow,
       data: [
         {
-          key: item.id,
+          key: 'name',
           col: 0,
           text: item.name,
+          data: { id: item.id },
         },
         {
           key: 'state',

package/components/common/vm/actions/editSettings/EditSettings.vue

@@ -8,6 +8,7 @@
     :project="props.project"
     :loading="loadingLocal"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :networks-table="props.networksTable"
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
@@ -42,6 +43,7 @@
     :project="props.project"
     :loading="loadingLocal"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :networks-table="props.networksTable"
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
@@ -110,6 +112,7 @@ const props = defineProps<{
   vmCpuHelpTextSecond: string
   vmId: string
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   validateSendDataFunc: UI_T_EditVmFinishFunc
   getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
   state?: string | number