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 9be2b9d storage: custom upload action for template, iso, volume
(#144)
9be2b9d is described below
commit 9be2b9dc454d54c22e4fd07503566a41e8ad7da7
Author: Pearl Dsilva <[email protected]>
AuthorDate: Sat Feb 8 14:30:32 2020 +0530
storage: custom upload action for template, iso, volume (#144)
This implements custom upload action form for template, iso, volume with
progress bar.
Signed-off-by: Rohit Yadav <[email protected]>
Co-authored-by: Rohit Yadav <[email protected]>
---
src/config/section/image.js | 14 +-
src/config/section/storage.js | 18 +-
src/views/AutogenView.vue | 1 +
src/views/image/RegisterIso.vue | 241 -------
src/views/image/RegisterOrUploadIso.vue | 396 +++++++++++
src/views/image/RegisterOrUploadTemplate.vue | 952 +++++++++++++++++++++++++++
src/views/image/RegisterTemplate.vue | 798 ----------------------
src/views/storage/UploadLocalVolume.vue | 222 ++++++-
8 files changed, 1566 insertions(+), 1076 deletions(-)
diff --git a/src/config/section/image.js b/src/config/section/image.js
index b8d837d..14f908f 100644
--- a/src/config/section/image.js
+++ b/src/config/section/image.js
@@ -48,10 +48,10 @@ export default {
{
api: 'registerTemplate',
icon: 'plus',
- label: 'Create template',
+ label: 'Register Template',
listView: true,
popup: true,
- component: () => import('@/views/image/RegisterTemplate.vue')
+ component: () => import('@/views/image/RegisterOrUploadTemplate.vue')
},
{
api: 'getUploadParamsForTemplate',
@@ -59,7 +59,7 @@ export default {
label: 'Upload Local Template',
listView: true,
popup: true,
- component: () => import('@/views/image/UploadLocalTemplate.vue')
+ component: () => import('@/views/image/RegisterOrUploadTemplate.vue')
},
{
api: 'updateTemplate',
@@ -88,7 +88,7 @@ export default {
{
api: 'updateTemplatePermissions',
icon: 'reconciliation',
- label: 'Update template permissions',
+ label: 'Update Template Permissions',
dataView: true,
popup: true,
show: (record, store) => { return (['Admin',
'DomainAdmin'].includes(store.userInfo.roletype) && (record.domainid ===
store.userInfo.domainid && record.account === store.userInfo.account) ||
record.templatetype !== 'BUILTIN') },
@@ -139,15 +139,15 @@ export default {
label: 'Register ISO',
listView: true,
popup: true,
- component: () => import('@/views/image/RegisterIso.vue')
+ component: () => import('@/views/image/RegisterOrUploadIso.vue')
},
{
api: 'getUploadParamsForIso',
icon: 'cloud-upload',
- label: 'Upload Local Iso',
+ label: 'Upload Local ISO',
listView: true,
popup: true,
- component: () => import('@/views/image/UploadLocalIso.vue')
+ component: () => import('@/views/image/RegisterOrUploadIso.vue')
},
{
api: 'updateIso',
diff --git a/src/config/section/storage.js b/src/config/section/storage.js
index bd7e009..34a46e9 100644
--- a/src/config/section/storage.js
+++ b/src/config/section/storage.js
@@ -40,7 +40,16 @@ export default {
label: 'Create Volume',
listView: true,
args: ['name', 'zoneid', 'diskofferingid']
- }, {
+ },
+ {
+ api: 'getUploadParamsForVolume',
+ icon: 'cloud-upload',
+ label: 'Upload Local Volume',
+ listView: true,
+ popup: true,
+ component: () => import('@/views/storage/UploadLocalVolume.vue')
+ },
+ {
api: 'uploadVolume',
icon: 'link',
label: 'Upload Volume From URL',
@@ -51,13 +60,6 @@ export default {
options: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2']
}
}
- }, {
- api: 'getUploadParamsForVolume',
- icon: 'cloud-upload',
- label: 'Upload Local Volume',
- listView: true,
- popup: true,
- component: () => import('@/views/storage/UploadLocalVolume.vue')
},
{
api: 'attachVolume',
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index b8727b6..f267d1f 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -74,6 +74,7 @@
:is="currentAction.component"
:resource="resource"
:loading="loading"
+ :action="{currentAction}"
v-bind="{currentAction}"
@refresh-data="fetchData"
@poll-action="pollActionCompletion"
diff --git a/src/views/image/RegisterIso.vue b/src/views/image/RegisterIso.vue
deleted file mode 100644
index ec44460..0000000
--- a/src/views/image/RegisterIso.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-// 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 :label="$t('url')">
- <a-input
- v-decorator="['url', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="$t('iso.url.description')" />
- </a-form-item>
-
- <a-form-item :label="$t('name')">
- <a-input
- v-decorator="['name', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="$t('iso.name.description')" />
- </a-form-item>
-
- <a-form-item :label="$t('displaytext')">
- <a-input
- v-decorator="['displaytext', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="$t('iso.displaytext.description')" />
- </a-form-item>
-
- <a-form-item :label="$t('directdownload')">
- <a-switch v-decorator="['directdownload']" />
- </a-form-item>
-
- <a-form-item :label="$t('zoneid')">
- <a-select
- v-decorator="['zoneid', {
- rules: [
- {
- required: true,
- message: 'Please select option'
- }
- ]
- }]"
- showSearch
- optionFilterProp="children"
- :filterOption="(input, option) => {
- return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
- }"
- :loading="zoneLoading"
- :placeholder="$t('iso.zoneid.description')">
- <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
-
- <a-form-item :label="$t('bootable')">
- <a-switch v-decorator="['bootable']" />
- </a-form-item>
-
- <a-form-item :label="$t('ostypeid')">
- <a-select
- v-decorator="['ostypeid', {
- rules: [{ required: true, message: 'Please select option' }]
- }]"
- showSearch
- optionFilterProp="children"
- :filterOption="(input, option) => {
- return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
- }"
- :loading="osTypeLoading"
- :placeholder="$t('iso.ostypeid.description')">
- <a-select-option v-for="(opt, optIndex) in osTypes"
:key="optIndex">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
-
- <a-form-item :label="$t('isextractable')">
- <a-switch v-decorator="['isextractable']" />
- </a-form-item>
-
- <a-form-item :label="$t('ispublic')">
- <a-switch v-decorator="['ispublic']" />
- </a-form-item>
-
- <a-form-item :label="$t('isfeatured')">
- <a-switch v-decorator="['isfeatured']" />
- </a-form-item>
-
- <div :span="24" class="action-button">
- <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
- <a-button :loading="loading" type="primary" @click="handleSubmit">{{
this.$t('OK') }}</a-button>
- </div>
- </a-form>
- </a-spin>
- </div>
-</template>
-
-<script>
-import { api } from '@/api'
-
-export default {
- name: 'RegisterIso',
- data () {
- return {
- zones: [],
- osTypes: [],
- zoneLoading: false,
- osTypeLoading: false,
- loading: false
- }
- },
- beforeCreate () {
- this.form = this.$form.createForm(this)
- },
- created () {
- this.zones = [
- {
- id: '-1',
- name: this.$t('label.all.zone')
- }
- ]
- },
- mounted () {
- this.fetchData()
- },
- methods: {
- fetchData () {
- this.fetchZoneData()
- this.fetchOsType()
- },
- fetchZoneData () {
- const params = {}
- params.listAll = true
-
- this.zoneLoading = true
-
- api('listZones', params).then(json => {
- const listZones = json.listzonesresponse.zone
- this.zones = this.zones.concat(listZones)
- }).finally(() => {
- this.zoneLoading = false
- })
- },
- fetchOsType () {
- const params = {}
- params.listAll = true
-
- this.osTypeLoading = true
-
- api('listOsTypes', params).then(json => {
- const listOsTypes = json.listostypesresponse.ostype
- this.osTypes = this.osTypes.concat(listOsTypes)
- }).finally(() => {
- this.osTypeLoading = false
- })
- },
- handleSubmit (e) {
- e.preventDefault()
- this.form.validateFields((err, values) => {
- if (err) {
- return
- }
-
- const params = {}
- for (const key in values) {
- const input = values[key]
- if (input === undefined) {
- continue
- }
- switch (key) {
- case 'zoneid':
- params[key] = this.zones[input].id
- break
- case 'ostypeid':
- params[key] = this.osTypes[input].id
- break
- default:
- params[key] = input
- break
- }
- }
-
- this.loading = true
- api('registerIso', params).then(json => {
- this.$emit('refresh-data')
- this.$notification.success({
- message: 'Register ISO',
- description: 'Sucessfully registered ISO ' + params.name
- })
- }).catch(error => {
- this.$notification.error({
- message: 'Request Failed',
- description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message
- })
- }).finally(() => {
- this.loading = false
- this.closeAction()
- })
- })
- },
- closeAction () {
- this.$emit('close-action')
- }
- }
-}
-</script>
-
-<style scoped lang="less">
- .form-layout {
- width: 500px;
- }
-
- .action-button {
- text-align: right;
-
- button {
- margin-right: 5px;
- }
- }
-</style>
diff --git a/src/views/image/RegisterOrUploadIso.vue
b/src/views/image/RegisterOrUploadIso.vue
new file mode 100644
index 0000000..6648336
--- /dev/null
+++ b/src/views/image/RegisterOrUploadIso.vue
@@ -0,0 +1,396 @@
+// 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">
+ <span v-if="uploadPercentage > 0">
+ <a-icon type="loading" />
+ Do not close this form, file upload is in progress...
+ <a-progress :percent="uploadPercentage" />
+ </span>
+ <a-spin :spinning="loading" v-else>
+ <a-form
+ :form="form"
+ @submit="handleSubmit"
+ layout="vertical">
+ <a-form-item v-if="currentForm === 'Create'" :label="$t('url')">
+ <a-input
+ v-decorator="['url', {
+ rules: [{ required: true, message: 'Please upload an ISO' }]
+ }]"
+ :placeholder="$t('iso.url.description')" />
+ </a-form-item>
+ <a-form-item v-if="currentForm === 'Upload'"
:label="$t('templateFileUpload')">
+ <a-upload-dragger
+ :multiple="false"
+ :fileList="fileList"
+ :remove="handleRemove"
+ :beforeUpload="beforeUpload"
+ v-decorator="['file', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]">
+ <p class="ant-upload-drag-icon">
+ <a-icon type="cloud-upload" />
+ </p>
+ <p class="ant-upload-text" v-if="fileList.length === 0">
+ Click or drag file to this area to upload
+ </p>
+ </a-upload-dragger>
+ </a-form-item>
+ <a-form-item :label="$t('name')">
+ <a-input
+ v-decorator="['name', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]"
+ :placeholder="$t('iso.name.description')" />
+ </a-form-item>
+
+ <a-form-item :label="$t('displaytext')">
+ <a-input
+ v-decorator="['displaytext', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]"
+ :placeholder="$t('iso.displaytext.description')" />
+ </a-form-item>
+
+ <a-form-item v-if="allowed && currentForm !== 'Upload'"
:label="$t('directdownload')">
+ <a-switch v-decorator="['directdownload']"/>
+ </a-form-item>
+
+ <a-form-item :label="$t('zoneid')">
+ <a-select
+ v-decorator="['zoneid', {
+ initialValue: this.selectedZone,
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ showSearch
+ optionFilterProp="children"
+ :filterOption="(input, option) => {
+ return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :loading="zoneLoading"
+ :placeholder="$t('iso.zoneid.description')">
+ <a-select-option :value="opt.id" v-for="opt in zones"
:key="opt.id">
+ <div v-if="currentForm === 'Upload'">
+ <div v-if="opt.name !== $t('label.all.zone')">
+ {{ opt.name || opt.description }}
+ </div>
+ </div>
+ <div v-else>
+ {{ opt.name || opt.description }}
+ </div>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+
+ <a-form-item :label="$t('bootable')">
+ <a-switch
+ v-decorator="['bootable', {
+ initialValue: true,
+ }]"
+ :checked="bootable"
+ @change="val => bootable = val"/>
+ </a-form-item>
+
+ <a-form-item v-if="bootable" :label="$t('ostypeid')">
+ <a-select
+ v-decorator="['ostypeid', {
+ initialValue: defaultOsType,
+ rules: [{ required: true, message: 'Please select option' }]
+ }]"
+ showSearch
+ optionFilterProp="children"
+ :filterOption="(input, option) => {
+ return
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :loading="osTypeLoading"
+ :placeholder="$t('iso.ostypeid.description')">
+ <a-select-option :value="opt.description" v-for="(opt, optIndex)
in osTypes" :key="optIndex">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+
+ <a-form-item :label="$t('isextractable')">
+ <a-switch
+ v-decorator="['isextractable', {
+ initialValue: false
+ }]" />
+ </a-form-item>
+
+ <a-form-item :label="$t('ispublic')">
+ <a-switch
+ v-decorator="['ispublic', {
+ initialValue: false
+ }]" />
+ </a-form-item>
+
+ <a-form-item :label="$t('isfeatured')">
+ <a-switch
+ v-decorator="['isfeatured', {
+ initialValue: false
+ }]" />
+ </a-form-item>
+
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+ <a-button :loading="loading" type="primary" @click="handleSubmit">{{
this.$t('OK') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
+ </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import store from '@/store'
+import { axios } from '../../utils/request'
+
+export default {
+ name: 'RegisterIso',
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ },
+ action: {
+ type: Object,
+ required: true
+ }
+ },
+ data () {
+ return {
+ fileList: [],
+ zones: [],
+ osTypes: [],
+ zoneLoading: false,
+ osTypeLoading: false,
+ defaultOsType: '',
+ loading: false,
+ allowed: false,
+ bootable: true,
+ selectedZone: '',
+ uploadParams: null,
+ uploadPercentage: 0,
+ currentForm: this.action.currentAction.api === 'registerIso' ? 'Create'
: 'Upload'
+ }
+ },
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ },
+ created () {
+ this.zones = [
+ {
+ id: '-1',
+ name: this.$t('label.all.zone')
+ }
+ ]
+ },
+ mounted () {
+ this.fetchData()
+ },
+ methods: {
+ fetchData () {
+ this.fetchZoneData()
+ this.fetchOsType()
+ },
+ fetchZoneData () {
+ const params = {}
+ params.listAll = true
+
+ this.zoneLoading = true
+ if (store.getters.userInfo.roletype === this.rootAdmin) {
+ this.allowed = true
+ }
+ api('listZones', params).then(json => {
+ const listZones = json.listzonesresponse.zone
+ this.zones = this.zones.concat(listZones)
+ }).finally(() => {
+ this.zoneLoading = false
+ this.selectedZone = this.currentForm === 'Create' ? (this.zones[0].id
? this.zones[0].id : '') : ((this.zones[1].id) ? this.zones[1].id : '')
+ })
+ },
+ fetchOsType () {
+ const params = {}
+ params.listAll = true
+
+ this.osTypeLoading = true
+
+ api('listOsTypes', params).then(json => {
+ const listOsTypes = json.listostypesresponse.ostype
+ this.osTypes = this.osTypes.concat(listOsTypes)
+ }).finally(() => {
+ this.osTypeLoading = false
+ this.defaultOsType = this.osTypes[0].description
+ })
+ },
+ handleRemove (file) {
+ const index = this.fileList.indexOf(file)
+ const newFileList = this.fileList.slice()
+ newFileList.splice(index, 1)
+ this.fileList = newFileList
+ },
+ beforeUpload (file) {
+ this.fileList = [file]
+ return false
+ },
+ handleUpload () {
+ const { fileList } = this
+ if (this.fileList.length > 1) {
+ this.$notification.error({
+ message: 'ISO Upload Failed',
+ description: 'Only one ISO can be uploaded at a time',
+ duration: 0
+ })
+ }
+ const formData = new FormData()
+ fileList.forEach(file => {
+ formData.append('files[]', file)
+ })
+ this.uploadPercentage = 0
+ axios.post(this.uploadParams.postURL,
+ formData,
+ {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ 'X-signature': this.uploadParams.signature,
+ 'X-expires': this.uploadParams.expires,
+ 'X-metadata': this.uploadParams.metadata
+ },
+ onUploadProgress: (progressEvent) => {
+ this.uploadPercentage = Number(parseFloat(100 *
progressEvent.loaded / progressEvent.total).toFixed(1))
+ },
+ timeout: 86400000
+ }).then((json) => {
+ this.$notification.success({
+ message: 'Upload Successful',
+ description: 'This ISO file has been uploaded. Please check its
status at Templates menu'
+ })
+ this.closeAction()
+ }).catch(e => {
+ this.$notification.error({
+ message: 'Upload Failed',
+ description: `Failed to upload ISO - ${e}`,
+ duration: 0
+ })
+ this.closeAction()
+ })
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ this.form.validateFields((err, values) => {
+ if (err) {
+ return
+ }
+ const params = {}
+ for (const key in values) {
+ const input = values[key]
+ if (input === undefined) {
+ continue
+ }
+ if (key === 'file') {
+ continue
+ }
+ switch (key) {
+ case 'zoneid':
+ var zone = this.zones.filter(zone => zone.id === input)
+ params[key] = zone[0].id
+ break
+ case 'ostypeid':
+ var os = this.osTypes.filter(osType => osType.description ===
input)
+ params[key] = os[0].id
+ break
+ default:
+ params[key] = input
+ break
+ }
+ }
+
+ if (this.currentForm === 'Create') {
+ this.loading = true
+ api('registerIso', params).then(json => {
+ this.$emit('refresh-data')
+ this.$notification.success({
+ message: 'Register ISO',
+ description: 'Sucessfully registered ISO ' + params.name
+ })
+ }).catch(error => {
+ this.$notification.error({
+ message: 'Request Failed',
+ description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message,
+ duration: 0
+ })
+ }).finally(() => {
+ this.loading = false
+ this.closeAction()
+ })
+ } else {
+ if (this.fileList.length !== 1) {
+ return
+ }
+ params.format = 'ISO'
+ this.loading = true
+ api('getUploadParamsForIso', params).then(json => {
+ this.uploadParams = (json.postuploadisoresponse &&
json.postuploadisoresponse.getuploadparams) ?
json.postuploadisoresponse.getuploadparams : ''
+ const response = this.handleUpload()
+ if (response === 'upload successful') {
+ this.$notification.success({
+ message: 'Upload Successful',
+ description: 'This ISO file has been uploaded. Please check
its status in the Images > ISOs menu'
+ })
+ }
+ }).catch(error => {
+ this.$notification.error({
+ message: 'Request Failed',
+ description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message,
+ duration: 0
+ })
+ }).finally(() => {
+ this.loading = false
+ })
+ }
+ })
+ },
+ closeAction () {
+ this.$emit('close-action')
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+ .form-layout {
+ width: 80vw;
+
+ @media (min-width: 700px) {
+ width: 550px;
+ }
+ }
+
+ .action-button {
+ text-align: right;
+
+ button {
+ margin-right: 5px;
+ }
+ }
+</style>
diff --git a/src/views/image/RegisterOrUploadTemplate.vue
b/src/views/image/RegisterOrUploadTemplate.vue
new file mode 100644
index 0000000..ad86178
--- /dev/null
+++ b/src/views/image/RegisterOrUploadTemplate.vue
@@ -0,0 +1,952 @@
+// 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">
+ <span v-if="uploadPercentage > 0">
+ <a-icon type="loading" />
+ Do not close this form, file upload is in progress...
+ <a-progress :percent="uploadPercentage" />
+ </span>
+ <a-spin :spinning="loading" v-else>
+ <a-form
+ :form="form"
+ @submit="handleSubmit"
+ layout="vertical">
+ <div v-if="currentForm === 'Create'">
+ <a-row :gutter="12">
+ <a-form-item :label="$t('url')">
+ <a-input
+ v-decorator="['url', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]"
+ :placeholder="apiParams.url.description" />
+ </a-form-item>
+ </a-row>
+ </div>
+ <div v-if="currentForm === 'Upload'">
+ <a-form-item :label="$t('templateFileUpload')">
+ <a-upload-dragger
+ :multiple="false"
+ :fileList="fileList"
+ :remove="handleRemove"
+ :beforeUpload="beforeUpload"
+ v-decorator="['file', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]">
+ <p class="ant-upload-drag-icon">
+ <a-icon type="cloud-upload" />
+ </p>
+ <p class="ant-upload-text" v-if="fileList.length === 0">
+ Click or drag file to this area to upload
+ </p>
+ </a-upload-dragger>
+ </a-form-item>
+ </div>
+ <a-row :gutter="12">
+ <a-form-item :label="$t('name')">
+ <a-input
+ v-decorator="['name', {
+ rules: [{ required: true, message: 'Please upload a template '
}]
+ }]"
+ :placeholder="apiParams.name.description" />
+ </a-form-item>
+ </a-row>
+ <a-row :gutter="12">
+ <a-form-item :label="$t('displaytext')">
+ <a-input
+ v-decorator="['displaytext', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]"
+ :placeholder="apiParams.displaytext.description" />
+ </a-form-item>
+ </a-row>
+ <div v-if="currentForm === 'Create'">
+ <a-row :gutter="12">
+ <a-col :md="24" :lg="24">
+ <a-form-item
+ :label="$t('zoneids')"
+ :validate-status="zoneError"
+ :help="zoneErrorMessage">
+ <a-select
+ v-decorator="['zoneids', {
+ rules: [
+ {
+ required: false,
+ message: 'Please select option',
+ type: 'array'
+ }
+ ]
+ }]"
+ :loading="zones.loading"
+ mode="multiple"
+ :placeholder="apiParams.zoneids.description"
+ @change="handlerSelectZone">
+ <a-select-option v-for="opt in zones.opts" :key="opt.name ||
opt.description">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ </div>
+ <div v-else>
+ <a-row :gutter="12">
+ <a-col :md="24" :lg="24">
+ <a-form-item
+ :label="$t('zoneid')"
+ :validate-status="zoneError"
+ :help="zoneErrorMessage">
+ <a-select
+ v-decorator="['zoneid', {
+ initialValue: this.zoneSelected
+ }]"
+ @change="handlerSelectZone"
+ :loading="zones.loading">
+ <a-select-option :value="zone.id" v-for="zone in zones.opts"
:key="zone.id">
+ <div v-if="zone.name !== $t('label.all.zone')">
+ {{ zone.name || zone.description }}
+ </div>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ </div>
+ <a-row :gutter="12">
+ <a-col :md="24" :lg="12">
+ <a-form-item :label="$t('hypervisor')">
+ <a-select
+ v-decorator="['hypervisor', {
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :loading="hyperVisor.loading"
+ :placeholder="apiParams.hypervisor.description"
+ @change="handlerSelectHyperVisor">
+ <a-select-option v-for="(opt, optIndex) in hyperVisor.opts"
:key="optIndex">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="12">
+ <a-form-item :label="$t('format')">
+ <a-select
+ v-decorator="['format', {
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :placeholder="apiParams.format.description">
+ <a-select-option v-for="opt in format.opts" :key="opt.id">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ <a-row :gutter="12" v-if="allowed && hyperKVMShow && currentForm !==
'Upload'">
+ <a-col :md="24" :lg="12">
+ <a-form-item :label="$t('directdownload')">
+ <a-switch v-decorator="['directdownload']"
@change="handleChangeDirect" />
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="12" v-if="allowDirectDownload">
+ <a-form-item :label="$t('checksum')">
+ <a-input
+ v-decorator="['checksum', {
+ rules: [{ required: false, message: 'Please enter input' }]
+ }]"
+ :placeholder="apiParams.checksum.description" />
+ </a-form-item>
+ </a-col>
+ </a-row>
+ <a-row :gutter="12" v-if="allowed && hyperXenServerShow">
+ <a-form-item v-if="hyperXenServerShow"
:label="$t('xenserverToolsVersion61plus')">
+ <a-switch
+ v-decorator="['xenserverToolsVersion61plus',{
+ initialValue: xenServerProvider
+ }]"
+ :default-checked="xenServerProvider" />
+ </a-form-item>
+ </a-row>
+ <a-row :gutter="12" v-if="hyperKVMShow || hyperVMWShow">
+ <a-col :md="24" :lg="24" v-if="hyperKVMShow">
+ <a-form-item :label="$t('rootDiskControllerType')">
+ <a-select
+ v-decorator="['rootDiskControllerType', {
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :loading="rootDisk.loading"
+ :placeholder="$t('rootdiskcontroller')">
+ <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="12" v-if="hyperVMWShow">
+ <a-form-item :label="$t('rootDiskControllerType')">
+ <a-select
+ v-decorator="['rootDiskControllerType', {
+ rules: [
+ {
+ required: false,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :loading="rootDisk.loading"
+ :placeholder="$t('rootdiskcontroller')">
+ <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="12" v-if="hyperVMWShow">
+ <a-form-item :label="$t('nicAdapterType')">
+ <a-select
+ v-decorator="['nicAdapterType', {
+ rules: [
+ {
+ required: false,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :placeholder="$t('nicadaptertype')">
+ <a-select-option v-for="opt in nicAdapterType.opts"
:key="opt.id">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="24">
+ <a-form-item v-if="hyperVMWShow" :label="$t('keyboardType')">
+ <a-select
+ v-decorator="['keyboardType', {
+ rules: [
+ {
+ required: false,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :placeholder="$t('keyboard')">
+ <a-select-option v-for="opt in keyboardType.opts"
:key="opt.id">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ <a-row :gutter="12">
+ <a-col :md="24" :lg="24">
+ <a-form-item :label="$t('ostypeid')">
+ <a-select
+ showSearch
+ v-decorator="['ostypeid', {
+ initialValue: defaultOsType,
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]"
+ :loading="osTypes.loading"
+ :placeholder="apiParams.ostypeid.description">
+ <a-select-option v-for="opt in osTypes.opts" :key="opt.name ||
opt.description">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ <a-row :gutter="12">
+ <a-col :md="24" :lg="24">
+ <a-form-item>
+ <a-checkbox-group
+ v-decorator="['groupenabled', { initialValue: ['requireshvm']
}]"
+ style="width: 100%;"
+ >
+ <a-row>
+ <a-col :span="12">
+ <a-checkbox value="isextractable">
+ {{ $t('isextractable') }}
+ </a-checkbox>
+ </a-col>
+ <a-col :span="12">
+ <a-checkbox value="passwordenabled">
+ {{ $t('passwordenabled') }}
+ </a-checkbox>
+ </a-col>
+ </a-row>
+ <a-row>
+ <a-col :span="12">
+ <a-checkbox value="isdynamicallyscalable">
+ {{ $t('isdynamicallyscalable') }}
+ </a-checkbox>
+ </a-col>
+ <a-col :span="12">
+ <a-checkbox value="sshkeyenabled">
+ {{ $t('sshkeyenabled') }}
+ </a-checkbox>
+ </a-col>
+ </a-row>
+ <a-row>
+ <a-col :span="12">
+ <a-checkbox value="isrouting">
+ {{ $t('isrouting') }}
+ </a-checkbox>
+ </a-col>
+ <a-col :span="12">
+ <a-checkbox value="ispublic">
+ {{ $t('ispublic') }}
+ </a-checkbox>
+ </a-col>
+ </a-row>
+ <a-row>
+ <a-col :span="12">
+ <a-checkbox value="requireshvm">
+ {{ $t('requireshvm') }}
+ </a-checkbox>
+ </a-col>
+ <a-col :span="12">
+ <a-checkbox value="isfeatured">
+ {{ $t('isfeatured') }}
+ </a-checkbox>
+ </a-col>
+ </a-row>
+ </a-checkbox-group>
+ </a-form-item>
+ </a-col>
+ </a-row>
+
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+ <a-button :loading="loading" type="primary" @click="handleSubmit">{{
this.$t('OK') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
+ </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import store from '@/store'
+import { axios } from '../../utils/request'
+
+export default {
+ name: 'RegisterOrUploadTemplate',
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ },
+ action: {
+ type: Object,
+ required: true
+ }
+ },
+ data () {
+ return {
+ uploadPercentage: 0,
+ uploading: false,
+ fileList: [],
+ zones: {},
+ defaultZone: '',
+ zoneSelected: '',
+ hyperVisor: {},
+ rootDisk: {},
+ nicAdapterType: {},
+ keyboardType: {},
+ format: {},
+ osTypes: {},
+ defaultOsType: '',
+ xenServerProvider: false,
+ hyperKVMShow: false,
+ hyperXenServerShow: false,
+ hyperVMWShow: false,
+ zoneError: '',
+ zoneErrorMessage: '',
+ loading: false,
+ rootAdmin: 'Admin',
+ allowed: false,
+ allowDirectDownload: false,
+ uploadParams: null,
+ currentForm: this.action.currentAction.api === 'registerTemplate' ?
'Create' : 'Upload'
+ }
+ },
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ this.apiConfig = this.$store.getters.apis.registerTemplate || {}
+ this.apiParams = {}
+ this.apiConfig.params.forEach(param => {
+ this.apiParams[param.name] = param
+ })
+ },
+ created () {
+ this.$set(this.zones, 'loading', false)
+ this.$set(this.zones, 'opts', [])
+ this.$set(this.hyperVisor, 'loading', false)
+ this.$set(this.hyperVisor, 'opts', [])
+ this.$set(this.rootDisk, 'loading', false)
+ this.$set(this.rootDisk, 'opts', [])
+ this.$set(this.nicAdapterType, 'loading', false)
+ this.$set(this.nicAdapterType, 'opts', [])
+ this.$set(this.keyboardType, 'loading', false)
+ this.$set(this.keyboardType, 'opts', [])
+ this.$set(this.format, 'loading', false)
+ this.$set(this.format, 'opts', [])
+ this.$set(this.osTypes, 'loading', false)
+ this.$set(this.osTypes, 'opts', [])
+ },
+ mounted () {
+ this.fetchData()
+ },
+ methods: {
+ fetchData () {
+ this.fetchZone()
+ this.fetchOsTypes()
+ if (Object.prototype.hasOwnProperty.call(store.getters.apis,
'listConfigurations')) {
+ this.fetchXenServerProvider()
+ }
+ },
+ handleFormChange (e) {
+ this.currentForm = e.target.value
+ },
+ handleRemove (file) {
+ const index = this.fileList.indexOf(file)
+ const newFileList = this.fileList.slice()
+ newFileList.splice(index, 1)
+ this.fileList = newFileList
+ },
+ beforeUpload (file) {
+ this.fileList = [file]
+ return false
+ },
+ handleUpload () {
+ const { fileList } = this
+ const formData = new FormData()
+ fileList.forEach(file => {
+ formData.append('files[]', file)
+ })
+ this.uploadPercentage = 0
+ axios.post(this.uploadParams.postURL,
+ formData,
+ {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ 'X-signature': this.uploadParams.signature,
+ 'X-expires': this.uploadParams.expires,
+ 'X-metadata': this.uploadParams.metadata
+ },
+ onUploadProgress: (progressEvent) => {
+ this.uploadPercentage = Number(parseFloat(100 *
progressEvent.loaded / progressEvent.total).toFixed(1))
+ },
+ timeout: 86400000
+ }).then((json) => {
+ this.$notification.success({
+ message: 'Upload Successful',
+ description: 'This template file has been uploaded. Please check its
status at Templates menu'
+ })
+ this.closeAction()
+ }).catch(e => {
+ this.$notification.error({
+ message: 'Upload Failed',
+ description: `Failed to upload Template - ${e}`,
+ duration: 0
+ })
+ this.closeAction()
+ })
+ },
+ fetchZone () {
+ const params = {}
+ let listZones = []
+ params.listAll = true
+
+ this.allowed = false
+
+ if (store.getters.userInfo.roletype === this.rootAdmin) {
+ this.allowed = true
+ listZones.push({
+ id: this.$t('label.all.zone'),
+ name: this.$t('label.all.zone')
+ })
+ }
+
+ this.zones.loading = true
+ this.zones.opts = []
+
+ api('listZones', params).then(json => {
+ const listZonesResponse = json.listzonesresponse.zone
+ listZones = listZones.concat(listZonesResponse)
+
+ this.$set(this.zones, 'opts', listZones)
+ }).finally(() => {
+ this.zoneSelected = (this.zones.opts && this.zones.opts[1]) ?
this.zones.opts[1].id : ''
+ this.zones.loading = false
+ this.fetchHyperVisor({ zoneid: this.zoneSelected })
+ })
+ },
+ fetchHyperVisor (params) {
+ this.hyperVisor.loading = true
+ let listhyperVisors = this.hyperVisor.opts
+
+ api('listHypervisors', params).then(json => {
+ const listResponse = json.listhypervisorsresponse.hypervisor
+ if (listResponse) {
+ listhyperVisors = listhyperVisors.concat(listResponse)
+ }
+ if (this.currentForm !== 'Upload') {
+ listhyperVisors.push({
+ name: 'Any'
+ })
+ }
+ this.$set(this.hyperVisor, 'opts', listhyperVisors)
+ }).finally(() => {
+ this.hyperVisor.loading = false
+ })
+ },
+ fetchOsTypes () {
+ const params = {}
+ params.listAll = true
+
+ this.osTypes.opts = []
+ this.osTypes.loading = true
+
+ api('listOsTypes', params).then(json => {
+ const listOsTypes = json.listostypesresponse.ostype
+ this.$set(this.osTypes, 'opts', listOsTypes)
+ this.defaultOsType = this.osTypes.opts[1].description
+ }).finally(() => {
+ this.osTypes.loading = false
+ })
+ },
+ fetchXenServerProvider () {
+ const params = {}
+ params.name = 'xenserver.pvdriver.version'
+
+ this.xenServerProvider = true
+
+ api('listConfigurations', params).then(json => {
+ if (json.listconfigurationsresponse.configuration !== null &&
json.listconfigurationsresponse.configuration[0].value !== 'xenserver61') {
+ this.xenServerProvider = false
+ }
+ })
+ },
+ fetchRootDisk (hyperVisor) {
+ const controller = []
+ this.rootDisk.opts = []
+
+ if (hyperVisor === 'KVM') {
+ controller.push({
+ id: '',
+ description: ''
+ })
+ controller.push({
+ id: 'ide',
+ description: 'ide'
+ })
+ controller.push({
+ id: 'osdefault',
+ description: 'osdefault'
+ })
+ controller.push({
+ id: 'scsi',
+ description: 'scsi'
+ })
+ controller.push({
+ id: 'virtio',
+ description: 'virtio'
+ })
+ } else if (hyperVisor === 'VMware') {
+ controller.push({
+ id: '',
+ description: ''
+ })
+ controller.push({
+ id: 'scsi',
+ description: 'scsi'
+ })
+ controller.push({
+ id: 'ide',
+ description: 'ide'
+ })
+ controller.push({
+ id: 'osdefault',
+ description: 'osdefault'
+ })
+ controller.push({
+ id: 'pvscsi',
+ description: 'pvscsi'
+ })
+ controller.push({
+ id: 'lsilogic',
+ description: 'lsilogic'
+ })
+ controller.push({
+ id: 'lsisas1068',
+ description: 'lsilogicsas'
+ })
+ controller.push({
+ id: 'buslogic',
+ description: 'buslogic'
+ })
+ }
+
+ this.$set(this.rootDisk, 'opts', controller)
+ },
+ fetchNicAdapterType () {
+ const nicAdapterType = []
+ nicAdapterType.push({
+ id: '',
+ description: ''
+ })
+ nicAdapterType.push({
+ id: 'E1000',
+ description: 'E1000'
+ })
+ nicAdapterType.push({
+ id: 'PCNet32',
+ description: 'PCNet32'
+ })
+ nicAdapterType.push({
+ id: 'Vmxnet2',
+ description: 'Vmxnet2'
+ })
+ nicAdapterType.push({
+ id: 'Vmxnet3',
+ description: 'Vmxnet3'
+ })
+
+ this.$set(this.nicAdapterType, 'opts', nicAdapterType)
+ },
+ fetchKeyboardType () {
+ const keyboardType = []
+ keyboardType.push({
+ id: '',
+ description: ''
+ })
+ keyboardType.push({
+ id: 'us',
+ description: 'label.standard.us.keyboard'
+ })
+ keyboardType.push({
+ id: 'uk',
+ description: 'label.uk.keyboard'
+ })
+ keyboardType.push({
+ id: 'fr',
+ description: 'label.french.azerty.keyboard'
+ })
+ keyboardType.push({
+ id: 'jp',
+ description: 'label.japanese.keyboard'
+ })
+ keyboardType.push({
+ id: 'sc',
+ description: 'label.simplified.chinese.keyboard'
+ })
+
+ this.$set(this.keyboardType, 'opts', keyboardType)
+ },
+ fetchFormat (hyperVisor) {
+ const format = []
+
+ switch (hyperVisor) {
+ case 'Hyperv':
+ format.push({
+ id: 'VHD',
+ description: 'VHD'
+ })
+ format.push({
+ id: 'VHDX',
+ description: 'VHDX'
+ })
+ break
+ case 'KVM':
+ this.hyperKVMShow = true
+ format.push({
+ id: 'QCOW2',
+ description: 'QCOW2'
+ })
+ format.push({
+ id: 'RAW',
+ description: 'RAW'
+ })
+ format.push({
+ id: 'VHD',
+ description: 'VHD'
+ })
+ format.push({
+ id: 'VMDK',
+ description: 'VMDK'
+ })
+ break
+ case 'XenServer':
+ this.hyperXenServerShow = true
+ format.push({
+ id: 'VHD',
+ description: 'VHD'
+ })
+ break
+ case 'VMware':
+ this.hyperVMWShow = true
+ format.push({
+ id: 'OVA',
+ description: 'OVA'
+ })
+ break
+ case 'BareMetal':
+ format.push({
+ id: 'BareMetal',
+ description: 'BareMetal'
+ })
+ break
+ case 'Ovm':
+ format.push({
+ id: 'RAW',
+ description: 'RAW'
+ })
+ break
+ case 'LXC':
+ format.push({
+ id: 'TAR',
+ description: 'TAR'
+ })
+ break
+ default:
+ break
+ }
+ this.$set(this.format, 'opts', format)
+ },
+ handlerSelectZone (value) {
+ this.validZone(value)
+ this.hyperVisor.opts = []
+
+ if (this.zoneError !== '') {
+ return
+ }
+
+ this.resetSelect()
+
+ const params = {}
+ const allZoneExists = value.filter(zone => zone ===
this.$t('label.all.zone'))
+
+ if (allZoneExists.length > 0) {
+ params.listAll = true
+ this.fetchHyperVisor(params)
+ return
+ }
+
+ for (let i = 0; i < value.length; i++) {
+ const zoneSelected = this.zones.opts.filter(zone => zone.name ===
value[i])
+
+ if (zoneSelected.length > 0) {
+ params.zoneid = zoneSelected[0].id
+ this.fetchHyperVisor(params)
+ }
+ }
+ },
+ handlerSelectHyperVisor (value) {
+ const hyperVisor = this.hyperVisor.opts[value].name
+
+ this.hyperXenServerShow = false
+ this.hyperVMWShow = false
+ this.hyperKVMShow = false
+ this.allowDirectDownload = false
+
+ this.resetSelect()
+ this.fetchFormat(hyperVisor)
+ this.fetchRootDisk(hyperVisor)
+ this.fetchNicAdapterType()
+ this.fetchKeyboardType()
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ this.form.validateFields((err, values) => {
+ if (err || this.zoneError !== '') {
+ return
+ }
+ let params = {}
+ for (const key in values) {
+ const input = values[key]
+
+ if (input === undefined) {
+ continue
+ }
+ if (key === 'file') {
+ continue
+ }
+
+ if (key === 'zoneids') {
+ if (input.length === 1 && input[0] === this.$t('label.all.zone')) {
+ params.zoneids = '-1'
+ continue
+ }
+ const zonesSelected = []
+ for (const index in input) {
+ const name = input[index]
+ const zone = this.zones.opts.filter(zone => zone.name === name)
+ if (zone && zone[0]) {
+ zonesSelected.push(zone[0].id)
+ }
+ }
+ params[key] = zonesSelected.join(',')
+ } else if (key === 'zoneid') {
+ params[key] = values[key]
+ } else if (key === 'ostypeid') {
+ const osTypeSelected = this.osTypes.opts.filter(item =>
item.description === input)
+ if (osTypeSelected && osTypeSelected[0]) {
+ params[key] = osTypeSelected[0].id
+ }
+ } else if (key === 'hypervisor') {
+ params[key] = this.hyperVisor.opts[input].name
+ } else if (key === 'groupenabled') {
+ for (const index in input) {
+ const name = input[index]
+ params[name] = true
+ }
+ } else {
+ const formattedDetailData = {}
+ switch (key) {
+ case 'rootDiskControllerType':
+ formattedDetailData['details[0].rootDiskController'] = input
+ break
+ case 'nicAdapterType':
+ formattedDetailData['details[0].nicAdapter'] = input
+ break
+ case 'keyboardType':
+ formattedDetailData['details[0].keyboard'] = input
+ break
+ case 'xenserverToolsVersion61plus':
+ formattedDetailData['details[0].hypervisortoolsversion'] =
input
+ break
+ }
+
+ if (Object.keys(formattedDetailData).length > 0) {
+ params = Object.assign({}, params, formattedDetailData)
+ } else {
+ params[key] = input
+ }
+ }
+ }
+ if (this.currentForm === 'Create') {
+ this.loading = true
+ api('registerTemplate', params).then(json => {
+ this.$emit('refresh-data')
+ this.$notification.success({
+ message: 'Register Template',
+ description: 'Successfully registered template ' + params.name
+ })
+ }).catch(error => {
+ this.$notification.error({
+ message: 'Request Failed',
+ description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message,
+ duration: 0
+ })
+ }).finally(() => {
+ this.loading = false
+ this.closeAction()
+ })
+ } else {
+ this.loading = true
+ if (this.fileList.length > 1) {
+ this.$notification.error({
+ message: 'Template Upload Failed',
+ description: 'Only one template can be uploaded at a time',
+ duration: 0
+ })
+ }
+ api('getUploadParamsForTemplate', params).then(json => {
+ this.uploadParams = (json.postuploadtemplateresponse &&
json.postuploadtemplateresponse.getuploadparams) ?
json.postuploadtemplateresponse.getuploadparams : ''
+ this.handleUpload()
+ }).catch(error => {
+ this.$notification.error({
+ message: 'Request Failed',
+ description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message,
+ duration: 0
+ })
+ }).finally(() => {
+ this.loading = false
+ })
+ }
+ })
+ },
+ handleChangeDirect (checked) {
+ this.allowDirectDownload = checked
+ },
+ validZone (zones) {
+ const allZoneExists = zones.filter(zone => zone ===
this.$t('label.all.zone'))
+
+ this.zoneError = ''
+ this.zoneErrorMessage = ''
+
+ if (allZoneExists.length > 0 && zones.length > 1) {
+ this.zoneError = 'error'
+ this.zoneErrorMessage = this.$t('label.error.zone.combined')
+ }
+ },
+ closeAction () {
+ this.$emit('close-action')
+ },
+ resetSelect () {
+ this.form.setFieldsValue({
+ hypervisor: undefined,
+ format: undefined,
+ rootDiskControllerType: undefined,
+ nicAdapterType: undefined,
+ keyboardType: undefined
+ })
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+ .form-layout {
+ width: 80vw;
+
+ @media (min-width: 700px) {
+ width: 550px;
+ }
+ }
+
+ .action-button {
+ text-align: right;
+
+ button {
+ margin-right: 5px;
+ }
+ }
+</style>
diff --git a/src/views/image/RegisterTemplate.vue
b/src/views/image/RegisterTemplate.vue
deleted file mode 100644
index 5f5f061..0000000
--- a/src/views/image/RegisterTemplate.vue
+++ /dev/null
@@ -1,798 +0,0 @@
-// 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-form layout="vertical" :form="form">
- <a-row :gutter="12">
- <a-form-item :label="$t('url')">
- <a-input
- v-decorator="['url', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="apiParams.url.description" />
- </a-form-item>
- </a-row>
- <a-row :gutter="12">
- <a-form-item :label="$t('name')">
- <a-input
- v-decorator="['name', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="apiParams.name.description" />
- </a-form-item>
- </a-row>
- <a-row :gutter="12">
- <a-form-item :label="$t('displaytext')">
- <a-input
- v-decorator="['displaytext', {
- rules: [{ required: true, message: 'Please enter input' }]
- }]"
- :placeholder="apiParams.displaytext.description" />
- </a-form-item>
- </a-row>
- <a-row :gutter="12">
- <a-col :md="24" :lg="24">
- <a-form-item
- :label="$t('zoneids')"
- :validate-status="zoneError"
- :help="zoneErrorMessage">
- <a-select
- v-decorator="['zoneids', {
- rules: [
- {
- required: false,
- message: 'Please select option',
- type: 'array'
- }
- ]
- }]"
- :loading="zones.loading"
- mode="multiple"
- :placeholder="apiParams.zoneids.description"
- @change="handlerSelectZone">
- <a-select-option v-for="opt in zones.opts" :key="opt.name ||
opt.description">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="12">
- <a-col :md="24" :lg="12">
- <a-form-item :label="$t('hypervisor')">
- <a-select
- v-decorator="['hypervisor', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :loading="hyperVisor.loading"
- :placeholder="apiParams.hypervisor.description"
- @change="handlerSelectHyperVisor">
- <a-select-option v-for="(opt, optIndex) in hyperVisor.opts"
:key="optIndex">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="12">
- <a-form-item :label="$t('format')">
- <a-select
- v-decorator="['format', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :placeholder="apiParams.format.description">
- <a-select-option v-for="opt in format.opts" :key="opt.id">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="12" v-if="allowed && hyperKVMShow">
- <a-col :md="24" :lg="12">
- <a-form-item :label="$t('directdownload')">
- <a-switch v-decorator="['directdownload']"
@change="handleChangeDirect" />
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="12" v-if="allowDirectDownload">
- <a-form-item :label="$t('checksum')">
- <a-input
- v-decorator="['checksum', {
- rules: [{ required: false, message: 'Please enter input' }]
- }]"
- :placeholder="apiParams.checksum.description" />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="12" v-if="allowed && hyperXenServerShow">
- <a-form-item v-if="hyperXenServerShow"
:label="$t('xenserverToolsVersion61plus')">
- <a-switch
- v-decorator="['xenserverToolsVersion61plus',{
- initialValue: xenServerProvider
- }]"
- :default-checked="xenServerProvider" />
- </a-form-item>
- </a-row>
- <a-row :gutter="12" v-if="hyperKVMShow || hyperVMWShow">
- <a-col :md="24" :lg="24" v-if="hyperKVMShow">
- <a-form-item :label="$t('rootDiskControllerType')">
- <a-select
- v-decorator="['rootDiskControllerType', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :loading="rootDisk.loading"
- :placeholder="$t('rootdiskcontroller')">
- <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="12" v-if="hyperVMWShow">
- <a-form-item :label="$t('rootDiskControllerType')">
- <a-select
- v-decorator="['rootDiskControllerType', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :loading="rootDisk.loading"
- :placeholder="$t('rootdiskcontroller')">
- <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="12" v-if="hyperVMWShow">
- <a-form-item :label="$t('nicAdapterType')">
- <a-select
- v-decorator="['nicAdapterType', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :placeholder="$t('nicadaptertype')">
- <a-select-option v-for="opt in nicAdapterType.opts"
:key="opt.id">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="24">
- <a-form-item v-if="hyperVMWShow" :label="$t('keyboardType')">
- <a-select
- v-decorator="['keyboardType', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :placeholder="$t('keyboard')">
- <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="12">
- <a-col :md="24" :lg="24">
- <a-form-item :label="$t('ostypeid')">
- <a-select
- showSearch
- v-decorator="['ostypeid', {
- rules: [
- {
- required: false,
- message: 'Please select option'
- }
- ]
- }]"
- :loading="osTypes.loading"
- :placeholder="apiParams.ostypeid.description">
- <a-select-option v-for="opt in osTypes.opts" :key="opt.name ||
opt.description">
- {{ opt.name || opt.description }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="12">
- <a-col :md="24" :lg="24">
- <a-form-item>
- <a-checkbox-group
- v-decorator="['groupenabled', { initialValue: ['requireshvm'] }]"
- style="width: 100%;"
- >
- <a-row>
- <a-col :span="12">
- <a-checkbox value="isextractable">
- {{ $t('isextractable') }}
- </a-checkbox>
- </a-col>
- <a-col :span="12">
- <a-checkbox value="passwordenabled">
- {{ $t('passwordenabled') }}
- </a-checkbox>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12">
- <a-checkbox value="isdynamicallyscalable">
- {{ $t('isdynamicallyscalable') }}
- </a-checkbox>
- </a-col>
- <a-col :span="12">
- <a-checkbox value="sshkeyenabled">
- {{ $t('sshkeyenabled') }}
- </a-checkbox>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12">
- <a-checkbox value="isrouting">
- {{ $t('isrouting') }}
- </a-checkbox>
- </a-col>
- <a-col :span="12">
- <a-checkbox value="ispublic">
- {{ $t('ispublic') }}
- </a-checkbox>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12">
- <a-checkbox value="requireshvm">
- {{ $t('requireshvm') }}
- </a-checkbox>
- </a-col>
- <a-col :span="12">
- <a-checkbox value="isfeatured">
- {{ $t('isfeatured') }}
- </a-checkbox>
- </a-col>
- </a-row>
- </a-checkbox-group>
- </a-form-item>
- </a-col>
- </a-row>
-
- <div :span="24" class="action-button">
- <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
- <a-button :loading="loading" type="primary" @click="handleSubmit">{{
this.$t('OK') }}</a-button>
- </div>
- </a-form>
- </div>
-</template>
-
-<script>
-import { api } from '@/api'
-import store from '@/store'
-
-export default {
- name: 'RegisterTemplate',
- data () {
- return {
- zones: {},
- hyperVisor: {},
- rootDisk: {},
- nicAdapterType: {},
- keyboardType: {},
- format: {},
- osTypes: {},
- xenServerProvider: false,
- hyperKVMShow: false,
- hyperXenServerShow: false,
- hyperVMWShow: false,
- zoneError: '',
- zoneErrorMessage: '',
- loading: false,
- rootAdmin: 'Admin',
- allowed: false,
- allowDirectDownload: false
- }
- },
- beforeCreate () {
- this.form = this.$form.createForm(this)
- this.apiConfig = this.$store.getters.apis.registerTemplate || {}
- this.apiParams = {}
- this.apiConfig.params.forEach(param => {
- this.apiParams[param.name] = param
- })
- },
- created () {
- this.$set(this.zones, 'loading', false)
- this.$set(this.zones, 'opts', [])
- this.$set(this.hyperVisor, 'loading', false)
- this.$set(this.hyperVisor, 'opts', [])
- this.$set(this.rootDisk, 'loading', false)
- this.$set(this.rootDisk, 'opts', [])
- this.$set(this.nicAdapterType, 'loading', false)
- this.$set(this.nicAdapterType, 'opts', [])
- this.$set(this.keyboardType, 'loading', false)
- this.$set(this.keyboardType, 'opts', [])
- this.$set(this.format, 'loading', false)
- this.$set(this.format, 'opts', [])
- this.$set(this.osTypes, 'loading', false)
- this.$set(this.osTypes, 'opts', [])
- },
- mounted () {
- this.fetchData()
- },
- methods: {
- fetchData () {
- this.fetchZone()
- this.fetchOsTypes()
- if (Object.prototype.hasOwnProperty.call(store.getters.apis,
'listConfigurations')) {
- this.fetchXenServerProvider()
- }
- },
- fetchZone () {
- const params = {}
- let listZones = []
- params.listAll = true
-
- this.allowed = false
-
- if (store.getters.userInfo.roletype === this.rootAdmin) {
- this.allowed = true
- listZones.push({
- id: this.$t('label.all.zone'),
- name: this.$t('label.all.zone')
- })
- }
-
- this.zones.loading = true
- this.zones.opts = []
-
- api('listZones', params).then(json => {
- const listZonesResponse = json.listzonesresponse.zone
- listZones = listZones.concat(listZonesResponse)
-
- this.$set(this.zones, 'opts', listZones)
- }).finally(() => {
- this.zones.loading = false
- })
- },
- fetchHyperVisor (params) {
- this.hyperVisor.loading = true
- let listhyperVisors = this.hyperVisor.opts
-
- api('listHypervisors', params).then(json => {
- const listResponse = json.listhypervisorsresponse.hypervisor
- if (listResponse) {
- listhyperVisors = listhyperVisors.concat(listResponse)
- }
- listhyperVisors.push({
- name: 'Any'
- })
-
- this.$set(this.hyperVisor, 'opts', listhyperVisors)
- }).finally(() => {
- this.hyperVisor.loading = false
- })
- },
- fetchOsTypes () {
- const params = {}
- params.listAll = true
-
- this.osTypes.opts = []
- this.osTypes.loading = true
-
- api('listOsTypes', params).then(json => {
- const listOsTypes = json.listostypesresponse.ostype
- this.$set(this.osTypes, 'opts', listOsTypes)
- }).finally(() => {
- this.osTypes.loading = false
- })
- },
- fetchXenServerProvider () {
- const params = {}
- params.name = 'xenserver.pvdriver.version'
-
- this.xenServerProvider = true
-
- api('listConfigurations', params).then(json => {
- if (json.listconfigurationsresponse.configuration !== null &&
json.listconfigurationsresponse.configuration[0].value !== 'xenserver61') {
- this.xenServerProvider = false
- }
- })
- },
- fetchRootDisk (hyperVisor) {
- const controller = []
- this.rootDisk.opts = []
-
- if (hyperVisor === 'KVM') {
- controller.push({
- id: '',
- description: ''
- })
- controller.push({
- id: 'ide',
- description: 'ide'
- })
- controller.push({
- id: 'osdefault',
- description: 'osdefault'
- })
- controller.push({
- id: 'scsi',
- description: 'scsi'
- })
- controller.push({
- id: 'virtio',
- description: 'virtio'
- })
- } else if (hyperVisor === 'VMware') {
- controller.push({
- id: '',
- description: ''
- })
- controller.push({
- id: 'scsi',
- description: 'scsi'
- })
- controller.push({
- id: 'ide',
- description: 'ide'
- })
- controller.push({
- id: 'osdefault',
- description: 'osdefault'
- })
- controller.push({
- id: 'pvscsi',
- description: 'pvscsi'
- })
- controller.push({
- id: 'lsilogic',
- description: 'lsilogic'
- })
- controller.push({
- id: 'lsisas1068',
- description: 'lsilogicsas'
- })
- controller.push({
- id: 'buslogic',
- description: 'buslogic'
- })
- }
-
- this.$set(this.rootDisk, 'opts', controller)
- },
- fetchNicAdapterType () {
- const nicAdapterType = []
- nicAdapterType.push({
- id: '',
- description: ''
- })
- nicAdapterType.push({
- id: 'E1000',
- description: 'E1000'
- })
- nicAdapterType.push({
- id: 'PCNet32',
- description: 'PCNet32'
- })
- nicAdapterType.push({
- id: 'Vmxnet2',
- description: 'Vmxnet2'
- })
- nicAdapterType.push({
- id: 'Vmxnet3',
- description: 'Vmxnet3'
- })
-
- this.$set(this.nicAdapterType, 'opts', nicAdapterType)
- },
- fetchKeyboardType () {
- const keyboardType = []
- keyboardType.push({
- id: '',
- description: ''
- })
- keyboardType.push({
- id: 'us',
- description: 'label.standard.us.keyboard'
- })
- keyboardType.push({
- id: 'uk',
- description: 'label.uk.keyboard'
- })
- keyboardType.push({
- id: 'fr',
- description: 'label.french.azerty.keyboard'
- })
- keyboardType.push({
- id: 'jp',
- description: 'label.japanese.keyboard'
- })
- keyboardType.push({
- id: 'sc',
- description: 'label.simplified.chinese.keyboard'
- })
-
- this.$set(this.keyboardType, 'opts', keyboardType)
- },
- fetchFormat (hyperVisor) {
- const format = []
-
- switch (hyperVisor) {
- case 'Hyperv':
- format.push({
- id: 'VHD',
- description: 'VHD'
- })
- format.push({
- id: 'VHDX',
- description: 'VHDX'
- })
- break
- case 'KVM':
- this.hyperKVMShow = true
- format.push({
- id: 'QCOW2',
- description: 'QCOW2'
- })
- format.push({
- id: 'RAW',
- description: 'RAW'
- })
- format.push({
- id: 'VHD',
- description: 'VHD'
- })
- format.push({
- id: 'VMDK',
- description: 'VMDK'
- })
- break
- case 'XenServer':
- this.hyperXenServerShow = true
- format.push({
- id: 'VHD',
- description: 'VHD'
- })
- break
- case 'VMware':
- this.hyperVMWShow = true
- format.push({
- id: 'OVA',
- description: 'OVA'
- })
- break
- case 'BareMetal':
- format.push({
- id: 'BareMetal',
- description: 'BareMetal'
- })
- break
- case 'Ovm':
- format.push({
- id: 'RAW',
- description: 'RAW'
- })
- break
- case 'LXC':
- format.push({
- id: 'TAR',
- description: 'TAR'
- })
- break
- default:
- break
- }
-
- this.$set(this.format, 'opts', format)
- },
- handlerSelectZone (value) {
- this.validZone(value)
- this.hyperVisor.opts = []
-
- if (this.zoneError !== '') {
- return
- }
-
- this.resetSelect()
-
- const params = {}
- const allZoneExists = value.filter(zone => zone ===
this.$t('label.all.zone'))
-
- if (allZoneExists.length > 0) {
- params.listAll = true
-
- this.fetchHyperVisor(params)
- return
- }
-
- for (let i = 0; i < value.length; i++) {
- const zoneSelected = this.zones.opts.filter(zone => zone.name ===
value[i])
-
- if (zoneSelected.length > 0) {
- params.zoneid = zoneSelected[0].id
- this.fetchHyperVisor(params)
- }
- }
- },
- handlerSelectHyperVisor (value) {
- const hyperVisor = this.hyperVisor.opts[value].name
-
- this.hyperXenServerShow = false
- this.hyperVMWShow = false
- this.hyperKVMShow = false
- this.allowDirectDownload = false
-
- this.resetSelect()
- this.fetchFormat(hyperVisor)
- this.fetchRootDisk(hyperVisor)
- this.fetchNicAdapterType()
- this.fetchKeyboardType()
- },
- handleSubmit (e) {
- e.preventDefault()
-
- this.form.validateFields((err, values) => {
- if (err || this.zoneError !== '') {
- return
- }
- let params = {}
- for (const key in values) {
- const input = values[key]
-
- if (input === undefined) {
- continue
- }
-
- if (key === 'zoneids') {
- if (input.length === 1 && input[0] === this.$t('label.all.zone')) {
- params.zoneids = '-1'
- continue
- }
- const zonesSelected = []
- for (const index in input) {
- const name = input[index]
- const zone = this.zones.opts.filter(zone => zone.name === name)
- if (zone && zone[0]) {
- zonesSelected.push(zone[0].id)
- }
- }
- params[key] = zonesSelected.join(',')
- } else if (key === 'ostypeid') {
- const osTypeSelected = this.osTypes.opts.filter(item =>
item.description === input)
- if (osTypeSelected && osTypeSelected[0]) {
- params[key] = osTypeSelected[0].id
- }
- } else if (key === 'hypervisor') {
- params[key] = this.hyperVisor.opts[input].name
- } else if (key === 'groupenabled') {
- for (const index in input) {
- const name = input[index]
- params[name] = true
- }
- } else {
- const formattedDetailData = {}
- switch (key) {
- case 'rootDiskControllerType':
- formattedDetailData['details[0].rootDiskController'] = input
- break
- case 'nicAdapterType':
- formattedDetailData['details[0].nicAdapter'] = input
- break
- case 'keyboardType':
- formattedDetailData['details[0].keyboard'] = input
- break
- case 'xenserverToolsVersion61plus':
- formattedDetailData['details[0].hypervisortoolsversion'] =
input
- break
- }
-
- if (Object.keys(formattedDetailData).length > 0) {
- params = Object.assign({}, params, formattedDetailData)
- } else {
- params[key] = input
- }
- }
- }
- this.loading = true
- api('registerTemplate', params).then(json => {
- this.$emit('refresh-data')
- this.$notification.success({
- message: 'Register Template',
- description: 'Successfully registered template ' + params.name
- })
- }).catch(error => {
- this.$notification.error({
- message: 'Request Failed',
- description: (error.response && error.response.headers &&
error.response.headers['x-description']) || error.message
- })
- }).finally(() => {
- this.loading = false
- this.closeAction()
- })
- })
- },
- handleChangeDirect (checked) {
- this.allowDirectDownload = checked
- },
- validZone (zones) {
- const allZoneExists = zones.filter(zone => zone ===
this.$t('label.all.zone'))
-
- this.zoneError = ''
- this.zoneErrorMessage = ''
-
- if (allZoneExists.length > 0 && zones.length > 1) {
- this.zoneError = 'error'
- this.zoneErrorMessage = this.$t('label.error.zone.combined')
- }
- },
- closeAction () {
- this.$emit('close-action')
- },
- resetSelect () {
- this.form.setFieldsValue({
- hypervisor: undefined,
- format: undefined,
- rootDiskControllerType: undefined,
- nicAdapterType: undefined,
- keyboardType: undefined
- })
- }
- }
-}
-</script>
-
-<style scoped lang="less">
- .form-layout {
- width: 80vw;
-
- @media (min-width: 700px) {
- width: 550px;
- }
- }
-
- .action-button {
- text-align: right;
-
- button {
- margin-right: 5px;
- }
- }
-</style>
diff --git a/src/views/storage/UploadLocalVolume.vue
b/src/views/storage/UploadLocalVolume.vue
index e5bd7ee..a145ca6 100644
--- a/src/views/storage/UploadLocalVolume.vue
+++ b/src/views/storage/UploadLocalVolume.vue
@@ -16,41 +16,219 @@
// under the License.
<template>
- <div>
- TODO: upload volume from local file component
-
- <a-upload
- name="avatar"
- listType="picture-card"
- class="avatar-uploader"
- :showUploadList="false"
- action="https://www.mocky.io/v2/5cc8019d300000980a055e76";
- :beforeUpload="beforeUpload"
- @change="handleChange"
- >
- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
- <div v-else>
- <a-icon :type="loading ? 'loading' : 'plus'" />
- <div class="ant-upload-text">Upload Volume</div>
- </div>
- </a-upload>
+ <div class="form-layout">
+ <span v-if="uploadPercentage > 0">
+ <a-icon type="loading" />
+ Do not close this form, file upload is in progress...
+ <a-progress :percent="uploadPercentage" />
+ </span>
+ <a-spin :spinning="loading" v-else>
+ <a-form
+ :form="form"
+ @submit="handleSubmit"
+ layout="vertical">
+ <a-form-item :label="$t('templateFileUpload')">
+ <a-upload-dragger
+ :multiple="false"
+ :fileList="fileList"
+ :remove="handleRemove"
+ :beforeUpload="beforeUpload"
+ v-decorator="['file', {
+ rules: [{ required: true, message: 'Please enter input' }]
+ }]">
+ <p class="ant-upload-drag-icon">
+ <a-icon type="cloud-upload" />
+ </p>
+ <p class="ant-upload-text" v-if="fileList.length === 0">
+ Click or drag file to this area to upload
+ </p>
+ </a-upload-dragger>
+ </a-form-item>
+ <a-form-item :label="$t('name')">
+ <a-input
+ v-decorator="['name', {
+ rules: [{ required: true, message: 'Please enter Volume name' }]
+ }]"
+ :placeholder="$t('volumename')" />
+ </a-form-item>
+ <a-form-item :label="$t('zone')">
+ <a-select
+ v-decorator="['zoneId', {
+ initialValue: zoneSelected,
+ rules: [
+ {
+ required: true,
+ message: 'Please select option'
+ }
+ ]
+ }]">
+ <a-select-option :value="zone.id" v-for="zone in zones"
:key="zone.id">
+ {{ zone.name || zone.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item :label="$t('format')">
+ <a-select
+ v-decorator="['format', {
+ initialValue: formats[0],
+ rules: [
+ {
+ required: false,
+ message: 'Please select option'
+ }
+ ]
+ }]">
+ <a-select-option v-for="format in formats" :key="format">
+ {{ format }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item :label="$t('volumeChecksum')">
+ <a-input
+ v-decorator="['checksum']"
+ placeholder="Use the hash that you created at the start of the
volume upload procedure"
+ />
+ </a-form-item>
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+ <a-button :loading="loading" type="primary" @click="handleSubmit">{{
this.$t('OK') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
</div>
</template>
<script>
+import { api } from '@/api'
+import { axios } from '../../utils/request'
export default {
- name: '',
- components: {
- },
+ name: 'UploadLocalVolume',
data () {
return {
+ fileList: [],
+ zones: [],
+ formats: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2'],
+ zoneSelected: '',
+ uploadParams: null,
+ loading: false,
+ uploadPercentage: 0
}
},
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ },
+ mounted () {
+ this.listZones()
+ },
methods: {
+ listZones () {
+ api('listZones').then(json => {
+ if (json && json.listzonesresponse && json.listzonesresponse.zone) {
+ this.zones = json.listzonesresponse.zone
+ if (this.zones.length > 0) {
+ this.zoneSelected = this.zone[0].id
+ }
+ }
+ })
+ },
+ handleRemove (file) {
+ const index = this.fileList.indexOf(file)
+ const newFileList = this.fileList.slice()
+ newFileList.splice(index, 1)
+ this.fileList = newFileList
+ },
+ beforeUpload (file) {
+ this.fileList = [...this.fileList, file]
+ return false
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ this.form.validateFields((err, values) => {
+ if (err) {
+ return
+ }
+ const params = {}
+ for (const key in values) {
+ const input = values[key]
+ if (input === undefined) {
+ continue
+ }
+ if (key === 'file') {
+ continue
+ }
+ params[key] = input
+ }
+ api('getUploadParamsForVolume', params).then(json => {
+ this.uploadParams = (json.postuploadvolumeresponse &&
json.postuploadvolumeresponse.getuploadparams) ?
json.postuploadvolumeresponse.getuploadparams : ''
+ const { fileList } = this
+ if (this.fileList.length > 1) {
+ this.$notification.error({
+ message: 'Volume Upload Failed',
+ description: 'Only one file can be uploaded at a time',
+ duration: 0
+ })
+ }
+ const formData = new FormData()
+ fileList.forEach(file => {
+ formData.append('files[]', file)
+ })
+ this.loading = true
+ this.uploadPercentage = 0
+ axios.post(this.uploadParams.postURL,
+ formData,
+ {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ 'X-signature': this.uploadParams.signature,
+ 'X-expires': this.uploadParams.expires,
+ 'X-metadata': this.uploadParams.metadata
+ },
+ onUploadProgress: (progressEvent) => {
+ this.uploadPercentage = Number(parseFloat(100 *
progressEvent.loaded / progressEvent.total).toFixed(1))
+ },
+ timeout: 86400000
+ }).then((json) => {
+ this.$notification.success({
+ message: 'Upload Successful',
+ description: 'This Volume has been uploaded. Please check its
status in the Volumes menu'
+ })
+ this.closeAction()
+ }).catch(e => {
+ this.$notification.error({
+ message: 'Upload Failed',
+ description: `Failed to upload ISO - ${e}`,
+ duration: 0
+ })
+ this.closeAction()
+ }).finally(() => {
+ this.loading = false
+ this.closeAction()
+ })
+ })
+ })
+ },
+ closeAction () {
+ this.$emit('close-action')
+ }
}
}
</script>
-<style scoped>
+<style scoped lang="less">
+ .form-layout {
+ width: 80vw;
+
+ @media (min-width: 700px) {
+ width: 550px;
+ }
+ }
+
+ .action-button {
+ text-align: right;
+
+ button {
+ margin-right: 5px;
+ }
+ }
</style>
