bfg-common 1.6.77 → 1.6.78

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/adapter/Adapter.vue

@@ -1,123 +1,123 @@
-<template>
-  <g>
-    <common-diagram-main-adapter-block
-      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
-      :adapters-with-positions="props.adaptersWithPositions"
-    />
-
-    <common-diagram-main-adapter-contents
-      :adapters-with-positions="props.adaptersWithPositions"
-      :test-id="props.testId"
-      @toggle-adapters="onToggleAdapters"
-    />
-
-    <common-diagram-main-adapter-second-block
-      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
-      :adapters-with-positions="props.adaptersWithPositions"
-    />
-
-    <common-diagram-main-adapter-lines
-      v-if="props.isVisibleLine && !!props.networksCount"
-      :adapters-connect-line-y="
-        props.adaptersWithPositions.adaptersConnectLineY
-      "
-      :is-highlighted-adapter-line="isHighlightedAdapterLine"
-      :first-and-last-network-lines-y="props.firstAndLastNetworkLinesY"
-    />
-
-    <common-diagram-main-adapter-items
-      :adapters-with-positions="props.adaptersWithPositions"
-      :selected-port="props.selectedPort"
-      :selected-adapter="props.selectedAdapter"
-      :networks-count="props.networksCount"
-      :is-dark-mode="props.isDarkMode"
-      :networks-with-positions="props.networksWithPositions"
-      @select-adapter="onSelectAdapter"
-      @show-modal="onShowModal"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_AdaptersWithPositions,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_NetworksWithPositions,
-  UI_I_FirstAndLastNetworkLinesY,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  selectedMainLine: boolean
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedNetwork: string
-  isSelectedLinkedWithAdapter: boolean
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  isVisibleLine: boolean
-  networksCount: number
-  isDarkMode: boolean
-  testId: string
-  firstAndLastNetworkLinesY: UI_I_FirstAndLastNetworkLinesY
-}>()
-
-const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
-  () =>
-    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
-)
-
-const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(() => {
-  return (
-    props.adaptersWithPositions.adapters?.length === 0 &&
-    props.selectedNetwork !== '-1'
-  )
-})
-
-const isHighlightedOptimizePart = computed<boolean>(
-  () =>
-    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
-)
-
-const isHighlightedAdapterLine = computed<boolean>(
-  () =>
-    props.isSelectedLinkedWithAdapter &&
-    !(
-      isHighlightedOptimizePart.value &&
-      !hasNoAdaptersAndNoSelectedNetwork.value
-    )
-)
-
-const isHighlightedClosedAdapterBlock = computed<boolean>(
-  () =>
-    props.isSelectedLinkedWithAdapter &&
-    !(
-      isHighlightedOptimizePart.value &&
-      !(hasNoAdaptersAndNoSelectedNetwork.value && props.isVisibleLine)
-    )
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-adapters', networkId: string, portId: string): void
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onToggleAdapters = (networkId: string, portId: string): void => {
-  emits('toggle-adapters', networkId, portId)
-}
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-</script>
+<template>
+  <g>
+    <common-diagram-main-adapter-block
+      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
+      :adapters-with-positions="props.adaptersWithPositions"
+    />
+
+    <common-diagram-main-adapter-contents
+      :adapters-with-positions="props.adaptersWithPositions"
+      :test-id="props.testId"
+      @toggle-adapters="onToggleAdapters"
+    />
+
+    <common-diagram-main-adapter-second-block
+      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
+      :adapters-with-positions="props.adaptersWithPositions"
+    />
+
+    <common-diagram-main-adapter-lines
+      v-if="props.isVisibleLine && !!props.networksCount"
+      :adapters-connect-line-y="
+        props.adaptersWithPositions.adaptersConnectLineY
+      "
+      :is-highlighted-adapter-line="isHighlightedAdapterLine"
+      :first-and-last-network-lines-y="props.firstAndLastNetworkLinesY"
+    />
+
+    <common-diagram-main-adapter-items
+      :adapters-with-positions="props.adaptersWithPositions"
+      :selected-port="props.selectedPort"
+      :selected-adapter="props.selectedAdapter"
+      :networks-count="props.networksCount"
+      :is-dark-mode="props.isDarkMode"
+      :networks-with-positions="props.networksWithPositions"
+      @select-adapter="onSelectAdapter"
+      @show-modal="onShowModal"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_AdaptersWithPositions,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_NetworksWithPositions,
+  UI_I_FirstAndLastNetworkLinesY,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  selectedMainLine: boolean
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedNetwork: string
+  isSelectedLinkedWithAdapter: boolean
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  isVisibleLine: boolean
+  networksCount: number
+  isDarkMode: boolean
+  testId: string
+  firstAndLastNetworkLinesY: UI_I_FirstAndLastNetworkLinesY
+}>()
+
+const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
+  () =>
+    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
+)
+
+const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(() => {
+  return (
+    props.adaptersWithPositions.adapters?.length === 0 &&
+    props.selectedNetwork !== '-1'
+  )
+})
+
+const isHighlightedOptimizePart = computed<boolean>(
+  () =>
+    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
+)
+
+const isHighlightedAdapterLine = computed<boolean>(
+  () =>
+    props.isSelectedLinkedWithAdapter &&
+    !(
+      isHighlightedOptimizePart.value &&
+      !hasNoAdaptersAndNoSelectedNetwork.value
+    )
+)
+
+const isHighlightedClosedAdapterBlock = computed<boolean>(
+  () =>
+    props.isSelectedLinkedWithAdapter &&
+    !(
+      isHighlightedOptimizePart.value &&
+      !(hasNoAdaptersAndNoSelectedNetwork.value && props.isVisibleLine)
+    )
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-adapters', networkId: string, portId: string): void
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onToggleAdapters = (networkId: string, portId: string): void => {
+  emits('toggle-adapters', networkId, portId)
+}
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+</script>