bfg-common 1.6.95 → 1.6.97

package/components/common/configure/physicalAdapters/PhysicalAdaptersNew.vue

@@ -0,0 +1,392 @@
+<template>
+    <div
+            :class="[
+      'physical-adapters h-full',
+      {
+        'has-no-selected': !props.hasSelectedAdapter,
+      },
+    ]"
+    >
+        <common-split-vertical
+                :bottom-panel-min-height="80"
+                :top-panel-min-height="110"
+                :top-panel-h="60"
+                parent-element-selector=".physical-adapters"
+        >
+            <template #firstPanel>
+                <div class="physical-adapters__wrapper h-full flex flex-col">
+                    <h2 class="physical-adapters-title">
+                        {{ localization.common.physicalAdapters }}
+                    </h2>
+                    <!--          <common-configure-physical-adapters-buttons-->
+                    <!--            v-show="!props.switchAdaptersLoading"-->
+                    <!--            :has-selected-adapter="props.hasSelectedAdapter"-->
+                    <!--            @show-add-networking-modal="onShowAddNetworkingModal"-->
+                    <!--            @show-edit-modal="onShowEditModal"-->
+                    <!--            @global-refresh-adapters="emits('global-refresh-adapters')"-->
+                    <!--          />-->
+                    <common-configure-physical-adapters-table-view
+                            v-model="selectedRow"
+                            :is-loading="props.switchAdaptersLoading"
+                            :adapters="props.adapters"
+                            :has-selected-adapter="props.hasSelectedAdapter"
+                            @add="onShowAddNetworkingModal"
+                            @refresh="emits('global-refresh-adapters')"
+                            @edit="onShowEditModal"
+                    />
+                </div>
+            </template>
+
+            <template #secondPanel>
+                <div
+                        :class="[
+            'physical-adapters__bottom-wrapper flex flex-col h-full overflow-auto',
+            {
+              'has-selected-adapter': props.hasSelectedAdapter,
+            },
+          ]"
+                >
+                    <template v-if="props.hasSelectedAdapter">
+                        <h4 v-if="viewSettingsFields" class="selected-adapter-info">
+                            {{ localization.common.physicalNetworkAdapter }}:
+                            {{ viewSettingsFields[0].rows[1].value }}
+                        </h4>
+                        <common-diagram-main-modals-view-settings-info
+                                :v-if="!!viewSettingsFields"
+                                :show="!!viewSettingsFields"
+                                :selected-tab="0"
+                                :modal-tabs="props.tabs"
+                                :full-mode="false"
+                                :view-settings-fields="viewSettingsFields"
+                                :with-collapse="true"
+                                :view-name="localization.common.physicalAdapter2"
+                                height="10px"
+                        />
+                    </template>
+
+                    <common-configure-physical-adapters-empty-block v-else />
+                </div>
+            </template>
+        </common-split-vertical>
+        <common-wizards-network-add
+                v-if="isShowAddNetworkingModal"
+                :show="isShowAddNetworkingModal"
+                :adapters="props.adapters"
+                :standard-switches-initial="props.standardSwitches"
+                :free-adapters="props.freeAdapters"
+                :is-dark-mode="props.isDarkMode"
+                :is-networking-loading="props.isNetworkingLoading"
+                :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+                :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+                :diagrams-data="props.diagramData"
+                :tcp-stacks="props.tcpStacks"
+                :host-name="props.hostName"
+                :project="props.project"
+                @check-network-label="onCheckNetworkLabel"
+                @get-existing-standard-switches="emits('get-existing-switches')"
+                @get-tcp-stacks="onGetTcpStacks"
+                @get-free-adapters="onGetFreeAdapters"
+                @send-add-networking-data="onSendNetworkData"
+                @add-networking-data-validate="onValidateBeforeSending"
+                @hide="onHideAddNetworkingModal"
+        />
+
+        <common-configure-physical-adapters-modals-edit
+                v-if="isShowEditModal"
+                v-model:config-speed="configSpeed"
+                v-model:status="sriovStatus"
+                v-model:number-of-functions="numberOfFunctions"
+                :selected-adapter="selectedAdapter"
+                :has-speed="hasSpeed"
+                @hide="onHideEditModal"
+                @send-edit-data="onSendEditData"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+    UI_I_Localization,
+    UI_I_ArbitraryObject,
+    UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+    UI_I_Adapter,
+    UI_I_SwitchAdapterItem,
+    UI_I_DiagramData,
+    API_UI_I_SwitchItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type {
+    UI_I_Switch,
+    UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+    UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+    UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
+    UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { adapterViewSettingsFunc } from '~/components/common/configure/physicalAdapters/tableView/lib/config/settings'
+import type {
+    UI_I_ViewSettingsFields,
+    UI_I_ViewSettingsModalTabs,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+
+const props = defineProps<{
+    hostName: string
+    project: UI_T_Project
+    isDarkMode: boolean
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    switchAdaptersLoading: boolean
+    isNetworkingLoading: boolean
+    isGetExistingSwitchesLoading: boolean
+    isGetTcpStackLoading: boolean
+    tcpStacks: UI_I_TCPStack[]
+    diagramData: UI_I_DiagramData[]
+    standardSwitches: UI_I_Switch[]
+    freeAdapters: UI_I_Adapter[]
+    tabs: UI_I_ViewSettingsModalTabs[]
+    hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+    (event: 'get-tcp-stacks'): void
+    (event: 'global-refresh-adapters'): void
+    (event: 'get-virtual-switches'): void
+    (event: 'get-existing-switches'): void
+    (event: 'get-switch-adapters'): void
+    (event: 'send-dit-data'): void
+    (
+        event: 'check-network-label',
+        label: string,
+        sendMessage: (message: string) => void
+    ): void
+    (event: 'get-free-adapters', showModal: () => void): void
+    (
+        event: 'send-networking-data',
+        data:
+            | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+            | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+            | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+            | API_UI_I_SwitchItem,
+        type: string,
+        hideModal: () => void
+    ): void
+    (
+        event: 'send-validation',
+        data:
+            | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+            | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+            | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+            | API_UI_I_SwitchItem,
+        type: string,
+        setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+    ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+
+const idFromAction = ref<number>()
+
+const hasSelectedAdapterFromAction = computed<boolean>(
+    () => typeof idFromAction.value === 'number'
+)
+
+const selectedAdapter = computed<UI_I_SwitchAdapterItem | null>(() => {
+    if (!props.adapters.items) return null
+
+    if (hasSelectedAdapterFromAction.value) {
+        return props.adapters.items[idFromAction.value as number]
+    }
+
+    if (props.hasSelectedAdapter) {
+        return props.adapters.items[selectedRow.value as number]
+    }
+})
+
+const viewSettingsFields = computed<UI_I_ViewSettingsFields[] | false>(
+    () =>
+        selectedAdapter.value &&
+        adapterViewSettingsFunc(localization.value, selectedAdapter.value)
+)
+
+const isShowAddNetworkingModal = ref<boolean>(false)
+const onShowAddNetworkingModal = async (): Promise<void> => {
+    isShowAddNetworkingModal.value = true
+    emits('get-virtual-switches')
+}
+
+const onHideAddNetworkingModal = (): void => {
+    isShowAddNetworkingModal.value = false
+}
+
+const onGetTcpStacks = async (): Promise<void> => {
+    emits('get-tcp-stacks')
+}
+
+const onCheckNetworkLabel = async (
+    label: string,
+    sendMessage: (message: string) => void
+): Promise<void> => {
+    emits('check-network-label', label, sendMessage)
+}
+
+const onGetFreeAdapters = async (showModal: () => void): Promise<void> => {
+    emits('get-free-adapters', showModal)
+}
+
+const onSendNetworkData = async (
+    data:
+        | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+        | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+        | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+        | API_UI_I_SwitchItem,
+    type: string,
+    hideModal: () => void
+): Promise<void> => {
+    emits('send-networking-data', data, type, hideModal)
+}
+
+const onValidateBeforeSending = async (
+    data:
+        | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+        | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+        | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+        | API_UI_I_SwitchItem,
+    type: string,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+): Promise<void> => {
+    emits('send-validation', data, type, setValidation)
+}
+
+const isShowEditModal = ref<boolean>(false)
+
+const onShowEditModal = (id: number): void => {
+    idFromAction.value = id
+    isShowEditModal.value = true
+}
+
+const onHideEditModal = (): void => {
+    isShowEditModal.value = false
+    idFromAction.value = undefined
+
+    configSpeed.value = 'auto'
+    sriovStatus.value = false
+    numberOfFunctions.value = 0
+}
+
+const hasSpeed = computed<boolean>(() =>
+    selectedAdapter.value ? Number(selectedAdapter.value.speed) >= 0 : false
+)
+
+const configSpeed = ref<string>('auto')
+const sriovStatus = ref<boolean>(false)
+const numberOfFunctions = ref<number>(1)
+
+const onSendEditData = (): void => {
+    onHideEditModal()
+
+    emits('send-dit-data')
+}
+
+onBeforeMount(async () => {
+    emits('get-switch-adapters')
+})
+</script>
+
+<style scoped lang="scss">
+@import '~/node_modules/bfg-common/assets/scss/common/mixins.scss';
+.physical-adapters {
+  @include flex($dir: column);
+
+  h2.physical-adapters-title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 22px;
+    letter-spacing: 0;
+    color: var(--title-form-first-color);
+    padding-top: 6px;
+    padding-bottom: 24px;
+  }
+
+  h4.selected-adapter-info {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0;
+    color: var(--title-form-first-color);
+    padding: 16px;
+  }
+
+  :deep(.info-container) {
+    padding: 0 16px 16px;
+    height: calc(100% - 34px);
+    background: #ffffff;
+
+    .tabs-container {
+      padding-right: 0;
+    }
+
+    .table-fixed-height {
+      scrollbar-gutter: stable;
+      height: calc(100% - 36px);
+      min-height: unset;
+      max-height: unset;
+      padding-right: unset;
+    }
+  }
+
+  :deep(.fill-parent .secondPanel) {
+    margin-top: 16px;
+    background: var(--table-bg);
+    box-shadow: 0px 1px 4px 0px #00000014;
+    border-radius: 8px;
+    min-height: 176px;
+
+    .info-container {
+      background: var(--table-bg);
+    }
+  }
+
+  :deep(.fill-parent .firstPanel) {
+    margin-bottom: 16px;
+    min-height: 280px;
+
+    .sec-nav-container {
+      overflow: visible;
+    }
+  }
+}
+
+.physical-adapters__bottom-wrapper {
+  height: calc(100% - 16px);
+  overflow: hidden;
+
+  :deep(.no-items-found-title) {
+    font-weight: 400;
+  }
+
+  &:not(.has-selected-adapter) {
+    padding: 0 16px;
+  }
+}
+
+.physical-adapters.has-no-selected {
+  :deep(.fill-parent .secondPanel) {
+    background: transparent;
+    box-shadow: unset;
+
+    .physical-adapters__bottom-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.physical-adapters__wrapper {
+  :deep(.ui-main-no-items-found) {
+    transform: translate(-50%, calc(-50% - 27.5px));
+  }
+}
+</style>

package/components/common/configure/physicalAdapters/PhysicalAdaptersOld.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="physical-adapters h-full">
+    <common-split-vertical
+      :bottom-panel-min-height="80"
+      :top-panel-min-height="110"
+      :top-panel-h="60"
+      parent-element-selector=".physical-adapters"
+    >
+      <template #firstPanel>
+        <div class="physical-adapters__wrapper h-full flex flex-col">
+          <common-headline :headline="localization.common.physicalAdapters" />
+          <common-configure-physical-adapters-buttons
+            v-show="!props.switchAdaptersLoading"
+            :has-selected-adapter="props.hasSelectedAdapter"
+            @show-add-networking-modal="onShowAddNetworkingModal"
+            @show-edit-modal="onShowEditModal"
+            @global-refresh-adapters="emits('global-refresh-adapters')"
+          />
+          <common-configure-physical-adapters-table-view
+            v-show="!props.switchAdaptersLoading"
+            v-model="selectedRow"
+            :adapters="props.adapters"
+          />
+        </div>
+      </template>
+
+      <template #secondPanel>
+        <div
+          v-show="!props.switchAdaptersLoading"
+          class="physical-adapters__bottom-wrapper flex flex-col h-full overflow-auto"
+        >
+          <template v-if="props.hasSelectedAdapter">
+            <span v-if="viewSettingsFields" class="selected-adapter-info">
+              {{ localization.common.physicalNetworkAdapter }}:
+              {{ viewSettingsFields[0].rows[1].value }}
+            </span>
+            <common-diagram-main-modals-view-settings-info
+              :v-if="!!viewSettingsFields"
+              :show="!!viewSettingsFields"
+              :selected-tab="0"
+              :modal-tabs="props.tabs"
+              :full-mode="false"
+              :view-settings-fields="viewSettingsFields"
+              :with-collapse="true"
+              :view-name="localization.common.physicalAdapter2"
+            />
+          </template>
+
+          <common-configure-physical-adapters-empty-block v-else />
+        </div>
+      </template>
+    </common-split-vertical>
+    <common-wizards-network-add
+      v-if="isShowAddNetworkingModal"
+      :show="isShowAddNetworkingModal"
+      :adapters="props.adapters"
+      :standard-switches-initial="props.standardSwitches"
+      :free-adapters="props.freeAdapters"
+      :is-dark-mode="props.isDarkMode"
+      :is-networking-loading="props.isNetworkingLoading"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+      :diagrams-data="props.diagramData"
+      :tcp-stacks="props.tcpStacks"
+      :host-name="props.hostName"
+      :project="props.project"
+      @check-network-label="onCheckNetworkLabel"
+      @get-existing-standard-switches="emits('get-existing-switches')"
+      @get-tcp-stacks="onGetTcpStacks"
+      @get-free-adapters="onGetFreeAdapters"
+      @send-add-networking-data="onSendNetworkData"
+      @add-networking-data-validate="onValidateBeforeSending"
+      @hide="onHideAddNetworkingModal"
+    />
+
+    <common-configure-physical-adapters-modals-edit
+      v-if="isShowEditModal"
+      v-model:config-speed="configSpeed"
+      v-model:status="sriovStatus"
+      v-model:number-of-functions="numberOfFunctions"
+      :selected-adapter="selectedAdapter"
+      :has-speed="hasSpeed"
+      @hide="onHideEditModal"
+      @send-edit-data="onSendEditData"
+    />
+  </div>
+  <atoms-loader
+    v-show="props.switchAdaptersLoading"
+    test-id="physical-adapters-spinner"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_SwitchAdapterItem,
+  UI_I_DiagramData,
+  API_UI_I_SwitchItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type {
+  UI_I_Switch,
+  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { adapterViewSettingsFunc } from '~/components/common/configure/physicalAdapters/tableView/lib/config/settings'
+import type {
+  UI_I_ViewSettingsFields,
+  UI_I_ViewSettingsModalTabs,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+
+const props = defineProps<{
+  hostName: string
+  project: UI_T_Project
+  isDarkMode: boolean
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  switchAdaptersLoading: boolean
+  isNetworkingLoading: boolean
+  isGetExistingSwitchesLoading: boolean
+  isGetTcpStackLoading: boolean
+  tcpStacks: UI_I_TCPStack[]
+  diagramData: UI_I_DiagramData[]
+  standardSwitches: UI_I_Switch[]
+  freeAdapters: UI_I_Adapter[]
+  tabs: UI_I_ViewSettingsModalTabs[]
+  hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'get-tcp-stacks'): void
+  (event: 'global-refresh-adapters'): void
+  (event: 'get-virtual-switches'): void
+  (event: 'get-existing-switches'): void
+  (event: 'get-switch-adapters'): void
+  (event: 'send-dit-data'): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (
+    event: 'send-networking-data',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    hideModal: () => void
+  ): void
+  (
+    event: 'send-validation',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+
+const selectedAdapter = computed<UI_I_SwitchAdapterItem | null>(() =>
+  props.adapters.items && props.hasSelectedAdapter
+    ? props.adapters.items[selectedRow.value as number]
+    : null
+)
+
+const viewSettingsFields = computed<UI_I_ViewSettingsFields[] | false>(
+  () =>
+    selectedAdapter.value &&
+    adapterViewSettingsFunc(localization.value, selectedAdapter.value)
+)
+
+const isShowAddNetworkingModal = ref<boolean>(false)
+const onShowAddNetworkingModal = async (): Promise<void> => {
+  isShowAddNetworkingModal.value = true
+  emits('get-virtual-switches')
+}
+
+const onHideAddNetworkingModal = (): void => {
+  isShowAddNetworkingModal.value = false
+}
+
+const onGetTcpStacks = async (): Promise<void> => {
+  emits('get-tcp-stacks')
+}
+
+const onCheckNetworkLabel = async (
+  label: string,
+  sendMessage: (message: string) => void
+): Promise<void> => {
+  emits('check-network-label', label, sendMessage)
+}
+
+const onGetFreeAdapters = async (showModal: () => void): Promise<void> => {
+  emits('get-free-adapters', showModal)
+}
+
+const onSendNetworkData = async (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  hideModal: () => void
+): Promise<void> => {
+  emits('send-networking-data', data, type, hideModal)
+}
+
+const onValidateBeforeSending = async (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+): Promise<void> => {
+  emits('send-validation', data, type, setValidation)
+}
+
+const isShowEditModal = ref<boolean>(false)
+
+const onShowEditModal = (): void => {
+  isShowEditModal.value = true
+}
+const onHideEditModal = (): void => {
+  isShowEditModal.value = false
+}
+
+const hasSpeed = computed<boolean>(() =>
+  selectedAdapter.value ? Number(selectedAdapter.value.speed) >= 0 : false
+)
+
+const configSpeed = ref<string>('auto')
+const sriovStatus = ref<boolean>(false)
+const numberOfFunctions = ref<number>(0)
+
+const onSendEditData = (): void => {
+  onHideEditModal()
+
+  emits('send-dit-data')
+}
+
+onBeforeMount(async () => {
+  emits('get-switch-adapters')
+})
+</script>
+
+<style scoped lang="scss">
+@import '~/node_modules/bfg-common/assets/scss/common/mixins.scss';
+.physical-adapters {
+  @include flex($dir: column);
+  padding-left: 10px;
+
+  :deep(.fill-parent .secondPanel) {
+    min-height: 150px;
+  }
+
+  :deep(.fill-parent .firstPanel) {
+    min-height: 200px;
+  }
+
+  &__bottom-wrapper {
+    overflow: hidden;
+
+    .selected-adapter-info {
+      margin-top: 12px;
+      font-weight: 700;
+
+      :deep(.settings-table) {
+        border: none;
+      }
+    }
+  }
+  &__tabs {
+    margin-bottom: 12px;
+  }
+
+  :deep(.info-container) {
+    height: calc(100% - 36px);
+  }
+  :deep(.table-fixed-height) {
+    height: calc(100% - 36px);
+    min-height: unset;
+    max-height: unset;
+    .table-fixed-full-height {
+      height: calc(100% - 36px);
+    }
+  }
+}
+</style>