You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2021/01/13 15:38:54 UTC
[cloudstack-primate] branch master updated: FIX - compute - Create
snapshot from virtual machine with managed storage (#808)
This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new 004d765 FIX - compute - Create snapshot from virtual machine with managed storage (#808)
004d765 is described below
commit 004d765b6d272a563b0bec9bab260fd6e95d6904
Author: Hoang Nguyen <ho...@unitech.vn>
AuthorDate: Wed Jan 13 22:38:44 2021 +0700
FIX - compute - Create snapshot from virtual machine with managed storage (#808)
* compute: add button and modal `take VM volume snapshot`
* add awesome camera retro plugins
* modified to using component
* fix for quiescevm
* add quiescevm to api params
---
src/components/view/ActionButton.vue | 6 +-
src/config/section/compute.js | 9 ++
src/core/ext.js | 4 +-
src/locales/en.json | 3 +
src/views/compute/CreateSnapshotWizard.vue | 201 +++++++++++++++++++++++++++++
5 files changed, 219 insertions(+), 4 deletions(-)
diff --git a/src/components/view/ActionButton.vue b/src/components/view/ActionButton.vue
index 7c75098..df36a16 100644
--- a/src/components/view/ActionButton.vue
+++ b/src/components/view/ActionButton.vue
@@ -36,7 +36,6 @@
(dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
)" >
<a-button
- :icon="action.icon"
:type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
:shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
style="margin-left: 5px"
@@ -45,6 +44,8 @@
<span v-if="!dataView && action.icon === 'plus'">
{{ $t(action.label) }}
</span>
+ <a-icon v-if="(typeof action.icon === 'string')" :type="action.icon" />
+ <font-awesome-icon v-else :icon="action.icon" />
</a-button>
</a-badge>
<a-button
@@ -53,7 +54,6 @@
(!dataView && ((action.listView && ('show' in action ? action.show(resource, $store.getters) : true)) || (action.groupAction && selectedRowKeys.length > 0 && ('groupShow' in action ? action.show(resource, $store.getters) : true)))) ||
(dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
)"
- :icon="action.icon"
:type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
:shape="!dataView && ['plus', 'user-add'].includes(action.icon) ? 'round' : 'circle'"
style="margin-left: 5px"
@@ -62,6 +62,8 @@
<span v-if="!dataView && ['plus', 'user-add'].includes(action.icon)">
{{ $t(action.label) }}
</span>
+ <a-icon v-if="(typeof action.icon === 'string')" :type="action.icon" />
+ <font-awesome-icon v-else :icon="action.icon" />
</a-button>
</a-tooltip>
</span>
diff --git a/src/config/section/compute.js b/src/config/section/compute.js
index cfacfd0..8950140 100644
--- a/src/config/section/compute.js
+++ b/src/config/section/compute.js
@@ -165,6 +165,15 @@ export default {
}
},
{
+ api: 'createSnapshot',
+ icon: ['fas', 'camera-retro'],
+ label: 'label.action.vmstoragesnapshot.create',
+ docHelp: 'adminguide/virtual_machines.html#virtual-machine-snapshots',
+ dataView: true,
+ popup: true,
+ component: () => import('@/views/compute/CreateSnapshotWizard.vue')
+ },
+ {
api: 'assignVirtualMachineToBackupOffering',
icon: 'folder-add',
label: 'label.backup.offering.assign',
diff --git a/src/core/ext.js b/src/core/ext.js
index 323c33b..ec418a2 100644
--- a/src/core/ext.js
+++ b/src/core/ext.js
@@ -25,9 +25,9 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// import { far } from '@fortawesome/free-regular-svg-icons'
import { faCentos, faUbuntu, faSuse, faRedhat, faFedora, faLinux, faFreebsd, faApple, faWindows, faJava } from '@fortawesome/free-brands-svg-icons'
-import { faLanguage, faCompactDisc } from '@fortawesome/free-solid-svg-icons'
+import { faLanguage, faCompactDisc, faCameraRetro } from '@fortawesome/free-solid-svg-icons'
library.add(faCentos, faUbuntu, faSuse, faRedhat, faFedora, faLinux, faFreebsd, faApple, faWindows, faJava)
-library.add(faLanguage, faCompactDisc)
+library.add(faLanguage, faCompactDisc, faCameraRetro)
Vue.component('font-awesome-icon', FontAwesomeIcon)
diff --git a/src/locales/en.json b/src/locales/en.json
index cedc431..5b1cc6a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -621,6 +621,7 @@
"label.create.project.role": "Create Project Role",
"label.create.site.vpn.connection": "Create Site-to-Site VPN Connection",
"label.create.site.vpn.gateway": "Create Site-to-Site VPN Gateway",
+"label.create.snapshot.for.volume": "Created snapshot for volume",
"label.create.ssh.key.pair": "Create a SSH Key Pair",
"label.create.template": "Create template",
"label.create.user": "Create user",
@@ -2259,6 +2260,7 @@
"label.vnmc.devices": "VNMC Devices",
"label.volgroup": "Volume Group",
"label.volume": "Volume",
+"label.volumeid": "Volume",
"label.volume.details": "Volume details",
"label.volume.empty": "No data volumes attached to this VM",
"label.volume.ids": "Volume ID's",
@@ -2327,6 +2329,7 @@
"label.welcome.cloud.console": "Welcome to Management Console",
"label.what.is.cloudstack": "What is CloudStack™?",
"label.windows": "Windows",
+"label.with.snapshotid": "with snapshot ID",
"label.write": "Write",
"label.writeback": "Write-back disk caching",
"label.writecachetype": "Write-cache Type",
diff --git a/src/views/compute/CreateSnapshotWizard.vue b/src/views/compute/CreateSnapshotWizard.vue
new file mode 100644
index 0000000..bf9d9dd
--- /dev/null
+++ b/src/views/compute/CreateSnapshotWizard.vue
@@ -0,0 +1,201 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+ <div class="form-layout">
+ <a-spin :spinning="loading">
+ <a-form
+ :form="form"
+ @submit="handleSubmit"
+ layout="vertical">
+ <a-form-item>
+ <span slot="label" :title="apiParams.volumeid.description">
+ {{ $t('label.volumeid') }}
+ <a-tooltip>
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-select
+ showSearch
+ allowClear
+ v-decorator="['volumeid', {
+ rules: [{ required: true, message: $t('message.error.select') }]
+ }]"
+ @change="onChangeVolume"
+ :placeholder="apiParams.volumeid.description">
+ <a-select-option
+ v-for="volume in listVolumes"
+ :key="volume.id">
+ {{ volume.name }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item>
+ <span slot="label" :title="apiParams.name.description">
+ {{ $t('label.name') }}
+ <a-tooltip>
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-input
+ v-decorator="['name']"
+ :placeholder="apiParams.name.description"/>
+ </a-form-item>
+ <a-form-item v-if="isQuiesceVm">
+ <span slot="label" :title="apiParams.quiescevm.description">
+ {{ $t('label.quiescevm') }}
+ <a-tooltip>
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-switch v-decorator="['quiescevm', { initialValue: false }]"/>
+ </a-form-item>
+ <a-form-item>
+ <span slot="label" :title="apiParams.asyncbackup.description">
+ {{ $t('label.asyncbackup') }}
+ <a-tooltip>
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-switch v-decorator="['asyncbackup', { initialValue: false }]"/>
+ </a-form-item>
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+ <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
+ </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+ name: 'CreateSnapshotWizard',
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ }
+ },
+ data () {
+ return {
+ loading: false,
+ isQuiesceVm: false,
+ listVolumes: []
+ }
+ },
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ this.apiConfig = this.$store.getters.apis.createSnapshot || {}
+ this.apiParams = {}
+ this.apiConfig.params.forEach(param => {
+ this.apiParams[param.name] = param
+ })
+ },
+ mounted () {
+ this.fetchData()
+ },
+ methods: {
+ fetchData () {
+ this.loading = true
+
+ api('listVolumes', { virtualMachineId: this.resource.id })
+ .then(json => {
+ this.listVolumes = json.listvolumesresponse.volume || []
+ })
+ .catch(e => {})
+ .finally(() => { this.loading = false })
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+
+ this.form.validateFields((err, values) => {
+ if (err) return
+
+ const params = {}
+ params.volumeid = values.volumeid
+ params.name = values.name
+ params.asyncbackup = values.asyncbackup
+ params.quiescevm = values.quiescevm
+
+ const title = this.$t('label.action.vmstoragesnapshot.create')
+ const description = values.name || values.volumeid
+
+ this.loading = true
+
+ api('createSnapshot', params)
+ .then(json => {
+ const jobId = json.createsnapshotresponse.jobid
+ if (jobId) {
+ this.$pollJob({
+ jobId,
+ successMethod: result => {
+ const volumeId = result.jobresult.snapshot.volumeid
+ const snapshotId = result.jobresult.snapshot.id
+ const message = `${this.$t('label.create.snapshot.for.volume')} ${volumeId} ${this.$t('label.with.snapshotid')} ${snapshotId}`
+ this.$notification.success({
+ message: message,
+ duration: 0
+ })
+ },
+ loadingMessage: `${title} ${this.$t('label.in.progress')}`,
+ catchMessage: this.$t('error.fetching.async.job.result')
+ })
+ this.$store.dispatch('AddAsyncJob', {
+ title: title,
+ jobid: jobId,
+ description: description,
+ status: 'progress'
+ })
+ }
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.loading = false
+ this.closeAction()
+ })
+ })
+ },
+ onChangeVolume (volumeId) {
+ const volumeFilter = this.listVolumes.filter(volume => volume.id === volumeId)
+ if (volumeFilter && volumeFilter.length > 0) {
+ this.isQuiesceVm = volumeFilter[0].quiescevm
+ }
+ },
+ closeAction () {
+ this.$emit('close-action')
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+.form-layout {
+ width: 80vw;
+ @media (min-width: 600px) {
+ width: 450px;
+ }
+}
+.action-button {
+ text-align: right;
+ button {
+ margin-right: 5px;
+ }
+}
+</style>