storage: Add storage policies field for DiskOffering and Primary storage creation Forms (#548)

Add storage policies field for DiskOffering, COmputeOffering and Primary storage creation Forms

Co-authored-by: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/locales/en.json

@@ -2224,6 +2224,7 @@
 "label.vms.in.tier": "VMs in tier",
 "label.vmstate": "VM State",
 "label.vmtotal": "Total of VMs",
+"label.vmware.storage.policy": "VMWare Storage Policy",
 "label.vmwaredcid": "VMware Datacenter ID",
 "label.vmwaredcname": "VMware Datacenter Name",
 "label.vmwaredcvcenter": "VMware Datacenter vCenter",

ui/src/views/infra/AddPrimaryStorage.vue

@@ -89,12 +89,13 @@
           </a-select>
         </a-form-item>
         <div
-          v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster'">
+          v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster' ||
+            (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
           <a-form-item :label="$t('label.server')">
             <a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
           </a-form-item>
         </div>
-        <div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || protocolSelected === 'preSetup'|| protocolSelected === 'SharedMountPoint'">
+        <div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || (protocolSelected === 'PreSetup' && hypervisorType !== 'VMware') || protocolSelected === 'SharedMountPoint'">
           <a-form-item :label="$t('label.path')">
             <a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
           </a-form-item>
@@ -118,7 +119,7 @@
             <a-input v-decorator="['lun', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
         </div>
-        <div v-if="protocolSelected === 'vmfs'">
+        <div v-if="protocolSelected === 'vmfs' || (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
           <a-form-item :label="$t('label.vcenterdatacenter')">
             <a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
@@ -312,9 +313,12 @@ export default {
       if (this.hypervisorType === 'KVM') {
         this.protocols = ['nfs', 'SharedMountPoint', 'RBD', 'CLVM', 'Gluster', 'custom']
       } else if (this.hypervisorType === 'XenServer') {
-        this.protocols = ['nfs', 'preSetup', 'iscsi', 'custom']
+        this.protocols = ['nfs', 'PreSetup', 'iscsi', 'custom']
       } else if (this.hypervisorType === 'VMware') {
         this.protocols = ['nfs', 'vmfs', 'custom']
+        if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+          this.protocols = ['nfs', 'PreSetup', 'datastorecluster', 'custom']
+        }
       } else if (this.hypervisorType === 'Hyperv') {
         this.protocols = ['SMB']
       } else if (this.hypervisorType === 'Ovm') {
@@ -358,6 +362,15 @@ export default {
       }
       return url
     },
+    datastoreclusterURL (server, path) {
+      var url
+      if (server.indexOf('://') === -1) {
+        url = 'datastorecluster://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
     ocfs2URL (server, path) {
       var url
       if (server.indexOf('://') === -1) {
@@ -475,8 +488,22 @@ export default {
           Object.keys(smbParams).forEach((key, index) => {
             params['details[' + index.toString() + '].' + key] = smbParams[key]
           })
-        } else if (values.protocol === 'PreSetup') {
+        } else if (values.protocol === 'PreSetup' && values.hypervisor !== 'VMware') {
           url = this.presetupURL(server, path)
+        } else if (values.protocol === 'PreSetup' && values.hypervisor === 'VMware') {
+          path = values.vCenterDataCenter
+          if (path.substring(0, 1) !== '/') {
+            path = '/' + path
+          }
+          path += '/' + values.vCenterDataStore
+          url = this.presetupURL(server, path)
+        } else if (values.protocol === 'datastorecluster' && values.hypervisor === 'VMware') {
+          path = values.vCenterDataCenter
+          if (path.substring(0, 1) !== '/') {
+            path = '/' + path
+          }
+          path += '/' + values.vCenterDataStore
+          url = this.datastoreclusterURL(server, path)
         } else if (values.protocol === 'ocfs2') {
           url = this.ocfs2URL(server, path)
         } else if (values.protocol === 'SharedMountPoint') {

ui/src/views/offering/AddComputeOffering.vue

@@ -688,6 +688,7 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
+            @select="val => fetchvSphereStoragePolicies(val)"
             :loading="zoneLoading"
             :placeholder="this.$t('label.zoneid')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
@@ -695,6 +696,21 @@
             </a-select-option>
           </a-select>
         </a-form-item>
+        <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
+          <span slot="label">
+            {{ $t('label.vmware.storage.policy') }}
+            <a-tooltip :title="apiParams.storagetype.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            v-decorator="['storagepolicy']"
+            :placeholder="apiParams.storagepolicy.description">
+            <a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
+              {{ policy.name || policy.id }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
         <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
@@ -727,9 +743,11 @@ export default {
       domains: [],
       domainLoading: false,
       selectedZones: [],
+      selectedZoneIndex: [],
       zones: [],
       zoneLoading: false,
       selectedDeployementPlanner: null,
+      storagePolicies: null,
       storageTags: [],
       storageTagLoading: false,
       deploymentPlanners: [],
@@ -760,7 +778,11 @@ export default {
     }
   },
   beforeCreate () {
-    this.form = this.$form.createForm(this)
+    this.form = this.$form.createForm(this, {
+      onValuesChange: (_, values) => {
+        this.selectedZoneIndex = values.zoneid
+      }
+    })
     this.apiParams = {}
     var apiConfig = this.$store.getters.apis.createServiceOffering || {}
     apiConfig.params.forEach(param => {
@@ -848,6 +870,21 @@ export default {
         this.deploymentPlannerLoading = false
       })
     },
+    fetchvSphereStoragePolicies (zoneIndex) {
+      if (zoneIndex === 0 || this.selectedZoneIndex.length > 1) {
+        this.storagePolicies = null
+        return
+      }
+      const zoneid = this.zones[zoneIndex].id
+      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+        this.storagePolicies = []
+        api('listVsphereStoragePolicies', {
+          zoneid: zoneid
+        }).then(response => {
+          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
+        })
+      }
+    },
     handleStorageTypeChange (val) {
       this.storageType = val
     },
@@ -1016,6 +1053,9 @@ export default {
         if (zoneId) {
           params.zoneid = zoneId
         }
+        if (values.storagepolicy) {
+          params.storagepolicy = values.storagepolicy
+        }
         api('createServiceOffering', params).then(json => {
           const message = this.isSystem
             ? `${this.$t('message.create.service.offering')}: `

ui/src/views/offering/AddDiskOffering.vue

@@ -398,6 +398,7 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
+            @select="val => fetchvSphereStoragePolicies(val)"
             :loading="zoneLoading"
             :placeholder="this.$t('label.zoneid')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
@@ -405,6 +406,21 @@
             </a-select-option>
           </a-select>
         </a-form-item>
+        <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
+          <span slot="label">
+            {{ $t('label.vmware.storage.policy') }}
+            <a-tooltip :title="apiParams.storagetype.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            v-decorator="['storagepolicy']"
+            :placeholder="apiParams.storagepolicy.description">
+            <a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
+              {{ policy.name || policy.id }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
         <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
@@ -420,6 +436,10 @@ import { api } from '@/api'
 export default {
   name: 'AddDiskOffering',
   props: {
+    resource: {
+      type: Object,
+      required: true
+    }
   },
   components: {
   },
@@ -432,8 +452,9 @@ export default {
       isCustomizedDiskIops: false,
       writeCacheType: 'none',
       selectedDomains: [],
-      selectedZones: [],
+      selectedZoneIndex: [],
       storageTags: [],
+      storagePolicies: null,
       storageTagLoading: false,
       isPublic: true,
       domains: [],
@@ -444,7 +465,11 @@ export default {
     }
   },
   beforeCreate () {
-    this.form = this.$form.createForm(this)
+    this.form = this.$form.createForm(this, {
+      onValuesChange: (_, values) => {
+        this.selectedZoneIndex = values.zoneid
+      }
+    })
     this.apiParams = {}
     var apiConfig = this.$store.getters.apis.createDiskOffering || {}
     apiConfig.params.forEach(param => {
@@ -518,6 +543,21 @@ export default {
         this.storageTagLoading = false
       })
     },
+    fetchvSphereStoragePolicies (zoneIndex) {
+      if (zoneIndex === 0 || this.selectedZoneIndex.length > 1) {
+        this.storagePolicies = null
+        return
+      }
+      const zoneid = this.zones[zoneIndex].id
+      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+        this.storagePolicies = []
+        api('listVsphereStoragePolicies', {
+          zoneid: zoneid
+        }).then(response => {
+          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
+        })
+      }
+    },
     handleStorageTypeChange (val) {
       this.storageType = val
     },
@@ -606,6 +646,9 @@ export default {
         if (zoneId) {
           params.zoneid = zoneId
         }
+        if (values.storagepolicy) {
+          params.storagepolicy = values.storagepolicy
+        }
         api('createDiskOffering', params).then(json => {
           this.$message.success(`${this.$t('message.disk.offering.created')} ${values.name}}`)
         }).catch(error => {