Skip to content

Commit 8acd7f5

Browse files
nvazqueznvazquez
committed
Fix UI for pagination and proper listing
1 parent 466e888 commit 8acd7f5

4 files changed

Lines changed: 127 additions & 61 deletions

File tree

‎engine/schema/src/main/java/com/cloud/vm/dao/ImportVMTaskDaoImpl.java‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
import com.cloud.utils.db.SearchBuilder;
2323
import com.cloud.utils.db.SearchCriteria;
2424
import com.cloud.vm.ImportVMTaskVO;
25-
import org.apache.cloudstack.acl.RoleVO;
2625
import org.apache.commons.lang3.StringUtils;
2726
import org.springframework.stereotype.Component;
2827

@@ -63,7 +62,7 @@ public Pair<List<ImportVMTaskVO>, Integer> listImportVMTasks(Long zoneId, Long a
6362
if (convertHostId != null) {
6463
sc.setParameters("convertHostId", convertHostId);
6564
}
66-
Filter filter = new Filter(RoleVO.class, "created", false, startIndex, pageSizeVal);
65+
Filter filter = new Filter(ImportVMTaskVO.class, "created", false, startIndex, pageSizeVal);
6766
return searchAndCount(sc, filter, showCompleted);
6867
}
6968
}

‎ui/public/locales/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1244,6 +1244,7 @@
12441244
"label.import.instance": "Import Instance",
12451245
"label.import.offering": "Import Offering",
12461246
"label.import.role": "Import Role",
1247+
"label.import.vm.tasks": "Import VM Tasks",
12471248
"label.import.volume": "Import Volume",
12481249
"label.inactive": "Inactive",
12491250
"label.inbuilt": "Inbuilt",
@@ -3520,6 +3521,7 @@
35203521
"message.host.dedication.released": "Host dedication released.",
35213522
"message.host.external.datadisk": "Usage of data disks for the selected template is not applicable",
35223523
"message.import.running.instance.warning": "The selected VM is powered-on on the VMware Datacenter. The recommended state to convert a VMware VM into KVM is powered-off after a graceful shutdown of the guest OS.",
3524+
"message.import.vm.tasks": "Import from VMware to KVM tasks",
35233525
"message.import.volume": "Please specify the domain, account or project name. <br>If not set, the volume will be imported for the caller.",
35243526
"message.info.cloudian.console": "Cloudian Management Console should open in another window.",
35253527
"message.installwizard.cloudstack.helptext.website": " * Project website:\t ",

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

Lines changed: 94 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -16,56 +16,80 @@
1616
// under the License.
1717

1818
<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>
19+
<a-row :gutter="12">
20+
<a-col :md="24" :lg="24">
21+
<a-card class="instances-card">
22+
<template #title>
23+
{{ $t('label.import.vm.tasks') }}
24+
<a-tooltip :title="$t('message.import.vm.tasks')">
25+
<info-circle-outlined />
26+
</a-tooltip>
27+
<a-button
28+
style="margin-left: 12px; margin-top: 4px"
29+
:loading="loading"
30+
size="small"
31+
shape="round"
32+
@click="this.$emit('fetch-import-vm-tasks')" >
33+
<template #icon><reload-outlined /></template>
34+
</a-button>
35+
<span style="float: right; width: 50%">
36+
<a-select
37+
:placeholder="$t('label.filterby')"
38+
:value="filter"
39+
style="min-width: 100px; margin-left: 10px; margin-bottom: 5px"
40+
size=small
41+
@change="onFilterChange"
42+
showSearch
43+
optionFilterProp="label"
44+
:filterOption="(input, option) => {
45+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
46+
}"
47+
>
48+
<template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>
49+
<a-select-option
50+
v-for="filter in filters"
51+
:key="filter"
52+
:label="$t('label.' + filter)"
53+
>
54+
{{ $t('label.' + filter) }}
55+
</a-select-option>
56+
</a-select>
57+
</span>
6658
</template>
67-
</a-table>
68-
</a-card>
59+
<a-table
60+
:data-source="tasks"
61+
class="instances-card-table"
62+
size="middle"
63+
:pagination="false"
64+
:columns="columns">
65+
<template #bodyCell="{ column, record }">
66+
<template v-if="column.key === 'convertinstancehostid'">
67+
<router-link :to="{ path: '/host/' + record.convertinstancehostid }">{{ record.convertinstancehostname }}</router-link>
68+
</template>
69+
<template v-else-if="column.key === 'displayname'">
70+
<router-link v-if="record.virtualmachineid" :to="{ path: '/vm/' + record.virtualmachineid }">{{ record.displayname }}</router-link>
71+
<span v-else>{{ record.displayname }}</span>
72+
</template>
73+
</template>
74+
</a-table>
75+
<div class="instances-card-footer">
76+
<a-pagination
77+
class="row-element"
78+
size="small"
79+
:current="page"
80+
:pageSize="pageSize"
81+
:total="total"
82+
:showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
83+
@change="onPaginationChange"
84+
showQuickJumper>
85+
<template #buildOptionText="props">
86+
<span>{{ props.value }} / {{ $t('label.page') }}</span>
87+
</template>
88+
</a-pagination>
89+
</div>
90+
</a-card>
91+
</a-col>
92+
</a-row>
6993
</template>
7094

7195
<script>
@@ -81,6 +105,22 @@ export default {
81105
loading: {
82106
type: Boolean,
83107
required: false
108+
},
109+
filter: {
110+
type: String,
111+
required: false
112+
},
113+
total: {
114+
type: Number,
115+
required: true
116+
},
117+
page: {
118+
type: Number,
119+
required: true
120+
},
121+
pageSize: {
122+
type: Number,
123+
required: true
84124
}
85125
},
86126
data () {
@@ -139,11 +179,13 @@ export default {
139179
},
140180
methods: {
141181
fetchData () {
142-
this.$emit('fetch-import-vm-tasks', this.filterValue)
182+
this.$emit('fetch-import-vm-tasks')
143183
},
144184
onFilterChange (e) {
145-
this.filterValue = e
146-
this.fetchData()
185+
this.$emit('change-filter', e)
186+
},
187+
onPaginationChange (page, size) {
188+
this.$emit('change-pagination', page, size)
147189
}
148190
}
149191
}

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

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -497,11 +497,17 @@
497497
</a-col>
498498
</a-row>
499499
</a-tab-pane>
500-
<a-tab-pane :key=2 tab="Import VM Tasks" v-if="isMigrateFromVmware">
500+
<a-tab-pane :key=2 :tab="$t('label.import.vm.tasks')" v-if="isMigrateFromVmware">
501501
<ImportVmTasks
502502
:tasks="importVmTasks"
503503
:loading="loadingImportVmTasks"
504+
:filter="importVmTasksFilter"
505+
:total="itemCount.tasks || 0"
506+
:page="page.tasks"
507+
:pageSize="pageSize.tasks"
504508
@fetch-import-vm-tasks="fetchImportVmTasks"
509+
@change-pagination="onChangeImportTasksPagination"
510+
@change-filter="onChangeImportTasksFilter"
505511
/>
506512
</a-tab-pane>
507513
</a-tabs>
@@ -704,11 +710,13 @@ export default {
704710
},
705711
page: {
706712
unmanaged: 1,
707-
managed: 1
713+
managed: 1,
714+
tasks: 1
708715
},
709716
pageSize: {
710717
unmanaged: 10,
711-
managed: 10
718+
managed: 10,
719+
tasks: 10
712720
},
713721
searchFilters: {
714722
unmanaged: [],
@@ -765,12 +773,14 @@ export default {
765773
selectedVmwareVcenter: undefined,
766774
activeTabKey: 1,
767775
loadingImportVmTasks: false,
768-
importVmTasks: []
776+
importVmTasks: [],
777+
importVmTasksFilter: 'running'
769778
}
770779
},
771780
created () {
772781
this.page.unmanaged = parseInt(this.$route.query.unmanagedpage || 1)
773782
this.page.managed = parseInt(this.$route.query.managedpage || 1)
783+
this.page.tasks = parseInt(this.$route.query.tasks || 1)
774784
this.initForm()
775785
this.fetchData()
776786
},
@@ -1102,6 +1112,7 @@ export default {
11021112
this.page.managed = 1
11031113
this.managedInstances = []
11041114
this.managedInstancesSelectedRowKeys = []
1115+
this.page.tasks = 1
11051116
this.activeTabKey = 1
11061117
},
11071118
onSelectHypervisor (value) {
@@ -1178,15 +1189,27 @@ export default {
11781189
this.fetchImportVmTasks()
11791190
}
11801191
},
1181-
fetchImportVmTasks (filter) {
1192+
onChangeImportTasksPagination (page, pagesize) {
1193+
this.page.tasks = page
1194+
this.pageSize.tasks = pagesize
1195+
this.fetchImportVmTasks()
1196+
},
1197+
onChangeImportTasksFilter (filter) {
1198+
this.importVmTasksFilter = filter
1199+
this.fetchImportVmTasks()
1200+
},
1201+
fetchImportVmTasks () {
11821202
this.loadingImportVmTasks = true
11831203
const params = {
1184-
zoneid: this.zoneId
1204+
zoneid: this.zoneId,
1205+
page: this.page.tasks,
1206+
pagesize: this.pageSize.tasks
11851207
}
1186-
if (filter && filter === 'completed') {
1208+
if (this.importVmTasksFilter === 'completed') {
11871209
params.showcompleted = true
11881210
}
11891211
getAPI('listImportVmTasks', params).then(response => {
1212+
this.itemCount.tasks = response.listimportvmtasksresponse.count
11901213
this.importVmTasks = response.listimportvmtasksresponse.importvmtask || []
11911214
}).catch(error => {
11921215
this.$notifyError(error)

0 commit comments

Comments
 (0)