bfg-common 1.6.77 → 1.6.78

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

@@ -11,6 +11,14 @@
     @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">
@@ -30,7 +38,7 @@
         <div v-if="props.hasSpeed" class="form-group-sr">
           <ui-line margin="24px 0 16px" />
           <label class="sr-title title">
-            {{ localization.common.status }}
+            {{ localization.common.srIov }}
           </label>
           <p class="sr-description">
             {{ localization.common.srIovDescription }}
@@ -59,6 +67,7 @@
                 :placeholder="localization.common.virtualFunctions"
                 size="md"
                 type="number"
+                :error="sriovStatus ? errors.field : ''"
                 :disabled="!sriovStatus"
               />
             </div>
@@ -85,6 +94,8 @@ 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
@@ -109,6 +120,7 @@ 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() {
@@ -118,6 +130,19 @@ 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">
@@ -200,4 +225,8 @@ const status = computed({
     }
   }
 }
+
+.virtual-functions-alert {
+  margin: 8px 32px;
+}
 </style>

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

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

package/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations.ts

@@ -0,0 +1,19 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const vfNumberValidationFunc = (
+  vfNumber: number,
+  localization: UI_I_Localization,
+  isAlert = false
+): string => {
+  if (vfNumber !== 0 && !vfNumber) {
+    return isAlert
+      ? localization.inventoryConfigure.vfRequiredMessage
+      : localization.common.fieldRequired
+  } else if (vfNumber < 1 || vfNumber > 63) {
+    return isAlert
+      ? localization.inventoryConfigure.vfNotNegativeMessage
+      : localization.inventoryConfigure.vfNotNegativeMessage
+  }
+
+  return ''
+}

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

@@ -170,7 +170,9 @@ const actions = computed<UI_I_ButtonsGroup>(() => [
     value: 'edit',
     testId: 'edit-physical-adapted',
     id: 'edit-physical-adapted',
+    iconName: 'edit',
     disabled: !props.hasSelectedAdapter,
+    development: true,
   },
 ])
 
@@ -247,6 +249,11 @@ 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;
   }
@@ -322,7 +329,7 @@ const onShowEditModal = (id: string): void => {
     }
   }
   &-text {
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 
@@ -331,4 +338,8 @@ 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: '30%',
+    width: '160px',
     show: true,
     filter: true,
   },
   {
     col: 'col1',
-    colName: [physicalAdaptersTableItemsTuple[1]],
+    colName: physicalAdaptersTableItemsTuple[1],
     text: localization.common[physicalAdaptersTableItemsTuple[1]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '200px',
     show: true,
     filter: true,
   },
   {
     col: 'col2',
-    colName: [physicalAdaptersTableItemsTuple[2]],
+    colName: physicalAdaptersTableItemsTuple[2],
     text: localization.common[physicalAdaptersTableItemsTuple[2]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '240px',
     show: true,
     filter: true,
   },
   {
     col: 'col3',
-    colName: [physicalAdaptersTableItemsTuple[3]],
+    colName: physicalAdaptersTableItemsTuple[3],
     text: localization.common[physicalAdaptersTableItemsTuple[3]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '140px',
     show: true,
     filter: true,
   },
   {
     col: 'col4',
-    colName: [physicalAdaptersTableItemsTuple[4]],
+    colName: physicalAdaptersTableItemsTuple[4],
     text: localization.common[physicalAdaptersTableItemsTuple[4]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '176px',
     show: true,
     filter: true,
   },
   {
     col: 'col5',
-    colName: [physicalAdaptersTableItemsTuple[5]],
+    colName: physicalAdaptersTableItemsTuple[5],
     text: localization.common[physicalAdaptersTableItemsTuple[5]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '174px',
     show: true,
     filter: true,
   },
   {
     col: 'col6',
-    colName: [physicalAdaptersTableItemsTuple[6]],
+    colName: physicalAdaptersTableItemsTuple[6],
     text: localization.common[physicalAdaptersTableItemsTuple[6]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '200px',
     show: true,
     filter: true,
   },
   {
     col: 'col7',
-    colName: [physicalAdaptersTableItemsTuple[7]],
+    colName: physicalAdaptersTableItemsTuple[7],
     text: localization.common[physicalAdaptersTableItemsTuple[7]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '200px',
     show: true,
     filter: true,
   },
   {
     col: 'col8',
-    colName: [physicalAdaptersTableItemsTuple[8]],
+    colName: physicalAdaptersTableItemsTuple[8],
     text: localization.common[physicalAdaptersTableItemsTuple[8]],
     isSortable: true,
     sort: 'asc',
-    width: '20%',
+    width: '140px',
     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,6 +36,7 @@ export const adapterViewSettingsFunc = (
 ): UI_I_ViewSettingsFields[] => {
   return [
     {
+      title: localization.common.properties,
       id: 1,
       type: 1,
       rows: [
@@ -67,6 +68,8 @@ export const adapterViewSettingsFunc = (
           value: initialData.carrier
             ? localization.common.connected
             : localization.common.disconnected,
+          status: true,
+          color: initialData.carrier,
         },
         {
           name: localization.common.actualSpeedDuplex,
@@ -102,7 +105,11 @@ export const adapterViewSettingsFunc = (
       rows: [
         {
           name: localization.common.status,
-          value: !initialData.srIov ? localization.common.notSupported : '',
+          value: !initialData.srIov
+            ? localization.common.notSupported
+            : localization.common.supported,
+          status: true,
+          color: initialData.srIov,
         },
       ],
     },

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

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

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 {