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 406aa3f image: register template action form (#92) 406aa3f is described below commit 406aa3f2b83d2395430c83ef3ee4e059e2022b58 Author: Hoang Nguyen <hoan...@unitech.vn> AuthorDate: Wed Jan 15 13:51:36 2020 +0700 image: register template action form (#92) This implements a customer register registration form. Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com> Co-authored-by: hoangnm <hoangci...@gmail.com> Co-authored-by: Rohit Yadav <ro...@apache.org> --- src/components/view/ActionButton.vue | 4 +- src/components/view/ListView.vue | 3 + src/components/widgets/OsLogo.vue | 2 +- src/config/section/image.js | 4 +- src/locales/en.json | 12 +- src/views/image/RegisterIso.vue | 2 +- src/views/image/RegisterTemplate.vue | 798 +++++++++++++++++++++++++++++++++++ 7 files changed, 816 insertions(+), 9 deletions(-) diff --git a/src/components/view/ActionButton.vue b/src/components/view/ActionButton.vue index 13bc00c..fbd842a 100644 --- a/src/components/view/ActionButton.vue +++ b/src/components/view/ActionButton.vue @@ -32,7 +32,7 @@ v-if="action.api in $store.getters.apis && action.showBadge && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)) && - ('show' in action ? action.show(resource, $store.getters.userInfo, $store.getters.apis) : true)"> + ('show' in action ? action.show(resource, $store.getters.userInfo) : true)"> <a-button :icon="action.icon" :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')" @@ -44,7 +44,7 @@ v-if="action.api in $store.getters.apis && !action.showBadge && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)) && - ('show' in action ? action.show(resource, $store.getters.userInfo, $store.getters.apis) : true)" + ('show' in action ? action.show(resource, $store.getters.userInfo) : true)" :icon="action.icon" :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')" shape="circle" diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue index 2db30a5..0d594fc 100644 --- a/src/components/view/ListView.vue +++ b/src/components/view/ListView.vue @@ -63,6 +63,7 @@ <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px"> <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" /> </span> + <os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" /> <console :resource="record" size="small" /> <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link> <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link> @@ -154,6 +155,7 @@ <script> import { api } from '@/api' import Console from '@/components/widgets/Console' +import OsLogo from '@/components/widgets/OsLogo' import Status from '@/components/widgets/Status' import InfoCard from '@/components/view/InfoCard' @@ -161,6 +163,7 @@ export default { name: 'ListView', components: { Console, + OsLogo, Status, InfoCard }, diff --git a/src/components/widgets/OsLogo.vue b/src/components/widgets/OsLogo.vue index 7cc6dbc..8739cd1 100644 --- a/src/components/widgets/OsLogo.vue +++ b/src/components/widgets/OsLogo.vue @@ -21,7 +21,7 @@ {{ name }} </template> <font-awesome-icon :icon="['fab', logo]" :size="size" style="color: #666;" v-if="logo !== 'debian'" /> - <debian-icon v-else-if="logo === 'debian'" :style="{ height: size === '4x' ? '56px' : '18px', width: size === '4x' ? '56px' : '18px', marginBottom: '-4px' }" /> + <debian-icon v-else-if="logo === 'debian'" :style="{ height: size === '4x' ? '56px' : '16px', width: size === '4x' ? '56px' : '16px', marginBottom: '-4px' }" /> </a-tooltip> </template> diff --git a/src/config/section/image.js b/src/config/section/image.js index 38bfe2a..ffa7f6b 100644 --- a/src/config/section/image.js +++ b/src/config/section/image.js @@ -50,7 +50,8 @@ export default { icon: 'plus', label: 'Create template', listView: true, - args: ['url', 'name', 'displaytext', 'directdownload', 'zoneids', 'hypervisor', 'format', 'ostypeid', 'checksum', 'isextractable', 'passwordenabled', 'sshkeyenabled', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'isrouting', 'requireshvm'] + popup: true, + component: () => import('@/views/image/RegisterTemplate.vue') }, { api: 'getUploadParamsForTemplate', @@ -138,7 +139,6 @@ export default { label: 'Register ISO', listView: true, popup: true, - show: (record, user, apis) => { return 'registerIso' in apis }, component: () => import('@/views/image/RegisterIso.vue') }, { diff --git a/src/locales/en.json b/src/locales/en.json index a65f200..5a25940 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -290,7 +290,6 @@ "isCustomized": "Custom Disk Size", "isCustomizedIops": "Custom IOPS", "isDedicated": "Dedicate", -"isExtractable": "Extractable", "isFeatured": "Featured", "isForced": "Force Delete", "isManaged": "Managed", @@ -303,7 +302,7 @@ "isdedicated": "Dedicated", "isdefault": "Is Default", "isdynamicallyscalable": "Dynamically Scalable", -"isextractable": "extractable", +"isextractable": "Extractable", "isfeatured": "Featured", "iso": "ISO", "isolatedpvlanId": "Secondary Isolated VLAN ID", @@ -466,7 +465,7 @@ "label.add.vpc.offering": "Add VPC Offering", "label.add.vpn.customer.gateway": "Add VPN Customer Gateway", "label.add.zone": "Add Zone", -"label.all.zone": "All Zone", +"label.all.zone": "All Zones", "label.archive": "Archive", "label.archive.alerts": "Archive alerts", "label.archive.events": "Archive events", @@ -533,6 +532,8 @@ "label.enable.vpc.offering": "Enable VPC offering", "label.enable.vpn": "Enable Remote Access VPN", "label.enter.token": "Enter token", +"label.error.zone.combined": "All Zones cannot be combined with any other zone", +"label.french.azerty.keyboard": "French AZERTY keyboard", "label.globo.dns.configuration": "GloboDNS Configuration", "label.gslb.assigned.lb.more": "Assign more load balancing", "label.gslb.delete": "Delete GSLB", @@ -541,6 +542,7 @@ "label.ha.disable": "Disable HA", "label.ha.enable": "Enable HA", "label.instanciate.template.associate.profile.blade": "Instanciate Template and Associate Profile to Blade", +"label.japanese.keyboard": "Japanese keyboard", "label.link.domain.to.ldap": "Link Domain to LDAP", "label.make.project.owner": "Make account project owner", "label.metrics": "Metrics", @@ -589,9 +591,12 @@ "label.set.default.NIC": "Set default NIC", "label.shutdown.provider": "Shutdown provider", "label.snapshot.schedule": "Set up Recurring Snapshot", +"label.standard.us.keyboard": "Standard (US) keyboard", +"label.simplified.chinese.keyboard": "Simplified Chinese keyboard", "label.start.lb.vm": "Start LB VM", "label.stop.lb.vm": "Stop LB VM", "label.suspend.project": "Suspend Project", +"label.uk.keyboard": "UK keyboard", "label.update.vmware.datacenter": "Update VMware datacenter", "label.upgrade.router.newer.template": "Upgrade Router to Use Newer Template", "label.upload": "Upload", @@ -853,6 +858,7 @@ "specifyipranges": "Specify IP ranges", "specifyvlan": "Specify VLAN", "sshkeypair": "New SSH Key Pair", +"sshkeyenabled": "SSH Enabled", "startdate": "By date (start)", "startip": "Start IP", "startipv4": "IPv4 Start IP", diff --git a/src/views/image/RegisterIso.vue b/src/views/image/RegisterIso.vue index 96dd2d6..ec44460 100644 --- a/src/views/image/RegisterIso.vue +++ b/src/views/image/RegisterIso.vue @@ -206,7 +206,7 @@ export default { this.$emit('refresh-data') this.$notification.success({ message: 'Register ISO', - description: 'Sucessfully registered ISO' + description: 'Sucessfully registered ISO ' + params.name }) }).catch(error => { this.$notification.error({ diff --git a/src/views/image/RegisterTemplate.vue b/src/views/image/RegisterTemplate.vue new file mode 100644 index 0000000..5f5f061 --- /dev/null +++ b/src/views/image/RegisterTemplate.vue @@ -0,0 +1,798 @@ +// 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>