bfg-common 1.5.757 → 1.5.760

package/components/common/pages/backups/modals/Modals.vue

@@ -1,243 +1,243 @@
-<template>
-  <common-pages-backups-modals-create-backup
-    v-if="schedulerTask.isShow"
-    v-model="backupForm"
-    v-model:scheduler-form="schedulerTaskForm"
-    :is-scheduled-tasks="schedulerTask.scheduler.isSchedulerTask"
-    :is-edit-scheduled-tasks="schedulerTask.scheduler.editTask"
-    :target="props.target"
-    :selected-vm-name="props.selectedVmName"
-    :disks="props.disks"
-    :disks-loading="props.disksLoading"
-    :datastore-table="props.datastoreTable"
-    :datastore-table-loading="props.datastoreTableLoading"
-    @change-step-create-backup="onChangeStepCreateBackup"
-    @check-name="onCheckBackupName"
-    @finish="onCreateBackup"
-    @hide="onHide"
-  />
-
-  <common-pages-backups-modals-restore
-    v-if="isShowRestoreModal"
-    v-model="restoreForm"
-    :datastore="props.restoreDatastore"
-    :datastore-loading="props.isRestoreDatastoreLoading"
-    :networks="props.restoreNetworks"
-    @get-datastore="onGetRestoreDatastore"
-    @get-networks="onGetRestoreNetworks"
-    @check-name="onCheckRestoreName"
-    @finish="onRestore"
-    @hide="onHide"
-  />
-
-  <common-pages-backups-modals-delete-backup
-    v-if="isShowDeleteBackupModal || isShowDeleteAllBackupsModal"
-    :name="action?.name"
-    :is-loading="isLoadingDeleteBackup"
-    :is-all="isShowDeleteAllBackupsModal"
-    @remove="onDeleteBackup"
-    @hide="onHide"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type {
-  UI_I_SendTaskParams,
-  UI_I_ModalPayload,
-} from '~/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import type {
-  UI_I_BackupDatastoreTable,
-  UI_I_CreateBackupForm,
-  UI_I_Pvm,
-  UI_I_RestoreForm,
-} from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_BackupAction } from '~/components/common/pages/backups/lib/models/interfaces'
-import type { UI_I_NameCheck } from '~/components/common/pages/backups/modals/restore/name/lib/models/interfaces'
-import { sendTask } from '~/lib/utils/sendTask'
-import { scheduledTaskDefaultFormFunc } from '~/components/common/pages/scheduledTasks/modals/lib/config/createScheduledTask'
-import { backupDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/createBackup'
-import { restoreDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/restore'
-import { scheduledTasks } from '~/components/common/pages/scheduledTasks/lib/utils/utils'
-
-const action = defineModel<UI_I_BackupAction | null>('action', {
-  required: true,
-})
-
-const props = defineProps<{
-  project: UI_T_Project
-  target: string
-  selectedVmName: string
-  disks: UI_I_Pvm['disk_devices']
-  disksLoading: boolean
-  datastoreTable: UI_I_BackupDatastoreTable | null
-  datastoreTableLoading: boolean
-  restoreDatastore: UI_I_DatastoreTableItem[]
-  isRestoreDatastoreLoading: boolean
-  restoreNetworks: UI_I_NetworkTableItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
-  (event: 'get-restore-datastore', value: string): void
-  (event: 'get-restore-networks', value: string): void
-  (event: 'check-restore-name', value: UI_I_NameCheck): void
-  (event: 'check-backup-name', value: UI_I_NameCheck): void
-  (event: 'delete-backup', value: boolean): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const backupForm = ref<UI_I_CreateBackupForm>(
-  useDeepCopy(backupDefaultFormFunc())
-)
-
-const schedulerTaskForm = ref<UI_I_ScheduleNewTasksForm>(
-  useDeepCopy(scheduledTaskDefaultFormFunc())
-)
-
-const restoreForm = ref<UI_I_RestoreForm>(useDeepCopy(restoreDefaultFormFunc()))
-const deleteBackupId = ref<string>('')
-
-const schedulerTask = computed<UI_I_ModalPayload>(
-  () => $store.getters['backup/getCreateBackupModal']
-)
-watch(
-  schedulerTask,
-  (newValue: UI_I_ModalPayload) => {
-    const { scheduler } = newValue
-    if (!scheduler.isSchedulerTask) return
-    schedulerTaskForm.value = scheduler.data
-  },
-  { immediate: true, deep: true }
-)
-
-const isShowDeleteBackupModal = ref<boolean>(false)
-const isShowDeleteAllBackupsModal = ref<boolean>(false)
-const isLoadingDeleteBackup = ref<boolean>(false)
-const isShowRestoreModal = ref<boolean>(false)
-
-const onCreateBackup = (): void => {
-  // TODO
-  backupForm.value.target = props.target
-  const backupTask: UI_I_SendTaskParams = {
-    method:
-      props.project === 'sphere'
-        ? 'VirtualMachines.CreateBackup'
-        : 'backup.create_backup',
-    target: props.target,
-    args: backupForm.value,
-  }
-
-  const {
-    scheduler: { isSchedulerTask, editTask, data },
-  } = schedulerTask.value
-  const sendData = isSchedulerTask
-    ? scheduledTasks(
-        schedulerTaskForm.value,
-        backupTask,
-        props.target,
-        editTask,
-        data,
-        props.project
-      )
-    : backupTask
-
-  sendTask(sendData)
-  onHide()
-}
-
-const onDeleteBackup = async (isAll: boolean): Promise<void> => {
-  isLoadingDeleteBackup.value = true
-  emits('delete-backup', isAll)
-  isLoadingDeleteBackup.value = false
-  onHide()
-}
-
-const onRestore = (): void => {
-  sendTask({
-    args: restoreForm.value,
-    method:
-      props.project === 'sphere'
-        ? 'VirtualMachines.RestoreBackup'
-        : 'backup.restore_backup',
-    target: props.target,
-  })
-  onHide()
-}
-
-watch(
-  action,
-  (newValue) => {
-    switch (newValue?.action) {
-      case 'createBackup':
-        // TODO
-        $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
-          isShow: true,
-          scheduler: {
-            isSchedulerTask: false,
-            editTask: false,
-            data: null,
-          },
-        })
-        break
-      case 'restoreBackup':
-        isShowRestoreModal.value = true
-        restoreForm.value.backup_storage = newValue.storageId || ''
-        restoreForm.value.bucket = newValue.bucketId || ''
-        restoreForm.value.backup = newValue.backupId || ''
-        break
-      case 'deleteBackup':
-        deleteBackupId.value = newValue.backupId || ''
-        isShowDeleteBackupModal.value = true
-        break
-      case 'deleteBackupAll':
-        isShowDeleteAllBackupsModal.value = true
-        break
-    }
-  },
-  { deep: true }
-)
-
-const onHide = (): void => {
-  // TODO
-  $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
-    isShow: false,
-    scheduler: {
-      isSchedulerTask: false,
-      editTask: false,
-      data: null,
-    },
-  })
-  isShowRestoreModal.value = false
-  isShowDeleteBackupModal.value = false
-  isShowDeleteAllBackupsModal.value = false
-
-  action.value.action = ''
-  backupForm.value = useDeepCopy(backupDefaultFormFunc())
-  backupForm.value.target = props.target
-  restoreForm.value = useDeepCopy(restoreDefaultFormFunc())
-}
-
-const onChangeStepCreateBackup = (value: UI_I_WizardStep[]): void => {
-  emits('change-step-create-backup', value)
-}
-const onCheckBackupName = (data: UI_I_NameCheck): void => {
-  emits('check-backup-name', data)
-}
-
-const onGetRestoreDatastore = (bucket: string): void => {
-  emits('get-restore-datastore', bucket)
-}
-const onGetRestoreNetworks = (hostId: string): void => {
-  emits('get-restore-networks', hostId)
-}
-const onCheckRestoreName = (data: UI_I_NameCheck): void => {
-  emits('check-restore-name', data)
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <common-pages-backups-modals-create-backup
+    v-if="schedulerTask.isShow"
+    v-model="backupForm"
+    v-model:scheduler-form="schedulerTaskForm"
+    :is-scheduled-tasks="schedulerTask.scheduler.isSchedulerTask"
+    :is-edit-scheduled-tasks="schedulerTask.scheduler.editTask"
+    :target="props.target"
+    :selected-vm-name="props.selectedVmName"
+    :disks="props.disks"
+    :disks-loading="props.disksLoading"
+    :datastore-table="props.datastoreTable"
+    :datastore-table-loading="props.datastoreTableLoading"
+    @change-step-create-backup="onChangeStepCreateBackup"
+    @check-name="onCheckBackupName"
+    @finish="onCreateBackup"
+    @hide="onHide"
+  />
+
+  <common-pages-backups-modals-restore
+    v-if="isShowRestoreModal"
+    v-model="restoreForm"
+    :datastore="props.restoreDatastore"
+    :datastore-loading="props.isRestoreDatastoreLoading"
+    :networks="props.restoreNetworks"
+    @get-datastore="onGetRestoreDatastore"
+    @get-networks="onGetRestoreNetworks"
+    @check-name="onCheckRestoreName"
+    @finish="onRestore"
+    @hide="onHide"
+  />
+
+  <common-pages-backups-modals-delete-backup
+    v-if="isShowDeleteBackupModal || isShowDeleteAllBackupsModal"
+    :name="action?.name"
+    :is-loading="isLoadingDeleteBackup"
+    :is-all="isShowDeleteAllBackupsModal"
+    @remove="onDeleteBackup"
+    @hide="onHide"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_SendTaskParams,
+  UI_I_ModalPayload,
+} from '~/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm,
+  UI_I_Pvm,
+  UI_I_RestoreForm,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_BackupAction } from '~/components/common/pages/backups/lib/models/interfaces'
+import type { UI_I_NameCheck } from '~/components/common/pages/backups/modals/restore/name/lib/models/interfaces'
+import { sendTask } from '~/lib/utils/sendTask'
+import { scheduledTaskDefaultFormFunc } from '~/components/common/pages/scheduledTasks/modals/lib/config/createScheduledTask'
+import { backupDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/createBackup'
+import { restoreDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/restore'
+import { scheduledTasks } from '~/components/common/pages/scheduledTasks/lib/utils/utils'
+
+const action = defineModel<UI_I_BackupAction | null>('action', {
+  required: true,
+})
+
+const props = defineProps<{
+  project: UI_T_Project
+  target: string
+  selectedVmName: string
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+  restoreDatastore: UI_I_DatastoreTableItem[]
+  isRestoreDatastoreLoading: boolean
+  restoreNetworks: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
+  (event: 'get-restore-datastore', value: string): void
+  (event: 'get-restore-networks', value: string): void
+  (event: 'check-restore-name', value: UI_I_NameCheck): void
+  (event: 'check-backup-name', value: UI_I_NameCheck): void
+  (event: 'delete-backup', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const backupForm = ref<UI_I_CreateBackupForm>(
+  useDeepCopy(backupDefaultFormFunc())
+)
+
+const schedulerTaskForm = ref<UI_I_ScheduleNewTasksForm>(
+  useDeepCopy(scheduledTaskDefaultFormFunc())
+)
+
+const restoreForm = ref<UI_I_RestoreForm>(useDeepCopy(restoreDefaultFormFunc()))
+const deleteBackupId = ref<string>('')
+
+const schedulerTask = computed<UI_I_ModalPayload>(
+  () => $store.getters['backup/getCreateBackupModal']
+)
+watch(
+  schedulerTask,
+  (newValue: UI_I_ModalPayload) => {
+    const { scheduler } = newValue
+    if (!scheduler.isSchedulerTask) return
+    schedulerTaskForm.value = scheduler.data
+  },
+  { immediate: true, deep: true }
+)
+
+const isShowDeleteBackupModal = ref<boolean>(false)
+const isShowDeleteAllBackupsModal = ref<boolean>(false)
+const isLoadingDeleteBackup = ref<boolean>(false)
+const isShowRestoreModal = ref<boolean>(false)
+
+const onCreateBackup = (): void => {
+  // TODO
+  backupForm.value.target = props.target
+  const backupTask: UI_I_SendTaskParams = {
+    method:
+      props.project === 'sphere'
+        ? 'VirtualMachines.CreateBackup'
+        : 'backup.create_backup',
+    target: props.target,
+    args: backupForm.value,
+  }
+
+  const {
+    scheduler: { isSchedulerTask, editTask, data },
+  } = schedulerTask.value
+  const sendData = isSchedulerTask
+    ? scheduledTasks(
+        schedulerTaskForm.value,
+        backupTask,
+        props.target,
+        editTask,
+        data,
+        props.project
+      )
+    : backupTask
+
+  sendTask(sendData)
+  onHide()
+}
+
+const onDeleteBackup = async (isAll: boolean): Promise<void> => {
+  isLoadingDeleteBackup.value = true
+  emits('delete-backup', isAll)
+  isLoadingDeleteBackup.value = false
+  onHide()
+}
+
+const onRestore = (): void => {
+  sendTask({
+    args: restoreForm.value,
+    method:
+      props.project === 'sphere'
+        ? 'VirtualMachines.RestoreBackup'
+        : 'backup.restore_backup',
+    target: props.target,
+  })
+  onHide()
+}
+
+watch(
+  action,
+  (newValue) => {
+    switch (newValue?.action) {
+      case 'createBackup':
+        // TODO
+        $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
+          isShow: true,
+          scheduler: {
+            isSchedulerTask: false,
+            editTask: false,
+            data: null,
+          },
+        })
+        break
+      case 'restoreBackup':
+        isShowRestoreModal.value = true
+        restoreForm.value.backup_storage = newValue.storageId || ''
+        restoreForm.value.bucket = newValue.bucketId || ''
+        restoreForm.value.backup = newValue.backupId || ''
+        break
+      case 'deleteBackup':
+        deleteBackupId.value = newValue.backupId || ''
+        isShowDeleteBackupModal.value = true
+        break
+      case 'deleteBackupAll':
+        isShowDeleteAllBackupsModal.value = true
+        break
+    }
+  },
+  { deep: true }
+)
+
+const onHide = (): void => {
+  // TODO
+  $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
+    isShow: false,
+    scheduler: {
+      isSchedulerTask: false,
+      editTask: false,
+      data: null,
+    },
+  })
+  isShowRestoreModal.value = false
+  isShowDeleteBackupModal.value = false
+  isShowDeleteAllBackupsModal.value = false
+
+  action.value.action = ''
+  backupForm.value = useDeepCopy(backupDefaultFormFunc())
+  backupForm.value.target = props.target
+  restoreForm.value = useDeepCopy(restoreDefaultFormFunc())
+}
+
+const onChangeStepCreateBackup = (value: UI_I_WizardStep[]): void => {
+  emits('change-step-create-backup', value)
+}
+const onCheckBackupName = (data: UI_I_NameCheck): void => {
+  emits('check-backup-name', data)
+}
+
+const onGetRestoreDatastore = (bucket: string): void => {
+  emits('get-restore-datastore', bucket)
+}
+const onGetRestoreNetworks = (hostId: string): void => {
+  emits('get-restore-networks', hostId)
+}
+const onCheckRestoreName = (data: UI_I_NameCheck): void => {
+  emits('check-restore-name', data)
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/New.vue

@@ -24,7 +24,7 @@
               test-id="add-vm-backup-general-error-alert"
               type="error"
               size="md"
-              class="mb-3"
+              class="mb-4"
             />
 
             <div class="subtitle-block flex-row items-start">
@@ -38,6 +38,7 @@
               v-model="model"
               :show="selectedStep.id === dynamicSteps.general"
               :messages-fields="selectedStep.fields"
+              :alert-messages="[]"
             />
           </div>
         </template>
@@ -55,7 +56,7 @@
               test-id="add-vm-backup-disks-error-alert"
               type="error"
               size="md"
-              class="mb-3"
+              class="mb-4"
             />
 
             <div class="subtitle-block flex-row w-full items-start">
@@ -69,6 +70,7 @@
               v-model="model"
               :disks="props.disks"
               :disks-loading="props.disksLoading"
+              :alert-messages="[]"
             />
           </div>
         </template>
@@ -86,7 +88,7 @@
               test-id="add-vm-backup-datastores-error-alert"
               type="error"
               size="md"
-              class="mb-3"
+              class="mb-4"
             />
 
             <div class="subtitle-block flex-row w-full items-start">
@@ -118,7 +120,7 @@
               test-id="add-vm-backup-configuration-error-alert"
               type="error"
               size="md"
-              class="mb-3"
+              class="mb-4"
             />
 
             <div class="subtitle-block flex-row items-start">
@@ -148,7 +150,7 @@
           </div>
         </template>
         <template #content>
-          <div class="mt-4">
+          <div class="my-4">
             <div class="ready-to-complete">
               <common-ready-to-complete :data="props.readyToCompleteData" />
             </div>
@@ -263,11 +265,22 @@ const onCreateDatastore = (): void => emits('submit')
     grid-template-columns: auto 1fr;
     align-items: flex-start;
   }
-  :deep(.details-list):nth-child(1) {
-    .details-item-value {
-      white-space: break-spaces;
-      overflow: auto;
+  :deep(.details-list) {
+    grid-template-columns: minmax(100px, max-content) minmax(150px, 100%);
+
+    .details-item-label, .details-item-value {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: normal;
+      overflow-wrap: anywhere;
     }
   }
 }
+
+:deep(.ui-wizard-content-with-subtitle) {
+  scrollbar-gutter: stable;
+  padding-right: 16px;
+}
 </style>

package/components/common/pages/backups/modals/createBackup/configuration/ConfigurationNew.vue

@@ -31,6 +31,7 @@
         <ui-input
           v-model="maxBindwidthLocal"
           :error="props.messagesFields.bandWidth.field"
+          type="number"
           test-id="vm-backup-max-bandwidth-input"
           class="max-bandwidth-input"
         />
@@ -114,7 +115,8 @@ const maxBindwidthLocal = computed<number>({
   &-row {
     min-height: 36px;
     width: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(150px, 250px) minmax(150px, 100%);
     column-gap: 16px;
     align-items: center;
 
@@ -171,9 +173,10 @@ const maxBindwidthLocal = computed<number>({
         width: fit-content;
       }
 
-      .strategy-select.capitalize, :deep(.ui-select-toggle-button) {
-        text-transform: capitalize;
+      .strategy-select :deep(.ui-popup-window) {
+        min-width: max-content !important;
       }
+
       &-max-band {
         display: flex;
         gap: 12px;
@@ -181,6 +184,17 @@ const maxBindwidthLocal = computed<number>({
         .max-bandwidth-input {
           max-width: 276px;
           width: 100%;
+
+          :deep(input.ui-main-input[type="number"]) {
+            appearance: textfield;
+            -moz-appearance: textfield;
+          }
+
+          :deep(input.ui-main-input[type="number"]::-webkit-outer-spin-button),
+          :deep(input.ui-main-input[type="number"]::-webkit-inner-spin-button) {
+            -webkit-appearance: none;
+            margin: 0;
+          }
         }
 
         .max-bandwidth-select {

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options.ts

@@ -1,6 +1,6 @@
-import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
-
-export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
-  { label: 'Mbps', value: 0 },
-  { label: 'Gbps', value: 1 },
-]
+import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
+
+export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
+  { label: 'Mbps', value: 0 },
+  { label: 'Gbps', value: 1 },
+]