bfg-common 1.6.3 → 1.6.4

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/DiagramMain.vue

@@ -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,6 +197,8 @@ const props = withDefaults(
     diagramsData: [],
     isManageAdaptersModalLoading: false,
     isNetworkingLoading: false,
+    isGetExistingSwitchesLoading: false,
+    isGetTcpStackLoading: false,
     isRemoveModalLoading: false,
     isEditModalLoading: false,
     isMigrateAdapterLoading: false,

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/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/layout/theHeader/userMenu/modals/preferences/view/Old.vue

@@ -15,13 +15,9 @@
       />
     </div>
 
-    <div class="description second-description">
-      {{ localization.myPreferences.showNotificationDescription }}
-    </div>
-
-    <div class="flex-align-center">
+    <div class="flex-align-center second-description">
       <label for="show-notification">{{
-        localization.myPreferences.showNotification
+        localization.myPreferences.showNotificationDescription
       }}</label>
       <input
         id="show-notification"
@@ -63,10 +59,10 @@ window.tools = new Proxy(
 <style lang="scss" scoped>
 .description {
   margin-bottom: 10px;
+}
 
-  &.second-description {
-    margin-top: 20px;
-  }
+.second-description {
+  margin-top: 20px;
 }
 
 label {

package/components/common/monitor/utilization/New.vue

@@ -0,0 +1,5 @@
+<template>New</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/Old.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="logs__wrapper flex flex-col h-full">
+    <common-headline :headline="localization.common.utilization" class="mb-1" />
+
+    <div class="utilization-body-container">
+      <div class="utilization-info-block-flex-container">
+        <template v-for="(item, key) in allDataLocal" :key="key">
+          <common-monitor-utilization-info-block
+            v-if="item.isShow"
+            :info-data="item"
+          />
+        </template>
+      </div>
+
+      <div class="utilization-column-manage-container relative">
+        <ui-icon
+          name="settings"
+          width="24px"
+          height="24px"
+          @click="isShowColumnManage = !isShowColumnManage"
+        />
+
+        <atoms-popup-simple-popup
+          v-model="isShowColumnManage"
+          test-id="utilization-column-manage-popup"
+          top="0"
+          right="0"
+        >
+          <li v-for="(item, key) in allDataLocal" :key="key" class="list-item">
+            <input
+              v-model="item.isShow"
+              :id="`utilization-column-manage-${item.id}`"
+              type="checkbox"
+            />
+            <label :for="`utilization-column-manage-${item.id}`">{{
+              item.title
+            }}</label>
+          </li>
+        </atoms-popup-simple-popup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowColumnManage = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.utilization-body-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .utilization-info-block-flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .utilization-column-manage-container {
+    :deep(.close-wrapper) {
+      display: none;
+    }
+    .list-item {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/Utilization.vue

@@ -0,0 +1,51 @@
+<template>
+  <component :is="currentComponent" v-model:all-data="constructedData" />
+</template>
+
+<script setup lang="ts">
+import type {
+  API_UI_I_UtilizationData,
+  UI_I_UtilizationDataItem,
+} from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { constructApiData } from '~/components/common/monitor/utilization/lib/utils'
+
+const props = defineProps<{
+  apiData: API_UI_I_UtilizationData
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const constructedData = ref<UI_I_UtilizationDataItem[]>([])
+
+watch(
+  () => props.apiData,
+  () => {
+    !constructedData.value.length &&
+      (constructedData.value = constructApiData(
+        props.apiData,
+        localization.value
+      ))
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => localization.value,
+  () => {
+    constructedData.value = constructApiData(props.apiData, localization.value)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/infoBlock/InfoBlock.vue

@@ -0,0 +1,23 @@
+<template>
+  <component :is="currentComponent" :info-data="props.infoData" />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+
+const props = defineProps<{
+  infoData: UI_I_UtilizationDataItem
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/infoBlock/New.vue

@@ -0,0 +1,5 @@
+<template>New</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>