bfg-common 1.3.8 → 1.3.9
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/package.json +1 -1
- package/components/common/vm/actions/addOld/Add.vue +0 -690
- package/components/common/vm/actions/addOld/FolderTreeView.vue +0 -83
- package/components/common/vm/actions/addOld/lib/utils.ts +0 -118
- package/components/common/vm/actions/common/select/name/NameOld.vue +0 -215
- package/components/common/vm/actions/common/select/storage/StorageOld.vue +0 -194
package/package.json
CHANGED
|
@@ -1,690 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="add-vm">
|
|
3
|
-
<atoms-modal-by-steps
|
|
4
|
-
test-id="add-vm-wizard"
|
|
5
|
-
:show="true"
|
|
6
|
-
:title="localization.newVirtualMachine2"
|
|
7
|
-
:step-items="stepItems"
|
|
8
|
-
:step-position="stepPosition"
|
|
9
|
-
:loading="loading"
|
|
10
|
-
@change-step="onChangeStep"
|
|
11
|
-
@hide="onHideModal"
|
|
12
|
-
>
|
|
13
|
-
<template #modalBody>
|
|
14
|
-
<div class="add-vm-context">
|
|
15
|
-
<div class="context-title-wrap">
|
|
16
|
-
<p>{{ stepSubTitle }}</p>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<common-vm-actions-common-select-create-type
|
|
20
|
-
v-show="stepPosition === 0"
|
|
21
|
-
:import-from-v-m-warev-sphere="props.importFromVMWarevSphere"
|
|
22
|
-
@next="onNext"
|
|
23
|
-
/>
|
|
24
|
-
<common-vm-actions-common-select-name
|
|
25
|
-
v-show="stepPosition === 1"
|
|
26
|
-
:show="stepPosition === 1"
|
|
27
|
-
:name-form-submit="nameFormSubmit"
|
|
28
|
-
:project="props.project"
|
|
29
|
-
:data-center="props.dataCenter"
|
|
30
|
-
@submit="onChangeNameAndNext(...$event)"
|
|
31
|
-
@check-name="emits('check-name', $event)"
|
|
32
|
-
@loading="loading = $event"
|
|
33
|
-
/>
|
|
34
|
-
<common-vm-actions-common-select-compute-resource
|
|
35
|
-
v-if="props.project === 'sphere'"
|
|
36
|
-
v-show="stepPosition === 2"
|
|
37
|
-
v-model="vmForm.computeResource"
|
|
38
|
-
:compute-resource-submit="computeResourceSubmit"
|
|
39
|
-
:data-center="vmForm.dataCenter"
|
|
40
|
-
:compute-resource="props.computeResource"
|
|
41
|
-
:compute-resource-tree="props.computeResourceTree"
|
|
42
|
-
@submit="changeComputeResourceAndNext"
|
|
43
|
-
@get-compute-resource-tree="
|
|
44
|
-
emits('get-compute-resource-tree', $event)
|
|
45
|
-
"
|
|
46
|
-
@show-compute-resource-tree="
|
|
47
|
-
emits('show-compute-resource-tree', $event)
|
|
48
|
-
"
|
|
49
|
-
@select-compute-resource-tree="onSelectComputeResourceTree"
|
|
50
|
-
@clear-compute-resource-tree="
|
|
51
|
-
emits('clear-compute-resource-tree', $event)
|
|
52
|
-
"
|
|
53
|
-
/>
|
|
54
|
-
<common-vm-actions-common-select-storage
|
|
55
|
-
v-show="
|
|
56
|
-
props.project === 'sphere'
|
|
57
|
-
? stepPosition === 3
|
|
58
|
-
: stepPosition === 2
|
|
59
|
-
"
|
|
60
|
-
:storage-submit="storageSubmit"
|
|
61
|
-
:datastore="props.datastore"
|
|
62
|
-
:get-datastore-table-func="props.getDatastoreTableFunc"
|
|
63
|
-
@submit="onChangeStorageAndNext"
|
|
64
|
-
/>
|
|
65
|
-
<common-vm-actions-common-select-compatibility
|
|
66
|
-
v-show="
|
|
67
|
-
props.project === 'sphere'
|
|
68
|
-
? stepPosition === 4
|
|
69
|
-
: stepPosition === 3
|
|
70
|
-
"
|
|
71
|
-
:options="compatibility"
|
|
72
|
-
:error-validation-fields="props.errorValidationFields"
|
|
73
|
-
@change="onChangeCompatibility"
|
|
74
|
-
@remove-error-by-title="emits('remove-error-by-title', $event)"
|
|
75
|
-
/>
|
|
76
|
-
<common-vm-actions-common-select-os
|
|
77
|
-
v-show="
|
|
78
|
-
props.project === 'sphere'
|
|
79
|
-
? stepPosition === 5
|
|
80
|
-
: stepPosition === 4
|
|
81
|
-
"
|
|
82
|
-
:families-options="guestOsFamilies"
|
|
83
|
-
:versions-options="guestOsVersions"
|
|
84
|
-
:machine-types-options="machineTypes"
|
|
85
|
-
:error-validation-fields="props.errorValidationFields"
|
|
86
|
-
@change="onChangeOs"
|
|
87
|
-
@remove-error-by-title="emits('remove-error-by-title', $event)"
|
|
88
|
-
/>
|
|
89
|
-
<common-vm-actions-common-customize-hardware
|
|
90
|
-
v-show="
|
|
91
|
-
props.project === 'sphere'
|
|
92
|
-
? stepPosition === 6
|
|
93
|
-
: stepPosition === 5
|
|
94
|
-
"
|
|
95
|
-
:vm-name="vmForm.name"
|
|
96
|
-
:guest-machine-type="vmForm.guestMachineType"
|
|
97
|
-
:guest-os-family="vmForm.guestOsFamily"
|
|
98
|
-
:guest-os-version="vmForm.guestOsVersion"
|
|
99
|
-
:storage="vmForm.storage"
|
|
100
|
-
:hard-disks-for-boot-options="virtualHardwareHardDisksLocal"
|
|
101
|
-
:cd-dvd-drives-for-boot-options="virtualHardwareCdDvdDrivesLocal"
|
|
102
|
-
:networks-for-boot-options="virtualHardwareNetworksLocal"
|
|
103
|
-
:cd-dvd-drives="virtualHardwareCdDvdDrivesLocal"
|
|
104
|
-
:customize-hardware-submit="customizeHardwareSubmit"
|
|
105
|
-
:max-cpus="maxCpus"
|
|
106
|
-
:max-memory="maxMemory"
|
|
107
|
-
:cpu-models="cpuModels"
|
|
108
|
-
:selected-nav-item="selectedNavItem"
|
|
109
|
-
:nodes="props.nodes"
|
|
110
|
-
:files="props.files"
|
|
111
|
-
:networks-table="props.networksTable"
|
|
112
|
-
:error-validation-fields="props.errorValidationFields"
|
|
113
|
-
:get-datastore-table-func="props.getDatastoreTableFunc"
|
|
114
|
-
:datastore="props.datastore"
|
|
115
|
-
:vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
|
|
116
|
-
:passthrough-devices="props.passthroughDevices"
|
|
117
|
-
@change-boot-order="onChangeBootOrder"
|
|
118
|
-
@send-data="onChangeCustomizeHardware"
|
|
119
|
-
@get-storage="emits('get-storage', $event)"
|
|
120
|
-
@get-folders-or-files="emits('get-folders-or-files', $event)"
|
|
121
|
-
@get-active-device-child="emits('get-active-device-child', $event)"
|
|
122
|
-
@show-datastore-child="emits('show-datastore-child', $event)"
|
|
123
|
-
@remove-error-by-title="emits('remove-error-by-title', $event)"
|
|
124
|
-
@get-networks-table="emits('get-networks-table', $event)"
|
|
125
|
-
@get-pci-devices="emits('get-pci-devices')"
|
|
126
|
-
@next="onNext(true)"
|
|
127
|
-
/>
|
|
128
|
-
<common-vm-actions-common-ready-to-complete
|
|
129
|
-
v-if="
|
|
130
|
-
props.project === 'sphere'
|
|
131
|
-
? stepPosition === 7
|
|
132
|
-
: stepPosition === 6
|
|
133
|
-
"
|
|
134
|
-
:ready-complete-table-info="props.readyCompleteTableInfo"
|
|
135
|
-
/>
|
|
136
|
-
|
|
137
|
-
<span
|
|
138
|
-
v-if="
|
|
139
|
-
props.project === 'sphere' ? stepPosition > 4 : stepPosition > 3
|
|
140
|
-
"
|
|
141
|
-
class="vm-hardware-version"
|
|
142
|
-
>{{ compatibilityInfo }}</span
|
|
143
|
-
>
|
|
144
|
-
</div>
|
|
145
|
-
</template>
|
|
146
|
-
|
|
147
|
-
<template #modalFooter>
|
|
148
|
-
<div class="flex-align-center flex-space-between w-100">
|
|
149
|
-
<div class="power-on-by-default-wrap">
|
|
150
|
-
<template
|
|
151
|
-
v-if="
|
|
152
|
-
props.project === 'sphere'
|
|
153
|
-
? stepPosition === 7
|
|
154
|
-
: stepPosition === 6
|
|
155
|
-
"
|
|
156
|
-
>
|
|
157
|
-
<input
|
|
158
|
-
id="power-on-by-default"
|
|
159
|
-
v-model="isPowerOnByDefault"
|
|
160
|
-
type="checkbox"
|
|
161
|
-
/>
|
|
162
|
-
<label for="power-on-by-default" class="label-text-normal">{{
|
|
163
|
-
localization.powerOnByDefault
|
|
164
|
-
}}</label>
|
|
165
|
-
</template>
|
|
166
|
-
</div>
|
|
167
|
-
<div class="flex-align-center">
|
|
168
|
-
<button
|
|
169
|
-
id="vm-wizard-cancel-button"
|
|
170
|
-
class="btn btn-link"
|
|
171
|
-
@click="onHideModal"
|
|
172
|
-
>
|
|
173
|
-
{{ localization.cancel }}
|
|
174
|
-
</button>
|
|
175
|
-
<button
|
|
176
|
-
v-show="stepPosition > 0"
|
|
177
|
-
id="vm-wizard-back-button"
|
|
178
|
-
class="btn btn-outline"
|
|
179
|
-
@click="onBack"
|
|
180
|
-
>
|
|
181
|
-
{{ localization.back }}
|
|
182
|
-
</button>
|
|
183
|
-
<button
|
|
184
|
-
v-if="stepPosition === stepItems.length - 1"
|
|
185
|
-
id="vm-wizard-finish-button"
|
|
186
|
-
class="btn btn-success"
|
|
187
|
-
@click="onFinish"
|
|
188
|
-
>
|
|
189
|
-
{{ localization.finish }}
|
|
190
|
-
</button>
|
|
191
|
-
<button
|
|
192
|
-
v-else
|
|
193
|
-
id="vm-wizard-next-button"
|
|
194
|
-
class="btn btn-primary"
|
|
195
|
-
@click="onNext(false)"
|
|
196
|
-
>
|
|
197
|
-
{{ localization.next }}
|
|
198
|
-
</button>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
</template>
|
|
202
|
-
</atoms-modal-by-steps>
|
|
203
|
-
</div>
|
|
204
|
-
</template>
|
|
205
|
-
|
|
206
|
-
<script setup lang="ts">
|
|
207
|
-
import { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
|
|
208
|
-
import { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
|
|
209
|
-
import { API_UI_I_Error, UI_I_TablePayload } from '~/lib/models/store/interfaces'
|
|
210
|
-
import { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
|
|
211
|
-
import { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
|
|
212
|
-
import { UI_I_Localization, UI_I_ArbitraryObject } from '~/lib/models/interfaces'
|
|
213
|
-
import {
|
|
214
|
-
UI_I_VmForm,
|
|
215
|
-
UI_I_VmFormCash,
|
|
216
|
-
} from '~/components/common/vm/actions/common/lib/models/interfaces'
|
|
217
|
-
import { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
|
|
218
|
-
import { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
|
|
219
|
-
import { UI_I_OsChange } from '~/components/common/vm/actions/common/select/lib/models/interfaces'
|
|
220
|
-
import {
|
|
221
|
-
UI_I_SendDataCpu,
|
|
222
|
-
UI_I_SendDataMemory,
|
|
223
|
-
UI_I_SendDataNewCdDvdDrive,
|
|
224
|
-
UI_I_SendDataNewHardDisk,
|
|
225
|
-
UI_I_SendDataNewNetwork,
|
|
226
|
-
} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
|
|
227
|
-
import {
|
|
228
|
-
UI_T_AddVmFinishFunc,
|
|
229
|
-
UI_T_SelectedNavItem,
|
|
230
|
-
} from '~/components/common/vm/actions/common/lib/models/types'
|
|
231
|
-
import {
|
|
232
|
-
UI_I_OptionItem,
|
|
233
|
-
UI_I_VerticalStepItem,
|
|
234
|
-
} from '~/components/atoms/lib/models/interfaces'
|
|
235
|
-
import { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
|
|
236
|
-
import { UI_I_ConfigurePciDevicesTable } from '~/lib/models/store/host/interfaces'
|
|
237
|
-
import { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
|
|
238
|
-
import { UI_T_Project } from '~/lib/models/types'
|
|
239
|
-
import { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
|
|
240
|
-
import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
|
|
241
|
-
import {
|
|
242
|
-
stepItemsFunc,
|
|
243
|
-
subTitleFunc,
|
|
244
|
-
} from '~/components/common/vm/actions/add/lib/utils'
|
|
245
|
-
|
|
246
|
-
const props = defineProps<{
|
|
247
|
-
project: UI_T_Project
|
|
248
|
-
nodes: UI_I_FileTreeNode[]
|
|
249
|
-
files: UI_I_FileTreeNode[]
|
|
250
|
-
networksTable: UI_I_NetworkTableItem[]
|
|
251
|
-
datastore: UI_I_DatastoreTableItem[]
|
|
252
|
-
errorValidationFields: UI_I_ErrorValidationField[]
|
|
253
|
-
readyCompleteTableInfo: UI_I_TableInfoItem[]
|
|
254
|
-
vmCpuHelpTextSecond: string
|
|
255
|
-
importFromVMWarevSphere: string
|
|
256
|
-
finishFunc: UI_T_AddVmFinishFunc
|
|
257
|
-
getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
|
|
258
|
-
validateSendDataFunc: UI_T_AddVmFinishFunc<
|
|
259
|
-
[UI_T_SelectedNavItem, null | number] | null
|
|
260
|
-
>
|
|
261
|
-
passthroughDevices: UI_I_ConfigurePciDevicesTable | null
|
|
262
|
-
vmNameInWizard: string
|
|
263
|
-
dataCenter?: UI_I_TreeNode // для сферы
|
|
264
|
-
computeResource?: UI_I_TreeNode // для сферы
|
|
265
|
-
computeResourceTree?: UI_I_TreeNode[] // для сферы
|
|
266
|
-
}>()
|
|
267
|
-
|
|
268
|
-
const emits = defineEmits<{
|
|
269
|
-
(event: 'check-name', value: [string, (error: API_UI_I_Error) => void]): void
|
|
270
|
-
(event: 'get-storage', value: UI_I_TablePayload): void
|
|
271
|
-
(event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
|
|
272
|
-
(event: 'get-active-device-child', value: UI_I_FileTreeNode): void
|
|
273
|
-
(event: 'show-datastore-child', value: UI_I_FileTreeNode): void
|
|
274
|
-
(event: 'remove-error-by-title', value: string): void
|
|
275
|
-
(event: 'get-networks-table', value: UI_I_TablePayload): void
|
|
276
|
-
(event: 'get-pci-devices'): void
|
|
277
|
-
(event: 'hide'): void
|
|
278
|
-
(
|
|
279
|
-
event: 'get-compute-resource-tree',
|
|
280
|
-
value: { id: string | number; cb: () => void }
|
|
281
|
-
): void // для сферы
|
|
282
|
-
(event: 'show-compute-resource-tree', value: UI_I_TreeNode): void // для сферы
|
|
283
|
-
(event: 'select-compute-resource-tree', value: UI_I_TreeNode): void // для сферы
|
|
284
|
-
(event: 'clear-compute-resource-tree'): void // для сферы
|
|
285
|
-
}>()
|
|
286
|
-
|
|
287
|
-
const { $recursion } = useNuxtApp()
|
|
288
|
-
|
|
289
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
290
|
-
|
|
291
|
-
const stepPosition = ref<number>(0)
|
|
292
|
-
watch(stepPosition, (newValue) => {
|
|
293
|
-
if (props.project === 'sphere' ? newValue === 7 : newValue === 6)
|
|
294
|
-
validateSendData()
|
|
295
|
-
})
|
|
296
|
-
const stepItems = ref<UI_I_VerticalStepItem[]>([])
|
|
297
|
-
stepItems.value = stepItemsFunc(localization.value, props.project)
|
|
298
|
-
|
|
299
|
-
const subTitle: string[] = subTitleFunc(localization.value, props.project)
|
|
300
|
-
const stepSubTitle = computed<string>(() => subTitle[stepPosition.value])
|
|
301
|
-
|
|
302
|
-
const storageIdCash = ref<string | null>(null)
|
|
303
|
-
const vmForm = ref<UI_I_VmForm>({
|
|
304
|
-
name: '',
|
|
305
|
-
compatibility: '',
|
|
306
|
-
guestMachineType: null,
|
|
307
|
-
guestOsFamily: null,
|
|
308
|
-
guestOsVersion: null,
|
|
309
|
-
computeResource: null,
|
|
310
|
-
storage: null,
|
|
311
|
-
locationPath: '',
|
|
312
|
-
dataCenter: null,
|
|
313
|
-
})
|
|
314
|
-
const vmFormCash = ref<UI_I_VmFormCash>({
|
|
315
|
-
dataCenterId: null,
|
|
316
|
-
computeResourceTypeAndId: null,
|
|
317
|
-
})
|
|
318
|
-
|
|
319
|
-
const isPowerOnByDefault = ref<boolean>(true)
|
|
320
|
-
|
|
321
|
-
const onChangeNameAndNext = (name: string, node: UI_I_TreeNode): void => {
|
|
322
|
-
const hasChanges = vmFormCash.value.dataCenterId !== node?.id
|
|
323
|
-
if (hasChanges) checkLocalChangeAndChangeStepStatus()
|
|
324
|
-
|
|
325
|
-
vmForm.value.name = name
|
|
326
|
-
if (props.project === 'sphere') {
|
|
327
|
-
vmForm.value.locationPath = $recursion.createAbsolutePathRecursion(
|
|
328
|
-
node,
|
|
329
|
-
'id',
|
|
330
|
-
'parent'
|
|
331
|
-
)
|
|
332
|
-
vmForm.value.dataCenter = $recursion.findParentByValue(
|
|
333
|
-
node,
|
|
334
|
-
'datacenter',
|
|
335
|
-
'type',
|
|
336
|
-
'parent'
|
|
337
|
-
)
|
|
338
|
-
vmFormCash.value.dataCenterId = vmForm.value.dataCenter?.id || null
|
|
339
|
-
}
|
|
340
|
-
onNext(true)
|
|
341
|
-
}
|
|
342
|
-
// Для сферы
|
|
343
|
-
const computeResourcePath = ref<string>('')
|
|
344
|
-
const onSelectComputeResourceTree = (node: UI_I_TreeNode): void => {
|
|
345
|
-
emits('select-compute-resource-tree', node)
|
|
346
|
-
computeResourcePath.value = $recursion.createAbsolutePathRecursion(
|
|
347
|
-
node,
|
|
348
|
-
'id',
|
|
349
|
-
'parent'
|
|
350
|
-
)
|
|
351
|
-
}
|
|
352
|
-
const changeComputeResourceAndNext = (node: UI_I_TreeNode): void => {
|
|
353
|
-
const hasChanges =
|
|
354
|
-
`${node.type}${node.id}` !== vmFormCash.value.computeResourceTypeAndId
|
|
355
|
-
if (hasChanges) checkLocalChangeAndChangeStepStatus()
|
|
356
|
-
|
|
357
|
-
vmForm.value.computeResource = node
|
|
358
|
-
// const type = node.type.toUpperCase()
|
|
359
|
-
// schedRequirementsTemplate.value = `sched_requirements="(${type}_ID=${node.id})"\\`
|
|
360
|
-
vmFormCash.value.computeResourceTypeAndId = `${node.type}${node.id}` || null
|
|
361
|
-
|
|
362
|
-
onNext(true)
|
|
363
|
-
}
|
|
364
|
-
const onChangeStorageAndNext = (
|
|
365
|
-
storage: UI_I_DatastoreTableItem | null
|
|
366
|
-
): void => {
|
|
367
|
-
if (!storage) return
|
|
368
|
-
|
|
369
|
-
const hasChanges = storage.id !== storageIdCash.value
|
|
370
|
-
if (hasChanges) checkLocalChangeAndChangeStepStatus()
|
|
371
|
-
|
|
372
|
-
vmForm.value.storage = storage
|
|
373
|
-
storageIdCash.value = storage.id
|
|
374
|
-
|
|
375
|
-
onNext(true)
|
|
376
|
-
}
|
|
377
|
-
const compatibilityInfo = ref<string>('')
|
|
378
|
-
const onChangeCompatibility = (compatibility: UI_I_OptionItem): void => {
|
|
379
|
-
vmForm.value.compatibility = compatibility.value
|
|
380
|
-
|
|
381
|
-
const version = compatibility.value.split('-')[1]
|
|
382
|
-
compatibilityInfo.value = `${localization.value.compatibility}: ${compatibility.text} (${localization.value.vmVersion} ${version})`
|
|
383
|
-
}
|
|
384
|
-
const onChangeOs = (data: UI_I_OsChange): void => {
|
|
385
|
-
vmForm.value.guestMachineType = data.selectedMachineType
|
|
386
|
-
vmForm.value.guestOsFamily = data.selectedOS
|
|
387
|
-
vmForm.value.guestOsVersion = data.selectedVersion
|
|
388
|
-
}
|
|
389
|
-
const customizeHardware = ref<UI_I_SendDataCustomizeHardware | null>(null)
|
|
390
|
-
const onChangeCustomizeHardware = (
|
|
391
|
-
data: UI_I_SendDataCustomizeHardware
|
|
392
|
-
): void => {
|
|
393
|
-
customizeHardware.value = data
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
const virtualHardwareHardDisksLocal = computed<
|
|
397
|
-
UI_I_SendDataNewHardDisk[] | null
|
|
398
|
-
>(() => customizeHardware.value?.virtualHardware?.hardDisks || null)
|
|
399
|
-
const virtualHardwareNetworksLocal = computed<UI_I_SendDataNewNetwork[] | null>(
|
|
400
|
-
() => customizeHardware.value?.virtualHardware?.networks || null
|
|
401
|
-
)
|
|
402
|
-
const virtualHardwareCdDvdDrivesLocal = computed<
|
|
403
|
-
UI_I_SendDataNewCdDvdDrive[] | null
|
|
404
|
-
>(() => customizeHardware.value?.virtualHardware?.cdDvdDrives || null)
|
|
405
|
-
|
|
406
|
-
const virtualHardwareCpu = computed<UI_I_SendDataCpu | null>(
|
|
407
|
-
() => customizeHardware.value?.virtualHardware?.cpu || null
|
|
408
|
-
)
|
|
409
|
-
const virtualHardwareMemory = computed<UI_I_SendDataMemory | null>(
|
|
410
|
-
() => customizeHardware.value?.virtualHardware?.memory || null
|
|
411
|
-
)
|
|
412
|
-
const virtualHardwareHardDisks = ref<UI_I_SendDataNewHardDisk[] | null>(null)
|
|
413
|
-
const virtualHardwareCdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[] | null>(
|
|
414
|
-
null
|
|
415
|
-
)
|
|
416
|
-
const virtualHardwareNetworks = ref<UI_I_SendDataNewNetwork[] | null>(null)
|
|
417
|
-
const onChangeBootOrder = (data: UI_T_ChangeBootOrder): void => {
|
|
418
|
-
virtualHardwareHardDisks.value = data[0]
|
|
419
|
-
virtualHardwareCdDvdDrives.value = data[1]
|
|
420
|
-
virtualHardwareNetworks.value = data[2]
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
watch(
|
|
424
|
-
() => props.vmNameInWizard,
|
|
425
|
-
(newValue) => {
|
|
426
|
-
vmForm.value.name = newValue
|
|
427
|
-
}
|
|
428
|
-
)
|
|
429
|
-
|
|
430
|
-
const loading = ref<boolean>(false)
|
|
431
|
-
const validateSendData = (): void => {
|
|
432
|
-
loading.value = true
|
|
433
|
-
props
|
|
434
|
-
.validateSendDataFunc(
|
|
435
|
-
vmForm.value,
|
|
436
|
-
virtualHardwareCpu.value,
|
|
437
|
-
virtualHardwareMemory.value,
|
|
438
|
-
customizeHardware.value,
|
|
439
|
-
virtualHardwareNetworks.value,
|
|
440
|
-
virtualHardwareHardDisks.value,
|
|
441
|
-
virtualHardwareCdDvdDrives.value,
|
|
442
|
-
isPowerOnByDefault.value,
|
|
443
|
-
localization.value,
|
|
444
|
-
vmForm.value.locationPath, // для сферы
|
|
445
|
-
computeResourcePath.value // для сферы
|
|
446
|
-
)
|
|
447
|
-
.then((data) => {
|
|
448
|
-
loading.value = false
|
|
449
|
-
if (!data) return
|
|
450
|
-
|
|
451
|
-
selectedNavItem.value = data[0]
|
|
452
|
-
data[1] !== null && (stepPosition.value = data[1])
|
|
453
|
-
})
|
|
454
|
-
}
|
|
455
|
-
const onFinish = (): void => {
|
|
456
|
-
loading.value = true
|
|
457
|
-
props
|
|
458
|
-
.finishFunc(
|
|
459
|
-
vmForm.value,
|
|
460
|
-
virtualHardwareCpu.value,
|
|
461
|
-
virtualHardwareMemory.value,
|
|
462
|
-
customizeHardware.value,
|
|
463
|
-
virtualHardwareNetworks.value,
|
|
464
|
-
virtualHardwareHardDisks.value,
|
|
465
|
-
virtualHardwareCdDvdDrives.value,
|
|
466
|
-
isPowerOnByDefault.value,
|
|
467
|
-
localization.value,
|
|
468
|
-
vmForm.value.locationPath, // для сферы
|
|
469
|
-
computeResourcePath.value, // для сферы
|
|
470
|
-
false
|
|
471
|
-
)
|
|
472
|
-
.then(() => {
|
|
473
|
-
onHideModal()
|
|
474
|
-
loading.value = false
|
|
475
|
-
})
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
const selectedNavItem = ref<UI_T_SelectedNavItem>(0)
|
|
479
|
-
|
|
480
|
-
const nameFormSubmit = ref<number>(0)
|
|
481
|
-
const computeResourceSubmit = ref<number>(0)
|
|
482
|
-
const storageSubmit = ref<number>(0)
|
|
483
|
-
const customizeHardwareSubmit = ref<number>(0)
|
|
484
|
-
const onNext = (force = false): void => {
|
|
485
|
-
const isValid = checkSubmit(force)
|
|
486
|
-
if (!isValid) {
|
|
487
|
-
return
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
const isDisabled = stepItems.value[cashStep]?.disabled
|
|
491
|
-
if (cashStep !== -1 && !isDisabled) {
|
|
492
|
-
stepPosition.value = cashStep
|
|
493
|
-
cashStep = -1
|
|
494
|
-
return
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
stepItems.value[stepPosition.value].complete = true
|
|
498
|
-
stepItems.value[stepPosition.value + 1].disabled = false
|
|
499
|
-
stepPosition.value++
|
|
500
|
-
}
|
|
501
|
-
const checkLocalChangeAndChangeStepStatus = (): void => {
|
|
502
|
-
stepItems.value = stepItems.value.map((step, index) => {
|
|
503
|
-
if (index > stepPosition.value) {
|
|
504
|
-
step.complete = false
|
|
505
|
-
step.disabled = index > stepPosition.value + 1
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
return step
|
|
509
|
-
})
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
const checkSubmit = (force = false): boolean => {
|
|
513
|
-
if (stepPosition.value === 1 && !force) {
|
|
514
|
-
nameFormSubmit.value++
|
|
515
|
-
return false
|
|
516
|
-
}
|
|
517
|
-
if (props.project === 'sphere' && stepPosition.value === 2 && !force) {
|
|
518
|
-
computeResourceSubmit.value++
|
|
519
|
-
return false
|
|
520
|
-
}
|
|
521
|
-
if (
|
|
522
|
-
(props.project === 'sphere'
|
|
523
|
-
? stepPosition.value === 3
|
|
524
|
-
: stepPosition.value === 2) &&
|
|
525
|
-
!force
|
|
526
|
-
) {
|
|
527
|
-
storageSubmit.value++
|
|
528
|
-
return false
|
|
529
|
-
}
|
|
530
|
-
if (
|
|
531
|
-
(props.project === 'sphere'
|
|
532
|
-
? stepPosition.value === 6
|
|
533
|
-
: stepPosition.value === 5) &&
|
|
534
|
-
!force
|
|
535
|
-
) {
|
|
536
|
-
customizeHardwareSubmit.value++
|
|
537
|
-
return false
|
|
538
|
-
}
|
|
539
|
-
return true
|
|
540
|
-
}
|
|
541
|
-
const checkSubmitByManual = (step: number): boolean => {
|
|
542
|
-
if (stepPosition.value === 1) {
|
|
543
|
-
nameFormSubmit.value++
|
|
544
|
-
return false
|
|
545
|
-
}
|
|
546
|
-
if (
|
|
547
|
-
props.project === 'sphere'
|
|
548
|
-
? stepPosition.value === 3
|
|
549
|
-
: stepPosition.value === 2
|
|
550
|
-
) {
|
|
551
|
-
storageSubmit.value++
|
|
552
|
-
return false
|
|
553
|
-
}
|
|
554
|
-
if (props.project === 'sphere' ? step === 8 : step === 7) {
|
|
555
|
-
customizeHardwareSubmit.value++
|
|
556
|
-
return false
|
|
557
|
-
}
|
|
558
|
-
return true
|
|
559
|
-
}
|
|
560
|
-
const onBack = (): void => {
|
|
561
|
-
stepPosition.value--
|
|
562
|
-
}
|
|
563
|
-
let cashStep = -1
|
|
564
|
-
const onChangeStep = (key: number): void => {
|
|
565
|
-
const isValid = checkSubmitByManual(key)
|
|
566
|
-
if (!isValid) {
|
|
567
|
-
cashStep = key
|
|
568
|
-
return
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
stepPosition.value = key
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
const compatibility = ref<UI_I_OptionItem[]>(capabilities.compatibility)
|
|
575
|
-
const guestOsFamilies = ref<UI_I_OptionItem[]>(capabilities.guestOsFamilies)
|
|
576
|
-
const guestOsVersions = ref<UI_I_ArbitraryObject<UI_I_OptionItem[]>>(
|
|
577
|
-
capabilities.guestOsVersions
|
|
578
|
-
)
|
|
579
|
-
const machineTypes = ref<UI_I_OptionItem[]>(capabilities.machineTypes)
|
|
580
|
-
const cpuModels = ref<UI_I_OptionItem[]>(capabilities.cpuModels)
|
|
581
|
-
const maxCpus = ref<number>(capabilities.maxCpus)
|
|
582
|
-
const maxMemory = ref<number>(capabilities.maxMemory)
|
|
583
|
-
|
|
584
|
-
const onHideModal = (): void => {
|
|
585
|
-
emits('hide')
|
|
586
|
-
}
|
|
587
|
-
</script>
|
|
588
|
-
|
|
589
|
-
<style scoped lang="scss">
|
|
590
|
-
:deep(.has-solid.close-icon.clr-icon) {
|
|
591
|
-
width: 20px;
|
|
592
|
-
top: 0;
|
|
593
|
-
}
|
|
594
|
-
.add-vm-context {
|
|
595
|
-
padding: 16px 15px 10px 10px;
|
|
596
|
-
height: 100%;
|
|
597
|
-
display: flex;
|
|
598
|
-
flex-direction: column;
|
|
599
|
-
|
|
600
|
-
.context-title-wrap {
|
|
601
|
-
padding-bottom: 3px;
|
|
602
|
-
border-bottom: 1px solid #a6a6a6;
|
|
603
|
-
|
|
604
|
-
h4 {
|
|
605
|
-
font-weight: 700;
|
|
606
|
-
font-size: 13px;
|
|
607
|
-
color: var(--add-vm-context-title);
|
|
608
|
-
}
|
|
609
|
-
p {
|
|
610
|
-
font-weight: 400;
|
|
611
|
-
font-size: 13px;
|
|
612
|
-
color: var(--add-vm-context-sub-title);
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
|
|
616
|
-
.finish-block {
|
|
617
|
-
padding: 18px 24px 24px 24px;
|
|
618
|
-
|
|
619
|
-
.add-hosts-ready-to-complete-mt-12 {
|
|
620
|
-
margin-top: 12px;
|
|
621
|
-
|
|
622
|
-
.add-hosts-ready-to-complete-bold {
|
|
623
|
-
line-height: 18px;
|
|
624
|
-
font-weight: 700;
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
.vm-hardware-version {
|
|
630
|
-
align-self: flex-end;
|
|
631
|
-
margin-top: auto;
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
:deep(.modal .modal-dialog .modal-content .modal-footer) {
|
|
636
|
-
flex: unset;
|
|
637
|
-
height: unset;
|
|
638
|
-
min-height: unset;
|
|
639
|
-
}
|
|
640
|
-
:deep(.wizard-modal-titlebar h3) {
|
|
641
|
-
color: #000;
|
|
642
|
-
font-size: 24px;
|
|
643
|
-
font-weight: 200;
|
|
644
|
-
line-height: 27px;
|
|
645
|
-
margin: 0;
|
|
646
|
-
padding: 0;
|
|
647
|
-
}
|
|
648
|
-
:deep(.clr-wizard-stepnav-item) {
|
|
649
|
-
padding-left: 0;
|
|
650
|
-
}
|
|
651
|
-
:deep(.clr-wizard-stepnav
|
|
652
|
-
.clr-wizard-stepnav-item
|
|
653
|
-
button
|
|
654
|
-
.clr-wizard-stepnav-link-title) {
|
|
655
|
-
width: 189px;
|
|
656
|
-
font-weight: 700;
|
|
657
|
-
font-size: 13px;
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
#vm-wizard-notification {
|
|
661
|
-
h3 {
|
|
662
|
-
color: var(--global-font-color7);
|
|
663
|
-
margin-top: 6px;
|
|
664
|
-
}
|
|
665
|
-
p {
|
|
666
|
-
color: var(--global-font-color6);
|
|
667
|
-
line-height: 16px;
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
.power-on-by-default-wrap {
|
|
672
|
-
display: flex;
|
|
673
|
-
align-items: center;
|
|
674
|
-
|
|
675
|
-
input {
|
|
676
|
-
margin-right: 6px;
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
</style>
|
|
680
|
-
|
|
681
|
-
<style>
|
|
682
|
-
:root {
|
|
683
|
-
--add-vm-context-title: #333;
|
|
684
|
-
--add-vm-context-sub-title: #000;
|
|
685
|
-
}
|
|
686
|
-
:root.dark-theme {
|
|
687
|
-
--add-vm-context-title: #adbbc4;
|
|
688
|
-
--add-vm-context-sub-title: #adbbc4;
|
|
689
|
-
}
|
|
690
|
-
</style>
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="tree-view">
|
|
3
|
-
<atoms-loader-pre-loader
|
|
4
|
-
v-show="loading"
|
|
5
|
-
id="loader"
|
|
6
|
-
class="absolute-center tree-view__loading"
|
|
7
|
-
:show="true"
|
|
8
|
-
/>
|
|
9
|
-
<common-recursion-tree
|
|
10
|
-
:nodes="nodes"
|
|
11
|
-
class="recursion-tree"
|
|
12
|
-
@get-nodes="showNodes($event)"
|
|
13
|
-
@select-node="selectNode"
|
|
14
|
-
@contextmenu.prevent
|
|
15
|
-
/>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<script setup lang="ts">
|
|
20
|
-
import { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
|
|
21
|
-
|
|
22
|
-
const props = defineProps<{
|
|
23
|
-
dataCenter: UI_I_TreeNode
|
|
24
|
-
}>()
|
|
25
|
-
const emits = defineEmits<{
|
|
26
|
-
(event: 'select-node', value: UI_I_TreeNode): void
|
|
27
|
-
}>()
|
|
28
|
-
|
|
29
|
-
const { $store } = useNuxtApp()
|
|
30
|
-
|
|
31
|
-
const nodes = computed<UI_I_TreeNode[]>(
|
|
32
|
-
() => $store.getters['inventory/getFolderTree'] || []
|
|
33
|
-
)
|
|
34
|
-
const loading = ref<boolean>(false)
|
|
35
|
-
const getTree = async (): Promise<void> => {
|
|
36
|
-
loading.value = true
|
|
37
|
-
await $store.dispatch('inventory/A_GET_FOLDER_TREE', null)
|
|
38
|
-
loading.value = false
|
|
39
|
-
}
|
|
40
|
-
getTree().then(() => {
|
|
41
|
-
selectNode(props.dataCenter)
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
const showNodes = ({
|
|
45
|
-
node,
|
|
46
|
-
cb,
|
|
47
|
-
}: {
|
|
48
|
-
node: UI_I_TreeNode
|
|
49
|
-
cb: () => void
|
|
50
|
-
}): void => {
|
|
51
|
-
const payload: any = { node, treeName: 'folderTree' }
|
|
52
|
-
$store.dispatch('inventory/A_SHOW_NODE', payload)
|
|
53
|
-
cb()
|
|
54
|
-
}
|
|
55
|
-
const selectNode = (node: UI_I_TreeNode): void => {
|
|
56
|
-
const payload: any = {
|
|
57
|
-
node,
|
|
58
|
-
treeName: 'folderTree',
|
|
59
|
-
doSelect: false,
|
|
60
|
-
}
|
|
61
|
-
$store.dispatch('inventory/A_SELECT_NODE', payload)
|
|
62
|
-
|
|
63
|
-
emits('select-node', node)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
onUnmounted(() => {
|
|
67
|
-
$store.dispatch('inventory/A_CLEAR_FOLDER_TREE', null)
|
|
68
|
-
})
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<style scoped lang="scss">
|
|
72
|
-
.tree-view {
|
|
73
|
-
&__loading {
|
|
74
|
-
:deep(.spinner.spinner-inverse) {
|
|
75
|
-
position: static;
|
|
76
|
-
width: 45px;
|
|
77
|
-
height: 45px;
|
|
78
|
-
min-width: 45px;
|
|
79
|
-
min-height: 45px;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
</style>
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
|
|
2
|
-
import { UI_E_Fields } from '~/components/common/vm/actions/common/lib/models/enums'
|
|
3
|
-
import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
|
|
4
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
5
|
-
import { UI_I_VerticalStepItem } from '~/components/atoms/lib/models/interfaces'
|
|
6
|
-
import { UI_T_Project } from '~/lib/models/types'
|
|
7
|
-
import { checkAllField } from '~/components/common/vm/actions/lib/utils'
|
|
8
|
-
|
|
9
|
-
export const objectToOptionItem = (
|
|
10
|
-
// TODO переместить в более глобальное место
|
|
11
|
-
obj: UI_I_ArbitraryObject<string>
|
|
12
|
-
): UI_I_OptionItem[] => {
|
|
13
|
-
const result = []
|
|
14
|
-
for (const key in obj) {
|
|
15
|
-
result.push({
|
|
16
|
-
text: obj[key],
|
|
17
|
-
value: key,
|
|
18
|
-
})
|
|
19
|
-
}
|
|
20
|
-
return result
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export const getStepPositionByField = (field: string): number => {
|
|
24
|
-
if (checkAllField(field)) {
|
|
25
|
-
return UI_E_Fields[field]
|
|
26
|
-
} else if (field.includes('disk_devices')) {
|
|
27
|
-
return UI_E_Fields.disk_devices
|
|
28
|
-
} else if (field.includes('network_devices')) {
|
|
29
|
-
return UI_E_Fields.network_devices
|
|
30
|
-
}
|
|
31
|
-
return 5
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export const stepItemsFunc = (
|
|
35
|
-
localization: UI_I_Localization,
|
|
36
|
-
project: UI_T_Project
|
|
37
|
-
): UI_I_VerticalStepItem[] => {
|
|
38
|
-
if (project === 'sphere') {
|
|
39
|
-
return [
|
|
40
|
-
{
|
|
41
|
-
text: localization.selectCreationType,
|
|
42
|
-
disabled: false,
|
|
43
|
-
complete: false,
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
text: localization.selectNameFolder,
|
|
47
|
-
disabled: true,
|
|
48
|
-
complete: false,
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
text: localization.selectComputeResource,
|
|
52
|
-
disabled: true,
|
|
53
|
-
complete: false,
|
|
54
|
-
},
|
|
55
|
-
{ text: localization.selectStorage, disabled: true, complete: false },
|
|
56
|
-
{ text: localization.compatibility, disabled: true, complete: false },
|
|
57
|
-
{ text: localization.selectGuestOS, disabled: true, complete: false },
|
|
58
|
-
{
|
|
59
|
-
text: localization.customizeHardware,
|
|
60
|
-
disabled: true,
|
|
61
|
-
complete: false,
|
|
62
|
-
},
|
|
63
|
-
{ text: localization.readyComplete, disabled: true, complete: false },
|
|
64
|
-
]
|
|
65
|
-
}
|
|
66
|
-
return [
|
|
67
|
-
{
|
|
68
|
-
text: localization.selectCreationType,
|
|
69
|
-
disabled: false,
|
|
70
|
-
complete: false,
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
text: localization.selectName,
|
|
74
|
-
disabled: true,
|
|
75
|
-
complete: false,
|
|
76
|
-
},
|
|
77
|
-
{ text: localization.selectStorage, disabled: true, complete: false },
|
|
78
|
-
{ text: localization.compatibility, disabled: true, complete: false },
|
|
79
|
-
{
|
|
80
|
-
text: localization.selectGuestOSMachineType,
|
|
81
|
-
disabled: true,
|
|
82
|
-
complete: false,
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
text: localization.customizeHardware,
|
|
86
|
-
disabled: true,
|
|
87
|
-
complete: false,
|
|
88
|
-
},
|
|
89
|
-
{ text: localization.readyComplete, disabled: true, complete: false },
|
|
90
|
-
]
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export const subTitleFunc = (
|
|
94
|
-
localization: UI_I_Localization,
|
|
95
|
-
project: UI_T_Project
|
|
96
|
-
): string[] => {
|
|
97
|
-
if (project === 'sphere') {
|
|
98
|
-
return [
|
|
99
|
-
localization.howWouldLikeCreateVirtualMachine,
|
|
100
|
-
localization.specifyUniqueNameTargetLocation,
|
|
101
|
-
localization.selectDestinationComputeResourceOperation,
|
|
102
|
-
localization.selectStorageConfigurationDiskFiles,
|
|
103
|
-
localization.selectCompatibilityVmDependingHostsEnvironment,
|
|
104
|
-
localization.chooseGuestOSInstalledVM,
|
|
105
|
-
localization.configureVirtualMachineHardware,
|
|
106
|
-
localization.clickFinishStartCreation,
|
|
107
|
-
]
|
|
108
|
-
}
|
|
109
|
-
return [
|
|
110
|
-
localization.howWouldLikeCreateVirtualMachine,
|
|
111
|
-
localization.specifyUniqueName,
|
|
112
|
-
localization.selectStorageConfigurationDiskFiles,
|
|
113
|
-
localization.selectCompatibilityVmDependingHostsEnvironment,
|
|
114
|
-
localization.chooseGuestOSInstalledVmAndMachineTypeUsedCreateVm,
|
|
115
|
-
localization.configureVirtualMachineHardware,
|
|
116
|
-
localization.clickFinishStartCreation,
|
|
117
|
-
]
|
|
118
|
-
}
|
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="select-name">
|
|
3
|
-
<atoms-alert
|
|
4
|
-
v-show="errors.length"
|
|
5
|
-
status="alert-danger"
|
|
6
|
-
:items="errors"
|
|
7
|
-
@remove="onRemoveValidationErrors"
|
|
8
|
-
/>
|
|
9
|
-
|
|
10
|
-
<form id="virtual-machine-form" @submit.prevent>
|
|
11
|
-
<label for="virtual-machine-name"
|
|
12
|
-
>{{ localization.virtualMachineName }}:</label
|
|
13
|
-
>
|
|
14
|
-
<input id="virtual-machine-name" v-model.trim="vmName" type="text" />
|
|
15
|
-
<div id="vm-name-help-icon" class="content-signpost relative">
|
|
16
|
-
<atoms-the-icon
|
|
17
|
-
class="icon-show-help"
|
|
18
|
-
fill="#0072a3"
|
|
19
|
-
width="24px"
|
|
20
|
-
height="24px"
|
|
21
|
-
name="info-circle"
|
|
22
|
-
@click="isShowHelp = !isShowHelp"
|
|
23
|
-
/>
|
|
24
|
-
<atoms-tooltip-signpost
|
|
25
|
-
v-if="isShowHelp"
|
|
26
|
-
test-id="help-signpost"
|
|
27
|
-
elem-id="vm-name-help-icon"
|
|
28
|
-
@hide="isShowHelp = false"
|
|
29
|
-
>
|
|
30
|
-
<p>
|
|
31
|
-
{{ localization.vmNameValidationDescription2 }}
|
|
32
|
-
</p>
|
|
33
|
-
</atoms-tooltip-signpost>
|
|
34
|
-
</div>
|
|
35
|
-
</form>
|
|
36
|
-
|
|
37
|
-
<template v-if="props.project === 'sphere'">
|
|
38
|
-
<p class="new-vm-name-and-folder-instructions mt-1">
|
|
39
|
-
{{ localization.selectLocationVirtualMachine }}
|
|
40
|
-
</p>
|
|
41
|
-
<div class="tree-view-wrap">
|
|
42
|
-
<common-vm-actions-add-folder-tree-view
|
|
43
|
-
:data-center="props.dataCenter"
|
|
44
|
-
@select-node="onSelectNode"
|
|
45
|
-
/>
|
|
46
|
-
</div>
|
|
47
|
-
</template>
|
|
48
|
-
</div>
|
|
49
|
-
</template>
|
|
50
|
-
|
|
51
|
-
<script setup lang="ts">
|
|
52
|
-
// import { API_UI_I_Error } from '~/lib/models/store/interfaces'
|
|
53
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
54
|
-
import { UI_T_Project } from '~/lib/models/types'
|
|
55
|
-
import { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
|
|
56
|
-
|
|
57
|
-
const props = defineProps<{
|
|
58
|
-
nameFormSubmit: number
|
|
59
|
-
show: boolean
|
|
60
|
-
project: UI_T_Project
|
|
61
|
-
dataCenter?: UI_I_TreeNode // для сферы
|
|
62
|
-
}>()
|
|
63
|
-
const emits = defineEmits<{
|
|
64
|
-
(event: 'submit', value: [string, UI_I_TreeNode | null]): void
|
|
65
|
-
(event: 'loading', value: boolean): void
|
|
66
|
-
(
|
|
67
|
-
event: 'check-name',
|
|
68
|
-
value: [[string, UI_I_TreeNode | null], (error: any) => void]
|
|
69
|
-
): void
|
|
70
|
-
}>()
|
|
71
|
-
|
|
72
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
73
|
-
|
|
74
|
-
const vmName = ref<string>('')
|
|
75
|
-
|
|
76
|
-
const selectedNode = ref<UI_I_TreeNode | null>(null)
|
|
77
|
-
const onSelectNode = (node: UI_I_TreeNode): void => {
|
|
78
|
-
selectedNode.value = node
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
watch(
|
|
82
|
-
() => props.nameFormSubmit,
|
|
83
|
-
() => {
|
|
84
|
-
submit()
|
|
85
|
-
}
|
|
86
|
-
)
|
|
87
|
-
|
|
88
|
-
const isParentDatacenter = (node: UI_I_TreeNode | null): boolean => {
|
|
89
|
-
if (!node) return false
|
|
90
|
-
|
|
91
|
-
if (node.parent?.type === 'datacenter') return true
|
|
92
|
-
if (node.parent?.type === 'folder') return isParentDatacenter(node.parent)
|
|
93
|
-
return false
|
|
94
|
-
}
|
|
95
|
-
const submit = async (): Promise<void> => {
|
|
96
|
-
const name = vmName.value
|
|
97
|
-
|
|
98
|
-
if (name !== '') {
|
|
99
|
-
const isNameValid = await checkNameIsValid(name)
|
|
100
|
-
if (!isNameValid) return
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
if (props.project === 'sphere') {
|
|
104
|
-
const isDatacenterFolder = isParentDatacenter(selectedNode.value)
|
|
105
|
-
|
|
106
|
-
if (
|
|
107
|
-
selectedNode.value?.type !== 'datacenter' &&
|
|
108
|
-
selectedNode.value?.type === 'folder' &&
|
|
109
|
-
!isDatacenterFolder
|
|
110
|
-
) {
|
|
111
|
-
showValidationErrors([
|
|
112
|
-
localization.value.enterValidLocationVirtualMachine,
|
|
113
|
-
])
|
|
114
|
-
return
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
onRemoveValidationErrors()
|
|
119
|
-
emits('submit', [name, selectedNode.value])
|
|
120
|
-
}
|
|
121
|
-
const checkNameIsValid = async (name: string): Promise<boolean> => {
|
|
122
|
-
emits('loading', true)
|
|
123
|
-
|
|
124
|
-
return new Promise((resolve) => {
|
|
125
|
-
emits('check-name', [
|
|
126
|
-
[name, selectedNode.value],
|
|
127
|
-
(error) => {
|
|
128
|
-
emits('loading', false)
|
|
129
|
-
|
|
130
|
-
const status = error?.statusCode || 200
|
|
131
|
-
switch (status) {
|
|
132
|
-
case 406: // Invalid name
|
|
133
|
-
showValidationErrors([
|
|
134
|
-
localization.value.vmNameValidationDescription2,
|
|
135
|
-
])
|
|
136
|
-
resolve(false)
|
|
137
|
-
break
|
|
138
|
-
case 409: // Name exist
|
|
139
|
-
showValidationErrors([
|
|
140
|
-
localization.value.vmNameExistInSelectedLocation,
|
|
141
|
-
])
|
|
142
|
-
resolve(false)
|
|
143
|
-
break
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
resolve(true)
|
|
147
|
-
},
|
|
148
|
-
])
|
|
149
|
-
})
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
const errors = ref<string[]>([])
|
|
153
|
-
const showValidationErrors = (data: string[]): void => {
|
|
154
|
-
errors.value = data
|
|
155
|
-
}
|
|
156
|
-
const onRemoveValidationErrors = (): void => {
|
|
157
|
-
errors.value = []
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
watch(
|
|
161
|
-
() => props.show,
|
|
162
|
-
(newValue) => {
|
|
163
|
-
if (!newValue) return
|
|
164
|
-
|
|
165
|
-
const input = document.getElementById('virtual-machine-name')
|
|
166
|
-
if (!input) return
|
|
167
|
-
|
|
168
|
-
setTimeout(() => {
|
|
169
|
-
input.focus()
|
|
170
|
-
}, 0)
|
|
171
|
-
}
|
|
172
|
-
)
|
|
173
|
-
|
|
174
|
-
const isShowHelp = ref<boolean>(false)
|
|
175
|
-
</script>
|
|
176
|
-
|
|
177
|
-
<style scoped lang="scss">
|
|
178
|
-
.select-name {
|
|
179
|
-
form {
|
|
180
|
-
display: flex;
|
|
181
|
-
align-items: center;
|
|
182
|
-
padding-top: 20px;
|
|
183
|
-
|
|
184
|
-
label {
|
|
185
|
-
width: 216px;
|
|
186
|
-
}
|
|
187
|
-
input {
|
|
188
|
-
width: 345px;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.tree-view-wrap {
|
|
193
|
-
position: relative;
|
|
194
|
-
border: 1px solid #000;
|
|
195
|
-
padding: 5px;
|
|
196
|
-
max-height: 300px;
|
|
197
|
-
min-height: 200px;
|
|
198
|
-
overflow: auto;
|
|
199
|
-
margin-bottom: 10px;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
.content-signpost {
|
|
203
|
-
.icon-show-help {
|
|
204
|
-
cursor: pointer;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.help-title {
|
|
208
|
-
font-size: 22px;
|
|
209
|
-
margin-bottom: 24px;
|
|
210
|
-
}
|
|
211
|
-
.signpost {
|
|
212
|
-
max-width: 360px;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
</style>
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="select-storage">
|
|
3
|
-
<atoms-alert
|
|
4
|
-
v-show="errors.length"
|
|
5
|
-
status="alert-danger"
|
|
6
|
-
:items="errors"
|
|
7
|
-
@remove="onRemoveValidationErrors"
|
|
8
|
-
/>
|
|
9
|
-
<div class="table-wrap">
|
|
10
|
-
<atoms-table-data-grid
|
|
11
|
-
v-model:selected-row="selectedRow"
|
|
12
|
-
v-model:column-keys="columnKeys"
|
|
13
|
-
v-model:page-size="pagination.pageSize"
|
|
14
|
-
v-model:page="pagination.page"
|
|
15
|
-
type="radio"
|
|
16
|
-
:head-items="headItems"
|
|
17
|
-
:body-items="bodyItems"
|
|
18
|
-
:total-items="bodyItems.length"
|
|
19
|
-
:total-pages="1"
|
|
20
|
-
server-off
|
|
21
|
-
hide-page-size
|
|
22
|
-
@sorting="sorting"
|
|
23
|
-
@change="changeStorage"
|
|
24
|
-
>
|
|
25
|
-
<template #icon="{ item }">
|
|
26
|
-
<span :class="['datagrid-cell-icon', item.data]" />
|
|
27
|
-
<span class="text-ellipsis">
|
|
28
|
-
{{ item.text }}
|
|
29
|
-
</span>
|
|
30
|
-
</template>
|
|
31
|
-
</atoms-table-data-grid>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<div v-if="!hideCompatibility" class="compatibility-wrap">
|
|
35
|
-
<p class="compatibility">
|
|
36
|
-
{{ localization.compatibility }}
|
|
37
|
-
</p>
|
|
38
|
-
<div class="compatibility-message flex-align-center">
|
|
39
|
-
<template v-if="selectedStorage">
|
|
40
|
-
<div class="icon-status-ok" />
|
|
41
|
-
<span>{{ localization.compatibilityChecksSucceeded }}</span>
|
|
42
|
-
</template>
|
|
43
|
-
<div v-else>
|
|
44
|
-
<br />
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
</template>
|
|
50
|
-
|
|
51
|
-
<script setup lang="ts">
|
|
52
|
-
import { UI_I_Pagination } from '~/lib/models/interfaces'
|
|
53
|
-
import { UI_I_TablePayload } from '~/lib/models/store/interfaces'
|
|
54
|
-
import { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
|
|
55
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
56
|
-
import {
|
|
57
|
-
UI_I_ColumnKey,
|
|
58
|
-
UI_I_HeadItem,
|
|
59
|
-
UI_I_BodyItem,
|
|
60
|
-
} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
|
|
61
|
-
import * as table from '~/components/common/vm/actions/common/select/storage/lib/config/config'
|
|
62
|
-
|
|
63
|
-
const props = defineProps<{
|
|
64
|
-
storageSubmit: number
|
|
65
|
-
datastore: UI_I_DatastoreTableItem[]
|
|
66
|
-
storage: UI_I_DatastoreTableItem
|
|
67
|
-
hideCompatibility?: boolean
|
|
68
|
-
getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
|
|
69
|
-
}>()
|
|
70
|
-
const emits = defineEmits<{
|
|
71
|
-
(event: 'submit', value: UI_I_DatastoreTableItem): void
|
|
72
|
-
}>()
|
|
73
|
-
|
|
74
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
75
|
-
|
|
76
|
-
const headItems = ref<UI_I_HeadItem[]>(table.headItems(localization.value))
|
|
77
|
-
const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
|
|
78
|
-
watch(localization, () => {
|
|
79
|
-
columnKeys.value = table.columnKeys(localization.value)
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
const bodyItems = computed<UI_I_BodyItem[][]>(() => {
|
|
83
|
-
return table.bodyItems(props.datastore || [], localization.value)
|
|
84
|
-
})
|
|
85
|
-
|
|
86
|
-
const sort = ref<string | null>(null)
|
|
87
|
-
const pagination = ref<UI_I_Pagination>({
|
|
88
|
-
page: 1,
|
|
89
|
-
pageSize: 100,
|
|
90
|
-
})
|
|
91
|
-
|
|
92
|
-
const sorting = (data: [string, boolean]): void => {
|
|
93
|
-
const [column, status] = data
|
|
94
|
-
const direction = status ? 'asc' : 'desc'
|
|
95
|
-
sort.value = `${column}.${direction}`
|
|
96
|
-
|
|
97
|
-
getStorage()
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
const getStorage = async (): Promise<void> => {
|
|
101
|
-
const payload: UI_I_TablePayload = {
|
|
102
|
-
pagination: pagination.value,
|
|
103
|
-
sortBy: sort.value,
|
|
104
|
-
type: 'datastore',
|
|
105
|
-
schema: 'full',
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
props.getDatastoreTableFunc(payload).then(() => {
|
|
109
|
-
selectedRow.value = null
|
|
110
|
-
setStorageFromProps()
|
|
111
|
-
})
|
|
112
|
-
}
|
|
113
|
-
getStorage()
|
|
114
|
-
|
|
115
|
-
const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
|
|
116
|
-
const selectedRow = ref<number | null>(null)
|
|
117
|
-
const changeStorage = (index: number): void => {
|
|
118
|
-
if (!props.datastore) return
|
|
119
|
-
selectedStorage.value = props.datastore[index]
|
|
120
|
-
selectedRow.value = index
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
const setStorageFromProps = (): void => {
|
|
124
|
-
if (!props.storage) return
|
|
125
|
-
props.datastore.forEach((item, index) => {
|
|
126
|
-
if (item.id === props.storage.id) changeStorage(index)
|
|
127
|
-
})
|
|
128
|
-
}
|
|
129
|
-
watch(
|
|
130
|
-
() => props.storage,
|
|
131
|
-
() => {
|
|
132
|
-
setStorageFromProps()
|
|
133
|
-
},
|
|
134
|
-
{ immediate: true }
|
|
135
|
-
)
|
|
136
|
-
|
|
137
|
-
watch(
|
|
138
|
-
() => props.storageSubmit,
|
|
139
|
-
() => {
|
|
140
|
-
submit()
|
|
141
|
-
}
|
|
142
|
-
)
|
|
143
|
-
const submit = (): void => {
|
|
144
|
-
if (!selectedStorage.value) {
|
|
145
|
-
showValidationErrors([localization.value.selectValidDestinationStorage])
|
|
146
|
-
return
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
emits('submit', selectedStorage.value)
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
const errors = ref<string[]>([])
|
|
153
|
-
const showValidationErrors = (arr: string[]): void => {
|
|
154
|
-
errors.value = arr
|
|
155
|
-
}
|
|
156
|
-
const onRemoveValidationErrors = (): void => {
|
|
157
|
-
errors.value = []
|
|
158
|
-
}
|
|
159
|
-
</script>
|
|
160
|
-
|
|
161
|
-
<style scoped lang="scss">
|
|
162
|
-
.select-storage {
|
|
163
|
-
flex: 1;
|
|
164
|
-
display: flex;
|
|
165
|
-
flex-direction: column;
|
|
166
|
-
|
|
167
|
-
.table-wrap {
|
|
168
|
-
flex: 1;
|
|
169
|
-
|
|
170
|
-
.datagrid-cell-icon {
|
|
171
|
-
margin-right: 6px;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
:deep(.relative) {
|
|
175
|
-
height: 100%;
|
|
176
|
-
|
|
177
|
-
.datagrid-outer-wrapper {
|
|
178
|
-
height: 100%;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.compatibility-wrap {
|
|
184
|
-
padding-top: 10px;
|
|
185
|
-
|
|
186
|
-
.compatibility-message {
|
|
187
|
-
border: 1px solid #000;
|
|
188
|
-
padding-top: 5px;
|
|
189
|
-
padding-left: 5px;
|
|
190
|
-
overflow: auto;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
</style>
|