bfg-common 1.3.99 → 1.3.100

package/components/atoms/wizard/Wizard.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative">
+    <div
+      class="modal-dialog modal-xl relative"
+      :style="{ height: props.height }"
+    >
       <div class="modal-content-wrapper">
         <nav class="modal-nav clr-wizard-stepnav-wrapper">
           <h1 class="clr-wizard-title">
@@ -34,7 +37,7 @@
           </div>
           <div class="modal-body" style="padding: 16px 15px 10px 10px">
             <div v-if="selectedStep.subTitle" class="content-heading">
-              <div>
+              <div v-if="selectedStep.subTitle !== 'border'">
                 <h2>{{ selectedStep.subTitle }}</h2>
               </div>
             </div>
@@ -114,6 +117,7 @@ const props = withDefaults(
     localization?: UI_I_Localization
     testId?: string
     wasCompleted: boolean
+    height: string
   }>(),
   {
     isLoading: false,
@@ -122,6 +126,7 @@ const props = withDefaults(
     isDisabledFinish: false,
     localization: () => ({}),
     testId: '',
+    height: '',
   }
 )
 

package/components/common/adapterManager/AdapterManager.vue

@@ -6,6 +6,7 @@
         'element-disabled': !props.isActive,
         'full-height': props.fullMode,
         'add-adapter-view': props.isAddModal,
+        'is-dark': props.isDarkMode,
       },
     ]"
   >
@@ -102,6 +103,7 @@
         width="864px"
         height="618px"
         :is-add-modal="props.isAddModal"
+        :is-dark-mode="props.isDarkMode"
         :show="isShowAddAdapterModal"
         :existing-adapters-for-adding="existingAdaptersForAdding"
         :selected-add-adapter-id="selectedAddAdapterId"
@@ -156,6 +158,7 @@ const props = withDefaults(
     isActive?: boolean
     fullMode?: boolean
     isAddModal?: boolean
+    isDarkMode: boolean
     adapters: UI_I_SwitchAdapters
     initialData?: UI_I_ModalsInitialData
     addedAdapters?: string[]
@@ -712,4 +715,96 @@ div.edit-pg-failover-order-with-details {
     max-height: 415px;
   }
 }
+
+div.edit-pg-failover-order-with-details.is-dark {
+  .failover-order-master {
+    .secondary-title {
+      label {
+        color: #fff;
+      }
+    }
+  }
+  .k-grid-content {
+    background-color: var(--modal-bg-color);
+  }
+  .vui-action-bar {
+    background-color: var(--pannel-bg-color);
+    color: var(--title-color);
+    padding: 8px 0 3px;
+
+    .action-link-container:not(.disabled) {
+      &:hover {
+        background-color: #29414e;
+        border: 1px solid #c7e9ff;
+      }
+    }
+
+    svg {
+      fill: #fff;
+    }
+  }
+
+  .k-grid.k-widget .k-grid-content {
+    border-left: 1px solid #485764;
+    border-right: 1px solid #485764;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+
+    tbody tr {
+      background-color: var(--modal-bg-color);
+
+      td {
+        border-bottom: 1px solid #666666;
+        border-color: #666666;
+      }
+
+      &:hover {
+        background-color: #324f61;
+        color: var(--title-color);
+
+        td {
+          border-bottom: 1px solid #ffffff;
+        }
+      }
+
+      &.k-state-selected {
+        background-color: #d8e3e9;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+
+        td span {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  .failover-order-details {
+    &.relative-container .absolute-container {
+      background-color: var(--pannel-bg-color);
+      color: var(--main-color-mode2);
+
+      &:has(.no-items-selected-container) {
+        background-color: transparent;
+      }
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+      }
+    }
+    button.active span {
+      color: #fff;
+    }
+  }
+}
+
+.select-adapter-info span {
+  color: var(--main-color-mode2);
+}
 </style>

package/components/common/adapterManager/AddAdapterModal.vue

@@ -16,12 +16,11 @@
             <common-adapter-manager
               test-id="adapter-manager"
               :is-active="true"
+              :is-dark-mode="props.isDarkMode"
               :full-mode="false"
               :is-add-modal="true"
               :adapters="props.adapters"
-              :existing-adapters-for-adding="
-                props.existingAdaptersForAdding.map((n) => n.name)
-              "
+              :existing-adapters-for-adding="props.existingAdaptersForAdding.map((n) => n.name)"
               :selected-add-adapter-id="props.selectedAddAdapterId"
               class="free-adapters"
               @select-add-adapter="onSelectAddAdapter"
@@ -46,6 +45,7 @@ import {
 const props = withDefaults(
   defineProps<{
     isAddModal: boolean
+    isDarkMode: boolean
     show: boolean
     width: string
     height: string
@@ -463,10 +463,12 @@ ul li span {
   margin: 0 7px 0 4px;
 }
 
-:deep(.free-adapters) {
+:deep(div.edit-pg-failover-order-with-details.is-dark) {
   .failover-order-master {
-    .secondary-title label {
-      color: #fff;
+    .secondary-title {
+      label {
+        color: #fff;
+      }
     }
   }
   .k-grid-content {
@@ -547,9 +549,5 @@ ul li span {
       color: #fff;
     }
   }
-
-  .select-adapter-info span {
-    color: var(--main-color-mode2);
-  }
 }
 </style>

package/components/common/adapterManager/ui/table/Adapters.vue

@@ -1,22 +1,22 @@
 <template>
-  <template v-for="adapterId in props.adapters" :key="adapterId">
-    <tr
-      :class="{
+    <template v-for="adapterId in props.adapters" :key="adapterId">
+        <tr
+                :class="{
         'k-state-selected': props.selectedAdapterId === adapterId,
       }"
-      @click="onSelectAdapter(adapterId)"
-    >
-      <td>
+                @click="onSelectAdapter(adapterId)"
+        >
+            <td>
         <span>
           <atoms-diagram-icon
-            name="adapter-icon"
-            class="adapter-icon-positioning"
+                  name="adapter-icon"
+                  class="adapter-icon-positioning"
           />
         </span>
-        <span>{{ adapterId }}</span>
-      </td>
-    </tr>
-  </template>
+                <span>{{ adapterId }}</span>
+            </td>
+        </tr>
+    </template>
 </template>
 
 <script setup lang="ts">

package/components/common/adapterManager/ui/table/Table.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="k-grid-content"
-    @click.capture="onClickEmptySpace($event)"
-  >
+  <div class="k-grid-content" @click.capture="onClickEmptySpace($event)">
     <div v-if="props.isAddModal">
       <table class="k-selectable">
         <tbody>
@@ -57,7 +54,7 @@
 import {
   UI_I_Adapter,
   UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem
+  UI_I_SwitchAdapterItem,
 } from '~/components/common/diagramMain/lib/models/interfaces'
 
 const props = withDefaults(
@@ -83,7 +80,7 @@ const props = withDefaults(
     isStandbyHeader: false,
     isUnusedHeader: false,
     removedAdapters: () => [],
-    existingAdaptersForAdding: () => []
+    existingAdaptersForAdding: () => [],
   }
 )
 
@@ -145,12 +142,7 @@ table {
   border-width: 0;
   outline: 0;
 }
-//.k-grid-content {
-//  width: auto;
-//  overflow-y: scroll;
-//  padding-right: 3px;
-//  height: 200px;
-//}
+
 .k-selectable {
   height: auto;
 
@@ -158,10 +150,4 @@ table {
     width: 150px;
   }
 }
-//.k-grid-content {
-//  width: auto;
-//  overflow-y: scroll;
-//  padding-right: 3px;
-//  height: 273px;
-//}
 </style>

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

@@ -1,11 +1,15 @@
 import { UI_E_NetworkType } from './enums'
-import { UI_T_Adapters } from '~/components/common/diagramMain/lib/models/types'
+import {
+  UI_T_Adapters,
+  UI_T_YNIOption,
+} from '~/components/common/diagramMain/lib/models/types'
 
 export interface UI_I_Port {
   id: string
   name: string
   macAddress?: string
   adapter?: string
+  isActive?: boolean
 }
 
 export interface UI_I_Adapter {
@@ -286,6 +290,7 @@ export interface UI_I_AdapterStatus {
   active: string[]
   standby: string[]
   unused: string[]
+  connected: string[]
 }
 
 export interface UI_I_SwitchPropertiesFields {
@@ -456,9 +461,9 @@ export interface UI_I_ModalTabs {
 }
 
 export interface API_UI_I_Security {
-  forged_transmits: string
-  mac_change: string
-  promiscuous_mode: string
+  forged_transmits: UI_T_YNIOption
+  mac_change: UI_T_YNIOption
+  promiscuous_mode: UI_T_YNIOption
 }
 export interface API_UI_I_Shaping {
   enabled: boolean
@@ -468,31 +473,51 @@ export interface API_UI_I_Shaping {
   peak_bw: number
 }
 export interface API_UI_I_State {
-  code: number
-  icon: string
-  text: string
-}
-export interface API_UI_I_Status {
-  code: number
-  text: string
+  state: 0 | 1 | 2 | 3
+  // enum State {
+  //   UNKNOWN = 0;
+  //   OK = 1;
+  //   WARNING = 2;
+  //   ERROR = 3;
+  // }
+  errors?: string[]
 }
+
 export interface API_UI_I_Teaming {
-  failback: string
-  link_detect: string
-  mode: string
-  notify_switches: string
+  mode: 0 | 1 | 2 | 3
+  // enum Mode {
+  //   TEAM_MODE_INHERIT = 0;
+  //   TEAM_MODE_ACTIVE_BACKUP = 1;
+  //   TEAM_MODE_SLB = 2;
+  //   TEAM_MODE_TCP = 3;
+  // }
+  link_detection_mode: 0 | 1 | 2
+  // enum LinkDetectionMode {
+  //   TEAM_LINK_DETECT_INHERIT = 0;
+  //   TEAM_LINK_DETECT_CARIER = 1;
+  //   TEAM_LINK_DETECT_BEAKON = 2;
+  // }
+  notify_switches: UI_T_YNIOption
+  failback: UI_T_YNIOption
+}
+
+interface API_UI_I_ListIndex {
+  idx: number
+  count: number
 }
+
 export interface API_UI_I_SwitchItem {
+  id: string
+  state: API_UI_I_State
+  index: API_UI_I_ListIndex
   mtu: number
-  name: string
-  networks: string[] | null
-  nics: UI_I_AdapterStatus
-  num_ports: string
   security: API_UI_I_Security
   shaping: API_UI_I_Shaping
-  state: API_UI_I_State
-  status: API_UI_I_Status
   teaming: API_UI_I_Teaming
+  nics: UI_I_AdapterStatus
+  networks: string[] | null
+
+  num_ports: string // TODO MAMMA MIA, WHERE IS IIIIIT?
 }
 export interface API_UI_I_SwitchItems {
   items: API_UI_I_SwitchItem[]

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

@@ -6,3 +6,9 @@ export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
 export type UI_T_PortPropertiesFieldName = 'mtu'
 
 export type UI_T_Adapters = UI_I_Adapter & { adapterPosition: number }
+export type UI_T_YNIOption = 0 | 1 | 2
+// UI_T_YNIOption {
+//   INHERIT = 0
+//   YES = 1
+//   NO = 2
+// }

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

@@ -67,7 +67,7 @@
     />
 
     <foreignObject
-      v-if="isVCenter || isVMPortsGroup"
+      v-if="(isVCenter || isVMPortsGroup) && props.port.isActive"
       data-title="vm-play-icon"
       width="18"
       height="18"
@@ -108,10 +108,15 @@
     >
       <div>
         <atoms-diagram-icon
-          v-if="isVMPortsGroup || isVmKernel || isVCenter"
+          v-if="
+            isVmKernel || ((isVCenter || isVMPortsGroup) && props.port.isActive)
+          "
           name="fill-port"
         />
-        <!--        <atoms-diagram-icon v-if="isVMPortsGroup" name="outline-port" />-->
+        <atoms-diagram-icon
+          v-if="isVCenter || (isVMPortsGroup && !props.port.isActive)"
+          name="outline-port"
+        />
       </div>
     </foreignObject>
   </g>

package/components/common/lib/config/states.ts

@@ -80,6 +80,19 @@ export const networkIconByState = [
   'network-error',
 ]
 
+export const switchLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const switchIconByState = [
+  'switch-error',
+  'switch',
+  'switch-warning',
+  'switch-error',
+]
 
 export const resourcePoolLocalizationByState = [
   'unknown',