Skip to content

Commit 2f08049

Browse files
nvazqueznvazquez
committed
Add separate component for Import VM Tasks
1 parent 2a92813 commit 2f08049

File tree

2 files changed

+161
-108
lines changed

2 files changed

+161
-108
lines changed

‎ui/src/views/tools/ImportVmTasks.vue‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
// Licensed to the Apache Software Foundation (ASF) under one
2+
// or more contributor license agreements. See the NOTICE file
3+
// distributed with this work for additional information
4+
// regarding copyright ownership. The ASF licenses this file
5+
// to you under the Apache License, Version 2.0 (the
6+
// "License"); you may not use this file except in compliance
7+
// with the License. You may obtain a copy of the License at
8+
//
9+
// http://www.apache.org/licenses/LICENSE-2.0
10+
//
11+
// Unless required by applicable law or agreed to in writing,
12+
// software distributed under the License is distributed on an
13+
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
// KIND, either express or implied. See the License for the
15+
// specific language governing permissions and limitations
16+
// under the License.
17+
18+
<template>
19+
<a-card class="instances-card">
20+
<template #title>
21+
Import VM Tasks
22+
<a-tooltip :title="'Running Import VM Tasks'">
23+
<info-circle-outlined />
24+
</a-tooltip>
25+
<a-button
26+
style="margin-left: 12px; margin-top: 4px"
27+
:loading="loading"
28+
size="small"
29+
shape="round"
30+
@click="fetchData()">
31+
<template #icon><reload-outlined /></template>
32+
</a-button>
33+
<a-select
34+
:placeholder="$t('label.filterby')"
35+
:value="importVmTasksFilterValue"
36+
style="min-width: 100px; margin-left: 10px; margin-bottom: 5px"
37+
size=small
38+
@change="onFilterChange"
39+
showSearch
40+
optionFilterProp="label"
41+
:filterOption="(input, option) => {
42+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
43+
}"
44+
>
45+
<template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>
46+
<a-select-option
47+
v-for="filter in filters"
48+
:key="filter"
49+
:label="$t('label.' + filter)"
50+
>
51+
{{ $t('label.' + filter) }}
52+
</a-select-option>
53+
</a-select>
54+
</template>
55+
<a-table
56+
:data-source="tasks"
57+
:columns="columns">
58+
<template #bodyCell="{ column, record }">
59+
<template v-if="column.key === 'convertinstancehostid'">
60+
<router-link :to="{ path: '/host/' + record.convertinstancehostid }">{{ record.convertinstancehostname }}</router-link>
61+
</template>
62+
<template v-else-if="column.key === 'displayname'">
63+
<router-link v-if="record.virtualmachineid" :to="{ path: '/vm/' + record.virtualmachineid }">{{ record.displayname }}</router-link>
64+
<span v-else>{{ record.displayname }}</span>
65+
</template>
66+
</template>
67+
</a-table>
68+
</a-card>
69+
</template>
70+
71+
<script>
72+
export default {
73+
name: 'ImportVmTasks',
74+
components: {
75+
},
76+
props: {
77+
tasks: {
78+
type: Array,
79+
required: true
80+
},
81+
loading: {
82+
type: Boolean,
83+
required: false
84+
}
85+
},
86+
data () {
87+
const columns = [
88+
{
89+
key: 'displayname',
90+
title: 'VM Display Name',
91+
dataIndex: 'displayname'
92+
},
93+
{
94+
key: 'convertinstancehostid',
95+
title: 'Conversion Host',
96+
dataIndex: 'convertinstancehostid'
97+
},
98+
{
99+
key: 'step',
100+
title: 'Current Step',
101+
dataIndex: 'step'
102+
},
103+
{
104+
key: 'stepduration',
105+
title: 'Current Step Duration',
106+
dataIndex: 'stepduration'
107+
},
108+
{
109+
key: 'description',
110+
title: 'Description',
111+
dataIndex: 'description'
112+
},
113+
{
114+
key: 'duration',
115+
title: 'Total Duration',
116+
dataIndex: 'duration'
117+
},
118+
{
119+
key: 'sourcevmname',
120+
title: 'Source VM Name',
121+
dataIndex: 'sourcevmname'
122+
},
123+
{
124+
key: 'vcenter',
125+
title: 'vCenter',
126+
dataIndex: 'vcenter'
127+
},
128+
{
129+
key: 'datacentername',
130+
title: 'Datacenter Name',
131+
dataIndex: 'datacentername'
132+
}
133+
]
134+
return {
135+
columns,
136+
filters: ['running', 'completed'],
137+
filterValue: 'running'
138+
}
139+
},
140+
methods: {
141+
fetchData () {
142+
this.$emit('fetch-import-vm-tasks', this.filterValue)
143+
},
144+
onFilterChange (e) {
145+
this.filterValue = e
146+
this.fetchData()
147+
}
148+
}
149+
}
150+
</script>

‎ui/src/views/tools/ManageInstances.vue‎

Lines changed: 11 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -498,56 +498,11 @@
498498
</a-row>
499499
</a-tab-pane>
500500
<a-tab-pane :key=2 tab="Import VM Tasks" v-if="isMigrateFromVmware">
501-
<a-card class="instances-card">
502-
<template #title>
503-
Import VM Tasks
504-
<a-tooltip :title="'Running Import VM Tasks'">
505-
<info-circle-outlined />
506-
</a-tooltip>
507-
<a-button
508-
style="margin-left: 12px; margin-top: 4px"
509-
:loading="loadingImportVmTasks"
510-
size="small"
511-
shape="round"
512-
@click="fetchImportVmTasks()" >
513-
<template #icon><reload-outlined /></template>
514-
</a-button>
515-
<a-select
516-
:placeholder="$t('label.filterby')"
517-
:value="importVmTasksFilterValue"
518-
style="min-width: 100px; margin-left: 10px; margin-bottom: 5px"
519-
size=small
520-
@change="onImportVmTasksFilterChange"
521-
showSearch
522-
optionFilterProp="label"
523-
:filterOption="(input, option) => {
524-
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
525-
}"
526-
>
527-
<template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>
528-
<a-select-option
529-
v-for="filter in importVmTasksFilters"
530-
:key="filter"
531-
:label="$t('label.' + filter)"
532-
>
533-
{{ $t('label.' + filter) }}
534-
</a-select-option>
535-
</a-select>
536-
</template>
537-
<a-table
538-
:data-source="importVmTasks"
539-
:columns="importVmTasksColumn">
540-
<template #bodyCell="{ column, record }">
541-
<template v-if="column.key === 'convertinstancehostid'">
542-
<router-link :to="{ path: '/host/' + record.convertinstancehostid }">{{ record.convertinstancehostname }}</router-link>
543-
</template>
544-
<template v-else-if="column.key === 'displayname'">
545-
<router-link v-if="record.virtualmachineid" :to="{ path: '/vm/' + record.virtualmachineid }">{{ record.displayname }}</router-link>
546-
<span v-else>{{ record.displayname }}</span>
547-
</template>
548-
</template>
549-
</a-table>
550-
</a-card>
501+
<ImportVmTasks
502+
:tasks="importVmTasks"
503+
:loading="loadingImportVmTasks"
504+
@fetch-import-vm-tasks="fetchImportVmTasks"
505+
/>
551506
</a-tab-pane>
552507
</a-tabs>
553508

@@ -604,6 +559,7 @@ import ImportUnmanagedInstances from '@/views/tools/ImportUnmanagedInstance'
604559
import ResourceIcon from '@/components/view/ResourceIcon'
605560
import SelectVmwareVcenter from '@/views/tools/SelectVmwareVcenter'
606561
import TooltipLabel from '@/components/widgets/TooltipLabel.vue'
562+
import ImportVmTasks from '@/views/tools/ImportVmTasks.vue'
607563
608564
export default {
609565
components: {
@@ -613,7 +569,8 @@ export default {
613569
SearchView,
614570
ImportUnmanagedInstances,
615571
ResourceIcon,
616-
SelectVmwareVcenter
572+
SelectVmwareVcenter,
573+
ImportVmTasks
617574
},
618575
name: 'ManageVms',
619576
data () {
@@ -726,53 +683,6 @@ export default {
726683
dataIndex: 'templatedisplaytext'
727684
}
728685
]
729-
const importVmTasksColumn = [
730-
{
731-
key: 'displayname',
732-
title: 'VM Display Name',
733-
dataIndex: 'displayname'
734-
},
735-
{
736-
key: 'convertinstancehostid',
737-
title: 'Conversion Host',
738-
dataIndex: 'convertinstancehostid'
739-
},
740-
{
741-
key: 'step',
742-
title: 'Current Step',
743-
dataIndex: 'step'
744-
},
745-
{
746-
key: 'stepduration',
747-
title: 'Current Step Duration',
748-
dataIndex: 'stepduration'
749-
},
750-
{
751-
key: 'description',
752-
title: 'Description',
753-
dataIndex: 'description'
754-
},
755-
{
756-
key: 'duration',
757-
title: 'Total Duration',
758-
dataIndex: 'duration'
759-
},
760-
{
761-
key: 'sourcevmname',
762-
title: 'Source VM Name',
763-
dataIndex: 'sourcevmname'
764-
},
765-
{
766-
key: 'vcenter',
767-
title: 'vCenter',
768-
dataIndex: 'vcenter'
769-
},
770-
{
771-
key: 'datacentername',
772-
title: 'Datacenter Name',
773-
dataIndex: 'datacentername'
774-
}
775-
]
776686
return {
777687
options: {
778688
hypervisors: [],
@@ -855,10 +765,7 @@ export default {
855765
selectedVmwareVcenter: undefined,
856766
activeTabKey: 1,
857767
loadingImportVmTasks: false,
858-
importVmTasks: [],
859-
importVmTasksColumn,
860-
importVmTasksFilters: ['running', 'completed'],
861-
importVmTasksFilterValue: 'running'
768+
importVmTasks: []
862769
}
863770
},
864771
created () {
@@ -1271,16 +1178,12 @@ export default {
12711178
this.fetchImportVmTasks()
12721179
}
12731180
},
1274-
onImportVmTasksFilterChange (e) {
1275-
this.importVmTasksFilterValue = e
1276-
this.fetchImportVmTasks()
1277-
},
1278-
fetchImportVmTasks () {
1181+
fetchImportVmTasks (filter) {
12791182
this.loadingImportVmTasks = true
12801183
const params = {
12811184
zoneid: this.zoneId
12821185
}
1283-
if (this.importVmTasksFilterValue === 'completed') {
1186+
if (filter && filter === 'completed') {
12841187
params.showcompleted = true
12851188
}
12861189
getAPI('listImportVmTasks', params).then(response => {

0 commit comments

Comments
 (0)