bfg-common 1.5.487 → 1.5.488

package/components/common/wizards/network/add/AddOld.vue

@@ -91,9 +91,6 @@
         @change-connection-settings="onChangeConnectionSettings"
         @hide-alert="onHideAlert"
       />
-      <!--      <common-wizards-network-add-steps-physical-adapter-->
-      <!--        v-if="selectedStep.id === 6"-->
-      <!--      />-->
       <common-wizards-network-add-steps-ready-complete
         v-if="selectedStep.id === 7"
         :ready-complete-fields="props.readyCompleteFields"

package/components/common/wizards/network/add/lib/config/config.ts

@@ -22,6 +22,7 @@ export const {
   portPropertiesInitial,
   ipFourSettingsInitial,
   connectionSettingsInitial,
+  mtuItemsFunc,
 } = initialData
 export const { portPropertiesEnabledServicesFunc } = portProperties
 export const {

package/components/common/wizards/network/add/lib/config/initialData.ts

@@ -1,3 +1,5 @@
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_ConnectionSettings,
   UI_I_IpFourSettings,
@@ -60,3 +62,10 @@ export const vlanIdSelectData: UI_I_VlanIdData[] = [
   { text: 'None (0)', value: 'None (0)' },
   { text: 'All (4095)', value: 'All (4095)' },
 ]
+
+export const mtuItemsFunc = (
+  localization: UI_I_Localization
+): UI_I_Dropdown[] => [
+  { text: localization.common.getMtuFromSwitch, value: '0' },
+  { text: localization.common.custom, value: '1' },
+]

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

@@ -164,6 +164,7 @@ export const stepsSchemeInitial: (number | UI_I_WizardSchemeData)[][] = [
 ]
 
 export const createSecondSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   connectionSettingsValues: UI_I_ConnectionSettings,
   targetDeviceValues: UI_I_TargetDevice,
   localization: UI_I_Localization
@@ -171,14 +172,17 @@ export const createSecondSchemeReadyCompleteFunc = (
   {
     id: 0,
     type: 0,
+    title: isNewView ? localization.common.generalSettings : '',
     rows: [
       {
         name: localization.common.virtualMachinePortGroup,
         value: connectionSettingsValues.networkLabel,
+        icon: 'vsphere-icon-network',
       },
       {
         name: localization.common.standardSwitch,
         value: targetDeviceValues.standardSwitch,
+        icon: 'network-lib-ui-icon-vswitch',
       },
       {
         name: localization.common.vlanId,
@@ -189,6 +193,7 @@ export const createSecondSchemeReadyCompleteFunc = (
 ]
 
 export const createThirdSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   connectionSettingsValues: UI_I_ConnectionSettings,
   targetDeviceValues: UI_I_TargetDevice,
   addedAdapters: string[],
@@ -197,6 +202,7 @@ export const createThirdSchemeReadyCompleteFunc = (
   {
     id: 0,
     type: 0,
+    title: isNewView ? localization.common.generalSettings : '',
     rows: [
       {
         name: localization.common.newStandardSwitch,
@@ -205,10 +211,11 @@ export const createThirdSchemeReadyCompleteFunc = (
       {
         name: localization.common.virtualMachinePortGroup,
         value: connectionSettingsValues.networkLabel,
+        icon: 'vsphere-icon-network',
       },
       {
         name: localization.common.assignedAdapters,
-        value: addedAdapters.join(', '),
+        value: addedAdapters,
       },
       {
         name: localization.common.switchMTU,
@@ -233,10 +240,12 @@ const makeFirstColumnOfZeroAndFirstScheme = (
     {
       name: localization.common.newPortGroup,
       value: portProperties.networkLabel,
+      icon: 'vsphere-icon-network',
     },
     {
       name: localization.common.standardSwitch,
       value: targetDevice.standardSwitch,
+      icon: 'network-lib-ui-icon-vswitch',
     },
     {
       name: localization.common.vlanId,
@@ -247,12 +256,16 @@ const makeFirstColumnOfZeroAndFirstScheme = (
       value: portProperties.services.vMotion
         ? localization.common.enabled
         : localization.common.disabled,
+      status: true,
+      color: portProperties.services.vMotion,
     },
     {
       name: localization.common.provisioning,
       value: portProperties.services.provisioning
         ? localization.common.enabled
         : localization.common.disabled,
+      status: true,
+      color: portProperties.services.provisioning,
     },
     // {
     //   name: localization.common.faultToleranceLogging,
@@ -265,6 +278,8 @@ const makeFirstColumnOfZeroAndFirstScheme = (
       value: portProperties.services.management
         ? localization.common.enabled
         : localization.common.disabled,
+      status: true,
+      color: portProperties.services.management,
     },
     // {
     //   name: localization.common.procuratorReplication,
@@ -283,6 +298,8 @@ const makeFirstColumnOfZeroAndFirstScheme = (
       value: portProperties.services.vSAN
         ? localization.common.enabled
         : localization.common.disabled,
+      status: true,
+      color: portProperties.services.vSAN,
     },
     // {
     //   name: localization.common.procuratorBackupNFC,
@@ -312,7 +329,7 @@ const makeFirstColumnOfZeroAndFirstScheme = (
       },
       {
         name: localization.common.assignedAdapters,
-        value: addedAdapters.join(', '),
+        value: addedAdapters,
       },
       {
         name: localization.common.switchMTU,
@@ -327,6 +344,7 @@ const makeFirstColumnOfZeroAndFirstScheme = (
 }
 
 export const createZeroSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   targetDevice: UI_I_TargetDevice,
   portProperties: UI_I_PortProperties,
   ipFourSettings: UI_I_IpFourSettings,
@@ -337,6 +355,7 @@ export const createZeroSchemeReadyCompleteFunc = (
   {
     id: 0,
     type: 0,
+    title: isNewView ? localization.common.generalSettings : '',
     rows: makeFirstColumnOfZeroAndFirstScheme(
       targetDevice,
       portProperties,
@@ -348,6 +367,7 @@ export const createZeroSchemeReadyCompleteFunc = (
   {
     id: 1,
     type: 0,
+    separator: true,
     title: localization.common.nicSettings,
     rows: [
       {
@@ -363,6 +383,7 @@ export const createZeroSchemeReadyCompleteFunc = (
   {
     id: 2,
     type: 0,
+    separator: true,
     title: localization.common.ipV4Settings,
     rows:
       ipFourSettings.ipSettings === '0'
@@ -370,6 +391,8 @@ export const createZeroSchemeReadyCompleteFunc = (
             {
               name: localization.common.dhcp,
               value: localization.common.enabled,
+              status: true,
+              color: true,
             },
           ]
         : ipFourSettings.static.defaultGateway.override
@@ -401,6 +424,7 @@ export const createZeroSchemeReadyCompleteFunc = (
 ]
 
 export const createFirstSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   targetDevice: UI_I_TargetDevice,
   portProperties: UI_I_PortProperties,
   ipFourSettings: UI_I_IpFourSettings,
@@ -408,6 +432,7 @@ export const createFirstSchemeReadyCompleteFunc = (
   localization: UI_I_Localization
 ): UI_I_ReadyCompleteData[] =>
   createZeroSchemeReadyCompleteFunc(
+    isNewView,
     targetDevice,
     portProperties,
     ipFourSettings,
@@ -417,6 +442,7 @@ export const createFirstSchemeReadyCompleteFunc = (
   )
 
 export const createFourthSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   switchId: string,
   diagramsData: UI_I_DiagramData[],
   adapterStatus: UI_I_AdapterStatus,
@@ -449,14 +475,16 @@ export const createFourthSchemeReadyCompleteFunc = (
     {
       id: 0,
       type: 0,
+      title: isNewView ? localization.common.generalSettings : '',
       rows: [
         {
           name: localization.common.standardSwitch,
           value: switchId,
+          icon: 'network-lib-ui-icon-vswitch',
         },
         {
           name: localization.common.assignedAdapters,
-          value: assignedAdapters.join(', '),
+          value: assignedAdapters,
         },
       ],
     },
@@ -464,6 +492,7 @@ export const createFourthSchemeReadyCompleteFunc = (
 }
 
 export const createFifthSchemeReadyCompleteFunc = (
+  isNewView: boolean,
   targetDevice: UI_I_TargetDevice,
   adapterStatus: UI_I_AdapterStatus,
   localization: UI_I_Localization
@@ -478,14 +507,15 @@ export const createFifthSchemeReadyCompleteFunc = (
     {
       id: 0,
       type: 0,
+      title: isNewView ? localization.common.generalSettings : '',
       rows: [
         {
-          name: localization.common.standardSwitch,
+          name: localization.common.newStandardSwitch,
           value: '--',
         },
         {
           name: localization.common.assignedAdapters,
-          value: adapters.join(', '),
+          value: adapters,
         },
         {
           name: localization.common.switchMTU,

package/components/common/wizards/network/add/lib/models/interfaces.ts

@@ -187,12 +187,22 @@ export interface UI_I_ReadyCompleteData {
   id: number
   type: number
   title?: string
-  rows: { name: string; value: string | undefined }[]
+  separator?: boolean
+  rows: {
+    name: string
+    value: string | string[] | undefined
+    color?: boolean
+    status?: boolean
+    icon?: string
+  }[]
 }
 
 export interface UI_I_ReadyCompleteFirstColumn {
   name: string
-  value: string | undefined
+  value: string | string[] | undefined
+  color?: boolean
+  status?: boolean
+  icon?: string
 }
 
 export interface UI_I_AddNetworkingEmits {

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettings.vue

@@ -0,0 +1,83 @@
+<template>
+  <common-wizards-network-add-steps-connection-settings-new
+    v-if="isNewView"
+    v-model:fields="fields"
+    :messages-fields="props.messagesFields"
+  />
+  <common-wizards-network-add-steps-connection-settings-old
+    v-else
+    v-model:fields="fields"
+    :messages-fields="props.messagesFields"
+    :alert-messages="props.alertMessages"
+    @hide-alert="onHideAlert"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  validateNetworkConnectionSettingsLocal,
+  validateVlanIdConnectionSettingsLocal,
+} from '~/components/common/wizards/network/add/validations/validations'
+
+const props = defineProps<{
+  wizard: Wizard
+  connectionSettings: UI_I_ConnectionSettings
+  alertMessages: string[]
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const emits = defineEmits<{
+  (
+    event: 'change-connection-settings',
+    connectionSettings: UI_I_ConnectionSettings
+  ): void
+  (event: 'hide-alert', stepId: 5): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const fields = ref<UI_I_ConnectionSettings>(
+  useDeepCopy(props.connectionSettings)
+)
+
+let oldFields = useDeepCopy(fields.value)
+
+watch(
+  fields,
+  (newFields: UI_I_ConnectionSettings) => {
+    oldFields.vlanId !== newFields.vlanId &&
+      validateVlanIdConnectionSettingsLocal(
+        localization.value,
+        newFields,
+        props.wizard
+      )
+
+    oldFields.networkLabel !== newFields.networkLabel &&
+      validateNetworkConnectionSettingsLocal(
+        localization.value,
+        newFields,
+        props.wizard
+      )
+
+    oldFields = useDeepCopy(fields.value)
+
+    emits('change-connection-settings', newFields)
+  },
+  { deep: true, immediate: true }
+)
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 5)
+}
+</script>

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettingsNew.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="content">
+    <!-- v-permission="'Networks.CreateSwitch'" -->
+
+    <div class="col">
+      <h4 class="content-subtitle col-left">
+        {{ localization.common.networkLabel }}
+      </h4>
+      <div class="col-right">
+        <ui-input
+          id="mtu"
+          v-model="fieldsLocal.networkLabel"
+          test-id="network-input"
+          :placeholder="localization.common.networkLabel"
+          size="md"
+          :error="props.messagesFields.name.field"
+        />
+      </div>
+    </div>
+
+    <ui-line margin="16px 0 16px" />
+
+    <div class="col">
+      <h4 class="content-subtitle col-left">
+        {{ localization.common.vlanId }}
+      </h4>
+      <div class="col-right">
+        <ui-combobox
+          v-model="fieldsLocal.vlanId"
+          :items="vlanIdSelectData"
+          select-width="100%"
+          show-text
+          test-id="vlan-id-combobox"
+          :placeholder="localization.common.vlanId"
+          :error="!!props.messagesFields.vlan.field"
+          :error-text="props.messagesFields.vlan.field"
+          error-type="default"
+          width="auto"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  fields: UI_I_ConnectionSettings
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-alert', stepId: 5): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const fieldsLocal = computed({
+  get(): UI_I_ConnectionSettings {
+    return props.fields
+  },
+  set(value: UI_I_ConnectionSettings) {
+    emits('update:fields', value)
+  },
+})
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 5)
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+  padding: 16px 0;
+
+  &-subtitle {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    color: var(--title-form-first-color);
+    padding-top: 8px;
+  }
+
+  .col {
+    display: flex;
+    column-gap: 16px;
+
+    &-left {
+      width: calc((100% - 8px) / 3);
+    }
+
+    &-right {
+      width: calc(((100% - 8px) / 3) * 2);
+    }
+  }
+}
+
+:deep(.combobox-input) {
+  width: 100%;
+  height: 36px;
+}
+:deep(.ui-select-toggle-button.md) {
+  padding: 0 8px 0 12px;
+}
+</style>

package/components/common/wizards/network/add/steps/{ConnectionSettings.vue → connectionSettings/ConnectionSettingsOld.vue}

@@ -22,7 +22,7 @@
                   <template #elem>
                     <input
                       id="network-label"
-                      v-model="fields.networkLabel"
+                      v-model="fieldsLocal.networkLabel"
                       :class="[
                         'tooltip-field port-properties-network-label',
                         {
@@ -53,7 +53,7 @@
               <fieldset>
                 <div class="flex-align-center">
                   <atoms-combobox
-                    v-model.trim="fields.vlanId"
+                    v-model.trim="fieldsLocal.vlanId"
                     :items="vlanIdSelectData"
                     :class="{
                       'danger-not-valid': props.messagesFields.vlan.field,
@@ -89,66 +89,35 @@
 
 <script setup lang="ts">
 import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
 import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
-import {
-  validateNetworkConnectionSettingsLocal,
-  validateVlanIdConnectionSettingsLocal,
-} from '~/components/common/wizards/network/add/validations/validations'
 
 const props = defineProps<{
-  connectionSettings: UI_I_ConnectionSettings
+  fields: UI_I_ConnectionSettings
   alertMessages: string[]
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  wizard: Wizard
 }>()
 
 const emits = defineEmits<{
-  (
-    event: 'change-connection-settings',
-    connectionSettings: UI_I_ConnectionSettings
-  ): void
   (event: 'hide-alert', stepId: 5): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const fields = ref<UI_I_ConnectionSettings>(
-  useDeepCopy(props.connectionSettings)
-)
-
-let oldFields = useDeepCopy(fields.value)
-
-watch(
-  fields,
-  (newFields: UI_I_ConnectionSettings) => {
-    oldFields.vlanId !== newFields.vlanId &&
-      validateVlanIdConnectionSettingsLocal(
-        localization.value,
-        newFields,
-        props.wizard
-      )
-
-    oldFields.networkLabel !== newFields.networkLabel &&
-      validateNetworkConnectionSettingsLocal(
-        localization.value,
-        newFields,
-        props.wizard
-      )
-
-    oldFields = useDeepCopy(fields.value)
-
-    emits('change-connection-settings', newFields)
+const fieldsLocal = computed({
+  get(): UI_I_ConnectionSettings {
+    return props.fields
+  },
+  set(value: UI_I_ConnectionSettings) {
+    emits('update:fields', value)
   },
-  { deep: true, immediate: true }
-)
+})
 
 const onHideAlert = (): void => {
   emits('hide-alert', 5)
 }
-</script>
+</script>

package/components/common/wizards/network/add/steps/createStandardSwitch/CreateStandardSwitch.vue

@@ -0,0 +1,99 @@
+<template>
+  <common-wizards-network-add-steps-create-standard-switch-new
+    v-if="isNewView"
+    :adapters="props.adapters"
+    :free-adapters="props.freeAdapters"
+    :added-adapters="props.addedAdapters"
+    :core-adapters="props.coreAdapters"
+    :adapter-status="props.adapterStatus"
+    :is-dark-mode="props.isDarkMode"
+    test-id="adapter-manager"
+    is-active
+    full-mode
+    :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
+    :is-show-no-connected-active-adapters-modal="
+      props.isShowNoConnectedActiveAdaptersModal
+    "
+    @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+    @hide-no-connected-active-adapters-modal="
+      onHideNoConnectedActiveAdaptersModal
+    "
+    @submit-from-modal="onConfirmNoActiveAdaptersModal"
+    @change-added-adapters="onChangeAddedAdapters"
+    @change-adapter-status="onChangeAdapterStatus"
+    @get-free-adapters="onGetFreeAdapters"
+  />
+  <common-wizards-network-add-steps-create-standard-switch-old
+    v-else
+    :adapters="props.adapters"
+    :free-adapters="props.freeAdapters"
+    :added-adapters="props.addedAdapters"
+    :core-adapters="props.coreAdapters"
+    :adapter-status="props.adapterStatus"
+    :is-dark-mode="props.isDarkMode"
+    test-id="adapter-manager"
+    is-active
+    full-mode
+    :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
+    :is-show-no-connected-active-adapters-modal="
+      props.isShowNoConnectedActiveAdaptersModal
+    "
+    @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+    @hide-no-connected-active-adapters-modal="
+      onHideNoConnectedActiveAdaptersModal
+    "
+    @submit-from-modal="onConfirmNoActiveAdaptersModal"
+    @change-added-adapters="onChangeAddedAdapters"
+    @change-adapter-status="onChangeAdapterStatus"
+    @get-free-adapters="onGetFreeAdapters"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  addedAdapters: string[]
+  freeAdapters: UI_I_Adapter[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  coreAdapters: string[]
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'get-free-adapters', showModal: () => void): void
+  (event: 'change-added-adapters', addedAdapters: string[]): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onGetFreeAdapters = (showModal: () => void): void =>
+  emits('get-free-adapters', showModal)
+
+const onChangeAddedAdapters = (addedAdapters: string[]): void =>
+  emits('change-added-adapters', addedAdapters)
+
+const onChangeAdapterStatus = (adapterStatus: UI_I_AdapterStatus): void =>
+  emits('change-adapter-status', adapterStatus)
+
+const onConfirmNoActiveAdaptersModal = (): void =>
+  emits('confirm-no-active-adapters-modal')
+const onHideNoConnectedActiveAdaptersModal = (): void =>
+  emits('hide-no-connected-active-adapters-modal')
+const onHideNoActiveAdaptersModal = (): void =>
+  emits('hide-no-active-adapters-modal')
+</script>