bfg-common 1.6.49 → 1.6.50

package/components/common/diagramMain/DiagramMain.vue

@@ -3,17 +3,16 @@
     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,
+        },
+      ]"
+    >
       <common-diagram-main-diagram
+        :project="props.project"
         :diagram-data="props.diagramData"
         :is-show-diagram="isShowDiagram"
         :in-portlet="props.inPortlet"
@@ -28,6 +27,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 +74,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 +174,8 @@ const props = withDefaults(
     diagramsData?: UI_I_DiagramData[]
     isManageAdaptersModalLoading?: boolean
     isNetworkingLoading?: boolean
+    isGetExistingSwitchesLoading?: boolean
+    isGetTcpStackLoading?: boolean
     isRemoveModalLoading?: boolean
     isEditModalLoading?: boolean
     isMigrateAdapterLoading?: boolean
@@ -193,12 +197,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 +890,25 @@ 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;
+}
 </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>

package/components/common/diagramMain/{Header.vue → header/HeaderOld.vue}

@@ -1,69 +1,67 @@
 <template>
-  <template v-if="!props.inPortlet">
-    <div class="diagram-header">
-      <div class="diagram-header-left">
-        <atoms-the-icon
-          :class="[
-            'diagram-header__arrow-icon',
-            {
-              open: props.isShowDiagram,
-            },
-          ]"
-          :data-id="`${props.testId}-toggle-icon`"
-          name="angle"
-          @click="onToggleDiagram"
+  <div class="diagram-header">
+    <div class="diagram-header-left">
+      <atoms-the-icon
+        :class="[
+          'diagram-header__arrow-icon',
+          {
+            open: props.isShowDiagram,
+          },
+        ]"
+        :data-id="`${props.testId}-toggle-icon`"
+        name="angle"
+        @click="emits('toggle-diagram')"
+      />
+      <a>
+        <span>
+          {{ localization.common.standardSwitch }}:
+          {{ props.diagramName }}
+        </span>
+      </a>
+    </div>
+    <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
+      <span class="vertical-separator"></span>
+      <button
+        id="add-networking-button"
+        v-permission="
+          'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+        "
+        :data-id="`${props.testId}-add-networking-button`"
+        type="button"
+        @click="onShowModal('add-networking', props.diagramName)"
+      >
+        {{ localization.common.addNetworking }}
+      </button>
+      <button
+        id="switch-edit-button"
+        v-permission="'Networks.UpdateSwitch'"
+        :data-id="`${props.testId}-edit-button`"
+        type="button"
+        @click="onShowModal('switch-edit')"
+      >
+        {{ localization.common.edit }}
+      </button>
+      <button
+        id="switch-manage-physical-adapters-button"
+        v-permission="'Networks.UpdateSwitch'"
+        :data-id="`${props.testId}-manage-physical-adapters-button`"
+        type="button"
+        @click="onShowModal('switch-manage-physical-adapters')"
+      >
+        {{ localization.common.managePhysicalAdapters }}
+      </button>
+      <div class="diagram-main-actions-dots">
+        <atoms-collapse-nav
+          :close-after-click="true"
+          :items="switchMainNavigation"
+          :test-id="`${props.testId}-actions`"
+          popup-class="diagram-main-actions__popup"
+          @change="onShowModal"
         />
-        <a>
-          <span>
-            {{ localization.common.standardSwitch }}:
-            {{ props.diagramName }}
-          </span>
-        </a>
-      </div>
-      <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
-        <span class="vertical-separator"></span>
-        <button
-          id="add-networking-button"
-          v-permission="
-            'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
-          "
-          :data-id="`${props.testId}-add-networking-button`"
-          type="button"
-          @click="onShowModal('add-networking', props.diagramName)"
-        >
-          {{ localization.common.addNetworking }}
-        </button>
-        <button
-          id="switch-edit-button"
-          v-permission="'Networks.UpdateSwitch'"
-          :data-id="`${props.testId}-edit-button`"
-          type="button"
-          @click="onShowModal('switch-edit')"
-        >
-          {{ localization.common.edit }}
-        </button>
-        <button
-          id="switch-manage-physical-adapters-button"
-          v-permission="'Networks.UpdateSwitch'"
-          :data-id="`${props.testId}-manage-physical-adapters-button`"
-          type="button"
-          @click="onShowModal('switch-manage-physical-adapters')"
-        >
-          {{ localization.common.managePhysicalAdapters }}
-        </button>
-        <div class="diagram-main-actions-dots">
-          <atoms-collapse-nav
-            :close-after-click="true"
-            :items="switchMainNavigation"
-            :test-id="`${props.testId}-actions`"
-            popup-class="diagram-main-actions__popup"
-            @change="onShowModal"
-          />
-        </div>
       </div>
     </div>
-    <hr class="horizontal-separator" />
-  </template>
+  </div>
+  <hr class="horizontal-separator" />
 </template>
 
 <script setup lang="ts">
@@ -77,7 +75,6 @@ import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals
 
 const props = withDefaults(
   defineProps<{
-    inPortlet: boolean
     isShowDiagram: boolean
     diagramName: string
     testId: string
@@ -103,12 +100,11 @@ const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
   switchMainNavigationFunc(localization.value, props.testId)
 )
 
-const onToggleDiagram = () => emits('toggle-diagram')
-
-const onShowModal = (modalName: string, diagramName?: string) =>
+const onShowModal = (modalName: string, diagramName?: string) => {
   diagramName
     ? emits('show-modal', modalName, { switch_name: diagramName })
     : emits('show-modal', modalName)
+}
 </script>
 
 <style scoped lang="scss">
@@ -140,7 +136,18 @@ const onShowModal = (modalName: string, diagramName?: string) =>
 
 .diagram-header {
   display: flex;
-  padding-left: 8px;
+  justify-self: flex-start;
+  width: 100%;
+  padding: 24px 16px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   a {
     color: #0072a3;
     cursor: pointer;
@@ -149,6 +156,7 @@ const onShowModal = (modalName: string, diagramName?: string) =>
     line-height: 20px;
     span {
       font-weight: 700;
+      white-space: nowrap;
     }
   }
 
@@ -160,7 +168,9 @@ const onShowModal = (modalName: string, diagramName?: string) =>
 
   &__arrow-icon {
     width: 16px;
+    min-width: 16px;
     height: 16px;
+    min-height: 16px;
     margin-right: 4px;
     transform: rotate(90deg);
     align-self: center;
@@ -213,6 +223,7 @@ const onShowModal = (modalName: string, diagramName?: string) =>
   height: 0;
   overflow: visible;
   border-top: 0px solid #eee;
+  width: 100%;
 }
 
 .vertical-separator {

package/components/common/diagramMain/modals/Modals.vue

@@ -183,6 +183,8 @@
       :tcp-stacks="props.tcpStacks"
       :diagrams-data="props.diagramsData"
       :is-networking-loading="props.isNetworkingLoading"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
       :host-name="props.hostName"
       :project="props.project"
       @check-network-label="onCheckNetworkLabel"
@@ -274,6 +276,8 @@ const props = defineProps<{
   selectedSwitchId: string
   tcpStacks: UI_I_TCPStack[]
   isNetworkingLoading: boolean
+  isGetExistingSwitchesLoading: boolean
+  isGetTcpStackLoading: boolean
   networksList: UI_I_Network[]
   isMigrateAdapterLoading: boolean
   diagramsData: UI_I_DiagramData[]

package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue

@@ -141,7 +141,7 @@ const isShowErrorMessage = computed<boolean>(
 
 const fieldsValues = ref<UI_I_PropertiesFields>(
   useDeepCopy({
-    vlanId: props.initialData.vlanId || `${localization.value.common.none} (0)`,
+    vlanId: props.initialData.vlanId || `${localization.value.common.none2} (0)`,
     networkLabel: props.initialData.networkLabel || 'Network',
   })
 )
@@ -180,7 +180,7 @@ const setMessageOnChangedField = (
 
   if (
     name === 'vlanId' &&
-    values !== `${localization.value.common.none} (0)` &&
+    values !== `${localization.value.common.none2} (0)` &&
     values !== `${localization.value.common.all} (4095)` &&
     (isNumberInRange(values, 0, 4095) || values === '')
   ) {

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

@@ -1,3 +1,4 @@
+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_NavigationItem } from '~/components/common/diagramMain/lib/models/interfaces'
 
@@ -9,7 +10,7 @@ export const switchMainNavigationFunc = (
     text: localization.common.migrateVmKernelAdapter,
     value: 'migrate-vmkernel-adapter',
     testId: `${testId}-migrate-vm-kernel-adapter`,
-    development: true
+    development: true,
   },
   {
     text: localization.common.viewSettings,
@@ -20,6 +21,46 @@ export const switchMainNavigationFunc = (
     text: localization.common.remove,
     value: 'switch-remove',
     testId: `${testId}-remove`,
-    permission: 'Networks.RemoveSwitch'
+    permission: 'Networks.RemoveSwitch',
+  },
+]
+
+export const switchMainNavigationNewFunc = (
+  localization: UI_I_Localization,
+  testId: string
+): UI_I_Button[] => [
+  {
+    text: localization.common.addNetworking,
+    value: 'add-networking',
+    iconName: 'network',
+    testId: `${testId}-add-networking-button`,
+    permission:
+      'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch',
+  },
+  {
+    text: localization.common.edit,
+    value: 'switch-edit',
+    iconName: 'edit',
+    testId: `${testId}-edit-button`,
+    permission: 'Networks.UpdateSwitch',
+  },
+  {
+    text: localization.common.managePhysicalAdapters,
+    value: 'switch-manage-physical-adapters',
+    iconName: 'settings',
+    testId: `${testId}-manage-physical-adapters-button`,
+    permission: 'Networks.UpdateSwitch',
+  },
+  // {
+  //   text: localization.common.migrateVmKernelAdapter,
+  //   value: 'migrate-vmkernel-adapter',
+  //   testId: `${testId}-migrate-vm-kernel-adapter`,
+  //   development: true,
+  // },
+  {
+    text: localization.common.viewSettings,
+    value: 'switch-view-settings',
+    iconName: 'password-hide',
+    testId: `${testId}-view-settings`,
   },
 ]

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

@@ -52,4 +52,5 @@ export const {
   vmKernelAdapterViewSettingsFunc,
 } = vmKernelAdapterData
 // export const { managePhysicalAdapterTableData } = temporaryData
-export const { switchMainNavigationFunc } = diagramConfig
+export const { switchMainNavigationFunc, switchMainNavigationNewFunc } =
+  diagramConfig

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

@@ -18,7 +18,7 @@ export const vmKernelAdapterViewSettingsFunc = (
     type: 0,
     rows: [
       { name: localization.common.networkLabel, value: '' },
-      { name: localization.common.vlanId, value: `${localization.common.none} (0)` },
+      { name: localization.common.vlanId, value: `${localization.common.none2} (0)` },
       { name: localization.common.tcpIpStack, value: 'Default' },
       { name: localization.common.enabledServices },
     ],

package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue

@@ -112,7 +112,7 @@ const title = computed<string>(
 
 const connectionSettings = ref<UI_I_ConnectionSettings>({
   networkLabel: 'VM Network',
-  vlanId: `${localization.value.common.none} (0)`,
+  vlanId: `${localization.value.common.none2} (0)`,
 })
 
 const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
@@ -262,7 +262,7 @@ const reset = (): void => {
   wizard.reset()
   connectionSettings.value = {
     networkLabel: 'VM Network',
-    vlanId: `${localization.value.common.none} (0)`,
+    vlanId: `${localization.value.common.none2} (0)`,
   }
   vmkernelAdapter.value = {
     vm: '',

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts

@@ -14,6 +14,6 @@ export const checkVlanId = (
   vlanId: string,
   localization: UI_I_Localization
 ): boolean =>
-  vlanId !== `${localization.common.none} (0)` &&
+  vlanId !== `${localization.common.none2} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="diagram-header-skeleton">
+    <div class="diagram-header-skeleton-title">
+      <ui-skeleton-item width="160" height="22" />
+    </div>
+    <div class="diagram-header-skeleton-buttons">
+      <ui-skeleton-item width="112" height="36" border-radius="8" />
+      <ui-skeleton-item width="160" height="36" border-radius="8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-header-skeleton {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 24px;
+  column-gap: 24px;
+
+  &-buttons {
+    display: flex;
+    column-gap: 16px;
+    margin-left: auto;
+  }
+}
+</style>