bfg-common 1.4.474 → 1.4.476

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

@@ -1,532 +1,361 @@
-<template>
-  <g data-title="network-contents">
-    <foreignObject
-      data-title="network-icon"
-      :width="networkIconSize"
-      :height="networkIconSize"
-      :x="networkIconX"
-      :y="networkIconY"
-    >
-      <div :class="networkIcon" :title="errorText"></div>
-    </foreignObject>
-
-    <a
-      :id="`network-${props.network.id}`"
-      :data-id="`${props.network.testId}-link`"
-      style="text-decoration: none"
-      cursor="pointer"
-      data-title="network-name-link"
-      @click="onSelectNetwork(props.network.id)"
-    >
-      <foreignObject
-        data-title="network-name-text"
-        height="22"
-        width="206"
-        :x="networkTitleX"
-        :title="props.network.title"
-        :y="networkTitlePosition"
-        class="diagram__heading"
-      >
-        <span
-          :class="[
-            'network-title text-ellipsis',
-            {
-              'is-selected': props.isSelected,
-            },
-          ]"
-          :title="props.network.title"
-          :id="`network_${props.network.id}`"
-        >
-          {{ props.network.title }}
-        </span>
-      </foreignObject>
-    </a>
-
-    <foreignObject
-      v-if="isNotShowNetworkActions"
-      data-title="network-actions"
-      width="18"
-      height="18"
-      :x="actionX"
-      :y="actionY"
-      cursor="pointer"
-    >
-      <div v-if="props.isNewView" class="dropdown-actions-container">
-        <button
-          :id="`dropdown-${props.network.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="props.network.testId"
-            :show="isShowDropdown"
-            :items="networkPopupFields"
-            :elem-id="`dropdown-${props.network.id}`"
-            width="max-content"
-            show-from-left
-            @select="(value: string) => onShowModal(value, dataForSelectedNetwork)"
-            @hide="onHide"
-          ></ui-dropdown>
-        </Teleport>
-      </div>
-      <div v-else class="diagram-actions">
-        <atoms-collapse-nav
-          class="diagram-actions__icon"
-          value="-1"
-          popup-class="diagram-actions__popup"
-          :close-after-click="true"
-          :items="networkPopupFields"
-          :test-id="props.network.testId"
-          @change="(value: string) => onShowModal(value, dataForSelectedNetwork)"
-        />
-      </div>
-    </foreignObject>
-
-    <text
-      data-title="network-vlan-text"
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      :x="contentX"
-      :y="props.network.vlanPosition"
-      class="vlan-id"
-    >
-      {{ localization.common.vlanId }}: {{ props.network.vlanId }}
-    </text>
-
-    <common-diagram-main-highlights-new
-      v-if="props.isNewView"
-      data-title="ports-closed"
-      type="main-orange"
-      width="276"
-      height="18"
-      :x="blockX"
-      :y="closedPortsHighlightPosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-    <common-diagram-main-highlights
-      v-else
-      data-title="ports-closed"
-      type="main-orange"
-      width="276"
-      height="18"
-      :x="blockX"
-      :y="closedPortsHighlightPosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-
-    <foreignObject
-      data-title="ports-toggle-icon"
-      :width="arrowSize"
-      :height="arrowSize"
-      :x="arrowX"
-      :y="portsArrowPosition"
-      cursor="pointer"
-      :data-id="`${props.network.testId}-toggle-ports`"
-      :class="{
-        disabled: !hasPorts && props.isNewView,
-        hide: !hasPorts && !props.isNewView,
-      }"
-      @click="
-        onTogglePorts(props.network.id, !props.network.toggle, props.diagramId)
-      "
-    >
-      <div class="diagram-block__toggle">
-        <ui-icon
-          v-if="props.isNewView"
-          name="arrow"
-          width="16"
-          height="16"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              open: hasPorts ? props.network.toggle : false,
-            },
-          ]"
-        />
-        <atoms-the-icon
-          v-else
-          name="angle"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              open: hasPorts ? props.network.toggle : false,
-            },
-          ]"
-        />
-      </div>
-    </foreignObject>
-
-    <text
-      v-if="props.network.state.state !== 3"
-      data-title="ports-main-text"
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      :x="portX"
-      :y="portsY"
-      class="port-group-header"
-    >
-      {{ props.network.networkPortsName }} ({{ props.network.portsCount }})
-    </text>
-    <foreignObject
-      v-else
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      x="26"
-      height="20"
-      width="246"
-      :y="props.network.portsPosition - 5"
-      class="port-group-header"
-    >
-      <span class="error-text text-ellipsis" :title="errorText">
-        {{ errorText }}
-      </span>
-    </foreignObject>
-
-    <common-diagram-main-highlights-new
-      v-if="props.isNewView"
-      data-title="ports-closed"
-      type="line-orange"
-      :x="x1"
-      :y="closedPortsLinePosition"
-      :x2="x2"
-      :y2="closedPortsLinePosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-    <common-diagram-main-highlights
-      v-else
-      data-title="ports-closed"
-      type="line-orange"
-      :x="x1"
-      :y="closedPortsLinePosition"
-      :x2="x2"
-      :y2="closedPortsLinePosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import {
-  networkPopupFieldsFunc,
-  networkPopupFieldsNewFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-import { dataForSelectedNetworkFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  inPortlet: boolean
-  isNetworkSelectedWithClosedPorts: boolean
-  diagramId: string
-  testId?: string
-  isNewView: boolean
-  isSelected: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-network', networkId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-}>()
-
-const blockX = computed(() => (props.isNewView ? 12.5 : 18.5))
-const portsY = computed(() =>
-  props.isNewView
-    ? props.network.portsPosition + 1
-    : props.network.portsPosition
-)
-const x1 = computed(() => (props.isNewView ? 339 : 334))
-const x2 = computed(() => (props.isNewView ? 361.7 : 362.5))
-const networkIconSize = computed(() => (props.isNewView ? 20 : 18))
-const networkIconY = computed(() =>
-  props.isNewView
-    ? props.network.titlePosition - 2
-    : props.network.titlePosition
-)
-const networkIconX = computed(() => (props.isNewView ? 16 : 26))
-const networkTitleX = computed(() => (props.isNewView ? 44 : 50))
-const contentX = computed(() => (props.isNewView ? 44 : 26))
-const arrowX = computed(() => (props.isNewView ? 44 : 24))
-const arrowSize = computed(() => (props.isNewView ? 16 : 18))
-const portX = computed(() => (props.isNewView ? 68 : 42))
-const actionY = computed(() =>
-  props.isNewView
-    ? props.network.titlePosition + 1.5
-    : props.network.titlePosition
-)
-const actionX = computed(() => (props.isNewView ? 266.5 : 270))
-
-const isShowDropdown = ref<boolean>(false)
-const onHide = (): void => {
-  isShowDropdown.value = false
-}
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const networkIcon = computed<string>(() => {
-  switch (props.network.state.state) {
-    case 0:
-      return 'vsphere-icon-network-error network-icon'
-    case 3:
-      return 'vsphere-icon-network-error network-icon'
-    case 2:
-      return 'vsphere-icon-network-warning network-icon'
-    default:
-      return 'vsphere-icon-network network-icon'
-  }
-})
-
-const errorText = computed<string>(() =>
-  props.network.state?.errors?.length > 0
-    ? props.network.state?.errors.join(', ') ||
-      localization.value.common.somethingWentWrong
-    : ''
-)
-
-const networkPopupFields = computed(() =>
-  props.isNewView
-    ? networkPopupFieldsNewFunc(
-        localization.value,
-        props.network.networkType,
-        props.network.testId,
-        props.network.state.state,
-        props.inPortlet
-      )
-    : networkPopupFieldsFunc(
-        localization.value,
-        props.network.networkType,
-        props.network.testId,
-        props.network.state.state,
-        props.inPortlet
-      )
-)
-
-const dataForSelectedNetwork = computed<UI_I_ModalsInitialData>(() =>
-  dataForSelectedNetworkFunc(props.network)
-)
-
-const closedPortsHighlightPosition = computed<number>(
-  () => props.network.portsPosition - 1.5
-)
-
-const hasPorts = computed<boolean>(() => props.network.portsCount > 0)
-
-const portsArrowPosition = computed<number>(
-  () => props.network.portsPosition - (props.isNewView ? 2 : 1)
-)
-
-const closedPortsLinePosition = computed<number>(
-  () => props.network.portsPosition + 7.5
-)
-
-const networkTitlePosition = computed<number>(
-  () => props.network.titlePosition - 5
-)
-
-const isNotShowNetworkActions = computed<boolean>(
-  () => !(props.inPortlet && props.network.state.state === 3)
-)
-
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-
-watch(
-  () => props.network,
-  (newValue: any) => {
-    console.log(444, newValue)
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/scss/common/mixins.scss';
-
-:root.dark-theme {
-  .diagram__heading,
-  .vlan-id,
-  .port-group-header {
-    fill: #c1cdd4;
-  }
-
-  .text-ellipsis {
-    color: #c1cdd4;
-
-    &:hover {
-      color: #c1cdd4;
-      text-decoration: solid underline #c1cdd4 2px;
-    }
-  }
-
-  .error-text {
-    color: #e02200;
-
-    &:hover {
-      color: #e02200;
-      text-decoration: unset;
-    }
-  }
-}
-
-.diagram {
-  &__heading {
-    @include text($fs: 14px, $fw: 500);
-    fill: #565656;
-    letter-spacing: normal;
-    line-height: 1.2rem;
-  }
-
-  &__values {
-    @include text($fs: 12px, $fw: 400);
-  }
-  &-actions {
-    :deep(.diagram-actions__icon) {
-      &.tabs-overflow {
-        top: -12px;
-        right: -13px;
-      }
-      .navbar-dropdown-menu {
-        .navbar-dropdown-menu-item {
-          background: red;
-        }
-      }
-    }
-  }
-}
-
-.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);
-  }
-}
-
-.text-ellipsis {
-  display: block;
-  max-width: 206px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-weight: 500;
-  font-size: 14px;
-  color: #565656;
-}
-.network-title {
-  &:hover {
-    color: #565656;
-    text-decoration: solid underline #565656 2px;
-  }
-}
-
-.error-text {
-  font-weight: 400;
-  font-size: 12px;
-  max-width: 246px;
-  color: #e02200;
-
-  &:hover {
-    color: #e02200;
-    text-decoration: unset;
-  }
-}
-
-:root.is-new-view {
-  .network-title {
-    line-height: 26px;
-    color: var(--diagram-content-text);
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-      text-decoration: unset;
-    }
-    &.is-selected {
-      color: var(--diagram-content-text-selected);
-      &:hover {
-        color: var(--diagram-content-text-selected);
-        text-decoration: unset;
-      }
-    }
-  }
-  .disabled {
-    pointer-events: none;
-    .virtual-switch__arrow-icon {
-      fill: none;
-      color: var(--diagram-content-second-disabled-text);
-    }
-  }
-  .virtual-switch__arrow-icon {
-    fill: none;
-    color: var(--diagram-content-second-text);
-  }
-  .port-group-header {
-    fill: var(--diagram-content-second-text);
-  }
-  .network-icon {
-    color: var(--diagram-content-text);
-    width: 20px;
-    height: 20px;
-  }
-  .vlan-id {
-    fill: var(--diagram-content-third-text);
-  }
-
-  .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);
-    }
-  }
-}
-</style>
+<template>
+  <g data-title="network-contents">
+    <foreignObject
+      data-title="network-icon"
+      width="18"
+      height="18"
+      x="26"
+      :y="props.network.titlePosition"
+    >
+      <div :class="networkIcon" :title="errorText"></div>
+    </foreignObject>
+
+    <a
+      :id="`network-${props.network.id}`"
+      :data-id="`${props.network.testId}-link`"
+      style="text-decoration: none"
+      cursor="pointer"
+      data-title="network-name-link"
+      @click="onSelectNetwork(props.network.id)"
+    >
+      <foreignObject
+        data-title="network-name-text"
+        height="22"
+        width="206"
+        x="50"
+        :title="props.network.title"
+        :y="networkTitlePosition"
+        class="diagram__heading"
+      >
+        <span
+          class="text-ellipsis"
+          :title="props.network.title"
+          :id="`network_${props.network.id}`"
+        >
+          {{ props.network.title }}
+        </span>
+      </foreignObject>
+    </a>
+
+    <foreignObject
+      v-if="isNotShowNetworkActions"
+      data-title="network-actions"
+      width="18"
+      height="18"
+      x="270"
+      :y="props.network.titlePosition"
+      cursor="pointer"
+    >
+      <div class="diagram-actions">
+        <atoms-collapse-nav
+          class="diagram-actions__icon"
+          value="-1"
+          popup-class="diagram-actions__popup"
+          :close-after-click="true"
+          :items="networkPopupFields"
+          :test-id="`${props.network.testId}`"
+          @change="(value: string) => onShowModal(value, dataForSelectedNetwork)"
+        />
+      </div>
+    </foreignObject>
+
+    <text
+      data-title="network-vlan-text"
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      x="26"
+      :y="props.network.vlanPosition"
+      class="vlan-id"
+    >
+      {{ localization.common.vlanId }}: {{ props.network.vlanId }}
+    </text>
+
+    <common-diagram-main-highlights
+      data-title="ports-closed"
+      type="main-orange"
+      width="276"
+      height="18"
+      x="18.5"
+      :y="closedPortsHighlightPosition"
+      :hide="!props.isNetworkSelectedWithClosedPorts"
+    />
+
+    <foreignObject
+      v-if="hasPorts"
+      data-title="ports-toggle-icon"
+      width="18"
+      height="18"
+      x="24"
+      :y="portsArrowPosition"
+      cursor="pointer"
+      :data-id="`${props.network.testId}-toggle-ports`"
+      @click="
+        onTogglePorts(props.network.id, !props.network.toggle, props.diagramId)
+      "
+    >
+      <div class="diagram-block__toggle">
+        <atoms-the-icon
+          name="angle"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              open: props.network.toggle,
+            },
+          ]"
+        />
+      </div>
+    </foreignObject>
+
+    <text
+      v-if="props.network.state.state !== 3"
+      data-title="ports-main-text"
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      x="42"
+      :y="props.network.portsPosition"
+      class="port-group-header"
+    >
+      {{ props.network.networkPortsName }} ({{ props.network.portsCount }})
+    </text>
+    <foreignObject
+      v-else
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      x="26"
+      height="20"
+      width="246"
+      :y="props.network.portsPosition - 5"
+      class="port-group-header"
+    >
+      <span class="error-text text-ellipsis" :title="errorText">
+        {{ errorText }}
+      </span>
+    </foreignObject>
+
+    <common-diagram-main-highlights
+      data-title="ports-closed"
+      type="line-orange"
+      x="334.5"
+      :y="closedPortsLinePosition"
+      x2="362.5"
+      :y2="closedPortsLinePosition"
+      :hide="!props.isNetworkSelectedWithClosedPorts"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { networkPopupFieldsFunc } from '~/components/common/diagramMain/modals/lib/config'
+import { dataForSelectedNetworkFunc } from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  inPortlet: boolean
+  isNetworkSelectedWithClosedPorts: boolean
+  diagramId: string
+  testId?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-network', networkId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const networkIcon = computed<string>(() => {
+  switch (props.network.state.state) {
+    case 0:
+      return 'vsphere-icon-network-error'
+    case 3:
+      return 'vsphere-icon-network-error'
+    case 2:
+      return 'vsphere-icon-network-warning'
+    default:
+      return 'vsphere-icon-network'
+  }
+})
+
+const errorText = computed<string>(() =>
+  props.network.state?.errors?.length > 0
+    ? props.network.state?.errors.join(', ') ||
+      localization.value.common.somethingWentWrong
+    : ''
+)
+
+const networkPopupFields = computed(() =>
+  networkPopupFieldsFunc(
+    localization.value,
+    props.network.networkType,
+    props.network.testId,
+    props.network.state.state,
+    props.inPortlet
+  )
+)
+
+const dataForSelectedNetwork = computed<UI_I_ModalsInitialData>(() =>
+  dataForSelectedNetworkFunc(props.network)
+)
+
+const closedPortsHighlightPosition = computed<number>(
+  () => props.network.portsPosition - 1.5
+)
+
+const hasPorts = computed<boolean>(() => props.network.portsCount > 0)
+
+const portsArrowPosition = computed<number>(
+  () => props.network.portsPosition - 1
+)
+
+const closedPortsLinePosition = computed<number>(
+  () => props.network.portsPosition + 7.5
+)
+
+const networkTitlePosition = computed<number>(
+  () => props.network.titlePosition - 5
+)
+
+const isNotShowNetworkActions = computed<boolean>(
+  () => !(props.inPortlet && props.network.state.state === 3)
+)
+
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+
+watch(
+  () => props.network,
+  (newValue: any) => {
+    console.log(444, newValue)
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .diagram__heading,
+  .vlan-id,
+  .port-group-header {
+    fill: #c1cdd4;
+  }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 2px;
+    }
+  }
+
+  .error-text {
+    color: #e02200;
+
+    &:hover {
+      color: #e02200;
+      text-decoration: unset;
+    }
+  }
+}
+
+.diagram {
+  &__heading {
+    @include text($fs: 14px, $fw: 500);
+    fill: #565656;
+    letter-spacing: normal;
+    line-height: 1.2rem;
+  }
+
+  &__values {
+    @include text($fs: 12px, $fw: 400);
+  }
+  &-actions {
+    :deep(.diagram-actions__icon) {
+      &.tabs-overflow {
+        top: -12px;
+        right: -13px;
+      }
+      .navbar-dropdown-menu {
+        .navbar-dropdown-menu-item {
+          background: red;
+        }
+      }
+    }
+  }
+}
+
+.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);
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 206px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 500;
+  font-size: 14px;
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 2px;
+  }
+}
+
+.error-text {
+  font-weight: 400;
+  font-size: 12px;
+  max-width: 246px;
+  color: #e02200;
+
+  &:hover {
+    color: #e02200;
+    text-decoration: unset;
+  }
+}
+</style>