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 2020/07/04 06:29:28 UTC
[cloudstack-primate] branch master updated: compute: Creating
custom form to delete vm (#478)
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 7310f44 compute: Creating custom form to delete vm (#478)
7310f44 is described below
commit 7310f44463871d73d5778bc5e843e71aa0c1758e
Author: davidjumani <dj...@gmail.com>
AuthorDate: Sat Jul 4 11:59:20 2020 +0530
compute: Creating custom form to delete vm (#478)
Fixes #477
---
src/config/section/compute.js | 11 +--
src/views/compute/DestoryVM.vue | 171 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 174 insertions(+), 8 deletions(-)
diff --git a/src/config/section/compute.js b/src/config/section/compute.js
index 5210fbb..c2d0df2 100644
--- a/src/config/section/compute.js
+++ b/src/config/section/compute.js
@@ -398,17 +398,12 @@ export default {
label: 'label.action.destroy.instance',
message: 'message.action.destroy.instance',
docHelp: 'adminguide/virtual_machines.html#deleting-vms',
- args: ['expunge', 'volumeids'],
- mapping: {
- volumeids: {
- api: 'listVolumes',
- params: (record) => { return { virtualmachineid: record.id, type: 'DATADISK' } }
- }
- },
dataView: true,
groupAction: true,
+ popup: true,
groupMap: (selection) => { return selection.map(x => { return { id: x, expunge: true } }) },
- show: (record) => { return ['Running', 'Stopped', 'Error'].includes(record.state) }
+ show: (record) => { return ['Running', 'Stopped', 'Error'].includes(record.state) },
+ component: () => import('@/views/compute/DestoryVM.vue')
}
]
},
diff --git a/src/views/compute/DestoryVM.vue b/src/views/compute/DestoryVM.vue
new file mode 100644
index 0000000..b67668d
--- /dev/null
+++ b/src/views/compute/DestoryVM.vue
@@ -0,0 +1,171 @@
+// 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">
+ <p v-html="$t('message.action.destroy.instance')" />
+ <a-spin :spinning="loading">
+ <a-form
+ :form="form"
+ @submit="handleSubmit"
+ layout="vertical">
+ <a-form-item>
+ <span slot="label">
+ {{ $t('label.expunge') }}
+ <a-tooltip placement="bottom" :title="apiParams.expunge.description">
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-switch v-decorator="['expunge']" />
+ </a-form-item>
+
+ <a-form-item v-if="volumes.length > 0">
+ <span slot="label">
+ {{ $t('label.delete.volumes') }}
+ <a-tooltip placement="bottom" :title="apiParams.volumeids.description">
+ <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ </a-tooltip>
+ </span>
+ <a-select
+ v-decorator="['volumeids']"
+ :placeholder="$t('label.delete.volumes')"
+ mode="multiple"
+ :loading="loading">
+ <a-select-option v-for="volume in volumes" :key="volume.id">
+ {{ volume.name }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <p v-else v-html="$t('label.volume.empty')" />
+
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+ <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
+ </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+ name: 'DestroyVM',
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ }
+ },
+ inject: ['parentFetchData'],
+ data () {
+ return {
+ volumes: [],
+ loading: false
+ }
+ },
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ this.apiParams = {}
+ var apiConfig = this.$store.getters.apis.destroyVirtualMachine || {}
+ apiConfig.params.forEach(param => {
+ this.apiParams[param.name] = param
+ })
+ },
+ mounted () {
+ this.fetchData()
+ },
+ methods: {
+ fetchData () {
+ this.volumes = []
+ this.loading = true
+ api('listVolumes', {
+ virtualMachineId: this.resource.id,
+ type: 'DATADISK',
+ details: 'min'
+ }).then(json => {
+ this.volumes = json.listvolumesresponse.volume || []
+ }).finally(() => {
+ this.loading = false
+ })
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ this.form.validateFields((err, values) => {
+ if (err) {
+ return
+ }
+ this.loading = true
+
+ const params = {
+ id: this.resource.id
+ }
+ if (values.volumeids) {
+ params.volumeids = values.volumeids.join(',')
+ }
+ if (values.expunge) {
+ params.expunge = values.expunge
+ }
+
+ api('destroyVirtualMachine', params).then(json => {
+ const jobId = json.destroyvirtualmachineresponse.jobid
+ this.$store.dispatch('AddAsyncJob', {
+ title: this.$t('label.action.destroy.instance'),
+ jobid: jobId,
+ description: this.resource.name,
+ status: 'progress'
+ })
+ this.$pollJob({
+ jobId,
+ loadingMessage: `Deleting VM ${this.resource.name}`,
+ catchMessage: 'Error encountered while fetching async job result',
+ successMessage: `Successfully Deleted VM ${this.resource.name}`
+ })
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.loading = false
+ this.parentFetchData()
+ this.closeAction()
+ })
+ })
+ },
+ closeAction () {
+ this.$emit('close-action')
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+ .form-layout {
+ width: 60vw;
+
+ @media (min-width: 500px) {
+ width: 450px;
+ }
+ }
+
+ .action-button {
+ text-align: right;
+
+ button {
+ margin-right: 5px;
+ }
+ }
+</style>