bfg-common 1.5.420 → 1.5.421

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

@@ -1,11 +1,11 @@
 <template>
   <div class="edit-vm">
     <atoms-modal
-      :show="true"
       :title="localization.common.editSettings"
       :second-title="props.vmNameOld"
       :disabled-submit="props.loading"
       test-id="edit-vm-wizard"
+      show
       @submit="emits('validate')"
       @hide="emits('hide')"
     >
@@ -52,8 +52,8 @@
             :datastore="props.datastore"
             :is-datastore-loading="props.isDatastoreLoading"
             :customize-hardware-submit="props.customizeHardwareSubmit"
-            is-edit
             :is-vmt="props.isVmt"
+            is-edit
             @get-storage="emits('get-storage', $event)"
             @get-folders-or-files="emits('get-folders-or-files', $event)"
             @get-active-device-child="emits('get-active-device-child', $event)"
@@ -99,28 +99,39 @@ const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
   required: true,
 })
 
-const props = defineProps<{
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  project: UI_T_Project
-  loading: boolean
-  datastore: UI_I_DatastoreTableItem[]
-  isDatastoreLoading: boolean
-  networksTable: UI_I_NetworkTableItem[]
-  selectedNavItem: UI_T_SelectedNavItem
-  vmCpuHelpTextSecond: string
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
-  virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
-  virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
-  state?: string | number
-  vmNameOld?: string
-  passthroughDevices?: UI_I_PciDevice[]
-  mediatedDevices?: any[]
-  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-  customizeHardwareSubmit?: null | Function
-  isVmt?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    project: UI_T_Project
+    loading: boolean
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    networksTable: UI_I_NetworkTableItem[]
+    selectedNavItem: UI_T_SelectedNavItem
+    vmCpuHelpTextSecond: string
+    errorValidationFields: UI_I_ErrorValidationField<string>[]
+    virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
+    virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
+    virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+    state?: string | number
+    vmNameOld?: string
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: any[]
+    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+    customizeHardwareSubmit?: null | Function
+    isVmt?: boolean
+  }>(),
+  {
+    state: undefined,
+    vmNameOld: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    getDatastoreTableFunc: undefined,
+    customizeHardwareSubmit: undefined,
+    isVmt: undefined,
+  }
+)
 
 const emits = defineEmits<{
   (event: 'hide'): void

package/components/common/vm/actions/editSettings/new/New.vue

@@ -55,8 +55,8 @@
             :datastore="props.datastore"
             :is-datastore-loading="props.isDatastoreLoading"
             :customize-hardware-submit="props.customizeHardwareSubmit"
-            is-edit
             :is-vmt="props.isVmt"
+            is-edit
             @get-storage="emits('get-storage', $event)"
             @get-folders-or-files="emits('get-folders-or-files', $event)"
             @get-active-device-child="emits('get-active-device-child', $event)"
@@ -106,28 +106,39 @@ const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
   required: true,
 })
 
-const props = defineProps<{
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  project: UI_T_Project
-  loading: boolean
-  datastore: UI_I_DatastoreTableItem[]
-  isDatastoreLoading: boolean
-  networksTable: UI_I_NetworkTableItem[]
-  selectedNavItem: UI_T_SelectedNavItem
-  vmCpuHelpTextSecond: string
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
-  virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
-  virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
-  state?: string | number
-  vmNameOld?: string
-  passthroughDevices?: UI_I_PciDevice[]
-  mediatedDevices?: any[]
-  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-  customizeHardwareSubmit?: null | Function
-  isVmt?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    project: UI_T_Project
+    loading: boolean
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    networksTable: UI_I_NetworkTableItem[]
+    selectedNavItem: UI_T_SelectedNavItem
+    vmCpuHelpTextSecond: string
+    errorValidationFields: UI_I_ErrorValidationField<string>[]
+    virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
+    virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
+    virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+    state?: string | number
+    vmNameOld?: string
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: any[]
+    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+    customizeHardwareSubmit?: null | Function
+    isVmt?: boolean
+  }>(),
+  {
+    state: undefined,
+    vmNameOld: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    getDatastoreTableFunc: undefined,
+    customizeHardwareSubmit: undefined,
+    isVmt: undefined,
+  }
+)
 
 const emits = defineEmits<{
   (event: 'hide'): void

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    padding: 8px 0 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 8px 0 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>

package/components/common/vmt/actions/add/Add.vue

@@ -152,25 +152,31 @@ import {
 import { scheduledTaskDefaultFormFunc } from '~/components/common/pages/scheduledTasks/modals/lib/config/createScheduledTask'
 import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
 
-const props = defineProps<{
-  project: UI_T_Project
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  networksTable: UI_I_NetworkTableItem[]
-  datastore: UI_I_DatastoreTableItem[]
-  isDatastoreLoading: boolean
-  errorValidationFields: UI_I_ErrorValidationField[]
-  readyCompleteTableInfo: UI_I_TableInfoItem[]
-  vmCpuHelpTextSecond: string
-  finishFunc: any
-  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-  validateSendDataFunc: any
-  passthroughDevices: UI_I_PciDevice[]
-  mediatedDevices: UI_I_MediatedDevice[]
-  vmtNameInWizard: string
-  capabilities?: UI_I_Capabilities
-  schedulerTask?: any // TODO  надо interface переместить глобално
-}>()
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    networksTable: UI_I_NetworkTableItem[]
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    errorValidationFields: UI_I_ErrorValidationField[]
+    readyCompleteTableInfo: UI_I_TableInfoItem[]
+    vmCpuHelpTextSecond: string
+    finishFunc: any
+    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+    validateSendDataFunc: any
+    passthroughDevices: UI_I_PciDevice[]
+    mediatedDevices: UI_I_MediatedDevice[]
+    vmtNameInWizard: string
+    capabilities?: UI_I_Capabilities
+    schedulerTask?: any // TODO  надо interface переместить глобално
+  }>(),
+  {
+    capabilities: undefined,
+    schedulerTask: undefined,
+  }
+)
 
 const emits = defineEmits<{
   (event: 'check-name', value: [string, (error: API_UI_I_Error) => void]): void

package/components/common/vmt/actions/add/New.vue

@@ -181,6 +181,7 @@
 
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
+import type { UI_I_WizardTexts } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
 import type {
   UI_I_DatastoreTableItem,
   UI_I_FolderOrFileTreePayload,

package/components/common/vmt/actions/add/Old.vue

@@ -194,16 +194,6 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style>
-:root {
-  --vmt-context-title: #333;
-  --vmt-context-sub-title: #000;
-}
-:root.dark-theme {
-  --vmt-context-title: #adbbc4;
-  --vmt-context-sub-title: #adbbc4;
-}
-</style>
 <style scoped lang="scss">
 :deep(.has-solid.close-icon.clr-icon) {
   width: 20px;

package/components/common/vmt/actions/add/lib/models/interfaces.ts

@@ -1,23 +1,23 @@
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-export interface UI_I_VmtForm {
-  name: string
-  compatibility: string
-  guestMachineType: UI_I_OptionItem | null
-  guestOsFamily: UI_I_OptionItem | null
-  guestOsVersion: UI_I_OptionItem | null
-  computeResource: UI_I_TreeNode | null
-  storage: UI_I_DatastoreTableItem | null
-  locationPath: string
-}
-
-export interface I_DynamicSteps {
-  selectName: number
-  selectStorage: number
-  selectGuestOSMachineType: number
-  customizeHardware: number
-  readyComplete: number
-  scheduledTasks?: number
-}
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface UI_I_VmtForm {
+  name: string
+  compatibility: string
+  guestMachineType: UI_I_OptionItem | null
+  guestOsFamily: UI_I_OptionItem | null
+  guestOsVersion: UI_I_OptionItem | null
+  computeResource: UI_I_TreeNode | null
+  storage: UI_I_DatastoreTableItem | null
+  locationPath: string
+}
+
+export interface I_DynamicSteps {
+  selectName: number
+  selectStorage: number
+  selectGuestOSMachineType: number
+  customizeHardware: number
+  readyComplete: number
+  scheduledTasks?: number
+}

package/components/common/wizards/datastore/add/Add.vue

@@ -52,13 +52,20 @@ import {
 import { datastoreDefaultFormFunc } from '~/components/common/wizards/datastore/add/lib/config/createDatastore'
 import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
 
-const props = defineProps<{
-  project: UI_T_Project
-  selectedNode: UI_I_TreeNode
-  nfsHosts?: UI_I_CompatibleHosts
-  hostId?: string
-  isMainFilter?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    selectedNode: UI_I_TreeNode
+    nfsHosts?: UI_I_CompatibleHosts
+    hostId?: string
+    isMainFilter?: boolean
+  }>(),
+  {
+    nfsHosts: undefined,
+    hostId: undefined,
+    isMainFilter: undefined,
+  }
+)
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'finish', value: UI_I_CreateDatastoreForm): void

package/components/common/wizards/datastore/add/New.vue

@@ -1,12 +1,12 @@
 <template>
   <ui-wizard
-    show
     :steps="props.wizard.steps"
     :selected-scheme="props.selectedScheme"
     :is-loading="props.wizard.wizardLoader.status"
     :title="props.title"
     :texts="texts"
     test-id="add-datastore-wizard"
+    show
     @change-steps="onChangeSteps"
     @hide="onHideModal"
     @submit="onCreateDatastore"
@@ -22,10 +22,10 @@
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
               <common-tooltip-help
-                test-id="datastore-type-subtitle"
-                help-id="datastore-type-subtitle-icon"
                 :help-text="localization.common.datastoreTypeHelpDesc"
                 :title="localization.common.information"
+                test-id="datastore-type-subtitle"
+                help-id="datastore-type-subtitle-icon"
                 dropdown-width="320px"
                 dropdown-left
               />
@@ -49,10 +49,10 @@
             <div class="subtitle-block">
               <ui-alert
                 v-if="props.alertMessages[dynamicSteps.nameAndDevice].length"
+                :messages="props.alertMessages[dynamicSteps.nameAndDevice]"
                 test-id="add-host-connection-settings-error-alert"
                 type="error"
                 size="md"
-                :messages="props.alertMessages[dynamicSteps.nameAndDevice]"
                 class="subtitle-block__alert"
               />
 
@@ -83,10 +83,10 @@
             <div class="subtitle-block">
               <ui-alert
                 v-if="props.alertMessages[dynamicSteps.nameAndConfigure].length"
+                :messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
                 test-id="add-host-connection-settings-error-alert"
                 type="error"
                 size="md"
-                :messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
                 class="subtitle-block__alert"
               />
 
@@ -116,10 +116,10 @@
                 v-if="
                   props.alertMessages[dynamicSteps.hostAccessibility].length
                 "
+                :messages="props.alertMessages[dynamicSteps.hostAccessibility]"
                 test-id="add-host-accessibility-error-alert"
                 type="error"
                 size="md"
-                :messages="props.alertMessages[dynamicSteps.hostAccessibility]"
                 class="subtitle-block__alert"
               />
 
@@ -177,17 +177,24 @@ import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore
 import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const props = defineProps<{
-  project: UI_T_Project
-  wizard: Wizard
-  selectedScheme: number[]
-  alertMessages: string[][]
-  selectedNode: UI_I_TreeNode
-  title: string
-  nfsHosts?: UI_I_CompatibleHosts
-  hostId?: string
-  isMainFilter?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    wizard: Wizard
+    selectedScheme: number[]
+    alertMessages: string[][]
+    selectedNode: UI_I_TreeNode
+    title: string
+    nfsHosts?: UI_I_CompatibleHosts
+    hostId?: string
+    isMainFilter?: boolean
+  }>(),
+  {
+    nfsHosts: undefined,
+    hostId: undefined,
+    isMainFilter: undefined,
+  }
+)
 const emits = defineEmits<{
   (event: 'change-steps', value: UI_I_WizardStep[]): void
   (event: 'hide'): void

package/components/common/wizards/datastore/add/Old.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="new-datastore">
     <atoms-wizard
-      show
       :wizard="props.wizard"
       :selected-scheme="props.selectedScheme"
       :title="props.title"
       :localization="localization"
       class="add-datastore"
       test-id="add-datastore-wizard"
+      show
       @change-steps="onChangeSteps"
       @hide="onHideModal"
       @submit="onCreateDatastore"
@@ -70,16 +70,23 @@ import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore
 import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const props = defineProps<{
-  project: UI_T_Project
-  wizard: Wizard
-  selectedScheme: number[]
-  alertMessages: string[][]
-  title: string
-  nfsHosts?: UI_I_CompatibleHosts
-  hostId?: string
-  isMainFilter?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    wizard: Wizard
+    selectedScheme: number[]
+    alertMessages: string[][]
+    title: string
+    nfsHosts?: UI_I_CompatibleHosts
+    hostId?: string
+    isMainFilter?: boolean
+  }>(),
+  {
+    nfsHosts: undefined,
+    hostId: undefined,
+    isMainFilter: undefined,
+  }
+)
 const emits = defineEmits<{
   (event: 'change-steps', value: UI_I_WizardStep[]): void
   (event: 'hide-alert', value: number): void
@@ -93,9 +100,6 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
   emits('change-steps', value)
 
-const onHideAlert = (stepId: number): void => {
-  emits('hide-alert', stepId)
-}
 const onHideModal = (): void => emits('hide')
 const onCreateDatastore = (): void => emits('submit')
 </script>

package/components/common/wizards/datastore/add/lib/config/steps.ts

@@ -1,9 +1,10 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
 import type { UI_I_ChangeStepsSchemes } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
 import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
 export const dynamicSteps = {
   type: 0,
   nameAndDevice: 1,