Skip to content
This repository was archived by the owner on Jan 20, 2021. It is now read-only.

Commit 13db15b

Browse files
Hoang Nguyenustcweizhou
Hoang Nguyen
authored and
ustcweizhou
committed
compute: New Instance dialog improvements (#401)
* add scroll to vm info * fix "un-choose" the Zone/Pod/Host and row selected when changing page sections * remove 'un-choose' selection in zone, cluster, pod, host * fix issue when selected page, hidden cpu/ram affinity groups * revert affinityGroup total count * fix error lint & disk offering selection
1 parent 940a526 commit 13db15b

8 files changed

Lines changed: 309 additions & 104 deletions

‎src/views/compute/DeployVM.vue‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,8 @@
137137
<div v-if="zoneSelected">
138138
<compute-offering-selection
139139
:compute-items="options.serviceOfferings"
140+
:row-count="rowCount.serviceOfferings"
141+
:zoneId="zoneId"
140142
:value="serviceOffering ? serviceOffering.id : ''"
141143
:loading="loading.serviceOfferings"
142144
:preFillContent="dataPreFill"
@@ -181,9 +183,12 @@
181183
<div v-if="zoneSelected">
182184
<disk-offering-selection
183185
:items="options.diskOfferings"
186+
:row-count="rowCount.diskOfferings"
187+
:zoneId="zoneId"
184188
:value="diskOffering ? diskOffering.id : ''"
185189
:loading="loading.diskOfferings"
186190
:preFillContent="dataPreFill"
191+
:isIsoSelected="tabKey==='isoid'"
187192
@select-disk-offering-item="($event) => updateDiskOffering($event)"
188193
@handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
189194
></disk-offering-selection>
@@ -205,6 +210,8 @@
205210
<div v-if="zoneSelected">
206211
<affinity-group-selection
207212
:items="options.affinityGroups"
213+
:row-count="rowCount.affinityGroups"
214+
:zoneId="zoneId"
208215
:value="affinityGroupIds"
209216
:loading="loading.affinityGroups"
210217
:preFillContent="dataPreFill"
@@ -221,6 +228,7 @@
221228
<div v-if="zoneSelected">
222229
<network-selection
223230
:items="options.networks"
231+
:row-count="rowCount.networks"
224232
:value="networkOfferingIds"
225233
:loading="loading.networks"
226234
:zoneId="zoneId"
@@ -245,6 +253,8 @@
245253
<div v-if="zoneSelected">
246254
<ssh-key-pair-selection
247255
:items="options.sshKeyPairs"
256+
:row-count="rowCount.sshKeyPairs"
257+
:zoneId="zoneId"
248258
:value="sshKeyPair ? sshKeyPair.name : ''"
249259
:loading="loading.sshKeyPairs"
250260
:preFillContent="dataPreFill"
@@ -393,7 +403,25 @@ export default {
393403
podId: null,
394404
clusterId: null,
395405
zoneSelected: false,
396-
vm: {},
406+
vm: {
407+
name: null,
408+
zoneid: null,
409+
zonename: null,
410+
hypervisor: null,
411+
templateid: null,
412+
templatename: null,
413+
keyboard: null,
414+
keypair: null,
415+
group: null,
416+
affinitygroupids: [],
417+
affinitygroup: [],
418+
serviceofferingid: null,
419+
serviceofferingname: null,
420+
ostypeid: null,
421+
ostypename: null,
422+
rootdisksize: null,
423+
disksize: null
424+
},
397425
options: {
398426
templates: [],
399427
isos: [],
@@ -412,6 +440,7 @@ export default {
412440
bootTypes: [],
413441
bootModes: []
414442
},
443+
rowCount: {},
415444
loading: {
416445
deploy: false,
417446
templates: false,
@@ -709,9 +738,6 @@ export default {
709738
if (this.serviceOffering) {
710739
this.vm.serviceofferingid = this.serviceOffering.id
711740
this.vm.serviceofferingname = this.serviceOffering.displaytext
712-
this.vm.cpunumber = this.serviceOffering.cpunumber
713-
this.vm.cpuspeed = this.serviceOffering.cpuspeed
714-
this.vm.memory = this.serviceOffering.memory
715741
}
716742
717743
if (this.diskOffering) {
@@ -737,7 +763,11 @@ export default {
737763
this.form.setFieldsValue({ isoid: null })
738764
}
739765
this.instanceConfig = { ...this.form.getFieldsValue(), ...fields }
740-
this.vm = Object.assign({}, this.instanceConfig)
766+
Object.keys(fields).forEach(field => {
767+
if (field in this.vm) {
768+
this.vm[field] = this.instanceConfig[field]
769+
}
770+
})
741771
}
742772
})
743773
this.form.getFieldDecorator('computeofferingid', { initialValue: undefined, preserve: true })
@@ -778,7 +808,6 @@ export default {
778808
this.fetchKeyboard()
779809
this.fetchBootTypes()
780810
this.fetchBootModes()
781-
782811
Vue.nextTick().then(() => {
783812
['name', 'keyboard', 'boottype', 'bootmode', 'userdata'].forEach(this.fillValue)
784813
this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
@@ -952,6 +981,12 @@ export default {
952981
description: this.$t('message.template.iso')
953982
})
954983
return
984+
} else if (values.isoid && (!values.diskofferingid || values.diskofferingid === '0')) {
985+
this.$notification.error({
986+
message: 'Request Failed',
987+
description: this.$t('Please select a Disk Offering to continue')
988+
})
989+
return
955990
}
956991
957992
this.loading.deploy = true
@@ -1107,6 +1142,7 @@ export default {
11071142
param.loading = false
11081143
_.map(response, (responseItem, responseKey) => {
11091144
if (Object.keys(responseItem).length === 0) {
1145+
this.rowCount[name] = 0
11101146
this.options[name] = []
11111147
this.$forceUpdate()
11121148
return
@@ -1116,6 +1152,7 @@ export default {
11161152
}
11171153
_.map(responseItem, (response, key) => {
11181154
if (key === 'count') {
1155+
this.rowCount[name] = response
11191156
return
11201157
}
11211158
param.opts = response

‎src/views/compute/wizard/AffinityGroupSelection.vue‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,25 @@
2727
:columns="columns"
2828
:dataSource="items"
2929
:rowKey="record => record.id"
30-
:pagination="{showSizeChanger: true}"
30+
:pagination="false"
3131
:rowSelection="rowSelection"
3232
size="middle"
3333
:scroll="{ y: 225 }"
3434
>
3535
</a-table>
36+
37+
<div style="display: block; text-align: right;">
38+
<a-pagination
39+
size="small"
40+
:current="options.page"
41+
:pageSize="options.pageSize"
42+
:total="rowCount"
43+
:showTotal="total => `Total ${total} items`"
44+
:pageSizeOptions="['10', '20', '40', '80', '100', '500']"
45+
@change="onChangePage"
46+
@showSizeChange="onChangePageSize"
47+
showSizeChanger />
48+
</div>
3649
</div>
3750
</template>
3851

@@ -46,6 +59,10 @@ export default {
4659
type: Array,
4760
default: () => []
4861
},
62+
rowCount: {
63+
type: Number,
64+
default: () => 0
65+
},
4966
value: {
5067
type: Array,
5168
default: () => []
@@ -57,6 +74,10 @@ export default {
5774
preFillContent: {
5875
type: Object,
5976
default: () => {}
77+
},
78+
zoneId: {
79+
type: String,
80+
default: () => ''
6081
}
6182
},
6283
data () {
@@ -74,17 +95,16 @@ export default {
7495
width: '60%'
7596
}
7697
],
77-
selectedRowKeys: []
78-
}
79-
},
80-
computed: {
81-
options () {
82-
return {
98+
selectedRowKeys: [],
99+
oldZoneId: null,
100+
options: {
83101
page: 1,
84102
pageSize: 10,
85-
keyword: ''
103+
keyword: null
86104
}
87-
},
105+
}
106+
},
107+
computed: {
88108
rowSelection () {
89109
return {
90110
type: 'checkbox',
@@ -107,6 +127,10 @@ export default {
107127
this.selectedRowKeys = this.preFillContent.affinitygroupids
108128
this.$emit('select-affinity-group-item', this.preFillContent.affinitygroupids)
109129
} else {
130+
if (this.oldZoneId === this.zoneId) {
131+
return
132+
}
133+
this.oldZoneId = this.zoneId
110134
this.selectedRowKeys = []
111135
this.$emit('select-affinity-group-item', null)
112136
}
@@ -116,12 +140,19 @@ export default {
116140
methods: {
117141
handleSearch (value) {
118142
this.filter = value
143+
this.options.page = 1
144+
this.options.pageSize = 10
119145
this.options.keyword = this.filter
120146
this.$emit('handle-search-filter', this.options)
121147
},
122-
handleTableChange (pagination) {
123-
this.options.page = pagination.current
124-
this.options.pageSize = pagination.pageSize
148+
onChangePage (page, pageSize) {
149+
this.options.page = page
150+
this.options.pageSize = pageSize
151+
this.$emit('handle-search-filter', this.options)
152+
},
153+
onChangePageSize (page, pageSize) {
154+
this.options.page = page
155+
this.options.pageSize = pageSize
125156
this.$emit('handle-search-filter', this.options)
126157
}
127158
}

‎src/views/compute/wizard/ComputeOfferingSelection.vue‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,28 @@
2525
<a-table
2626
:columns="columns"
2727
:dataSource="tableSource"
28-
:pagination="{showSizeChanger: true}"
28+
:pagination="false"
2929
:rowSelection="rowSelection"
3030
:loading="loading"
3131
size="middle"
32-
@change="handleTableChange"
3332
:scroll="{ y: 225 }"
3433
>
3534
<span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('label.cpu') }}</span>
3635
<span slot="ramTitle"><a-icon type="bulb" /> {{ $t('label.memory') }}</span>
3736
</a-table>
37+
38+
<div style="display: block; text-align: right;">
39+
<a-pagination
40+
size="small"
41+
:current="options.page"
42+
:pageSize="options.pageSize"
43+
:total="rowCount"
44+
:showTotal="total => `Total ${total} items`"
45+
:pageSizeOptions="['10', '20', '40', '80', '100', '500']"
46+
@change="onChangePage"
47+
@showSizeChange="onChangePageSize"
48+
showSizeChanger />
49+
</div>
3850
</div>
3951
</template>
4052

@@ -46,6 +58,10 @@ export default {
4658
type: Array,
4759
default: () => []
4860
},
61+
rowCount: {
62+
type: Number,
63+
default: () => 0
64+
},
4965
value: {
5066
type: String,
5167
default: ''
@@ -57,6 +73,10 @@ export default {
5773
preFillContent: {
5874
type: Object,
5975
default: () => {}
76+
},
77+
zoneId: {
78+
type: String,
79+
default: () => ''
6080
}
6181
},
6282
data () {
@@ -79,17 +99,16 @@ export default {
7999
width: '30%'
80100
}
81101
],
82-
selectedRowKeys: []
83-
}
84-
},
85-
computed: {
86-
options () {
87-
return {
102+
selectedRowKeys: [],
103+
oldZoneId: null,
104+
options: {
88105
page: 1,
89106
pageSize: 10,
90-
keyword: ''
107+
keyword: null
91108
}
92-
},
109+
}
110+
},
111+
computed: {
93112
tableSource () {
94113
return this.computeItems.map((item) => {
95114
var cpuNumberValue = item.cpunumber + ''
@@ -137,6 +156,10 @@ export default {
137156
this.selectedRowKeys = [this.preFillContent.computeofferingid]
138157
this.$emit('select-compute-item', this.preFillContent.computeofferingid)
139158
} else {
159+
if (this.oldZoneId === this.zoneId) {
160+
return
161+
}
162+
this.oldZoneId = this.zoneId
140163
if (this.computeItems && this.computeItems.length > 0) {
141164
this.selectedRowKeys = [this.computeItems[0].id]
142165
this.$emit('select-compute-item', this.computeItems[0].id)
@@ -152,12 +175,19 @@ export default {
152175
},
153176
handleSearch (value) {
154177
this.filter = value
178+
this.options.page = 1
179+
this.options.pageSize = 10
155180
this.options.keyword = this.filter
156181
this.$emit('handle-search-filter', this.options)
157182
},
158-
handleTableChange (pagination) {
159-
this.options.page = pagination.current
160-
this.options.pageSize = pagination.pageSize
183+
onChangePage (page, pageSize) {
184+
this.options.page = page
185+
this.options.pageSize = pageSize
186+
this.$emit('handle-search-filter', this.options)
187+
},
188+
onChangePageSize (page, pageSize) {
189+
this.options.page = page
190+
this.options.pageSize = pageSize
161191
this.$emit('handle-search-filter', this.options)
162192
}
163193
}

0 commit comments

Comments
 (0)