bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/LimitIopsNew.vue

@@ -0,0 +1,63 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.limitIops }}
+      </template>
+      <template #stackBlockContent>
+        <div class="limit-iops-content">
+          <ui-select
+            :id="`vm-wizard-disk-device-io-field-${props.index}`"
+            v-model="limitIopsType"
+            width="auto"
+            :items="props.limitIopsTypeOptions"
+            :class="`vm-wizard-disk-device-io-field-${props.index} limit-iops`"
+            :test-id="`vm-wizard-disk-device-io-field-${props.index}`"
+            @click.stop
+          />
+
+          <ui-combobox
+            v-show="limitIopsType !== 'unlimited'"
+            v-model.number="limitIops"
+            :items="props.limitIopsOptions"
+            :error-text="props.limitIopsErrorText"
+            :test-id="`limit-iops-combobox-${props.index}`"
+            class="limit-iops"
+            @click.stop
+          />
+        </div>
+      </template>
+    </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const limitIops = defineModel<number>('limit-iops')
+const limitIopsType = defineModel<string>('limit-iops-type')
+
+const props = defineProps<{
+  index: number
+  errorText: string
+  limitIopsErrorText: string
+  limitIopsOptions: UI_I_OptionItem[]
+  limitIopsTypeOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped>
+.limit-iops-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:deep(.limit-iops .ui-main-select-toggle) {
+  width: 144px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/LimitIopsOld.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.limitIops }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!props.errorText"
+            :selector="`.vm-wizard-disk-device-io-field-${props.index}`"
+            @remove="emits('remove-error')"
+          >
+            <template #elem>
+              <div class="select mr-1">
+                <select
+                  :id="`vm-wizard-disk-device-io-field-${props.index}`"
+                  v-model="limitIopsType"
+                  :data-id="`vm-wizard-disk-device-io-field-${props.index}`"
+                  :class="`vm-wizard-disk-device-io-field-${props.index}`"
+                  @click.stop
+                >
+                  <option
+                    v-for="(item, key) in props.limitIopsTypeOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ props.errorText }}</template>
+          </atoms-tooltip-error>
+
+          <atoms-combobox
+            v-show="limitIopsType !== 'unlimited'"
+            v-model.number="limitIops"
+            :items="props.limitIopsOptions"
+            :test-id="`limit-iops-combobox-${props.index}`"
+            @click.stop
+          />
+          <div v-show="props.limitIopsErrorText" class="flex-align-center">
+            <atoms-tooltip>
+              <template #elem>
+                <atoms-the-icon
+                  width="24px"
+                  height="24px"
+                  class="is-error tooltip-trigger"
+                  name="info"
+                />
+              </template>
+              <template #content>
+                {{ props.limitIopsErrorText }}
+              </template>
+            </atoms-tooltip>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const limitIops = defineModel<number>('limit-iops')
+const limitIopsType = defineModel<string>('limit-iops-type')
+
+const props = defineProps<{
+  index: number
+  errorText: string
+  limitIopsErrorText: string
+  limitIopsOptions: UI_I_OptionItem[]
+  limitIopsTypeOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped></style>

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

@@ -35,16 +35,7 @@
     </atoms-stack-block>
 
     <Teleport to="body">
-      <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location-storage-modal-new
-        v-if="isNewView"
-        :storage-modal-is-show="storageModalIsShow"
-        :datastore="props.datastore"
-        @change-storage="onChangeStorage"
-        @hide="onHideStorageModal"
-        @submit="onSubmitStorageModal"
-      />
-      <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location-storage-modal-old
-        v-else
+      <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location-storage-modal
         :storage-modal-is-show="storageModalIsShow"
         :storage-submit="storageSubmit"
         :datastore="props.datastore"
@@ -81,10 +72,6 @@ const emits = defineEmits<{
   (event: 'remove-error-by-title', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const selectedLocation = ref<string>(props.location?.id || '')
 
 const storages = ref<UI_I_DatastoreTableItem[]>([])
@@ -119,9 +106,11 @@ watch(
   { immediate: true }
 )
 
-const storageSubmit = ref<number>(0)
+const storageSubmit = ref<null | Function>(null)
 const onSubmitStorageModal = (): void => {
-  storageSubmit.value++
+  storageSubmit.value = (_isValid: boolean): void => {
+    storageSubmit.value = null
+  }
 }
 const storageModalIsShow = ref<boolean>(false)
 const onHideStorageModal = (): void => {

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

@@ -0,0 +1,52 @@
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location-storage-modal-new
+    v-if="isNewView"
+    :storage-modal-is-show="props.storageModalIsShow"
+    :storage-submit="props.storageSubmit"
+    :datastore="props.datastore"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    @change-storage="emits('change-storage', $event)"
+    @submit="emits('submit')"
+    @hide="emits('hide')"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location-storage-modal-old
+    v-else
+    :storage-modal-is-show="props.storageModalIsShow"
+    :storage-submit="props.storageSubmit"
+    :datastore="props.datastore"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    @change-storage="emits('change-storage', $event)"
+    @submit="emits('submit')"
+    @hide="emits('hide')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+
+const props = defineProps<{
+  storageModalIsShow: boolean
+  storageSubmit: null | Function
+  datastore: UI_I_DatastoreTableItem[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-storage', value: UI_I_DatastoreTableItem): void
+  (event: 'submit'): void
+  (event: 'hide'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+</script>
+
+<style scoped lang="scss">
+.storage-modal-old {
+  :deep(.modal-dialog) {
+    width: 864px;
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <ui-modal
+    v-if="props.storageModalIsShow"
+    show
+    :title="localization.common.selectStorage"
+    :texts="texts"
+    test-id="storage-modal-new"
+    size="md"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  >
+    <template #content>
+      <div class="select-storage-modal-container">
+        <span class="description-text">{{
+          localization.common
+            .followingDatastoresAccessibleDestinationResourceThatSelected
+        }}</span>
+        <common-vm-actions-common-select-storage
+          :storage-submit="props.storageSubmit"
+          :datastore="props.datastore"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          hide-compatibility
+          @submit="emits('change-storage', $event)"
+        />
+      </div>
+    </template>
+    <template #footerLeftContent>
+      <span></span>
+    </template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  storageModalIsShow: boolean
+  storageSubmit: null | Function
+  datastore: UI_I_DatastoreTableItem[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-storage', value: UI_I_DatastoreTableItem): void
+  (event: 'submit'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = ref<UI_I_ModalTexts>({
+  button2: localization.value.common.select,
+})
+
+</script>
+
+<style scoped lang="scss">
+.select-storage-modal-container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+  padding-left: 32px;
+  padding-bottom: 5px;
+
+  .description-text {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14.52px;
+    color: #9da6ad;
+  }
+}
+</style>

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

@@ -29,7 +29,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   storageModalIsShow: boolean
-  storageSubmit: number
+  storageSubmit: null | Function
   datastore: UI_I_DatastoreTableItem[]
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
 }>()

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

@@ -0,0 +1,23 @@
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-new
+    v-if="isNewView"
+    :free-gb="freeGb"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-old
+    v-else
+    :free-gb="freeGb"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  freeMb: number
+}>()
+
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const freeGb = computed<number>(() => $binary.round(props.freeMb))
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,28 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.maximumSize }}
+    </template>
+    <template #stackBlockContent>
+      <span class="maximum-size"> {{ props.freeGb }} </span>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  freeGb: number
+}>()
+</script>
+
+<style scoped>
+.maximum-size {
+  font-size: 13px;
+  line-height: 15.73px;
+  color: #182531;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.maximumSize }}
+      </template>
+      <template #stackBlockContent>
+        <span> {{ props.freeGb }} </span>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  freeGb: number
+}>()
+
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/mode/Mode.vue

@@ -1,39 +1,22 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.diskMode }}
-      </template>
-      <template #stackBlockContent>
-        <atoms-tooltip-error
-          :has-error="!!apiError"
-          :selector="`.vm-wizard-disk-device-mode-field-${props.index}`"
-          @remove="onRemoveValidationError"
-        >
-          <template #elem>
-            <div class="select">
-              <select
-                :id="`vm-wizard-disk-device-mode-field-${props.index}`"
-                v-model="diskModeLocal"
-                :data-id="`vm-wizard-disk-device-mode-field-${props.index}`"
-                :class="`vm-wizard-disk-device-mode-field-${props.index}`"
-                :disabled="props.disabled"
-              >
-                <option
-                  v-for="item in diskModeOptions"
-                  :key="item.value"
-                  :value="item.value"
-                >
-                  {{ item.text }}
-                </option>
-              </select>
-            </div>
-          </template>
-          <template #content>{{ apiError }}</template>
-        </atoms-tooltip-error>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-mode-new
+    v-if="isNewView"
+    v-model:disk-mode="diskMode"
+    :index="props.index"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :disk-mode-options="diskModeOptions"
+    @remove-error="onRemoveValidationError"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-mode-old
+    v-else
+    v-model:disk-mode="diskMode"
+    :index="props.index"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :disk-mode-options="diskModeOptions"
+    @remove-error="onRemoveValidationError"
+  />
 </template>
 
 <script setup lang="ts">
@@ -42,32 +25,26 @@ import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import { diskModeOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/mode/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const diskMode = defineModel<string>('disk-mode')
 
 const props = defineProps<{
-  diskMode: string
   index: number
   disabled: boolean
   errorValidationFields: UI_I_ErrorValidationField<string>[]
 }>()
 const emits = defineEmits<{
-  (event: 'update:disk-mode', value: string): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const diskModeOptions = ref<UI_I_OptionItem[]>(
   diskModeOptionsFunc(localization.value)
 )
 
-const diskModeLocal = computed<string>({
-  get() {
-    return props.diskMode
-  },
-  set(newValue) {
-    emits('update:disk-mode', newValue)
-  },
-})
-
 const typeError = computed<string>(
   () => `disk_devices[${props.index}].disk_mode`
 )

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/mode/ModeNew.vue

@@ -0,0 +1,46 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.diskMode }}
+      </template>
+      <template #stackBlockContent>
+        <ui-select
+          :id="`vm-wizard-disk-device-mode-field-${props.index}`"
+          v-model="diskMode"
+          width="auto"
+          :items="props.diskModeOptions"
+          :disabled="props.disabled"
+          :test-id="`vm-wizard-disk-device-mode-field-${props.index}`"
+          :class="`vm-wizard-disk-device-mode-field-${props.index} mode-field`"
+          :error-text="props.errorText"
+          @click.stop
+        />
+      </template>
+    </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const diskMode = defineModel<string>('disk-mode')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  diskModeOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped>
+:deep(.mode-field .ui-main-select-toggle) {
+  width: 144px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/mode/ModeOld.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.cache }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!props.errorText"
+          :selector="`.vm-wizard-disk-device-cache-field-${props.index}`"
+          @remove="emits('remove-error')"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-cache-field-${props.index}`"
+                v-model="cache"
+                :data-id="`vm-wizard-disk-device-cache-field-${props.index}`"
+                :class="`vm-wizard-disk-device-cache-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in props.cacheOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ props.errorText }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const cache = defineModel<string>('cache')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  cacheOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>