bfg-common 1.6.76 → 1.6.77

package/components/common/configure/physicalAdapters/modals/edit/EditNew.vue

@@ -11,14 +11,6 @@
     @submit="emits('send-edit-data')"
   >
     <template #content>
-      <ui-alert
-        v-if="!!errors.alert"
-        :messages="[errors.alert]"
-        test-id="virtual-functions-alert"
-        size="md"
-        class="virtual-functions-alert"
-        @hide="onHideAlert"
-      />
       <div class="form-group">
         <div class="form-group-speed">
           <label class="config-speed-title title">
@@ -38,7 +30,7 @@
         <div v-if="props.hasSpeed" class="form-group-sr">
           <ui-line margin="24px 0 16px" />
           <label class="sr-title title">
-            {{ localization.common.srIov }}
+            {{ localization.common.status }}
           </label>
           <p class="sr-description">
             {{ localization.common.srIovDescription }}
@@ -67,7 +59,6 @@
                 :placeholder="localization.common.virtualFunctions"
                 size="md"
                 type="number"
-                :error="sriovStatus ? errors.field : ''"
                 :disabled="!sriovStatus"
               />
             </div>
@@ -94,8 +85,6 @@ import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/mod
 import type { UI_I_OptionItem } from '~/node_modules/bfg-common/components/atoms/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_SrOptionError } from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
-import { vfNumberValidationFunc } from '~/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations'
 
 const props = defineProps<{
   hasSpeed: boolean
@@ -120,7 +109,6 @@ const modalTexts = ref<UI_I_ModalTexts>({
 const configSpeed = defineModel<string>('config-speed')
 const sriovStatus = defineModel<boolean>('status')
 const numberOfFunctions = defineModel<number>('number-of-functions')
-const errors = defineModel<UI_I_SrOptionError>('errors')
 
 const status = computed({
   get() {
@@ -130,19 +118,6 @@ const status = computed({
     sriovStatus.value = newValue === '1'
   },
 })
-
-watch(
-  numberOfFunctions,
-  (newValue: number): void => {
-    errors.value.field = vfNumberValidationFunc(newValue, localization.value)
-    errors.value.alert = ''
-  },
-  { immediate: true }
-)
-
-const onHideAlert = (): void => {
-  errors.value.alert = ''
-}
 </script>
 
 <style scoped lang="scss">
@@ -225,8 +200,4 @@ const onHideAlert = (): void => {
     }
   }
 }
-
-.virtual-functions-alert {
-  margin: 8px 32px;
-}
 </style>

package/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces.ts

@@ -10,8 +10,3 @@ export interface UI_I_SrOption {
   value: string
   text: string
 }
-
-export interface UI_I_SrOptionError {
-  alert: string
-  field: string
-}

package/components/common/configure/physicalAdapters/tableView/TableViewNew.vue

@@ -170,9 +170,7 @@ const actions = computed<UI_I_ButtonsGroup>(() => [
     value: 'edit',
     testId: 'edit-physical-adapted',
     id: 'edit-physical-adapted',
-    iconName: 'edit',
     disabled: !props.hasSelectedAdapter,
-    development: true,
   },
 ])
 
@@ -249,11 +247,6 @@ const onShowEditModal = (id: string): void => {
 :deep(.table-container) {
   height: 100%;
   grid-template-rows: min-content auto min-content;
-
-  .title-container {
-    margin-right: 16px;
-  }
-
   &.full-width-search {
     grid-template-rows: min-content min-content auto min-content;
   }
@@ -329,7 +322,7 @@ const onShowEditModal = (id: string): void => {
     }
   }
   &-text {
-    line-height: 18px;
+    line-height: 16px;
   }
 }
 
@@ -338,8 +331,4 @@ const onShowEditModal = (id: string): void => {
     white-space: nowrap;
   }
 }
-
-:deep(.ui-button-group-dots-icon) {
-  padding-left: 0;
-}
 </style>

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

@@ -8,96 +8,96 @@ import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physica
 import { physicalAdaptersTableItemsTuple } from '~/components/common/configure/physicalAdapters/tableView/lib/config/tableKeys'
 
 export const getHeaderDataFunc = (
-    localization: UI_I_Localization
+  localization: UI_I_Localization
 ): UI_I_DataTableHeader[] => [
   {
     col: 'col0',
-    colName: physicalAdaptersTableItemsTuple[0],
+    colName: [physicalAdaptersTableItemsTuple[0]],
     text: localization.common[physicalAdaptersTableItemsTuple[0]],
     isSortable: true,
     sort: 'asc',
     sortColumn: true,
-    width: '160px',
+    width: '30%',
     show: true,
     filter: true,
   },
   {
     col: 'col1',
-    colName: physicalAdaptersTableItemsTuple[1],
+    colName: [physicalAdaptersTableItemsTuple[1]],
     text: localization.common[physicalAdaptersTableItemsTuple[1]],
     isSortable: true,
     sort: 'asc',
-    width: '200px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col2',
-    colName: physicalAdaptersTableItemsTuple[2],
+    colName: [physicalAdaptersTableItemsTuple[2]],
     text: localization.common[physicalAdaptersTableItemsTuple[2]],
     isSortable: true,
     sort: 'asc',
-    width: '240px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col3',
-    colName: physicalAdaptersTableItemsTuple[3],
+    colName: [physicalAdaptersTableItemsTuple[3]],
     text: localization.common[physicalAdaptersTableItemsTuple[3]],
     isSortable: true,
     sort: 'asc',
-    width: '140px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col4',
-    colName: physicalAdaptersTableItemsTuple[4],
+    colName: [physicalAdaptersTableItemsTuple[4]],
     text: localization.common[physicalAdaptersTableItemsTuple[4]],
     isSortable: true,
     sort: 'asc',
-    width: '176px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col5',
-    colName: physicalAdaptersTableItemsTuple[5],
+    colName: [physicalAdaptersTableItemsTuple[5]],
     text: localization.common[physicalAdaptersTableItemsTuple[5]],
     isSortable: true,
     sort: 'asc',
-    width: '174px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col6',
-    colName: physicalAdaptersTableItemsTuple[6],
+    colName: [physicalAdaptersTableItemsTuple[6]],
     text: localization.common[physicalAdaptersTableItemsTuple[6]],
     isSortable: true,
     sort: 'asc',
-    width: '200px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col7',
-    colName: physicalAdaptersTableItemsTuple[7],
+    colName: [physicalAdaptersTableItemsTuple[7]],
     text: localization.common[physicalAdaptersTableItemsTuple[7]],
     isSortable: true,
     sort: 'asc',
-    width: '200px',
+    width: '20%',
     show: true,
     filter: true,
   },
   {
     col: 'col8',
-    colName: physicalAdaptersTableItemsTuple[8],
+    colName: [physicalAdaptersTableItemsTuple[8]],
     text: localization.common[physicalAdaptersTableItemsTuple[8]],
     isSortable: true,
     sort: 'asc',
-    width: '140px',
+    width: '20%',
     show: true,
     filter: true,
   },
@@ -131,8 +131,8 @@ export const options: UI_I_DataTableOptions = {
 }
 
 export const getBodyDataFunc = (
-    bodyData: UI_I_PhysicalAdapter[],
-    selectedRow: number
+  bodyData: UI_I_PhysicalAdapter[],
+  selectedRow: number
 ): UI_I_DataTableBody[] => {
   return bodyData.map((adapter: UI_I_PhysicalAdapter, index: number) => {
     return {

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

@@ -11,22 +11,22 @@ export const adapterViewSettingsModalTabsFunc = (
   {
     text: localization.common.all,
     value: 0,
-    testId: 'physical-adapter-view-all-settings',
+    testId: 'physical-adapter-view-all-settings'
   },
   {
     text: localization.common.properties,
     value: 1,
-    testId: 'physical-adapter-view-properties-setting',
+    testId: 'physical-adapter-view-properties-setting'
   },
   {
     text: localization.common.cdp,
     value: 2,
-    testId: 'physical-adapter-view-cdp-setting',
+    testId: 'physical-adapter-view-cdp-setting'
   },
   {
     text: localization.common.lldp,
     value: 3,
-    testId: 'physical-adapter-view-lldp-setting',
+    testId: 'physical-adapter-view-lldp-setting'
   },
 ]
 
@@ -36,7 +36,6 @@ export const adapterViewSettingsFunc = (
 ): UI_I_ViewSettingsFields[] => {
   return [
     {
-      title: localization.common.properties,
       id: 1,
       type: 1,
       rows: [
@@ -68,8 +67,6 @@ export const adapterViewSettingsFunc = (
           value: initialData.carrier
             ? localization.common.connected
             : localization.common.disconnected,
-          status: true,
-          color: initialData.carrier,
         },
         {
           name: localization.common.actualSpeedDuplex,
@@ -105,11 +102,7 @@ export const adapterViewSettingsFunc = (
       rows: [
         {
           name: localization.common.status,
-          value: !initialData.srIov
-            ? localization.common.notSupported
-            : localization.common.supported,
-          status: true,
-          color: initialData.srIov,
+          value: !initialData.srIov ? localization.common.notSupported : '',
         },
       ],
     },

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

@@ -13,10 +13,7 @@ export interface UI_I_PhysicalAdapter {
 
 export interface UI_I_ViewSettingsFieldsRow {
   name: string
-  value?: string | string[] | undefined
-  color?: boolean
-  status?: boolean
-  icon?: string
+  value: string | string[]
 }
 
 export interface UI_I_ViewSettingsFields {

package/components/common/diagramMain/Diagram.vue

@@ -6,129 +6,88 @@
       'diagram-in-portlet': props.inPortlet,
     }"
   >
-    <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>
+    <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 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>
+        </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>
     </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,
@@ -139,7 +98,6 @@ 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<{
@@ -157,7 +115,6 @@ const props = defineProps<{
   selectedSwitchLineY: UI_I_SwitchLine
   isDarkMode: boolean
   networksCount: number
-  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{
@@ -177,15 +134,12 @@ 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) => {
@@ -370,19 +324,8 @@ const onSelectNetwork = (networkId: string): void => {
 <style scoped lang="scss">
 .diagram {
   &-container {
-    //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;
-      }
-    }
+    display: flex;
+    justify-content: center;
 
     .diagram-portlet {
       margin-top: 10px;
@@ -392,21 +335,16 @@ const onSelectNetwork = (networkId: string): void => {
 
 .diagram {
   &-container-new:not(.diagram-in-portlet) {
-    .diagrams.is-show-diagram {
-      margin-top: 24px;
-    }
+    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;
 
     .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;
@@ -419,28 +357,6 @@ 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 {