From b5a438162f7dad5f1f34b037b1a24d608a159491 Mon Sep 17 00:00:00 2001
From: Hoang Nguyen <hoangnm@unitech.vn>
Date: Wed, 15 Jan 2020 13:51:36 +0700
Subject: [PATCH] image: register template action form (#92)

This implements a customer register registration form.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: hoangnm <hoangcit92@gmail.com>
Co-authored-by: Rohit Yadav <rohit@apache.org>
---
 ui/src/components/view/ActionButton.vue |   4 +-
 ui/src/components/view/ListView.vue     |   3 +
 ui/src/components/widgets/OsLogo.vue    |   2 +-
 ui/src/config/section/image.js          |   4 +-
 ui/src/locales/en.json                  |  12 +-
 ui/src/views/image/RegisterIso.vue      |   2 +-
 ui/src/views/image/RegisterTemplate.vue | 798 ++++++++++++++++++++++++
 7 files changed, 816 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/views/image/RegisterTemplate.vue

diff --git a/ui/src/components/view/ActionButton.vue b/ui/src/components/view/ActionButton.vue
index 13bc00c38ba..fbd842a9d87 100644
--- a/ui/src/components/view/ActionButton.vue
+++ b/ui/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/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 2db30a5f1f9..0d594fcd04f 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/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/ui/src/components/widgets/OsLogo.vue b/ui/src/components/widgets/OsLogo.vue
index 7cc6dbcc36e..8739cd169fe 100644
--- a/ui/src/components/widgets/OsLogo.vue
+++ b/ui/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/ui/src/config/section/image.js b/ui/src/config/section/image.js
index 38bfe2a6f5d..ffa7f6b90f1 100644
--- a/ui/src/config/section/image.js
+++ b/ui/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/ui/src/locales/en.json b/ui/src/locales/en.json
index d9b2dbab4ce..d73e17db4e8 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -292,7 +292,6 @@
 "isCustomized": "Custom Disk Size",
 "isCustomizedIops": "Custom IOPS",
 "isDedicated": "Dedicate",
-"isExtractable": "Extractable",
 "isFeatured": "Featured",
 "isForced": "Force Delete",
 "isManaged": "Managed",
@@ -305,7 +304,7 @@
 "isdedicated": "Dedicated",
 "isdefault": "Is Default",
 "isdynamicallyscalable": "Dynamically Scalable",
-"isextractable": "extractable",
+"isextractable": "Extractable",
 "isfeatured": "Featured",
 "iso": "ISO",
 "isolatedpvlanId": "Secondary Isolated VLAN ID",
@@ -468,7 +467,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",
@@ -535,6 +534,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",
@@ -543,6 +544,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",
@@ -591,9 +593,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",
@@ -855,6 +860,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/ui/src/views/image/RegisterIso.vue b/ui/src/views/image/RegisterIso.vue
index 96dd2d6041f..ec44460863d 100644
--- a/ui/src/views/image/RegisterIso.vue
+++ b/ui/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/ui/src/views/image/RegisterTemplate.vue b/ui/src/views/image/RegisterTemplate.vue
new file mode 100644
index 00000000000..5f5f061b9ee
--- /dev/null
+++ b/ui/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>