bfg-common 1.2.117 → 1.2.119
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.
- package/components/atoms/modal/Modal.vue +0 -6
- package/components/common/adapterManager/AddAdapterModal.vue +151 -60
- package/components/common/addNetworking/AddNetworking.vue +123 -0
- package/components/common/addNetworking/steps/SelectedTargetDevice.vue +0 -1
- package/components/common/diagramMain/DiagramMain.vue +1 -0
- package/components/common/vm/actions/utils.ts +8 -21
- package/package.json +1 -1
|
@@ -1,67 +1,68 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<atoms-modal
|
|
4
|
+
test-id="add-adapter"
|
|
5
|
+
:width="props.width"
|
|
6
|
+
:height="props.height"
|
|
7
|
+
:show="props.show"
|
|
8
|
+
:title="localization.addPhysicalAdaptersToSwitch"
|
|
9
|
+
class="diagram-action__edit"
|
|
10
|
+
@hide="onHideViewSettingsModal"
|
|
11
|
+
@submit="onAddSelectedAdapters"
|
|
12
|
+
>
|
|
13
|
+
<template #modalBody>
|
|
14
|
+
<div class="wizard-content__container">
|
|
15
|
+
<div class="wizard-content">
|
|
16
|
+
<common-adapter-manager
|
|
17
|
+
test-id="adapter-manager"
|
|
18
|
+
:is-active="true"
|
|
19
|
+
:full-mode="false"
|
|
20
|
+
:is-add-modal="true"
|
|
21
|
+
:adapters="props.adapters"
|
|
22
|
+
:existing-adapters-for-adding="
|
|
23
23
|
props.existingAdaptersForAdding.map((n) => n.name)
|
|
24
24
|
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</
|
|
25
|
+
:selected-add-adapter-id="props.selectedAddAdapterId"
|
|
26
|
+
class="free-adapters"
|
|
27
|
+
@select-add-adapter="onSelectAddAdapter"
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
<template #modalFooter></template>
|
|
33
|
+
</atoms-modal>
|
|
34
|
+
</div>
|
|
34
35
|
</template>
|
|
35
36
|
|
|
36
37
|
<script setup lang="ts">
|
|
37
38
|
import { UI_I_Localization } from '~/models/interfaces'
|
|
38
39
|
import {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
UI_I_Adapter,
|
|
41
|
+
UI_I_SwitchAdapterItem,
|
|
42
|
+
UI_I_SwitchAdapters,
|
|
42
43
|
} from '~/components/common/diagramMain/models/interfaces'
|
|
43
44
|
|
|
44
45
|
// Props from up
|
|
45
46
|
const props = withDefaults(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
47
|
+
defineProps<{
|
|
48
|
+
isAddModal: boolean
|
|
49
|
+
show: boolean
|
|
50
|
+
width: string
|
|
51
|
+
height: string
|
|
52
|
+
modalName: string
|
|
53
|
+
viewName: string
|
|
54
|
+
adapters: UI_I_SwitchAdapters
|
|
55
|
+
existingAdaptersForAdding: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
|
|
56
|
+
selectedAddAdapterId: string
|
|
57
|
+
}>(),
|
|
58
|
+
{
|
|
59
|
+
existingAdaptersForAdding: () => [],
|
|
60
|
+
adapters: () => ({
|
|
61
|
+
totalItems: 0,
|
|
62
|
+
totalPages: 0,
|
|
63
|
+
items: [],
|
|
64
|
+
}),
|
|
65
|
+
}
|
|
65
66
|
)
|
|
66
67
|
|
|
67
68
|
// UI_I_Localization
|
|
@@ -69,22 +70,22 @@ const localization = computed<UI_I_Localization>(() => useLocal())
|
|
|
69
70
|
|
|
70
71
|
// Modal and add adapter to top
|
|
71
72
|
const emits = defineEmits<{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
(event: 'hide'): void
|
|
74
|
+
(event: 'add-adapter', adapterId: string): void
|
|
75
|
+
(event: 'select-add-adapter', adapterId: string): void
|
|
75
76
|
}>()
|
|
76
77
|
|
|
77
78
|
// Selected adapter for adding
|
|
78
79
|
const onSelectAddAdapter = (adapterId: string): void => {
|
|
79
|
-
|
|
80
|
+
emits('select-add-adapter', adapterId)
|
|
80
81
|
}
|
|
81
82
|
const onHideViewSettingsModal = (): void => {
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
emits('hide')
|
|
84
|
+
emits('select-add-adapter', '')
|
|
84
85
|
}
|
|
85
86
|
const onAddSelectedAdapters = (): void => {
|
|
86
|
-
|
|
87
|
-
|
|
87
|
+
props.selectedAddAdapterId && emits('add-adapter', props.selectedAddAdapterId)
|
|
88
|
+
emits('select-add-adapter', '')
|
|
88
89
|
}
|
|
89
90
|
</script>
|
|
90
91
|
|
|
@@ -461,4 +462,94 @@ ul li span {
|
|
|
461
462
|
border-left: none;
|
|
462
463
|
margin: 0 7px 0 4px;
|
|
463
464
|
}
|
|
465
|
+
|
|
466
|
+
:deep(.free-adapters) {
|
|
467
|
+
.failover-order-master {
|
|
468
|
+
.secondary-title label {
|
|
469
|
+
color: #fff;
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
.k-grid-content {
|
|
473
|
+
background-color: var(--modal-bg-color);
|
|
474
|
+
}
|
|
475
|
+
.vui-action-bar {
|
|
476
|
+
background-color: var(--pannel-bg-color);
|
|
477
|
+
color: var(--title-color);
|
|
478
|
+
padding: 8px 0 3px;
|
|
479
|
+
|
|
480
|
+
.action-link-container:not(.disabled) {
|
|
481
|
+
&:hover {
|
|
482
|
+
background-color: #29414e;
|
|
483
|
+
border: 1px solid #c7e9ff;
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
svg {
|
|
488
|
+
fill: #fff;
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.k-grid.k-widget .k-grid-content {
|
|
493
|
+
border-left: 1px solid #485764;
|
|
494
|
+
border-right: 1px solid #485764;
|
|
495
|
+
border-top: 1px solid #ddd;
|
|
496
|
+
border-bottom: 1px solid #ddd;
|
|
497
|
+
|
|
498
|
+
tbody tr {
|
|
499
|
+
background-color: var(--modal-bg-color);
|
|
500
|
+
|
|
501
|
+
td {
|
|
502
|
+
border-bottom: 1px solid #666666;
|
|
503
|
+
border-color: #666666;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
&:hover {
|
|
507
|
+
background-color: #324f61;
|
|
508
|
+
color: var(--title-color);
|
|
509
|
+
|
|
510
|
+
td {
|
|
511
|
+
border-bottom: 1px solid #ffffff;
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
&.k-state-selected {
|
|
516
|
+
background-color: #d8e3e9;
|
|
517
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
|
518
|
+
|
|
519
|
+
td span {
|
|
520
|
+
color: #000;
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.failover-order-details {
|
|
527
|
+
&.relative-container .absolute-container {
|
|
528
|
+
background-color: var(--pannel-bg-color);
|
|
529
|
+
color: var(--main-color-mode2);
|
|
530
|
+
|
|
531
|
+
&:has(.no-items-selected-container) {
|
|
532
|
+
background-color: transparent;
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
td span {
|
|
537
|
+
color: var(--main-color-mode2);
|
|
538
|
+
}
|
|
539
|
+
button span {
|
|
540
|
+
color: var(--main-color-mode2);
|
|
541
|
+
|
|
542
|
+
&:hover:not(.disabled) {
|
|
543
|
+
background-color: transparent;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
button.active span {
|
|
547
|
+
color: #fff;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.select-adapter-info span {
|
|
552
|
+
color: var(--main-color-mode2);
|
|
553
|
+
}
|
|
554
|
+
}
|
|
464
555
|
</style>
|
|
@@ -8,6 +8,12 @@
|
|
|
8
8
|
:title="title"
|
|
9
9
|
:is-show-loader="isShowLoader"
|
|
10
10
|
:second-title="secondTitle"
|
|
11
|
+
:class="[
|
|
12
|
+
'add-networking-wizard',
|
|
13
|
+
{
|
|
14
|
+
'is-dark': props.isDarkMode,
|
|
15
|
+
},
|
|
16
|
+
]"
|
|
11
17
|
@select-step="onSelectStep"
|
|
12
18
|
@hide="onHideAddNetworkingModal"
|
|
13
19
|
@next-step="onNextStep"
|
|
@@ -179,6 +185,7 @@ const props = withDefaults(
|
|
|
179
185
|
freeAdapters: UI_I_Adapter[]
|
|
180
186
|
adapters: UI_I_SwitchAdapters
|
|
181
187
|
project?: UI_T_Project
|
|
188
|
+
isDarkMode: boolean
|
|
182
189
|
}>(),
|
|
183
190
|
{
|
|
184
191
|
isNetworkInvalid: () => isNetworkInvalidInitial,
|
|
@@ -997,4 +1004,120 @@ const onHideAddNetworkingModal = (): void => {
|
|
|
997
1004
|
font-size: 15px;
|
|
998
1005
|
}
|
|
999
1006
|
}
|
|
1007
|
+
|
|
1008
|
+
.add-networking-wizard.is-dark {
|
|
1009
|
+
:deep(.wizard-content-container.add-networking-step) {
|
|
1010
|
+
.ready-complete-container {
|
|
1011
|
+
background-color: var(--pannel-bg-color);
|
|
1012
|
+
margin-top: 12px;
|
|
1013
|
+
|
|
1014
|
+
span {
|
|
1015
|
+
color: var(--description-color);
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.add-networking-radio-button-description {
|
|
1020
|
+
color: var(--description-color);
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
.property-label-group {
|
|
1024
|
+
color: var(--main-color-mode2);
|
|
1025
|
+
}
|
|
1026
|
+
.flex-property-label-group {
|
|
1027
|
+
color: var(--main-color-mode2);
|
|
1028
|
+
}
|
|
1029
|
+
.flex-property-value-group {
|
|
1030
|
+
select {
|
|
1031
|
+
color: #fff;
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
.failover-order-master {
|
|
1035
|
+
.secondary-title label {
|
|
1036
|
+
color: #fff;
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
.k-grid-content {
|
|
1040
|
+
background-color: var(--modal-bg-color);
|
|
1041
|
+
}
|
|
1042
|
+
.vui-action-bar {
|
|
1043
|
+
background-color: var(--pannel-bg-color);
|
|
1044
|
+
color: var(--title-color);
|
|
1045
|
+
padding: 8px 0 3px;
|
|
1046
|
+
|
|
1047
|
+
.action-link-container:not(.disabled) {
|
|
1048
|
+
&:hover {
|
|
1049
|
+
background-color: #29414e;
|
|
1050
|
+
border: 1px solid #c7e9ff;
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
svg {
|
|
1055
|
+
fill: #fff;
|
|
1056
|
+
}
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.k-grid.k-widget .k-grid-content {
|
|
1060
|
+
border-left: 1px solid #485764;
|
|
1061
|
+
border-right: 1px solid #485764;
|
|
1062
|
+
border-top: 1px solid #ddd;
|
|
1063
|
+
border-bottom: 1px solid #ddd;
|
|
1064
|
+
|
|
1065
|
+
tbody tr {
|
|
1066
|
+
background-color: var(--modal-bg-color);
|
|
1067
|
+
|
|
1068
|
+
td {
|
|
1069
|
+
border-bottom: 1px solid #666666;
|
|
1070
|
+
border-color: #666666;
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
&:hover {
|
|
1074
|
+
background-color: #324f61;
|
|
1075
|
+
color: var(--title-color);
|
|
1076
|
+
|
|
1077
|
+
td {
|
|
1078
|
+
border-bottom: 1px solid #ffffff;
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
&.k-state-selected {
|
|
1083
|
+
background-color: #d8e3e9;
|
|
1084
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
|
1085
|
+
|
|
1086
|
+
td span {
|
|
1087
|
+
color: #000;
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.failover-order-details {
|
|
1094
|
+
&.relative-container .absolute-container {
|
|
1095
|
+
background-color: var(--pannel-bg-color);
|
|
1096
|
+
color: var(--main-color-mode2);
|
|
1097
|
+
|
|
1098
|
+
&:has(.no-items-selected-container) {
|
|
1099
|
+
background-color: transparent;
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
td span {
|
|
1104
|
+
color: var(--main-color-mode2);
|
|
1105
|
+
}
|
|
1106
|
+
button span {
|
|
1107
|
+
color: var(--main-color-mode2);
|
|
1108
|
+
|
|
1109
|
+
&:hover:not(.disabled) {
|
|
1110
|
+
background-color: transparent;
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
button.active span {
|
|
1114
|
+
color: #fff;
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.select-adapter-info span {
|
|
1119
|
+
color: var(--main-color-mode2);
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
}
|
|
1000
1123
|
</style>
|
|
@@ -205,6 +205,7 @@
|
|
|
205
205
|
:is-network-invalid="isNetworkInvalid"
|
|
206
206
|
:free-adapters="props.freeAdapters"
|
|
207
207
|
:adapters="props.adapters"
|
|
208
|
+
:is-dark-mode="props.isDarkMode"
|
|
208
209
|
@check-network-label="onCheckNetworkLabel"
|
|
209
210
|
@get-existing-standard-switches="onGetExistingStandardSwitches"
|
|
210
211
|
@get-free-adapters="onGetFreeAdapters"
|
|
@@ -50,26 +50,19 @@ export const constructDiskDevicesFunc = (
|
|
|
50
50
|
// TODO refactoring
|
|
51
51
|
let result:
|
|
52
52
|
any = {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
create: true,
|
|
54
|
+
size: hardDisk.size,
|
|
55
|
+
bus: hardDisk.bus || '',
|
|
56
|
+
storage_id: hardDisk.storage?.id || '',
|
|
57
|
+
provision_type: hardDisk.provision_type || '',
|
|
58
|
+
disk_mode: hardDisk.disk_mode || '',
|
|
59
|
+
boot_order: hardDisk.boot_order || 0,
|
|
56
60
|
device_type: hardDisk.device_type ?? '',
|
|
57
|
-
bus: hardDisk.bus ?? '',
|
|
58
|
-
target: hardDisk.target ?? '',
|
|
59
|
-
boot_order: hardDisk.boot_order ?? 0,
|
|
60
|
-
provision_type: hardDisk.provision_type ?? '',
|
|
61
|
-
disk_mode: hardDisk.disk_mode ?? '',
|
|
62
61
|
sharing: hardDisk.sharing ?? false,
|
|
63
|
-
read_only: hardDisk.read_only ?? false,
|
|
64
62
|
shares: hardDisk.shares ?? 0,
|
|
65
63
|
cache: hardDisk.cache ?? '',
|
|
66
64
|
io: hardDisk.io ?? '',
|
|
67
65
|
limit_iops: hardDisk.limit_iops ?? 0,
|
|
68
|
-
discard: hardDisk.discard ?? '',
|
|
69
|
-
attach: hardDisk.attach ?? false,
|
|
70
|
-
detach: hardDisk.detach ?? false,
|
|
71
|
-
remove: hardDisk.remove ?? false,
|
|
72
|
-
create: hardDisk.create ?? true,
|
|
73
66
|
}
|
|
74
67
|
if (!hardDisk.create) {
|
|
75
68
|
// result = {
|
|
@@ -88,24 +81,18 @@ export const constructDiskDevicesFunc = (
|
|
|
88
81
|
result = {
|
|
89
82
|
create: false,
|
|
90
83
|
// source: hardDisk.source,
|
|
91
|
-
size: hardDisk.size,
|
|
84
|
+
size: Math.ceil(hardDisk.size),
|
|
92
85
|
bus: hardDisk.bus || '',
|
|
93
86
|
// device_type: hardDisk.device_type || '',
|
|
94
87
|
storage_id: hardDisk.storage?.id || '',
|
|
95
88
|
provision_type: hardDisk.provision_type || '',
|
|
96
89
|
disk_mode: hardDisk.disk_mode || '',
|
|
97
90
|
boot_order: hardDisk.boot_order || 0,
|
|
98
|
-
target: hardDisk.target ?? '',
|
|
99
91
|
sharing: hardDisk.sharing ?? false,
|
|
100
|
-
read_only: hardDisk.read_only ?? false,
|
|
101
92
|
shares: hardDisk.shares ?? 0,
|
|
102
93
|
cache: hardDisk.cache ?? '',
|
|
103
94
|
io: hardDisk.io ?? '',
|
|
104
95
|
limit_iops: hardDisk.limit_iops ?? 0,
|
|
105
|
-
discard: hardDisk.discard ?? '',
|
|
106
|
-
attach: hardDisk.attach ?? false,
|
|
107
|
-
detach: hardDisk.detach ?? false,
|
|
108
|
-
remove: hardDisk.remove ?? false,
|
|
109
96
|
}
|
|
110
97
|
}
|
|
111
98
|
return result
|