bfg-common 1.3.276 → 1.3.278

package/components/common/diagramMain/Diagram.vue

@@ -26,6 +26,7 @@
         :selected-network="props.selectedNetwork"
         :is-visible-line="hasActiveAdapter"
         :is-dark-mode="props.isDarkMode"
+        :test-id="props.diagramData.testId"
         @toggle-adapters="onToggleAdapters"
         @select-adapter="onSelectAdapter"
         @show-modal="onShowModal"

package/components/common/diagramMain/DiagramMain.vue

@@ -8,6 +8,7 @@
         :in-portlet="props.inPortlet"
         :is-show-diagram="isShowDiagram"
         :diagram-name="props.diagramData.diagramName"
+        :test-id="props.diagramData.testId"
         @toggle-diagram="onToggleDiagram"
         @show-modal="onShowModal"
       />

package/components/common/diagramMain/Header.vue

@@ -10,7 +10,7 @@
               open: props.isShowDiagram,
             },
           ]"
-          data-id="diagram-header-toggle-icon"
+          :data-id="`${props.testId}-toggle-icon`"
           @click="onToggleDiagram"
         />
         <a>
@@ -24,7 +24,7 @@
         <span class="vertical-separator"></span>
         <button
           id="add-networking-button"
-          data-id="add-networking-button"
+          :data-id="`${props.testId}-add-networking-button`"
           type="button"
           @click="onShowModal('add-networking', props.diagramName)"
         >
@@ -32,7 +32,7 @@
         </button>
         <button
           id="switch-edit-button"
-          data-id="switch-edit-button"
+          :data-id="`${props.testId}-edit-button`"
           type="button"
           @click="onShowModal('switch-edit')"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           id="switch-manage-physical-adapters-button"
-          data-id="switch-manage-physical-adapters-button"
+          :data-id="`${props.testId}-manage-physical-adapters-button`"
           type="button"
           @click="onShowModal('switch-manage-physical-adapters')"
         >
@@ -51,7 +51,7 @@
             popup-class="diagram-main-actions__popup"
             :close-after-click="true"
             :items="switchMainNavigation"
-            test-id="diagram-main-actions"
+            :test-id="`${props.testId}-actions`"
             @change="onShowModal"
           />
         </div>
@@ -73,6 +73,7 @@ const props = defineProps<{
   inPortlet: boolean
   isShowDiagram: boolean
   diagramName: string
+  testId: string
 }>()
 
 const emits = defineEmits<{
@@ -87,7 +88,7 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
-  switchMainNavigationFunc(localization.value)
+  switchMainNavigationFunc(localization.value, props.testId)
 )
 
 const onToggleDiagram = () => emits('toggle-diagram')

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

@@ -7,6 +7,7 @@
 
     <common-diagram-main-adapter-contents
       :adapters-with-positions="props.adaptersWithPositions"
+      :test-id="props.testId"
       @toggle-adapters="onToggleAdapters"
     />
 
@@ -55,6 +56,7 @@ const props = defineProps<{
   isVisibleLine: boolean
   networksCount: number
   isDarkMode: boolean
+  testId: string
 }>()
 
 const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(

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

@@ -20,25 +20,24 @@
       :hide="!isSelectedAdapter"
     />
 
-    <a
-      :id="`adapter-${props.adapter.id}`"
-      :data-id="`${props.testId}-select`"
-      data-title="adapter-name"
-      cursor="pointer"
-      class="adapter-name"
-      @click="onSelectAdapter(props.adapter.id)"
+    <foreignObject
+      dy="11px"
+      height="20"
+      width="198"
+      x="482"
+      :y="props.adapter.adapterPosition"
+      class="diagram__values"
     >
-      <text
-        dy="11px"
-        font-size="12"
-        font-weight="400"
-        x="482"
-        :y="props.adapter.adapterPosition"
-        class="diagram__values"
+      <span
+        :id="`adapter-${props.adapter.id}`"
+        :data-id="`${props.adapter.testId}-select`"
+        data-title="adapter-name"
+        class="adapter-name text-ellipsis"
+        @click="onSelectAdapter(props.adapter.id)"
       >
         {{ adapterName }}
-      </text>
-    </a>
+      </span>
+    </foreignObject>
 
     <foreignObject
       v-if="!props.adapter.carrier"
@@ -91,7 +90,7 @@
           popup-class="diagram-actions__popup"
           :close-after-click="true"
           :items="adapterPopupFields"
-          :test-id="`adapter-${props.adapter.id}-toggle`"
+          :test-id="props.adapter.testId"
           @change="(value) => onShowModal(value, adapterProperties)"
         />
       </div>
@@ -142,7 +141,6 @@ const props = defineProps<{
   selectedAdapter: UI_I_SelectedAdapter
   networksCount: number
   isDarkMode: boolean
-  testId?: string
 }>()
 
 const emits = defineEmits<{
@@ -156,9 +154,8 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const adapterPopupFields = adapterPopupFieldsFunc(
-  localization.value,
-  props.adapter.id
+const adapterPopupFields = computed(() =>
+  adapterPopupFieldsFunc(localization.value, props.adapter.testId)
 )
 
 const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
@@ -220,6 +217,31 @@ const onShowModal = (
   .adapter-name {
     fill: #c1cdd4;
   }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 1px;
+    }
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 198px;
+  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;
+  }
 }
 
 .diagram {
@@ -244,5 +266,9 @@ const onShowModal = (
 
 .adapter-name {
   fill: #565656;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+  line-height: normal;
 }
 </style>

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

@@ -6,7 +6,6 @@
         :key="adapter.id"
       >
         <common-diagram-main-adapter-item
-          :test-id="`adapter-item-${key}`"
           :adapter="adapter"
           :selected-port="props.selectedPort"
           :selected-adapter="props.selectedAdapter"

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

@@ -2,7 +2,7 @@
   <g data-title="adapter-block-contents">
     <foreignObject
       v-if="hasAdapters"
-      :data-id="`${props.testId}-toggle`"
+      :data-id="`${props.testId}-adapters-toggle`"
       data-title="adapter-toggle"
       width="18"
       height="18"
@@ -35,18 +35,22 @@
       {{ localization.physicalAdapters }}
     </text>
 
-    <text
+    <foreignObject
       v-if="!hasAdapters"
       data-title="no-adapter-text"
       dy="11px"
-      font-size="13"
-      font-weight="400"
+      height="20"
+      width="230"
       x="462"
       y="53"
-      class="no-physical-adapters"
     >
-      {{ localization.noPhysicalNetworkAdapters }}
-    </text>
+      <span
+        data-title="no-physical-adapters"
+        class="no-physical-adapters text-ellipsis"
+      >
+        {{ localization.noPhysicalNetworkAdapters }}
+      </span>
+    </foreignObject>
   </g>
 </template>
 
@@ -86,6 +90,20 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
   .no-physical-adapters {
     fill: #c1cdd4;
   }
+  .text-ellipsis {
+    color: #c1cdd4;
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 230px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
 }
 
 .virtual-switch__arrow-icon {
@@ -108,5 +126,8 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
 }
 .no-physical-adapters {
   fill: #565656;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: normal;
 }
 </style>

package/components/common/diagramMain/lib/models/interfaces.ts

@@ -14,11 +14,13 @@ export interface UI_I_Port {
   macAddress?: string
   adapter?: string
   isActive?: boolean
+  testId: string
 }
 
 export interface UI_I_Adapter {
   name: string
   id: string
+  testId: string
   fullName: string
   state: UI_I_State
   adapter: string
@@ -66,6 +68,7 @@ export interface UI_I_SelectedAdapter {
 
 export interface UI_I_Sysx {
   id: string
+  testId: string
   state: UI_I_State
   index: UI_I_ListIndex
   switch: string
@@ -143,6 +146,7 @@ export interface UI_I_Network extends UI_I_NetworkInfo {
   toggle: boolean
   unusedAdapters?: string[]
   vlanId?: number | string
+  testId: string
 }
 
 export interface UI_I_SwitchInfo extends UI_I_NetworkInfo {
@@ -168,6 +172,7 @@ export interface UI_I_NetworkFullWithPositions extends UI_I_Network {
 
 export interface UI_I_DiagramData {
   id: string
+  testId: string
   diagramName: string
   networks: UI_I_Network[]
   networking?: UI_I_SwitchInfo
@@ -424,6 +429,7 @@ export interface UI_I_ModalsInitialData<T = string | number | boolean> {
 export interface UI_I_SwitchAdapterItem {
   name: string
   id: string
+  testId: string
   fullName: string
   state: UI_I_State
   adapter: string

package/components/common/diagramMain/modals/lib/config/adapterModal.ts

@@ -116,11 +116,11 @@ export const adapterViewSettingsFunc = (
 
 export const adapterPopupFieldsFunc = (
   localization: UI_I_Localization,
-  id: string
+  testId: string
 ) => [
   {
     text: localization.viewSettings,
     value: 'adapter-view-settings',
-    testId: `adapter-view-${id}`,
+    testId: `${testId}-view`,
   },
 ]

package/components/common/diagramMain/modals/lib/config/diagramConfig.ts

@@ -2,21 +2,22 @@ import { UI_I_Localization } from '~/lib/models/interfaces'
 import { UI_I_NavigationItem } from '~/components/common/diagramMain/lib/models/interfaces'
 
 export const switchMainNavigationFunc = (
-  localization: UI_I_Localization
+  localization: UI_I_Localization,
+  testId: string
 ): UI_I_NavigationItem[] => [
   {
     text: localization.migrateVmKernelAdapter,
     value: 'migrate-vmkernel-adapter',
-    testId: 'switch-migrate-vm-kernel-adapter',
+    testId: `${testId}-migrate-vm-kernel-adapter`,
   },
   {
     text: localization.viewSettings,
     value: 'switch-view-settings',
-    testId: 'switch-view-settings',
+    testId: `${testId}-view-settings`,
   },
   {
     text: localization.remove,
     value: 'switch-remove',
-    testId: 'switch-remove',
+    testId: `${testId}-remove`,
   },
 ]

package/components/common/diagramMain/modals/lib/config/networkModal.ts

@@ -236,16 +236,14 @@ export const networkEditSettingsTabsFunc = (
 export const networkPopupFieldsFunc = (
   localization: UI_I_Localization,
   _networkType: string,
-  id: string,
+  testId: string,
   inPortlet = false
 ) => {
-  const formatedId = id.replaceAll('=', '_')
-
   const inPortletConfig = [
     {
       text: localization.viewSettings,
       value: 'network-view-settings',
-      testId: `network-view-${formatedId}`,
+      testId: `${testId}-view`,
     },
     // {
     //   text: localization.editSettings,
@@ -257,13 +255,13 @@ export const networkPopupFieldsFunc = (
     {
       text: localization.editSettings,
       value: 'network-edit-settings',
-      testId: `network-edit-${formatedId}`,
+      testId: `${testId}-edit`,
     },
     { separate: true },
     {
       text: localization.remove,
       value: 'network-port-remove',
-      testId: `network-remove-${formatedId}`,
+      testId: `${testId}-remove`,
       // networkType === '1' ? 'network-vkernel-remove' : 'network-port-remove',
     },
   ]

package/components/common/diagramMain/modals/lib/config/portModal.ts

@@ -160,23 +160,23 @@ export const portEditSettingsTabsFunc = (localization: UI_I_Localization) => [
 
 export const portPopupFieldsFunc = (
   localization: UI_I_Localization,
-  id: string
+  testId: string
 ) => [
   {
     text: localization.viewSettings,
     value: 'port-view-settings',
-    testId: `view-${id}`,
+    testId: `${testId}-view`,
   },
   {
     text: localization.editSettings,
     value: 'port-edit-settings',
-    testId: `edit-${id}`,
+    testId: `${testId}-edit`,
   },
   { separate: true },
   {
     text: localization.remove,
     value: 'port-remove',
-    testId: `remove-${id}`,
+    testId: `${testId}-remove`,
   },
 ]
 

package/components/common/diagramMain/modals/lib/config/vCenterModal.ts

@@ -24,11 +24,11 @@ export const vCenterViewSettingsFunc = (
 
 export const vCenterPopupFieldsFunc = (
   localization: UI_I_Localization,
-  id: string
+  testId: string
 ) => [
   {
     text: localization.viewSettings,
     value: 'v-center-view-settings',
-    testId: `view-${id}`,
+    testId: `${testId}-view`,
   },
 ]

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

@@ -12,7 +12,7 @@
 
     <a
       :id="`network-${props.network.id}`"
-      :data-id="`${props.testId}-link`"
+      :data-id="`${props.network.testId}-link`"
       style="text-decoration: none"
       cursor="pointer"
       data-title="network-name-link"
@@ -52,7 +52,7 @@
           popup-class="diagram-actions__popup"
           :close-after-click="true"
           :items="networkPopupFields"
-          :test-id="`network-${props.network.title}`"
+          :test-id="`${props.network.testId}`"
           @change="(value: string) => onShowModal(value, dataForSelectedNetwork)"
         />
       </div>
@@ -88,7 +88,7 @@
       x="24"
       :y="portsArrowPosition"
       cursor="pointer"
-      :data-id="`${props.testId}-toggle-ports`"
+      :data-id="`${props.network.testId}-toggle-ports`"
       @click="
         onTogglePorts(props.network.id, !props.network.toggle, props.diagramId)
       "
@@ -168,7 +168,7 @@ const networkPopupFields = computed(() =>
   networkPopupFieldsFunc(
     localization.value,
     props.network.networkType,
-    props.network.id,
+    props.network.testId,
     props.inPortlet
   )
 )

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

@@ -22,44 +22,42 @@
     <a
       :id="testId"
       data-title="port-vm-name"
-      data-id="port-vm-name-select"
+      :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="206"
-        x="42"
+        width="226"
+        x="22"
         :y="portTitlePosition"
         class="diagram__values"
       >
         <span
-          class="text-ellipsis"
+          v-if="props.port.state?.state === 2 || props.port.state?.state === 3"
+          class="port-state-icon-container"
+          :title="props.port.state?.errors?.[0] || ''"
+        >
+          <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"
+          />
+        </span>
+        <span
+          class="port-text text-ellipsis"
           :title="props.port.name"
           :id="`port_${props.port.id}`"
         >
           {{ props.port.name }}
-          <span
-            v-if="
-              props.port.state?.state === 2 || props.port.state?.state === 3
-            "
-            class="port-state-icon-container"
-            :title="props.port.state?.errors?.[0] || ''"
-          >
-            <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"
-            />
-          </span>
         </span>
       </foreignObject>
     </a>
@@ -114,7 +112,7 @@
           popup-class="diagram-actions__popup"
           :close-after-click="true"
           :items="navigationItems"
-          :test-id="`${testId}-toggle`"
+          :test-id="`${testId}`"
           @change="onShowModalWithTypeCheck"
         />
       </div>
@@ -218,8 +216,14 @@ 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)
+    ? vCenterPopupFieldsFunc(
+        localization.value,
+        `${props.network.testId}-${props.port.testId}`
+      )
+    : portPopupFieldsFunc(
+        localization.value,
+        `${props.network.testId}-${props.port.testId}`
+      )
 )
 
 const showHighlightLine = computed(
@@ -392,9 +396,10 @@ const onSelectPort = (networkId: string, portId: string): void => {
 .port-state-icon-container {
   position: absolute;
   top: 4px;
+  left: 3px;
+}
 
-  //&:hover {
-  //  transform: scale(1.2);
-  //}
+.port-text {
+  padding-left: 20px;
 }
 </style>

package/components/common/wizards/network/add/lib/models/interfaces.ts

@@ -73,6 +73,7 @@ export interface UI_I_SelectedNetwork {
 export interface UI_I_Switch {
   name: string
   id: string
+  testId: string
   mtu: number
   nics: UI_I_AdapterStatus
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.276",
+  "version": "1.3.278",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",