bfg-common 1.6.74 → 1.6.75

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

@@ -4,12 +4,13 @@
     v-model:config-speed="configSpeed"
     v-model:status="sriovStatus"
     v-model:number-of-functions="numberOfFunctions"
+    v-model:errors="errors"
     :selected-adapter="props.selectedAdapter"
     :has-speed="props.hasSpeed"
     :configured-speed-options="configuredSpeedOptions"
     :sr-options="srOptions"
     @hide="emits('hide')"
-    @send-edit-data="emits('send-edit-data')"
+    @send-edit-data="onSendData"
   />
 </template>
 
@@ -20,11 +21,13 @@ import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib
 import type {
   UI_I_ConfiguredSpeedOption,
   UI_I_SrOption,
+  UI_I_SrOptionError,
 } from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
 import {
   configuredSpeedOptionsFunc,
   srOptionsFunc,
 } from '~/components/common/configure/physicalAdapters/modals/edit/lib/config/config'
+import { vfNumberValidationFunc } from '~/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations'
 
 const { $store }: any = useNuxtApp()
 
@@ -60,6 +63,11 @@ const srOptions = computed<(UI_I_SrOption | UI_I_OptionItem)[]>(() =>
   srOptionsFunc(localization.value, isNewView.value)
 )
 
+const errors = ref<UI_I_SrOptionError>({
+  alert: '',
+  field: '',
+})
+
 watch(
   configuredSpeedOptions,
   (newValue: (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]) => {
@@ -67,6 +75,23 @@ watch(
   },
   { deep: true, immediate: true }
 )
+
+const onSendData = (): void => {
+  const alertMessage = vfNumberValidationFunc(
+    numberOfFunctions.value,
+    localization.value,
+    true
+  )
+
+  if (alertMessage) {
+    errors.value.alert = alertMessage
+    return
+  }
+
+  errors.value.alert = ''
+
+  emits('send-edit-data')
+}
 </script>
 
 <style scoped lang="scss">

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 {