bfg-common 1.5.423 → 1.5.424

package/components/common/diagramMain/port/Port.vue

@@ -1,578 +1,580 @@
-<template>
-  <g>
-    <g>
-      <common-diagram-main-highlights
-        data-title="port-vm"
-        type="main-blue"
-        width="276"
-        :height="portRectHeight"
-        :x="positions.blockX"
-        :y="portRectPosition"
-        :hide="!showHighlightPortSelectedPort"
-      />
-      <common-diagram-main-highlights
-        data-title="port-vm"
-        type="main-orange"
-        width="276"
-        :height="portRectHeight"
-        :x="positions.blockX"
-        :y="portRectPosition"
-        :hide="!showHighlightPortSelectedAdapter"
-      />
-    </g>
-
-    <a
-      :id="testId"
-      data-title="port-vm-name"
-      :data-id="`${props.network.testId}-${props.port.testId}-select`"
-      cursor="pointer"
-      @click="onSelectPort(props.network.id, props.port.id)"
-    >
-      <foreignObject
-        data-title="network-name-text"
-        height="20"
-        :width="positions.portWidth"
-        :x="positions.portX"
-        :y="portTitlePosition"
-        class="diagram__values"
-      >
-        <!--          v-if="props.port.state?.state === 2 || props.port.state?.state === 3"-->
-        <span
-          :class="[
-            'port-state-icon-container',
-            isNewView && 'port-state-icon-container-new',
-          ]"
-          :title="!isNewView && portErrorText"
-        >
-          <template v-if="isNewView">
-            <Teleport to="body">
-              <ui-tooltip-info
-                :id="`port-tooltip-${props.port.id}`"
-                :test-id="`port-tooltip-${props.port.id}`"
-                :info="warningType"
-                :title="localization.common[warningType]"
-                :text="portErrorText"
-              />
-            </Teleport>
-
-            <div
-              :id="`port-tooltip-${props.port.id}`"
-              class="popped tooltip inline-block"
-            >
-              <ui-icon
-                v-if="props.port.state?.state === 2"
-                name="warning-outline"
-                width="14"
-                height="14"
-                color="#fbce28"
-              />
-              <ui-icon
-                v-if="props.port.state?.state === 3"
-                name="error-outline"
-                width="14"
-                height="14"
-                color="#ea3223"
-              />
-            </div>
-          </template>
-          <template v-else>
-            <atoms-the-icon
-              v-if="props.port.state?.state === 2"
-              name="warning"
-              width="15"
-              height="15"
-            />
-            <atoms-the-icon
-              v-if="props.port.state?.state === 3"
-              name="error-outline"
-              width="15"
-              height="15"
-            />
-          </template>
-        </span>
-        <span
-          class="port-text text-ellipsis"
-          :title="props.port.name"
-          :id="`port_${props.port.id}`"
-        >
-          {{ props.port.name }}
-        </span>
-      </foreignObject>
-    </a>
-
-    <text
-      v-if="isVCenter"
-      data-title="v-center-with-mac-address-text"
-      dy="7px"
-      font-size="1em"
-      font-weight="400"
-      :x="positions.portX"
-      class="diagram__values small"
-      :y="macAddressPosition"
-    >
-      {{ localization.common.macAddress }}: 00:0c:29:a8:0f:74
-    </text>
-
-    <common-diagram-main-highlights
-      data-title="port-vm-line"
-      type="line-orange"
-      :x="positions.x1"
-      :y="portLinePosition"
-      :x2="positions.x2"
-      :y2="portLinePosition"
-      :hide="!showHighlightLine"
-    />
-
-    <foreignObject
-      v-if="(isVCenter || isVMPortsGroup) && props.port.isActive"
-      data-title="vm-play-icon"
-      :width="positions.playIconSize"
-      :height="positions.playIconSize"
-      :x="positions.playIconX"
-      :y="positions.playIconY"
-    >
-      <div style="margin: 0; display: block">
-        <ui-icon v-if="isNewView" name="diagram-vm-play" />
-        <atoms-diagram-icon v-else name="v-center-play" />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      data-title="port-vm-action-icon"
-      width="18"
-      height="18"
-      :x="positions.actionX"
-      :y="positions.actionY"
-      cursor="pointer"
-    >
-      <div v-if="isNewView" class="dropdown-actions-container">
-        <button
-          :id="`dropdown-${props.network.id}-${props.port.id}`"
-          :class="[
-            'action-button',
-            { 'action-button-selected': isShowDropdown },
-          ]"
-          @click="isShowDropdown = !isShowDropdown"
-        >
-          <ui-icon name="horizontal-dotes" width="16" height="16" />
-        </button>
-        <Teleport to="body">
-          <ui-dropdown
-            :test-id="testId"
-            :show="isShowDropdown"
-            :items="navigationItemsNew"
-            :elem-id="`dropdown-${props.network.id}-${props.port.id}`"
-            width="max-content"
-            show-from-left
-            :margin-between-trigger="0"
-            @select="onShowModalWithTypeCheck"
-            @hide="onHide"
-          ></ui-dropdown>
-        </Teleport>
-      </div>
-      <div v-else class="diagram-actions">
-        <atoms-collapse-nav
-          class="diagram-actions__icon"
-          popup-class="diagram-actions__popup"
-          :close-after-click="true"
-          :items="navigationItems"
-          :test-id="testId"
-          @change="onShowModalWithTypeCheck"
-        />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      data-title="port-vm-icon"
-      :width="positions.portSecondIconSize"
-      :height="positions.portSecondIconSize"
-      :x="positions.portSecondIconX"
-      :y="positions.portSecondIconY"
-    >
-      <div v-if="isNewView">
-        <ui-icon
-          v-if="
-            isVmKernel || ((isVCenter || isVMPortsGroup) && props.port.isActive)
-          "
-          name="diagram-fill-port"
-        />
-        <ui-icon
-          v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
-          :name="inactivePortIconName"
-        />
-      </div>
-      <div v-else>
-        <atoms-diagram-icon
-          v-if="
-            isVmKernel || ((isVCenter || isVMPortsGroup) && props.port.isActive)
-          "
-          name="fill-port"
-        />
-        <atoms-diagram-icon
-          v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
-          :name="inactivePortIconName"
-        />
-      </div>
-    </foreignObject>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import type {
-  UI_I_Network,
-  UI_I_Port,
-  UI_I_SelectedPort,
-  UI_I_SelectedAdapter,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { UI_E_NetworkType } from '~/components/common/diagramMain/lib/models/enums'
-import {
-  portPopupFieldsFunc,
-  portPopupFieldsNewFunc,
-  vCenterPopupFieldsFunc,
-  vCenterPopupFieldsNewFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-import { portPositionsFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  network: UI_I_Network
-  port: UI_I_Port & { portPosition: number }
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  portPositionsFunc(
-    isNewView.value,
-    navCollapsePosition.value,
-    portStatusIconPosition.value
-  )
-)
-
-const isShowDropdown = ref<boolean>(false)
-const onHide = (): void => {
-  isShowDropdown.value = false
-}
-
-const portErrorText = computed<string>(
-  () => props.port.state?.errors?.join('. ') || ''
-)
-
-const warningType = computed<string>(
-  () =>
-    (props.port.state?.state === 2 && 'warning') ||
-    (props.port.state?.state === 3 && 'error')
-)
-
-const inactivePortIconName = computed<string>(
-  () =>
-    `${isNewView.value ? 'diagram-' : ''}outline-port${
-      props.isDarkMode ? '-dark-mode' : ''
-    }`
-)
-
-const portTitlePosition = computed<number>(() => props.port.portPosition - 5)
-
-const isVmKernel = computed<boolean>(
-  () => props.network.networkType === UI_E_NetworkType.VMkernel
-)
-
-const isVCenter = computed<boolean>(
-  () => props.network.networkType === UI_E_NetworkType.VCenter
-)
-
-const isVMPortsGroup = computed<boolean>(
-  () => props.network.networkType === UI_E_NetworkType.VMPortsGroup
-)
-
-const testId = computed<string>(() =>
-  isVmKernel.value
-    ? `port-${props.port.id}`
-    : isVMPortsGroup.value
-    ? `vm-${props.port.name}`
-    : ''
-)
-
-const portRectHeight = computed<number>(() => (isVCenter.value ? 29 : 18))
-const portRectPosition = computed<number>(() => props.port.portPosition - 1.5)
-const portLinePosition = computed<number>(() =>
-  isVCenter.value
-    ? props.port.portPosition + 12.5
-    : props.port.portPosition + 7.5
-)
-const portStatusIconPosition = computed<number>(
-  () => props.port.portPosition - (isVCenter.value ? -4 : 2)
-)
-const navCollapsePosition = computed<number>(() => props.port.portPosition - 2)
-const macAddressPosition = computed<number>(() => props.port.portPosition + 16)
-
-const navigationItems = computed(() =>
-  !isNewView.value
-    ? isVCenter.value || isVMPortsGroup.value
-      ? vCenterPopupFieldsFunc(
-          localization.value,
-          `${props.network.testId}-${props.port.testId}`
-        )
-      : portPopupFieldsFunc(
-          localization.value,
-          `${props.network.testId}-${props.port.testId}`
-        )
-    : []
-)
-
-const navigationItemsNew = computed(() =>
-  isNewView.value
-    ? isVCenter.value || isVMPortsGroup.value
-      ? vCenterPopupFieldsNewFunc(
-          localization.value,
-          `${props.network.testId}-${props.port.testId}`
-        )
-      : portPopupFieldsNewFunc(
-          localization.value,
-          `${props.network.testId}-${props.port.testId}`
-        )
-    : []
-)
-
-const showHighlightLine = computed<boolean>(
-  () =>
-    (props.selectedPort.portId === props.port.id &&
-      props.selectedPort.networkId === props.network.id &&
-      props.network.activeAdapters.length > 0) ||
-    !!props.selectedAdapter.connectedPorts.find(
-      (net) =>
-        net.networkId === props.network.id && net.ports.includes(props.port.id)
-    )
-)
-
-const showHighlightPortSelectedPort = computed<boolean>(
-  () =>
-    props.selectedPort.portId === props.port.id &&
-    props.selectedPort.networkId === props.network.id
-)
-
-const showHighlightPortSelectedAdapter = computed<boolean>(() =>
-  props.selectedAdapter.connectedPorts
-    ?.find((net) => net.networkId === props.network.id)
-    ?.ports.includes(props.port.id)
-)
-
-const portTitle = computed<string>(() => {
-  if (props.port.name.length > 23) {
-    return `${props.port.name.slice(0, 23)}...`
-  }
-  return props.port.name
-})
-
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-
-const onShowModalWithTypeCheck = (value: string) => {
-  if (isVCenter.value || isVMPortsGroup.value) {
-    onShowModal(value, {
-      macAddress: props.port.macAddress,
-      adapter: props.port.adapter,
-      vmTitle: props.port.name,
-    })
-    return
-  }
-
-  if (isVmKernel.value) {
-    onShowModal(value, {
-      portName: props.network.sysx?.id,
-      networkLabel: props.network.title,
-      vlanId: props.network.vlanId,
-      tcpIp: props.network.sysx?.tcp_stack,
-      mtu: props.network.sysx?.mtu,
-      services: {
-        vMotion: props.network.sysx?.services.VMotion,
-        provisioning: props.network.sysx?.services.Provisioning,
-        faultToleranceLogging:
-          props.network.sysx?.services.FaultToleranceLogging,
-        management: props.network.sysx?.services.Management,
-        replication: props.network.sysx?.services.VSphereReplication,
-        replicationNFC: props.network.sysx?.services.VSphereReplicationNFC,
-        vSAN: props.network.sysx?.services.VSAN,
-        backupNFC: props.network.sysx?.services.VSphereBackupNFC,
-        nVMeOverTCP: props.network.sysx?.services.NVMeOverTCP,
-        nVMeOverRDMA: props.network.sysx?.services.NVMeOverRDMA,
-      },
-      tcpConfig: {
-        ipv4Settings: props.network.sysx?.ipv4_settings.auto ? '0' : '1',
-        ipv4Address: props.network.sysx?.ipv4_settings.ipv4,
-        subnetMask: props.network.sysx?.ipv4_settings.mask,
-        defaultGateway: {
-          checked: props.network.sysx?.ipv4_settings.gateway_override,
-          value: props.network.sysx?.ipv4_settings.gateway,
-        },
-      },
-    })
-    return
-  }
-
-  onShowModal(value)
-}
-
-const onSelectPort = (networkId: string, portId: string): void => {
-  emits('select-port', networkId, portId)
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../../../assets/scss/common/mixins';
-
-:root.dark-theme {
-  .selection-line {
-    stroke: #fdd006;
-  }
-  .diagram__values {
-    fill: #c1cdd4;
-  }
-
-  .text-ellipsis {
-    color: #c1cdd4;
-
-    &:hover {
-      color: #c1cdd4;
-      text-decoration: solid underline #c1cdd4 1px;
-    }
-  }
-}
-
-.diagram {
-  &__values {
-    @include text($fs: 12px, $fw: 400);
-
-    fill: #565656;
-  }
-
-  &-actions {
-    :deep(.diagram-actions__icon) {
-      &.tabs-overflow {
-        top: -12px;
-        right: -13px;
-      }
-      .navbar-dropdown-menu {
-        .navbar-dropdown-menu-item {
-          background: red;
-        }
-      }
-    }
-  }
-}
-.selection-line {
-  stroke: #f3bb00;
-}
-.highlight-stroke {
-  stroke: #f3bb00;
-}
-.highlight {
-  fill: #fffce8;
-}
-.selection-stroke {
-  stroke: #0079b8;
-  fill: #f3f6fa;
-}
-.hide-line-highlight {
-  stroke-opacity: 0;
-  fill: transparent;
-}
-.small {
-  font: normal 9px Metropolis;
-}
-
-.text-ellipsis {
-  display: block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-weight: 400;
-  font-size: 12px;
-
-  &.port-text {
-    max-width: 206px;
-    color: #565656;
-
-    &:hover {
-      color: #565656;
-      text-decoration: solid underline #565656 1px;
-    }
-  }
-}
-
-.port-state-icon-container {
-  position: absolute;
-  top: 4px;
-  left: 3px;
-}
-
-.port-text {
-  padding-left: 20px;
-}
-
-:root.is-new-view {
-  .port-text.text-ellipsis {
-    user-select: none;
-    -webkit-user-select: none;
-    line-height: 25px;
-    padding-left: 18px;
-    color: var(--diagram-content-text);
-    max-width: 200px;
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-      text-decoration: unset;
-    }
-  }
-
-  .action-button {
-    border: none;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--diagram-content-text);
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-    }
-
-    &.action-button-selected {
-      color: var(--diagram-content-text-selected);
-    }
-  }
-
-  .port-state-icon-container {
-    position: absolute;
-
-    &.port-state-icon-container-new {
-      top: 5px;
-      left: 0;
-    }
-  }
-}
-</style>
+<template>
+  <g>
+    <g>
+      <common-diagram-main-highlights
+        data-title="port-vm"
+        type="main-blue"
+        width="276"
+        :height="portRectHeight"
+        :x="positions.blockX"
+        :y="portRectPosition"
+        :hide="!showHighlightPortSelectedPort"
+      />
+      <common-diagram-main-highlights
+        data-title="port-vm"
+        type="main-orange"
+        width="276"
+        :height="portRectHeight"
+        :x="positions.blockX"
+        :y="portRectPosition"
+        :hide="!showHighlightPortSelectedAdapter"
+      />
+    </g>
+
+    <a
+      :id="testId"
+      data-title="port-vm-name"
+      :data-id="`${props.network.testId}-${props.port.testId}-select`"
+      cursor="pointer"
+      @click="onSelectPort(props.network.id, props.port.id)"
+    >
+      <foreignObject
+        data-title="network-name-text"
+        height="20"
+        :width="positions.portWidth"
+        :x="positions.portX"
+        :y="portTitlePosition"
+        class="diagram__values"
+      >
+        <!--          v-if="props.port.state?.state === 2 || props.port.state?.state === 3"-->
+        <span
+          :class="[
+            'port-state-icon-container',
+            isNewView && 'port-state-icon-container-new',
+          ]"
+          :title="!isNewView && portErrorText"
+        >
+          <template v-if="isNewView">
+            <Teleport to="body">
+              <ui-tooltip-info
+                :id="`port-tooltip-${props.port.id}`"
+                :test-id="`port-tooltip-${props.port.id}`"
+                :info="warningType"
+                :title="localization.common[warningType]"
+                :text="portErrorText"
+              />
+            </Teleport>
+
+            <div
+              :id="`port-tooltip-${props.port.id}`"
+              class="popped tooltip inline-block"
+            >
+              <ui-icon
+                v-if="props.port.state?.state === 2"
+                name="warning-outline"
+                width="14"
+                height="14"
+                color="#fbce28"
+              />
+              <ui-icon
+                v-if="props.port.state?.state === 3"
+                name="error-outline"
+                width="14"
+                height="14"
+                color="#ea3223"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <atoms-the-icon
+              v-if="props.port.state?.state === 2"
+              name="warning"
+              width="15"
+              height="15"
+            />
+            <atoms-the-icon
+              v-if="props.port.state?.state === 3"
+              name="error-outline"
+              width="15"
+              height="15"
+            />
+          </template>
+        </span>
+        <span
+          class="port-text text-ellipsis"
+          :title="props.port.name"
+          :id="`port_${props.port.id}`"
+        >
+          {{ props.port.name }}
+        </span>
+      </foreignObject>
+    </a>
+
+    <text
+      v-if="isVCenter"
+      data-title="v-center-with-mac-address-text"
+      dy="7px"
+      font-size="1em"
+      font-weight="400"
+      :x="positions.portX"
+      class="diagram__values small"
+      :y="macAddressPosition"
+    >
+      {{ localization.common.macAddress }}: 00:0c:29:a8:0f:74
+    </text>
+
+    <common-diagram-main-highlights
+      data-title="port-vm-line"
+      type="line-orange"
+      :x="positions.x1"
+      :y="portLinePosition"
+      :x2="positions.x2"
+      :y2="portLinePosition"
+      :hide="!showHighlightLine"
+    />
+
+    <foreignObject
+      v-if="(isVCenter || isVMPortsGroup) && props.port.isActive"
+      data-title="vm-play-icon"
+      :width="positions.playIconSize"
+      :height="positions.playIconSize"
+      :x="positions.playIconX"
+      :y="positions.playIconY"
+    >
+      <div style="margin: 0; display: block">
+        <ui-icon v-if="isNewView" name="diagram-vm-play" />
+        <atoms-diagram-icon v-else name="v-center-play" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      data-title="port-vm-action-icon"
+      width="18"
+      height="18"
+      :x="positions.actionX"
+      :y="positions.actionY"
+      cursor="pointer"
+    >
+      <div v-if="isNewView" class="dropdown-actions-container">
+        <button
+          :id="`dropdown-${props.network.id}-${props.port.id}`"
+          :class="[
+            'action-button',
+            { 'action-button-selected': isShowDropdown },
+          ]"
+          @click="isShowDropdown = !isShowDropdown"
+        >
+          <ui-icon name="horizontal-dotes" width="16" height="16" />
+        </button>
+        <Teleport to="body">
+          <ui-dropdown
+            :test-id="testId"
+            :show="isShowDropdown"
+            :items="navigationItemsNew"
+            :elem-id="`dropdown-${props.network.id}-${props.port.id}`"
+            width="max-content"
+            show-from-left
+            :margin-between-trigger="0"
+            @select="onShowModalWithTypeCheck"
+            @hide="onHide"
+          ></ui-dropdown>
+        </Teleport>
+      </div>
+      <div v-else class="diagram-actions">
+        <atoms-collapse-nav
+          class="diagram-actions__icon"
+          popup-class="diagram-actions__popup"
+          :close-after-click="true"
+          :items="navigationItems"
+          :test-id="testId"
+          @change="onShowModalWithTypeCheck"
+        />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      data-title="port-vm-icon"
+      :width="positions.portSecondIconSize"
+      :height="positions.portSecondIconSize"
+      :x="positions.portSecondIconX"
+      :y="positions.portSecondIconY"
+    >
+      <div v-if="isNewView">
+        <ui-icon
+          v-if="
+            isVmKernel || ((isVCenter || isVMPortsGroup) && props.port.isActive)
+          "
+          name="diagram-fill-port"
+        />
+        <ui-icon
+          v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
+          :name="inactivePortIconName"
+        />
+      </div>
+      <div v-else>
+        <atoms-diagram-icon
+          v-if="
+            isVmKernel || ((isVCenter || isVMPortsGroup) && props.port.isActive)
+          "
+          name="fill-port"
+        />
+        <atoms-diagram-icon
+          v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
+          :name="inactivePortIconName"
+        />
+      </div>
+    </foreignObject>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Network,
+  UI_I_Port,
+  UI_I_SelectedPort,
+  UI_I_SelectedAdapter,
+  UI_I_ModalsInitialData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import { UI_E_NetworkType } from '~/components/common/diagramMain/lib/models/enums'
+import {
+  portPopupFieldsFunc,
+  portPopupFieldsNewFunc,
+  vCenterPopupFieldsFunc,
+  vCenterPopupFieldsNewFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+import { portPositionsFunc } from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  network: UI_I_Network
+  port: UI_I_Port & { portPosition: number }
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const positions = computed<UI_I_ArbitraryObject<number>>(() =>
+  portPositionsFunc(
+    isNewView.value,
+    navCollapsePosition.value,
+    portStatusIconPosition.value
+  )
+)
+
+const isShowDropdown = ref<boolean>(false)
+const onHide = (): void => {
+  isShowDropdown.value = false
+}
+
+const portErrorText = computed<string>(
+  () => props.port.state?.errors?.join('. ') || ''
+)
+
+const warningType = computed<string>(
+  () =>
+    (props.port.state?.state === 2 && 'warning') ||
+    (props.port.state?.state === 3 && 'error')
+)
+
+const inactivePortIconName = computed<string>(
+  () =>
+    `${isNewView.value ? 'diagram-' : ''}outline-port${
+      props.isDarkMode ? '-dark-mode' : ''
+    }`
+)
+
+const portTitlePosition = computed<number>(() => props.port.portPosition - 5)
+
+const isVmKernel = computed<boolean>(
+  () => props.network.networkType === UI_E_NetworkType.VMkernel
+)
+
+const isVCenter = computed<boolean>(
+  () => props.network.networkType === UI_E_NetworkType.VCenter
+)
+
+const isVMPortsGroup = computed<boolean>(
+  () => props.network.networkType === UI_E_NetworkType.VMPortsGroup
+)
+
+const testId = computed<string>(() =>
+  isVmKernel.value
+    ? `port-${props.port.id}`
+    : isVMPortsGroup.value
+    ? `vm-${props.port.name}`
+    : ''
+)
+
+const portRectHeight = computed<number>(() => (isVCenter.value ? 29 : 18))
+const portRectPosition = computed<number>(() => props.port.portPosition - 1.5)
+const portLinePosition = computed<number>(() =>
+  isVCenter.value
+    ? props.port.portPosition + 12.5
+    : props.port.portPosition + 7.5
+)
+const portStatusIconPosition = computed<number>(
+  () => props.port.portPosition - (isVCenter.value ? -4 : 2)
+)
+const navCollapsePosition = computed<number>(() => props.port.portPosition - 2)
+const macAddressPosition = computed<number>(() => props.port.portPosition + 16)
+
+const navigationItems = computed<UI_I_CollapseNavItem[]>(() =>
+  !isNewView.value
+    ? isVCenter.value || isVMPortsGroup.value
+      ? vCenterPopupFieldsFunc(
+          localization.value,
+          `${props.network.testId}-${props.port.testId}`
+        )
+      : portPopupFieldsFunc(
+          localization.value,
+          `${props.network.testId}-${props.port.testId}`
+        )
+    : []
+)
+
+const navigationItemsNew = computed<UI_I_Dropdown[]>(() =>
+  isNewView.value
+    ? isVCenter.value || isVMPortsGroup.value
+      ? vCenterPopupFieldsNewFunc(
+          localization.value,
+          `${props.network.testId}-${props.port.testId}`
+        )
+      : portPopupFieldsNewFunc(
+          localization.value,
+          `${props.network.testId}-${props.port.testId}`
+        )
+    : []
+)
+
+const showHighlightLine = computed<boolean>(
+  () =>
+    (props.selectedPort.portId === props.port.id &&
+      props.selectedPort.networkId === props.network.id &&
+      props.network.activeAdapters.length > 0) ||
+    !!props.selectedAdapter.connectedPorts.find(
+      (net) =>
+        net.networkId === props.network.id && net.ports.includes(props.port.id)
+    )
+)
+
+const showHighlightPortSelectedPort = computed<boolean>(
+  () =>
+    props.selectedPort.portId === props.port.id &&
+    props.selectedPort.networkId === props.network.id
+)
+
+const showHighlightPortSelectedAdapter = computed<boolean>(() =>
+  props.selectedAdapter.connectedPorts
+    ?.find((net) => net.networkId === props.network.id)
+    ?.ports.includes(props.port.id)
+)
+
+const portTitle = computed<string>(() => {
+  if (props.port.name.length > 23) {
+    return `${props.port.name.slice(0, 23)}...`
+  }
+  return props.port.name
+})
+
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+
+const onShowModalWithTypeCheck = (value: string) => {
+  if (isVCenter.value || isVMPortsGroup.value) {
+    onShowModal(value, {
+      macAddress: props.port.macAddress,
+      adapter: props.port.adapter,
+      vmTitle: props.port.name,
+    })
+    return
+  }
+
+  if (isVmKernel.value) {
+    onShowModal(value, {
+      portName: props.network.sysx?.id,
+      networkLabel: props.network.title,
+      vlanId: props.network.vlanId,
+      tcpIp: props.network.sysx?.tcp_stack,
+      mtu: props.network.sysx?.mtu,
+      services: {
+        vMotion: props.network.sysx?.services.VMotion,
+        provisioning: props.network.sysx?.services.Provisioning,
+        faultToleranceLogging:
+          props.network.sysx?.services.FaultToleranceLogging,
+        management: props.network.sysx?.services.Management,
+        replication: props.network.sysx?.services.VSphereReplication,
+        replicationNFC: props.network.sysx?.services.VSphereReplicationNFC,
+        vSAN: props.network.sysx?.services.VSAN,
+        backupNFC: props.network.sysx?.services.VSphereBackupNFC,
+        nVMeOverTCP: props.network.sysx?.services.NVMeOverTCP,
+        nVMeOverRDMA: props.network.sysx?.services.NVMeOverRDMA,
+      },
+      tcpConfig: {
+        ipv4Settings: props.network.sysx?.ipv4_settings.auto ? '0' : '1',
+        ipv4Address: props.network.sysx?.ipv4_settings.ipv4,
+        subnetMask: props.network.sysx?.ipv4_settings.mask,
+        defaultGateway: {
+          checked: props.network.sysx?.ipv4_settings.gateway_override,
+          value: props.network.sysx?.ipv4_settings.gateway,
+        },
+      },
+    })
+    return
+  }
+
+  onShowModal(value)
+}
+
+const onSelectPort = (networkId: string, portId: string): void => {
+  emits('select-port', networkId, portId)
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../../../assets/scss/common/mixins';
+
+:root.dark-theme {
+  .selection-line {
+    stroke: #fdd006;
+  }
+  .diagram__values {
+    fill: #c1cdd4;
+  }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 1px;
+    }
+  }
+}
+
+.diagram {
+  &__values {
+    @include text($fs: 12px, $fw: 400);
+
+    fill: #565656;
+  }
+
+  &-actions {
+    :deep(.diagram-actions__icon) {
+      &.tabs-overflow {
+        top: -12px;
+        right: -13px;
+      }
+      .navbar-dropdown-menu {
+        .navbar-dropdown-menu-item {
+          background: red;
+        }
+      }
+    }
+  }
+}
+.selection-line {
+  stroke: #f3bb00;
+}
+.highlight-stroke {
+  stroke: #f3bb00;
+}
+.highlight {
+  fill: #fffce8;
+}
+.selection-stroke {
+  stroke: #0079b8;
+  fill: #f3f6fa;
+}
+.hide-line-highlight {
+  stroke-opacity: 0;
+  fill: transparent;
+}
+.small {
+  font: normal 9px Metropolis;
+}
+
+.text-ellipsis {
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+
+  &.port-text {
+    max-width: 206px;
+    color: #565656;
+
+    &:hover {
+      color: #565656;
+      text-decoration: solid underline #565656 1px;
+    }
+  }
+}
+
+.port-state-icon-container {
+  position: absolute;
+  top: 4px;
+  left: 3px;
+}
+
+.port-text {
+  padding-left: 20px;
+}
+
+:root.is-new-view {
+  .port-text.text-ellipsis {
+    user-select: none;
+    -webkit-user-select: none;
+    line-height: 25px;
+    padding-left: 18px;
+    color: var(--diagram-content-text);
+    max-width: 200px;
+
+    &:hover {
+      color: var(--diagram-content-text-hover);
+      text-decoration: unset;
+    }
+  }
+
+  .action-button {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--diagram-content-text);
+
+    &:hover {
+      color: var(--diagram-content-text-hover);
+    }
+
+    &.action-button-selected {
+      color: var(--diagram-content-text-selected);
+    }
+  }
+
+  .port-state-icon-container {
+    position: absolute;
+
+    &.port-state-icon-container-new {
+      top: 5px;
+      left: 0;
+    }
+  }
+}
+</style>