bfg-common 1.3.8 → 1.3.10
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/assets/scss/common/icons/icons-2.scss +222 -222
- package/components/atoms/switch/Switch.vue +107 -107
- package/components/common/browse/blocks/Title.vue +66 -66
- package/components/common/graph/Graph.vue +1 -1
- package/components/common/graph/lib/utils/renderGraph.ts +1 -1
- package/components/common/monitor/advanced/Advanced.vue +1 -1
- package/components/common/monitor/advanced/GraphView.vue +2 -2
- package/components/common/monitor/advanced/tools/lib/utils/countCores.ts +1 -1
- package/components/common/monitor/lib/models/interfaces.ts +1 -1
- package/components/common/monitor/overview/Overview.vue +2 -2
- package/composables/useLocal.ts +38 -38
- package/minify.js +146 -146
- package/package.json +2 -2
- package/public/spice-console/application/codec.js +257 -257
- package/public/spice-console/lib/rasterEngine.js +907 -907
- package/public/spice-console/network/spicechannel.js +369 -369
- 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
|
@@ -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>
|