From a573fcde357db751a255b09e2151138da98e4e36 Mon Sep 17 00:00:00 2001
From: Harikrishna Patnala <harikrishna.patnala@gmail.com>
Date: Mon, 3 Apr 2023 13:54:02 +0530
Subject: [PATCH 1/3] CreateNetwork isolated/L2 form, added accounts list under
 selected domain

---
 .../network/CreateIsolatedNetworkForm.vue     | 56 ++++++++++++++++---
 ui/src/views/network/CreateL2NetworkForm.vue  | 53 ++++++++++++++++--
 2 files changed, 96 insertions(+), 13 deletions(-)

diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 36d5e7cf516b..c6c1b551c85c 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -272,16 +272,24 @@
              v-model:value="form.networkdomain"
               :placeholder="apiParams.networkdomain.description"/>
           </a-form-item>
-          <a-form-item
-            ref="account"
-            name="account"
-            v-if="accountVisible">
+          <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
+            <a-select
              v-model:value="form.account"
-              :placeholder="apiParams.account.description"/>
+              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>
           <div :span="24" class="action-button">
             <a-button
@@ -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.accountid = 0
+        }
+      })
+    },
     handleSubmit () {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
@@ -571,7 +611,7 @@ export default {
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
           if (this.isValidTextValueForKey(values, 'account')) {
-            params.account = values.account
+            params.account = this.selectedAccount.name
           }
         }
         api('createNetwork', params).then(json => {
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 1aae3955c941..b0959f8785b6 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -168,9 +168,20 @@
             <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-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>
           <div :span="24" class="action-button">
             <a-button
@@ -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.accountid = 0
+        }
+      })
+    },
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
@@ -411,7 +454,7 @@ export default {
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
           if (this.isValidTextValueForKey(values, 'account')) {
-            params.account = values.account
+            params.account = this.selectedAccount.name
           }
         }
         if (this.isValidValueForKey(values, 'isolatedpvlantype') && values.isolatedpvlantype !== 'none') {

From 7adb8b231be49c55bb6fc4d24bd29e2f9ee5e379 Mon Sep 17 00:00:00 2001
From: Harikrishna Patnala <harikrishna.patnala@gmail.com>
Date: Mon, 3 Apr 2023 16:25:47 +0530
Subject: [PATCH 2/3] Fixed list accounts when empty

---
 ui/src/views/network/CreateIsolatedNetworkForm.vue | 6 +++---
 ui/src/views/network/CreateL2NetworkForm.vue       | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index c6c1b551c85c..4b2061e70d48 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -573,14 +573,14 @@ export default {
       ]
       this.selectedAccount = {}
       api('listAccounts', params).then(json => {
-        const listAccounts = json.listaccountsresponse.account
+        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.accountid = 0
+          this.form.account = null
         }
       })
     },
@@ -610,7 +610,7 @@ export default {
         }
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account')) {
+          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
             params.account = this.selectedAccount.name
           }
         }
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index b0959f8785b6..e842aee428dd 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -422,14 +422,14 @@ export default {
       ]
       this.selectedAccount = {}
       api('listAccounts', params).then(json => {
-        const listAccounts = json.listaccountsresponse.account
+        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.accountid = 0
+          this.form.account = null
         }
       })
     },
@@ -453,7 +453,7 @@ export default {
         }
         if ('domainid' in values && values.domainid > 0) {
           params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account')) {
+          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
             params.account = this.selectedAccount.name
           }
         }

From ba9c84e685d7b18b88062108c1623db5f8ebcce4 Mon Sep 17 00:00:00 2001
From: Harikrishna Patnala <harikrishna.patnala@gmail.com>
Date: Mon, 3 Apr 2023 17:10:37 +0530
Subject: [PATCH 3/3] Reodering

---
 .../network/CreateIsolatedNetworkForm.vue     | 60 +++++++++----------
 ui/src/views/network/CreateL2NetworkForm.vue  | 38 ++++++------
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 4b2061e70d48..d42dc90d8230 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/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,36 +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-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>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index e842aee428dd..56d34b2a6bc3 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/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,25 +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-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>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"