bfg-common 1.3.133 → 1.3.134

package/components/atoms/DiagramIcon.vue

@@ -29,6 +29,22 @@
     </svg>
   </template>
   <template v-else-if="props.name === 'outline-port'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="-1 -1 14 14"
+    >
+      <g>
+        <path fill="#fff" d="M.5 11.5V.5h9v2h2v7h-2v2h-9z" />
+        <path
+          d="M9 1v2h2v6H9v2H1V1h8m1-1H0v12h10v-2h2V2h-2V0z"
+          fill="#36708c"
+        />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'outline-port-dark-mode'">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="14"

package/components/atoms/wizard/Wizard.vue

@@ -117,7 +117,7 @@ const props = withDefaults(
     localization?: UI_I_Localization
     testId?: string
     wasCompleted: boolean
-    height: string
+    height?: string
   }>(),
   {
     isLoading: false,

package/components/common/diagramMain/Diagram.vue

@@ -44,6 +44,7 @@
             :diagram-id="props.diagramData.id"
             :in-portlet="props.inPortlet"
             :is-visible-line="hasActiveAdapter"
+            :is-dark-mode="props.isDarkMode"
             @toggle-ports="onTogglePorts"
             @select-port="onSelectPort"
             @select-network="onSelectNetwork"

package/components/common/diagramMain/lib/models/interfaces.ts

@@ -83,12 +83,12 @@ export interface UI_I_Sysx {
 
 export interface UI_I_OverrideValue {
   override: boolean
-  value: string | boolean
+  value: string | number | boolean
 }
 
 export interface UI_I_NetworkSummaryPortletListItem {
   label: string
-  value: string
+  value: string | number
   id: string
   initialValue: UI_I_OverrideValue
 }
@@ -211,39 +211,40 @@ export interface UI_I_ToggleDiagramAdaptersPayload {
 export interface UI_I_SecurityFields {
   promiscuousMode: {
     checked: boolean
-    selected: string
+    selected: string | number
   }
   macAddressChanges: {
     checked: boolean
-    selected: string
+    selected: string | number
   }
   forgedTransmits: {
     checked: boolean
-    selected: string
+    selected: string | number
   }
 }
 
 export interface UI_I_TeamingFailoverFields {
   loadBalancing: {
-    checked: string | number | boolean
-    selected: string
+    checked: boolean
+    selected: string | number
   }
   networkFailureDetection: {
-    checked: string | number | boolean
-    selected: string
+    checked: boolean
+    selected: string | number
   }
   notifySwitches: {
-    checked: string | number | boolean
-    selected: string
+    checked: boolean
+    selected: string | number
   }
   failback: {
-    checked: string | number | boolean
-    selected: string
+    checked: boolean
+    selected: string | number
   }
   failoverOrder: {
-    checked: string | number | boolean
+    checked: boolean
   }
 }
+
 export interface UI_I_TeamingFailoverWithAdaptersFields
   extends UI_I_TeamingFailoverFields {
   adapters: UI_I_AdapterStatus
@@ -252,7 +253,7 @@ export interface UI_I_TeamingFailoverWithAdaptersFields
 export interface UI_I_TrafficShapingFields {
   status: {
     checked: boolean
-    selected: string
+    selected: string | number
   }
   average: number
   peak: number
@@ -417,7 +418,7 @@ export interface API_UI_I_SwitchAdapters {
 export interface UI_I_TeamingAndFailoverTemplate {
   key: string
   options: {
-    value: string
+    value: string | number
     text: string
   }[]
 }
@@ -463,7 +464,7 @@ export interface UI_I_ModalTabs {
 export interface API_UI_I_Security {
   forged_transmits: UI_T_YNIOption
   mac_change: UI_T_YNIOption
-  promiscuous_mode: UI_T_YNIOption
+  promiscuous: UI_T_YNIOption
 }
 export interface API_UI_I_Shaping {
   enabled: boolean

package/components/common/diagramMain/modals/editSettings/tabs/Security.vue

@@ -32,10 +32,16 @@
                         :disabled="!fieldsValues.promiscuousMode.checked"
                         name="selectName"
                       >
-                        <option value="no" :label="localization.reject">
+                        <option
+                          :value="props.isSwitch ? 2 : 'no'"
+                          :label="localization.reject"
+                        >
                           {{ localization.reject }}
                         </option>
-                        <option value="yes" :label="localization.accept">
+                        <option
+                          :value="props.isSwitch ? 1 : 'yes'"
+                          :label="localization.accept"
+                        >
                           {{ localization.accept }}
                         </option>
                       </select>
@@ -76,10 +82,16 @@
                         :disabled="!fieldsValues.macAddressChanges.checked"
                         name="selectName"
                       >
-                        <option value="no" :label="localization.reject">
+                        <option
+                          :value="props.isSwitch ? 2 : 'no'"
+                          :label="localization.reject"
+                        >
                           {{ localization.reject }}
                         </option>
-                        <option value="yes" :label="localization.accept">
+                        <option
+                          :value="props.isSwitch ? 1 : 'yes'"
+                          :label="localization.accept"
+                        >
                           {{ localization.accept }}
                         </option>
                       </select>
@@ -120,10 +132,16 @@
                         :disabled="!fieldsValues.forgedTransmits.checked"
                         name="selectName"
                       >
-                        <option value="no" :label="localization.reject">
+                        <option
+                          :value="props.isSwitch ? 2 : 'no'"
+                          :label="localization.reject"
+                        >
                           {{ localization.reject }}
                         </option>
-                        <option value="yes" :label="localization.accept">
+                        <option
+                          :value="props.isSwitch ? 1 : 'yes'"
+                          :label="localization.accept"
+                        >
                           {{ localization.accept }}
                         </option>
                       </select>
@@ -145,7 +163,10 @@ import {
   UI_I_ModalsInitialData,
   UI_I_SecurityFields,
 } from '~/components/common/diagramMain/lib/models/interfaces'
-import { securityFieldsInitialFunc } from '~/components/common/diagramMain/modals/lib/config'
+import {
+  securityFieldsInitialFunc,
+  securityNetworkFieldsInitialFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
 
 // Props from up
 const props = withDefaults(
@@ -162,7 +183,9 @@ const props = withDefaults(
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const fieldsValues = ref<UI_I_SecurityFields>(
-  securityFieldsInitialFunc(props.isSwitch, props.initialData)
+  props.isSwitch
+    ? securityFieldsInitialFunc(props.isSwitch, props.initialData)
+    : securityNetworkFieldsInitialFunc(props.isSwitch, props.initialData)
 )
 
 const emits = defineEmits<{

package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue

@@ -103,7 +103,9 @@ import {
 } from '~/components/common/diagramMain/lib/models/interfaces'
 import {
   teamingFailoverFieldsInitialFunc,
+  teamingFailoverNetworkFieldsInitialFunc,
   teamingAndFailoverTemplateMakerFunc,
+  teamingAndFailoverNetworkTemplateMakerFunc,
 } from '~/components/common/diagramMain/modals/lib/config'
 
 // Props from up
@@ -127,11 +129,16 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 // Making fields template
 const teamingAndFailoverTemplate = computed<UI_I_TeamingAndFailoverTemplate[]>(
-  () => teamingAndFailoverTemplateMakerFunc(localization.value)
+  () =>
+    props.isSwitch
+      ? teamingAndFailoverTemplateMakerFunc(localization.value)
+      : teamingAndFailoverNetworkTemplateMakerFunc(localization.value)
 )
 // Temporary data for this component
 const fieldsValues = ref<UI_I_TeamingFailoverFields>(
-  teamingFailoverFieldsInitialFunc(props.isSwitch, props.initialData)
+  props.isSwitch
+    ? teamingFailoverFieldsInitialFunc(props.isSwitch, props.initialData)
+    : teamingFailoverNetworkFieldsInitialFunc(props.isSwitch, props.initialData)
 )
 
 const emits = defineEmits<{

package/components/common/diagramMain/modals/editSettings/tabs/TrafficShaping.vue

@@ -30,7 +30,7 @@
                       {{ localization.override }}
                     </label>
                   </div>
-                  <div class="flex-property-value-group">
+                  <div v-if="!props.isSwitch" class="flex-property-value-group">
                     <div class="select">
                       <select
                         id="traffic-shaping-select"
@@ -47,6 +47,23 @@
                       </select>
                     </div>
                   </div>
+                  <div v-else class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="traffic-shaping-select"
+                        v-model.number="fieldsValues.status.selected"
+                        :disabled="!fieldsValues.status.checked"
+                        name="selectName"
+                      >
+                        <option :label="localization.enabled" value="1">
+                          {{ localization.enabled }}
+                        </option>
+                        <option :label="localization.disabled" value="0">
+                          {{ localization.disabled }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -76,7 +93,10 @@
                       {{ localization.override }}
                     </label>
                   </div>
-                  <div class="property-value-group tooltip-field-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
                     <atoms-tooltip-error
                       :has-error="!!props.errorMessages.average"
                     >
@@ -107,6 +127,40 @@
                       </template>
                     </atoms-tooltip-error>
                   </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.average"
+                    >
+                      <template #elem>
+                        <input
+                          id="average"
+                          v-model="fieldsValues.average"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="average"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.average,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.average }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
                 </div>
               </div>
             </div>
@@ -136,7 +190,10 @@
                       {{ localization.override }}
                     </label>
                   </div>
-                  <div class="property-value-group tooltip-field-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
                     <atoms-tooltip-error
                       :has-error="!!props.errorMessages.peak"
                     >
@@ -167,6 +224,40 @@
                       </template>
                     </atoms-tooltip-error>
                   </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.peak"
+                    >
+                      <template #elem>
+                        <input
+                          id="peak"
+                          v-model="fieldsValues.peak"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="peak"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.peak,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.peak }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
                 </div>
               </div>
             </div>
@@ -196,7 +287,10 @@
                       {{ localization.override }}
                     </label>
                   </div>
-                  <div class="property-value-group tooltip-field-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
                     <atoms-tooltip-error
                       :has-error="!!props.errorMessages.burstSize"
                     >
@@ -227,6 +321,40 @@
                       </template>
                     </atoms-tooltip-error>
                   </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.burstSize"
+                    >
+                      <template #elem>
+                        <input
+                          id="burst-size"
+                          v-model="fieldsValues.burstSize"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="burst-size"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.burstSize,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.burstSize }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
                 </div>
               </div>
             </div>
@@ -246,7 +374,10 @@ import {
 } from '~/components/common/diagramMain/lib/models/interfaces'
 import { UI_T_TrafficShapingFieldName } from '~/components/common/diagramMain/lib/models/types'
 import { validationMessagesArrayFunc } from '~/components/common/diagramMain/modals/lib/utils'
-import { trafficShapingFieldsInitialFunc } from '~/components/common/diagramMain/modals/lib/config'
+import {
+  trafficShapingFieldsInitialFunc,
+  trafficShapingNetworkFieldsInitialFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
 
 // Props from up
 const props = withDefaults(
@@ -279,11 +410,9 @@ const isShowErrorMessage = computed<boolean>(
 )
 
 const fieldsValues = ref<UI_I_TrafficShapingFields>(
-  trafficShapingFieldsInitialFunc(props.isSwitch, props.initialData, {
-    average_bw: props.initialData?.average_bw || 0,
-    peak_bw: props.initialData?.peak_bw || 0,
-    burst_size: props.initialData?.burst_size || 0,
-  })
+  props.isSwitch
+    ? trafficShapingFieldsInitialFunc(props.isSwitch, props.initialData)
+    : trafficShapingNetworkFieldsInitialFunc(props.isSwitch, props.initialData)
 )
 
 // Validation

package/components/common/diagramMain/modals/lib/config/index.ts

@@ -4,9 +4,7 @@ import * as adapterModalConfig from './adapterModal'
 import * as vCenterModalConfig from './vCenterModal'
 import * as initialConfig from './initial'
 import * as switchModalConfig from './switchModal'
-import * as validationData from './validation'
 import * as vmKernelAdapterData from './vmKernelAdapter'
-// import * as temporaryData from './temporaryData'
 import * as diagramConfig from './diagramConfig'
 
 export const {
@@ -18,6 +16,7 @@ export const {
 } = portModalConfig
 export const {
   teamingAndFailoverTemplateMakerFunc,
+  teamingAndFailoverNetworkTemplateMakerFunc,
   networkViewSettingsModalTabsFunc,
   networkEditSettingsTabsFunc,
   networkViewSettingsFunc,
@@ -32,8 +31,11 @@ export const { vCenterViewSettingsFunc, vCenterPopupFieldsFunc } =
   vCenterModalConfig
 export const {
   trafficShapingFieldsInitialFunc,
+  trafficShapingNetworkFieldsInitialFunc,
   securityFieldsInitialFunc,
+  securityNetworkFieldsInitialFunc,
   teamingFailoverFieldsInitialFunc,
+  teamingFailoverNetworkFieldsInitialFunc,
   ipvFourSettingsFields,
 } = initialConfig
 export const {

package/components/common/diagramMain/modals/lib/config/initial.ts

@@ -12,6 +12,69 @@ import {
 export const teamingFailoverFieldsInitialFunc = (
   isSwitch: boolean,
   initialData?: UI_I_ModalsInitialData
+): UI_I_TeamingFailoverFields => {
+  const teaming = {
+    loadBalancing: {
+      checked: isSwitch,
+      selected: 3,
+    },
+    networkFailureDetection: {
+      checked: isSwitch,
+      selected: 1,
+    },
+    notifySwitches: {
+      checked: isSwitch,
+      selected: 1,
+    },
+    failback: {
+      checked: isSwitch,
+      selected: 1,
+    },
+    failoverOrder: {
+      checked: isSwitch,
+    },
+  }
+
+  initialData &&
+    initialData.nicTeamingPolicy?.forEach(
+      (sec: UI_I_NetworkSummaryPortletListItem) => {
+        switch (sec.id) {
+          case 'mode':
+            teaming.loadBalancing = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+          case 'link_detect':
+            teaming.networkFailureDetection = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+          case 'notify_switches':
+            teaming.notifySwitches = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+          case 'failback':
+            teaming.failback = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+        }
+      }
+    )
+
+  teaming.failoverOrder.checked = initialData?.nics_override || false
+
+  return teaming
+}
+
+export const teamingFailoverNetworkFieldsInitialFunc = (
+  isSwitch: boolean,
+  initialData?: UI_I_ModalsInitialData
 ): UI_I_TeamingFailoverFields => {
   const teaming = {
     loadBalancing: {
@@ -75,6 +138,54 @@ export const teamingFailoverFieldsInitialFunc = (
 export const securityFieldsInitialFunc = (
   isSwitch: boolean,
   initialData?: UI_I_ModalsInitialData
+): UI_I_SecurityFields => {
+  const security: UI_I_SecurityFields = {
+    promiscuousMode: {
+      checked: isSwitch,
+      selected: 1,
+    },
+    macAddressChanges: {
+      checked: isSwitch,
+      selected: 1,
+    },
+    forgedTransmits: {
+      checked: isSwitch,
+      selected: 1,
+    },
+  }
+
+  initialData &&
+    initialData.securityPolicy?.forEach(
+      (sec: UI_I_NetworkSummaryPortletListItem) => {
+        switch (sec.id) {
+          case 'promiscuous_mode':
+            security.promiscuousMode = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+          case 'mac_change':
+            security.macAddressChanges = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+          case 'forged_transmits':
+            security.forgedTransmits = {
+              checked: isSwitch || sec.initialValue.override,
+              selected: sec.initialValue.value as number,
+            }
+            return true
+        }
+      }
+    )
+
+  return security
+}
+
+export const securityNetworkFieldsInitialFunc = (
+  isSwitch: boolean,
+  initialData?: UI_I_ModalsInitialData
 ): UI_I_SecurityFields => {
   const security: UI_I_SecurityFields = {
     promiscuousMode: {
@@ -121,8 +232,50 @@ export const securityFieldsInitialFunc = (
 }
 export const trafficShapingFieldsInitialFunc = (
   isSwitch: boolean,
-  initialData: UI_I_ModalsInitialData,
-  speeds: UI_I_TrafficShapingSpeeds
+  initialData: UI_I_ModalsInitialData
+): UI_I_TrafficShapingFields => {
+  const trafficShapingInitialValue = initialData?.shapingPolicy?.find(
+    (sec: UI_I_NetworkSummaryPortletListItem) => sec.id === 'shaping_enabled'
+  )?.initialValue as UI_I_OverrideValue
+
+  let trafficShaping: UI_I_TrafficShapingFields = {
+    status: {
+      checked: isSwitch,
+      selected: 0,
+    },
+    average: 100000,
+    peak: 100000,
+    burstSize: 102400,
+  }
+
+  initialData &&
+    initialData.shapingPolicy?.forEach(
+      (sec: UI_I_NetworkSummaryPortletListItem) => {
+        switch (sec.id) {
+          case 'shaping_enabled':
+            trafficShaping.status = {
+              checked: isSwitch || trafficShapingInitialValue?.override,
+              selected: trafficShapingInitialValue?.value ? 1 : 0,
+            }
+            return true
+        }
+      }
+    )
+
+  initialData &&
+    (trafficShaping = {
+      ...trafficShaping,
+      average: initialData?.average_bw || 0,
+      peak: initialData?.average_bw || 0,
+      burstSize: initialData?.average_bw || 0,
+    })
+
+  return trafficShaping
+}
+
+export const trafficShapingNetworkFieldsInitialFunc = (
+  isSwitch: boolean,
+  initialData: UI_I_ModalsInitialData
 ): UI_I_TrafficShapingFields => {
   const trafficShapingInitialValue = initialData?.shapingPolicy?.find(
     (sec: UI_I_NetworkSummaryPortletListItem) => sec.id === 'shaping_enabled'
@@ -155,9 +308,9 @@ export const trafficShapingFieldsInitialFunc = (
   initialData &&
     (trafficShaping = {
       ...trafficShaping,
-      average: speeds?.average_bw,
-      peak: speeds?.peak_bw,
-      burstSize: speeds?.burst_size,
+      average: initialData?.average_bw || 0,
+      peak: initialData?.average_bw || 0,
+      burstSize: initialData?.average_bw || 0,
     })
 
   return trafficShaping

package/components/common/diagramMain/modals/lib/config/networkModal.ts

@@ -7,7 +7,7 @@ import {
 } from '~/components/common/diagramMain/lib/models/interfaces'
 
 export const networkViewSettingsModalTabsFunc = (
-    localization: UI_I_Localization
+  localization: UI_I_Localization
 ) => [
   {
     text: localization.all,
@@ -24,115 +24,117 @@ export const networkViewSettingsModalTabsFunc = (
 ]
 
 const findInitialValue = (
-    source: UI_I_NetworkSummaryPortletListItem[] | undefined,
-    id: string
+  source: UI_I_NetworkSummaryPortletListItem[] | undefined,
+  id: string
 ): UI_I_OverrideValue =>
-    source?.find(
-        (sourceItem: UI_I_NetworkSummaryPortletListItem) => sourceItem.id === id
-    )?.initialValue as UI_I_OverrideValue
+  source?.find(
+    (sourceItem: UI_I_NetworkSummaryPortletListItem) => sourceItem.id === id
+  )?.initialValue as UI_I_OverrideValue
 
 export const networkViewSettingsFunc = (
-    localization: UI_I_Localization,
-    initialData: UI_I_ModalsInitialData
+  localization: UI_I_Localization,
+  initialData: UI_I_ModalsInitialData
 ) => {
   const linkDetect: UI_I_OverrideValue = findInitialValue(
-      initialData.nicTeamingPolicy,
-      'link_detect'
+    initialData.nicTeamingPolicy,
+    'link_detect'
   )
 
   const failback: UI_I_OverrideValue = findInitialValue(
-      initialData.nicTeamingPolicy,
-      'failback'
+    initialData.nicTeamingPolicy,
+    'failback'
   )
 
   const loadBalancing: UI_I_OverrideValue = findInitialValue(
-      initialData.nicTeamingPolicy,
-      'mode'
+    initialData.nicTeamingPolicy,
+    'mode'
   )
 
   const notifySwitches: UI_I_OverrideValue = findInitialValue(
-      initialData.nicTeamingPolicy,
-      'notify_switches'
+    initialData.nicTeamingPolicy,
+    'notify_switches'
   )
 
   const promiscuousMode: UI_I_OverrideValue = findInitialValue(
-      initialData.securityPolicy,
-      'promiscuous_mode'
+    initialData.securityPolicy,
+    'promiscuous_mode'
   )
 
   const macAddressChanges: UI_I_OverrideValue = findInitialValue(
-      initialData.securityPolicy,
-      'mac_change'
+    initialData.securityPolicy,
+    'mac_change'
   )
 
   const forgedTransmits: UI_I_OverrideValue = findInitialValue(
-      initialData.securityPolicy,
-      'forged_transmits'
+    initialData.securityPolicy,
+    'forged_transmits'
   )
 
   const promiscuousModeValue: string =
-      promiscuousMode && promiscuousMode.value
-          ? promiscuousMode.value === 'yes'
-              ? localization.accept
-              : localization.reject
-          : '--'
+    promiscuousMode && promiscuousMode.value
+      ? promiscuousMode.value === 'yes'
+        ? localization.accept
+        : localization.reject
+      : '--'
 
   const macAddressChangesValue: string =
-      macAddressChanges && macAddressChanges.value
-          ? macAddressChanges.value === 'yes'
-              ? localization.accept
-              : localization.reject
-          : '--'
+    macAddressChanges && macAddressChanges.value
+      ? macAddressChanges.value === 'yes'
+        ? localization.accept
+        : localization.reject
+      : '--'
 
   const forgedTransmitsValue: string =
-      forgedTransmits && forgedTransmits.value
-          ? forgedTransmits.value === 'yes'
-              ? localization.accept
-              : localization.reject
-          : '--'
+    forgedTransmits && forgedTransmits.value
+      ? forgedTransmits.value === 'yes'
+        ? localization.accept
+        : localization.reject
+      : '--'
 
   const averageBandwidthValue: string = initialData.shapingPolicy?.[0]
-      .initialValue
-      ? `${initialData.average_bw} ${localization.kbitS}`
-      : '--'
+    .initialValue.value
+    ? `${initialData.average_bw} ${localization.kbitS}`
+    : '--'
 
   const peakBandwidthValue: string = initialData.shapingPolicy?.[0].initialValue
-      ? `${initialData.peak_bw} ${localization.kbitS}`
-      : '--'
+    .value
+    ? `${initialData.peak_bw} ${localization.kbitS}`
+    : '--'
 
   const burstSizeValue: string = initialData.shapingPolicy?.[0].initialValue
-      ? `${initialData.burst_size} ${localization.kb}`
-      : '--'
+    .value
+    ? `${initialData.burst_size} ${localization.kb}`
+    : '--'
 
   const loadBalancingValue: string = loadBalancing
-      ? (loadBalancing.value === 'balance-tcp' &&
-          localization.routeBasedIpHash) ||
+    ? (loadBalancing.value === 'balance-tcp' &&
+        localization.routeBasedIpHash) ||
       (loadBalancing.value === 'balance-slb' &&
-          localization.routeBasedSourceMacHash) ||
+        localization.routeBasedSourceMacHash) ||
       (loadBalancing.value === 'active-backup' &&
-          localization.useExplicitFailoverOrder) ||
+        localization.useExplicitFailoverOrder) ||
       '--'
-      : '--'
+    : '--'
 
   const networkFailureDetectionValue: string =
-      (linkDetect &&
-          linkDetect.value &&
-          localization[linkDetect.value.toString()]) ||
-      '--'
+    (linkDetect &&
+      linkDetect.value &&
+      localization[linkDetect.value.toString()]) ||
+    '--'
 
   const notifySwitchesValue: string =
-      notifySwitches && notifySwitches.value
-          ? notifySwitches.value === 'yes'
-              ? localization.yes
-              : localization.no
-          : '--'
+    notifySwitches && notifySwitches.value
+      ? notifySwitches.value === 'yes'
+        ? localization.yes
+        : localization.no
+      : '--'
 
   const failbackValue: string =
-      failback && failback.value
-          ? failback.value === 'yes'
-              ? localization.yes
-              : localization.no
-          : '--'
+    failback && failback.value
+      ? failback.value === 'yes'
+        ? localization.yes
+        : localization.no
+      : '--'
 
   return [
     {
@@ -227,7 +229,7 @@ export const networkViewSettingsFunc = (
 }
 
 export const networkEditSettingsTabsFunc = (
-    localization: UI_I_Localization
+  localization: UI_I_Localization
 ) => [
   {
     value: '1',
@@ -248,10 +250,10 @@ export const networkEditSettingsTabsFunc = (
 ]
 
 export const networkPopupFieldsFunc = (
-    localization: UI_I_Localization,
-    _networkType: string,
-    id: string,
-    inPortlet = false
+  localization: UI_I_Localization,
+  _networkType: string,
+  id: string,
+  inPortlet = false
 ) => {
   const formatedId = id.replaceAll('=', '_')
 
@@ -286,7 +288,64 @@ export const networkPopupFieldsFunc = (
 }
 
 export const teamingAndFailoverTemplateMakerFunc = (
-    localization: UI_I_Localization
+  localization: UI_I_Localization
+): UI_I_TeamingAndFailoverTemplate[] => [
+  {
+    key: 'loadBalancing',
+    options: [
+      {
+        value: 3,
+        text: localization.routeBasedIpHash,
+      },
+      {
+        value: 2,
+        text: localization.routeBasedSourceMacHash,
+      },
+      {
+        value: 1,
+        text: localization.useExplicitFailoverOrder,
+      },
+    ],
+  },
+  {
+    key: 'networkFailureDetection',
+    options: [
+      {
+        value: 1,
+        text: localization.linkStatusOnly,
+      },
+    ],
+  },
+  {
+    key: 'notifySwitches',
+    options: [
+      {
+        value: 2,
+        text: localization.no,
+      },
+      {
+        value: 1,
+        text: localization.yes,
+      },
+    ],
+  },
+  {
+    key: 'failback',
+    options: [
+      {
+        value: 2,
+        text: localization.no,
+      },
+      {
+        value: 1,
+        text: localization.yes,
+      },
+    ],
+  },
+]
+
+export const teamingAndFailoverNetworkTemplateMakerFunc = (
+  localization: UI_I_Localization
 ): UI_I_TeamingAndFailoverTemplate[] => [
   {
     key: 'loadBalancing',

package/components/common/diagramMain/modals/lib/config/switchModal.ts

@@ -24,7 +24,9 @@ export const switchEditSettingsTabsFunc = (localization: UI_I_Localization) => [
   },
 ]
 
-export const switchViewSettingsModalTabsFunc = (localization: UI_I_Localization) => [
+export const switchViewSettingsModalTabsFunc = (
+  localization: UI_I_Localization
+) => [
   {
     text: localization.all,
     value: 0,
@@ -43,9 +45,25 @@ export const switchViewSettingsFunc = (
   localization: UI_I_Localization,
   initialData: UI_I_ModalsInitialData
 ) => {
-  const linkDetect = initialData.nicTeamingPolicy?.find(
-    (teaming) => teaming.id === 'link_detect'
-  )?.initialValue as UI_I_OverrideValue
+  const loadBalancing =
+    initialData.nicTeamingPolicy?.find((teaming) => teaming.id === 'mode')
+      ?.value || 1
+
+  let loadBalancingValue: string
+
+  switch (loadBalancing) {
+    case 1:
+      loadBalancingValue = localization.useExplicitFailoverOrder
+      break
+    case 2:
+      loadBalancingValue = localization.routeBasedSourceMacHash
+      break
+    case 3:
+      loadBalancingValue = localization.routeBasedIpHash
+      break
+    default:
+      loadBalancingValue = '--'
+  }
 
   return [
     {
@@ -74,7 +92,7 @@ export const switchViewSettingsFunc = (
             initialData.securityPolicy?.find(
               (sec: UI_I_NetworkSummaryPortletListItem) =>
                 sec.id === 'promiscuous_mode'
-            )?.initialValue === 'yes'
+            )?.initialValue?.value === 1
               ? localization.accept
               : localization.reject,
         },
@@ -82,8 +100,9 @@ export const switchViewSettingsFunc = (
           name: localization.macAddressChanges,
           value:
             initialData.securityPolicy?.find(
-              (sec: UI_I_NetworkSummaryPortletListItem) => sec.id === 'mac_change'
-            )?.initialValue === 'yes'
+              (sec: UI_I_NetworkSummaryPortletListItem) =>
+                sec.id === 'mac_change'
+            )?.initialValue?.value === 1
               ? localization.accept
               : localization.reject,
         },
@@ -93,7 +112,7 @@ export const switchViewSettingsFunc = (
             initialData.securityPolicy?.find(
               (sec: UI_I_NetworkSummaryPortletListItem) =>
                 sec.id === 'forged_transmits'
-            )?.initialValue === 'yes'
+            )?.initialValue?.value === 1
               ? localization.accept
               : localization.reject,
         },
@@ -106,19 +125,19 @@ export const switchViewSettingsFunc = (
       rows: [
         {
           name: localization.averageBandwidth,
-          value: initialData.shapingPolicy?.[0].initialValue
+          value: initialData.shapingPolicy?.[0].initialValue.value
             ? `${initialData.average_bw} ${localization.kbitS}`
             : '--',
         },
         {
           name: localization.peakBandwidth,
-          value: initialData.shapingPolicy?.[0].initialValue
+          value: initialData.shapingPolicy?.[0].initialValue.value
             ? `${initialData.peak_bw} ${localization.kbitS}`
             : '--',
         },
         {
           name: localization.burstSize,
-          value: initialData.shapingPolicy?.[0].initialValue
+          value: initialData.shapingPolicy?.[0].initialValue.value
             ? `${initialData.burst_size} ${localization.kb}`
             : '--',
         },
@@ -131,28 +150,34 @@ export const switchViewSettingsFunc = (
       rows: [
         {
           name: localization.loadBalancing,
-          value: initialData.nicTeamingPolicy?.find(
-            (teaming) => teaming.id === 'mode'
-          )?.value,
+          value: loadBalancingValue,
         },
         {
           name: localization.networkFailureDetection,
           value:
-            linkDetect &&
-            linkDetect.value &&
-            localization[linkDetect.value.toString()],
+            initialData.nicTeamingPolicy?.find(
+              (teaming) => teaming.id === 'link_detect'
+            )?.value === 1
+              ? localization.linkStatusOnly
+              : localization.beaconProbing,
         },
         {
           name: localization.notifySwitches,
-          value: initialData.nicTeamingPolicy?.find(
-            (teaming) => teaming.id === 'notify_switches'
-          )?.value,
+          value:
+            initialData.nicTeamingPolicy?.find(
+              (teaming) => teaming.id === 'notify_switches'
+            )?.value === 1
+              ? localization.yes
+              : localization.no,
         },
         {
           name: localization.failback,
-          value: initialData.nicTeamingPolicy?.find(
-            (teaming) => teaming.id === 'failback'
-          )?.value,
+          value:
+            initialData.nicTeamingPolicy?.find(
+              (teaming) => teaming.id === 'failback'
+            )?.value === 1
+              ? localization.yes
+              : localization.no,
         },
         {
           name: localization.activeAdapters,

package/components/common/diagramMain/network/Network.vue

@@ -36,6 +36,7 @@
       :network="props.network"
       :selected-port="props.selectedPort"
       :selected-adapter="props.selectedAdapter"
+      :is-dark-mode="props.isDarkMode"
       @select-port="onSelectPort"
       @show-modal="onShowModal"
     />
@@ -59,6 +60,7 @@ const props = defineProps<{
   selectedNetwork: string
   inPortlet: boolean
   isVisibleLine: boolean
+  isDarkMode: boolean
 }>()
 
 const isNetworkConnectedSelectedAdapter = computed<boolean>(

package/components/common/diagramMain/port/Port.vue

@@ -115,7 +115,7 @@
         />
         <atoms-diagram-icon
           v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
-          name="outline-port"
+          :name="inactivePortIconName"
         />
       </div>
     </foreignObject>
@@ -142,6 +142,7 @@ const props = defineProps<{
   port: UI_I_Port & { portPosition: number }
   selectedPort: UI_I_SelectedPort
   selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -155,6 +156,10 @@ const emits = defineEmits<{
   ): void
 }>()
 
+const inactivePortIconName = computed<string>(
+  () => `outline-port${props.isDarkMode ? '-dark-mode' : ''}`
+)
+
 const portTitlePosition = computed<number>(() => props.port.portPosition - 5)
 
 const isVmKernel = computed<boolean>(

package/components/common/diagramMain/port/Ports.vue

@@ -5,6 +5,7 @@
         <common-diagram-main-port
           :network="props.network"
           :port="port"
+          :is-dark-mode="props.isDarkMode"
           :selected-port="props.selectedPort"
           :selected-adapter="props.selectedAdapter"
           @select-port="onSelectPort"
@@ -27,11 +28,16 @@ const props = defineProps<{
   network: UI_I_NetworkFullWithPositions
   selectedPort: UI_I_SelectedPort
   selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
 }>()
 
 const emits = defineEmits<{
   (event: 'select-port', networkId: string, portId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
 }>()
 
 const onSelectPort = (networkId: string, portId: string) =>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.133",
+  "version": "1.3.134",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",