bfg-common 1.6.74 → 1.6.75

package/components/common/diagramMain/Diagram.vue

@@ -6,88 +6,129 @@
       'diagram-in-portlet': props.inPortlet,
     }"
   >
-    <div class="diagram-second-container">
-      <svg
-        v-if="props.diagramData && props.isShowDiagram"
-        xmlns="http://www.w3.org/2000/svg"
-        :height="diagramHeight"
-        :width="diagramWidth"
-        :viewBox="viewBox"
-        :preserveAspectRatio="preserveAspectRatio"
-        :class="svgClasses"
-        @click.capture="onClickDiagram"
-      >
-        <common-diagram-main-switch
-          :networks-count="props.networksCount"
-          :main-rect-height="props.mainRectHeight"
-          :main-switch-line="props.mainSwitchLine"
-          :selected-main-line="props.selectedMainLine"
-          :is-visible-line="hasActiveAdapter"
-          :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-          :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-          :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-          :networks-with-positions="props.networksWithPositions"
-        />
-        <common-diagram-main-adapter
-          :networks-count="props.networksCount"
-          :adapters-with-positions="props.adaptersWithPositions"
-          :selected-main-line="props.selectedMainLine"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          :selected-network="props.selectedNetwork"
-          :is-visible-line="hasActiveAdapter"
-          :is-dark-mode="props.isDarkMode"
-          :test-id="props.diagramData.testId"
-          :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-          :networks-with-positions="props.networksWithPositions"
-          :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-          :in-network-lines-y="inNetworkLinesY"
-          @toggle-adapters="onToggleAdapters"
-          @select-adapter="onSelectAdapter"
-          @show-modal="onShowModal"
-        />
-        <template v-if="!!props.networksWithPositions.length">
-          <template
-            v-for="network in props.networksWithPositions"
-            :key="network.id"
-          >
-            <common-diagram-main-network
-              :network="network"
-              :selected-port="props.selectedPort"
-              :selected-adapter="props.selectedAdapter"
-              :selected-network="props.selectedNetwork"
-              :selected-main-line="props.selectedMainLine"
-              :diagram-id="props.diagramData.id"
-              :in-portlet="props.inPortlet"
-              :is-visible-line="hasActiveAdapter"
-              :is-dark-mode="props.isDarkMode"
-              :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-              :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-              :adapters-positions-y="adaptersPositionsY"
-              @toggle-ports="onTogglePorts"
-              @select-port="onSelectPort"
-              @select-network="onSelectNetwork"
-              @show-modal="onShowModal"
-            />
+    <common-diagram-main-header
+      v-if="!props.inPortlet"
+      :project="props.project"
+      :is-show-diagram="props.isShowDiagram"
+      :diagram-name="props.diagramData.diagramName"
+      :test-id="props.diagramData.testId"
+      @toggle-diagram="emits('toggle-diagram')"
+      @show-modal="onShowModal"
+    />
+
+    <div
+      :class="[
+        'diagrams',
+        {
+          'is-show-diagram': props.isShowDiagram,
+        },
+      ]"
+    >
+      <div class="diagram-second-container">
+        <svg
+          v-if="props.diagramData && props.isShowDiagram"
+          xmlns="http://www.w3.org/2000/svg"
+          :height="diagramHeight"
+          :width="diagramWidth"
+          :viewBox="viewBox"
+          :preserveAspectRatio="preserveAspectRatio"
+          :class="svgClasses"
+          @click.capture="onClickDiagram"
+        >
+          <common-diagram-main-switch
+            :networks-count="props.networksCount"
+            :main-rect-height="props.mainRectHeight"
+            :main-switch-line="props.mainSwitchLine"
+            :selected-main-line="props.selectedMainLine"
+            :is-visible-line="hasActiveAdapter"
+            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+            :networks-with-positions="props.networksWithPositions"
+          />
+          <common-diagram-main-adapter
+            :networks-count="props.networksCount"
+            :adapters-with-positions="props.adaptersWithPositions"
+            :selected-main-line="props.selectedMainLine"
+            :selected-port="props.selectedPort"
+            :selected-adapter="props.selectedAdapter"
+            :selected-network="props.selectedNetwork"
+            :is-visible-line="hasActiveAdapter"
+            :is-dark-mode="props.isDarkMode"
+            :test-id="props.diagramData.testId"
+            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+            :networks-with-positions="props.networksWithPositions"
+            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+            :in-network-lines-y="inNetworkLinesY"
+            @toggle-adapters="onToggleAdapters"
+            @select-adapter="onSelectAdapter"
+            @show-modal="onShowModal"
+          />
+          <template v-if="!!props.networksWithPositions.length">
+            <template
+              v-for="network in props.networksWithPositions"
+              :key="network.id"
+            >
+              <common-diagram-main-network
+                :network="network"
+                :selected-port="props.selectedPort"
+                :selected-adapter="props.selectedAdapter"
+                :selected-network="props.selectedNetwork"
+                :selected-main-line="props.selectedMainLine"
+                :diagram-id="props.diagramData.id"
+                :in-portlet="props.inPortlet"
+                :is-visible-line="hasActiveAdapter"
+                :is-dark-mode="props.isDarkMode"
+                :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+                :adapter-line-y="
+                  props.adaptersWithPositions.adaptersConnectLineY
+                "
+                :adapters-positions-y="adaptersPositionsY"
+                @toggle-ports="onTogglePorts"
+                @select-port="onSelectPort"
+                @select-network="onSelectNetwork"
+                @show-modal="onShowModal"
+              />
+            </template>
           </template>
-        </template>
-        <template v-else>
-          <common-diagram-main-network-no-network />
-        </template>
-        <common-diagram-main-switch-selected
-          :selected-switch-line-y="props.selectedSwitchLineY"
-          :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
-          :adapters-positions-y="adaptersPositionsY"
-          :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-          :is-highlighted-adapter-line="isHighlightedAdapterLine"
-          :in-network-lines-y="inNetworkLinesY"
-        />
-      </svg>
+          <template v-else>
+            <common-diagram-main-network-no-network />
+          </template>
+          <common-diagram-main-switch-selected
+            :selected-switch-line-y="props.selectedSwitchLineY"
+            :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
+            :adapters-positions-y="adaptersPositionsY"
+            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+            :is-highlighted-adapter-line="isHighlightedAdapterLine"
+            :in-network-lines-y="inNetworkLinesY"
+          />
+        </svg>
+      </div>
     </div>
   </div>
+  <div
+    v-if="isNewView && props.isShowDiagram && !props.inPortlet"
+    class="virtual-switch-remove"
+  >
+    <ui-button
+      :test-id="`${props.diagramData.testId}-remove`"
+      variant="text"
+      type="error"
+      is-without-sizes
+      is-without-height
+      v-permission="'Networks.RemoveSwitch'"
+      @click="emits('show-modal', 'switch-remove')"
+    >
+      <span class="virtual-switch-remove-btn">
+        <ui-icon name="delete" width="20" height="20" />
+        {{ localization.common.remove }}
+      </span>
+    </ui-button>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_AdaptersWithPositions,
   UI_I_DiagramData,
@@ -98,6 +139,7 @@ import type {
   UI_I_SwitchLine,
   UI_I_Network,
 } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
 
 const props = defineProps<{
@@ -115,6 +157,7 @@ const props = defineProps<{
   selectedSwitchLineY: UI_I_SwitchLine
   isDarkMode: boolean
   networksCount: number
+  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{
@@ -134,12 +177,15 @@ const emits = defineEmits<{
   ): void
   (event: 'select-port', networkId: string, portId: string): void
   (event: 'select-network', networkId: string): void
+  (event: 'toggle-diagram'): void
 }>()
 
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const inNetworkLinesY = computed(() => {
   const linesY = []
   props.networksWithPositions.forEach((net, index) => {
@@ -324,8 +370,19 @@ const onSelectNetwork = (networkId: string): void => {
 <style scoped lang="scss">
 .diagram {
   &-container {
-    display: flex;
-    justify-content: center;
+    //display: flex;
+    //justify-content: center;
+    .diagram-second-container {
+      display: flex;
+      justify-content: center;
+      min-width: 725px;
+    }
+
+    &.diagram-in-portlet {
+      .diagram-second-container {
+        min-width: 560px;
+      }
+    }
 
     .diagram-portlet {
       margin-top: 10px;
@@ -335,16 +392,21 @@ const onSelectNetwork = (networkId: string): void => {
 
 .diagram {
   &-container-new:not(.diagram-in-portlet) {
-    display: flex;
-    justify-content: center;
-    margin: 16px 16px 30px;
-    padding: 16px;
-    border-radius: 8px;
-    background: var(--diagram-container-bg);
-    box-shadow: 0 1px 4px 0 #00000014;
+    .diagrams.is-show-diagram {
+      margin-top: 24px;
+    }
 
     .diagram-second-container {
       overflow-x: auto;
+      display: flex;
+      justify-content: center;
+      min-width: 760px;
+
+      &.diagram-in-portlet {
+        .diagram-second-container {
+          min-width: 560px;
+        }
+      }
 
       .diagram-svg {
         margin: 22.5px 17.5px;
@@ -357,6 +419,28 @@ const onSelectNetwork = (networkId: string): void => {
     }
   }
 }
+
+.diagrams {
+  overflow-y: auto;
+}
+
+.virtual-switch-remove {
+  padding: 16px 0 0;
+  display: flex;
+  justify-content: flex-end;
+
+  &-btn {
+    height: 20px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 17px;
+    letter-spacing: 0;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    color: var(--text-red);
+  }
+}
 </style>
 <style lang="scss">
 .diagram-actions__popup.navbar-dropdown-menu {

package/components/common/diagramMain/DiagramMain.vue

@@ -3,17 +3,17 @@
     v-if="props.diagramData"
     :class="{ 'diagram-min-width': !props.inPortlet }"
   >
-    <div class="diagram-main-container">
-      <common-diagram-main-header
-        :project="props.project"
-        :in-portlet="props.inPortlet"
-        :is-show-diagram="isShowDiagram"
-        :diagram-name="props.diagramData.diagramName"
-        :test-id="props.diagramData.testId"
-        @toggle-diagram="onToggleDiagram"
-        @show-modal="onShowModal"
-      />
+    <div
+      :class="[
+        'diagram-main-container',
+        {
+          'is-new-view': isNewView,
+          'in-portlet': props.inPortlet,
+        },
+      ]"
+    >
       <common-diagram-main-diagram
+        :project="props.project"
         :diagram-data="props.diagramData"
         :is-show-diagram="isShowDiagram"
         :in-portlet="props.inPortlet"
@@ -28,6 +28,7 @@
         :selected-switch-line-y="selectedSwitchLineY"
         :is-dark-mode="props.isDarkMode"
         :networks-count="networksCount"
+        @toggle-diagram="onToggleDiagram"
         @click-diagram="onClickDiagram"
         @toggle-adapters="onToggleAdapters"
         @select-adapter="onSelectAdapter"
@@ -74,6 +75,8 @@
       :selected-switch-id="selectedSwitchId"
       :tcp-stacks="props.tcpStacks"
       :is-networking-loading="props.isNetworkingLoading"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
       :networks-list="props.networksList"
       :is-migrate-adapter-loading="props.isMigrateAdapterLoading"
       :diagrams-data="props.diagramsData"
@@ -172,6 +175,8 @@ const props = withDefaults(
     diagramsData?: UI_I_DiagramData[]
     isManageAdaptersModalLoading?: boolean
     isNetworkingLoading?: boolean
+    isGetExistingSwitchesLoading?: boolean
+    isGetTcpStackLoading?: boolean
     isRemoveModalLoading?: boolean
     isEditModalLoading?: boolean
     isMigrateAdapterLoading?: boolean
@@ -193,12 +198,18 @@ const props = withDefaults(
     diagramsData: [],
     isManageAdaptersModalLoading: false,
     isNetworkingLoading: false,
+    isGetExistingSwitchesLoading: false,
+    isGetTcpStackLoading: false,
     isRemoveModalLoading: false,
     isEditModalLoading: false,
     isMigrateAdapterLoading: false,
   }
 )
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const initialData = ref<UI_I_ModalsInitialData>({})
 const switchInitialData = ref<UI_I_ModalsInitialData>({})
 
@@ -880,11 +891,30 @@ const onClickDiagram = (ev: MouseEvent): void => {
   &-min-width {
     //min-width: 745px;
     //min-width: 764px;
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
   }
   &-main-container {
     padding-top: 5px;
   }
 }
+
+.diagram-main-container.is-new-view {
+  //display: flex;
+  //justify-content: center;
+  //margin: 16px 16px 30px;
+
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--diagram-container-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+
+  &.in-portlet {
+    box-shadow: none;
+    padding: 0;
+  }
+}
 </style>
 <style lang="scss">
 .diagram-main-actions__popup.navbar-dropdown-menu {

package/components/common/diagramMain/header/Header.vue

@@ -0,0 +1,49 @@
+<template>
+  <component
+    :is="currentComponent"
+    :project="props.project"
+    :is-show-diagram="props.isShowDiagram"
+    :diagram-name="props.diagramName"
+    :test-id="props.testId"
+    @toggle-diagram="emits('toggle-diagram')"
+    @show-modal="onShowModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    isShowDiagram: boolean
+    diagramName: string
+    testId: string
+    project?: UI_T_Project
+  }>(),
+  {
+    project: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-diagram'): void
+  (event: 'show-modal', modalName: string, data?: { switch_name: string }): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./HeaderNew.vue'))
+    : defineAsyncComponent(() => import('./HeaderOld.vue'))
+)
+
+const onShowModal = (modalName: string, data?: { switch_name: string }) => {
+  emits('show-modal', modalName, data)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/header/HeaderNew.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="diagram-header">
+    <div class="diagram-header-left">
+      <span
+        class="diagram-header-left-icon"
+        :data-id="`${props.testId}-toggle-icon`"
+      >
+        <ui-icon
+          name="arrow"
+          width="20"
+          height="20"
+          :class="[
+            'diagram-header-left-icon-arrow',
+            {
+              open: props.isShowDiagram,
+            },
+          ]"
+          @click="emits('toggle-diagram')"
+        />
+      </span>
+
+      <span class="diagram-header-left-title" @click="emits('toggle-diagram')">
+        {{ localization.common.standardSwitch }}:
+        {{ props.diagramName }}
+      </span>
+    </div>
+    <div v-if="props.isShowDiagram" class="diagram-header-right">
+      <ui-button-group
+        :buttons="buttons"
+        :left-line="true"
+        :group-id="props.diagramName"
+        class="switch-actions"
+        @action="onSelectAction"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Button } from '~/node_modules/bfg-common/components/common/tools/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { switchMainNavigationNewFunc } from '~/components/common/diagramMain/modals/lib/config'
+
+const props = withDefaults(
+  defineProps<{
+    isShowDiagram: boolean
+    diagramName: string
+    testId: string
+    project?: UI_T_Project
+  }>(),
+  {
+    project: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-diagram'): void
+  (
+    event: 'show-modal',
+    modalName: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const buttons = computed<UI_I_Button[]>(() =>
+  switchMainNavigationNewFunc(localization.value, props.testId)
+)
+
+const onShowModal = (modalName: string, diagramName?: string) => {
+  diagramName
+    ? emits(
+        'show-modal',
+        modalName,
+        diagramName && { switch_name: diagramName }
+      )
+    : emits('show-modal', modalName)
+}
+
+const onSelectAction = (event: string): void => {
+  onShowModal(event, event === 'add-networking' && props.diagramName)
+}
+</script>
+
+<style scoped lang="scss">
+.diagram-header {
+  display: flex;
+  height: 20px;
+
+  &-left {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    column-gap: 12px;
+    height: 20px;
+    min-width: max-content;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--select-arrow);
+
+      &-arrow {
+        transform: rotate(90deg);
+        cursor: pointer;
+
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    &-title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0;
+      color: var(--title-form-first-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--dropdown-item-hover-color);
+      }
+    }
+  }
+
+  &-right {
+    height: 20px;
+    width: 100%;
+
+    :deep(.ui-button-group) {
+      .ui-button-group-line {
+        height: 20px;
+        top: 0;
+      }
+
+      .ui-button-group-items {
+        height: 20px !important;
+
+        .button-from-group {
+          height: 20px !important;
+        }
+      }
+      .ui-button-group-dots {
+        margin-top: 0;
+        padding-top: 0;
+        height: 20px;
+      }
+    }
+  }
+}
+</style>