Skip to content

Commit c5611be

Browse files
RitchieVincentrohityadavcloud
RitchieVincent
authored and
rohityadavcloud
committed
compute: Custom VM migration form (#67)
Custom VM migration form Signed-off-by: Rohit Yadav <[email protected]>
1 parent 21036bf commit c5611be

File tree

7 files changed

+673
-225
lines changed

7 files changed

+673
-225
lines changed

‎ui/package-lock.json

+405-209
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@
3333
},
3434
"dependencies": {
3535
"@antv/data-set": "^0.10.2",
36-
"@fortawesome/fontawesome-svg-core": "^1.2.25",
37-
"@fortawesome/free-brands-svg-icons": "^5.11.2",
38-
"@fortawesome/free-regular-svg-icons": "^5.11.2",
39-
"@fortawesome/free-solid-svg-icons": "^5.11.2",
36+
"@fortawesome/fontawesome-svg-core": "^1.2.26",
37+
"@fortawesome/free-brands-svg-icons": "^5.12.0",
38+
"@fortawesome/free-regular-svg-icons": "^5.12.0",
39+
"@fortawesome/free-solid-svg-icons": "^5.12.0",
4040
"@fortawesome/vue-fontawesome": "^0.1.8",
41-
"ant-design-vue": "~1.4.8",
41+
"ant-design-vue": "~1.4.10",
4242
"axios": "^0.19.0",
43-
"core-js": "^3.4.7",
43+
"core-js": "^3.4.8",
4444
"enquire.js": "^2.1.6",
4545
"js-cookie": "^2.2.1",
4646
"lodash.get": "^4.4.2",
4747
"lodash.pick": "^4.4.0",
4848
"md5": "^2.2.1",
4949
"moment": "^2.24.0",
5050
"node-emoji": "^1.10.0",
51-
"npm-check-updates": "^3.2.2",
51+
"npm-check-updates": "^4.0.1",
5252
"nprogress": "^0.2.0",
5353
"viser-vue": "^2.4.7",
5454
"vue": "^2.6.10",
@@ -76,7 +76,7 @@
7676
"babel-plugin-import": "^1.13.0",
7777
"eslint": "^6.7.2",
7878
"eslint-plugin-html": "^6.0.0",
79-
"eslint-plugin-import": "^2.18.2",
79+
"eslint-plugin-import": "^2.19.1",
8080
"eslint-plugin-node": "^10.0.0",
8181
"eslint-plugin-promise": "^4.2.1",
8282
"eslint-plugin-standard": "^4.0.1",

‎ui/src/locales/en.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -629,7 +629,7 @@
629629
"memorytotalgb": "Total",
630630
"memoryused": "Used",
631631
"memoryusedgb": "Used",
632-
"memused": "Mem Usage",
632+
"memused": "Memory Usage",
633633
"message.edit.account": "Edit (\"-1\" indicates no limit to the amount of resources create)",
634634
"minCPUNumber": "Min CPU Cores",
635635
"minInstance": "Min Instances",

‎ui/src/utils/methods.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
import { api } from '@/api'
19+
import { message, notification } from 'ant-design-vue'
20+
21+
/**
22+
* Reusable queryAsyncJobResult method
23+
* @param {String} jobId
24+
* @param {String} successMessage
25+
* @param {Function} successMethod
26+
* @param {String} errorMessage
27+
* @param {Function} errorMethod
28+
* @param {String} loadingMessage
29+
* @param {String} catchMessage
30+
* @param {Function} catchMethod
31+
* @param {Number} loadingDuration
32+
*/
33+
export const pollActionCompletion = ({
34+
jobId, successMessage, successMethod, errorMessage, errorMethod, loadingMessage, catchMessage, catchMethod, loadingDuration = 3
35+
}) => {
36+
function runApi () {
37+
api('queryAsyncJobResult', { jobId }).then(json => {
38+
const result = json.queryasyncjobresultresponse
39+
40+
if (result.jobstatus === 1) {
41+
message.success(successMessage || 'Success')
42+
successMethod && successMethod()
43+
} else if (result.jobstatus === 2) {
44+
notification.error({
45+
message: errorMessage || 'Error',
46+
description: result.jobresult.errortext || 'Error'
47+
})
48+
errorMethod && errorMethod()
49+
} else if (result.jobstatus === 0) {
50+
message
51+
.loading(loadingMessage, loadingDuration)
52+
.then(() => runApi())
53+
}
54+
}).catch(e => {
55+
console.error(`${catchMessage} - ${e}`)
56+
catchMethod && catchMethod()
57+
})
58+
}
59+
runApi()
60+
}

‎ui/src/views/AutogenView.vue

+1
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
:confirmLoading="currentAction.loading"
7878
:footer="null"
7979
centered
80+
width="auto"
8081
>
8182
<component :is="currentAction.component" :resource="resource" :loading="loading" v-bind="{currentAction}" />
8283
</a-modal>

‎ui/src/views/auth/Login.vue

+1
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ export default {
176176
loginSuccess (res) {
177177
this.$router.push({ name: 'dashboard' })
178178
this.$message.success('Login Successful')
179+
this.$message.loading('Discoverying Features', 4)
179180
},
180181
requestFailed (err) {
181182
if (err && err.response && err.response.data && err.response.data.loginresponse) {

‎ui/src/views/compute/MigrateWizard.vue

+197-7
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,68 @@
1616
// under the License.
1717

1818
<template>
19-
<div>
20-
{{ resource }}
21-
This needs to implement migrate wizard
22-
</div>
19+
<a-list :dataSource="hosts" itemLayout="vertical" class="list" :loading="loading">
20+
<div slot="header" class="list__header">
21+
<a-input-search
22+
placeholder="Search"
23+
v-model="searchQuery"
24+
@search="fetchData" />
25+
</div>
26+
<a-list-item
27+
slot="renderItem"
28+
slot-scope="host, index"
29+
class="host-item"
30+
:class="{ 'host-item--selected' : selectedIndex === index }"
31+
>
32+
<div class="host-item__row">
33+
<div class="host-item__value">
34+
<span class="host-item__title">{{ $t('name') }}</span>
35+
{{ host.name }}
36+
</div>
37+
<div class="host-item__value host-item__value--small">
38+
<span class="host-item__title">Suitability</span>
39+
<a-icon
40+
class="host-item__suitability-icon"
41+
type="check-circle"
42+
theme="twoTone"
43+
twoToneColor="#52c41a"
44+
v-if="host.suitableformigration" />
45+
<a-icon
46+
class="host-item__suitability-icon"
47+
type="close-circle"
48+
theme="twoTone"
49+
twoToneColor="#f5222d"
50+
v-else />
51+
</div>
52+
<div class="host-item__value host-item__value--full">
53+
<span class="host-item__title">{{ $t('cpuused') }}</span>
54+
{{ host.cpuused }}
55+
</div>
56+
<div class="host-item__value">
57+
<span class="host-item__title">{{ $t('memused') }}</span>
58+
{{ host.memoryused | byteToGigabyte }} GB
59+
</div>
60+
<a-radio
61+
class="host-item__radio"
62+
@click="selectedIndex = index"
63+
:checked="selectedIndex === index"
64+
:disabled="!host.suitableformigration"></a-radio>
65+
</div>
66+
</a-list-item>
67+
<div slot="footer" class="list__footer">
68+
<a-button type="primary" :disabled="selectedIndex === null" @click="submitForm">
69+
{{ $t('OK') }}
70+
</a-button>
71+
</div>
72+
</a-list>
2373
</template>
2474

2575
<script>
76+
import { api } from '@/api'
77+
import { pollActionCompletion } from '@/utils/methods'
2678
2779
export default {
2880
name: 'VMMigrateWizard',
29-
components: {
30-
},
3181
props: {
3282
resource: {
3383
type: Object,
@@ -36,12 +86,152 @@ export default {
3686
},
3787
data () {
3888
return {
89+
loading: true,
90+
hosts: [],
91+
selectedIndex: null,
92+
searchQuery: ''
3993
}
4094
},
95+
mounted () {
96+
this.fetchData()
97+
},
4198
methods: {
99+
fetchData () {
100+
this.loading = true
101+
api('findHostsForMigration', {
102+
virtualmachineid: this.resource.id,
103+
keyword: this.searchQuery,
104+
page: 1,
105+
pagesize: 500
106+
}).then(response => {
107+
this.hosts = response.findhostsformigrationresponse.host
108+
this.loading = false
109+
}).catch(error => {
110+
this.$message.error('Failed to load hosts: ' + error)
111+
})
112+
},
113+
submitForm () {
114+
this.loading = true
115+
api('migrateVirtualMachine', {
116+
hostid: this.hosts[this.selectedIndex].id,
117+
virtualmachineid: this.resource.id
118+
}).then(response => {
119+
this.$store.dispatch('AddAsyncJob', {
120+
title: `Migrating ${this.resource.name}`,
121+
jobid: response.migratevirtualmachineresponse.jobid,
122+
description: this.resource.name,
123+
status: 'progress'
124+
})
125+
pollActionCompletion({
126+
jobId: response.migratevirtualmachineresponse.jobid,
127+
successMessage: `Migration completed successfully for ${this.resource.name}`,
128+
successMethod: () => {
129+
this.$parent.$parent.close()
130+
},
131+
errorMessage: 'Migration failed',
132+
errorMethod: () => {
133+
this.$parent.$parent.close()
134+
},
135+
loadingMessage: `Migration in progress for ${this.resource.name}`,
136+
catchMessage: 'Error encountered while fetching async job result',
137+
catchMethod: () => {
138+
this.$parent.$parent.close()
139+
}
140+
})
141+
this.$parent.$parent.close()
142+
}).catch(error => {
143+
console.error(error)
144+
this.$message.error('Failed to migrate host.')
145+
})
146+
}
147+
},
148+
filters: {
149+
byteToGigabyte: value => {
150+
if (!value) return ''
151+
value = value / Math.pow(10, 9)
152+
return value.toFixed(2)
153+
}
42154
}
43155
}
44156
</script>
45157

46-
<style scoped>
158+
<style scoped lang="scss">
159+
160+
.list {
161+
max-height: 95vh;
162+
width: 95vw;
163+
overflow-y: scroll;
164+
margin: -24px;
165+
166+
@media (min-width: 1000px) {
167+
max-height: 70vh;
168+
width: 60vw;
169+
}
170+
171+
&__header,
172+
&__footer {
173+
padding-left: 20px;
174+
padding-right: 20px;
175+
}
176+
177+
&__footer {
178+
display: flex;
179+
justify-content: flex-end;
180+
}
181+
182+
}
183+
184+
.host-item {
185+
padding-right: 20px;
186+
padding-bottom: 0;
187+
padding-left: 20px;
188+
189+
&--selected {
190+
background-color: #e6f7ff;
191+
}
192+
193+
&__row {
194+
display: flex;
195+
flex-direction: column;
196+
width: 100%;
197+
198+
@media (min-width: 760px) {
199+
flex-direction: row;
200+
}
201+
202+
}
203+
204+
&__value {
205+
display: flex;
206+
flex-direction: column;
207+
align-items: flex-start;
208+
flex: 1;
209+
margin-bottom: 10px;
210+
211+
&--small {
212+
213+
@media (min-width: 760px) {
214+
flex: none;
215+
margin-right: 40px;
216+
margin-left: 40px;
217+
}
218+
219+
}
220+
221+
}
222+
223+
&__title {
224+
font-weight: bold;
225+
}
226+
227+
&__suitability-icon {
228+
margin-top: 5px;
229+
}
230+
231+
&__radio {
232+
display: flex;
233+
align-items: center;
234+
}
235+
236+
}
47237
</style>

0 commit comments

Comments
 (0)