bfg-common 1.5.487 → 1.5.488

package/components/common/wizards/network/add/steps/portProperties/PortProperties.vue

@@ -0,0 +1,214 @@
+<template>
+  <common-wizards-network-add-steps-port-properties-new
+    v-if="isNewView"
+    v-model="fields"
+    :messages-fields="props.messagesFields"
+    :tcp-stacks="props.tcpStacks"
+    :is-sphere-project="isSphereProject"
+    :port-properties-enabled-services="portPropertiesEnabledServices"
+  />
+  <common-wizards-network-add-steps-port-properties-old
+    v-else
+    v-model="fields"
+    :messages-fields="props.messagesFields"
+    :alert-messages="props.alertMessages"
+    :tcp-stacks="props.tcpStacks"
+    :is-sphere-project="isSphereProject"
+    :port-properties-enabled-services="portPropertiesEnabledServices"
+    @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_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_PortProperties,
+  UI_I_TCPStack,
+  UI_I_PortPropertiesEnabledService,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type { UI_T_TCP } from '~/components/common/wizards/network/add/lib/models/types'
+import {
+  servicesInitial,
+  portPropertiesEnabledServicesFunc,
+} from '~/components/common/wizards/network/add/lib/config/config'
+import {
+  validateMtuPortPropertiesLocal,
+  validateNetworkPortPropertiesLocal,
+  validateVlanIdPortPropertiesLocal,
+} from '~/components/common/wizards/network/add/validations/validations'
+
+const props = withDefaults(
+  defineProps<{
+    wizard: Wizard
+    portProperties: UI_I_PortProperties
+    mtuFromSwitch?: number
+    project: UI_T_Project
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    alertMessages: string[]
+    tcpStacks?: UI_I_TCPStack[]
+  }>(),
+  {
+    mtuFromSwitch: 1500,
+    tcpStacks: () => [],
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change-port-properties', portProperties: UI_I_PortProperties): void
+  (event: 'change-gateway-flag', value: boolean): void
+  (event: 'hide-alert', stepId: 3): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isSphereProject = computed<boolean>(() => props.project === 'sphere')
+
+const portPropertiesEnabledServices = computed<
+  UI_I_PortPropertiesEnabledService[]
+>(() =>
+  portPropertiesEnabledServicesFunc(localization.value, isSphereProject.value)
+)
+
+const mtuCustom = ref<number>()
+
+const fields = ref<UI_I_PortProperties>({
+  ...props.portProperties,
+  mtu: {
+    ...props.portProperties.mtu,
+    size:
+      !mtuCustom.value && props.portProperties.mtu.option !== '1'
+        ? props.mtuFromSwitch
+        : props.portProperties.mtu.size,
+  },
+})
+
+const setEnabledServiceDefault = (
+  tcp: UI_T_TCP,
+  currentFields: UI_I_PortProperties
+): void => {
+  tcp === 'default' &&
+    (fields.value = {
+      ...currentFields,
+      services: servicesInitial,
+    })
+}
+
+const setEnabledServiceProvisioning = (
+  tcp: UI_T_TCP,
+  currentFields: UI_I_PortProperties,
+  newFields?: UI_I_PortProperties
+): void => {
+  tcp === 'provisioning' &&
+    (fields.value = {
+      ...(newFields || currentFields),
+      services: {
+        ...servicesInitial,
+        provisioning: true,
+      },
+    })
+}
+
+const setEnabledServiceVMotion = (
+  tcp: UI_T_TCP,
+  currentFields: UI_I_PortProperties,
+  newFields?: UI_I_PortProperties
+): void => {
+  tcp === '' &&
+    (fields.value = {
+      ...(newFields || currentFields),
+      services: {
+        ...servicesInitial,
+        vMotion: true,
+      },
+    })
+}
+
+let oldFields = useDeepCopy(fields.value)
+
+watch(
+  fields,
+  (newFields: UI_I_PortProperties) => {
+    if (newFields.tcp && newFields.tcp !== oldFields.tcp) {
+      emits('change-gateway-flag', false)
+      setEnabledServiceDefault(newFields.tcp, fields.value)
+      setEnabledServiceProvisioning(newFields.tcp, fields.value, newFields)
+      setEnabledServiceVMotion(newFields.tcp, fields.value, newFields)
+    }
+
+    oldFields.networkLabel !== newFields.networkLabel &&
+      validateNetworkPortPropertiesLocal(
+        localization.value,
+        newFields,
+        props.wizard
+      )
+
+    oldFields.vlanId !== newFields.vlanId &&
+      validateVlanIdPortPropertiesLocal(
+        localization.value,
+        newFields,
+        props.wizard
+      )
+
+    oldFields.mtu.size !== newFields.mtu.size &&
+      validateMtuPortPropertiesLocal(
+        localization.value,
+        newFields,
+        props.wizard
+      )
+
+    oldFields = useDeepCopy(newFields)
+
+    emits('change-port-properties', newFields)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => fields.value.mtu,
+  (newMtu: { size: number; option: string }) => {
+    if (newMtu.option === '0') {
+      mtuCustom.value = props.mtuFromSwitch
+      fields.value.mtu.size = props.mtuFromSwitch
+      return
+    }
+    mtuCustom.value = newMtu.size
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => fields.value.tcp,
+  (newTcp: UI_T_TCP, oldTcp: UI_T_TCP) => {
+    if (newTcp !== oldTcp) {
+      setEnabledServiceDefault(newTcp, fields.value)
+      setEnabledServiceProvisioning(newTcp, fields.value)
+      setEnabledServiceVMotion(newTcp, fields.value)
+    }
+    emits('change-port-properties', fields.value)
+  }
+)
+
+watch(
+  () => props.tcpStacks,
+  (newValue: UI_I_TCPStack[]) => {
+    if (fields.value.tcp === '') {
+      fields.value.tcp = newValue?.[0]?.id || ''
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 3)
+}
+</script>

package/components/common/wizards/network/add/steps/portProperties/PortPropertiesNew.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="content">
+    <b class="content-title">
+      {{ localization.common.vmKernelPortSettings }}
+    </b>
+
+    <div class="content-fields">
+      <div class="col">
+        <h4 class="content-subtitle col-left">
+          {{ localization.common.networkLabel }}
+        </h4>
+        <div class="col-right">
+          <ui-input
+            id="network-label"
+            v-model="fields.networkLabel"
+            test-id="network-label"
+            type="text"
+            :placeholder="localization.common.networkLabel"
+            size="md"
+            :error="props.messagesFields.network_name.field"
+          />
+        </div>
+      </div>
+
+      <ui-line margin="16px 0" />
+
+      <div class="col">
+        <h4 class="content-subtitle col-left">
+          {{ localization.common.vlanId }}
+        </h4>
+        <div class="col-right">
+          <ui-combobox
+            v-model="fields.vlanId"
+            :items="vlanIdSelectData"
+            select-width="100%"
+            show-text
+            test-id="vlan-id-combobox"
+            :placeholder="localization.common.vlanId"
+            :error="!!props.messagesFields['new_network.vlan'].field"
+            :error-text="props.messagesFields['new_network.vlan'].field"
+            error-type="default"
+            width="auto"
+          />
+        </div>
+      </div>
+
+      <ui-line margin="16px 0" />
+
+      <div class="col">
+        <h4 class="content-subtitle col-left">
+          {{ localization.common.mtu }}
+        </h4>
+        <div class="col-right">
+          <div class="content-fields-col">
+            <div class="content-fields-col-left">
+              <ui-select
+                v-model="fields.mtu.option"
+                :items="mtuOptions"
+                select-width="100%"
+                show-text
+                test-id="mtu-select"
+                :placeholder="localization.common.mtu"
+                width="auto"
+              />
+            </div>
+            <div class="content-fields-col-right">
+              <ui-input
+                id="mtu-input"
+                v-model="fields.mtu.size"
+                test-id="mtu-input"
+                type="number"
+                :placeholder="localization.common.mtu"
+                size="md"
+                :error="props.messagesFields.mtu.field"
+                :disabled="fields.mtu.option === '0'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ui-line margin="16px 0" />
+
+      <div class="col">
+        <h4 class="content-subtitle col-left">
+          {{ localization.common.tcpIpStack }}
+        </h4>
+        <div class="col-right">
+          <ui-select
+            v-model="fields.tcp"
+            :items="tcpStacksOptions"
+            select-width="100%"
+            show-text
+            test-id="tsp-select"
+            :placeholder="localization.common.tcpIpStack"
+            width="auto"
+          />
+        </div>
+      </div>
+
+      <ui-line margin="16px 0" />
+
+      <b class="content-title">
+        {{ localization.common.availableServices }}
+      </b>
+
+      <div class="col mb-4">
+        <h4 class="content-subtitle col-left">
+          {{ localization.common.enabledServices }}
+        </h4>
+        <div class="col-right content-fields-services">
+          <ui-checkbox
+            v-if="props.isSphereProject"
+            id="services-v-motion"
+            v-model="fields.services.vMotion"
+            :label-text="localization.common.vMotion"
+            :disabled="fields.tcp !== 'default'"
+            test-id="services-v-motion-checkbox"
+            size="md"
+          />
+          <ui-checkbox
+            v-else
+            id="services-provisioning"
+            v-model="fields.services.provisioning"
+            :label-text="localization.common.provisioning"
+            :disabled="fields.tcp !== 'default'"
+            test-id="services-provisioning-checkbox"
+            size="md"
+          />
+          <template
+            v-for="enabledService in props.portPropertiesEnabledServices"
+            :key="enabledService.modelValue"
+          >
+            <ui-checkbox
+              :id="enabledService.testId"
+              v-model="fields.services[enabledService.modelValue]"
+              :label-text="enabledService.label"
+              :disabled="fields.tcp !== 'default'"
+              :test-id="`${enabledService.testId}-checkbox`"
+              size="md"
+            />
+          </template>
+        </div>
+      </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_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_PortProperties,
+  UI_I_TCPStack,
+  UI_I_PortPropertiesEnabledService,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  vlanIdSelectData,
+  mtuItemsFunc,
+} from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  modelValue: UI_I_PortProperties
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  tcpStacks?: UI_I_TCPStack[]
+  isSphereProject: boolean
+  portPropertiesEnabledServices: UI_I_PortPropertiesEnabledService[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: UI_I_PortProperties): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const fields = computed({
+  get(): UI_I_PortProperties {
+    return props.modelValue
+  },
+  set(newValue: UI_I_PortProperties) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const mtuOptions = computed<UI_I_Dropdown[]>(() =>
+  mtuItemsFunc(localization.value)
+)
+
+const tcpStacksOptions = computed<UI_I_Dropdown[]>(() =>
+  props.tcpStacks.map((item: UI_I_TCPStack) => ({
+    text: localization.value.common[item.id],
+    value: item.id,
+  }))
+)
+</script>
+
+<style scoped lang="scss">
+.content {
+  &-title {
+    display: block;
+    margin: 16px 0;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0;
+    color: var(--title-form-first-color);
+  }
+
+  &-subtitle {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    color: var(--title-form-first-color);
+  }
+
+  .col {
+    display: flex;
+    column-gap: 16px;
+
+    &-left {
+      padding-top: 8px;
+      width: calc((100% - 8px) / 3);
+    }
+
+    &-right {
+      width: calc(((100% - 8px) / 3) * 2);
+    }
+  }
+
+  &-fields {
+    &-col {
+      display: flex;
+      column-gap: 12px;
+
+      &-left {
+        width: 60%;
+      }
+
+      &-right {
+        width: 40%;
+      }
+    }
+
+    &-services {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      row-gap: 12px;
+      column-gap: 12px;
+      padding-top: 8px;
+    }
+  }
+}
+
+@media (max-width: 896px) {
+  .content-fields {
+    &-services {
+      grid-template-columns: 1fr;
+    }
+
+    &-col {
+      display: flex;
+      row-gap: 12px;
+      flex-direction: column;
+
+      &-left {
+        width: 100%;
+      }
+
+      &-right {
+        width: 100%;
+      }
+    }
+  }
+}
+
+:deep(.combobox-input) {
+  width: 100%;
+  height: 36px;
+}
+:deep(.ui-select-toggle-button.md) {
+  padding: 0 8px 0 12px;
+}
+</style>