ui: CreateNetwork isolated/L2 form, added accounts list under selected domain (#7393)

Currently create network form takes account name (manual entry) as one of the parameters. During network creation we check if the given account name is under selected domain.

Here with this PR we are listing accounts under the selected domain.

Author: harikrishna-patnala

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -85,6 +85,36 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+          <a-form-item ref="account" name="account" v-if="accountVisible">
+            <template #label>
+              <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
+            </template>
+            <a-select
+             v-model:value="form.account"
+              showSearch
+              optionFilterProp="label"
+              :filterOption="(input, option) => {
+                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="accountLoading"
+              :placeholder="apiParams.account.description"
+              @change="val => { handleAccountChange(accounts[val]) }">
+              <a-select-option v-for="(opt, optIndex) in accounts" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item
+            ref="networkdomain"
+            name="networkdomain"
+            v-if="!isObjectEmpty(selectedNetworkOffering) && !selectedNetworkOffering.forvpc">
+            <template #label>
+              <tooltip-label :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
+            </template>
+            <a-input
+             v-model:value="form.networkdomain"
+              :placeholder="apiParams.networkdomain.description"/>
+          </a-form-item>
           <a-form-item ref="networkofferingid" name="networkofferingid">
             <template #label>
               <tooltip-label :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
@@ -261,28 +291,6 @@
               </a-col>
             </a-row>
           </div>
-          <a-form-item
-            ref="networkdomain"
-            name="networkdomain"
-            v-if="!isObjectEmpty(selectedNetworkOffering) && !selectedNetworkOffering.forvpc">
-            <template #label>
-              <tooltip-label :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
-            </template>
-            <a-input
-             v-model:value="form.networkdomain"
-              :placeholder="apiParams.networkdomain.description"/>
-          </a-form-item>
-          <a-form-item
-            ref="account"
-            name="account"
-            v-if="accountVisible">
-            <template #label>
-              <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
-            </template>
-            <a-input
-             v-model:value="form.account"
-              :placeholder="apiParams.account.description"/>
-          </a-form-item>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
@@ -339,6 +347,10 @@ export default {
       domains: [],
       domainLoading: false,
       selectedDomain: {},
+      accountVisible: isAdminOrDomainAdmin(),
+      accounts: [],
+      accountLoading: false,
+      selectedAccount: {},
       zones: [],
       zoneLoading: false,
       selectedZone: {},
@@ -348,7 +360,6 @@ export default {
       vpcs: [],
       vpcLoading: false,
       selectedVpc: {},
-      accountVisible: isAdminOrDomainAdmin(),
       privateMtuMax: 1500,
       publicMtuMax: 1500,
       minMTU: 68,
@@ -466,8 +477,12 @@ export default {
       this.accountVisible = domain.id !== '-1'
       if (isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
+        this.fetchAccounts()
       }
     },
+    handleAccountChange (account) {
+      this.selectedAccount = account
+    },
     updateVPCCheckAndFetchNetworkOfferingData () {
       if (this.vpc !== null) { // from VPC section
         this.fetchNetworkOfferingData(true)
@@ -544,6 +559,31 @@ export default {
         }
       })
     },
+    fetchAccounts () {
+      this.accountLoading = true
+      var params = {}
+      if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+        params.domainid = this.selectedDomain.id
+      }
+      this.accounts = [
+        {
+          id: '-1',
+          name: ' '
+        }
+      ]
+      this.selectedAccount = {}
+      api('listAccounts', params).then(json => {
+        const listAccounts = json.listaccountsresponse.account || []
+        this.accounts = this.accounts.concat(listAccounts)
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.accountLoading = false
+        if (this.arrayHasItems(this.accounts)) {
+          this.form.account = null
+        }
+      })
+    },
     handleSubmit () {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
@@ -570,8 +610,8 @@ export default {
         }
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account')) {
-            params.account = values.account
+          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
+            params.account = this.selectedAccount.name
           }
         }
         api('createNetwork', params).then(json => {

ui/src/views/network/CreateL2NetworkForm.vue

@@ -89,6 +89,25 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+          <a-form-item v-if="accountVisible" name="account" ref="account">
+            <template #label>
+              <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
+            </template>
+            <a-select
+             v-model:value="form.account"
+              showSearch
+              optionFilterProp="label"
+              :filterOption="(input, option) => {
+                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="accountLoading"
+              :placeholder="apiParams.account.description"
+              @change="val => { handleAccountChange(accounts[val]) }">
+              <a-select-option v-for="(opt, optIndex) in accounts" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
           <a-form-item name="networkofferingid" ref="networkofferingid">
             <template #label>
               <tooltip-label :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
@@ -164,14 +183,6 @@
               v-model:value="form.isolatedpvlan"
               :placeholder="apiParams.isolatedpvlan.description"/>
           </a-form-item>
-          <a-form-item v-if="accountVisible" name="account" ref="account">
-            <template #label>
-              <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
-            </template>
-            <a-input
-              v-model:value="form.account"
-              :placeholder="apiParams.account.description"/>
-          </a-form-item>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
@@ -227,13 +238,16 @@ export default {
       domains: [],
       domainLoading: false,
       selectedDomain: {},
+      accountVisible: isAdminOrDomainAdmin(),
+      accounts: [],
+      accountLoading: false,
+      selectedAccount: {},
       zones: [],
       zoneLoading: false,
       selectedZone: {},
       networkOfferings: [],
       networkOfferingLoading: false,
       selectedNetworkOffering: {},
-      accountVisible: isAdminOrDomainAdmin(),
       isolatePvlanType: 'none'
     }
   },
@@ -336,8 +350,12 @@ export default {
       this.accountVisible = domain.id !== '-1'
       if (isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
+        this.fetchAccounts()
       }
     },
+    handleAccountChange (account) {
+      this.selectedAccount = account
+    },
     updateVPCCheckAndFetchNetworkOfferingData () {
       if (this.vpc !== null) { // from VPC section
         this.fetchNetworkOfferingData(true)
@@ -390,6 +408,31 @@ export default {
     handleNetworkOfferingChange (networkOffering) {
       this.selectedNetworkOffering = networkOffering
     },
+    fetchAccounts () {
+      this.accountLoading = true
+      var params = {}
+      if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+        params.domainid = this.selectedDomain.id
+      }
+      this.accounts = [
+        {
+          id: '-1',
+          name: ' '
+        }
+      ]
+      this.selectedAccount = {}
+      api('listAccounts', params).then(json => {
+        const listAccounts = json.listaccountsresponse.account || []
+        this.accounts = this.accounts.concat(listAccounts)
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.accountLoading = false
+        if (this.arrayHasItems(this.accounts)) {
+          this.form.account = null
+        }
+      })
+    },
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
@@ -410,8 +453,8 @@ export default {
         }
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account')) {
-            params.account = values.account
+          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
+            params.account = this.selectedAccount.name
           }
         }
         if (this.isValidValueForKey(values, 'isolatedpvlantype') && values.isolatedpvlantype !== 'none') {