bfg-common 1.6.95 → 1.6.97

package/components/common/configure/physicalAdapters/tableView/lib/config/settings.ts

@@ -0,0 +1,129 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_ViewSettingsFields,
+  UI_I_ViewSettingsModalTabs,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+
+export const adapterViewSettingsModalTabsFunc = (
+    localization: UI_I_Localization
+): UI_I_ViewSettingsModalTabs[] => [
+  {
+    text: localization.common.all,
+    value: 0,
+    testId: 'physical-adapter-view-all-settings',
+  },
+  {
+    text: localization.common.properties,
+    value: 1,
+    testId: 'physical-adapter-view-properties-setting',
+  },
+  {
+    text: localization.common.cdp,
+    value: 2,
+    testId: 'physical-adapter-view-cdp-setting',
+  },
+  {
+    text: localization.common.lldp,
+    value: 3,
+    testId: 'physical-adapter-view-lldp-setting',
+  },
+]
+
+export const adapterViewSettingsFunc = (
+    localization: UI_I_Localization,
+    initialData: UI_I_ModalsInitialData
+): UI_I_ViewSettingsFields[] => {
+  return [
+    {
+      title: localization.common.properties,
+      id: 1,
+      type: 1,
+      rows: [
+        {
+          name: localization.common.adapter + ':',
+          value: initialData.adapter?.trim() || '',
+        },
+        {
+          name: localization.common.name + ':',
+          value: initialData.name || '',
+        },
+        {
+          name: localization.common.location + ':',
+          value: `PCI ${initialData.pciAddress}`,
+        },
+        {
+          name: localization.common.driver + ':',
+          value: initialData.driver || '',
+        },
+      ],
+    },
+    {
+      title: localization.common.status,
+      id: 2,
+      type: 1,
+      rows: [
+        {
+          name: localization.common.status + ':',
+          value: initialData.carrier
+              ? localization.common.connected
+              : localization.common.disconnected,
+          status: true,
+          color: initialData.carrier,
+        },
+        {
+          name: localization.common.actualSpeedDuplex + ':',
+          value:
+              initialData.carrier && initialData.speed
+                  ? `${initialData.speed / 1000} ${localization.common.gbitS}, ${
+                      initialData.duplex
+                  } Duplex`
+                  : localization.common.down,
+        },
+        {
+          name: localization.common.configuredSpeedDuplex + ':',
+          value:
+              initialData.carrier && initialData.speed
+                  ? `${initialData.speed / 1000} ${localization.common.gbitS}, ${
+                      initialData.duplex
+                  } Duplex`
+                  : localization.common.autoNegotiate,
+        },
+        {
+          name: localization.common.networks + ':',
+          value:
+              initialData.networks && initialData.networks?.length > 0
+                  ? initialData.networks
+                  : localization.common.noNetworks,
+        },
+      ],
+    },
+    {
+      title: localization.common.srIov,
+      id: 3,
+      type: 1,
+      rows: [
+        {
+          name: localization.common.status + ':',
+          value: !initialData.srIov
+              ? localization.common.notSupported
+              : localization.common.supported,
+          status: true,
+          color: initialData.srIov,
+        },
+      ],
+    },
+    {
+      title: localization.common.ciscoDiscoveryProtocol,
+      id: 4,
+      type: 2,
+      rows: !initialData.cdp ? [] : [],
+    },
+    {
+      title: localization.common.linkLayerDiscoveryProtocol,
+      id: 5,
+      type: 3,
+      rows: !initialData.lldp ? [] : [],
+    },
+  ]
+}

package/components/common/configure/physicalAdapters/tableView/lib/config/tableKeys.ts

@@ -0,0 +1,14 @@
+import type { UI_T_PhysicalAdaptersTableItemsTuple } from '~/components/common/configure/physicalAdapters/tableView/lib/models/types'
+
+export const physicalAdaptersTableItemsTuple: UI_T_PhysicalAdaptersTableItemsTuple =
+  [
+    'device',
+    'actualSpeed',
+    'configuredSpeed',
+    'switch',
+    'macAddress',
+    'observedIpRanges',
+    'wakeOnLanSupported',
+    'srIovStatus',
+    'srIovVfs',
+  ]

package/components/common/configure/physicalAdapters/tableView/lib/models/interfaces.ts

@@ -0,0 +1,33 @@
+export interface UI_I_PhysicalAdapter {
+  device: string
+  actualSpeed: string
+  configuredSpeed: string
+  switch: string
+  macAddress: string
+  observedIpRanges: string
+  wakeOnLanSupported: string
+  srIovStatus: string
+  srIovStatusValue: boolean
+  srIovVfs: string
+}
+
+export interface UI_I_ViewSettingsFieldsRow {
+  name: string
+  value?: string | string[] | undefined
+  color?: boolean
+  status?: boolean
+  icon?: string
+}
+
+export interface UI_I_ViewSettingsFields {
+  title?: string
+  id: number
+  type: number
+  rows: UI_I_ViewSettingsFieldsRow[]
+}
+
+export interface UI_I_ViewSettingsModalTabs {
+  text: string
+  value: number
+  testId: string
+}

package/components/common/configure/physicalAdapters/tableView/lib/models/types.ts

@@ -0,0 +1,11 @@
+export type UI_T_PhysicalAdaptersTableItemsTuple = [
+  'device',
+  'actualSpeed',
+  'configuredSpeed',
+  'switch',
+  'macAddress',
+  'observedIpRanges',
+  'wakeOnLanSupported',
+  'srIovStatus',
+  'srIovVfs'
+]

package/components/common/configure/physicalAdapters/tableView/mappers/mappers.ts

@@ -0,0 +1,43 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+import { getNicSpeed } from '~/components/common/diagramMain/modals/lib/utils/index'
+import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+
+export const constructPhysicalAdaptersTableFunc = (
+  adapters: UI_I_SwitchAdapterItem[] = [],
+  localization: UI_I_Localization
+): UI_I_PhysicalAdapter[] => {
+  if (!adapters) return []
+
+  return adapters.map((adapter: UI_I_SwitchAdapterItem) => {
+    return {
+      device: adapter.name,
+      actualSpeed: getNicSpeed(
+        adapter.speed,
+        localization,
+        localization.common.down
+      ),
+      configuredSpeed: getNicSpeed(
+        adapter.speed,
+        localization,
+        localization.common.autoNegotiate
+      ),
+      switch: adapter.switch || '--',
+      macAddress: adapter.mac || '--',
+      observedIpRanges:
+        adapter.networks && adapter.networks?.length > 0
+          ? adapter.networks.join(', ')
+          : localization.common.noNetworks,
+      // TODO Set Real Data
+      wakeOnLanSupported: '--',
+      srIovStatus:
+        adapter.srIov === undefined
+          ? localization.common.notSupported
+          : adapter.srIov
+          ? localization.common.enabled
+          : localization.common.disabled,
+      srIovStatusValue: !!adapter.srIov,
+      srIovVfs: '--',
+    }
+  })
+}

package/components/common/context/recursion/RecursionNew.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="context-wrap relative">
     <template v-if="props.isLoading">
-      <ui-loader2 class="context-loader" test-id="context-menu" />
+      <ui-loader class="context-loader" test-id="context-menu" width="40px" height="40px" />
     </template>
     <li
       v-for="item in props.items"
@@ -147,7 +147,6 @@ const allInBlockWithoutChildren = computed<boolean>(
 
   .context-loader {
     position: absolute;
-    width: 40px;
     top: calc(50% - 20px);
     left: calc(50% - 20px);
   }

package/components/common/context/recursion/RecursionOld.vue

@@ -120,7 +120,7 @@ const emits = defineEmits<{
     color: #565656;
     border-bottom: 1px solid transparent;
     cursor: pointer;
-    padding: 5px 0 3px;
+    //padding: 5px 0 3px;
 
     &.has-border-top {
       border-top: 1px solid var(--context-menu-inset-border-color);
@@ -161,7 +161,7 @@ const emits = defineEmits<{
       display: flex;
       align-items: center;
       user-select: none;
-      padding: 3px 20px 4px 10px;
+      padding: 8px 20px 7px 10px;
 
       .menu-item-text {
         flex: 1 1 0;

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 {