bfg-common 1.6.6 → 1.6.8
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.
|
@@ -4087,7 +4087,7 @@
|
|
|
4087
4087
|
"makeSureSelectHeartbeatDatastoreSeeDetails": "Убедитесь, что выбрали datastore для heartbeat, чтобы увидеть подробности."
|
|
4088
4088
|
},
|
|
4089
4089
|
"registerVm": {
|
|
4090
|
-
"register": "
|
|
4090
|
+
"register": "Зарегистрировать",
|
|
4091
4091
|
"lastCreateSubtitle": "Проверьте данные перед регистрацией виртуальной машины.",
|
|
4092
4092
|
"registerVmSelectFile": "Зарегистрировать ВМ — Выбор файла",
|
|
4093
4093
|
"nameAlreadyExistsDescription": "Запись с таким именем уже существует."
|
|
@@ -21,12 +21,14 @@
|
|
|
21
21
|
:sub-title-height="heightName"
|
|
22
22
|
>
|
|
23
23
|
<template #subTitle>
|
|
24
|
-
<div ref="subTitleBlockName"
|
|
25
|
-
<div
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
<div ref="subTitleBlockName">
|
|
25
|
+
<div class="subtitle-block">
|
|
26
|
+
<div
|
|
27
|
+
id="name-alert-wrapper"
|
|
28
|
+
:class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
|
|
29
|
+
></div>
|
|
30
|
+
<ui-wizard-subtitle :sub-title="currentSubtitleSelectNameBlock" />
|
|
31
|
+
</div>
|
|
30
32
|
</div>
|
|
31
33
|
</template>
|
|
32
34
|
<template #content>
|
|
@@ -51,7 +53,7 @@
|
|
|
51
53
|
"
|
|
52
54
|
:test-ids="props.nameTestIds"
|
|
53
55
|
:has-location="props.isSphere"
|
|
54
|
-
:location-nodes="
|
|
56
|
+
:location-nodes="localLocationNodes"
|
|
55
57
|
:allowed-location-kinds="props.allowedLocationKinds"
|
|
56
58
|
:location-description="props.locationDescription"
|
|
57
59
|
@submit="emits('change-name', $event)"
|
|
@@ -68,21 +70,23 @@
|
|
|
68
70
|
:sub-title-height="heightComputeResource"
|
|
69
71
|
>
|
|
70
72
|
<template #subTitle>
|
|
71
|
-
<div ref="computeResource"
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
.
|
|
84
|
-
|
|
85
|
-
|
|
73
|
+
<div ref="computeResource">
|
|
74
|
+
<div class="subtitle-block">
|
|
75
|
+
<ui-alert
|
|
76
|
+
v-if="props.computeResourceAlert.length"
|
|
77
|
+
:messages="props.computeResourceAlert"
|
|
78
|
+
test-id="computed-resource-alert"
|
|
79
|
+
type="error"
|
|
80
|
+
size="md"
|
|
81
|
+
class="subtitle-block__alert mb-4"
|
|
82
|
+
/>
|
|
83
|
+
<ui-wizard-subtitle
|
|
84
|
+
:sub-title="
|
|
85
|
+
localization.vmWizard
|
|
86
|
+
.selectDestinationComputeResourceForThisOperation
|
|
87
|
+
"
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
86
90
|
</div>
|
|
87
91
|
</template>
|
|
88
92
|
<template #content>
|
|
@@ -115,10 +119,12 @@
|
|
|
115
119
|
</div>
|
|
116
120
|
</template>
|
|
117
121
|
<template #content>
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
+
<div class="register-vm-ready-to-complete-container">
|
|
123
|
+
<common-ready-to-complete
|
|
124
|
+
v-if="selectedStep.id === props.dynamicSteps.readyComplete"
|
|
125
|
+
:data="props.readyCompleteTableInfo"
|
|
126
|
+
/>
|
|
127
|
+
</div>
|
|
122
128
|
</template>
|
|
123
129
|
</ui-wizard-block>
|
|
124
130
|
</template>
|
|
@@ -213,6 +219,15 @@ const currentSubtitleSelectNameBlock = ref<string>(
|
|
|
213
219
|
|
|
214
220
|
const initialCompare = compare(vmForm)
|
|
215
221
|
const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
|
|
222
|
+
|
|
223
|
+
const localLocationNodes = computed<UI_I_TreeNode[]>(() => {
|
|
224
|
+
const copyData = useDeepCopy(props.locationNodes)
|
|
225
|
+
if (copyData[0] && !copyData[0]?.nodes.length) {
|
|
226
|
+
copyData[0].hasNodes = true
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
return copyData
|
|
230
|
+
})
|
|
216
231
|
</script>
|
|
217
232
|
|
|
218
233
|
<style>
|
|
@@ -234,10 +249,23 @@ const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
|
|
|
234
249
|
border-color: var(--select-name-border-color);
|
|
235
250
|
}
|
|
236
251
|
.compute-resource-container {
|
|
237
|
-
padding-bottom:
|
|
252
|
+
padding-bottom: 16px;
|
|
238
253
|
|
|
254
|
+
:deep(.tree-content) {
|
|
255
|
+
padding: 8px !important;
|
|
256
|
+
}
|
|
239
257
|
:deep(.compatibility-wrap) {
|
|
240
258
|
margin-top: 24px;
|
|
241
259
|
}
|
|
242
260
|
}
|
|
261
|
+
.register-vm-ready-to-complete-container {
|
|
262
|
+
padding-bottom: 16px;
|
|
263
|
+
|
|
264
|
+
:deep(.details-list__col-right) {
|
|
265
|
+
align-items: flex-start;
|
|
266
|
+
}
|
|
267
|
+
:deep(.details-item-value) {
|
|
268
|
+
white-space: normal;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
243
271
|
</style>
|
|
@@ -72,7 +72,7 @@ export const stepsFunc = (
|
|
|
72
72
|
{
|
|
73
73
|
id: dynamicSteps.readyComplete,
|
|
74
74
|
stepName: '',
|
|
75
|
-
title: localization.
|
|
75
|
+
title: localization.common.readyComplete,
|
|
76
76
|
subTitle: localization.vmWizard.lastCreateSubtitle,
|
|
77
77
|
status: UI_E_WIZARD_STATUS.INACTIVE,
|
|
78
78
|
isValid: true,
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<div class="name-field">
|
|
18
18
|
<div class="flex-1 flex-align-center">
|
|
19
|
-
<ui-skeleton-item v-if="isLoading" width="112px" height="20px"/>
|
|
19
|
+
<ui-skeleton-item v-if="isLoading" width="112px" height="20px" />
|
|
20
20
|
<label v-else :for="`${props.testIds.name}-name`" class="name-label">{{
|
|
21
21
|
localization.common.name
|
|
22
22
|
}}</label>
|
|
@@ -33,33 +33,42 @@
|
|
|
33
33
|
</div>
|
|
34
34
|
|
|
35
35
|
<div class="flex-2">
|
|
36
|
-
<ui-skeleton-item
|
|
36
|
+
<ui-skeleton-item
|
|
37
|
+
v-if="isLoading"
|
|
38
|
+
width="480px"
|
|
39
|
+
height="36px"
|
|
40
|
+
border-radius="8px"
|
|
41
|
+
/>
|
|
37
42
|
|
|
38
43
|
<!-- ToDo при возможности придумать способ выделить тултип в компонент инпута-->
|
|
39
44
|
<ui-tooltip
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
v-else
|
|
46
|
+
id="vm-name-tooltip"
|
|
47
|
+
test-id="vm-name-tooltip"
|
|
48
|
+
size="md"
|
|
49
|
+
width="240"
|
|
50
|
+
position="bottom"
|
|
51
|
+
show-type="variant-1"
|
|
52
|
+
timing="500"
|
|
48
53
|
>
|
|
49
54
|
<template #target>
|
|
50
55
|
<ui-input
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
v-model="name"
|
|
57
|
+
id="vm-name-tooltip"
|
|
58
|
+
:placeholder="`${localization.common.name} (${localization.common.optional})`"
|
|
59
|
+
type="text"
|
|
60
|
+
maxlength="54"
|
|
61
|
+
:error="props.nameErrorText"
|
|
62
|
+
:test-id="props.testIds.name"
|
|
63
|
+
:disabled="props.isDisabledField"
|
|
59
64
|
/>
|
|
60
65
|
</template>
|
|
61
|
-
<template v-if="props.errors.length" #content
|
|
62
|
-
<p
|
|
66
|
+
<template v-if="props.errors.length" #content>
|
|
67
|
+
<p
|
|
68
|
+
v-for="(error, index) in props.errors"
|
|
69
|
+
:key="index"
|
|
70
|
+
class="name-tooltip-text"
|
|
71
|
+
>
|
|
63
72
|
{{ error }}
|
|
64
73
|
</p>
|
|
65
74
|
</template>
|
|
@@ -70,11 +79,19 @@
|
|
|
70
79
|
<template v-if="props.hasLocation">
|
|
71
80
|
<div class="location">
|
|
72
81
|
<div class="flex-1">
|
|
73
|
-
<span v-if="location" class="location-label">{{
|
|
74
|
-
|
|
82
|
+
<span v-if="location" class="location-label">{{
|
|
83
|
+
localization.common.location
|
|
84
|
+
}}</span>
|
|
85
|
+
<ui-skeleton-item v-else width="144px" height="20px" />
|
|
75
86
|
</div>
|
|
76
87
|
|
|
77
|
-
<div
|
|
88
|
+
<div
|
|
89
|
+
v-if="location"
|
|
90
|
+
:class="[
|
|
91
|
+
'selected-location flex-2',
|
|
92
|
+
{ disabled: props.isDisabledField },
|
|
93
|
+
]"
|
|
94
|
+
>
|
|
78
95
|
<span :class="['node-icon', location.iconClassName]" />
|
|
79
96
|
<span :class="['text', isShowAlert && 'error']">
|
|
80
97
|
{{ location.name }}
|
|
@@ -82,10 +99,10 @@
|
|
|
82
99
|
</div>
|
|
83
100
|
<ui-skeleton-item v-else width="160px" height="20px" />
|
|
84
101
|
</div>
|
|
85
|
-
<div :class="['tree-view-wrap', {
|
|
102
|
+
<div :class="['tree-view-wrap', { disabled: props.isDisabledField }]">
|
|
86
103
|
<common-wizards-common-steps-name-location
|
|
87
|
-
|
|
88
|
-
|
|
104
|
+
v-model:location="location"
|
|
105
|
+
:nodes="props.locationNodes"
|
|
89
106
|
/>
|
|
90
107
|
</div>
|
|
91
108
|
</template>
|
|
@@ -123,7 +140,7 @@ const isShowAlert = computed<boolean>(() =>
|
|
|
123
140
|
const isLoading = ref(true)
|
|
124
141
|
|
|
125
142
|
onMounted(() => {
|
|
126
|
-
setTimeout(() => isLoading.value = false, 0)
|
|
143
|
+
setTimeout(() => (isLoading.value = false), 0)
|
|
127
144
|
})
|
|
128
145
|
</script>
|
|
129
146
|
|
|
@@ -134,9 +151,10 @@ onMounted(() => {
|
|
|
134
151
|
--select-name-help-icon-active-color: #008fd6;
|
|
135
152
|
--select-name-help-hide-icon-color: #213444;
|
|
136
153
|
--select-name-border-color: #e9ebeda3;
|
|
154
|
+
--select-register-vm-name-top-border-color: #e9ebeda3;
|
|
137
155
|
--select-name-location-node-color: #182531;
|
|
138
156
|
--select-name-location-bg-color: #ffffff;
|
|
139
|
-
--select-name-tooltip-bg: #
|
|
157
|
+
--select-name-tooltip-bg: #ea3223e0;
|
|
140
158
|
}
|
|
141
159
|
:root.dark-theme {
|
|
142
160
|
--select-name-text-color: #e9eaec;
|
|
@@ -144,9 +162,10 @@ onMounted(() => {
|
|
|
144
162
|
--select-name-help-icon-active-color: #2ba2de;
|
|
145
163
|
--select-name-help-hide-icon-color: #e9eaec;
|
|
146
164
|
--select-name-border-color: #e9ebed1f;
|
|
165
|
+
--select-register-vm-name-top-border-color: #e9ebed1f;
|
|
147
166
|
--select-name-location-node-color: #e9eaec;
|
|
148
167
|
--select-name-location-bg-color: #1b2a371f;
|
|
149
|
-
--select-name-tooltip-bg: #
|
|
168
|
+
--select-name-tooltip-bg: #ea3223b8;
|
|
150
169
|
}
|
|
151
170
|
</style>
|
|
152
171
|
<style scoped lang="scss">
|
|
@@ -170,7 +189,7 @@ onMounted(() => {
|
|
|
170
189
|
|
|
171
190
|
.name-tooltip-text {
|
|
172
191
|
font-size: 12px;
|
|
173
|
-
color: #
|
|
192
|
+
color: #e9eaec;
|
|
174
193
|
}
|
|
175
194
|
|
|
176
195
|
.name-label {
|
|
@@ -200,7 +219,7 @@ onMounted(() => {
|
|
|
200
219
|
display: flex;
|
|
201
220
|
margin-top: 16px;
|
|
202
221
|
padding: 22px 0;
|
|
203
|
-
border-top: 1px solid var(--select-name-border-color);
|
|
222
|
+
border-top: 1px solid var(--select-register-vm-name-top-border-color);
|
|
204
223
|
column-gap: 16px;
|
|
205
224
|
align-items: flex-start;
|
|
206
225
|
|