bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/_customizeHardware/virtualHardware/newNetwork/Location.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <Teleport to="body">
+      <atoms-modal
+        class="network-modal"
+        :show="props.locationModalIsShow"
+        :title="localization.common.selectNetwork"
+        test-id="select-network-modal"
+        @submit="onSubmitLocationModal"
+        @hide="onHideLocationModal"
+      >
+        <template #modalBody>
+          <atoms-alert
+            v-show="errors.length"
+            status="alert-danger"
+            :items="errors"
+            test-id="location-alert"
+            @remove="onRemoveValidationErrors"
+          />
+          <div class="network-select-dialog-content">
+            <div class="k-header k-grid-toolbar flex-justify-end">
+              <div class="filter-input pull-right flex">
+                <button
+                  id="location-filter-button"
+                  data-id="location-filter-button"
+                  class="nav-icon fa fa-filter filter-button"
+                >
+                  <atoms-the-icon
+                    class="filter-icon"
+                    fill="#4c5356"
+                    name="filter"
+                  />
+                </button>
+                <input
+                  id="location-filter"
+                  v-model="locationFilter"
+                  data-id="location-filter-input"
+                  type="text"
+                  :placeholder="localization.common.filter"
+                />
+              </div>
+            </div>
+            <atoms-table-simple-table
+              :head-items="tagsHeadItems"
+              :body-items="tagsBodyItems"
+              editable
+              @select="onSelectLocation"
+            />
+          </div>
+        </template>
+      </atoms-modal>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleTable/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  locationModalIsShow: boolean
+  networksTable: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select', value: UI_I_NetworkTableItem): void
+}>()
+
+const onSubmitLocationModal = (): void => {
+  if (selectedLocation.value === null) {
+    errors.value = [localization.value.common.noNetworkSelected]
+    return
+  }
+  emits('select', selectedLocation.value)
+}
+const onHideLocationModal = (): void => {
+  emits('hide')
+}
+
+const locationFilter = ref<string>('')
+const tagsHeadItems = ref<UI_I_TableHeadItem[]>([
+  { text: localization.value.common.name },
+  { text: localization.value.common.nsxPortGroupId },
+  { text: localization.value.common.distributedSwitch },
+])
+const tagsBodyItemsDefault = ref<UI_I_TableBodyItem[][]>([])
+const tagsBodyItems = computed<UI_I_TableBodyItem[][]>(() => {
+  const term = locationFilter.value.trim().toLowerCase()
+  return tagsBodyItemsDefault.value.filter((row) => {
+    return row.some((item) => item.text.trim().toLowerCase().includes(term))
+  })
+})
+watch(
+  () => props.networksTable,
+  (newValue) => {
+    tagsBodyItemsDefault.value = []
+    newValue?.forEach((network) => {
+      tagsBodyItemsDefault.value.push([
+        { text: network.name, editable: false, testId: `network-${network.name}` },
+        { text: '--', editable: false },
+        { text: '--', editable: false },
+      ])
+    })
+  },
+  { immediate: true }
+)
+
+const selectedLocation = ref<UI_I_NetworkTableItem | null>(null)
+const getNetworkByName = (name: string): UI_I_NetworkTableItem | null => {
+  return props.networksTable?.find((network) => network.name === name) || null
+}
+const onSelectLocation = (_key: number, value: UI_I_TableBodyItem[]): void => {
+  const networkName = value[0].text
+  selectedLocation.value = getNetworkByName(networkName)
+}
+
+const errors = ref<string[]>([])
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss">
+.network-select-dialog-content {
+  min-height: 300px;
+  margin-top: 10px;
+
+  .filter-button {
+    border-style: none;
+    background-color: transparent;
+    padding: 0;
+
+    .filter-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+</style>

package/components/common/vm/actions/common/_customizeHardware/virtualHardware/newNetwork/NewNetwork.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="hardware-network">
+    <atoms-stack-block
+      :has-children="true"
+      :removable="isRemovable"
+      :test-id="`network-stack-block-${props.index}`"
+      @remove="removeNetwork"
+    >
+      <template #stackBlockKey>
+        <div
+          :id="`vm-wizard-toggle-block-network-${props.index}`"
+          :data-id="`vm-wizard-toggle-block-network-${props.index}`"
+          class="vm-wizard-toggle-block-network flex-align-center"
+        >
+          <span>{{ label }}</span>
+          <atoms-the-icon
+            v-show="newNetworkInvalid"
+            width="24px"
+            height="24px"
+            class="is-error tooltip-trigger"
+            name="info"
+          />
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center flex-space-between">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            :selector="`.vm-wizard-network-field-${props.index}`"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  :id="`vm-wizard-network-field-${props.index}`"
+                  v-model="selectedLocation"
+                  :data-id="`vm-wizard-network-field-${props.index}`"
+                  :class="`vm-wizard-network-field-${props.index} input-text-color`"
+                  :disabled="props.type === 'edit' && state !== 1"
+                  @click.stop
+                  @change="changeLocation"
+                >
+                  <option
+                    v-for="(item, key) in locationOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-adapter-type
+          v-model:adapter-type="adapterType"
+          :index="props.index"
+          :disabled="props.type === 'edit' || isRunning"
+          :error-validation-fields="props.errorValidationFields"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-mac-address
+          v-model:mac-address="macAddress"
+          v-model:mac-address-type="macAddressType"
+          :index="props.index"
+          :disabled="props.type === 'edit'"
+          :error-validation-fields="props.errorValidationFields"
+          @invalid="newNetworkInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+
+    <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-location
+      :location-modal-is-show="locationModalIsShow"
+      :networks-table="networksTable"
+      @hide="onHideLocationModal"
+      @select="onSelectLocation"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_SendDataNewNetwork } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_T_NetworkType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = defineProps<{
+  project: UI_T_Project
+  index: number
+  type: UI_T_NetworkType
+  network: UI_I_SendDataNewNetwork
+  networksTable: UI_I_NetworkTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  isEdit: boolean
+  state?: string | number
+}>()
+
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewNetwork): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isRunning = computed<boolean>(() => {
+  return props.state === 2
+})
+
+const isRemovable = computed<boolean>(() => {
+  return (
+    !props.isEdit ||
+    !isRunning.value ||
+    (isRunning.value && adapterType.value === 'virtio')
+  )
+})
+
+const label = computed<string>(() => {
+  if (props.type === 'edit')
+    return `${localization.value.common.networkAdapter} ${props.index + 1}`
+
+  return `${localization.value.common.newNetwork} *`
+})
+
+const removeNetwork = (): void => {
+  emits('remove')
+}
+
+const selectedLocationOld = ref<string>('')
+const selectedLocation = ref<string>('')
+const locationOptions = ref<UI_I_OptionItem[]>([])
+
+const getNetworks = (): void => {
+  // if (props.networksTable.length) return // Из-за этого кода был баг. Открыть визард вм -> создать сеть -> открыть визард вм и в списке сетей нету новой сети
+
+  const payload: UI_I_TablePayload = {
+    pagination: {
+      page: 1,
+      pageSize: 100,
+    },
+    schema: 'full',
+    type: 'network',
+    sortBy: null,
+  }
+  emits('get-networks-table', payload)
+}
+getNetworks()
+
+const valueProp: 'net_bridge' | 'id' =
+  props.project === 'procurator' ? 'net_bridge' : 'id'
+watch(
+  () => props.networksTable,
+  (newValue) => {
+    const isExistValue = newValue.some(
+      (network) => network[valueProp] === selectedLocation.value
+    )
+    if (!newValue.length || props.type === 'edit' || isExistValue) return
+
+    selectedLocationOld.value = newValue[0][valueProp]
+    selectedLocation.value = newValue[0][valueProp]
+
+    locationOptions.value = [
+      { text: newValue[0].name, value: newValue[0][valueProp] },
+      { text: `${localization.value.common.browse}...`, value: '' },
+    ]
+  },
+  { immediate: true }
+)
+
+const locationModalIsShow = ref<boolean>(false)
+const onHideLocationModal = (): void => {
+  locationModalIsShow.value = false
+  selectedLocation.value = selectedLocationOld.value
+}
+const changeLocation = (event: UI_I_HTMLSelectElement): void => {
+  const value = event.target.value
+  if (value === '') {
+    locationModalIsShow.value = true
+    return
+  }
+
+  selectedLocationOld.value = value
+  selectedLocation.value = value
+  // netBridge.value = value
+}
+const onSelectLocation = (network: UI_I_NetworkTableItem): void => {
+  locationModalIsShow.value = false
+
+  selectedLocationOld.value = network[valueProp]
+  selectedLocation.value = network[valueProp]
+
+  const hasNetwork = locationOptions.value.some(
+    (option) => option.value === network[valueProp]
+  )
+  if (hasNetwork) {
+    return
+  }
+
+  locationOptions.value = [
+    ...locationOptions.value.slice(0, -1),
+    { text: network.name, value: network[valueProp] },
+    locationOptions.value[locationOptions.value.length - 1],
+  ]
+}
+
+const adapterType = ref<string>('rtl8139')
+
+const target = ref<string>('')
+
+const macAddress = ref<string>('')
+const macAddressType = ref<string>('automatic')
+const newNetworkInvalid = ref<boolean>(false)
+watch(
+  newNetworkInvalid,
+  (newValue) => {
+    emits('invalid', newValue)
+  },
+  { immediate: true }
+)
+
+watch(
+  [selectedLocation, adapterType, macAddress, macAddressType, locationOptions],
+  () => {
+    const option = locationOptions.value.find(
+      (option) => option.value === selectedLocation.value
+    )
+    if (!option) return
+
+    emits('send-data', {
+      network: option.text,
+      net_bridge: props.project === 'procurator' ? option.value : '',
+      target: target.value,
+      model: adapterType.value,
+      mac: macAddress.value,
+      boot_order: props.network.boot_order,
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.network,
+  (newValue) => {
+    if (props.type !== 'edit') return
+
+    locationOptions.value = [
+      { text: newValue.network, value: newValue[valueProp] },
+      { text: `${localization.value.common.browse}...`, value: '' },
+    ]
+    selectedLocation.value = newValue[valueProp]
+
+    adapterType.value = newValue.model
+    macAddress.value = newValue.mac
+    target.value = newValue.target
+  },
+  { immediate: true }
+)
+
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      adapterType.value = 'virtio'
+    }
+  },
+  { immediate: true }
+)
+
+const typeError = computed<string>(
+  () => `network_devices[${props.index}].network`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/_customizeHardware/virtualHardware/newNetwork/adapterType/AdapterType.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.adapterType }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-network-model-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-network-model-field-${props.index}`"
+                v-model="adapterTypeLocal"
+                :data-id="`vm-wizard-network-model-field-${props.index}`"
+                :class="`vm-wizard-network-model-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in adapterTypeOptions"
+                  :key="key"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ apiError }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { adapterTypeOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/adapterType/lib/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  adapterType: string
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:adapter-type', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const adapterTypeOptions = ref<UI_I_OptionItem[]>(adapterTypeOptionsConfig)
+
+const adapterTypeLocal = computed<string>({
+  get() {
+    return props.adapterType
+  },
+  set(newValue) {
+    emits('update:adapter-type', newValue)
+  },
+})
+
+const typeError = computed<string>(
+  () => `network_devices[${props.index}].model`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/virtualHardware/newNetwork/adapterType/lib/config/options.ts

@@ -0,0 +1,9 @@
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const adapterTypeOptionsConfig: UI_I_OptionItem[] = [
+  { text: 'Paravirtual', value: 'virtio' },
+  { text: 'E1000', value: 'e1000' },
+  { text: 'RTL8139', value: 'rtl8139' },
+  { text: 'VMXNET 3', value: 'vmxnet3' },
+  { text: 'SR-IOV passthrough', value: '', disabled: true },
+]

package/components/common/vm/actions/common/_customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.macAddress }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!macAddressLocalAndApiErrorsTexts"
+            :selector="`.vm-wizard-network-mac-address-field-${props.index}`"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <input
+                :id="`vm-wizard-network-mac-address-field-${props.index}`"
+                type="text"
+                :value="props.macAddress"
+                :data-id="`vm-wizard-network-mac-address-field-${props.index}`"
+                :disabled="
+                  props.macAddressType === 'automatic' || props.disabled
+                "
+                :class="[
+                  `vm-wizard-network-mac-address-field-${props.index}`,
+                  { 'has-error': macAddressLocalErrorText },
+                ]"
+                @input="onChangeMacAddress"
+              />
+            </template>
+            <template #content>
+              {{ macAddressLocalAndApiErrorsTexts }}
+            </template>
+          </atoms-tooltip-error>
+
+          <div class="select">
+            <select
+              :id="`mac-address-select-${props.index}`"
+              :value="props.macAddressType"
+              :data-id="`mac-address-select-${props.index}`"
+              :disabled="props.disabled"
+              @change="onChangeMacAddressType"
+            >
+              <option
+                v-for="(item, key) in macAddressOptions"
+                :key="key"
+                :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import { macAddressOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/lib/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  macAddressType: string
+  macAddress: string
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:mac-address', value: string): void
+  (event: 'update:mac-address-type', value: string): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const macAddressOptions = ref<UI_I_OptionItem[]>(
+  macAddressOptionsFunc(localization.value)
+)
+
+const onChangeMacAddressType = (event: UI_I_HTMLSelectElement): void => {
+  emits('update:mac-address-type', event.target.value)
+  emits(
+    'update:mac-address',
+    event.target.value === 'manual' ? '00:50:56:' : ''
+  )
+}
+const onChangeMacAddress = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emits('update:mac-address', target.value)
+}
+
+const macAddressLocalErrorText = computed<string>(() => {
+  /* eslint-disable no-useless-escape */
+  const isValidMacAddress =
+    /^[0-9a-f]{1,2}([\.:-])(?:[0-9a-f]{1,2}\1){4}[0-9a-f]{1,2}$/.test(
+      props.macAddress
+    )
+
+  return props.macAddressType === 'manual' && !isValidMacAddress
+    ? localization.value.common.invalidMacAddress
+    : ''
+})
+watch(macAddressLocalErrorText, (text) => {
+  emits('invalid', !!text.length)
+})
+
+const typeError = computed<string>(
+  () => `network_devices[${props.index}].mac_address`
+)
+
+const apiErrorLocal = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const macAddressLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = macAddressLocalErrorText.value
+  const apiError = apiErrorLocal.value
+
+  let result = ''
+  if (localError && !apiError) result = localError
+  if (!localError && apiError) result = apiError
+  if (localError && apiError) result = localError + ', ' + apiError
+  if (!localError && apiError) result = apiError
+
+  return result
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped lang="scss">
+.has-error {
+  border: 1px solid #db2100;
+}
+</style>