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

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/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>

ui/src/config/section/compute.js

@@ -164,6 +164,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',

ui/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)

ui/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",

ui/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>