bfg-common 1.5.266 → 1.5.268

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/assets/img/icons/icons-sprite-dark-3.svg +227 -227
  2. package/assets/img/icons/icons-sprite-dark-5.svg +488 -488
  3. package/assets/img/icons/icons-sprite-light-3.svg +227 -227
  4. package/assets/img/icons/icons-sprite-light-5.svg +488 -488
  5. package/components/atoms/stack/StackBlock.vue +185 -185
  6. package/components/atoms/table/info/lib/models/interfaces.ts +10 -10
  7. package/components/common/browse/blocks/lib/models/types.ts +1 -1
  8. package/components/common/browse/lib/models/interfaces.ts +5 -5
  9. package/components/common/diagramMain/adapter/AdapterItems.vue +61 -61
  10. package/components/common/diagramMain/lib/config/initial.ts +50 -50
  11. package/components/common/diagramMain/lib/models/types.ts +21 -21
  12. package/components/common/diagramMain/lib/utils/utils.ts +331 -331
  13. package/components/common/diagramMain/modals/editSettings/ConfirmTeamingSettingsModal.vue +40 -40
  14. package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue +214 -214
  15. package/components/common/diagramMain/modals/editSettings/tabs/Security.vue +189 -189
  16. package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue +163 -163
  17. package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue +175 -175
  18. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +346 -346
  19. package/components/common/diagramMain/modals/lib/config/initial.ts +180 -180
  20. package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts +90 -90
  21. package/components/common/diagramMain/modals/lib/mappers/mappers.ts +87 -87
  22. package/components/common/diagramMain/modals/lib/utils/index.ts +24 -24
  23. package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts +114 -114
  24. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue +169 -169
  25. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/SelectVmkernelAdapter.vue +159 -159
  26. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts +14 -14
  27. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts +137 -137
  28. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts +52 -52
  29. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts +19 -19
  30. package/components/common/diagramMain/port/Ports.vue +47 -47
  31. package/package.json +2 -2
@@ -1,185 +1,185 @@
1
- <template>
2
- <div
3
- :class="[
4
- 'stack-block',
5
- open ? 'stack-block-expanded' : 'stack-block-expandable',
6
- { 'not-children': !props.hasChildren },
7
- ]"
8
- >
9
- <div
10
- :id="`${props.testId}-toggle`"
11
- :data-id="`${props.testId}-toggle`"
12
- class="stack-block-label"
13
- @click="onToggle"
14
- >
15
- <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
16
-
17
- <div class="stack-view-key">
18
- <slot name="stackBlockKey" />
19
- </div>
20
- <div class="stack-block-content">
21
- <slot name="stackBlockContent" />
22
- </div>
23
-
24
- <span
25
- v-if="props.removable && props.isRollBack"
26
- :data-id="`${props.testId}-roll-back`"
27
- class="icon-roll-back"
28
- @mousedown="onRollBack"
29
- @click.stop
30
- />
31
- <atoms-the-icon
32
- v-else-if="props.removable"
33
- :data-id="`${props.testId}-remove`"
34
- class="remove-icon"
35
- name="close-circle"
36
- @mousedown="onRemove"
37
- @click.stop
38
- />
39
- <span v-else class="empty-icon"></span>
40
- </div>
41
-
42
- <div v-show="open" class="stack-children">
43
- <div style="height: auto">
44
- <slot name="stackChildren" />
45
- </div>
46
- </div>
47
- </div>
48
- </template>
49
-
50
- <script setup lang="ts">
51
- const props = withDefaults(
52
- defineProps<{
53
- hasChildren: boolean
54
- removable?: boolean
55
- testId?: string
56
- openByDefault?: boolean
57
- isRollBack?: boolean
58
- }>(),
59
- { testId: 'ui-stack-block', openByDefault: false }
60
- )
61
- const emits = defineEmits<{
62
- (event: 'toggle', value: boolean): void
63
- (event: 'remove'): void
64
- (event: 'roll-back'): void
65
- }>()
66
-
67
- const open = ref<boolean>(props.openByDefault || false)
68
- const onToggle = (): void => {
69
- if (!props.hasChildren) return
70
- setTimeout(() => {
71
- open.value = !open.value
72
- emits('toggle', open.value)
73
- }, 0)
74
- }
75
-
76
- const onRemove = (): void => {
77
- emits('remove')
78
- }
79
- const onRollBack = (): void => {
80
- emits('roll-back')
81
- }
82
- </script>
83
-
84
- <style scoped lang="scss">
85
- .stack-block {
86
- cursor: pointer;
87
- background-color: var(--block-view-bg-color);
88
- border-color: var(--global-border-color);
89
-
90
- &.stack-block-expandable:hover {
91
- border-bottom: 1px solid #666;
92
-
93
- .stack-block-label {
94
- background-color: var(--block-view-bg-color);
95
- border-color: var(--global-border-color);
96
- }
97
- }
98
-
99
- .stack-block-label {
100
- padding: 6px 12px;
101
- flex: 1 1 auto;
102
- max-width: unset;
103
- display: flex;
104
- background-color: var(--block-view-bg-color);
105
- border-color: var(--global-border-color);
106
-
107
- &:hover {
108
- .remove-icon {
109
- opacity: 1;
110
- }
111
- }
112
-
113
- &::before {
114
- display: none;
115
- }
116
-
117
- .angle-icon {
118
- width: 14px;
119
- height: 14px;
120
- margin-right: 4px;
121
- transform: rotate(90deg);
122
- align-self: center;
123
- }
124
-
125
- .remove-icon {
126
- width: 18px;
127
- height: 18px;
128
- opacity: 0;
129
- cursor: pointer;
130
- }
131
-
132
- .stack-view-key {
133
- flex: 0 0 40%;
134
- max-width: 40%;
135
- }
136
-
137
- .stack-block-content {
138
- padding: 0;
139
- flex: 1 1 auto;
140
- width: 60%;
141
- background-color: transparent;
142
- word-break: break-all;
143
- }
144
-
145
- .empty-icon {
146
- width: 18px;
147
- height: 18px;
148
- }
149
- }
150
-
151
- &.stack-block-expanded {
152
- .stack-block-label {
153
- color: #ffffff;
154
- background-color: #29414e;
155
-
156
- .angle-icon {
157
- fill: #ffffff;
158
- transform: rotate(180deg);
159
- }
160
-
161
- .remove-icon {
162
- fill: #ffffff;
163
- }
164
- }
165
- }
166
-
167
- &.not-children {
168
- cursor: default;
169
- .stack-block-label {
170
- background-color: transparent;
171
- color: #333333;
172
-
173
- &:hover {
174
- cursor: default;
175
- background-color: transparent;
176
- border-bottom: none;
177
- }
178
-
179
- .angle-icon {
180
- opacity: 0;
181
- }
182
- }
183
- }
184
- }
185
- </style>
1
+ <template>
2
+ <div
3
+ :class="[
4
+ 'stack-block',
5
+ open ? 'stack-block-expanded' : 'stack-block-expandable',
6
+ { 'not-children': !props.hasChildren },
7
+ ]"
8
+ >
9
+ <div
10
+ :id="`${props.testId}-toggle`"
11
+ :data-id="`${props.testId}-toggle`"
12
+ class="stack-block-label"
13
+ @click="onToggle"
14
+ >
15
+ <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
16
+
17
+ <div class="stack-view-key">
18
+ <slot name="stackBlockKey" />
19
+ </div>
20
+ <div class="stack-block-content">
21
+ <slot name="stackBlockContent" />
22
+ </div>
23
+
24
+ <span
25
+ v-if="props.removable && props.isRollBack"
26
+ :data-id="`${props.testId}-roll-back`"
27
+ class="icon-roll-back"
28
+ @mousedown="onRollBack"
29
+ @click.stop
30
+ />
31
+ <atoms-the-icon
32
+ v-else-if="props.removable"
33
+ :data-id="`${props.testId}-remove`"
34
+ class="remove-icon"
35
+ name="close-circle"
36
+ @mousedown="onRemove"
37
+ @click.stop
38
+ />
39
+ <span v-else class="empty-icon"></span>
40
+ </div>
41
+
42
+ <div v-show="open" class="stack-children">
43
+ <div style="height: auto">
44
+ <slot name="stackChildren" />
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </template>
49
+
50
+ <script setup lang="ts">
51
+ const props = withDefaults(
52
+ defineProps<{
53
+ hasChildren: boolean
54
+ removable?: boolean
55
+ testId?: string
56
+ openByDefault?: boolean
57
+ isRollBack?: boolean
58
+ }>(),
59
+ { testId: 'ui-stack-block', openByDefault: false }
60
+ )
61
+ const emits = defineEmits<{
62
+ (event: 'toggle', value: boolean): void
63
+ (event: 'remove'): void
64
+ (event: 'roll-back'): void
65
+ }>()
66
+
67
+ const open = ref<boolean>(props.openByDefault || false)
68
+ const onToggle = (): void => {
69
+ if (!props.hasChildren) return
70
+ setTimeout(() => {
71
+ open.value = !open.value
72
+ emits('toggle', open.value)
73
+ }, 0)
74
+ }
75
+
76
+ const onRemove = (): void => {
77
+ emits('remove')
78
+ }
79
+ const onRollBack = (): void => {
80
+ emits('roll-back')
81
+ }
82
+ </script>
83
+
84
+ <style scoped lang="scss">
85
+ .stack-block {
86
+ cursor: pointer;
87
+ background-color: var(--block-view-bg-color);
88
+ border-color: var(--global-border-color);
89
+
90
+ &.stack-block-expandable:hover {
91
+ border-bottom: 1px solid #666;
92
+
93
+ .stack-block-label {
94
+ background-color: var(--block-view-bg-color);
95
+ border-color: var(--global-border-color);
96
+ }
97
+ }
98
+
99
+ .stack-block-label {
100
+ padding: 6px 12px;
101
+ flex: 1 1 auto;
102
+ max-width: unset;
103
+ display: flex;
104
+ background-color: var(--block-view-bg-color);
105
+ border-color: var(--global-border-color);
106
+
107
+ &:hover {
108
+ .remove-icon {
109
+ opacity: 1;
110
+ }
111
+ }
112
+
113
+ &::before {
114
+ display: none;
115
+ }
116
+
117
+ .angle-icon {
118
+ width: 14px;
119
+ height: 14px;
120
+ margin-right: 4px;
121
+ transform: rotate(90deg);
122
+ align-self: center;
123
+ }
124
+
125
+ .remove-icon {
126
+ width: 18px;
127
+ height: 18px;
128
+ opacity: 0;
129
+ cursor: pointer;
130
+ }
131
+
132
+ .stack-view-key {
133
+ flex: 0 0 40%;
134
+ max-width: 40%;
135
+ }
136
+
137
+ .stack-block-content {
138
+ padding: 0;
139
+ flex: 1 1 auto;
140
+ width: 60%;
141
+ background-color: transparent;
142
+ word-break: break-all;
143
+ }
144
+
145
+ .empty-icon {
146
+ width: 18px;
147
+ height: 18px;
148
+ }
149
+ }
150
+
151
+ &.stack-block-expanded {
152
+ .stack-block-label {
153
+ color: #ffffff;
154
+ background-color: #29414e;
155
+
156
+ .angle-icon {
157
+ fill: #ffffff;
158
+ transform: rotate(180deg);
159
+ }
160
+
161
+ .remove-icon {
162
+ fill: #ffffff;
163
+ }
164
+ }
165
+ }
166
+
167
+ &.not-children {
168
+ cursor: default;
169
+ .stack-block-label {
170
+ background-color: transparent;
171
+ color: #333333;
172
+
173
+ &:hover {
174
+ cursor: default;
175
+ background-color: transparent;
176
+ border-bottom: none;
177
+ }
178
+
179
+ .angle-icon {
180
+ opacity: 0;
181
+ }
182
+ }
183
+ }
184
+ }
185
+ </style>
@@ -1,10 +1,10 @@
1
- export interface UI_I_TableInfoItem {
2
- label: string
3
- value: any
4
- isProperty?: boolean
5
- key?: string
6
- localization?: string
7
- localizationTemplate?: string
8
- isCapital?: boolean
9
- iconName?: string
10
- }
1
+ export interface UI_I_TableInfoItem {
2
+ label: string
3
+ value: any
4
+ isProperty?: boolean
5
+ key?: string
6
+ localization?: string
7
+ localizationTemplate?: string
8
+ isCapital?: boolean
9
+ iconName?: string
10
+ }
@@ -1 +1 @@
1
- export type UI_T_BlocksWidth = [number, number, number]
1
+ export type UI_T_BlocksWidth = [number, number, number]
@@ -1,5 +1,5 @@
1
- export interface UI_I_FileInfo {
2
- type: string
3
- title: string
4
- value: string | number
5
- }
1
+ export interface UI_I_FileInfo {
2
+ type: string
3
+ title: string
4
+ value: string | number
5
+ }
@@ -1,61 +1,61 @@
1
- <template>
2
- <g data-title="adapter-items-group">
3
- <template v-if="props.adaptersWithPositions.toggle">
4
- <template
5
- v-for="(adapter, key) in props.adaptersWithPositions.adapters"
6
- :key="adapter.id"
7
- >
8
- <common-diagram-main-adapter-item
9
- :adapter="adapter"
10
- :selected-port="props.selectedPort"
11
- :selected-adapter="props.selectedAdapter"
12
- :networks-count="props.networksCount"
13
- :is-dark-mode="props.isDarkMode"
14
- :networks-with-positions="props.networksWithPositions"
15
- @select-adapter="onSelectAdapter"
16
- @show-modal="onShowModal"
17
- />
18
- </template>
19
- </template>
20
- </g>
21
- </template>
22
-
23
- <script setup lang="ts">
24
- import {
25
- UI_I_AdaptersWithPositions,
26
- UI_I_ModalsInitialData,
27
- UI_I_SelectedAdapter,
28
- UI_I_SelectedPort,
29
- UI_I_NetworksWithPositions,
30
- } from '~/components/common/diagramMain/lib/models/interfaces'
31
-
32
- const props = defineProps<{
33
- adaptersWithPositions: UI_I_AdaptersWithPositions
34
- networksWithPositions: UI_I_NetworksWithPositions[]
35
- selectedPort: UI_I_SelectedPort
36
- selectedAdapter: UI_I_SelectedAdapter
37
- networksCount: number
38
- isDarkMode: boolean
39
- }>()
40
-
41
- const emits = defineEmits<{
42
- (event: 'select-adapter', adapterId: string): void
43
- (
44
- event: 'show-modal',
45
- value: string,
46
- properties?: UI_I_ModalsInitialData
47
- ): void
48
- }>()
49
-
50
- const onSelectAdapter = (adapterId: string): void => {
51
- emits('select-adapter', adapterId)
52
- }
53
- const onShowModal = (
54
- value: string,
55
- properties?: UI_I_ModalsInitialData
56
- ): void => {
57
- emits('show-modal', value, properties)
58
- }
59
- </script>
60
-
61
- <style scoped lang="scss"></style>
1
+ <template>
2
+ <g data-title="adapter-items-group">
3
+ <template v-if="props.adaptersWithPositions.toggle">
4
+ <template
5
+ v-for="(adapter, key) in props.adaptersWithPositions.adapters"
6
+ :key="adapter.id"
7
+ >
8
+ <common-diagram-main-adapter-item
9
+ :adapter="adapter"
10
+ :selected-port="props.selectedPort"
11
+ :selected-adapter="props.selectedAdapter"
12
+ :networks-count="props.networksCount"
13
+ :is-dark-mode="props.isDarkMode"
14
+ :networks-with-positions="props.networksWithPositions"
15
+ @select-adapter="onSelectAdapter"
16
+ @show-modal="onShowModal"
17
+ />
18
+ </template>
19
+ </template>
20
+ </g>
21
+ </template>
22
+
23
+ <script setup lang="ts">
24
+ import {
25
+ UI_I_AdaptersWithPositions,
26
+ UI_I_ModalsInitialData,
27
+ UI_I_SelectedAdapter,
28
+ UI_I_SelectedPort,
29
+ UI_I_NetworksWithPositions,
30
+ } from '~/components/common/diagramMain/lib/models/interfaces'
31
+
32
+ const props = defineProps<{
33
+ adaptersWithPositions: UI_I_AdaptersWithPositions
34
+ networksWithPositions: UI_I_NetworksWithPositions[]
35
+ selectedPort: UI_I_SelectedPort
36
+ selectedAdapter: UI_I_SelectedAdapter
37
+ networksCount: number
38
+ isDarkMode: boolean
39
+ }>()
40
+
41
+ const emits = defineEmits<{
42
+ (event: 'select-adapter', adapterId: string): void
43
+ (
44
+ event: 'show-modal',
45
+ value: string,
46
+ properties?: UI_I_ModalsInitialData
47
+ ): void
48
+ }>()
49
+
50
+ const onSelectAdapter = (adapterId: string): void => {
51
+ emits('select-adapter', adapterId)
52
+ }
53
+ const onShowModal = (
54
+ value: string,
55
+ properties?: UI_I_ModalsInitialData
56
+ ): void => {
57
+ emits('show-modal', value, properties)
58
+ }
59
+ </script>
60
+
61
+ <style scoped lang="scss"></style>
@@ -1,50 +1,50 @@
1
- import type {
2
- UI_I_AdapterStatus,
3
- UI_I_MainRectHeights,
4
- UI_I_SelectedAdapter,
5
- UI_I_SelectedPort,
6
- UI_I_SwitchLine,
7
- UI_I_NetworkPositionsConst,
8
- } from '~/components/common/diagramMain/lib/models/interfaces'
9
-
10
- export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
11
- active: [],
12
- standby: [],
13
- unused: [],
14
- }
15
-
16
- export const mainRectHeightsInitial: UI_I_MainRectHeights = {
17
- networksHeight: 0,
18
- adaptersHeight: 0,
19
- }
20
-
21
- export const switchLineInitial: UI_I_SwitchLine = {
22
- y1: 0,
23
- y2: 0,
24
- ay: 0,
25
- }
26
-
27
- export const selectedPortInitial: UI_I_SelectedPort = {
28
- networkId: '-1',
29
- portId: '-1',
30
- activeAdapters: [],
31
- }
32
-
33
- export const selectedAdapterInitial: UI_I_SelectedAdapter = {
34
- adapterId: '-1',
35
- connectedPorts: [],
36
- }
37
-
38
- export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
39
- y1: 0,
40
- y2: 0,
41
- }
42
-
43
- export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
44
- EMPTY_PORTS_PADDING_BOTTOM: 7.5,
45
- FROM_VLAN_ID_TO_GROUP_NAME: 22,
46
- VMS_AND_PORTS_HEIGHT: 22,
47
- V_CENTER_HEIGHT: 32,
48
- BETWEEN_VMS_AND_PORTS: 7.5,
49
- BETWEEN_V_CENTERS: 12.5,
50
- } as const
1
+ import type {
2
+ UI_I_AdapterStatus,
3
+ UI_I_MainRectHeights,
4
+ UI_I_SelectedAdapter,
5
+ UI_I_SelectedPort,
6
+ UI_I_SwitchLine,
7
+ UI_I_NetworkPositionsConst,
8
+ } from '~/components/common/diagramMain/lib/models/interfaces'
9
+
10
+ export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
11
+ active: [],
12
+ standby: [],
13
+ unused: [],
14
+ }
15
+
16
+ export const mainRectHeightsInitial: UI_I_MainRectHeights = {
17
+ networksHeight: 0,
18
+ adaptersHeight: 0,
19
+ }
20
+
21
+ export const switchLineInitial: UI_I_SwitchLine = {
22
+ y1: 0,
23
+ y2: 0,
24
+ ay: 0,
25
+ }
26
+
27
+ export const selectedPortInitial: UI_I_SelectedPort = {
28
+ networkId: '-1',
29
+ portId: '-1',
30
+ activeAdapters: [],
31
+ }
32
+
33
+ export const selectedAdapterInitial: UI_I_SelectedAdapter = {
34
+ adapterId: '-1',
35
+ connectedPorts: [],
36
+ }
37
+
38
+ export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
39
+ y1: 0,
40
+ y2: 0,
41
+ }
42
+
43
+ export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
44
+ EMPTY_PORTS_PADDING_BOTTOM: 7.5,
45
+ FROM_VLAN_ID_TO_GROUP_NAME: 22,
46
+ VMS_AND_PORTS_HEIGHT: 22,
47
+ V_CENTER_HEIGHT: 32,
48
+ BETWEEN_VMS_AND_PORTS: 7.5,
49
+ BETWEEN_V_CENTERS: 12.5,
50
+ } as const
@@ -1,21 +1,21 @@
1
- import type {
2
- UI_I_Adapter,
3
- UI_I_AdapterWithError,
4
- } from '~/components/common/diagramMain/lib/models/interfaces'
5
-
6
- export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
7
- export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
8
- export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
9
- export type UI_T_PortPropertiesFieldName = 'mtu'
10
-
11
- export type UI_T_LoadBalancingMode =
12
- | 'inherit'
13
- | 'active-backup'
14
- | 'balance-slb'
15
- | 'balance-tcp'
16
- export type UI_T_IYN = 'inherit' | 'yes' | 'no'
17
- export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
18
-
19
- export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
20
- adapterPosition: number
21
- }
1
+ import type {
2
+ UI_I_Adapter,
3
+ UI_I_AdapterWithError,
4
+ } from '~/components/common/diagramMain/lib/models/interfaces'
5
+
6
+ export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
7
+ export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
8
+ export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
9
+ export type UI_T_PortPropertiesFieldName = 'mtu'
10
+
11
+ export type UI_T_LoadBalancingMode =
12
+ | 'inherit'
13
+ | 'active-backup'
14
+ | 'balance-slb'
15
+ | 'balance-tcp'
16
+ export type UI_T_IYN = 'inherit' | 'yes' | 'no'
17
+ export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
18
+
19
+ export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
20
+ adapterPosition: number
21
+ }