bfg-common 1.3.21 → 1.3.23

package/components/common/wizards/vm/migrate/Migrate.vue

@@ -1,270 +1,270 @@
-<template>
-  <atoms-modal-by-steps
-    test-id="clone-vm-wizard"
-    :show="true"
-    :title="localization.migrate"
-    :step-items="stepItems"
-    :step-position="stepPosition"
-    :loading="loading"
-    class="migrate-vm"
-    @next="onNextStep"
-    @back="onBack"
-    @change-step="onChangeStep"
-    @finish="onFinish"
-    @hide="onHideModal"
-  >
-    <template #contentHeading><span /></template>
-    <template #modalBody="{ title, description }">
-      <div class="migrate-vm__wrapper">
-        <common-wizards-vm-migrate-content-heading
-          :title="title"
-          :description="description"
-        />
-
-        <div class="migrate-vm__headline"></div>
-        <common-wizards-vm-migrate-select-type
-          v-show="currentBlockId === 'select-migration-type'"
-          v-model="vmMigrateType"
-          :project="props.project"
-        />
-
-        <common-wizards-vm-migrate-select-target-server
-          v-show="currentBlockId === 'select-target-center'"
-        />
-
-        <common-wizards-vm-migrate-select-compute-resource
-          v-show="currentBlockId === 'select-compute-resource'"
-          :submit="selectComputeResourceSubmit"
-          :get-compute-resource-data="props.getComputeResourceData"
-          :migrate-type="vmMigrateType"
-          :compute-resource-data="props.computeResourceTableData"
-          :compute-resource-tree="props.computeResourceTree"
-          @next-step="onSelectComputeResourceAndNext"
-        />
-
-        <common-wizards-vm-migrate-select-storage
-          v-show="currentBlockId === 'select-storage'"
-          :submit="selectStorageSubmit"
-          :get-datastore-table-func="props.getDatastoreTableFunc"
-          :datastore="props.datastore"
-          :connected-storage-id-default="connectedStorageIdOnVm"
-          :configure-per-disks="props.configurePerDisks"
-          @next-step="onSelectStorageAndNext"
-        />
-
-        <common-wizards-vm-migrate-select-network
-          v-show="currentBlockId === 'select-networks'"
-        />
-
-        <common-wizards-vm-migrate-select-priority
-          v-show="currentBlockId === 'select-motion-priority'"
-          v-model="selectedVMotionPriority"
-        />
-
-        <common-wizards-vm-common-ready-complete
-          v-if="currentBlockId === 'ready-complete'"
-          :ready-complete-table-info="dataReadyView"
-        />
-      </div>
-    </template>
-  </atoms-modal-by-steps>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_TablePayload } from '~/lib/models/store/interfaces'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_VmSettings } from '~/lib/models/store/vm/interfaces'
-import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/lib/models/types'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/lib/models/interfaces'
-import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
-import type { UI_I_SelectStorageReadyData } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/interfaces'
-import type { UI_I_MigrateVerticalStepItem } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
-import type { UI_T_SelectVMotionPriority } from '~/components/common/wizards/vm/migrate/select/priority/lib/models/types'
-import type { UI_I_CollectedDataFormLocal } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
-import type { UI_I_ComputeResourceDataLocal } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/interfaces'
-import { stepItemsFunc } from '~/components/common/wizards/vm/migrate/lib/utils'
-import { constructDataReadyViewFunc } from '~/components/common/wizards/vm/migrate/lib/config/constructDataReady'
-
-const props = defineProps<{
-  project: UI_T_Project
-  vmSettings: UI_I_VmSettings | null
-  vmName: string
-  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-  getComputeResourceData: (payload: UI_I_TablePayload) => Promise<void>
-  datastore: UI_I_DatastoreTableItem[]
-  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
-  computeResourceTableData?: any
-  computeResourceTree?: UI_I_TreeNode
-  readyCompleteTableInfo?: any // пока так потом если будет нужен изменит или удалить
-  finishFunc: any
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const stepPosition = ref<number>(0)
-const loading = ref<boolean>(false)
-
-const selectStorageSubmit = ref<number>(0)
-const selectComputeResourceSubmit = ref<number>(0)
-
-const selectedVMotionPriority = ref<UI_T_SelectVMotionPriority>('high')
-
-const vmMigrateType = ref<UI_T_VmMigrateType>(
-  props.project === 'procurator' ? 'storage' : 'resource'
-)
-const dataReadyView = ref<UI_I_TableInfoItem[]>([])
-
-const stepItems = computed<UI_I_MigrateVerticalStepItem[]>(() =>
-  stepItemsFunc(localization.value, vmMigrateType.value, props.project)
-)
-const currentBlockId = computed<string>(
-  () => stepItems.value[stepPosition.value].id
-)
-
-const connectedStorageIdOnVm = computed<string>(
-  () => props.vmSettings?.storage.id || ''
-)
-
-const dataFormLocal = ref<UI_I_CollectedDataFormLocal>({
-  selectedComputeResource: null,
-  selectStorage: null,
-  selectedVMotionPriority: 'high',
-})
-
-const onSelectComputeResourceAndNext = (
-  event: UI_I_ComputeResourceDataLocal
-): void => {
-  dataFormLocal.value.selectedComputeResource = event
-
-  onNextStep(true)
-}
-const onSelectStorageAndNext = (event: UI_I_SelectStorageReadyData): void => {
-  dataFormLocal.value.selectStorage = event
-  // dataReadyView.value = constructDataReadyViewFunc<UI_I_SelectStorageReadyData>(
-  //   vmMigrateType.value,
-  //   props.vmName,
-  //   event
-  // )
-
-  onNextStep(true)
-}
-
-watch(
-  currentBlockId,
-  (newValue: string) => {
-    if (newValue !== 'ready-complete') return
-
-    dataReadyView.value = constructDataReadyViewFunc<any>(
-      vmMigrateType.value,
-      props.vmName,
-      dataFormLocal.value
-    )
-  },
-  { deep: true, immediate: true }
-)
-const onFinish = (): void => {
-  loading.value = true
-  props.finishFunc().then(() => {
-    onHideModal()
-    loading.value = false
-  })
-}
-
-let cashStep = -1
-const onNextStep = (force = false): void => {
-  const isValid = checkSubmit(force)
-  if (!isValid) return
-
-  const isDisabled = stepItems.value[cashStep]?.disabled
-  if (cashStep !== -1 && !isDisabled) {
-    stepPosition.value = cashStep
-    cashStep = -1
-    return
-  }
-
-  stepItems.value[stepPosition.value].complete = true
-  stepItems.value[stepPosition.value + 1].disabled = false
-  stepPosition.value++
-}
-const checkSubmit = (force = false): boolean => {
-  if (currentBlockId.value === 'select-storage' && !force) {
-    selectStorageSubmit.value++
-    return false
-  }
-
-  if (currentBlockId.value === 'select-compute-resource' && !force) {
-    selectComputeResourceSubmit.value++
-    return false
-  }
-
-  return true
-}
-const onBack = (): void => {
-  stepPosition.value--
-}
-const onChangeStep = (key: number): void => {
-  if (key < stepPosition.value) {
-    stepPosition.value = key
-    return
-  }
-
-  const isValid = checkSubmit()
-  if (!isValid) {
-    cashStep = key
-    return
-  }
-
-  stepPosition.value = key
-}
-
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-@import 'assets/scss/common/mixins.scss';
-.migrate-vm {
-  &__wrapper {
-    @include flex($dir: column);
-    //height: 100%;
-    padding-left: 10px;
-  }
-}
-
-:deep(.has-solid.close-icon.clr-icon) {
-  width: 20px;
-  top: 0;
-}
-:deep(.modal .modal-dialog .modal-content .modal-footer) {
-  flex: unset;
-  height: unset;
-  min-height: unset;
-}
-:deep(.wizard-modal-titlebar h3) {
-  color: #000;
-  font-size: 24px;
-  font-weight: 200;
-  line-height: 27px;
-  margin: 0;
-  padding: 0;
-}
-:deep(.clr-wizard-stepnav-item) {
-  padding-left: 0;
-}
-:deep(.clr-wizard-stepnav
-    .clr-wizard-stepnav-item
-    button
-    .clr-wizard-stepnav-link-title) {
-  width: 189px;
-  font-weight: 700;
-  font-size: 13px;
-}
-</style>
+<template>
+  <atoms-modal-by-steps
+    test-id="clone-vm-wizard"
+    :show="true"
+    :title="localization.migrate"
+    :step-items="stepItems"
+    :step-position="stepPosition"
+    :loading="loading"
+    class="migrate-vm"
+    @next="onNextStep"
+    @back="onBack"
+    @change-step="onChangeStep"
+    @finish="onFinish"
+    @hide="onHideModal"
+  >
+    <template #contentHeading><span /></template>
+    <template #modalBody="{ title, description }">
+      <div class="migrate-vm__wrapper">
+        <common-wizards-vm-migrate-content-heading
+          :title="title"
+          :description="description"
+        />
+
+        <div class="migrate-vm__headline"></div>
+        <common-wizards-vm-migrate-select-type
+          v-show="currentBlockId === 'select-migration-type'"
+          v-model="vmMigrateType"
+          :project="props.project"
+        />
+
+        <common-wizards-vm-migrate-select-target-server
+          v-show="currentBlockId === 'select-target-center'"
+        />
+
+        <common-wizards-vm-migrate-select-compute-resource
+          v-show="currentBlockId === 'select-compute-resource'"
+          :submit="selectComputeResourceSubmit"
+          :get-compute-resource-data="props.getComputeResourceData"
+          :migrate-type="vmMigrateType"
+          :compute-resource-data="props.computeResourceTableData"
+          :compute-resource-tree="props.computeResourceTree"
+          @next-step="onSelectComputeResourceAndNext"
+        />
+
+        <common-wizards-vm-migrate-select-storage
+          v-show="currentBlockId === 'select-storage'"
+          :submit="selectStorageSubmit"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          :connected-storage-id-default="connectedStorageIdOnVm"
+          :configure-per-disks="props.configurePerDisks"
+          @next-step="onSelectStorageAndNext"
+        />
+
+        <common-wizards-vm-migrate-select-network
+          v-show="currentBlockId === 'select-networks'"
+        />
+
+        <common-wizards-vm-migrate-select-priority
+          v-show="currentBlockId === 'select-motion-priority'"
+          v-model="selectedVMotionPriority"
+        />
+
+        <common-wizards-vm-common-ready-complete
+          v-if="currentBlockId === 'ready-complete'"
+          :ready-complete-table-info="dataReadyView"
+        />
+      </div>
+    </template>
+  </atoms-modal-by-steps>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TablePayload } from '~/lib/models/store/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_VmSettings } from '~/lib/models/store/vm/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/lib/models/types'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_SelectStorageReadyData } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/interfaces'
+import type { UI_I_MigrateVerticalStepItem } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
+import type { UI_T_SelectVMotionPriority } from '~/components/common/wizards/vm/migrate/select/priority/lib/models/types'
+import type { UI_I_CollectedDataFormLocal } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
+import type { UI_I_ComputeResourceDataLocal } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/interfaces'
+import { stepItemsFunc } from '~/components/common/wizards/vm/migrate/lib/utils'
+import { constructDataReadyViewFunc } from '~/components/common/wizards/vm/migrate/lib/config/constructDataReady'
+
+const props = defineProps<{
+  project: UI_T_Project
+  vmSettings: UI_I_VmSettings | null
+  vmName: string
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  getComputeResourceData: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+  computeResourceTableData?: any
+  computeResourceTree?: UI_I_TreeNode
+  readyCompleteTableInfo?: any // пока так потом если будет нужен изменит или удалить
+  finishFunc: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const stepPosition = ref<number>(0)
+const loading = ref<boolean>(false)
+
+const selectStorageSubmit = ref<number>(0)
+const selectComputeResourceSubmit = ref<number>(0)
+
+const selectedVMotionPriority = ref<UI_T_SelectVMotionPriority>('high')
+
+const vmMigrateType = ref<UI_T_VmMigrateType>(
+  props.project === 'procurator' ? 'storage' : 'resource'
+)
+const dataReadyView = ref<UI_I_TableInfoItem[]>([])
+
+const stepItems = computed<UI_I_MigrateVerticalStepItem[]>(() =>
+  stepItemsFunc(localization.value, vmMigrateType.value, props.project)
+)
+const currentBlockId = computed<string>(
+  () => stepItems.value[stepPosition.value].id
+)
+
+const connectedStorageIdOnVm = computed<string>(
+  () => props.vmSettings?.storage.id || ''
+)
+
+const dataFormLocal = ref<UI_I_CollectedDataFormLocal>({
+  selectedComputeResource: null,
+  selectStorage: null,
+  selectedVMotionPriority: 'high',
+})
+
+const onSelectComputeResourceAndNext = (
+  event: UI_I_ComputeResourceDataLocal
+): void => {
+  dataFormLocal.value.selectedComputeResource = event
+
+  onNextStep(true)
+}
+const onSelectStorageAndNext = (event: UI_I_SelectStorageReadyData): void => {
+  dataFormLocal.value.selectStorage = event
+  // dataReadyView.value = constructDataReadyViewFunc<UI_I_SelectStorageReadyData>(
+  //   vmMigrateType.value,
+  //   props.vmName,
+  //   event
+  // )
+
+  onNextStep(true)
+}
+
+watch(
+  currentBlockId,
+  (newValue: string) => {
+    if (newValue !== 'ready-complete') return
+
+    dataReadyView.value = constructDataReadyViewFunc<any>(
+      vmMigrateType.value,
+      props.vmName,
+      dataFormLocal.value
+    )
+  },
+  { deep: true, immediate: true }
+)
+const onFinish = (): void => {
+  loading.value = true
+  props.finishFunc().then(() => {
+    onHideModal()
+    loading.value = false
+  })
+}
+
+let cashStep = -1
+const onNextStep = (force = false): void => {
+  const isValid = checkSubmit(force)
+  if (!isValid) return
+
+  const isDisabled = stepItems.value[cashStep]?.disabled
+  if (cashStep !== -1 && !isDisabled) {
+    stepPosition.value = cashStep
+    cashStep = -1
+    return
+  }
+
+  stepItems.value[stepPosition.value].complete = true
+  stepItems.value[stepPosition.value + 1].disabled = false
+  stepPosition.value++
+}
+const checkSubmit = (force = false): boolean => {
+  if (currentBlockId.value === 'select-storage' && !force) {
+    selectStorageSubmit.value++
+    return false
+  }
+
+  if (currentBlockId.value === 'select-compute-resource' && !force) {
+    selectComputeResourceSubmit.value++
+    return false
+  }
+
+  return true
+}
+const onBack = (): void => {
+  stepPosition.value--
+}
+const onChangeStep = (key: number): void => {
+  if (key < stepPosition.value) {
+    stepPosition.value = key
+    return
+  }
+
+  const isValid = checkSubmit()
+  if (!isValid) {
+    cashStep = key
+    return
+  }
+
+  stepPosition.value = key
+}
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+@import 'assets/scss/common/mixins.scss';
+.migrate-vm {
+  &__wrapper {
+    @include flex($dir: column);
+    //height: 100%;
+    padding-left: 10px;
+  }
+}
+
+:deep(.has-solid.close-icon.clr-icon) {
+  width: 20px;
+  top: 0;
+}
+:deep(.modal .modal-dialog .modal-content .modal-footer) {
+  flex: unset;
+  height: unset;
+  min-height: unset;
+}
+:deep(.wizard-modal-titlebar h3) {
+  color: #000;
+  font-size: 24px;
+  font-weight: 200;
+  line-height: 27px;
+  margin: 0;
+  padding: 0;
+}
+:deep(.clr-wizard-stepnav-item) {
+  padding-left: 0;
+}
+:deep(.clr-wizard-stepnav
+    .clr-wizard-stepnav-item
+    button
+    .clr-wizard-stepnav-link-title) {
+  width: 189px;
+  font-weight: 700;
+  font-size: 13px;
+}
+</style>