bfg-common 1.3.152 → 1.3.154

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

@@ -1,370 +1,370 @@
-<template>
-  <g>
-    <common-diagram-main-highlights
-      data-title="port-vm"
-      type="main-blue"
-      width="276"
-      :height="portRectHeight"
-      x="18.5"
-      :y="portRectPosition"
-      :hide="!showHighlightPortSelectedPort"
-    />
-    <common-diagram-main-highlights
-      data-title="port-vm"
-      type="main-orange"
-      width="276"
-      :height="portRectHeight"
-      x="18.5"
-      :y="portRectPosition"
-      :hide="!showHighlightPortSelectedAdapter"
-    />
-
-    <a
-      :id="testId"
-      data-title="port-vm-name"
-      cursor="pointer"
-      @click="onSelectPort(props.network.id, props.port.id)"
-    >
-      <foreignObject
-        data-title="network-name-text"
-        height="20"
-        width="206"
-        x="42"
-        :y="portTitlePosition"
-        class="diagram__values"
-      >
-        <span
-          class="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="42"
-      class="diagram__values small"
-      :y="macAddressPosition"
-    >
-      {{ localization.macAddress }}: 00:0c:29:a8:0f:74
-    </text>
-
-    <common-diagram-main-highlights
-      data-title="port-vm-line"
-      type="line-orange"
-      x="334.5"
-      :y="portLinePosition"
-      x2="362.5"
-      :y2="portLinePosition"
-      :hide="!showHighlightLine"
-    />
-
-    <foreignObject
-      v-if="(isVCenter || isVMPortsGroup) && props.port.isActive"
-      data-title="vm-play-icon"
-      width="18"
-      height="18"
-      x="250"
-      :y="navCollapsePosition"
-    >
-      <div style="margin: 0; display: block">
-        <atoms-diagram-icon name="v-center-play" />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      data-title="port-vm-action-icon"
-      width="18"
-      height="18"
-      x="270"
-      :y="navCollapsePosition"
-      cursor="pointer"
-    >
-      <div class="diagram-actions">
-        <atoms-collapse-nav
-          class="diagram-actions__icon"
-          popup-class="diagram-actions__popup"
-          :close-after-click="true"
-          :items="navigationItems"
-          :test-id="`${testId}-toggle`"
-          @change="onShowModalWithTypeCheck"
-        />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      data-title="port-vm-icon"
-      width="18"
-      height="18"
-      x="314"
-      :y="portStatusIconPosition"
-    >
-      <div>
-        <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 { UI_E_NetworkType } from '~/components/common/diagramMain/lib/models/enums'
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import {
-  UI_I_Network,
-  UI_I_Port,
-  UI_I_SelectedPort,
-  UI_I_SelectedAdapter,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import {
-  portPopupFieldsFunc,
-  vCenterPopupFieldsFunc,
-} from '~/components/common/diagramMain/modals/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 inactivePortIconName = computed<string>(
-  () => `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(() =>
-  isVCenter.value || isVMPortsGroup.value
-    ? vCenterPopupFieldsFunc(localization.value, testId.value)
-    : portPopupFieldsFunc(localization.value, testId.value)
-)
-
-const showHighlightLine = computed(
-  () =>
-    (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(
-  () =>
-    props.selectedPort.portId === props.port.id &&
-    props.selectedPort.networkId === props.network.id
-)
-
-const showHighlightPortSelectedAdapter = computed(() =>
-  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?.name,
-      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.fault_tolerance_logging,
-        management: props.network.sysx?.services.management,
-        replication: props.network.sysx?.services.vsphere_replication,
-        replicationNFC: props.network.sysx?.services.vsphere_replication_nfc,
-        vSAN: props.network.sysx?.services.vsan,
-        backupNFC: props.network.sysx?.services.vsphere_backup_nfc,
-        nVMeOverTCP: props.network.sysx?.services.nvme_over_tcp,
-        nVMeOverRDMA: props.network.sysx?.services.nvme_over_rdma,
-      },
-      tcpConfig: {
-        ipv4Settings: props.network.sysx?.tcp_config.auto ? '0' : '1',
-        ipv4Address: props.network.sysx?.tcp_config.ipv4,
-        subnetMask: props.network.sysx?.tcp_config.net_mask,
-        defaultGateway: {
-          checked: props.network.sysx?.tcp_config.gateway_override,
-          value: props.network.sysx?.tcp_config.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;
-  max-width: 206px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-weight: 400;
-  font-size: 12px;
-  color: #565656;
-
-  &:hover {
-    color: #565656;
-    text-decoration: solid underline #565656 1px;
-  }
-}
-</style>
+<template>
+  <g>
+    <common-diagram-main-highlights
+      data-title="port-vm"
+      type="main-blue"
+      width="276"
+      :height="portRectHeight"
+      x="18.5"
+      :y="portRectPosition"
+      :hide="!showHighlightPortSelectedPort"
+    />
+    <common-diagram-main-highlights
+      data-title="port-vm"
+      type="main-orange"
+      width="276"
+      :height="portRectHeight"
+      x="18.5"
+      :y="portRectPosition"
+      :hide="!showHighlightPortSelectedAdapter"
+    />
+
+    <a
+      :id="testId"
+      data-title="port-vm-name"
+      cursor="pointer"
+      @click="onSelectPort(props.network.id, props.port.id)"
+    >
+      <foreignObject
+        data-title="network-name-text"
+        height="20"
+        width="206"
+        x="42"
+        :y="portTitlePosition"
+        class="diagram__values"
+      >
+        <span
+          class="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="42"
+      class="diagram__values small"
+      :y="macAddressPosition"
+    >
+      {{ localization.macAddress }}: 00:0c:29:a8:0f:74
+    </text>
+
+    <common-diagram-main-highlights
+      data-title="port-vm-line"
+      type="line-orange"
+      x="334.5"
+      :y="portLinePosition"
+      x2="362.5"
+      :y2="portLinePosition"
+      :hide="!showHighlightLine"
+    />
+
+    <foreignObject
+      v-if="(isVCenter || isVMPortsGroup) && props.port.isActive"
+      data-title="vm-play-icon"
+      width="18"
+      height="18"
+      x="250"
+      :y="navCollapsePosition"
+    >
+      <div style="margin: 0; display: block">
+        <atoms-diagram-icon name="v-center-play" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      data-title="port-vm-action-icon"
+      width="18"
+      height="18"
+      x="270"
+      :y="navCollapsePosition"
+      cursor="pointer"
+    >
+      <div class="diagram-actions">
+        <atoms-collapse-nav
+          class="diagram-actions__icon"
+          popup-class="diagram-actions__popup"
+          :close-after-click="true"
+          :items="navigationItems"
+          :test-id="`${testId}-toggle`"
+          @change="onShowModalWithTypeCheck"
+        />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      data-title="port-vm-icon"
+      width="18"
+      height="18"
+      x="314"
+      :y="portStatusIconPosition"
+    >
+      <div>
+        <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 { UI_E_NetworkType } from '~/components/common/diagramMain/lib/models/enums'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  UI_I_Network,
+  UI_I_Port,
+  UI_I_SelectedPort,
+  UI_I_SelectedAdapter,
+  UI_I_ModalsInitialData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import {
+  portPopupFieldsFunc,
+  vCenterPopupFieldsFunc,
+} from '~/components/common/diagramMain/modals/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 inactivePortIconName = computed<string>(
+  () => `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(() =>
+  isVCenter.value || isVMPortsGroup.value
+    ? vCenterPopupFieldsFunc(localization.value, testId.value)
+    : portPopupFieldsFunc(localization.value, testId.value)
+)
+
+const showHighlightLine = computed(
+  () =>
+    (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(
+  () =>
+    props.selectedPort.portId === props.port.id &&
+    props.selectedPort.networkId === props.network.id
+)
+
+const showHighlightPortSelectedAdapter = computed(() =>
+  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?.name,
+      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.fault_tolerance_logging,
+        management: props.network.sysx?.services.management,
+        replication: props.network.sysx?.services.vsphere_replication,
+        replicationNFC: props.network.sysx?.services.vsphere_replication_nfc,
+        vSAN: props.network.sysx?.services.vsan,
+        backupNFC: props.network.sysx?.services.vsphere_backup_nfc,
+        nVMeOverTCP: props.network.sysx?.services.nvme_over_tcp,
+        nVMeOverRDMA: props.network.sysx?.services.nvme_over_rdma,
+      },
+      tcpConfig: {
+        ipv4Settings: props.network.sysx?.tcp_config.auto ? '0' : '1',
+        ipv4Address: props.network.sysx?.tcp_config.ipv4,
+        subnetMask: props.network.sysx?.tcp_config.net_mask,
+        defaultGateway: {
+          checked: props.network.sysx?.tcp_config.gateway_override,
+          value: props.network.sysx?.tcp_config.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;
+  max-width: 206px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 1px;
+  }
+}
+</style>