bfg-common 1.4.157 → 1.4.159

package/components/common/wizards/vm/migrate/select/targetServer/new/New.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="new-server">
+    <atoms-alert
+      v-show="alertErrors.length"
+      :status="alertStatus"
+      :items="alertErrors"
+      hide-close-icon
+      test-id="create-backup-alert"
+      class="new-server__alert"
+    />
+
     <div>
       <div class="clr-form-control clr-row">
         <label for="" class="clr-control-label clr-col-md-4">
@@ -8,51 +17,54 @@
 
         <div
           class="clr-control-container"
-          :class="nameErrorText && 'clr-error'"
+          :class="addressErrorText && 'clr-error'"
         >
           <div class="flex-align-center">
             <input
               id="configuration-name-input"
-              v-model="form.name.value"
+              v-model="model.fqdn"
               data-id="configuration-name-input"
               type="text"
               class="clr-input"
-              @blur="onBlurInputName"
-              @input="onInputName"
+              @blur="onInitValidation(true, ['address'])"
+              @input="onInitValidation(false, ['address'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
 
-          <div class="clr-subtext ng-star-inserted">
-            {{ nameErrorText }}
+          <div v-if="addressErrorText" class="clr-subtext">
+            {{ addressErrorText }}
+          </div>
+          <div v-else class="clr-subtext">
+            vCenter Server FQDN or IP address
           </div>
         </div>
       </div>
 
       <div class="clr-form-control clr-row">
         <label class="clr-control-label clr-col-md-4">
-          {{ localization.common.username }}
+          {{ localization.auth.username }}
         </label>
 
         <div
           class="clr-control-container"
-          :class="folderErrorText && 'clr-error'"
+          :class="usernameErrorText && 'clr-error'"
         >
           <div class="flex-align-center">
             <input
               id="configuration-folder-input"
-              v-model="form.folder.value"
+              v-model="model.user"
               data-id="configuration-folder-input"
               type="text"
               class="clr-input"
-              @blur="onBlurInputFolder"
-              @input="onInputFolder"
+              @blur="onInitValidation(true, ['username'])"
+              @input="onInitValidation(false, ['username'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
 
-          <div v-if="folderErrorText" class="clr-subtext">
-            {{ folderErrorText }}
+          <div v-if="usernameErrorText" class="clr-subtext">
+            {{ usernameErrorText }}
           </div>
           <div v-else class="clr-subtext">example@domain.local</div>
         </div>
@@ -60,27 +72,28 @@
 
       <div class="nd-mt-0 clr-form-control clr-row">
         <label class="clr-control-label clr-col-md-4">
-          {{ localization.common.password }}
+          {{ localization.auth.password }}
         </label>
 
         <div
           class="clr-control-container"
-          :class="serverErrorText && 'clr-error'"
+          :class="passwordErrorText && 'clr-error'"
         >
           <div class="flex-align-center input-action-wrapper">
             <input
               id="configuration-folder-input"
-              v-model="form.server.value"
+              v-model="model.password"
               data-id="configuration-folder-input"
-              type="text"
+              type="password"
+              autocomplete="new-password"
               class="clr-input"
-              @blur="onBlurInputServer"
-              @input="onInputServer"
+              @blur="onInitValidation(true, ['password'])"
+              @input="onInitValidation(false, ['password'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
-          <div v-if="serverErrorText" class="clr-subtext">
-            {{ serverErrorText }}
+          <div v-if="passwordErrorText" class="clr-subtext">
+            {{ passwordErrorText }}
           </div>
           <div v-else class="clr-subtext">Password</div>
         </div>
@@ -100,156 +113,103 @@
     </div>
 
     <button
-      class="btn btn-primary btn-sm mt-2 clr-col-md-2"
-      :disabled="true"
+      class="btn btn-primary btn-sm mt-2"
+      :disabled="disabledSignInButton"
       data-id="sign-in-button"
-      @click="onSignIn"
+      @click="onConnectServer"
     >
-      {{ localization.common.login }}
+      {{ localization.auth.login }}
     </button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_ValidationTouchResult } from '~/lib/models/plugins/validation/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TargetServerData, UI_I_FormValidationTargetServer } from '~/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces'
-import { checkValidityName } from '~/components/common/wizards/datastore/add/lib/utils'
-import { defaultFormFunc } from '~/components/common/wizards/vm/migrate/select/targetServer/new/lib/config/defaultForm'
+import type { UI_T_AlertStatus } from '~/components/atoms/alert/lib/models/types'
+import type { UI_I_InitialValidationFields } from '~/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces'
+import type { UI_I_ConnectEsxiServerForm } from '~/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 
 const props = defineProps<{
-  nfsConfigurationSubmit: number
+  wizard: Wizard
 }>()
+const model = defineModel<UI_I_ConnectEsxiServerForm>({ required: true })
+const modelConnectServer = defineModel<boolean>('connectServer')
 const localization = computed<UI_I_Localization>(() => useLocal())
-const emits = defineEmits<{
-  (event: 'loading', value: boolean): void
-  (event: 'next', value: UI_I_TargetServerData): void
-}>()
-const { $validation } = useNuxtApp()
-
-const validation = $validation.call({})
-const defaultForm: UI_I_FormValidationTargetServer = defaultFormFunc(
-  localization.value
-)
-const form = ref<UI_I_FormValidationTargetServer>(useDeepCopy(defaultForm))
-const setForm = (): void => {
-  form.value = useDeepCopy(defaultForm)
-  validation.setForm(form)
-}
-setForm()
-
-const validForm = ref<UI_I_ValidationTouchResult | null>(null)
-
-/* Validation for Name input */
-const isInitNameValidation = ref<boolean>(false)
-const onBlurInputName = (): void => {
-  validForm.value = validation.touch()
-  isInitNameValidation.value = true
-}
-const onInputName = (): void => {
-  validForm.value = validation.touch()
-}
 
-const nameErrorText = computed<string>(() => {
-  if (!isInitNameValidation.value) return ''
-  return validForm.value?.errors?.name?.[0] || ''
+const initValidationFields = ref<UI_I_InitialValidationFields>({
+  address: false,
+  username: false,
+  password: false,
 })
-/* Validation Name input end */
-
-/* Validation for Folder input */
-const isInitFolderValidation = ref<boolean>(false)
-const onBlurInputFolder = (): void => {
-  validForm.value = validation.touch()
-  isInitFolderValidation.value = true
-}
-const onInputFolder = (): void => {
-  validForm.value = validation.touch()
+const onInitValidation = (onlyBlur: boolean, types: string[]): void => {
+  onlyBlur && types.forEach((type) => (initValidationFields.value[type] = true))
 }
 
-const folderErrorText = computed<string>(() => {
-  if (!isInitFolderValidation.value) return ''
-  return validForm.value?.errors?.folder?.[0] || ''
+const addressErrorText = computed<string>(() => {
+  if (!initValidationFields.value.address) return ''
+  return !model.value.fqdn ? localization.value.common.fieldRequired : ''
 })
-/* Validation Folder input end */
-
-/* Validation for Server input */
-const isInitServerValidation = ref<boolean>(false)
-const onBlurInputServer = (): void => {
-  validForm.value = validation.touch()
-  isInitServerValidation.value = true
-}
-const onInputServer = (): void => {
-  validForm.value = validation.touch()
-  isInitServerValidation.value = true
-}
-
-const serverErrorText = computed<string>(() => {
-  // if (!isInitServerValidation.value || dataServers.value.length) return ''
-  if (!isInitServerValidation.value) return ''
-  return validForm.value?.errors?.server?.[0] || ''
+const usernameErrorText = computed<string>(() => {
+  if (!initValidationFields.value.username) return ''
+  return !model.value.user ? localization.value.common.fieldRequired : ''
+})
+const passwordErrorText = computed<string>(() => {
+  if (!initValidationFields.value.password) return ''
+  return !model.value.password ? localization.value.common.fieldRequired : ''
 })
 
-/* Validation Folder Server end */
-
-const accessMode = ref<boolean>(false)
+const disabledSignInButton = computed<boolean>(() => {
+  const { fqdn, user, password } = model.value
+  return !(fqdn && user && password)
+})
 
-const onSignIn = (): void => {}
+const alertStatus = ref<UI_T_AlertStatus>('alert-danger')
+const alertErrors = ref<string[]>([])
 
-const resetValidation = (): void => {
-  isInitNameValidation.value =
-    isInitFolderValidation.value =
-    isInitServerValidation.value =
-      false
-  validForm.value = null
-  errors.value = []
+const showValidationErrors = (
+  data: string[],
+  status: UI_T_AlertStatus
+): void => {
+  alertStatus.value = status
+  alertErrors.value = data
 }
 
-watch(
-  () => props.nfsConfigurationSubmit,
-  () => {
-    submit()
-  }
-)
-const submit = async (): Promise<void> => {
-  const { name, server, folder } = form.value
-
-  validForm.value = validation.touch()
-  isInitNameValidation.value =
-    isInitFolderValidation.value =
-    isInitServerValidation.value =
-      true
-
-  if (nameErrorText.value || folderErrorText.value || serverErrorText.value) {
-    return
-  }
-
-  emits('loading', true)
-
-  const { valid, msg } = await checkValidityName(name.value)
-
-  emits('loading', false)
-
-  if (!valid) {
-    showValidationErrors(msg)
-    return
-  }
-
-  resetValidation()
+const accessMode = ref<boolean>(false)
 
-  const configurationData: UI_I_TargetServerData = {
-    name: name.value,
-    folder: folder.value,
-    server: server.value,
+const onConnectServer = async (): Promise<void> => {
+  try {
+    props.wizard.setLoader(true)
+    const payload: UI_I_ConnectEsxiServerForm = {
+      fqdn: model.value.fqdn,
+      user: model.value.user,
+      password: model.value.password,
+    }
+    console.log(payload)
+    // await $store.dispatch('vm/A_CONNECT_ESXI_SERVER', payload)
+
+    const alertText = localization.value.common.successfullyConnected.replace(
+      '{address}',
+      model.value.fqdn
+    )
+
+    showValidationErrors([alertText], 'alert-success')
+    modelConnectServer.value = true
+  } catch (error) {
+    modelConnectServer.value = false
+    showValidationErrors([error as string], 'alert-danger')
+  } finally {
+    props.wizard.setLoader(false)
   }
-
-  emits('next', configurationData)
 }
 
-const errors = ref<string[]>([])
-
-const showValidationErrors = (errorText: string): void => {
-  errors.value = [errorText]
-}
+watch(
+  modelConnectServer,
+  (newValue: boolean | undefined) => {
+    props.wizard.setDisabledNextButton(!newValue)
+  },
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -259,6 +219,10 @@ const showValidationErrors = (errorText: string): void => {
   height: 100%;
   margin-top: 25px;
 
+  &__alert {
+    margin: 0 0 10px;
+  }
+
   .clr-form-control {
     margin-top: 0;
     display: flex;
@@ -282,6 +246,9 @@ const showValidationErrors = (errorText: string): void => {
       }
     }
   }
+  button.btn-sm {
+    max-width: 20%;
+  }
 }
 .flex-align-center {
   &.input-action-wrapper {

package/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces.ts

@@ -1,13 +1,11 @@
-import type { UI_I_Validation } from '~/lib/models/plugins/validation/interfaces'
-
-export interface UI_I_FormValidationTargetServer {
-  name: UI_I_Validation
-  folder: UI_I_Validation
-  server: UI_I_Validation
+export interface UI_I_InitialValidationFields {
+  address: boolean
+  username: boolean
+  password: boolean
 }
 
-export interface UI_I_TargetServerData {
-  name: string
-  folder: string
-  server: string
+export interface UI_I_ConnectEsxiServerForm {
+  fqdn: string
+  user: string
+  password: string
 }

package/components/common/wizards/vm/migrate/select/targetServer/targetServer.vue

@@ -14,18 +14,28 @@
 
     <common-wizards-vm-migrate-select-target-server-new
       v-if="activeTab === 'new-server'"
+      v-model="modelTargetServer"
+      v-model:connect-server="modelConnectServer"
+      :wizard="props.wizard"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_ConnectEsxiServerForm } from '~/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces'
 import type { T_SelectTargetServerTab } from '~/components/common/wizards/vm/migrate/select/targetServer/lib/models/types'
 import { vmMigrateSelectTargetServerTabsFunc } from '~/components/common/wizards/vm/migrate/select/targetServer/lib/config/tabsPannel'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const props = defineProps<{
+  wizard: Wizard
+}>()
+const modelTargetServer = defineModel<UI_I_ConnectEsxiServerForm>()
+const modelConnectServer = defineModel<boolean>('connectServer')
 
+const localization = computed<UI_I_Localization>(() => useLocal())
 const activeTab = ref<T_SelectTargetServerTab>('new-server')
 const selectStorageTabs = computed<UI_I_CollapseNavItem[]>(() =>
   vmMigrateSelectTargetServerTabsFunc(localization.value)

package/components/common/wizards/vm/migrate/select/type/Type.vue

@@ -1,38 +1,27 @@
 <template>
-  <div>
-    <common-select-radio-group
-      v-model="selectedType"
-      :options="vmMigrationTypes"
-    />
-  </div>
+  <common-select-radio-group
+    v-model="selectedMigrateTypeLocal"
+    :options="vmMigrationTypes"
+  />
 </template>
 
 <script lang="ts" setup>
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_VmMigrateTypeOption } from '~/components/common/wizards/vm/migrate/select/type/lib/models/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/select/type/lib/models/types'
 import { vmMigrateTypesFunc } from '~/components/common/wizards/vm/migrate/select/type/lib/config/typeOptions'
 
 const props = defineProps<{
-  modelValue: string
   project: UI_T_Project
 }>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string | number): void
-}>()
+const selectedMigrateTypeLocal = defineModel<UI_T_VmMigrateType>({
+  required: true,
+})
 const localization = computed<any>(() => useLocal())
 
 const vmMigrationTypes = ref<UI_I_VmMigrateTypeOption[]>(
   vmMigrateTypesFunc(localization.value, props.project)
 )
-
-const selectedType = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
 </script>
 
 <style lang="scss" scoped></style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.157",
+  "version": "1.4.159",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.15",
-    "bfg-uikit": "1.0.100",
+    "bfg-uikit": "1.0.97",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }

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

@@ -1,106 +0,0 @@
-<template>
-  <div class="content-heading">
-    <div>
-      <h2>{{ props.title }}</h2>
-      <p>{{ props.description }}</p>
-    </div>
-    <common-wizards-vm-common-tooltip
-      test-id="vm-origin-tooltip"
-      is-show-element
-    >
-      <template #content>
-        <div
-          v-for="(item, key) in contentTooltip"
-          :key="key"
-          class="content-heading__tooltip"
-        >
-          <h2>{{ item.name }}</h2>
-          <div
-            v-for="(node, index) in item.node"
-            :key="index"
-            class="content-heading__tooltip-wrapper"
-          >
-            <span :class="['icon', node.iconClassName]"></span>
-            <span>{{ node.name }}</span>
-          </div>
-        </div>
-      </template>
-    </common-wizards-vm-common-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_HeadlineTooltipContent } from '~/components/common/wizards/vm/migrate/contentHeading/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  description: string
-}>()
-
-const contentTooltip = ref<UI_I_HeadlineTooltipContent[]>([
-  {
-    name: 'Host',
-    node: [
-      {
-        name: ' e0.vmw.aobfg.ru',
-        iconClassName: 'vsphere-icon-host',
-      },
-    ],
-  },
-  {
-    name: 'Networks',
-    node: [
-      {
-        name: 'VM-VLAN101',
-        iconClassName: 'vsphere-icon-network',
-      },
-    ],
-  },
-  {
-    name: 'Storage',
-    node: [
-      {
-        name: 'datastore1 (1)',
-        iconClassName: 'vsphere-icon-datastore',
-      },
-    ],
-  },
-])
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.content-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0 15px 13px 0;
-  border-bottom: 1px solid #a6a6a6;
-  & > div h2 {
-    font-weight: 700;
-    font-size: 13px;
-    line-height: normal;
-    color: var(--add-vm-context-sub-title);
-  }
-
-  &__tooltip {
-    & > h2 {
-      font-weight: 700;
-      line-height: normal;
-      margin-bottom: 2px;
-    }
-    &-wrapper {
-      @include flex($align: center);
-    }
-    .icon {
-      display: block;
-      width: 13px;
-      height: 13px;
-      margin-right: 10px;
-    }
-  }
-}
-:deep(.signpost) {
-  min-width: 300px;
-}
-</style>

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

@@ -1,7 +0,0 @@
-export interface UI_I_HeadlineTooltipContent {
-  name: string
-  node: {
-    name: string
-    iconClassName: string
-  }[]
-}

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

@@ -1,69 +0,0 @@
-<template>
-  <section class="disk-format clr-flex-row">
-    <label
-      for="storage-locator-disk-format-label"
-      class="clr-col-3 clr-control-label"
-    >
-      {{ localization.common.selectVirtualDiskFormat }}
-    </label>
-    <div class="select select-lang mt-0 clr-form-control">
-      <select
-        id="storage-locator-disk-format-label"
-        v-model="selectedVirtualDiskFormat"
-        data-id="storage-locator-disk-format-select"
-        class="storage-locator-disk-format-label"
-      >
-        <option
-          v-for="option in configuredSpeedOptions"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.text }}
-        </option>
-      </select>
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { vmDiskFormatOptions } from '~/components/common/wizards/vm/migrate/select/storage/diskFormat/lib/config/formatOptions'
-
-const props = defineProps<{
-  vmDiskFormat: number
-}>()
-const emits = defineEmits<{
-  (event: 'update:vm-disk-format', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const configuredSpeedOptions = computed<UI_I_OptionItem[]>(() =>
-  vmDiskFormatOptions()
-)
-
-const selectedVirtualDiskFormat = computed<number>({
-  get() {
-    return props.vmDiskFormat
-  },
-  set(newValue: number) {
-    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>