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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.3.8",
4
+ "version": "1.3.9",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",
@@ -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>