bfg-common 1.0.0

package/components/common/diagramMain/adapter/Contents.vue

@@ -0,0 +1,96 @@
+<template>
+  <g data-title="adapter-block-contents">
+    <foreignObject
+      v-if="hasAdapters"
+      data-title="adapter-toggle"
+      width="18"
+      height="18"
+      x="438"
+      :y="arrawIconPosition"
+      cursor="pointer"
+      @click="onToggleAdapters"
+    >
+      <div class="diagram-block__toggle">
+        <atoms-the-icon
+          name="angle"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              open: props.adaptersWithPositions.toggle,
+            },
+          ]"
+        />
+      </div>
+    </foreignObject>
+    <text
+      data-title="adapter-main-text"
+      dy="14px"
+      font-size="14"
+      font-weight="500"
+      x="462"
+      :y="props.adaptersWithPositions.titlePosition"
+      class="diagram__heading"
+    >
+      {{ localization.physicalAdapters }}
+    </text>
+
+    <text
+      v-if="!hasAdapters"
+      data-title="no-adapter-text"
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      x="462"
+      y="53"
+    >
+      {{ localization.noPhysicalNetworkAdapters }}
+    </text>
+  </g>
+</template>
+
+<script setup lang="ts">
+import { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+}>()
+const emits = defineEmits<{
+  (event: 'toggle-adapters', networkId: string, portId: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const hasAdapters = computed<boolean>(
+  () => props.adaptersWithPositions.adaptersCount > 0
+)
+const arrawIconPosition = computed<number>(
+  () => props.adaptersWithPositions.titlePosition + 1
+)
+
+const onToggleAdapters = (networkId: string, portId: string): void => {
+  emits('toggle-adapters', networkId, portId)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.virtual-switch__arrow-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transform: rotate(90deg);
+  align-self: center;
+  fill: var(--triger-icon-color);
+  cursor: pointer;
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+.diagram__heading {
+  @include text($fs: 14px, $fw: 500);
+  fill: #565656;
+  letter-spacing: normal;
+  line-height: 1.2rem;
+}
+</style>

package/components/common/diagramMain/adapter/Lines.vue

@@ -0,0 +1,52 @@
+<template>
+  <g data-title="adapter-lines-group">
+    <line
+      data-title="adapter-line"
+      x1="391.5"
+      :y1="props.adaptersConnectLineY"
+      x2="362.5"
+      :y2="props.adaptersConnectLineY"
+      shape-rendering="geometricprecision"
+      class="connection-line"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapters-main-line"
+      type="line-orange"
+      x="391.5"
+      :y="props.adaptersConnectLineY"
+      x2="362.5"
+      :y2="props.adaptersConnectLineY"
+      :hide="!isHighlightedAdapterLine"
+    />
+
+    <line
+      data-title="adapter-line-invisible"
+      x1="391.5"
+      :y1="props.adaptersConnectLineY"
+      x2="362.5"
+      :y2="props.adaptersConnectLineY"
+      shape-rendering="geometricprecision"
+      class="invisible-line main-line__handler"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  adaptersConnectLineY: number
+  isHighlightedAdapterLine: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.connection-line {
+  stroke: #888;
+}
+.invisible-line {
+  cursor: pointer;
+  stroke: #000;
+  stroke-opacity: 0;
+  stroke-width: 10px;
+}
+</style>

package/components/common/diagramMain/adapter/SecondBlock.vue

@@ -0,0 +1,42 @@
+<template>
+  <g data-title="adapter-second-block-group">
+    <path
+      data-title="adapter-second-block"
+      :d="`M 411.5 ${props.adaptersWithPositionsRectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
+      shape-rendering="geometricprecision"
+      class="panel"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapter-second"
+      type="second-orange"
+      :d="`M 411.5 ${props.adaptersWithPositionsRectPosition} H 391.5 V ${rectBottomPosition} H 411.5 `"
+      :hide="!isHighlightedClosedAdapterBlock"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  adaptersWithPositionsRectPosition: number
+  adaptersWithPositionsHeight: number
+  isHighlightedClosedAdapterBlock: boolean
+}>()
+
+const rectBottomPosition = computed<number>(
+  () =>
+    props.adaptersWithPositionsRectPosition + props.adaptersWithPositionsHeight
+)
+</script>
+
+<style scoped lang="scss">
+.panel {
+  fill: #fff;
+  stroke: #888;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
+}
+</style>

package/components/common/diagramMain/config/index.ts

@@ -0,0 +1,51 @@
+import {
+  UI_I_Adapter,
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFull,
+} from '~/components/common/diagramMain/models/interfaces'
+import * as initial from '~/components/common/diagramMain/config/initial'
+
+export const dataForSelectedNetworkFunc = (
+  network: UI_I_NetworkFull
+): UI_I_ModalsInitialData => ({
+  networkLabel: network.title,
+  vlanId: network.vlanId === '--' ? 0 : network.vlanId,
+  securityPolicy: network?.securityPolicy,
+  shapingPolicy: network?.shapingPolicy,
+  nicTeamingPolicy: network?.nicTeamingPolicy,
+  average_bw: network?.average_bw,
+  peak_bw: network?.peak_bw,
+  burst_size: network?.burst_size,
+  activeAdapters: network?.activeAdapters,
+  standbyAdapters: network?.standbyAdapters,
+  unusedAdapters: network?.unusedAdapters,
+  nics_override: network?.nics_override,
+})
+
+export const dataForSelectedAdapterFunc = (
+  adapter: UI_I_Adapter
+): UI_I_ModalsInitialData =>
+  adapter && {
+    id: adapter.id,
+    name: adapter.name,
+    fullName: adapter.fullName,
+    adapter: adapter.adapter,
+    pciAddress: adapter.pciAddress,
+    driver: adapter.driver,
+    carrier: adapter.carrier,
+    speed: adapter.speed,
+    duplex: adapter.duplex,
+    networks: adapter.networks,
+    srIov: adapter.srIov,
+    cdp: adapter.cdp,
+    lldp: adapter.lldp,
+  }
+
+export const {
+  managePhysicalAdapterStatusInitial,
+  mainRectHeightsInitial,
+  switchLineInitial,
+  selectedPortInitial,
+  selectedAdapterInitial,
+  selectedSwitchLineYInitial,
+} = initial

package/components/common/diagramMain/config/initial.ts

@@ -0,0 +1,38 @@
+import {
+  UI_I_AdapterStatus,
+  UI_I_MainRectHeights, UI_I_SelectedAdapter, UI_I_SelectedPort,
+  UI_I_SwitchLine
+} from '~/components/common/diagramMain/models/interfaces'
+
+export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
+  active: [],
+  standBy: [],
+  unused: [],
+}
+
+export const mainRectHeightsInitial: UI_I_MainRectHeights = {
+  networksHeight: 0,
+  adaptersHeight: 0,
+}
+
+export const switchLineInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+  ay: 0,
+}
+
+export const selectedPortInitial: UI_I_SelectedPort = {
+  networkId: '-1',
+  portId: '-1',
+  activeAdapters: [],
+}
+
+export const selectedAdapterInitial: UI_I_SelectedAdapter = {
+  adapterId: '-1',
+  connectedPorts: [],
+}
+
+export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+}

package/components/common/diagramMain/modals/ManagePhysicalAdaptersModal.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="localization.managePhysicalNetworkAdapters"
+      :second-title="props.switchName"
+      class="diagram-action__edit"
+      @hide="onHideManagePhysicalAdaptersModal"
+      @submit="onSendManageAdapter"
+    >
+      <template #modalBody>
+        <div class="wizard-content__container">
+          <div class="wizard-content">
+            <common-adapter-manager
+              test-id="manage-physical-adapter"
+              :is-active="true"
+              :full-mode="true"
+              :adapters="props.adapters"
+              :free-adapters="props.freeAdapters"
+              :added-adapters="addedAdapters"
+              :adapter-status="props.adapterStatus"
+              :is-show-no-connected-active-adapters-modal="
+                isShowNoConnectedActiveAdaptersModal
+              "
+              :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
+              @hide-no-connected-active-adapters-modal="
+                onHideNoConnectedActiveAdaptersModal
+              "
+              @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+              @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+              @change-added-adapters="onChangeAddedAdapters"
+              @change-adapter-status="onChangeAdapterStatus"
+              @get-free-adapters="onGetFreeAdapters"
+            />
+          </div>
+        </div>
+        <atoms-loader v-show="isShowLoader" />
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+  UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    switchName: string
+    show: boolean
+    viewName: string
+    width: string
+    height: string
+    freeAdapters: UI_I_Adapter[]
+    adapterStatus: UI_I_AdapterStatus
+    adapters: UI_I_SwitchAdapters
+    initialAdapterStatus: UI_I_AdapterStatus
+  }>(),
+  {
+    switchName: '',
+    adapterStatus: () => ({
+      active: [],
+      standBy: [],
+      unused: [],
+    }),
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowLoader = ref(false)
+
+const showLoader = () => {
+  isShowLoader.value = true
+}
+const hideLoader = () => {
+  isShowLoader.value = false
+}
+
+const addedAdapters = ref<string[]>()
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
+  addedAdapters.value = addedAdaptersNew
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const isShowNoConnectedActiveAdaptersModal = ref(false)
+const isShowNoActiveAdaptersModal = ref(false)
+
+const showNoConnectedActiveAdaptersModal = () => {
+  isShowNoConnectedActiveAdaptersModal.value = true
+}
+const onHideNoConnectedActiveAdaptersModal = () => {
+  isShowNoConnectedActiveAdaptersModal.value = false
+}
+const showNoActiveAdaptersModal = () => {
+  isShowNoActiveAdaptersModal.value = true
+}
+const onHideNoActiveAdaptersModal = () => {
+  isShowNoActiveAdaptersModal.value = false
+}
+
+const onSendManagePhysicalAdaptersData = (
+  adapterStatus: UI_I_AdapterStatus,
+  switchName: string,
+  hideManagePhysicalAdaptersModal: () => void,
+  hideLoader: () => void
+) => {
+  showLoader()
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+}
+const onConfirmNoActiveAdaptersModal = () => {
+  onSendManagePhysicalAdaptersData(
+    props.adapterStatus,
+    props.switchName,
+    onHideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+  onHideNoConnectedActiveAdaptersModal()
+  onHideNoActiveAdaptersModal()
+}
+
+const onSendManageAdapter = () => {
+  if (props.adapterStatus.active.length === 0) {
+    showNoActiveAdaptersModal()
+    return
+  }
+
+  const activeAndConnectedAdapters = props.adapterStatus.active.filter(
+    (adapterName: string) =>
+      props.adapters.items.find(
+        (ad: UI_I_SwitchAdapterItem) => ad.name === adapterName
+      )?.carrier
+  )
+  if (activeAndConnectedAdapters.length === 0) {
+    showNoConnectedActiveAdaptersModal()
+    return
+  }
+
+  onSendManagePhysicalAdaptersData(
+    props.adapterStatus,
+    props.switchName,
+    onHideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+}
+
+// Modal
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'get-free-adapters', showAddAdapterModal: () => void): void
+  (event: 'change-added-adapters', addedAdapters: string[]): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModalCB: () => void,
+    hideLoaderCB: () => void
+  ): void
+}>()
+
+const onGetFreeAdapters = (showAddAdapterModal: () => void) => {
+  showLoader()
+  emits('get-free-adapters', () => {
+    hideLoader()
+    showAddAdapterModal()
+  })
+}
+
+const onHideManagePhysicalAdaptersModal = (): void => {
+  addedAdapters.value = []
+  emits('change-adapter-status', props.initialAdapterStatus)
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.secondary-title) {
+  font-size: 18px;
+  font-weight: 200;
+}
+
+:deep(.modal-body-content.modal-body-content__confirmation) {
+  display: flex;
+
+  .confirm-icon-container {
+    margin-right: 20px;
+  }
+
+  .preserve-newlines {
+    white-space: pre-line;
+    font-size: 15px;
+  }
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+
+:deep(.table-fixed-height) {
+  height: 290px;
+  max-height: 290px;
+}
+</style>