bfg-common 1.2.72 → 1.2.74

package/components/atoms/collapse/CollapseNav.vue

@@ -36,7 +36,7 @@
           ></div>
           <atoms-collapse-nav-item
             v-else
-            :test-id="collapsedBtnId"
+            :test-id="item.testId || collapsedBtnId"
             :is-link="props.isLink"
             :item="item"
             :value="value"

package/components/atoms/collapse/models/interfaces.ts

@@ -6,4 +6,5 @@ export interface UI_I_CollapseNavItem {
   disabled?: boolean
   separate?: boolean
   uploaded?: boolean
+  testId?: string
 }

package/components/atoms/stack/StackBlock.vue

@@ -1,171 +1,178 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      open ? 'stack-block-expanded' : 'stack-block-expandable',
-      { 'not-children': !props.hasChildren },
-    ]"
-  >
-    <div
-      :id="`${props.testId}-toggle`"
-      class="stack-block-label"
-      @click="toggle"
-    >
-      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <slot name="stackBlockContent" />
-      </div>
-
-      <span
-        v-if="props.removable && props.isRollBack"
-        class="icon-roll-back"
-        @mousedown="onRollBack"
-        @click.stop
-      />
-      <atoms-the-icon
-        v-else-if="props.removable"
-        class="remove-icon"
-        name="close-circle"
-        @mousedown="onRemove"
-        @click.stop
-      />
-      <span v-else class="empty-icon"></span>
-    </div>
-
-    <div v-show="open" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    hasChildren: boolean
-    removable?: boolean
-    testId?: string
-    openByDefault?: boolean
-    isRollBack?: boolean
-  }>(),
-  { testId: 'ui-stack-block', openByDefault: false }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-}>()
-
-const open = ref(props.openByDefault || false)
-const toggle = (): void => {
-  open.value = !open.value
-  emits('toggle', open.value)
-}
-
-const onRemove = (): void => {
-  emits('remove')
-}
-const onRollBack = (): void => {
-  emits('roll-back')
-}
-</script>
-
-<style scoped lang="scss">
-.stack-block {
-  cursor: pointer;
-  background-color: var(--block-view-bg-color);
-  border-color: var(--global-border-color);
-
-  &.stack-block-expandable:hover {
-    border-bottom: 1px solid #666;
-  }
-
-  .stack-block-label {
-    padding: 6px 12px;
-    flex: 1 1 auto;
-    max-width: unset;
-    display: flex;
-
-    &:hover {
-      .remove-icon {
-        opacity: 1;
-      }
-    }
-
-    &::before {
-      display: none;
-    }
-
-    .angle-icon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      transform: rotate(90deg);
-      align-self: center;
-    }
-
-    .remove-icon {
-      width: 18px;
-      height: 18px;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    .stack-view-key {
-      flex: 0 0 40%;
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-    }
-
-    .empty-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.stack-block-expanded {
-    .stack-block-label {
-      color: #ffffff;
-      background-color: #29414e;
-
-      .angle-icon {
-        fill: #ffffff;
-        transform: rotate(180deg);
-      }
-
-      .remove-icon {
-        fill: #ffffff;
-      }
-    }
-  }
-
-  &.not-children {
-    cursor: default;
-    .stack-block-label {
-      background-color: transparent;
-      color: #333333;
-
-      &:hover {
-        cursor: default;
-        background-color: transparent;
-        border-bottom: none;
-      }
-
-      .angle-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      open ? 'stack-block-expanded' : 'stack-block-expandable',
+      { 'not-children': !props.hasChildren },
+    ]"
+  >
+    <div
+      :id="`${props.testId}-toggle`"
+      class="stack-block-label"
+      @click="toggle"
+    >
+      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+
+      <span
+        v-if="props.removable && props.isRollBack"
+        class="icon-roll-back"
+        @mousedown="onRollBack"
+        @click.stop
+      />
+      <atoms-the-icon
+        v-else-if="props.removable"
+        class="remove-icon"
+        name="close-circle"
+        @mousedown="onRemove"
+        @click.stop
+      />
+      <span v-else class="empty-icon"></span>
+    </div>
+
+    <div v-show="open" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    hasChildren: boolean
+    removable?: boolean
+    testId?: string
+    openByDefault?: boolean
+    isRollBack?: boolean
+  }>(),
+  { testId: 'ui-stack-block', openByDefault: false }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+}>()
+
+const open = ref(props.openByDefault || false)
+const toggle = (): void => {
+  open.value = !open.value
+  emits('toggle', open.value)
+}
+
+const onRemove = (): void => {
+  emits('remove')
+}
+const onRollBack = (): void => {
+  emits('roll-back')
+}
+</script>
+
+<style scoped lang="scss">
+.stack-block {
+  cursor: pointer;
+  background-color: var(--block-view-bg-color);
+  border-color: var(--global-border-color);
+
+  &.stack-block-expandable:hover {
+    border-bottom: 1px solid #666;
+
+    .stack-block-label {
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+    }
+  }
+
+  .stack-block-label {
+    padding: 6px 12px;
+    flex: 1 1 auto;
+    max-width: unset;
+    display: flex;
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    &:hover {
+      .remove-icon {
+        opacity: 1;
+      }
+    }
+
+    &::before {
+      display: none;
+    }
+
+    .angle-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      transform: rotate(90deg);
+      align-self: center;
+    }
+
+    .remove-icon {
+      width: 18px;
+      height: 18px;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .stack-view-key {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+
+    .empty-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.stack-block-expanded {
+    .stack-block-label {
+      color: #ffffff;
+      background-color: #29414e;
+
+      .angle-icon {
+        fill: #ffffff;
+        transform: rotate(180deg);
+      }
+
+      .remove-icon {
+        fill: #ffffff;
+      }
+    }
+  }
+
+  &.not-children {
+    cursor: default;
+    .stack-block-label {
+      background-color: transparent;
+      color: #333333;
+
+      &:hover {
+        cursor: default;
+        background-color: transparent;
+        border-bottom: none;
+      }
+
+      .angle-icon {
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

package/components/common/diagramMain/DiagramMain.vue

@@ -712,11 +712,7 @@ const countNetworksPositions = (): UI_I_NetworksWithPositions[] => {
               })
             : (network.sysx && [
                 {
-                  id: `${network.sysx?.name} ${
-                    !network.sysx.tcp_config.auto
-                      ? `: ${network.sysx.tcp_config.ipv4}`
-                      : ''
-                  }`,
+                  id: network.sysx?.name,
                   name: `${network.sysx?.name} ${
                     !network.sysx.tcp_config.auto
                       ? `: ${network.sysx.tcp_config.ipv4}`

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

@@ -21,7 +21,7 @@
     />
 
     <a
-      :id="`${props.testId}-adapter-name`"
+      :id="`adapter-${props.adapter.id}`"
       data-title="adapter-name"
       cursor="pointer"
       @click="onSelectAdapter(props.adapter.id)"
@@ -135,7 +135,6 @@ const props = defineProps<{
   selectedPort: UI_I_SelectedPort
   selectedAdapter: UI_I_SelectedAdapter
   networksCount: number
-  testId: string
 }>()
 
 const emits = defineEmits<{
@@ -149,7 +148,10 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const adapterPopupFields = adapterPopupFieldsFunc(localization.value)
+const adapterPopupFields = adapterPopupFieldsFunc(
+  localization.value,
+  props.adapter.id
+)
 
 const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
 

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

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

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

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

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

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

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

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

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

@@ -11,7 +11,7 @@
     </foreignObject>
 
     <a
-      id="network-connects-link"
+      :id="testId"
       cursor="pointer"
       data-title="network-name-link"
       @click="onSelectNetwork(props.network.id)"
@@ -155,10 +155,13 @@ const networkPopupFields = computed(() =>
   networkPopupFieldsFunc(
     localization.value,
     props.network.networkType,
+    props.network.title,
     props.inPortlet
   )
 )
 
+const testId = computed<string>(() => `network-${props.network.title.replace(' ', '_')}`)
+
 const dataForSelectedNetwork = computed<UI_I_ModalsInitialData>(() =>
   dataForSelectedNetworkFunc(props.network)
 )

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

@@ -1,5 +1,6 @@
 <template>
   <g>
+    {{ isVmKernel }} {{ props.network.networkType }}
     <common-diagram-main-highlights
       data-title="port-vm"
       type="main-blue"
@@ -20,7 +21,7 @@
     />
 
     <a
-      id="port-vm-name-link"
+      :id="testId"
       data-title="port-vm-name"
       cursor="pointer"
       @click="onSelectPort(props.network.id, props.port.id)"
@@ -156,6 +157,14 @@ 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>(() =>
@@ -171,8 +180,8 @@ const macAddressPosition = computed<number>(() => props.port.portPosition + 16)
 
 const navigationItems = computed(() =>
   isVCenter.value || isVMPortsGroup.value
-    ? vCenterPopupFieldsFunc(localization.value)
-    : portPopupFieldsFunc(localization.value)
+    ? vCenterPopupFieldsFunc(localization.value, testId.value)
+    : portPopupFieldsFunc(localization.value, testId.value)
 )
 
 const showHighlightLine = computed(
@@ -254,6 +263,13 @@ const onShowModalWithTypeCheck = (value: string) => {
 const onSelectPort = (networkId: string, portId: string): void => {
   emits('select-port', networkId, portId)
 }
+
+watch(
+  () => props.port,
+  (newValue) => {
+    console.log('port', newValue)
+  }
+)
 </script>
 
 <style scoped lang="scss">

package/package.json

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