bfg-common 1.2.106 → 1.2.107

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

@@ -0,0 +1,202 @@
+<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-storage
+          v-show="currentBlockId === 'select-storage'"
+          :submit="selectStorageSubmit"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          :connected-storage-id="connectedStorageIdOnVm"
+          :configure-per-disks="props.configurePerDisks"
+          @next-step="onSelectStorageAndNext"
+        />
+      </div>
+
+      <common-wizards-vm-common-ready-complete
+        v-if="currentBlockId === 'ready-complete'"
+        :ready-complete-table-info="dataReadyView"
+      />
+    </template>
+  </atoms-modal-by-steps>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_Project } from '~/models/types'
+import type { UI_I_TablePayload } from '~/models/store/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import type { UI_I_VmSettings } from '~/models/store/vm/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/models/types'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/models/interfaces'
+import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+import { stepItemsFunc } from '~/components/common/wizards/vm/migrate/utils'
+import { constructDataReadyViewFunc } from '~/components/common/wizards/vm/migrate/config/constructDataReady'
+
+const props = defineProps<{
+  project: UI_T_Project
+  vmSettings: UI_I_VmSettings | null
+  vmName: string
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+  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 vmMigrateType = ref<UI_T_VmMigrateType>(
+  props.project === 'procurator' ? 'storage' : 'resource'
+)
+const dataReadyView = ref<UI_I_TableInfoItem[]>([])
+
+const stepItems = computed<any[]>(() =>
+  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 onSelectStorageAndNext = (event: any): void => {
+  dataReadyView.value = constructDataReadyViewFunc<any>(
+    vmMigrateType.value,
+    props.vmName,
+    event
+  )
+
+  onNextStep(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
+  }
+
+  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>

package/components/common/wizards/vm/migrate/config/constructDataReady.ts

@@ -0,0 +1,79 @@
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/models/types'
+import { UI_E_VmMigrationType } from '~/components/common/wizards/vm/migrate/models/enums'
+import { UI_I_MigrateReadyBlockData } from '~/components/common/wizards/vm/migrate/models/interfaces'
+import { vmDiskFormatOptions } from '~/components/common/wizards/vm/migrate/select/storage/diskFormat/config/formatOptions'
+
+const storageDetailsFunc = (
+  localization: UI_I_Localization,
+  migrationType: string,
+  name: string,
+  event: any
+): UI_I_MigrateReadyBlockData[] => {
+  const isActivePerDiskTab: boolean = event.tab === 'configure-disk'
+
+  const diskFormat = vmDiskFormatOptions().find(
+    (x) => x.value === event.vmDiskFormat
+  )
+
+  let result: UI_I_MigrateReadyBlockData[] = [
+    {
+      label: localization.migrationType,
+      value: migrationType,
+      permissions: ['batch-configure', 'configure-disk'],
+    },
+    {
+      label: localization.virtualMachine,
+      value: name,
+      permissions: ['batch-configure', 'configure-disk'],
+    },
+    {
+      label: localization.storage,
+      value: event.storage.name,
+      permissions: ['batch-configure'],
+    },
+    {
+      label: localization.diskFormat,
+      value: diskFormat.text,
+      permissions: ['batch-configure'],
+    },
+    {
+      label: localization.diskFormat,
+      value: diskFormat.text,
+      permissions: ['configure-disk'],
+    },
+  ]
+
+  if (isActivePerDiskTab) {
+    const perDiskItems = event.configureDisks.map((item) => ({
+      label: item.name,
+      value: `${item.file} ${item.disk_format}`,
+      permissions: ['configure-disk'],
+      isProperty: true,
+    }))
+    result = result.concat(perDiskItems)
+  }
+
+  return result.filter((option) => option.permissions.includes(event.tab))
+}
+export const constructDataReadyViewFunc = <T>(
+  type: UI_T_VmMigrateType,
+  name: string,
+  data: T
+): UI_I_TableInfoItem[] => {
+  const localization: UI_I_Localization = useLocal()
+
+  const details = {
+    storage: storageDetailsFunc,
+  }
+
+  const migrationType = localization[UI_E_VmMigrationType[type]]
+
+  return details[type as keyof typeof details](
+    localization,
+    migrationType,
+    name,
+    data
+  )
+}

package/components/common/wizards/vm/migrate/contentHeading/ContentHeading.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="content-heading">
+    <div>
+      <h2>{{ props.title }}</h2>
+      <p>{{ props.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  description: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.content-heading {
+  padding: 0 15px 10px 0;
+  & > div {
+    padding-bottom: 3px;
+    border-bottom: 1px solid #a6a6a6;
+    h2 {
+      font-weight: 700;
+      font-size: 13px;
+      line-height: normal;
+      color: var(--add-vm-context-sub-title);
+    }
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/models/enums.ts

@@ -0,0 +1,6 @@
+export enum UI_E_VmMigrationType {
+  resource = 'changeComputeResourceOriginalStorage',
+  storage = 'changeStorageComputeResource',
+  'resource-storage' = 'changeComputeResourceAndStorage',
+  server = '',
+}

package/components/common/wizards/vm/migrate/models/interfaces.ts

@@ -0,0 +1,13 @@
+import type { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/models/types'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+
+export interface UI_I_MigrateVerticalStepItem extends UI_I_VerticalStepItem {
+  id: string
+  permissions?: UI_T_VmMigrateType[]
+}
+
+export interface UI_I_MigrateReadyBlockData extends UI_I_TableInfoItem {
+  permissions: UI_T_VmMigrateSelectStorageTab[]
+}

package/components/common/wizards/vm/migrate/models/types.ts

@@ -0,0 +1,5 @@
+export type UI_T_VmMigrateType =
+  | 'resource'
+  | 'storage'
+  | 'resource-storage'
+  | 'server'

package/components/common/wizards/vm/migrate/select/storage/Storage.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="select-storage">
+    <common-wizards-vm-migrate-select-storage-selected-per-disk
+      v-if="isShowSelectedPerDisks"
+      v-model="isShowSelectedPerDisks"
+      v-model:active-tab="activeTab"
+      :data="selectedPerDisks"
+    />
+
+    <atoms-tabs
+      v-else
+      v-model="activeTab"
+      test-id="migrate-select-storage-tabs"
+      :items="selectStorageTabs"
+      size="small"
+      class="select-storage__tabs"
+    />
+
+    <common-wizards-vm-migrate-select-storage-configure-batch
+      v-show="activeTab === 'batch-configure'"
+      v-model:vm-disk-format="dataLocal.vmDiskFormat"
+      :get-datastore-table-func="props.getDatastoreTableFunc"
+      :datastore="props.datastore"
+      :connected-storage-id="props.connectedStorageId"
+      @update-selected-datastore="dataLocal.storage = $event"
+    />
+
+    <common-wizards-vm-migrate-select-storage-configure-disk
+      v-show="activeTab === 'configure-disk'"
+      v-model="isShowSelectedPerDisks"
+      v-model:active-tab="activeTab"
+      :configure-per-disks="props.configurePerDisks"
+      @update-selected-per-disks="selectedPerDisks = $event"
+    />
+
+    <div class="compatibility-wrap">
+      <p class="compatibility">
+        {{ localization.compatibility }}
+      </p>
+      <div class="compatibility-message flex-align-center">
+        <template v-if="dataLocal.storage">
+          <div class="icon-status-ok" />
+          <span>{{ localization.compatibilityChecksSucceeded }}</span>
+        </template>
+        <div v-else>
+          <br />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_TablePayload } from '~/models/store/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+import { vmMigrateSelectStorageTabsFunc } from '~/components/common/wizards/vm/migrate/select/storage/config/tabsPannel'
+
+const props = defineProps<{
+  submit: number
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageId: string | null
+  configurePerDisks: any
+}>()
+const emits = defineEmits<{
+  (event: 'next-step', value: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const activeTab = ref<UI_T_VmMigrateSelectStorageTab>('batch-configure')
+const selectStorageTabs = computed<UI_I_CollapseNavItem[]>(() =>
+  vmMigrateSelectStorageTabsFunc(localization.value)
+)
+
+// const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
+const isShowSelectedPerDisks = ref<boolean>(false)
+const selectedPerDisks = ref<any[]>([])
+
+const dataLocal = ref<any>({
+  vmDiskFormat: 'same-format-source',
+  storage: null,
+})
+
+const checkValidityBlock = (): boolean => {
+  if (!dataLocal.value.storage) {
+    // const errorText = localization.value.nameCannotBeBlank
+    //
+    // showValidationErrors(errorText)
+    return false
+  }
+  const isActivePerDiskTab = activeTab.value === 'configure-disk'
+  emits('next-step', {
+    ...dataLocal.value,
+    tab: activeTab.value,
+    ...(isActivePerDiskTab && { configureDisks: props.configurePerDisks }),
+  })
+  return true
+}
+watch(
+  () => props.submit,
+  () => {
+    checkValidityBlock()
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.select-storage {
+  &__tabs {
+    width: 100%;
+    :deep(.nav) {
+      margin-top: 0;
+    }
+  }
+}
+
+.compatibility-wrap {
+  padding-top: 10px;
+
+  .compatibility-message {
+    border: 1px solid #000;
+    padding-top: 5px;
+    padding-left: 5px;
+    overflow: auto;
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/select/storage/config/tabsPannel.ts

@@ -0,0 +1,18 @@
+import type { UI_I_Localization } from 'bfg-common/models/interfaces'
+import type { UI_I_CollapseNavItem } from 'bfg-common/components/atoms/collapse/models/interfaces'
+export const vmMigrateSelectStorageTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => {
+  return [
+    {
+      text: localization.batchConfigure,
+      value: 'batch-configure',
+      disabled: false,
+    },
+    {
+      text: localization.configurePerDisk,
+      value: 'configure-disk',
+      disabled: false,
+    },
+  ]
+}

package/components/common/wizards/vm/migrate/select/storage/configure/batch/Batch.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <common-wizards-vm-migrate-select-storage-disk-format
+      v-model:vm-disk-format="selectedVmDiskFormat"
+    />
+
+    <common-wizards-vm-migrate-select-storage-policy />
+
+    <div class="clr-checkbox-wrapper flex-align-center w-100">
+      <input
+        id="suspend-on-revert"
+        v-model="isDisableStorageDrs"
+        type="checkbox"
+        class="checkbox-btn"
+      />
+      <label for="suspend-on-revert" class="clr-control-label">
+        {{ localization.disableStorageDRSVirtualMachine }}
+      </label>
+    </div>
+
+    <common-wizards-vm-migrate-select-storage-table-datastore
+      :get-datastore-table-func="props.getDatastoreTableFunc"
+      :datastore="props.datastore"
+      :connected-storage-id="props.connectedStorageId"
+      @update-selected-datastore="(e) => emits('update-selected-datastore', e)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from 'bfg-common/models/interfaces'
+import type { UI_I_TablePayload } from 'bfg-common/models/store/interfaces'
+import type { UI_I_DatastoreTableItem } from 'bfg-common/models/store/storage/interfaces'
+
+const props = defineProps<{
+  vmDiskFormat: string
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageId: string | null
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isDisableStorageDrs = ref<boolean>(false)
+
+const emits = defineEmits<{
+  (event: 'update-selected-datastore', value: UI_I_TablePayload): void
+  (event: 'update:vm-disk-format', value: string): void
+}>()
+
+
+
+const selectedVmDiskFormat = computed<string>({
+  get() {
+    return props.vmDiskFormat
+  },
+  set(newValue: string) {
+    emits('update:vm-disk-format', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/wizards/vm/migrate/select/storage/configure/disk/Disk.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="migrate-configure-disk">
+    <div class="btn-group">
+      <button
+        id="vm-migrate-configure"
+        class="btn btn-link btn-sm"
+        :disabled="!selectedDisksFromTable.length"
+        @click="onConfigure"
+      >
+        {{ localization.configure }}
+      </button>
+    </div>
+
+    <common-wizards-vm-migrate-select-storage-table-disk
+      v-model:selected-per-disk="selectedPerDiskKeys"
+      :configure-per-disks="props.configurePerDisks"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/models/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+
+const props = defineProps<{
+  modelValue: boolean
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+  activeTab: UI_T_VmMigrateSelectStorageTab
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+  (event: 'update-selected-per-disks', value: any[]): void
+  (event: 'update:active-tab', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedPerDiskKeys = ref<number[]>([])
+const selectedDisksFromTable = computed<any[]>(() => {
+  if (!props.configurePerDisks) return []
+
+  return props.configurePerDisks.filter((_: never, key: number) =>
+    selectedPerDiskKeys.value.includes(key)
+  )
+})
+
+const onConfigure = (): void => {
+  emits('update-selected-per-disks', selectedDisksFromTable.value)
+  emits('update:model-value', true)
+  activeTabValue.value = 'batch-configure'
+}
+
+const activeTabValue = computed<UI_T_VmMigrateSelectStorageTab>({
+  get() {
+    return props.activeTab
+  },
+  set(newValue: string) {
+    emits('update:active-tab', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.migrate-configure-disk {
+  margin-top: 10px;
+}
+</style>

package/components/common/wizards/vm/migrate/select/storage/diskFormat/DiskFormat.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="disk-format clr-flex-row">
+    <label
+      for="storage-locator-disk-format-label"
+      class="clr-col-3 clr-control-label"
+    >
+      {{ localization.selectVirtualDiskFormat }}
+    </label>
+    <div class="select select-lang mt-0 clr-form-control">
+      <select
+        id="storage-locator-disk-format-label"
+        v-model="selectedVirtualDiskFormat"
+        class="storage-locator-disk-format-label"
+      >
+        <option
+          v-for="option in configuredSpeedOptions"
+          :key="option.value"
+          :value="option.value"
+          :label="option.label"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import { vmDiskFormatOptions } from '~/components/common/wizards/vm/migrate/select/storage/diskFormat/config/formatOptions'
+
+const props = defineProps<{
+  vmDiskFormat: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:vm-disk-format', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const configuredSpeedOptions = computed<any[]>(() => vmDiskFormatOptions())
+
+const selectedVirtualDiskFormat = computed<string>({
+  get() {
+    return props.vmDiskFormat
+  },
+  set(newValue: string) {
+    emits('update:vm-disk-format', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.disk-format {
+  @include flex($align: center);
+}
+.select-lang {
+  margin-left: 25px;
+  height: 24px;
+  min-width: 210px;
+  & > select {
+    height: 100%;
+  }
+}
+</style>